first "working" beta

gymlr · Sep 17, 2022 · 501dedb · 501dedb
1 parent a5c3964
commit 501dedb
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 62 deletions.
diff --git a/pages/components/mscle.tsx b/pages/components/mscle.tsx
@@ -1,38 +1,18 @@
-import { useState } from "react";
-import Helmet from "react-helmet";
-
-//import styles from "./mscle.module.css";
-const fetch = require('cross-fetch');
+import React, { useState } from "react";
 import { ArrowRightIcon } from '@heroicons/react/24/solid'
 
-const options = {
-    method: 'GET',
-    headers: {
-        'X-RapidAPI-Key': 'bb95b52accmsh6b99c5732ebfb70p16813ejsn3dd576dca84d',
-        'X-RapidAPI-Host': 'exercises-by-api-ninjas.p.rapidapi.com'
-    }
-};
-
-// https://api-ninjas.com/api/exercises
-
-// TODO: 
-// - text input for muscle group
-// - return one exercise from that group, display difficulty, maybe some other info
-// - button to get another exercise
-// - button to delete the current excersice (states, take example from old project)
-
-function Mscle() {
+export function Mscle() {
     const [word, setWord] = useState("");
-    const [muscle] = useState("");
+    const [muscle, setError] = useState("");
     const [words, setWords] = useState<string[]>();
 
     const options = {
-        method: 'GET',
+        method: "GET",
         headers: {
-          'X-RapidAPI-Key': '',
-          'X-RapidAPI-Host': ''
+            "X-RapidAPI-Key": "",
+            "X-RapidAPI-Host": ""
         }
-      };
+    };
 
     const url = `https://exercises-by-api-ninjas.p.rapidapi.com/v1/exercises?muscle=${muscle}`;
 
@@ -44,49 +24,67 @@ function Mscle() {
         e.preventDefault();
 
         try {
-            const response = await fetch(url, options)
+            const response = await fetch(url, options);
             const data = await response.json();
 
-            setWords(data?.name);
+            const random = Math.floor(Math.random() * data.length);
+            setWords(data[random].name);
         } catch (error) {
-
+            // TODO: Handle error
         }
-    }
+    };
 
     return (
-        <><div className="flex flex-col justify-center h-screen items-center bg-backgroundColor" >
-            <form onSubmit={handleSubmit}>
-                <div className="container h-screen flex justify-center items-center">
-                    <div className="relative">
-                        <div className="absolute top-4 left-3">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
-                                <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
-                            </svg>
-
-                        </div>
-                        <input type="text"
-                               className="h-14 w-96 pl-10 pr-20 rounded-lg z-0 focus:shadow focus:outline-none"
-                               placeholder="Search Mscle..." />
+        <>
+            <div className="flex flex-col justify-center h-screen items-center bg-backgroundColor">
+                <form onSubmit={handleSubmit}>
+                    <div className="container h-screen flex justify-center items-center">
+                        <div className="relative">
+                            <div className="absolute top-4 left-3">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    strokeWidth={1.5}
+                                    stroke="currentColor"
+                                    className="w-6 h-6"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"
+                                    />
+                                </svg>
+                            </div>
+                            <input
+                                type="text"
+                                className="h-14 w-96 pl-10 pr-20 rounded-lg z-0 focus:shadow focus:outline-none"
+                                placeholder="Search Mscle..."
+                            />
                             <div className="absolute top-2 right-2">
-
                                 <button className="h-10 w-20 text-buttonText rounded-lg bg-button focus:ring-4 shadow-lg transform active:scale-y-75 transition-transform hover:animate-pulse">
                                     Go
                                 </button>
-
                             </div>
+                        </div>
                     </div>
-                </div>
-            </form>
-        </div>
+                </form>
+            </div>
             <div>
-                {words && typeof words === 'string' ? (
+                {words && typeof words === "string" ? (
                     <p>{words}</p>
-                ) : words?.map((word, index) => (
-                    <p key={index}> {word} </p>
-                ))}
+                ) : (
+                    // TODO: Fix errors
+                    words?.map((word, index) => (
+                        <p key={index}>
+                            {" "}
+                            {word.name} - {word.muscle}{" "}
+                        </p>
+                    ))
+                )}
             </div>
         </>
-    )
+    );
 }
 
 export default Mscle;
diff --git a/yarn.lock b/yarn.lock
@@ -73,9 +73,14 @@
   dependencies:
     "glob" "7.1.7"
 
-"@next/[email protected]":
-  "integrity" "sha512-9s4d3Mhii+WFce8o8Jok7WC3Bawkr9wEUU++SJRptjU1L5tsfYJMrSYCACHLhZujziNDLyExe4Hwwsccps1sfg=="
-  "resolved" "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.0.tgz"
+"@next/[email protected]":
+  "integrity" "sha512-4ajhIuVU9PeQCMMhdDgZTLrHmjbOUFuIyg6J19hZqwEwDTSqQyrSLkbJs2Nd7IRiM6Ul/XyrtEFCpk4k+xD2+w=="
+  "resolved" "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.0.tgz"
+  "version" "12.3.0"
+
+"@next/[email protected]":
+  "integrity" "sha512-U092RBYbaGxoMAwpauePJEu2PuZSEoUCGJBvsptQr2/2XIMwAJDYM4c/M5NfYEsBr+yjvsYNsOpYfeQ88D82Yg=="
+  "resolved" "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.0.tgz"
   "version" "12.3.0"
 
 "@nodelib/[email protected]":
@@ -901,11 +906,6 @@
   "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   "version" "1.0.0"
 
-"fsevents@~2.3.2":
-  "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
-  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
-  "version" "2.3.2"
-
 "function-bind@^1.1.1":
   "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
   "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"