Repository: GermaVinsmoke/bmi-calculator Branch: master Commit: 7e4714d6542f Files: 28 Total size: 20.8 KB Directory structure: gitextract_7xlaooi8/ ├── .gitignore ├── .prettierrc.js ├── .travis.yml ├── LICENSE ├── README.md ├── cypress/ │ ├── .eslintrc.json │ ├── integration/ │ │ └── BmiForm.spec.js │ ├── plugins/ │ │ └── index.js │ └── support/ │ ├── commands.js │ └── index.js ├── cypress.json ├── jsconfig.json ├── package.json ├── public/ │ ├── index.html │ └── robots.txt └── src/ ├── components/ │ ├── App/ │ │ ├── App.css │ │ ├── App.jsx │ │ └── App.test.js │ ├── Bar/ │ │ ├── Bar.jsx │ │ └── Bar.test.js │ ├── BmiForm/ │ │ ├── BmiForm.jsx │ │ └── BmiForm.test.js │ └── Info/ │ ├── Info.jsx │ └── Info.test.js ├── helpers/ │ └── localStorage.js ├── index.css ├── index.js └── setupTests.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ # 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* node_modules ================================================ FILE: .prettierrc.js ================================================ // prettier.config.js or .prettierrc.js module.exports = { trailingComma: 'es5', tabWidth: 4, useTabs: true, semi: true, singleQuote: true, 'editor.formatOnSave': true, // printWidth: 80, proseWrap: 'always', }; ================================================ FILE: .travis.yml ================================================ language: node_js node_js: - 10.15.3 cache: npm install: - npm install script: - npm run test -- --coverage - npm run build after_success: - CODECOV_TOKEN=$codecov_token npm run report-coverage after_script: - COVERALLS_REPO_TOKEN=$coveralls_repo_token npm run coveralls deploy: provider: pages skip-cleanup: true github-token: $GITHUB_TOKEN local_dir: build on: branch: master ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2019 GermaVinsmoke Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ ## BMI Calculator [![Build Status](https://travis-ci.com/GermaVinsmoke/bmi-calculator.svg?branch=master)](https://travis-ci.com/GermaVinsmoke/bmi-calculator) [![Coverage Status](https://coveralls.io/repos/github/GermaVinsmoke/bmi-calculator/badge.svg?branch=master)](https://coveralls.io/github/GermaVinsmoke/bmi-calculator?branch=master) [![codecov](https://codecov.io/gh/GermaVinsmoke/bmi-calculator/branch/master/graph/badge.svg)](https://codecov.io/gh/GermaVinsmoke/bmi-calculator) React Hooks app to calculate the BMI of a person. It can store the data for 7 days with the help of LocalStorage. ![](images/1.jpg) Created with _create-react-app_. See the [full create-react-app guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md). ## Install `npm install` ## Usage `npm start` ## Enhancement 1. Removing the dependency of Materialize-CSS module ~~2. Chart going crazy on hovering over the old points~~ ================================================ FILE: cypress/.eslintrc.json ================================================ { "plugins": ["cypress"], "env": { "cypress/globals": true } } ================================================ FILE: cypress/integration/BmiForm.spec.js ================================================ describe('BmiForm Component', () => { beforeEach(() => { cy.visit('/'); }); it('accepts input', () => { const weight = '50'; const height = '176'; cy.get('#weight') .type(weight) .should('have.value', weight); cy.get('#height') .type(height) .should('have.value', height); }); context('Form submission', () => { it('Adds a new bmi card data', () => { let weight = '50'; const height = '176'; let today = new Date().toLocaleString().split(',')[0]; cy.get('#weight') .type(weight) .should('have.value', weight); cy.get('#height') .type(height) .should('have.value', height); cy.get('#bmi-btn').click(); cy.get('#weight').should('have.value', ''); cy.get('#height').should('have.value', ''); cy.get("[data-test='weight']").should('contain', weight); cy.get("[data-test='height']").should('contain', height); cy.get("[data-test='bmi']").should('contain', '16.14'); cy.get("[data-test='date']").should('contain', today); }); }); }); ================================================ FILE: cypress/plugins/index.js ================================================ // *********************************************************** // This example plugins/index.js can be used to load plugins // // You can change the location of this file or turn off loading // the plugins file with the 'pluginsFile' configuration option. // // You can read more here: // https://on.cypress.io/plugins-guide // *********************************************************** // This function is called when a project is opened or re-opened (e.g. due to // the project's config changing) module.exports = (on, config) => { // `on` is used to hook into various events Cypress emits // `config` is the resolved Cypress config } ================================================ FILE: cypress/support/commands.js ================================================ // *********************************************** // This example commands.js shows you how to // create various custom commands and overwrite // existing commands. // // For more comprehensive examples of custom // commands please read more here: // https://on.cypress.io/custom-commands // *********************************************** // // // -- This is a parent command -- // Cypress.Commands.add("login", (email, password) => { ... }) // // // -- This is a child command -- // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) // // // -- This is a dual command -- // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) // // // -- This will overwrite an existing command -- // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) ================================================ FILE: cypress/support/index.js ================================================ // *********************************************************** // This example support/index.js is processed and // loaded automatically before your test files. // // This is a great place to put global configuration and // behavior that modifies Cypress. // // You can change the location of this file or turn off // automatically serving support files with the // 'supportFile' configuration option. // // You can read more here: // https://on.cypress.io/configuration // *********************************************************** // Import commands.js using ES2015 syntax: import './commands' // Alternatively you can use CommonJS syntax: // require('./commands') ================================================ FILE: cypress.json ================================================ { "baseUrl": "http://localhost:3000/" } ================================================ FILE: jsconfig.json ================================================ { "typeAcquisition": { "include": ["jest"] } } ================================================ FILE: package.json ================================================ { "name": "bmical", "version": "0.1.0", "private": true, "homepage": "http://GermaVinsmoke.github.io/bmi-calculator", "dependencies": { "@types/jest": "24.0.20", "chart.js": "2.9.1", "materialize-css": "1.0.0", "prop-types": "15.7.2", "react": "16.11.0", "react-chartjs-2": "2.8.0", "react-dom": "16.11.0", "react-scripts": "3.1.1", "uuid": "3.3.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "predeploy": "npm run build", "deploy": "gh-pages -d build", "coveralls": "cat ./coverage/lcov.info | node node_modules/.bin/coveralls", "report-coverage": "cat ./coverage/lcov.info | codecov", "cypress": "cypress open" }, "jest": { "collectCoverageFrom": [ "src/**/*.{js,jsx}", "!src/index.js" ] }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "codecov.io": "^0.1.6", "coveralls": "^3.0.11", "cypress": "^3.8.3", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.2", "eslint-plugin-cypress": "^2.10.3", "gh-pages": "^2.2.0", "jest-enzyme": "^7.1.2" } } ================================================ FILE: public/index.html ================================================ BMI Calculator
================================================ FILE: public/robots.txt ================================================ # https://www.robotstxt.org/robotstxt.html User-agent: * ================================================ FILE: src/components/App/App.css ================================================ body { background-color: #172b4d; } input { background-color: #fff !important; border-radius: 44px !important; width: 90% !important; padding: 0px 15px !important; } input:focus { border-bottom: none !important; box-shadow: none !important; } label { display: block; color: #fff !important; font-size: 1rem !important; } .calculate-btn { background-color: #3f51b5; padding: 15px 50px; color: white; font-size: 16px; border-radius: 44px; cursor: pointer; border: 1px solid #3f51b5; margin-bottom: 40px; transform: translate3d(0, 0, 0); transition: all 0.2s ease; } .calculate-btn:hover { background-color: #fff; transform: translate(0px, -2px); color: #5364c3; box-shadow: 0px 15px 30px -12px rgba(255, 255, 255, 0.2); } .calculate-btn:focus { background-color: #32408f; } .calculate-btn:focus:hover { color: white; } .calculate-btn:disabled { border: 1px solid #999999; background-color: #cccccc; color: #666666; cursor: default; } .calculate-btn:disabled:hover { box-shadow: none; transform: translate(0, 0); } .data-container { background-color: #1f3a67; border-radius: 11px; margin-top: 40px; padding-top: 40px; padding-bottom: 40px; } .card { background-color: #274881 !important; color: white; } .card-title { font-weight: 500 !important; text-align: center; } .card-data { display: flex; justify-content: space-around; } .delete-btn { background-color: #e74c3c; color: white; border: none; border-radius: 50%; font-weight: 700; padding: 5px 9px; cursor: pointer; position: absolute; top: -12px; right: -12px; } .delete-btn:focus { background-color: #e74c3c; } ================================================ FILE: src/components/App/App.jsx ================================================ import React, { useState, useEffect } from 'react'; import { v4 as uuidv4 } from 'uuid'; import 'materialize-css/dist/css/materialize.min.css'; import './App.css'; import BmiForm from '../BmiForm/BmiForm'; import Info from '../Info/Info'; import Bar from '../Bar/Bar'; import { getData, storeData } from '../../helpers/localStorage'; const App = () => { const initialState = () => getData('data') || []; const [state, setState] = useState(initialState); const [data, setData] = useState({}); useEffect(() => { storeData('data', state); const date = state.map(obj => obj.date); const bmi = state.map(obj => obj.bmi); let newData = { date, bmi }; setData(newData); }, [state]); const handleChange = val => { let heightInM = val.height / 100; val.bmi = (val.weight / (heightInM * heightInM)).toFixed(2); val.id = uuidv4(); let newVal = [...state, val]; let len = newVal.length; if (len > 7) newVal = newVal.slice(1, len); setState(newVal); }; const handleDelete = id => { storeData('lastState', state); let newState = state.filter(i => { return i.id !== id; }); setState(newState); }; const handleUndo = () => { setState(getData('lastState')); }; return (

