├── .prettierrc
├── public
├── favicon.ico
├── manifest.json
├── index.html
└── ice-cream-images
│ ├── ice-cream-3.svg
│ ├── ice-cream-0.svg
│ ├── ice-cream-5.svg
│ ├── ice-cream-14.svg
│ ├── ice-cream-1.svg
│ ├── ice-cream-7.svg
│ ├── ice-cream-10.svg
│ ├── ice-cream-20.svg
│ ├── ice-cream-6.svg
│ ├── ice-cream-18.svg
│ ├── ice-cream-4.svg
│ ├── ice-cream-22.svg
│ ├── ice-cream-19.svg
│ ├── ice-cream-2.svg
│ ├── ice-cream-24.svg
│ ├── ice-cream-8.svg
│ ├── ice-cream-23.svg
│ └── ice-cream-11.svg
├── src
├── assets
│ ├── fonts
│ │ ├── cornerstone.woff
│ │ ├── cornerstone.woff2
│ │ ├── kathen
│ │ │ └── kathen.otf
│ │ └── geomanist
│ │ │ ├── geomanist-book.eot
│ │ │ ├── geomanist-book.ttf
│ │ │ ├── geomanist-book.woff
│ │ │ ├── geomanist-book.woff2
│ │ │ ├── geomanist-medium.eot
│ │ │ ├── geomanist-medium.ttf
│ │ │ ├── geomanist-medium.woff
│ │ │ ├── geomanist-medium.woff2
│ │ │ ├── geomanist-regular.eot
│ │ │ ├── geomanist-regular.ttf
│ │ │ ├── geomanist-regular.woff
│ │ │ └── geomanist-regular.woff2
│ └── css
│ │ └── style.css
├── index.js
├── ice-cream
│ ├── __mocks__
│ │ ├── IceCreamImage.js
│ │ └── IceCream.js
│ ├── __tests__
│ │ ├── __snapshots__
│ │ │ └── IceCreamImage.spec.js.snap
│ │ ├── IceCreamImage.spec.js
│ │ ├── IceCreamCardContainer.spec.js
│ │ ├── IceCreamCard.spec.js
│ │ ├── IceCreams.spec.js
│ │ ├── Menu.spec.js
│ │ ├── AddIceCream.spec.js
│ │ ├── EditIceCream.spec.js
│ │ └── IceCream.spec.js
│ ├── IceCreamImage.js
│ ├── ErrorContainer.js
│ ├── IceCreamCardContainer.js
│ ├── AddIceCream.js
│ ├── IceCreams.js
│ ├── EditIceCream.js
│ ├── Menu.js
│ └── IceCreamCard.js
├── structure
│ ├── __mocks__
│ │ ├── FocusLink.js
│ │ ├── Main.js
│ │ └── LoaderMessage.js
│ ├── __tests__
│ │ ├── Footer.spec.js
│ │ ├── __snapshots__
│ │ │ ├── Footer.spec.js.snap
│ │ │ ├── Header.spec.js.snap
│ │ │ ├── Main.spec.js.snap
│ │ │ └── FocusLink.spec.js.snap
│ │ ├── Header.spec.js
│ │ ├── Main.spec.js
│ │ ├── LoaderMessage.spec.js
│ │ └── FocusLink.spec.js
│ ├── Footer.js
│ ├── FocusLink.js
│ ├── Main.js
│ ├── LoaderMessage.js
│ └── Header.js
├── hooks
│ ├── useUniqueIds.js
│ └── useValidation.js
├── __tests__
│ ├── app.spec.js
│ └── __snapshots__
│ │ └── app.spec.js.snap
├── data
│ ├── __mocks__
│ │ └── iceCreamData.js
│ ├── iceCreamData.js
│ └── __tests__
│ │ └── iceCreamData.spec.js
├── utils
│ ├── validators.js
│ └── __tests__
│ │ └── validators.spec.js
├── setupTests.js
└── App.js
├── __mocks__
├── axios.js
└── react-router-dom.js
├── .gitignore
├── package.json
├── README.md
└── server
└── index.js
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "trailingComma": "es5"
4 | }
5 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ultimatecourses/ultimate-react-icecream/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/src/assets/fonts/cornerstone.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ultimatecourses/ultimate-react-icecream/HEAD/src/assets/fonts/cornerstone.woff
--------------------------------------------------------------------------------
/src/assets/fonts/cornerstone.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ultimatecourses/ultimate-react-icecream/HEAD/src/assets/fonts/cornerstone.woff2
--------------------------------------------------------------------------------
/src/assets/fonts/kathen/kathen.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ultimatecourses/ultimate-react-icecream/HEAD/src/assets/fonts/kathen/kathen.otf
--------------------------------------------------------------------------------
/src/assets/fonts/geomanist/geomanist-book.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ultimatecourses/ultimate-react-icecream/HEAD/src/assets/fonts/geomanist/geomanist-book.eot
--------------------------------------------------------------------------------
/src/assets/fonts/geomanist/geomanist-book.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ultimatecourses/ultimate-react-icecream/HEAD/src/assets/fonts/geomanist/geomanist-book.ttf
--------------------------------------------------------------------------------
/src/assets/fonts/geomanist/geomanist-book.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ultimatecourses/ultimate-react-icecream/HEAD/src/assets/fonts/geomanist/geomanist-book.woff
--------------------------------------------------------------------------------
/src/assets/fonts/geomanist/geomanist-book.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ultimatecourses/ultimate-react-icecream/HEAD/src/assets/fonts/geomanist/geomanist-book.woff2
--------------------------------------------------------------------------------
/src/assets/fonts/geomanist/geomanist-medium.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ultimatecourses/ultimate-react-icecream/HEAD/src/assets/fonts/geomanist/geomanist-medium.eot
--------------------------------------------------------------------------------
/src/assets/fonts/geomanist/geomanist-medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ultimatecourses/ultimate-react-icecream/HEAD/src/assets/fonts/geomanist/geomanist-medium.ttf
--------------------------------------------------------------------------------
/src/assets/fonts/geomanist/geomanist-medium.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ultimatecourses/ultimate-react-icecream/HEAD/src/assets/fonts/geomanist/geomanist-medium.woff
--------------------------------------------------------------------------------
/src/assets/fonts/geomanist/geomanist-medium.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ultimatecourses/ultimate-react-icecream/HEAD/src/assets/fonts/geomanist/geomanist-medium.woff2
--------------------------------------------------------------------------------
/src/assets/fonts/geomanist/geomanist-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ultimatecourses/ultimate-react-icecream/HEAD/src/assets/fonts/geomanist/geomanist-regular.eot
--------------------------------------------------------------------------------
/src/assets/fonts/geomanist/geomanist-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ultimatecourses/ultimate-react-icecream/HEAD/src/assets/fonts/geomanist/geomanist-regular.ttf
--------------------------------------------------------------------------------
/src/assets/fonts/geomanist/geomanist-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ultimatecourses/ultimate-react-icecream/HEAD/src/assets/fonts/geomanist/geomanist-regular.woff
--------------------------------------------------------------------------------
/src/assets/fonts/geomanist/geomanist-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ultimatecourses/ultimate-react-icecream/HEAD/src/assets/fonts/geomanist/geomanist-regular.woff2
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | ReactDOM.render(, document.getElementById('root'));
6 |
--------------------------------------------------------------------------------
/src/ice-cream/__mocks__/IceCreamImage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const IceCreamImage = ({ iceCreamId }) => (
4 | 
5 | );
6 |
7 | export default IceCreamImage;
8 |
--------------------------------------------------------------------------------
/src/structure/__mocks__/FocusLink.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const FocusLink = ({ to, children, ...props }) => (
4 |
5 | {children}
6 |
7 | );
8 |
9 | export default FocusLink;
10 |
--------------------------------------------------------------------------------
/__mocks__/axios.js:
--------------------------------------------------------------------------------
1 | export default {
2 | get: jest.fn(() => Promise.resolve({ data: {} })),
3 | post: jest.fn(() => Promise.resolve({ data: {} })),
4 | put: jest.fn(() => Promise.resolve({ data: {} })),
5 | delete: jest.fn(() => Promise.resolve()),
6 | };
7 |
--------------------------------------------------------------------------------
/src/ice-cream/__tests__/__snapshots__/IceCreamImage.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`IceCreamImage should load and display the ice cream image 1`] = `
4 | 
8 | `;
9 |
--------------------------------------------------------------------------------
/src/hooks/useUniqueIds.js:
--------------------------------------------------------------------------------
1 | import { useRef } from 'react';
2 | import uniqid from 'uniqid';
3 |
4 | const useUniqueIds = count => {
5 | const ids = useRef([...new Array(count)].map(() => uniqid()));
6 | return ids.current;
7 | };
8 |
9 | export default useUniqueIds;
10 |
--------------------------------------------------------------------------------
/src/ice-cream/__mocks__/IceCream.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const IceCream = ({ iceCream, onSubmit }) => (
4 |
5 | {iceCream.name}
6 |
12 | );
13 |
--------------------------------------------------------------------------------
/src/structure/__mocks__/Main.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Main = ({ headingText, headingLevel = 2, children }) => {
4 | const H = `h${headingLevel}`;
5 | return (
6 |
7 | {headingText}
8 | {children}
9 |
10 | );
11 | };
12 |
13 | export default Main;
14 |
--------------------------------------------------------------------------------
/src/structure/__tests__/Footer.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import Footer from '../Footer';
4 |
5 | describe('Footer', () => {
6 | it('should render', () => {
7 | const { container } = render();
8 | expect(container.firstChild).toMatchSnapshot();
9 | });
10 | });
11 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/src/structure/__mocks__/LoaderMessage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const LoaderMessage = ({ loadingMsg, doneMsg }) => (
5 |
6 | {loadingMsg}-{doneMsg}
7 |
8 | );
9 |
10 | LoaderMessage.propTypes = {
11 | isLoading: PropTypes.bool.isRequired,
12 | };
13 |
14 | export default LoaderMessage;
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | .idea
21 |
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 |
--------------------------------------------------------------------------------
/src/ice-cream/__tests__/IceCreamImage.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render, cleanup } from '@testing-library/react';
3 | import IceCreamImage from '../IceCreamImage';
4 |
5 | describe('IceCreamImage', () => {
6 | afterEach(cleanup);
7 | it('should load and display the ice cream image', () => {
8 | const { container } = render();
9 | expect(container.firstChild).toMatchSnapshot();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/src/__tests__/app.spec.js:
--------------------------------------------------------------------------------
1 | jest.mock('../structure/Header', () => () => Header);
2 | jest.mock('../structure/Footer', () => () => Footer);
3 |
4 | import React from 'react';
5 | import { render, cleanup } from '@testing-library/react';
6 | import App from '../App';
7 |
8 | describe('App', () => {
9 | afterEach(cleanup);
10 |
11 | it('should render the app root', () => {
12 | const { container } = render();
13 | expect(container.firstChild).toMatchSnapshot();
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/src/ice-cream/IceCreamImage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const IceCreamImage = ({ iceCreamId }) => {
5 | return (
6 | iceCreamId !== null &&
7 | iceCreamId !== undefined && (
8 | 
14 | )
15 | );
16 | };
17 |
18 | IceCreamImage.propTypes = {
19 | iceCreamId: PropTypes.number.isRequired,
20 | };
21 |
22 | export default IceCreamImage;
23 |
--------------------------------------------------------------------------------
/src/data/__mocks__/iceCreamData.js:
--------------------------------------------------------------------------------
1 | export const getIceCreams = jest.fn(() => Promise.resolve({ data: {} }));
2 |
3 | export const getIceCream = jest.fn(() => Promise.resolve({ data: {} }));
4 |
5 | export const getMenu = jest.fn(() => Promise.resolve({ data: {} }));
6 |
7 | export const getMenuItem = jest.fn(() => Promise.resolve({ data: {} }));
8 |
9 | export const postMenuItem = jest.fn(() => Promise.resolve({ data: {} }));
10 |
11 | export const putMenuItem = jest.fn(() => Promise.resolve({ data: {} }));
12 |
13 | export const deleteMenuItem = jest.fn(() => Promise.resolve({ data: {} }));
14 |
--------------------------------------------------------------------------------
/src/utils/validators.js:
--------------------------------------------------------------------------------
1 | export const validatePrice = price => {
2 | const regex = /^[0-9]+(\.[0-9][0-9])$/;
3 |
4 | if (!price || price === '0.00') {
5 | return 'You must enter a price';
6 | } else if (!regex.test(price.trim())) {
7 | return 'Please enter a valid price';
8 | }
9 | return null;
10 | };
11 |
12 | export const validateDescription = description =>
13 | description ? null : 'You must enter a description';
14 |
15 | export const validateQuantity = (quantity, inStock) =>
16 | inStock && quantity === '0'
17 | ? 'An in stock item should have a quantity'
18 | : null;
19 |
--------------------------------------------------------------------------------
/src/structure/__tests__/__snapshots__/Footer.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Footer should render 1`] = `
4 | .emotion-0 {
5 | max-width: 63.75em;
6 | margin-left: auto;
7 | margin-right: auto;
8 | border-radius: 0 0 4px 4px;
9 | color: #313030;
10 | text-align: center;
11 | padding-bottom: 2em;
12 | }
13 |
14 | .emotion-0 span {
15 | margin: 0;
16 | font-family: 'cornerstone',sans-serif;
17 | font-weight: 600;
18 | }
19 |
20 |
27 | `;
28 |
--------------------------------------------------------------------------------
/src/structure/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { css } from 'emotion/macro';
3 |
4 | const footerStyle = css`
5 | max-width: 63.75em;
6 | margin-left: auto;
7 | margin-right: auto;
8 | border-radius: 0 0 4px 4px;
9 | color: #313030;
10 | text-align: center;
11 | padding-bottom: 2em;
12 |
13 | span {
14 | margin: 0;
15 | font-family: 'cornerstone', sans-serif;
16 | font-weight: 600;
17 | }
18 | `;
19 |
20 | const Footer = () => (
21 |
24 | );
25 |
26 | export default Footer;
27 |
--------------------------------------------------------------------------------
/src/structure/__tests__/__snapshots__/Header.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Header should render 1`] = `
4 |
32 | `;
33 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | import 'jest-dom/extend-expect';
2 |
3 | //This is required to silence a React DOM error that will be fixed in
4 | //version 16.9.0. Once this is released, remove this code.
5 | //Related GitHub issue https://github.com/testing-library/react-testing-library/issues/281#issuecomment-480349256
6 | const originalError = console.error;
7 | beforeAll(() => {
8 | console.error = (...args) => {
9 | if (/Warning.*not wrapped in act/.test(args[0])) {
10 | return;
11 | }
12 | originalError.call(console, ...args);
13 | };
14 | });
15 |
16 | afterAll(() => {
17 | console.error = originalError;
18 | });
19 |
--------------------------------------------------------------------------------
/src/ice-cream/ErrorContainer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const ErrorContainer = ({ children, errorText, hasSubmitted, errorId }) => (
5 |
6 | {children}
7 |
8 | {errorText && hasSubmitted && {errorText}}
9 |
10 |
32 | Demo heading
33 |
34 |
35 | Page content
36 |
37 |
38 | `;
39 |
--------------------------------------------------------------------------------
/src/ice-cream/IceCreamCardContainer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { css } from 'emotion/macro';
3 | import PropTypes from 'prop-types';
4 |
5 | const containerStyle = css`
6 | display: grid;
7 | grid-template-columns: 1fr 1fr 1fr;
8 | grid-auto-rows: 1fr;
9 | grid-gap: 2em;
10 | list-style: none;
11 | padding: 0;
12 | margin: 0;
13 |
14 | @media screen and (max-width: 1000px) {
15 | grid-template-columns: 1fr 1fr;
16 | }
17 |
18 | @media screen and (max-width: 700px) {
19 | grid-template-columns: 1fr;
20 | }
21 | `;
22 |
23 | const IceCreamCardContainer = ({ children }) => (
24 |
25 | {React.Children.map(children, card => (
26 | - {card}
27 | ))}
28 |
29 | );
30 |
31 | IceCreamCardContainer.propTypes = {
32 | children: PropTypes.node.isRequired,
33 | };
34 |
35 | export default IceCreamCardContainer;
36 |
--------------------------------------------------------------------------------
/src/structure/__tests__/Header.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import Header from '../Header';
4 |
5 | describe('Header', () => {
6 | it('should render', () => {
7 | const { container } = render();
8 | const img = container.firstChild.querySelector('header > h1 > img');
9 | expect(img).toHaveAttribute('alt', '');
10 | expect(img).toHaveAttribute('src', 'ultimate-ice-cream.svg');
11 |
12 | const allAnchors = container.firstChild.querySelectorAll('nav a');
13 | expect(allAnchors[0]).toHaveAttribute('href', '/');
14 | expect(allAnchors[0]).toHaveTextContent('Menu');
15 | expect(allAnchors[1]).toHaveAttribute('href', '/ice-creams');
16 | expect(allAnchors[1]).toHaveTextContent('Add Ice Cream');
17 |
18 | const navContainer = container.firstChild.querySelector('nav');
19 | expect(navContainer).toMatchSnapshot();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/src/__tests__/__snapshots__/app.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`App should render the app root 1`] = `
4 |
7 |
11 | Skip to content
12 |
13 |
14 | Header
15 |
16 |
19 |
20 | Menu
21 |
22 |
23 | /
24 |
25 |
26 | IceCreams
27 |
28 |
29 | /ice-creams
30 |
31 |
32 | AddIceCream
33 |
34 |
35 | /menu-items/add
36 |
37 |
38 | EditIceCream
39 |
40 |
41 | /menu-items/:menuItemId
42 |
43 |
44 | Redirect to
45 | /
46 |
47 |
48 |
49 | Footer
50 |
51 |
{children}
;
28 |
29 | export const Route = ({path, component}) => {
30 | return <>{component.name}{path}
31 | }
32 |
33 | export const Redirect = ({to}) => Redirect to {to};
34 |
35 | export const BrowserRouter = ({children}) => {children}
36 |
--------------------------------------------------------------------------------
/src/structure/__tests__/__snapshots__/FocusLink.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`FocusLink should render as a Link with object to 1`] = `
4 |
7 | Click me
8 |
9 | {"focus":true}
10 |
11 |
14 | Link
15 |
16 |
17 | `;
18 |
19 | exports[`FocusLink should render as a Link with string to 1`] = `
20 |
23 | Click me
24 |
25 | {"focus":true}
26 |
27 |
30 | Link
31 |
32 |
33 | `;
34 |
35 | exports[`FocusLink should render as a NavLink with object to 1`] = `
36 |
39 | Click me
40 |
41 | {"focus":true}
42 |
43 |
46 | NavLink
47 |
48 |
49 | `;
50 |
51 | exports[`FocusLink should render as a NavLink with string to 1`] = `
52 |
55 | Click me
56 |
57 | {"focus":true}
58 |
59 |
62 | NavLink
63 |
64 |
65 | `;
66 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "proxy": "http://localhost:5000",
3 | "name": "ultimate-react-icecream",
4 | "version": "0.1.0",
5 | "private": true,
6 | "dependencies": {
7 | "@emotion/core": "^10.0.10",
8 | "axios": "^0.18.0",
9 | "body-parser": "^1.19.0",
10 | "emotion": "^10.0.9",
11 | "express": "^4.16.4",
12 | "prettier": "^1.17.0",
13 | "prop-types": "^15.7.2",
14 | "react": "^16.8.6",
15 | "react-dom": "^16.8.6",
16 | "react-helmet": "^5.2.1",
17 | "react-router-dom": "^5.0.0",
18 | "react-scripts": "3.0.1",
19 | "uniqid": "^5.0.3"
20 | },
21 | "devDependencies": {
22 | "jest-dom": "^3.2.2",
23 | "jest-emotion": "^10.0.11",
24 | "@testing-library/react": "^8.0.1"
25 | },
26 | "scripts": {
27 | "start": "react-scripts start",
28 | "build": "react-scripts build",
29 | "test": "react-scripts test",
30 | "eject": "react-scripts eject",
31 | "start-server": "node ./server/index.js",
32 | "format": "prettier --write src/**/*.{js,scss}"
33 | },
34 | "eslintConfig": {
35 | "extends": "react-app"
36 | },
37 | "jest": {
38 | "collectCoverageFrom": [
39 | "src/**/*.{js,jsx}",
40 | "!src/index.js"
41 | ],
42 | "snapshotSerializers": [
43 | "jest-emotion"
44 | ]
45 | },
46 | "browserslist": {
47 | "production": [
48 | ">0.2%",
49 | "not dead",
50 | "not op_mini all"
51 | ],
52 | "development": [
53 | "last 1 chrome version",
54 | "last 1 firefox version",
55 | "last 1 safari version"
56 | ]
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/assets/css/style.css:
--------------------------------------------------------------------------------
1 | *,
2 | *:before,
3 | *:after {
4 | box-sizing: border-box;
5 | -webkit-box-sizing: border-box;
6 | -moz-box-sizing: border-box;
7 | }
8 | html,
9 | body {
10 | height: 100%;
11 | width: 100%;
12 | margin: 0;
13 | padding: 0;
14 | color: #333;
15 | background: #23292d;
16 | -webkit-font-smoothing: antialiased;
17 | font: 300 16px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
18 | Arial, sans-serif;
19 | display: flex;
20 | }
21 | #root {
22 | width: 100%;
23 | }
24 | a {
25 | text-decoration: none;
26 | outline: 0;
27 | }
28 |
29 | h1,
30 | h2,
31 | h3,
32 | h4,
33 | h5 {
34 | font-weight: normal;
35 | margin: 0;
36 | padding: 0;
37 | font-family: 'cornerstone';
38 | }
39 |
40 | h3 {
41 | font-size: 24px;
42 | }
43 | h4 {
44 | font-size: 20px;
45 | }
46 |
47 | @font-face {
48 | font-family: 'cornerstone';
49 | src: url('../fonts/cornerstone.woff2') format('woff2'),
50 | url('../fonts/cornerstone.woff') format('woff');
51 | font-weight: normal;
52 | font-style: normal;
53 | }
54 |
55 | .btn {
56 | display: inline-block;
57 | padding: 10px 15px;
58 | margin: 0;
59 | outline: 0;
60 | border: 0;
61 | border-radius: 3px;
62 | font-size: 16px;
63 | font-family: 'cornerstone';
64 | cursor: pointer;
65 | transition: all 0.2s ease;
66 | }
67 | .btn__ok {
68 | background: #0f9675;
69 | color: #fff;
70 | }
71 | .btn__ok:hover {
72 | background: #0a7d61;
73 | }
74 | .btn__warning {
75 | background: #ab131c;
76 | color: #fff;
77 | }
78 | .btn__warning:hover {
79 | background: #880c14;
80 | }
81 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
22 | Ultimate Ice Cream
23 |
24 |
25 |
26 |
27 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/src/structure/Main.js:
--------------------------------------------------------------------------------
1 | import React, { useRef, useLayoutEffect } from 'react';
2 | import { css } from 'emotion/macro';
3 | import Helmet from 'react-helmet';
4 | import { withRouter } from 'react-router-dom';
5 | import PropTypes from 'prop-types';
6 |
7 | const mainStyle = css`
8 | max-width: 63.75em;
9 | margin-left: auto;
10 | margin-right: auto;
11 | min-height: 40em;
12 | padding-top: 2em;
13 | padding-bottom: 2em;
14 | outline: 0;
15 |
16 | .main-heading {
17 | font-family: 'cornerstone', sans-serif;
18 | padding: 1rem 0 2rem;
19 | color: #313030;
20 | font-size: 1.8em;
21 | outline: 0;
22 | text-align: center;
23 | }
24 | `;
25 |
26 | const Main = ({ headingText, headingLevel = 2, children, location }) => {
27 | const heading = useRef(null);
28 | const H = `h${headingLevel}`;
29 |
30 | useLayoutEffect(() => {
31 | if (location.state && location.state.focus) {
32 | heading.current.focus();
33 | }
34 | window.scrollTo(0, 0);
35 | }, [location.state]);
36 |
37 | return (
38 |
39 |
40 | {headingText} | Ultimate Ice Cream
41 |
42 |
43 | {headingText}
44 |
45 | {children}
46 |
47 | );
48 | };
49 |
50 | Main.propTypes = {
51 | headingText: PropTypes.string.isRequired,
52 | headingLevel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
53 | children: PropTypes.node.isRequired,
54 | location: PropTypes.shape({
55 | state: PropTypes.shape({
56 | focus: PropTypes.bool,
57 | }),
58 | }).isRequired,
59 | };
60 |
61 | export default withRouter(Main);
62 |
--------------------------------------------------------------------------------
/src/data/iceCreamData.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 |
3 | export const getIceCreams = () => {
4 | return axios.get('/api/menu/stock-ice-creams').then(response => {
5 | return response.data.sort((a, b) => {
6 | if (a.name < b.name) {
7 | return -1;
8 | }
9 | if (a.name > b.name) {
10 | return 1;
11 | }
12 | return 0;
13 | });
14 | });
15 | };
16 |
17 | export const getIceCream = id => {
18 | return axios
19 | .get(`/api/menu/stock-ice-creams/${id.toString()}`)
20 | .then(response => response.data)
21 | .catch(err => {
22 | throw err;
23 | });
24 | };
25 |
26 | export const getMenu = () => {
27 | return axios.get('/api/menu').then(response => {
28 | return response.data.sort((a, b) => {
29 | if (a.iceCream.name < b.iceCream.name) {
30 | return -1;
31 | }
32 | if (a.iceCream.name > b.iceCream.name) {
33 | return 1;
34 | }
35 | return 0;
36 | });
37 | });
38 | };
39 |
40 | export const getMenuItem = id => {
41 | return axios
42 | .get(`/api/menu/${id}`)
43 | .then(response => response.data)
44 | .catch(err => {
45 | throw err;
46 | });
47 | };
48 |
49 | export const postMenuItem = menuItem => {
50 | return axios
51 | .post('/api/menu', menuItem)
52 | .then(response => {
53 | return response.data;
54 | })
55 | .catch(err => {
56 | throw err;
57 | });
58 | };
59 |
60 | export const putMenuItem = menuItem => {
61 | return axios
62 | .put(`/api/menu/${menuItem.id.toString()}`, menuItem)
63 | .then(response => response.data)
64 | .catch(err => {
65 | throw err;
66 | });
67 | };
68 |
69 | export const deleteMenuItem = id => {
70 | return axios.delete(`/api/menu/${id.toString()}`);
71 | };
72 |
--------------------------------------------------------------------------------
/src/ice-cream/AddIceCream.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import Main from '../structure/Main';
3 | import LoaderMessage from '../structure/LoaderMessage';
4 | import IceCream from './IceCream';
5 | import { getIceCream, postMenuItem } from '../data/iceCreamData';
6 | import PropTypes from 'prop-types';
7 |
8 | const AddIceCream = ({ location, history }) => {
9 | const [isLoading, setIsLoading] = useState(true);
10 | const [iceCream, setIceCream] = useState({});
11 |
12 | useEffect(() => {
13 | let isMounted = true;
14 | getIceCream(location.search.split('=')[1])
15 | .then(iceCreamResponse => {
16 | if (isMounted) {
17 | setIceCream(iceCreamResponse);
18 | setIsLoading(false);
19 | }
20 | })
21 | .catch(err => {
22 | if (err.response.status === 404 && isMounted) {
23 | history.replace('/', { focus: true });
24 | }
25 | });
26 | return () => {
27 | isMounted = false;
28 | };
29 | }, [history, location.search]);
30 |
31 | const onSubmitHandler = menuItem => {
32 | postMenuItem(menuItem).then(() => {
33 | history.push('/', { focus: true });
34 | });
35 | };
36 |
37 | return (
38 |
39 |
44 | {!isLoading && (
45 |
46 | )}
47 |
48 | );
49 | };
50 |
51 | AddIceCream.propTypes = {
52 | location: PropTypes.shape({
53 | search: PropTypes.string.isRequired,
54 | }),
55 | history: PropTypes.shape({
56 | push: PropTypes.func.isRequired,
57 | replace: PropTypes.func.isRequired,
58 | }),
59 | };
60 |
61 | export default AddIceCream;
62 |
--------------------------------------------------------------------------------
/src/structure/LoaderMessage.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useLayoutEffect, useRef } from 'react';
2 | import { css } from 'emotion/macro';
3 | import PropTypes from 'prop-types';
4 |
5 | const loaderMessageStyle = css`
6 | .loading {
7 | font-size: 3em;
8 | font-weight: bold;
9 | width: 100%;
10 | text-align: center;
11 | margin: 0;
12 | padding-bottom: 3em;
13 | }
14 | `;
15 |
16 | const LoaderMessage = ({ loadingMsg, doneMsg, isLoading }) => {
17 | const isLoadingPreviousValue = useRef(null);
18 | const loadingMessageDelay = useRef(null);
19 | const doneMessageDelay = useRef(null);
20 | const [showLoadingMessage, setShowLoadingMessage] = useState(false);
21 | const [showDoneMessage, setShowDoneMessage] = useState(false);
22 |
23 | useLayoutEffect(() => {
24 | if (isLoading) {
25 | loadingMessageDelay.current = setTimeout(() => {
26 | setShowLoadingMessage(true);
27 | }, 400);
28 | } else {
29 | if (isLoadingPreviousValue.current) {
30 | setShowDoneMessage(true);
31 | doneMessageDelay.current = setTimeout(() => {
32 | setShowDoneMessage(false);
33 | }, 300);
34 | }
35 | }
36 | isLoadingPreviousValue.current = isLoading;
37 | return () => {
38 | setShowLoadingMessage(false);
39 | setShowDoneMessage(false);
40 | clearTimeout(loadingMessageDelay.current);
41 | clearTimeout(doneMessageDelay.current);
42 | };
43 | }, [isLoading]);
44 |
45 | return (
46 |
51 | {showLoadingMessage &&
{loadingMsg}
}
52 | {showDoneMessage &&
{doneMsg}
}
53 |
Your menu is fully stocked!
58 | )
59 | )}
60 |
61 | );
62 | };
63 |
64 | IceCreams.propTypes = {
65 | history: PropTypes.shape({
66 | push: PropTypes.func.isRequired,
67 | }),
68 | };
69 |
70 | export default IceCreams;
71 |
--------------------------------------------------------------------------------
/src/structure/__tests__/Main.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render, cleanup } from '@testing-library/react';
3 | import Helmet from 'react-helmet';
4 | import Main from '../Main';
5 |
6 | describe('Main', () => {
7 | let oldScrollTo = null;
8 |
9 | beforeEach(() => {
10 | oldScrollTo = global.window.scrollTo;
11 | global.window.scrollTo = jest.fn();
12 | });
13 |
14 | afterEach(() => {
15 | cleanup();
16 | global.window.scrollTo = oldScrollTo;
17 | });
18 |
19 | it('should render with standard heading and set the title', () => {
20 | const { container } = render(
21 |
22 | Page content
23 |
24 | );
25 |
26 | expect(container.firstChild).toMatchSnapshot();
27 | expect(Helmet.peek().title).toEqual([
28 | 'Demo heading',
29 | ' | Ultimate Ice Cream',
30 | ]);
31 | expect(window.scrollTo).toHaveBeenCalledWith(0, 0);
32 | });
33 |
34 | it('should focus the heading if the state dictates', () => {
35 | const { container } = render(
36 |
37 | Page content
38 |
39 | );
40 |
41 | const heading = container.firstChild.querySelector('h2');
42 |
43 | expect(document.activeElement).toEqual(heading);
44 | });
45 |
46 | it('should not focus the heading if the state is absent', () => {
47 | const { container } = render(
48 |
49 | Page content
50 |
51 | );
52 |
53 | const heading = container.firstChild.querySelector('h2');
54 |
55 | expect(document.activeElement).not.toEqual(heading);
56 | });
57 |
58 | it('It should allow for custom heading levels', () => {
59 | const { container } = render(
60 |
61 | Page content
62 |
63 | );
64 |
65 | expect(container.firstChild.querySelector('h3')).toHaveTextContent(
66 | 'Demo heading'
67 | );
68 | });
69 | });
70 |
--------------------------------------------------------------------------------
/src/ice-cream/EditIceCream.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import Main from '../structure/Main';
3 | import LoaderMessage from '../structure/LoaderMessage';
4 | import IceCream from './IceCream';
5 | import { getMenuItem, putMenuItem, deleteMenuItem } from '../data/iceCreamData';
6 | import PropTypes from 'prop-types';
7 |
8 | const EditIceCream = ({ match, history }) => {
9 | const [isLoading, setIsLoading] = useState(true);
10 | const [menuItem, setMenuItem] = useState({});
11 |
12 | useEffect(() => {
13 | let isMounted = true;
14 | getMenuItem(match.params.menuItemId)
15 | .then(item => {
16 | if (isMounted) {
17 | setMenuItem(item);
18 | setIsLoading(false);
19 | }
20 | })
21 | .catch(err => {
22 | if (err.response.status === 404 && isMounted) {
23 | history.replace('/', { focus: true });
24 | }
25 | });
26 | return () => {
27 | isMounted = false;
28 | };
29 | }, [match.params.menuItemId, history]);
30 |
31 | const onSubmitHandler = updatedItem => {
32 | putMenuItem({ id: menuItem.id, ...updatedItem }).then(() => {
33 | history.push('/', { focus: true });
34 | });
35 | };
36 |
37 | const onDeleteHandler = () => {
38 | deleteMenuItem(match.params.menuItemId).then(() => {
39 | history.replace('/', { focus: true });
40 | });
41 | };
42 |
43 | return (
44 |
45 |
50 | {!isLoading && (
51 |
56 | )}
57 |
58 | );
59 | };
60 |
61 | EditIceCream.propTypes = {
62 | match: PropTypes.shape({
63 | params: PropTypes.object.isRequired,
64 | }),
65 | history: PropTypes.shape({
66 | push: PropTypes.func.isRequired,
67 | replace: PropTypes.func.isRequired,
68 | }),
69 | };
70 |
71 | export default EditIceCream;
72 |
--------------------------------------------------------------------------------
/src/structure/__tests__/LoaderMessage.spec.js:
--------------------------------------------------------------------------------
1 | jest.useFakeTimers();
2 |
3 | import React from 'react';
4 | import { render, cleanup } from '@testing-library/react';
5 | import LoaderMessage from '../LoaderMessage';
6 |
7 | describe('LoaderMessage', () => {
8 | afterEach(cleanup);
9 |
10 | it('should render a loader message', () => {
11 | const { queryByText, rerender } = render(
12 |
17 | );
18 |
19 | expect(queryByText('Busy loading')).not.toBeInTheDocument();
20 | expect(queryByText('Done loading')).not.toBeInTheDocument();
21 |
22 | jest.runTimersToTime(400);
23 |
24 | expect(queryByText('Busy loading')).toBeInTheDocument();
25 | expect(queryByText('Done loading')).not.toBeInTheDocument();
26 |
27 | rerender(
28 |
33 | );
34 |
35 | expect(queryByText('Busy loading')).not.toBeInTheDocument();
36 | expect(queryByText('Done loading')).toBeInTheDocument();
37 |
38 | jest.advanceTimersByTime(300);
39 |
40 | expect(queryByText('Done loading')).not.toBeInTheDocument();
41 | });
42 |
43 | it('should have an assertive live region', () => {
44 | const { container } = render(
45 |
50 | );
51 |
52 | expect(container.firstChild).toHaveAttribute('aria-live', 'assertive');
53 | expect(container.firstChild).toHaveAttribute('aria-atomic', 'true');
54 | });
55 |
56 | it('should not set the done message if toggled from a null prop', () => {
57 | const { queryByText } = render(
58 |
63 | );
64 |
65 | expect(queryByText('Busy loading')).not.toBeInTheDocument();
66 | expect(queryByText('Done loading')).not.toBeInTheDocument();
67 | });
68 | });
69 |
--------------------------------------------------------------------------------
/src/utils/__tests__/validators.spec.js:
--------------------------------------------------------------------------------
1 | import {
2 | validateDescription,
3 | validateQuantity,
4 | validatePrice,
5 | } from '../validators';
6 |
7 | describe('Validator validateDescription', () => {
8 | it('should return null for a non-empty description', () => {
9 | expect(validateDescription('a')).toBeNull();
10 | expect(validateDescription('1')).toBeNull();
11 | expect(validateDescription('Some description')).toBeNull();
12 | });
13 |
14 | it('should return a required error message if empty', () => {
15 | expect(validateDescription('')).toBe('You must enter a description');
16 | expect(validateDescription(null)).toBe('You must enter a description');
17 | expect(validateDescription(undefined)).toBe('You must enter a description');
18 | });
19 | });
20 |
21 | describe('Validator validateQuantity', () => {
22 | it('should return null if quantity is zero string for out of stock items', () => {
23 | expect(validateQuantity('0', false)).toBeNull();
24 | });
25 |
26 | it('should return an error message if quantity is zero string for in stock items', () => {
27 | expect(validateQuantity('0', true)).toBe(
28 | 'An in stock item should have a quantity'
29 | );
30 | });
31 | });
32 |
33 | describe('Validator validatePrice', () => {
34 | it('should return null for valid values', () => {
35 | expect(validatePrice('1.12')).toBeNull();
36 | expect(validatePrice('1.10')).toBeNull();
37 | expect(validatePrice('10.98')).toBeNull();
38 | });
39 |
40 | it('should return a required error message if empty', () => {
41 | expect(validatePrice('')).toBe('You must enter a price');
42 | expect(validatePrice(null)).toBe('You must enter a price');
43 | expect(validatePrice(undefined)).toBe('You must enter a price');
44 | });
45 |
46 | it('should return an error message for invalid values', () => {
47 | expect(validatePrice('1')).toBe('Please enter a valid price');
48 | expect(validatePrice('1.')).toBe('Please enter a valid price');
49 | expect(validatePrice('1.1')).toBe('Please enter a valid price');
50 | expect(validatePrice('a')).toBe('Please enter a valid price');
51 | expect(validatePrice('1.G')).toBe('Please enter a valid price');
52 | expect(validatePrice('G.12')).toBe('Please enter a valid price');
53 | });
54 | });
55 |
--------------------------------------------------------------------------------
/src/ice-cream/__tests__/IceCreamCard.spec.js:
--------------------------------------------------------------------------------
1 | jest.mock('../../structure/FocusLink');
2 | jest.mock('../IceCreamImage');
3 |
4 | import React from 'react';
5 | import { render, cleanup, fireEvent } from '@testing-library/react';
6 | import { IceCreamCard } from '../IceCreamCard';
7 |
8 | describe('IceCreamCard', () => {
9 | afterEach(cleanup);
10 |
11 | it('should render without content', () => {
12 | const { container } = render(
13 |
19 | );
20 | const img = container.firstChild.querySelector('section img');
21 | expect(img).toHaveAttribute('alt', '');
22 | expect(img).toHaveAttribute('src', 'ice-cream-5.svg');
23 |
24 | const anchor = container.firstChild.querySelector('section h3 > a');
25 | expect(anchor).toHaveAttribute('href', '/demo/path');
26 | expect(anchor).toHaveTextContent('Test card heading');
27 | });
28 |
29 | it('should render with content', () => {
30 | const { container } = render(
31 |
37 | I am some text content
38 |
39 | );
40 |
41 | const paragraph = container.firstChild.querySelector('section p');
42 | expect(paragraph).toHaveTextContent('I am some text content');
43 | });
44 |
45 | it('should navigate on container click', () => {
46 | const mockHistory = {
47 | push: jest.fn(),
48 | };
49 |
50 | const { getByText } = render(
51 |
57 | Content
58 |
59 | );
60 |
61 | fireEvent.click(getByText('Content'));
62 | expect(mockHistory.push).toHaveBeenCalledWith('/demo/path');
63 | });
64 |
65 | it('should not double navigate on anchor click', () => {
66 | const mockHistory = {
67 | push: jest.fn(),
68 | };
69 |
70 | const { getByText } = render(
71 |
77 | );
78 |
79 | fireEvent.click(getByText('Test card heading'));
80 | expect(mockHistory.push).not.toHaveBeenCalled();
81 | });
82 | });
83 |
--------------------------------------------------------------------------------
/src/structure/__tests__/FocusLink.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render, cleanup } from '@testing-library/react';
3 | import FocusLink from '../FocusLink';
4 |
5 | describe('FocusLink', () => {
6 | afterEach(cleanup);
7 |
8 | it('should render as a Link with string to', () => {
9 | const { container } = render(
10 |
11 | Click me
12 |
13 | );
14 |
15 | expect(container.firstChild).toMatchSnapshot();
16 | });
17 |
18 | it('should render as a Link with object to', () => {
19 | const { container } = render(
20 |
24 | Click me
25 |
26 | );
27 |
28 | expect(container.firstChild).toMatchSnapshot();
29 | });
30 |
31 | it('should render as a Link and merge router state', () => {
32 | const { queryByText } = render(
33 |
37 | Click me
38 |
39 | );
40 |
41 | expect(
42 | queryByText('{"someKey":"someVal","focus":true}')
43 | ).toBeInTheDocument();
44 | });
45 |
46 | it('should render as a NavLink with string to', () => {
47 | const { container } = render(
48 |
53 | Click me
54 |
55 | );
56 |
57 | expect(container.firstChild).toMatchSnapshot();
58 | });
59 |
60 | it('should render as a NavLink with object to', () => {
61 | const { container } = render(
62 |
67 | Click me
68 |
69 | );
70 |
71 | expect(container.firstChild).toMatchSnapshot();
72 | });
73 |
74 | it('should render as a NavLink and merge router state', () => {
75 | const { queryByText } = render(
76 |
81 | Click me
82 |
83 | );
84 |
85 | expect(
86 | queryByText('{"someKey":"someVal","focus":true}')
87 | ).toBeInTheDocument();
88 | });
89 | });
90 |
--------------------------------------------------------------------------------
/src/structure/Header.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import FocusLink from '../structure/FocusLink';
3 | import iceCream from '../assets/img/ultimate-ice-cream.svg';
4 | import { css } from 'emotion/macro';
5 |
6 | const headerStyle = css`
7 | position: relative;
8 | text-align: center;
9 | padding-top: 3em;
10 |
11 | h1 {
12 | display: flex;
13 | justify-content: center;
14 | color: #313030;
15 | font-weight: bold;
16 | font-family: 'cornerstone', sans-serif;
17 | font-size: 2.5em;
18 |
19 | img {
20 | margin-right: 0.5em;
21 | }
22 | }
23 |
24 | nav {
25 | max-width: 63.75em;
26 | margin-left: auto;
27 | margin-right: auto;
28 | margin-top: 3em;
29 |
30 | padding: 0.5em;
31 | background-color: #ffffff;
32 | border-radius: 7em;
33 | border: 1px solid rgba(32, 33, 36, 0.12);
34 | background-clip: padding-box;
35 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
36 |
37 | display: flex;
38 | align-items: center;
39 |
40 | a {
41 | position: relative;
42 | color: #5c4268;
43 | border: 2px solid transparent;
44 | border-radius: 6em;
45 | padding: 0 0.75em;
46 | font-size: 1em;
47 | line-height: 2em;
48 | text-decoration: none;
49 | transition: box-shadow 0.2s ease-in-out;
50 |
51 | &:hover {
52 | text-decoration: underline;
53 | }
54 |
55 | &:nth-of-type(n + 2) {
56 | &:before {
57 | content: '';
58 | position: absolute;
59 | left: -2px;
60 | top: 15%;
61 | height: 70%;
62 | width: 1px;
63 | background: rgba(32, 33, 36, 0.1);
64 | }
65 | }
66 |
67 | &.active {
68 | color: #a84a7a;
69 | }
70 |
71 | &:focus:not(:active) {
72 | outline: 2px solid transparent;
73 | box-shadow: 0 0 0 2px #8b9099;
74 |
75 | &.active {
76 | box-shadow: 0 0 0 2px #a84a7a;
77 | }
78 | }
79 | }
80 | }
81 | `;
82 |
83 | const Header = () => (
84 |
85 |
86 | 
87 | Ultimate Ice Cream
88 |
89 |
97 |
98 | );
99 |
100 | export default Header;
101 |
--------------------------------------------------------------------------------
/public/ice-cream-images/ice-cream-3.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
58 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 | ## Available Scripts
4 |
5 | In the project directory, you can run:
6 |
7 | ### `npm start`
8 |
9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 |
12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console.
14 |
15 | ### `npm test`
16 |
17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19 |
20 | ### `npm run build`
21 |
22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance.
24 |
25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed!
27 |
28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29 |
30 | ### `npm run eject`
31 |
32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33 |
34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35 |
36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37 |
38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39 |
40 | ## Learn More
41 |
42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43 |
44 | To learn React, check out the [React documentation](https://reactjs.org/).
45 |
46 | ### Code Splitting
47 |
48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
49 |
50 | ### Analyzing the Bundle Size
51 |
52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
53 |
54 | ### Making a Progressive Web App
55 |
56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
57 |
58 | ### Advanced Configuration
59 |
60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
61 |
62 | ### Deployment
63 |
64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
65 |
66 | ### `npm run build` fails to minify
67 |
68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
69 |
--------------------------------------------------------------------------------
/src/ice-cream/__tests__/IceCreams.spec.js:
--------------------------------------------------------------------------------
1 | jest.mock('../../structure/Main');
2 | jest.mock('../../structure/LoaderMessage');
3 | jest.mock('../IceCreamImage');
4 | jest.mock('../../data/iceCreamData');
5 |
6 | import React from 'react';
7 | import { render, waitForElement, cleanup } from '@testing-library/react';
8 | import IceCreams from '../IceCreams';
9 | import { getIceCreams } from '../../data/iceCreamData';
10 |
11 | const mockData = [
12 | { id: 0, name: 'Stripey Madness' },
13 | { id: 1, name: 'Cherry Blast' },
14 | { id: 2, name: 'Cookie Tower of Power' },
15 | ];
16 |
17 | describe('IceCreams', () => {
18 | afterEach(cleanup);
19 |
20 | it('should render and load data', async () => {
21 | getIceCreams.mockResolvedValueOnce(mockData);
22 |
23 | const { container, getByTestId } = render();
24 |
25 | const heading = await waitForElement(() =>
26 | container.firstChild.querySelector('h2')
27 | );
28 |
29 | expect(heading).toHaveTextContent('Choose your poison and enjoy!');
30 |
31 | expect(getByTestId('loaderMessage')).toHaveTextContent(
32 | 'Loading the stock list.-Loading stock list complete.'
33 | );
34 |
35 | const list = container.firstChild.querySelector('ul');
36 |
37 | const listItems = list.querySelectorAll('li section');
38 | expect(listItems.length).toBe(3);
39 | expect(listItems[0].querySelector('img')).toHaveAttribute(
40 | 'src',
41 | 'ice-cream-0.svg'
42 | );
43 | const firstAnchor = listItems[0].querySelector('h3 a');
44 | expect(firstAnchor).toHaveAttribute('href', '/menu-items/add?iceCreamId=0');
45 | expect(firstAnchor).toHaveTextContent('Stripey Madness');
46 | expect(listItems[1].querySelector('img')).toHaveAttribute(
47 | 'src',
48 | 'ice-cream-1.svg'
49 | );
50 | const secondAnchor = listItems[1].querySelector('h3 a');
51 | expect(secondAnchor).toHaveAttribute(
52 | 'href',
53 | '/menu-items/add?iceCreamId=1'
54 | );
55 | expect(secondAnchor).toHaveTextContent('Cherry Blast');
56 | expect(listItems[2].querySelector('img')).toHaveAttribute(
57 | 'src',
58 | 'ice-cream-2.svg'
59 | );
60 | const thirdAnchor = listItems[2].querySelector('h3 a');
61 | expect(thirdAnchor).toHaveAttribute('href', '/menu-items/add?iceCreamId=2');
62 | expect(thirdAnchor).toHaveTextContent('Cookie Tower of Power');
63 | });
64 |
65 | it('should safely unmount', async () => {
66 | const originalErrofn = global.console.error;
67 |
68 | getIceCreams.mockResolvedValueOnce(mockData);
69 |
70 | const { unmount } = render();
71 | global.console.error = jest.fn();
72 | await unmount();
73 | expect(global.console.error).not.toHaveBeenCalled();
74 | global.console.error = originalErrofn;
75 | });
76 |
77 | it('should render text if the collection is empty', async () => {
78 | getIceCreams.mockResolvedValueOnce([]);
79 |
80 | const { container } = render();
81 |
82 | const placeholder = await waitForElement(() =>
83 | container.firstChild.querySelector('p:not(.visually-hidden)')
84 | );
85 |
86 | expect(placeholder).toHaveTextContent('Your menu is fully stocked!');
87 | });
88 | });
89 |
--------------------------------------------------------------------------------
/public/ice-cream-images/ice-cream-0.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
64 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | BrowserRouter as Router,
4 | Route,
5 | Switch,
6 | Redirect,
7 | } from 'react-router-dom';
8 | import geomanistBookWoff from './assets/fonts/geomanist/geomanist-book.woff';
9 | import geomanistBookWoff2 from './assets/fonts/geomanist/geomanist-book.woff2';
10 | import cornerstoneWoff from './assets/fonts/cornerstone.woff';
11 | import cornerstoneWoff2 from './assets/fonts/cornerstone.woff2';
12 | import { Global, css } from '@emotion/core';
13 | import Header from './structure/Header';
14 | import Footer from './structure/Footer';
15 | import Menu from './ice-cream/Menu';
16 | import IceCreams from './ice-cream/IceCreams';
17 | import EditIceCream from './ice-cream/EditIceCream';
18 | import AddIceCream from './ice-cream/AddIceCream';
19 |
20 | const globalStyle = css`
21 | @font-face {
22 | font-family: 'geomanist';
23 | src: url(${geomanistBookWoff2}) format('woff2'),
24 | url(${geomanistBookWoff}) format('woff');
25 | font-weight: 400;
26 | font-style: normal;
27 | }
28 |
29 | @font-face {
30 | font-family: 'cornerstone';
31 | src: url(${cornerstoneWoff2}) format('woff2'),
32 | url(${cornerstoneWoff}) format('woff');
33 | font-weight: 400;
34 | font-style: normal;
35 | }
36 |
37 | *,
38 | *:before,
39 | *:after {
40 | box-sizing: border-box;
41 | -webkit-box-sizing: border-box;
42 | -moz-box-sizing: border-box;
43 | }
44 |
45 | html,
46 | body {
47 | height: 100%;
48 | width: 100%;
49 | margin: 0;
50 | padding: 0;
51 | color: #333;
52 | background: #ff71ba;
53 | font-family: 'geomanist', sans-serif;
54 | -webkit-font-smoothing: antialiased;
55 | -moz-osx-font-smoothing: grayscale;
56 | display: flex;
57 | }
58 |
59 | #root {
60 | width: 100%;
61 | }
62 |
63 | a {
64 | &:hover {
65 | text-decoration: none;
66 | }
67 | }
68 |
69 | h1,
70 | h2,
71 | h3,
72 | h4,
73 | h5 {
74 | font-weight: normal;
75 | padding: 0;
76 | margin: 0;
77 | }
78 |
79 | h3 {
80 | font-size: 24px;
81 | }
82 | h4 {
83 | font-size: 20px;
84 | }
85 |
86 | .visually-hidden:not(:focus):not(:active) {
87 | clip: rect(0 0 0 0);
88 | clip-path: inset(100%);
89 | height: 1px;
90 | overflow: hidden;
91 | position: absolute;
92 | white-space: nowrap;
93 | width: 1px;
94 | }
95 |
96 | .skip-link {
97 | padding: 6px;
98 | position: absolute;
99 | top: -40px;
100 | left: 0px;
101 | color: white;
102 | border-right: 1px solid white;
103 | border-bottom: 1px solid white;
104 | border-bottom-right-radius: 8px;
105 | background: #5c4268;
106 | transition: top 1s ease-out;
107 | z-index: 100;
108 |
109 | &:focus {
110 | position: absolute;
111 | left: 0px;
112 | top: 0px;
113 | outline-color: transparent;
114 | transition: top 0.1s ease-in;
115 | }
116 | }
117 | `;
118 |
119 | const App = () => {
120 | return (
121 |
122 |
123 |
124 | Skip to content
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 | );
137 | };
138 |
139 | export default App;
140 |
--------------------------------------------------------------------------------
/src/ice-cream/Menu.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import Main from '../structure/Main';
3 | import LoaderMessage from '../structure/LoaderMessage';
4 | import IceCreamCardContainer from './IceCreamCardContainer';
5 | import IceCreamCard from './IceCreamCard';
6 | import { getMenu } from '../data/iceCreamData';
7 | import { css } from 'emotion/macro';
8 | import PropTypes from 'prop-types';
9 |
10 | const cardContentStyle = css`
11 | display: flex;
12 | flex-direction: row;
13 | flex-wrap: wrap;
14 | padding: 0.3em 0 0 0;
15 |
16 | p {
17 | margin: 0;
18 | color: #403147;
19 | }
20 |
21 | p.price {
22 | font-size: 1em;
23 | position: relative;
24 | margin-right: 1.125em;
25 | color: rgba(64, 49, 71, 0.8);
26 |
27 | &:after {
28 | content: '';
29 | width: 4px;
30 | height: 4px;
31 | position: absolute;
32 | top: 50%;
33 | margin-top: -3px;
34 | right: -0.7em;
35 | background: rgba(64, 49, 71, 0.4);
36 | border-radius: 50%;
37 | }
38 | }
39 |
40 | p.stock {
41 | font-size: 1em;
42 | color: rgba(64, 49, 71, 0.8);
43 |
44 | &.out {
45 | color: #d8474f;
46 | }
47 | }
48 |
49 | p.description {
50 | width: 100%;
51 | margin-top: 1em;
52 | line-height: 1.375em;
53 | color: rgba(64, 49, 71, 0.9);
54 | font-size: 0.875em;
55 | }
56 | `;
57 |
58 | const Menu = ({ history }) => {
59 | const [menu, setMenu] = useState([]);
60 | const [isLoading, setIsLoading] = useState(true);
61 |
62 | useEffect(() => {
63 | let isMounted = true;
64 | getMenu().then(menuData => {
65 | if (isMounted) {
66 | setMenu(menuData);
67 | setIsLoading(false);
68 | }
69 | });
70 | return () => {
71 | isMounted = false;
72 | };
73 | }, []);
74 |
75 | return (
76 |
77 |
82 | {!isLoading && (
83 |
84 | {menu.length > 0 && !isLoading ? (
85 | <>
86 |
87 | {menu.map(
88 | ({ id, iceCream, price, description, inStock, quantity }) => (
89 |
96 |
97 |
{`$${price.toFixed(2)}`}
98 |
99 | {inStock
100 | ? `${quantity} in stock`
101 | : 'Currently out of stock!'}
102 |
103 |
{description}
104 |
109 |
110 | ) : (
111 |
Your menu is empty! The sadness!!
112 | )}
113 |
119 |
120 |
121 |
122 |
123 |
124 | {heading}
125 |
126 |
127 | {children &&
{children}
}
128 |