roryhealy
/
workoutbuddy-archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

format and linting files to fit Airbnb guidelines

This commit is contained in:
Rory Healy 2022-09-29 00:43:49 +10:00
parent a96493be44
commit 8e29b07771
Signed by: roryhealy
GPG Key ID: 610ED1098B8F435B
21 changed files with 256 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintrc.json
View File

@ -9,6 +9,8 @@
"plugin:react/recommended",
"next/core-web-vitals",
"plugin:prettier/recommended",
"airbnb",
"airbnb/hooks",
"prettier"
],
"overrides": [],
@ -17,5 +19,7 @@
"sourceType": "module"
},
"plugins": ["react", "prettier"],
"rules": {}
"rules": {
"react/prop-types": [0]
}
}

8
components/Instructions.js → components/Instructions.jsx
View File

@ -1,6 +1,10 @@
// React
import React from 'react';
// Styles
import styles from '../styles/Instructions.module.css';
function Instructions() {
export default function Instructions() {
return (
<div className={styles.instructions}>
<p>
@ -33,5 +37,3 @@ function Instructions() {
</div>
);
}
export default Instructions;

15
components/List/Element.jsx
View File

@ -1,4 +1,4 @@
// Import React
// React
import React, { useState } from 'react';
// Next components
@ -10,15 +10,18 @@ import styles from '../../styles/List.module.css';
const star = '/images/star.png';
const starFilled = '/images/starFilled.png';
// Element returns what should be displayed for each element of the list
export default function Element({ element }) {
// State of the image that is displayed as the favorite button
// State of the image that is displayed as the favourite button
const [imgPath, setImgPath] = useState(star);
// Event handler if the favorite button is clicked on
// Event handler if the favourite button is clicked on
const toggleStar = (e) => {
e.preventDefault();
imgPath == star ? setImgPath(starFilled) : setImgPath(star);
if (imgPath === star) {
setImgPath(starFilled);
} else {
setImgPath(star);
}
};
return (
@ -44,7 +47,7 @@ export default function Element({ element }) {
width={38}
alt="star"
onClick={toggleStar}
></input>
/>
</form>
</div>
</div>

13
components/List/Element.test.jsx
View File

@ -1,19 +1,20 @@
// React
import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
// Custom components
import Element from './Element';
import Workout from '../../public/classes/Workout';
const toggleImgPath = (src) => {
return src.includes('star.png')
? '/images/starFilled.png'
: '/images/star.png';
};
const toggleImgPath = (src) =>
src.includes('star.png') ? '/images/starFilled.png' : '/images/star.png';
describe('The Favourite button', () => {
it('Toggles on and off when clicked', () => {
const element = new Workout('Pull Workout', ['Back', 'Biceps', 'Abs']);
render(<Element element={element} />);
let favBtn = screen.getByRole('button');
const favBtn = screen.getByRole('button');
let expectedImgPath = toggleImgPath(favBtn.getAttribute('src'));
fireEvent.click(favBtn);

14
components/List/List.js → components/List/List.jsx
View File

@ -1,11 +1,15 @@
// React
import React from 'react';
// Bootstrap components
import ToggleButton from 'react-bootstrap/ToggleButton';
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
// Custom components
import SearchFilterBar from './SearchFilterBar';
import Element from './Element';
import styles from '../../styles/List.module.css';
// React Bootstrap Components
import ToggleButton from 'react-bootstrap/ToggleButton';
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
export default function List({ list, selected, setSelected }) {
const onchange = (e) => {
setSelected(e);
@ -15,7 +19,7 @@ export default function List({ list, selected, setSelected }) {
<div className={styles.container}>
<SearchFilterBar />
{/* The list. A group of toggle buttons, so that the active one can be kept track of*/}
{/* The list. A group of toggle buttons, so that the active one can be kept track of */}
<div className={styles.scrollableContainer}>
<ToggleButtonGroup
value={selected}

1
components/List/SearchFilterBar.js → components/List/SearchFilterBar.jsx
View File

@ -1,3 +1,4 @@
// React
import React from 'react';
// Bootstrap components

7
components/Navbar/Navbar.js → components/Navbar/Navbar.jsx
View File

@ -1,10 +1,13 @@
// Next components
import Link from 'next/link';
// React
import React from 'react';
// Bootstrap components
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
// Next components
import Link from 'next/link';
// Styles
import styles from '../../styles/Navbar.module.css';

35
components/Search/Search.js
View File

@ -1,35 +0,0 @@
// Bootstrap components
import Container from 'react-bootstrap/Container';
import Col from 'react-bootstrap/Col';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';
// Styles
import styles from '../../styles/Search.module.css';
function SearchBar() {
return (
<>
<Container fluid className={styles.container}>
<Row>
<Col xs>
<Form>
<Form.Control type="search" placeholder="Search" />
</Form>
</Col>
<Col xs>
<DropdownButton title="Filter" bsPrefix={styles.filter}>
<Dropdown.Item href="#/action-1">Item 1</Dropdown.Item>
<Dropdown.Item href="#/action-2">Item 2</Dropdown.Item>
<Dropdown.Item href="#/action-3">Item 3</Dropdown.Item>
</DropdownButton>
</Col>
</Row>
</Container>
</>
);
}
export default SearchBar;

34
components/Search/Search.jsx Normal file
View File

@ -0,0 +1,34 @@
// React
import React from 'react';
// Bootstrap components
import Container from 'react-bootstrap/Container';
import Col from 'react-bootstrap/Col';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';
// Styles
import styles from '../../styles/Search.module.css';
export default function SearchBar() {
return (
<Container fluid className={styles.container}>
<Row>
<Col xs>
<Form>
<Form.Control type="search" placeholder="Search" />
</Form>
</Col>
<Col xs>
<DropdownButton title="Filter" bsPrefix={styles.filter}>
<Dropdown.Item href="#/action-1">Item 1</Dropdown.Item>
<Dropdown.Item href="#/action-2">Item 2</Dropdown.Item>
<Dropdown.Item href="#/action-3">Item 3</Dropdown.Item>
</DropdownButton>
</Col>
</Row>
</Container>
);
}

13
components/YouTube.js
View File

@ -1,13 +0,0 @@
function YouTube() {
return (
<>
<iframe
width="100%"
height="60%"
src="https://www.youtube.com/embed/TwD-YGVP4Bk"
></iframe>
</>
);
}
export default YouTube;

13
components/YouTube.jsx Normal file
View File

@ -0,0 +1,13 @@
// React
import React from 'react';
export default function YouTube() {
return (
<iframe
width="100%"
height="60%"
src="https://www.youtube.com/embed/TwD-YGVP4Bk"
title="Exercise video"
/>
);
}

22
docs/coding_standards.md
View File

@ -1,13 +1,21 @@
# Coding standards
The coding standards to follow are based on the MDN Web Docs. The styling guidelines for the following languages are available to read here:
As this project is mainly written in JS, JSX, and CSS, formatting and linting
is only covered for these languages.
- [HTML](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/HTML)
- [CSS](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/CSS)
- [JavaScript](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/JavaScript)
Note that React components are written in JSX. A seperate styling guide for writing JSX is found [here](https://airbnb.io/javascript/react/).
Linting is handled by ESLint. Part of the code style that ESLint adheres to can
be found on their [documentation](https://eslint.org/docs/latest/rules/). As
this project relies on React, the Airbnb JavaScript Style Guide
([available here](https://airbnb.io/javascript/)) is also used.
## Enforcing styling guidelines
Contributors are encouraged to use a formatting program such as [Prettier](https://prettier.io) to format code before committing it.
Styling guidelines are enforced through the use of a few tools:
- [ESLint](https://github.com/eslint/eslint) is used for linting.
- [Prettier](https://github.com/prettier/prettier) is used for formatting.
- [Husky](https://github.com/typicode/husky) and lint-staged are used to format and lint as pre-commit hooks.
Additionally, as part of the CI/CD pipeline, commits are automatically checked
for linting and formatting issues when pushed to this repository. Builds that
fail these checks are not deployed.

127
package-lock.json generated
View File

@ -10,6 +10,7 @@
"dependencies": {
"bootstrap": "^5.2.1",
"next": "12.3.0",
"prop-types": "^15.8.1",
"react": "18.2.0",
"react-aria": "^3.19.0",
"react-bootstrap": "^2.5.0",
@ -19,11 +20,15 @@
"@testing-library/dom": "^8.17.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"eslint": "8.23.1",
"eslint": "^8.24.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-next": "12.3.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.31.8",
"eslint-plugin-react-hooks": "^4.6.0",
"husky": "^8.0.1",
"jest": "^29.0.3",
"jest-environment-jsdom": "^29.0.3",
@ -734,9 +739,9 @@
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.10.4",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
"integrity": "sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==",
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.5.tgz",
"integrity": "sha512-XVVDtp+dVvRxMoxSiSfasYaG02VEe1qH5cKgMQJWhol6HwzbcqoCMJi8dAGoYAO57jhUyhI6cWuRiTcRaDaYug==",
"dev": true,
"dependencies": {
"@humanwhocodes/object-schema": "^1.2.1",
@ -4142,6 +4147,12 @@
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
"dev": true
},
"node_modules/confusing-browser-globals": {
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz",
"integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==",
"dev": true
},
"node_modules/convert-source-map": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
@ -4586,13 +4597,13 @@
}
},
"node_modules/eslint": {
"version": "8.23.1",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.23.1.tgz",
"integrity": "sha512-w7C1IXCc6fNqjpuYd0yPlcTKKmHlHHktRkzmBPZ+7cvNBQuiNjx0xaMTjAJGCafJhQkrFJooREv0CtrVzmHwqg==",
"version": "8.24.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.24.0.tgz",
"integrity": "sha512-dWFaPhGhTAiPcCgm3f6LI2MBWbogMnTJzFBbhXVRQDJPkr9pGZvVjlVfXd+vyDcWPA2Ic9L2AXPIQM0+vk/cSQ==",
"dev": true,
"dependencies": {
"@eslint/eslintrc": "^1.3.2",
"@humanwhocodes/config-array": "^0.10.4",
"@humanwhocodes/config-array": "^0.10.5",
"@humanwhocodes/gitignore-to-minimatch": "^1.0.2",
"@humanwhocodes/module-importer": "^1.0.1",
"ajv": "^6.10.0",
@ -4641,6 +4652,55 @@
"url": "https://opencollective.com/eslint"
}
},
"node_modules/eslint-config-airbnb": {
"version": "19.0.4",
"resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz",
"integrity": "sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==",
"dev": true,
"dependencies": {
"eslint-config-airbnb-base": "^15.0.0",
"object.assign": "^4.1.2",
"object.entries": "^1.1.5"
},
"engines": {
"node": "^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0"
},
"peerDependencies": {
"eslint": "^7.32.0 || ^8.2.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0"
}
},
"node_modules/eslint-config-airbnb-base": {
"version": "15.0.0",
"resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz",
"integrity": "sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==",
"dev": true,
"dependencies": {
"confusing-browser-globals": "^1.0.10",
"object.assign": "^4.1.2",
"object.entries": "^1.1.5",
"semver": "^6.3.0"
},
"engines": {
"node": "^10.12.0 || >=12.0.0"
},
"peerDependencies": {
"eslint": "^7.32.0 || ^8.2.0",
"eslint-plugin-import": "^2.25.2"
}
},
"node_modules/eslint-config-airbnb-base/node_modules/semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
"dev": true,
"bin": {
"semver": "bin/semver.js"
}
},
"node_modules/eslint-config-next": {
"version": "12.3.0",
"resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-12.3.0.tgz",
@ -10025,9 +10085,9 @@
}
},
"@humanwhocodes/config-array": {
"version": "0.10.4",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
"integrity": "sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==",
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.5.tgz",
"integrity": "sha512-XVVDtp+dVvRxMoxSiSfasYaG02VEe1qH5cKgMQJWhol6HwzbcqoCMJi8dAGoYAO57jhUyhI6cWuRiTcRaDaYug==",
"dev": true,
"requires": {
"@humanwhocodes/object-schema": "^1.2.1",
@ -12620,6 +12680,12 @@
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
"dev": true
},
"confusing-browser-globals": {
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz",
"integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==",
"dev": true
},
"convert-source-map": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
@ -12962,13 +13028,13 @@
}
},
"eslint": {
"version": "8.23.1",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.23.1.tgz",
"integrity": "sha512-w7C1IXCc6fNqjpuYd0yPlcTKKmHlHHktRkzmBPZ+7cvNBQuiNjx0xaMTjAJGCafJhQkrFJooREv0CtrVzmHwqg==",
"version": "8.24.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.24.0.tgz",
"integrity": "sha512-dWFaPhGhTAiPcCgm3f6LI2MBWbogMnTJzFBbhXVRQDJPkr9pGZvVjlVfXd+vyDcWPA2Ic9L2AXPIQM0+vk/cSQ==",
"dev": true,
"requires": {
"@eslint/eslintrc": "^1.3.2",
"@humanwhocodes/config-array": "^0.10.4",
"@humanwhocodes/config-array": "^0.10.5",
"@humanwhocodes/gitignore-to-minimatch": "^1.0.2",
"@humanwhocodes/module-importer": "^1.0.1",
"ajv": "^6.10.0",
@ -13008,6 +13074,37 @@
"text-table": "^0.2.0"
}
},
"eslint-config-airbnb": {
"version": "19.0.4",
"resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz",
"integrity": "sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==",
"dev": true,
"requires": {
"eslint-config-airbnb-base": "^15.0.0",
"object.assign": "^4.1.2",
"object.entries": "^1.1.5"
}
},
"eslint-config-airbnb-base": {
"version": "15.0.0",
"resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz",
"integrity": "sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==",
"dev": true,
"requires": {
"confusing-browser-globals": "^1.0.10",
"object.assign": "^4.1.2",
"object.entries": "^1.1.5",
"semver": "^6.3.0"
},
"dependencies": {
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
"dev": true
}
}
},
"eslint-config-next": {
"version": "12.3.0",
"resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-12.3.0.tgz",

7
package.json
View File

@ -15,6 +15,7 @@
"dependencies": {
"bootstrap": "^5.2.1",
"next": "12.3.0",
"prop-types": "^15.8.1",
"react": "18.2.0",
"react-aria": "^3.19.0",
"react-bootstrap": "^2.5.0",
@ -24,11 +25,15 @@
"@testing-library/dom": "^8.17.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"eslint": "8.23.1",
"eslint": "^8.24.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-next": "12.3.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.31.8",
"eslint-plugin-react-hooks": "^4.6.0",
"husky": "^8.0.1",
"jest": "^29.0.3",
"jest-environment-jsdom": "^29.0.3",

9
page_tests/workouts.test.js → page_tests/workouts.test.jsx
View File

@ -1,19 +1,22 @@
import { fireEvent, render, screen } from '@testing-library/react';
// React
import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
// Custom components
import WorkoutsPage from '../pages/workouts/index';
describe('The List of buttons displaying Workouts or Exercises', () => {
it('Updates the selected button when another is clicked', () => {
render(<WorkoutsPage />);
let btns = screen.getAllByRole('radio');
const btns = screen.getAllByRole('radio');
btns.forEach((btn1) => {
fireEvent.click(btn1);
expect(btn1.checked).toBeTruthy();
btns.forEach((btn2) => {
if (btn1 != btn2) {
if (btn1 !== btn2) {
expect(btn2.checked).toBeFalsy();
}
});

7
pages/_app.js → pages/_app.jsx
View File

@ -1,6 +1,11 @@
/* eslint-disable react/jsx-props-no-spreading */
// React
import React from 'react';
import { SSRProvider } from 'react-aria';
// Styles
import 'bootstrap/dist/css/bootstrap.min.css';
import '../styles/globals.css';
import { SSRProvider } from 'react-aria';
function MyApp({ Component, pageProps }) {
return (

5
pages/api/hello.js
View File

@ -1,5 +0,0 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' });
}

31
pages/exercises/index.js → pages/exercises/index.jsx
View File

@ -1,26 +1,22 @@
// BCustom components
/* eslint-disable react/jsx-props-no-spreading */
// React
import React, { useState } from 'react';
// Custom components
import List from '../../components/List/List';
import TopNavbar from '../../components/Navbar/Navbar';
// import Instructions from '../../components/Instructions';
// import SearchBar from '../../components/Search/Search';
// import YouTube from '../../components/YouTube';
// import { Container, Row, Col } from 'react-bootstrap';
// Styles
import styles from '../../styles/Exercises.module.css';
// React
import React, { useState } from 'react';
// Import the Exercise class so that we can create a dummy set of exercises to render
import Exercise from '../../public/classes/Exercise';
export default function ExercisesPage() {
// A dummy exercise list so that we have data to render.
// Once the database is implemented this will not be necessary
const exercise_list = [];
exercise_list.push(
const exerciseList = [];
exerciseList.push(
new Exercise('Bench Press', ['Chest', 'Shoulder', 'Triceps']),
new Exercise('Squats', ['Quadriceps', 'Hamstrings', 'Calves', 'Glutes']),
new Exercise('Plank', [
@ -39,7 +35,7 @@ export default function ExercisesPage() {
const selectState = {};
[selectState.selected, selectState.setSelected] = useState(
exercise_list[0].name
exerciseList[0].name
);
return (
@ -47,18 +43,9 @@ export default function ExercisesPage() {
<TopNavbar />
<div className={styles.container}>
<main className={styles.main}>
<List list={exercise_list} {...selectState} />
<List list={exerciseList} {...selectState} />
</main>
</div>
{/* <Container className={styles.container}>
<Row>
<Col>
<YouTube />
<Instructions />
</Col>
</Row>
</Container> */}
</>
);
}

7
pages/index.js → pages/index.jsx
View File

@ -1,8 +1,11 @@
// Next.js components
// React
import React from 'react';
// Next components
import Head from 'next/head';
import Link from 'next/link';
// Bootstrap components
// Custom components
import TopNavbar from '../components/Navbar/Navbar';
// Styles

5
pages/profile/index.js → pages/profile/index.jsx
View File

@ -1,4 +1,7 @@
// Next.js components
// React
import React from 'react';
// Next components
import Link from 'next/link';
// Bootstrap components

9
pages/workouts/index.js → pages/workouts/index.jsx
View File

@ -1,3 +1,4 @@
/* eslint-disable react/jsx-props-no-spreading */
// React
import React, { useState } from 'react';
@ -14,8 +15,8 @@ import Workout from '../../public/classes/Workout';
export default function WorkoutsPage() {
// A dummy workout list so that we have data to render.
// Once the database is implemented this will not be necessary
const workout_list = [];
workout_list.push(
const workoutList = [];
workoutList.push(
new Workout('Push Workout', ['Chest', 'Shoulder', 'Triceps']),
new Workout('Pull Workout', ['Back', 'Biceps', 'Abs']),
new Workout('Legs Workout', ['Quadriceps', 'Hamstrings', 'Calves']),
@ -28,7 +29,7 @@ export default function WorkoutsPage() {
const selectState = {};
[selectState.selected, selectState.setSelected] = useState(
workout_list[0].name
workoutList[0].name
);
return (
@ -36,7 +37,7 @@ export default function WorkoutsPage() {
<TopNavbar />
<div className={styles.container}>
<main className={styles.main}>
<List list={workout_list} {...selectState} />
<List list={workoutList} {...selectState} />
</main>
</div>
</>