BMI Tracker

7 Day Data

{state.length > 0 ? ( <> {state.map(info => ( ))} ) : (
No log found
)}
{getData('lastState') !== null ? (
) : ( '' )}
); }; export default App; ================================================ FILE: src/components/App/App.test.js ================================================ import React from 'react'; import { shallow } from 'enzyme'; import App from './App'; describe('App Component', () => { let wrapper; beforeEach(() => { wrapper = shallow(); }); it('renders', () => { expect(wrapper).not.toBeNull(); }); }); ================================================ FILE: src/components/Bar/Bar.jsx ================================================ import React from 'react'; import { Line } from 'react-chartjs-2'; import PropTypes from 'prop-types'; const Bar = ({ labelData, bmiData }) => { const data = canvas => { const ctx = canvas.getContext('2d'); const gradient = ctx.createLinearGradient(63, 81, 181, 700); gradient.addColorStop(0, '#929dd9'); gradient.addColorStop(1, '#172b4d'); return { labels: labelData, datasets: [ { label: 'BMI', data: bmiData, backgroundColor: gradient, borderColor: '#3F51B5', pointRadius: 6, pointHoverRadius: 8, pointHoverBorderColor: 'white', pointHoverBorderWidth: 2 } ] }; }; const options = { responsive: true, scales: { xAxes: [ { scaleLabel: { display: true, labelString: 'Date', fontSize: 18, fontColor: 'white' }, gridLines: { display: false, color: 'white' }, ticks: { fontColor: 'white', fontSize: 16 } } ], yAxes: [ { scaleLabel: { display: true, labelString: 'BMI', fontSize: 18, fontColor: 'white' }, gridLines: { display: false, color: 'white' }, ticks: { fontColor: 'white', fontSize: 16, beginAtZero: true } } ] }, tooltips: { titleFontSize: 13, bodyFontSize: 13 } }; return ( <> ); }; Bar.propTypes = { labelData: PropTypes.array, bmiData: PropTypes.array }; export default Bar; ================================================ FILE: src/components/Bar/Bar.test.js ================================================ import React from "react"; import { mount } from "enzyme"; import Bar from "./Bar"; jest.mock("react-chartjs-2", () => ({ Line: () => null })); describe("Bar component", () => { let wrapper; const prop = { labelData: ["27/10/2019"], bmiData: ["16.14"] }; beforeEach(() => { wrapper = mount(); }); it("renders", () => { expect(wrapper).not.toBeNull(); console.log(wrapper.debug()); }); }); ================================================ FILE: src/components/BmiForm/BmiForm.jsx ================================================ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import '../App/App.css'; const initialValues = { weight: '', height: '', date: '' } const BmiForm = ({ change }) => { const [state, setState] = useState(initialValues); const handleChange = e => { let { value, name } = e.target; if (value > 999) { value = 999; } const date = new Date().toLocaleString().split(',')[0]; setState({ ...state, [name]: value, date }); }; const handleSubmit = () => { change(state); setState(initialValues); }; return ( <>
); }; BmiForm.propTypes = { change: PropTypes.func.isRequired }; export default BmiForm; ================================================ FILE: src/components/BmiForm/BmiForm.test.js ================================================ import React from "react"; import { shallow } from "enzyme"; import BmiForm from "./BmiForm"; describe("BmiForm Component", () => { let wrapper; const prop = { change: jest.fn() }; beforeEach(() => { wrapper = shallow(); }); it("renders", () => { expect(wrapper).not.toBeNull(); }); it("should update the weight", () => { const weight = wrapper.find("#weight"); weight.simulate("change", { target: { name: "weight", value: "50" } }); expect(wrapper.find("#weight").props().value).toEqual("50"); }); it("should update the height", () => { const height = wrapper.find("#height"); height.simulate("change", { target: { name: "height", value: "176" } }); expect(wrapper.find("#height").props().value).toEqual("176"); }); it("should call change", () => { wrapper.find("button").simulate("click"); expect(prop.change).toHaveBeenCalledTimes(1); }); }); ================================================ FILE: src/components/Info/Info.jsx ================================================ import React from 'react'; import PropTypes from 'prop-types'; const Info = ({ weight, height, id, date, bmi, deleteCard }) => { const handleDelete = () => { deleteCard(id); }; return (
BMI: {bmi}
Weight: {weight} kg Height: {height} cm Date: {date}
); }; Info.propTypes = { weight: PropTypes.string, height: PropTypes.string, id: PropTypes.string, date: PropTypes.string, bmi: PropTypes.string, deleteCard: PropTypes.func }; export default Info; ================================================ FILE: src/components/Info/Info.test.js ================================================ import React from "react"; import { shallow } from "enzyme"; import Info from "./Info"; describe("Info Component", () => { let wrapper; const props = { weight: "50", height: "176", id: "2b926f1b-db1f-45ac-af87-2130da1e1a2f", date: "10/25/2019", bmi: "16.14", deleteCard: jest.fn() }; beforeEach(() => { wrapper = shallow(); }); it("renders", () => { expect(wrapper).not.toBeNull(); }); it("renders with props", () => { expect(wrapper.find("[data-test='bmi']").text()).toEqual("BMI: 16.14"); expect(wrapper.find("[data-test='weight']").text()).toEqual( "Weight: 50 kg" ); expect(wrapper.find("[data-test='height']").text()).toEqual( "Height: 176 cm" ); expect(wrapper.find("[data-test='date']").text()).toEqual( "Date: 10/25/2019" ); }); it("should delete the card", () => { wrapper.find("button").simulate("click"); expect(props.deleteCard).toHaveBeenCalledTimes(1); }); }); ================================================ FILE: src/helpers/localStorage.js ================================================ export const getData = (key) => { if (!localStorage) return; try { return JSON.parse(localStorage.getItem(key)); } catch (err) { console.error(`Error getting item ${key} from localStorage`, err); } }; export const storeData = (key, item) => { if (!localStorage) return; try { return localStorage.setItem(key, JSON.stringify(item)); } catch (err) { console.error(`Error storing item ${key} to localStorage`, err); } }; ================================================ FILE: src/index.css ================================================ body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; } ================================================ FILE: src/index.js ================================================ import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./components/App/App.jsx"; ReactDOM.render(, document.getElementById("root")); ================================================ FILE: src/setupTests.js ================================================ import Enzyme from 'enzyme'; import EnzymeAdapter from 'enzyme-adapter-react-16'; Enzyme.configure({ adapter: new EnzymeAdapter(), disableLifecycleMethods: true });