diff --git a/package-lock.json b/package-lock.json index bf12ee3..fd364d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@types/react-dom": "^17.0.11", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-icons": "^4.3.1", "react-scripts": "5.0.0", "typescript": "^4.5.4", "web-vitals": "^2.1.2" @@ -13214,6 +13215,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "node_modules/react-icons": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz", + "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -25459,6 +25468,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "react-icons": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz", + "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index 2f5f07f..1b97a4b 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@types/react-dom": "^17.0.11", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-icons": "^4.3.1", "react-scripts": "5.0.0", "typescript": "^4.5.4", "web-vitals": "^2.1.2" diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index a11777c..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/index.html b/public/index.html index aa069f2..8281f36 100644 --- a/public/index.html +++ b/public/index.html @@ -1,43 +1,16 @@ - - - - - - - - - - - React App - - - -
- - - + \ No newline at end of file diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 080d6c7..0000000 --- a/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.test.tsx b/src/App.test.tsx deleted file mode 100644 index 2a68616..0000000 --- a/src/App.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/App.tsx b/src/App.tsx index a53698a..d577cd4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,24 +1,55 @@ -import React from 'react'; -import logo from './logo.svg'; -import './App.css'; +import { useState } from "react"; +import Exercises from "./components/Exercises"; +import Header from "./components/Header"; +import WorkoutSelector from "./components/WorkoutSelector"; +import { CurrentExerciseType } from "./types"; + + +enum Stat { Reps, Sets, Weight, Time, Steps, MaxHR, AvgHR, StepsPerMin }; function App() { + const [currentExercises, setExercises]: [CurrentExerciseType[], any] = useState([ + { + name: "Squat", + stats: { "Weight": 10 } + }, + { + name: "Squat", + stats: {} + } + ]); + + function deleteCurrentExercise(deleteIndex: number) { + setExercises(currentExercises.filter((exercise, index) => (index !== deleteIndex))); + } + + function addCurrentExercise() { + setExercises([...currentExercises, + { + name: "Squat", + stats: {} + }]) + } + + function addStat(addIndex: number) { + for (const checkStat in Stat) { + //console.log(checkStat, typeof (checkStat)); + } + console.log(currentExercises[addIndex].stats) + //setExercises([..]) + } + + return (
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
+
+ +
+ +
+ {currentExercises.length > 0 ? + : 'No Exercises in Workout' + }
); } diff --git a/src/components/Exercise.tsx b/src/components/Exercise.tsx new file mode 100644 index 0000000..93b4172 --- /dev/null +++ b/src/components/Exercise.tsx @@ -0,0 +1,16 @@ +import { CurrentExerciseType } from "../types"; +import InputStat from "./InputStat"; + +function Exercise({ currentExercise, deleteCurrentExercise, addStat }: { currentExercise: CurrentExerciseType, deleteCurrentExercise: () => void, addStat: () => void }) { + return ( +
+ Exercise : + {Object.entries(currentExercise.stats).map(([stat, value], index) => )} + + +
+ ); +} + + +export default Exercise; \ No newline at end of file diff --git a/src/components/Exercises.tsx b/src/components/Exercises.tsx new file mode 100644 index 0000000..0fea5a8 --- /dev/null +++ b/src/components/Exercises.tsx @@ -0,0 +1,14 @@ +import { CurrentExerciseType } from "../types"; +import Exercise from "./Exercise"; + +function Exercises({ currentExercises, deleteCurrentExercise, addStat }: { currentExercises: CurrentExerciseType[], deleteCurrentExercise: (index: number) => void, addStat: (index: number) => void }) { + //console.log(currentExercises); + return ( + <> + {currentExercises.map((exercise, index) => ( deleteCurrentExercise(index)} addStat={() => addStat(index)} />))} + + ); +} + + +export default Exercises; \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..5c9b167 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,9 @@ +function Header() { + return ( +
+

Gains

+
+ ); +} + +export default Header; \ No newline at end of file diff --git a/src/components/InputStat.tsx b/src/components/InputStat.tsx new file mode 100644 index 0000000..15fa920 --- /dev/null +++ b/src/components/InputStat.tsx @@ -0,0 +1,10 @@ +function InputStat({ stat, statType }: { stat: string, statType?: string }) { + return ( +
+ : +
+ ); +} + + +export default InputStat; \ No newline at end of file diff --git a/src/components/WorkoutSelector.tsx b/src/components/WorkoutSelector.tsx new file mode 100644 index 0000000..59b096c --- /dev/null +++ b/src/components/WorkoutSelector.tsx @@ -0,0 +1,13 @@ +function WorkoutSelector() { + return ( +
+

Predefined Workouts

+ + + + +
+ ); +} + +export default WorkoutSelector; \ No newline at end of file diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/setupTests.ts b/src/setupTests.ts deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.ts +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/src/types.d.ts b/src/types.d.ts new file mode 100644 index 0000000..b4676a0 --- /dev/null +++ b/src/types.d.ts @@ -0,0 +1,4 @@ +export type CurrentExerciseType = { + name: string, + stats: { [stat: Stat]: any }, +}; \ No newline at end of file