Initial project

This commit is contained in:
= 2020-11-28 19:30:28 +01:00
parent 88e2549fab
commit 7d01db8018
28 changed files with 12412 additions and 0 deletions

23
.gitignore vendored Normal file
View File

@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

0
.gitmodules vendored Normal file
View File

5
.idea/.gitignore vendored Normal file
View File

@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

View File

@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
</state>
</component>

12
.idea/frontend.iml Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

View File

@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>

6
.idea/misc.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="JSX" />
</component>
</project>

8
.idea/modules.xml Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/frontend.iml" filepath="$PROJECT_DIR$/.idea/frontend.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

6
jsconfig.json Normal file
View File

@ -0,0 +1,6 @@
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}

52
package.json Normal file
View File

@ -0,0 +1,52 @@
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.1",
"@material-ui/icons": "^4.9.1",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@zxing/library": "^0.18.3",
"add": "^2.0.6",
"react": "^17.0.1",
"react-barcode-reader": "^0.0.2",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"react-webcam": "^5.2.2",
"react-webcam-barcode-scanner": "^0.0.2-rc2",
"styled-components": "^5.2.1",
"web-vitals": "^0.2.4",
"yarn": "^1.22.10"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"prop-types": "^15.7.2"
}
}

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

45
public/index.html Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Mange youre weight better"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Fitwave</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

BIN
public/logo192.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
public/logo512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

25
public/manifest.json Normal file
View File

@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

3
public/robots.txt Normal file
View File

@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

View File

@ -0,0 +1,47 @@
import React, { useRef, useCallback, useEffect } from 'react'
import { BrowserMultiFormatReader } from '@zxing/library'
import Webcam from 'react-webcam'
const BarcodeScanner = ({
width,
height,
onUpdate,
onError,
}) => {
const cameraRef = useRef(null)
const capture = useCallback(
() => {
const codeReader = new BrowserMultiFormatReader()
const image = cameraRef.current.getScreenshot()
if (image) {
codeReader
.decodeFromImage(undefined, image)
.then(onUpdate)
.catch(onError)
}
},
[onUpdate]
)
useEffect(() => {
const id = setInterval(capture, 500)
return () => clearInterval(id)
}, []);
return (
<Webcam
width={width}
height={height}
ref={cameraRef}
screenshotFormat="image/png"
videoConstraints={{
facingMode: 'environment'
}}
/>
)
}
export default BarcodeScanner

View File

@ -0,0 +1,21 @@
import React from 'react';
import styled from 'styled-components';
import { Switch } from 'react-router-dom';
import { ROUTES } from 'utils/routes';
import RouteWithSubRoutes from 'containers/RouteWithSubRoutes'
const AppWrapper = styled.div``
const App = () => {
return (
<AppWrapper>
<Switch>
{ROUTES.map(({ key, ...props }) => <RouteWithSubRoutes key={key} {...props} />)}
</Switch>
</AppWrapper>
);
};
export default App;

View File

@ -0,0 +1,34 @@
import React from 'react';
import {
Route,
Redirect
} from "react-router-dom";
import PropTypes from 'prop-types';
const isLogin = () => {
console.log('to implement /containers/PrivateRoute')
return true
}
const redirect = () => {
console.log('to implement /containers/PrivateRoute')
return '/'
}
const PrivateRoute = ({ component: Component, ...rest }) => {
return (
<Route
{...rest}
render={props => (
isLogin()
? <Component {...props} />
: <Redirect to={redirect()} />
)} />
);
};
PrivateRoute.propTypes = {
component: PropTypes.node.isRequired
}
export default PrivateRoute;

View File

@ -0,0 +1,20 @@
import React from 'react';
import { Route } from 'react-router-dom'
import PropTypes from 'prop-types';
const RouteWithSubRoutes = ({ component: Component, path, exact, routes }) => (
<Route
path={path}
exact={exact}
render={props => <Component routes={routes} {...props} />}
/>
)
RouteWithSubRoutes.propTypes = {
component: PropTypes.node.isRequired,
path: PropTypes.string.isRequired,
exact: PropTypes.bool.isRequired,
routes: PropTypes.array.isRequired,
}
export default RouteWithSubRoutes;

19
src/index.js Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import App from 'containers/App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

11
src/pages/Home/index.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
const HomePage = () => {
return (
<div>
Home page hello world
</div>
);
};
export default HomePage;

11
src/pages/Login/index.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
const LoginPage = () => {
return (
<div>
Login page
</div>
);
};
export default LoginPage;

13
src/reportWebVitals.js Normal file
View File

@ -0,0 +1,13 @@
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;

5
src/setupTests.js Normal file
View File

@ -0,0 +1,5 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

17
src/utils/routes.js Normal file
View File

@ -0,0 +1,17 @@
import HomePage from 'pages/Home'
import LoginPage from 'pages/Login'
export const ROUTES = [
{
path: '/',
key: 'HOME',
exact: true,
component: HomePage
},
{
path: '/login',
key: 'LOGIN',
exact: true,
component: LoginPage
}
]

12012
yarn.lock Normal file

File diff suppressed because it is too large Load Diff