Fixed testing.
testing now uses the same components as the webpage
This commit is contained in:
Hu90mt990
parent
c1d438e889
commit
04c7380cc2
|
|
@ -20,7 +20,7 @@ import { useAuth } from '../../context/authUserContext';
|
|||
// Get reference to users collection
|
||||
const usersCollectionRef = collection(db, 'users');
|
||||
|
||||
export default function Element({ element, type, onDelete, allowEditing }) {
|
||||
export default function Element({ element, type, onDelete, testAuth }) {
|
||||
/* Paths of the images of the favourite button */
|
||||
const star = '/images/star.png';
|
||||
const starFilled = '/images/starFilled.png';
|
||||
|
|
@ -31,12 +31,30 @@ export default function Element({ element, type, onDelete, allowEditing }) {
|
|||
/* Authenticate users for favourites */
|
||||
const { authUser } = useAuth();
|
||||
|
||||
const [currUser, setCurrUser] = useState(null);
|
||||
useEffect(() => {
|
||||
if (testAuth !== undefined) {
|
||||
setCurrUser(testAuth);
|
||||
} else {
|
||||
setCurrUser(authUser);
|
||||
}
|
||||
}, [authUser, testAuth]);
|
||||
|
||||
const [allowEditing, setAllowEditing] = useState(false);
|
||||
useEffect(() => {
|
||||
if (currUser) {
|
||||
if (currUser.role === 0) {
|
||||
setAllowEditing(true);
|
||||
}
|
||||
}
|
||||
}, [currUser]);
|
||||
|
||||
useEffect(() => {
|
||||
/* Set the state of the favourite button based on the user's favourites */
|
||||
const setFavouriteButton = () => {
|
||||
if (authUser) {
|
||||
if (currUser) {
|
||||
if (type === 'workouts') {
|
||||
if (authUser.favouriteWorkouts.includes(element.id)) {
|
||||
if (currUser.favouriteWorkouts.includes(element.id)) {
|
||||
setImgPath(starFilled);
|
||||
} else {
|
||||
setImgPath(star);
|
||||
|
|
@ -44,7 +62,7 @@ export default function Element({ element, type, onDelete, allowEditing }) {
|
|||
}
|
||||
|
||||
if (type === 'exercises') {
|
||||
if (authUser.favouriteExercises.includes(element.id)) {
|
||||
if (currUser.favouriteExercises.includes(element.id)) {
|
||||
setImgPath(starFilled);
|
||||
} else {
|
||||
setImgPath(star);
|
||||
|
|
@ -55,50 +73,50 @@ export default function Element({ element, type, onDelete, allowEditing }) {
|
|||
}
|
||||
};
|
||||
setFavouriteButton();
|
||||
}, [authUser, element.id, type]);
|
||||
}, [currUser, element.id, type]);
|
||||
|
||||
const updateFavWorkouts = async (newFavs) => {
|
||||
authUser.favouriteWorkouts = newFavs;
|
||||
const docRef = doc(usersCollectionRef, authUser.uid);
|
||||
currUser.favouriteWorkouts = newFavs;
|
||||
const docRef = doc(usersCollectionRef, currUser.uid);
|
||||
await updateDoc(docRef, {
|
||||
favouriteWorkouts: newFavs,
|
||||
});
|
||||
};
|
||||
|
||||
const updateFavExercises = async (newFavs) => {
|
||||
authUser.favouriteExercises = newFavs;
|
||||
const docRef = doc(usersCollectionRef, authUser.uid);
|
||||
currUser.favouriteExercises = newFavs;
|
||||
const docRef = doc(usersCollectionRef, currUser.uid);
|
||||
await updateDoc(docRef, {
|
||||
favouriteExercises: newFavs,
|
||||
});
|
||||
};
|
||||
|
||||
const removeFavWorkout = (elem) => {
|
||||
const newFavs = authUser.favouriteWorkouts.filter((val) => val !== elem);
|
||||
const newFavs = currUser.favouriteWorkouts.filter((val) => val !== elem);
|
||||
updateFavWorkouts(newFavs);
|
||||
};
|
||||
|
||||
const addToFavWorkouts = async (elem) => {
|
||||
authUser.favouriteWorkouts.push(elem);
|
||||
updateFavWorkouts(authUser.favouriteWorkouts);
|
||||
currUser.favouriteWorkouts.push(elem);
|
||||
updateFavWorkouts(currUser.favouriteWorkouts);
|
||||
};
|
||||
|
||||
const removeFavExercise = async (elem) => {
|
||||
const newFavs = authUser.favouriteExercises.filter((val) => val !== elem);
|
||||
const newFavs = currUser.favouriteExercises.filter((val) => val !== elem);
|
||||
updateFavExercises(newFavs);
|
||||
};
|
||||
|
||||
const addToFavExercises = async (elem) => {
|
||||
authUser.favouriteExercises.push(elem);
|
||||
updateFavExercises(authUser.favouriteExercises);
|
||||
currUser.favouriteExercises.push(elem);
|
||||
updateFavExercises(currUser.favouriteExercises);
|
||||
};
|
||||
|
||||
// Event handler if the favourite button is clicked on
|
||||
const toggleStar = (e) => {
|
||||
e.preventDefault();
|
||||
if (authUser) {
|
||||
if (currUser) {
|
||||
if (type === 'workouts') {
|
||||
if (authUser.favouriteWorkouts.includes(element.id)) {
|
||||
if (currUser.favouriteWorkouts.includes(element.id)) {
|
||||
removeFavWorkout(element.id);
|
||||
setImgPath(star);
|
||||
} else {
|
||||
|
|
@ -107,7 +125,7 @@ export default function Element({ element, type, onDelete, allowEditing }) {
|
|||
}
|
||||
}
|
||||
if (type === 'exercises') {
|
||||
if (authUser.favouriteExercises.includes(element.id)) {
|
||||
if (currUser.favouriteExercises.includes(element.id)) {
|
||||
removeFavExercise(element.id);
|
||||
setImgPath(star);
|
||||
} else {
|
||||
|
|
@ -119,27 +137,24 @@ export default function Element({ element, type, onDelete, allowEditing }) {
|
|||
};
|
||||
|
||||
const makeButton = () => {
|
||||
if (authUser) {
|
||||
if (type === 'exercises') {
|
||||
return (
|
||||
<EditButton
|
||||
type="exercise"
|
||||
id={element.id}
|
||||
name={element.name}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (type === 'exercises') {
|
||||
return (
|
||||
<EditButton
|
||||
type="workout"
|
||||
type="exercise"
|
||||
id={element.id}
|
||||
name={element.name}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
return (
|
||||
<EditButton
|
||||
type="workout"
|
||||
id={element.id}
|
||||
name={element.name}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const makeMuscles = () => {
|
||||
|
|
@ -167,19 +182,19 @@ export default function Element({ element, type, onDelete, allowEditing }) {
|
|||
<div className={styles.buttons}>
|
||||
<div className={styles.star}>
|
||||
<form>
|
||||
<Image
|
||||
<input
|
||||
title="favourite"
|
||||
type="image"
|
||||
src={imgPath}
|
||||
alt="star"
|
||||
width={50}
|
||||
height={50}
|
||||
width={28}
|
||||
height={28}
|
||||
onClick={toggleStar}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{allowEditing !== undefined && (
|
||||
<div className={styles.star}>{makeButton()}</div>
|
||||
)}
|
||||
{allowEditing && <div className={styles.star}>{makeButton()}</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ import React from 'react';
|
|||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
|
||||
// Custom components
|
||||
import ElementTest from '../Test/ElementTest';
|
||||
import Element from './Element';
|
||||
|
||||
// Test Data
|
||||
import { workouts } from '../../testData/testData';
|
||||
import { workouts, userAuth } from '../../testData/testData';
|
||||
|
||||
const toggleImgPath = (src) =>
|
||||
src.includes('star.png') ? '/images/starFilled.png' : '/images/star.png';
|
||||
|
|
@ -14,9 +14,9 @@ const toggleImgPath = (src) =>
|
|||
describe('The Favourite button', () => {
|
||||
it('Toggles on and off when clicked', () => {
|
||||
const element = workouts[0];
|
||||
render(<ElementTest element={element} type="workouts" />);
|
||||
render(<Element element={element} type="workouts" testAuth={userAuth} />);
|
||||
|
||||
const favBtn = screen.getByRole('button');
|
||||
const favBtn = screen.getByTitle('favourite');
|
||||
let expectedImgPath = toggleImgPath(favBtn.getAttribute('src'));
|
||||
|
||||
fireEvent.click(favBtn);
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@ export default function List({
|
|||
setSelected,
|
||||
type,
|
||||
onDelete,
|
||||
allowEditing,
|
||||
}) {
|
||||
// A function to handle when a new element is selected
|
||||
const handleChange = (e) => {
|
||||
|
|
@ -68,18 +67,13 @@ export default function List({
|
|||
key={element.id}
|
||||
id={`${listType}-${element.id}`}
|
||||
variant="light"
|
||||
name={listType}
|
||||
role={listType}
|
||||
value={element}
|
||||
>
|
||||
{selected === element.name ? (
|
||||
<SelectedElement element={element} type={type} />
|
||||
) : (
|
||||
<Element
|
||||
element={element}
|
||||
type={type}
|
||||
onDelete={onDelete}
|
||||
allowEditing={allowEditing}
|
||||
/>
|
||||
<Element element={element} type={type} onDelete={onDelete} />
|
||||
)}
|
||||
</ToggleButton>
|
||||
))
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// React
|
||||
import React from 'react';
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
import ListTest from '../Test/ListTest';
|
||||
import List from './List';
|
||||
|
||||
// Dummy data to render in List component
|
||||
import { workouts } from '../../testData/testData';
|
||||
|
|
@ -13,11 +13,12 @@ describe('The Search Bar', () => {
|
|||
const setSelected = jest.fn();
|
||||
|
||||
const list = render(
|
||||
<ListTest
|
||||
<List
|
||||
list={workouts}
|
||||
listType="radio"
|
||||
selected={selected}
|
||||
setSelected={setSelected}
|
||||
type="radio"
|
||||
type="workouts"
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
@ -31,8 +32,8 @@ describe('The Search Bar', () => {
|
|||
|
||||
// Expect only 'Push Workout' and 'Pull Workout to remain
|
||||
expect(items.length).toBe(2);
|
||||
expect(items[0].getAttribute('value') === 'Push Workout').toBeTruthy();
|
||||
expect(items[1].getAttribute('value') === 'Pull Workout').toBeTruthy();
|
||||
expect(items[0].getAttribute('id') === 'radio-0').toBeTruthy();
|
||||
expect(items[1].getAttribute('id') === 'radio-1').toBeTruthy();
|
||||
});
|
||||
|
||||
it('filters the correct items on uppercase input "P"', () => {
|
||||
|
|
@ -41,11 +42,12 @@ describe('The Search Bar', () => {
|
|||
const setSelected = jest.fn();
|
||||
|
||||
const list = render(
|
||||
<ListTest
|
||||
<List
|
||||
list={workouts}
|
||||
listType="radio"
|
||||
selected={selected}
|
||||
setSelected={setSelected}
|
||||
type="radio"
|
||||
type="workouts"
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
@ -59,9 +61,9 @@ describe('The Search Bar', () => {
|
|||
|
||||
// Expect only 'Push Workout' and 'Pull Workout to remain
|
||||
expect(items.length).toBe(3);
|
||||
expect(items[0].getAttribute('value') === 'Push Workout').toBeTruthy();
|
||||
expect(items[1].getAttribute('value') === 'Pull Workout').toBeTruthy();
|
||||
expect(items[2].getAttribute('value') === 'Upper Workout').toBeTruthy();
|
||||
expect(items[0].getAttribute('id') === 'radio-0').toBeTruthy();
|
||||
expect(items[1].getAttribute('id') === 'radio-1').toBeTruthy();
|
||||
expect(items[2].getAttribute('id') === 'radio-3').toBeTruthy();
|
||||
});
|
||||
|
||||
it('filters the correct items on mixed case input "wOrK"', () => {
|
||||
|
|
@ -70,11 +72,12 @@ describe('The Search Bar', () => {
|
|||
const setSelected = jest.fn();
|
||||
|
||||
const list = render(
|
||||
<ListTest
|
||||
<List
|
||||
list={workouts}
|
||||
listType="radio"
|
||||
selected={selected}
|
||||
setSelected={setSelected}
|
||||
type="radio"
|
||||
type="workouts"
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
@ -87,10 +90,10 @@ describe('The Search Bar', () => {
|
|||
const items = list.getAllByRole('radio');
|
||||
|
||||
// Expect only 'Push Workout' and 'Pull Workout to remain
|
||||
expect(items.length).toBe(8);
|
||||
expect(items[4].getAttribute('value') === 'Push Workout').toBeTruthy();
|
||||
expect(items[5].getAttribute('value') === 'Pull Workout').toBeTruthy();
|
||||
expect(items[6].getAttribute('value') === 'Legs Workout').toBeTruthy();
|
||||
expect(items[7].getAttribute('value') === 'Upper Workout').toBeTruthy();
|
||||
expect(items.length).toBe(4);
|
||||
expect(items[0].getAttribute('id') === 'radio-0').toBeTruthy();
|
||||
expect(items[1].getAttribute('id') === 'radio-1').toBeTruthy();
|
||||
expect(items[2].getAttribute('id') === 'radio-2').toBeTruthy();
|
||||
expect(items[3].getAttribute('id') === 'radio-3').toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
// React
|
||||
import React, { useState } from 'react';
|
||||
|
||||
// Next components
|
||||
import Image from 'next/image';
|
||||
|
||||
// Styles
|
||||
import styles from '../../styles/List.module.css';
|
||||
|
||||
const star = '/images/star.png';
|
||||
const starFilled = '/images/starFilled.png';
|
||||
|
||||
export default function ElementTest({ element }) {
|
||||
// State of the image that is displayed as the favourite button
|
||||
const [imgPath, setImgPath] = useState(star);
|
||||
|
||||
// Event handler if the favourite button is clicked on
|
||||
const toggleStar = (e) => {
|
||||
e.preventDefault();
|
||||
if (imgPath === star) {
|
||||
setImgPath(starFilled);
|
||||
} else {
|
||||
setImgPath(star);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.element}>
|
||||
<Image
|
||||
src={element.imgSrc}
|
||||
alt={element.imgAlt}
|
||||
height={84}
|
||||
width={120}
|
||||
/>
|
||||
|
||||
<div className={styles.txt}>
|
||||
<h1>{element.name}</h1>
|
||||
<p>{element.muscleGroups.join(', ')}</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.star}>
|
||||
<form>
|
||||
<input
|
||||
type="image"
|
||||
src={imgPath}
|
||||
height={38}
|
||||
width={38}
|
||||
alt="star"
|
||||
onClick={toggleStar}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
// React
|
||||
import React, { useState } from 'react';
|
||||
|
||||
// Bootstrap components
|
||||
import ToggleButton from 'react-bootstrap/ToggleButton';
|
||||
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
|
||||
|
||||
// Custom components
|
||||
import SearchFilterBar from '../List/SearchFilterBar';
|
||||
import ElementTest from './ElementTest';
|
||||
import styles from '../../styles/List.module.css';
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {*} list A list of either workouts or exercises
|
||||
* @param {*} listType Either "radio" or "checkbox".
|
||||
* @param {*} selected State of which elements are selected. if checkbox, must be an array.
|
||||
* @param {*} setSelected The function that sets the state of selected
|
||||
* @returns
|
||||
*/
|
||||
export default function List({ list, listType, selected, setSelected, type }) {
|
||||
// A function to handle when a new element is selected
|
||||
const handleChange = (e) => {
|
||||
setSelected(e);
|
||||
};
|
||||
|
||||
// State to keep track of the search input
|
||||
const [searchInput, setSearchInput] = useState('');
|
||||
|
||||
// When searchInput is changed, filteredList updates to only contain elements with names including searchInput
|
||||
const filteredList = list.filter((item) => {
|
||||
if (searchInput === '') {
|
||||
return item;
|
||||
}
|
||||
return item.name.toLowerCase().includes(searchInput);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<SearchFilterBar
|
||||
searchInput={searchInput}
|
||||
setSearchInput={setSearchInput}
|
||||
/>
|
||||
|
||||
{/* The list. A group of toggle buttons, so that the active one can be kept track of */}
|
||||
<div className={styles.scrollableContainer}>
|
||||
<ToggleButtonGroup
|
||||
type={listType}
|
||||
value={selected}
|
||||
onChange={handleChange}
|
||||
vertical
|
||||
name="button-list"
|
||||
>
|
||||
{filteredList.map((element) => (
|
||||
<ToggleButton
|
||||
key={element.name}
|
||||
id={`${listType}-${element.name}`}
|
||||
variant="light"
|
||||
name={listType}
|
||||
value={element.name}
|
||||
>
|
||||
<ElementTest element={element} type={type} />
|
||||
</ToggleButton>
|
||||
))}
|
||||
</ToggleButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
package.json
21
package.json
|
|
@ -9,7 +9,7 @@
|
|||
"lint": "next lint",
|
||||
"prettier-check": "prettier --check .",
|
||||
"prettier-fix": "prettier --write .",
|
||||
"test": "jest --coverage",
|
||||
"test": "jest --coverage --transformIgnorePatterns \"node_modules/(?!workoutbuddy)/\" --env=jsdom",
|
||||
"configure-husky": "npx husky install && npx husky add .husky/pre-commit \"npx --no-install lint-staged\""
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
@ -21,7 +21,14 @@
|
|||
"react-aria": "^3.19.0",
|
||||
"react-bootstrap": "^2.5.0",
|
||||
"react-dom": "18.2.0",
|
||||
"sharp": "^0.31.1"
|
||||
"sharp": "^0.31.1",
|
||||
"@testing-library/jest-dom": "^5.11.9",
|
||||
"@testing-library/react": "^11.2.5",
|
||||
"@testing-library/user-event": "^12.7.2",
|
||||
"workoutbuddy/allow": "^1.0.1",
|
||||
"workoutbuddy/is-a-regular-object-react": "^1.0.0",
|
||||
"react-scripts": "4.0.2",
|
||||
"web-vitals": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/dom": "^8.17.1",
|
||||
|
|
@ -40,7 +47,15 @@
|
|||
"jest": "^29.0.3",
|
||||
"jest-environment-jsdom": "^29.0.3",
|
||||
"lint-staged": "^13.0.3",
|
||||
"prettier": "^2.7.1"
|
||||
"prettier": "^2.7.1",
|
||||
"@babel/plugin-transform-modules-commonjs": "^7.12.13",
|
||||
"babel-jest": "^26.6.3"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"lint-staged": {
|
||||
"**/*.{js,jsx}": [
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
// React
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
// Bootstrap components
|
||||
import ListTest from '../components/Test/ListTest';
|
||||
|
||||
// Styles
|
||||
import styles from '../styles/Workouts/Workouts.module.css';
|
||||
|
||||
// Authentication
|
||||
import { exercises } from '../testData/testData';
|
||||
|
||||
export default function ExercisesPage() {
|
||||
const [exerciseList, setExerciseList] = useState([]);
|
||||
useEffect(() => {
|
||||
const getExercises = () => {
|
||||
setExerciseList(exercises);
|
||||
};
|
||||
getExercises();
|
||||
}, []);
|
||||
|
||||
const [selected, setSelected] = useState('');
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<main className={styles.main}>
|
||||
<ListTest
|
||||
list={exerciseList}
|
||||
listType="radio"
|
||||
selected={selected}
|
||||
setSelected={setSelected}
|
||||
type="workouts"
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
// React
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
// Bootstrap components
|
||||
import ListTest from '../components/Test/ListTest';
|
||||
|
||||
// Styles
|
||||
import styles from '../styles/Workouts/Workouts.module.css';
|
||||
|
||||
// Authentication
|
||||
import { workouts } from '../testData/testData';
|
||||
|
||||
export default function WorkoutsPage() {
|
||||
const [workoutList, setWorkoutList] = useState([]);
|
||||
useEffect(() => {
|
||||
const getWorkouts = () => {
|
||||
setWorkoutList(workouts);
|
||||
};
|
||||
getWorkouts();
|
||||
}, []);
|
||||
|
||||
const [selected, setSelected] = useState('');
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<main className={styles.main}>
|
||||
<ListTest
|
||||
list={workoutList}
|
||||
listType="radio"
|
||||
selected={selected}
|
||||
setSelected={setSelected}
|
||||
type="workouts"
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,11 +3,12 @@ import React from 'react';
|
|||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
|
||||
// Custom Components
|
||||
import ExercisesTest from './ExercisesTest';
|
||||
import ExercisesPage from '../pages/exercises/index';
|
||||
import { exercises } from '../testData/testData';
|
||||
|
||||
describe('The List of buttons displaying Workouts or Exercises', () => {
|
||||
it('Updates the selected button when another is clicked', () => {
|
||||
render(<ExercisesTest />);
|
||||
render(<ExercisesPage testData={exercises} />);
|
||||
|
||||
const btns = screen.getAllByRole('radio');
|
||||
|
||||
|
|
|
|||
|
|
@ -3,11 +3,12 @@ import React from 'react';
|
|||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
|
||||
// Custom Components
|
||||
import WorkoutsTest from './WorkoutsTest';
|
||||
import WorkoutsPage from '../pages/workouts/index';
|
||||
import { workouts } from '../testData/testData';
|
||||
|
||||
describe('The List of buttons displaying Workouts or Exercises', () => {
|
||||
it('Updates the selected button when another is clicked', () => {
|
||||
render(<WorkoutsTest />);
|
||||
render(<WorkoutsPage testData={workouts} />);
|
||||
|
||||
const btns = screen.getAllByRole('radio');
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ import { useAuth } from '../../context/authUserContext';
|
|||
// Get reference to exercises collection
|
||||
const exercisesCollectionRef = collection(db, 'exercises');
|
||||
|
||||
export default function ExercisesPage() {
|
||||
export default function ExercisesPage({ testData }) {
|
||||
/* Get exercises from the database */
|
||||
const [exerciseList, setExerciseList] = useState([]);
|
||||
|
||||
|
|
@ -50,11 +50,16 @@ export default function ExercisesPage() {
|
|||
setExercises(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
|
||||
};
|
||||
|
||||
if (!isExercisesLoaded.current) {
|
||||
if (!isExercisesLoaded.current && testData === undefined) {
|
||||
getExercises();
|
||||
isExercisesLoaded.current = true;
|
||||
}
|
||||
|
||||
if (!isExercisesLoaded.current && testData !== undefined) {
|
||||
setExercises(testData);
|
||||
isExercisesLoaded.current = true;
|
||||
}
|
||||
|
||||
/* Get the user's favourites to bump them to the top of the exercise list */
|
||||
if (isExercisesLoaded.current) {
|
||||
if (authUser) {
|
||||
|
|
@ -77,7 +82,7 @@ export default function ExercisesPage() {
|
|||
if (window.innerWidth < 576) {
|
||||
setRenderCard(false);
|
||||
}
|
||||
}, [authUser, exercises]);
|
||||
}, [authUser, exercises, testData]);
|
||||
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
|
|
@ -135,7 +140,6 @@ export default function ExercisesPage() {
|
|||
setSelected={onClick}
|
||||
type="exercises"
|
||||
onDelete={onDelete}
|
||||
allowEditing={authUser !== undefined}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ import { useAuth } from '../../context/authUserContext';
|
|||
// Get reference to workouts collection
|
||||
const workoutsCollectionRef = collection(db, 'workouts');
|
||||
|
||||
export default function WorkoutsPage() {
|
||||
export default function WorkoutsPage({ testData }) {
|
||||
const [workoutList, setWorkoutList] = useState([]);
|
||||
const { authUser } = useAuth();
|
||||
|
||||
|
|
@ -49,11 +49,16 @@ export default function WorkoutsPage() {
|
|||
setWorkouts(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
|
||||
};
|
||||
|
||||
if (!isFirstLoad.current) {
|
||||
if (!isFirstLoad.current && testData === undefined) {
|
||||
getWorkouts();
|
||||
isFirstLoad.current = true;
|
||||
}
|
||||
|
||||
if (!isFirstLoad.current && testData !== undefined) {
|
||||
setWorkouts(testData);
|
||||
isFirstLoad.current = true;
|
||||
}
|
||||
|
||||
if (isFirstLoad.current) {
|
||||
if (authUser) {
|
||||
const favs = workouts.filter((doc) =>
|
||||
|
|
@ -74,7 +79,7 @@ export default function WorkoutsPage() {
|
|||
if (window.innerWidth < 576) {
|
||||
setRenderCard(false);
|
||||
}
|
||||
}, [authUser, workouts]);
|
||||
}, [authUser, workouts, testData]);
|
||||
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
|
|
@ -141,7 +146,6 @@ export default function WorkoutsPage() {
|
|||
setSelected={onClick}
|
||||
type="workouts"
|
||||
onDelete={onDelete}
|
||||
allowEditing={authUser !== undefined}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
margin: 1vh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
.form h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,97 +1,205 @@
|
|||
export const exercises = [];
|
||||
exercises.push({
|
||||
name: 'Push Ups',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/3837781/pexels-photo-3837781.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
|
||||
muscleGroups: ['Biceps', 'Chest', 'Core'],
|
||||
id: '0',
|
||||
'https://images.pexels.com/photos/1431282/pexels-photo-1431282.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
|
||||
muscleGroups: ['Biceps'],
|
||||
equipment: 'Barbell',
|
||||
videoURL: 'https://www.youtube.com/watch?v=kwG2ipFRgfo',
|
||||
instructions:
|
||||
'Step 1: Stand up straight while holding a barbell in a shoulder-width grip.\nStep 2: Contract your biceps to curl the weight forward. Your upper arms should remain stationary during this process.\nStep 3: Continue moving the barbell until the biceps are fully contracted and the bar is at shoulder height. Hold this position for a second and then squeeze your biceps.\nStep 4: Bring the barbell back to the starting position. Repeat for the desired number of reps.',
|
||||
imgAlt: 'Barbell Curl',
|
||||
name: 'Barbell Curl',
|
||||
id: '6BXWzIfDOySrwrc0kvqX',
|
||||
});
|
||||
exercises.push({
|
||||
name: 'Sit Ups',
|
||||
equipment: 'Bench, Barbell',
|
||||
imgAlt: 'Bench Press',
|
||||
instructions:
|
||||
'Step 1: Lie on your back on a flat bench. Lift the bar off the rack and hold it straight over you, keeping your arms locked. This is the starting position.\nStep 2: Next, inhale and bring the barbell down in a slow and controlled manner until it reaches your mid-chest.\nStep 3: Pause briefly before raising the barbell back to your starting position as you exhale. Your focus should be on using your chest muscles to move the bar. Lock your arms at the top of the movement and squeeze your chest before slowly bringing the barbell down again. This step should take twice as long raising the weight to get the maximum benefit.\nStep 4: Repeat the movement for the desired number of repetitions.\nStep 5: The final step in the exercise is to place the barbell on the rack.',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/3837781/pexels-photo-3837781.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
|
||||
muscleGroups: ['Core'],
|
||||
id: '1',
|
||||
'https://images.pexels.com/photos/3837757/pexels-photo-3837757.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
|
||||
muscleGroups: ['Pecs', 'Triceps', 'Deltoids'],
|
||||
videoURL: 'https://www.youtube.com/watch?v=vcBig73ojpE',
|
||||
name: 'Bench Press',
|
||||
id: 'opPAV47UZbG0i4haC8tD',
|
||||
});
|
||||
exercises.push({
|
||||
name: 'Pull Ups',
|
||||
videoURL: 'https://www.youtube.com/watch?v=2C-uNgKwPLE',
|
||||
muscleGroups: ['Hamstrings', 'Glutes', 'Quadriceps', 'Calves'],
|
||||
name: 'Bulgarian Split Squats',
|
||||
equipment: 'Barbell',
|
||||
imgAlt: 'Performing a Bulgarian Split Squats',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/3837781/pexels-photo-3837781.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
|
||||
muscleGroups: ['Biceps', 'Shoulders'],
|
||||
id: '2',
|
||||
'https://images.pexels.com/photos/3076514/pexels-photo-3076514.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
|
||||
instructions:
|
||||
'Step 1: Place a barbell across upper back with an overhand grip and feet in a staggered stance with left foot forward.\nStep 2: Place your back right foot on a 6-inch box. Begin exercise by lowering body straight down until your back knee almost touches the ground. Pause, then push yourself back up to starting position.\nStep 3: Repeat prescribed reps with same leg, then switch legs.',
|
||||
id: 'tKcp5tIWZuGaiDzzeuA8',
|
||||
});
|
||||
exercises.push({
|
||||
name: 'Squats',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/3837781/pexels-photo-3837781.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
|
||||
muscleGroups: ['Legs', 'Glutes'],
|
||||
id: '3',
|
||||
equipment: 'Dumbbells',
|
||||
imgAlt: 'Man doing hammer curls whilst looking in the mirror',
|
||||
muscleGroups: ['Biceps'],
|
||||
instructions:
|
||||
'Step 1: Stand up straight with your torso upright. Hold a dumbbell in each hand at arms-length. Your elbows should be close to your torso.\nStep 2: The palms of your hands should be facing your torso. This is the starting position for the exercise.\nStep 3: Curl the weight forward while contracting your biceps. Your upper arm should remain stationary. Continue to lift the weight until your biceps are fully contracted and the dumbbell is at shoulder level. Hold the contraction for a moment as you squeeze your biceps.\nStep 4: Inhale and slowly start to bring the dumbbells back to the starting position.\nStep 5: Repeat for the desired number of reps.',
|
||||
imgSrc: 'https://images.pexels.com/photos/6550855/pexels-photo-6550855.jpeg',
|
||||
videoURL: 'https://www.youtube.com/watch?v=TwD-YGVP4Bk&t=10s',
|
||||
name: 'Hammer Curl',
|
||||
id: 'CTqGCyS83x18NPoefzff',
|
||||
});
|
||||
exercises.push({
|
||||
imgSrc: 'https://images.pexels.com/photos/7592988/pexels-photo-7592988.jpeg',
|
||||
instructions:
|
||||
'Lie face down with your forearms on the yoga mat, and your elbows directly underneath your shoulders. Your forearms should be parallel. Point your feet so that your toes are on the floor. Lift your body up by engaging your core, so that only your toes and forearms are touching the ground. Your spine and legs should be straight. Hold this position for 30 seconds. Then, release and bring your knees to the ground.',
|
||||
videoURL: 'https://www.youtube.com/embed/wCBOqf-HrTI',
|
||||
muscleGroups: [
|
||||
'Core',
|
||||
'Abs',
|
||||
'Deltoids',
|
||||
'Spinal erectors',
|
||||
'Traps',
|
||||
'Rhomboids',
|
||||
'Pecs',
|
||||
'Glutes',
|
||||
'Quadriceps',
|
||||
],
|
||||
equipment: 'Yoga mat',
|
||||
imgAlt: 'Woman doing a plank on a yoga mat',
|
||||
name: 'Plank',
|
||||
id: 'mXpkgyp79C7CBpGsVdAX',
|
||||
});
|
||||
exercises.push({
|
||||
muscleGroups: [
|
||||
'Biceps',
|
||||
'Shoulders',
|
||||
'Chest',
|
||||
'Pecs',
|
||||
'Deltoids',
|
||||
'Abs',
|
||||
'Lats',
|
||||
'Traps',
|
||||
],
|
||||
instructions:
|
||||
'Stand directly below the pull-up bar. Place your hands on the bars in an overhand grip (with the palms of your hands facing away from you). If you cannot reach the bar, place a box below your feet so that you can reach the bar. When you are ready, lift your feet off the ground, and engage your core. Using the muscles in your arms and back, lift your body up until your chin is over the bar. As you do this, avoid swinging your legs or shrugging your shoulders. You want to ensure that your shoulder blades remain back and down throughout the pull-up. Lastly, lower your body back down to the starting position and repeat.',
|
||||
imgAlt: 'Man in black top holding a black pull-up bar',
|
||||
equipment: 'Pull-up bar',
|
||||
videoURL: 'https://www.youtube.com/embed/30NjUye3y6Q',
|
||||
name: 'Pull-up',
|
||||
imgSrc: 'https://images.pexels.com/photos/7187945/pexels-photo-7187945.jpeg',
|
||||
id: '1pbq9253BdtvG7Jhwz0G',
|
||||
});
|
||||
|
||||
export const workouts = [];
|
||||
workouts.push({
|
||||
name: 'Workout 1',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/3837781/pexels-photo-3837781.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
|
||||
exercises: [{ 0: [5, 10] }, { 1: [5, 10] }],
|
||||
muscleGroups: ['Biceps', 'Chest', 'Core'],
|
||||
id: '4',
|
||||
});
|
||||
workouts.push({
|
||||
name: 'Workout 2',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/3837781/pexels-photo-3837781.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
|
||||
exercises: [{ 2: [5, 10] }, { 0: [5, 10] }, { 1: [5, 10] }],
|
||||
muscleGroups: ['Biceps', 'Shoulders', 'Chest', 'Core'],
|
||||
id: '5',
|
||||
});
|
||||
workouts.push({
|
||||
name: 'Workout 3',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/3837781/pexels-photo-3837781.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
|
||||
exercises: [{ 2: [5, 10] }, { 3: [5, 10] }],
|
||||
muscleGroups: ['Biceps', 'Shoulders', 'Legs', 'Glutes'],
|
||||
id: '6',
|
||||
});
|
||||
workouts.push({
|
||||
name: 'Workout 4',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/3837781/pexels-photo-3837781.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
|
||||
exercises: [{ 1: [5, 10] }, { 3: [5, 10] }],
|
||||
muscleGroups: ['Core', 'Legs', 'Glutes'],
|
||||
id: '7',
|
||||
});
|
||||
workouts.push({
|
||||
name: 'Push Workout',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/3837781/pexels-photo-3837781.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
|
||||
exercises: [{ 0: [5, 10] }],
|
||||
imgSrc: 'https://images.pexels.com/photos/4920476/pexels-photo-4920476.jpeg',
|
||||
exercises: [
|
||||
{
|
||||
index: 0,
|
||||
name: 'Plank',
|
||||
reps: '45',
|
||||
imgAlt: 'Woman doing a plank on a yoga mat',
|
||||
id: 'mXpkgyp79C7CBpGsVdAX',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/7592988/pexels-photo-7592988.jpeg',
|
||||
sets: '3',
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
imgAlt: 'Man in black top holding a black pull-up bar',
|
||||
name: 'Pull-up',
|
||||
reps: '15',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/7187945/pexels-photo-7187945.jpeg',
|
||||
id: '1pbq9253BdtvG7Jhwz0G',
|
||||
sets: '5',
|
||||
},
|
||||
],
|
||||
muscleGroups: ['Chest', 'Shoulder', 'Triceps'],
|
||||
id: '8',
|
||||
id: '0',
|
||||
});
|
||||
workouts.push({
|
||||
name: 'Pull Workout',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/3837781/pexels-photo-3837781.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
|
||||
exercises: [{ 2: [5, 10] }],
|
||||
imgSrc: 'https://images.pexels.com/photos/4920476/pexels-photo-4920476.jpeg',
|
||||
exercises: [
|
||||
{
|
||||
index: 0,
|
||||
name: 'Plank',
|
||||
reps: '45',
|
||||
imgAlt: 'Woman doing a plank on a yoga mat',
|
||||
id: 'mXpkgyp79C7CBpGsVdAX',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/7592988/pexels-photo-7592988.jpeg',
|
||||
sets: '3',
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
imgAlt: 'Man in black top holding a black pull-up bar',
|
||||
name: 'Pull-up',
|
||||
reps: '15',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/7187945/pexels-photo-7187945.jpeg',
|
||||
id: '1pbq9253BdtvG7Jhwz0G',
|
||||
sets: '5',
|
||||
},
|
||||
],
|
||||
muscleGroups: ['Back', 'Biceps', 'Abs'],
|
||||
id: '9',
|
||||
id: '1',
|
||||
});
|
||||
workouts.push({
|
||||
name: 'Legs Workout',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/3837781/pexels-photo-3837781.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
|
||||
exercises: [{ 3: [5, 10] }],
|
||||
imgSrc: 'https://images.pexels.com/photos/4920476/pexels-photo-4920476.jpeg',
|
||||
exercises: [
|
||||
{
|
||||
index: 0,
|
||||
name: 'Plank',
|
||||
reps: '45',
|
||||
imgAlt: 'Woman doing a plank on a yoga mat',
|
||||
id: 'mXpkgyp79C7CBpGsVdAX',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/7592988/pexels-photo-7592988.jpeg',
|
||||
sets: '3',
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
imgAlt: 'Man in black top holding a black pull-up bar',
|
||||
name: 'Pull-up',
|
||||
reps: '15',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/7187945/pexels-photo-7187945.jpeg',
|
||||
id: '1pbq9253BdtvG7Jhwz0G',
|
||||
sets: '5',
|
||||
},
|
||||
],
|
||||
muscleGroups: ['Quadriceps', 'Hamstrings', 'Calves'],
|
||||
id: '10',
|
||||
id: '2',
|
||||
});
|
||||
workouts.push({
|
||||
name: 'Upper Workout',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/3837781/pexels-photo-3837781.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
|
||||
exercises: [{ 2: [5, 10] }],
|
||||
imgSrc: 'https://images.pexels.com/photos/4920476/pexels-photo-4920476.jpeg',
|
||||
exercises: [
|
||||
{
|
||||
index: 0,
|
||||
name: 'Plank',
|
||||
reps: '45',
|
||||
imgAlt: 'Woman doing a plank on a yoga mat',
|
||||
id: 'mXpkgyp79C7CBpGsVdAX',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/7592988/pexels-photo-7592988.jpeg',
|
||||
sets: '3',
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
imgAlt: 'Man in black top holding a black pull-up bar',
|
||||
name: 'Pull-up',
|
||||
reps: '15',
|
||||
imgSrc:
|
||||
'https://images.pexels.com/photos/7187945/pexels-photo-7187945.jpeg',
|
||||
id: '1pbq9253BdtvG7Jhwz0G',
|
||||
sets: '5',
|
||||
},
|
||||
],
|
||||
muscleGroups: ['Chest', 'Back', 'Shoulder', 'Triceps'],
|
||||
id: '11',
|
||||
id: '3',
|
||||
});
|
||||
|
||||
const photo = '../public/profile-pic.jpg';
|
||||
|
|
@ -103,5 +211,5 @@ export const userAuth = {
|
|||
photoURL: photo,
|
||||
role: 0,
|
||||
favouriteWorkouts: ['5', '7'],
|
||||
favouriteExercises: ['0', '3'],
|
||||
favouriteExercises: ['CTqGCyS83x18NPoefzff', 'opPAV47UZbG0i4haC8tD'],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue