├── public
    ├── robots.txt
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── .storybook
    ├── addons.js
    ├── config.js
    └── preview-head.html
├── src
    ├── stories
    │   ├── Logo.stories.js
    │   ├── Footer.stories.js
    │   ├── Headline.stories.js
    │   ├── CardContainer.stories.js
    │   ├── SelectDate.stories.js
    │   ├── SignupButton.stories.js
    │   ├── MenuHamburger.stories.js
    │   ├── NavbarHamburger.stories.js
    │   ├── ResultTextContainer.stories.js
    │   ├── TextFieldContainer.stories.js
    │   └── Icons.stories.js
    ├── components
    │   ├── Headline.js
    │   ├── TextBox.js
    │   ├── SignupButton.js
    │   ├── TextFieldContainer.js
    │   ├── StartPage.js
    │   ├── SelectDate.js
    │   ├── SearchBar.js
    │   ├── Footer.js
    │   ├── Disclaimer.js
    │   ├── Navigation.js
    │   ├── VaccineContent.js
    │   └── MenuHamburger.js
    ├── Globalstyles.js
    ├── pages
    │   ├── Standard.js
    │   ├── Home.js
    │   ├── Login.js
    │   ├── TrackVaccines.js
    │   └── Faq.js
    ├── index.js
    ├── icons
    │   ├── Key.js
    │   ├── House.js
    │   ├── Logo.js
    │   ├── Calendar.js
    │   ├── FaqIcon.js
    │   └── Medicine.js
    ├── api
    │   ├── diseases.js
    │   └── diseasesFind.js
    ├── App.js
    ├── db.json
    └── serviceWorker.js
├── README.md
├── .gitignore
├── .vscode
    └── launch.json
├── LICENSE
└── package.json


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cristinamerisoiu/vacciner/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.storybook/addons.js:
--------------------------------------------------------------------------------
1 | import '@storybook/addon-actions/register';
2 | import '@storybook/addon-links/register';
3 | 


--------------------------------------------------------------------------------
/src/stories/Logo.stories.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Logo from "../icons/Logo";
3 | 
4 | export default {
5 |   title: "Logo"
6 | };
7 | 
8 | export const LogoIcon = () => <Logo />;
9 | 


--------------------------------------------------------------------------------
/.storybook/config.js:
--------------------------------------------------------------------------------
1 | import { configure } from "@storybook/react";
2 | 
3 | // automatically import all files ending in *.stories.js
4 | configure(require.context("../src/stories", true, /\.stories\.js$/), module);
5 | 


--------------------------------------------------------------------------------
/src/stories/Footer.stories.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Footer from "../components/Footer";
3 | 
4 | export default {
5 |   title: "Footer"
6 | };
7 | 
8 | export const FooterContainer = () => <Footer />;
9 | 


--------------------------------------------------------------------------------
/src/stories/Headline.stories.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Headline from "../components/Headline";
3 | 
4 | export default {
5 |   title: "Headline"
6 | };
7 | 
8 | export const Title = () => <Headline />;
9 | 


--------------------------------------------------------------------------------
/src/stories/CardContainer.stories.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import CardContainer from "../components/CardContainer";
3 | 
4 | export default {
5 |   title: "Card"
6 | };
7 | 
8 | export const Card = () => <CardContainer />;
9 | 


--------------------------------------------------------------------------------
/src/stories/SelectDate.stories.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import SelectDate from "../components/SelectDate";
3 | 
4 | export default {
5 |   title: "Enter Date"
6 | };
7 | 
8 | export const EnterDate = () => <SelectDate />;
9 | 


--------------------------------------------------------------------------------
/src/stories/SignupButton.stories.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import SignupButton from "../components/SignupButton";
3 | 
4 | export default {
5 |   title: "MainButtons"
6 | };
7 | 
8 | export const Button = () => <SignupButton />;
9 | 


--------------------------------------------------------------------------------
/src/stories/MenuHamburger.stories.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import MenuHamburger from "../components/MenuHamburger";
3 | 
4 | export default {
5 |   title: "Menu Hamburger"
6 | };
7 | 
8 | export const HamburgerContent = () => <MenuHamburger />;
9 | 


--------------------------------------------------------------------------------
/src/stories/NavbarHamburger.stories.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import NavbarHamburger from "../components/NavbarHamburger";
3 | 
4 | export default {
5 |   title: "Navbar Hamburger"
6 | };
7 | 
8 | export const Hamburger = () => <NavbarHamburger />;
9 | 


--------------------------------------------------------------------------------
/.storybook/preview-head.html:
--------------------------------------------------------------------------------
 1 | <link
 2 |   href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
 3 |   rel="stylesheet"
 4 | />
 5 | 
 6 | <link
 7 |   href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap"
 8 |   rel="stylesheet"
 9 | />
10 | 


--------------------------------------------------------------------------------
/src/stories/ResultTextContainer.stories.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ResultTextContainer from "../components/ResultTextContainer";
3 | 
4 | export default {
5 |   title: " Result Text"
6 | };
7 | 
8 | export const TextField = () => <ResultTextContainer />;
9 | 


--------------------------------------------------------------------------------
/src/components/Headline.js:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | const Headline = styled.h1`
 4 |   font-size: 30px;
 5 |   font-family: "Open Sans", sans-serif;
 6 |   font-weight: 900;
 7 |   color: #66023c;
 8 |   text-align: center;
 9 | `;
10 | 
11 | export default Headline;
12 | 


--------------------------------------------------------------------------------
/src/components/TextBox.js:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | const TextBox = styled.div`
 4 |   display: flex;
 5 |   height: 50vh;
 6 |   margin: 20px;
 7 |   padding: 30px;
 8 |   align-items: center;
 9 |   justify-content: center;
10 | `;
11 | 
12 | export default TextBox;
13 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## vaccine.log
 2 | 
 3 | Have information about the standard vaccines at a glance. Also keep track of your vaccines.
 4 | The app is a part of the final project of the neue fische coding bootcamp.
 5 | 
 6 | ## Usage
 7 | 
 8 | Install dependencies:
 9 | 
10 | ```
11 | npm install
12 | ```
13 | 
14 | Run the app:
15 | 
16 | ```
17 | npm start
18 | ```
19 | 


--------------------------------------------------------------------------------
/src/components/SignupButton.js:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | const SignupButton = styled.button`
 4 |   width: 100px;
 5 |   height: 30px;
 6 |   border-radius: 10px;
 7 |   background-color: white;
 8 |   border: #707070 solid 1px;
 9 |   margin: 10px;
10 |   opacity: 0.5;
11 |   font-weight: 700;
12 | `;
13 | 
14 | export default SignupButton;
15 | 


--------------------------------------------------------------------------------
/src/Globalstyles.js:
--------------------------------------------------------------------------------
 1 | import { createGlobalStyle } from "styled-components";
 2 | 
 3 | export default createGlobalStyle`
 4 | *,
 5 | *:before,
 6 | *:after {
 7 |   box-sizing: border-box;
 8 | }
 9 | body {
10 |   font-size: 16px;
11 |   margin: 0;
12 |   font-family: 'Roboto', sans-serif;
13 |   width:100vw;
14 |   height:100vh;
15 |   background:#E8F1F2;
16 | }
17 | `;
18 | 


--------------------------------------------------------------------------------
/src/pages/Standard.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Headline from "../components/Headline";
 3 | import VaccineContent from "../components/VaccineContent";
 4 | import Footer from "../components/Footer";
 5 | 
 6 | export default function Standard() {
 7 |   return (
 8 |     <>
 9 |       <Headline>Standard Vaccines</Headline>
10 |       <VaccineContent />
11 |       <Footer />
12 |     </>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/src/stories/TextFieldContainer.stories.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import TextFieldContainer from "../components/TextFieldContainer";
 3 | 
 4 | export default {
 5 |   title: "Text Field"
 6 | };
 7 | 
 8 | export const TextField = () => (
 9 |   <>
10 |     <TextFieldContainer type="text" placeholder="Enter your vaccine" />
11 |     <TextFieldContainer type="text" placeholder="Select date" />
12 |   </>
13 | );
14 | 


--------------------------------------------------------------------------------
/.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 | 
 9 | # testing
10 | /coverage
11 | 
12 | # production
13 | /build
14 | 
15 | # misc
16 | .DS_Store
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 | .env
22 | 
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import App from "./App";
 4 | import * as serviceWorker from "./serviceWorker";
 5 | 
 6 | ReactDOM.render(<App />, document.getElementById("root"));
 7 | 
 8 | // If you want your app to work offline and load faster, you can change
 9 | // unregister() to register() below. Note this comes with some pitfalls.
10 | // Learn more about service workers: https://bit.ly/CRA-PWA
11 | serviceWorker.unregister();
12 | 


--------------------------------------------------------------------------------
/src/icons/Key.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function Key(props) {
 4 |   return (
 5 |     <svg
 6 |       xmlns="http://www.w3.org/2000/svg"
 7 |       width={props.width}
 8 |       height="44"
 9 |       viewBox="0 0 41.379 41.379"
10 |       fill="#e74424"
11 |     >
12 |       <path d="M20.69,0a20.69,20.69,0,1,0,20.69,20.69A20.713,20.713,0,0,0,20.69,0Zm1.724,22.1v5.49a1.724,1.724,0,1,1-3.448,0V22.1a5.172,5.172,0,1,1,3.448,0Zm0,0" />
13 |     </svg>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/src/components/TextFieldContainer.js:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | const TextFieldContainer = styled.input`
 4 |   display: flex;
 5 |   flex-direction: column;
 6 | 
 7 |   width: 330px;
 8 |   height: 45px;
 9 |   border-radius: 20px;
10 |   background-color: white;
11 |   border: #707070 solid 1px;
12 |   opacity: 0.5;
13 |   margin-top: 10px;
14 |   text-align: center;
15 | 
16 |   &::placeholder {
17 |     color: grey;
18 |   }
19 | `;
20 | 
21 | export default TextFieldContainer;
22 | 


--------------------------------------------------------------------------------
/src/api/diseases.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | export const diseases = [
 4 |   "Hepatitis B",
 5 |   "Rotavirus",
 6 |   "Diphthetria",
 7 |   "Tetanus & acellular pertussis",
 8 |   "Mumps",
 9 |   "Rubella",
10 |   "Measles",
11 |   "Varicella",
12 |   "Hepatitis A",
13 |   "Polyomelitis",
14 |   "Haemophilus",
15 |   "Pneumococcal",
16 |   "Meningococcal meningitis",
17 |   "Hpv",
18 |   "Influenza"
19 | ];
20 | 
21 | export function getDiseases() {
22 |   return axios.get("/diseasesContent");
23 | }
24 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // Use IntelliSense to learn about possible attributes.
 3 |   // Hover to view descriptions of existing attributes.
 4 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 |   "version": "0.2.0",
 6 |   "configurations": [
 7 |     {
 8 |       "type": "chrome",
 9 |       "request": "launch",
10 |       "name": "Launch Chrome against localhost",
11 |       "url": "http://localhost:3000",
12 |       "webRoot": "${workspaceFolder}"
13 |     }
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/src/components/StartPage.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "styled-components";
 3 | import Logo from "../icons/Logo";
 4 | 
 5 | const StartPageMain = styled.main`
 6 |   display: flex;
 7 |   width: 100vw;
 8 |   height: 100vh;
 9 |   background: #e8f1f2;
10 |   align-items: center;
11 |   justify-content: center;
12 | `;
13 | 
14 | export default function StartPage() {
15 |   return (
16 |     <>
17 |       <StartPageMain>
18 |         <Logo />
19 |       </StartPageMain>
20 |     </>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Vaccine Log",
 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 |       "type": "image/png",
12 |       "sizes": "192x192"
13 |     },
14 |     {
15 |       "type": "image/png",
16 |       "sizes": "512x512"
17 |     }
18 |   ],
19 |   "start_url": ".",
20 |   "display": "standalone",
21 |   "theme_color": "#000000",
22 |   "background_color": "#ffffff"
23 | }
24 | 


--------------------------------------------------------------------------------
/src/components/SelectDate.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "styled-components";
 3 | 
 4 | const CalendarInput = styled.input`
 5 |   border-radius: 5px;
 6 |   font: 1em "Fira Sans", sans-serif;
 7 |   color: grey;
 8 |   border: none;
 9 |   margin: 3px 5px 0 5px;
10 |   background: transparent;
11 | `;
12 | 
13 | export default function SelectDate() {
14 |   return (
15 |     <CalendarInput
16 |       type="date"
17 |       name="vaccination-date"
18 |       min="1990-01-01"
19 |       max="2999-12-31"
20 |     ></CalendarInput>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/src/stories/Icons.stories.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Medicine from "../icons/Medicine";
 3 | import Calendar from "../icons/Calendar";
 4 | import Faq from "../icons/Faq";
 5 | import House from "../icons/House";
 6 | import Add from "../icons/Add";
 7 | 
 8 | export default {
 9 |   title: "MedicineIcon"
10 | };
11 | 
12 | export const MedicineIcon = () => <Medicine />;
13 | export const CalendarIcon = () => <Calendar />;
14 | export const FaqIcon = () => <Faq />;
15 | export const HomeIcon = () => <House />;
16 | export const AddIcon = () => <Add />;
17 | 


--------------------------------------------------------------------------------
/src/icons/House.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function House(props) {
 4 |   return (
 5 |     <svg
 6 |       xmlns="http://www.w3.org/2000/svg"
 7 |       width={props.width}
 8 |       height="44"
 9 |       viewBox="0 0 51.856 45.315"
10 |     >
11 |       <g transform="translate(0 -38.25)">
12 |         <g transform="translate(0 38.25)">
13 |           <path
14 |             d="M20.742,83.565V67.572H31.113V83.565H44.077V62.24h7.778L25.928,38.25,0,62.24H7.778V83.565Z"
15 |             transform="translate(0 -38.25)"
16 |             fill="#e74424"
17 |           />
18 |         </g>
19 |       </g>
20 |     </svg>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/src/api/diseasesFind.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | export const diseasesFind = [
 4 |   { name: "Hepatitis B", id: 1 },
 5 |   { name: "Rotavirus", id: 2 },
 6 |   { name: "Diphthetria", id: 3 },
 7 |   { name: "Tetanus & acellular pertussis", id: 4 },
 8 |   { name: "Mumps", id: 5 },
 9 |   { name: "Rubella", id: 6 },
10 |   { name: "Measles", id: 7 },
11 |   { name: "Varicella", id: 8 },
12 |   { name: "Hepatitis A", id: 9 },
13 |   { name: "Polyomelitis", id: 10 },
14 |   { name: "Haemophilus", id: 11 },
15 |   { name: "Pneumococcal", id: 12 },
16 |   { name: "Meningococcal meningitis", id: 13 },
17 |   { name: "Hpv", id: 14 },
18 |   { name: "Influenza", id: 15 }
19 | ];
20 | 
21 | export function getDiseases() {
22 |   return axios.get("/diseasesContent");
23 | }
24 | 


--------------------------------------------------------------------------------
/src/components/SearchBar.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "styled-components";
 3 | 
 4 | const TextField = styled.input`
 5 |   display: flex;
 6 |   flex-direction: column;
 7 |   width: 330px;
 8 |   height: 45px;
 9 |   border-radius: 20px;
10 |   background-color: white;
11 |   border: #707070 solid 1px;
12 |   opacity: 0.5;
13 |   margin-top: 50px;
14 |   text-align: center;
15 |   font-size: 16px;
16 |   &::placeholder {
17 |     color: grey;
18 |   }
19 | `;
20 | 
21 | export default function SearchBar({ onSearch }) {
22 |   function handleInputChange(event) {
23 |     const value = event.target.value;
24 |     onSearch(value);
25 |   }
26 | 
27 |   return (
28 |     <TextField
29 |       type="search"
30 |       placeholder="Enter your vaccine"
31 |       onChange={handleInputChange}
32 |     ></TextField>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/src/icons/Logo.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function Logo() {
 4 |   return (
 5 |     <svg
 6 |       xmlns="http://www.w3.org/2000/svg"
 7 |       width="274"
 8 |       height="268"
 9 |       viewBox="0 0 274 268"
10 |     >
11 |       <g fill="#fff" stroke="#707070" strokeWidth="1">
12 |         <rect width="274" height="268" rx="63" stroke="none" />
13 |         <rect x="0.5" y="0.5" width="273" height="267" rx="62.5" fill="none" />
14 |       </g>
15 |       <text
16 |         transform="translate(145 145)"
17 |         fill="rgba(12,20,52,0.92)"
18 |         fontSize="30"
19 |         fontFamily="Roboto-Bold, Roboto"
20 |         fontWeight="700"
21 |         letterSpacing="-0.02em"
22 |       >
23 |         <tspan x="-84.833" y="0">
24 |           vaccine.log{" "}
25 |         </tspan>
26 |       </text>
27 |     </svg>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 cristinamerisoiu
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "styled-components";
 3 | import Calendar from "../icons/Calendar";
 4 | import FaqIcon from "../icons/FaqIcon";
 5 | import Medicine from "../icons/Medicine";
 6 | import House from "../icons/House";
 7 | import Key from "../icons/Key";
 8 | import { Link } from "react-router-dom";
 9 | 
10 | const FooterWrapper = styled.nav`
11 |   display: flex;
12 |   width: 100vw;
13 |   height: 52px;
14 |   background-color: #003459;
15 |   border: solid 1px;
16 |   justify-content: space-around;
17 |   padding: 4px;
18 |   position: sticky;
19 | `;
20 | 
21 | export default function Footer() {
22 |   return (
23 |     <>
24 |       <FooterWrapper>
25 |         <Link to="/">
26 |           <House />
27 |         </Link>
28 |         <Link to="/standard">
29 |           <Medicine />
30 |         </Link>
31 |         <Link to="/trackvaccines">
32 |           <Calendar />
33 |         </Link>
34 |         <Link to="/faq">
35 |           <FaqIcon />
36 |         </Link>
37 |         <Link to="/login">
38 |           <Key />
39 |         </Link>
40 |       </FooterWrapper>
41 |     </>
42 |   );
43 | }
44 | 


--------------------------------------------------------------------------------
/src/components/Disclaimer.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "styled-components";
 3 | 
 4 | const DisclaimerWrapper = styled.div`
 5 |   display: flex;
 6 |   margin-top: 200px;
 7 | `;
 8 | 
 9 | const LineBreak = styled.hr`
10 |   color: grey;
11 | `;
12 | 
13 | const DisclaimerText = styled.small`
14 |   font-size: 0.7em;
15 |   color: #66023c;
16 |   font-family: "Open Sans", sans-serif;
17 |   padding: 10px;
18 |   text-align: justify;
19 | `;
20 | 
21 | export default function Disclaimer() {
22 |   return (
23 |     <>
24 |       <DisclaimerWrapper>
25 |         <DisclaimerText>
26 |           <LineBreak />
27 |           <p>
28 |             * The information contained in this website is not intended to
29 |             recommend the self management of health problems or wellness. It is
30 |             not intended to endorse or recommend any particular type of medical
31 |             treatment. Should any reader have any health care related questions,
32 |             promptly call or consult your physician or healthcare provider.
33 |           </p>
34 |         </DisclaimerText>
35 |       </DisclaimerWrapper>
36 |     </>
37 |   );
38 | }
39 | 


--------------------------------------------------------------------------------
/src/pages/Home.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import MenuHamburger from "../components/MenuHamburger";
 3 | import Navigation from "../components/Navigation";
 4 | import styled from "styled-components";
 5 | import Logo from "../icons/Logo";
 6 | import TextBox from "../components/TextBox";
 7 | 
 8 | const Text = styled.h4`
 9 |   font-family: "Open Sans", sans-serif;
10 |   text-align: justify;
11 |   color: #66023c;
12 | `;
13 | 
14 | const StartMain = styled.main`
15 |   display: flex;
16 |   width: 100vw;
17 |   height: 100vh;
18 |   background: #e8f1f2;
19 |   align-items: center;
20 |   justify-content: center;
21 | `;
22 | 
23 | export default function Start() {
24 |   const [open, setOpen] = useState(false);
25 |   return (
26 |     <>
27 |       <StartMain>
28 |         <Navigation open={open} onClick={() => setOpen(!open)} />
29 |         <MenuHamburger open={open} />
30 |         <Logo />
31 |       </StartMain>
32 |       <TextBox>
33 |         <Text>
34 |           vaccine.log : provides you with the most important information about
35 |           vaccines at a glance. Keep track of your vaccines - painless and
36 |           straightforward.
37 |         </Text>
38 |       </TextBox>
39 |     </>
40 |   );
41 | }
42 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import GlobalStyles from "./GlobalStyles";
 3 | import Home from "./pages/Home";
 4 | import Standard from "./pages/Standard";
 5 | import TrackVaccines from "./pages/TrackVaccines";
 6 | import Login from "./pages/Login";
 7 | import Faq from "./pages/Faq";
 8 | import { BrowserRouter as Router, Route } from "react-router-dom";
 9 | import styled from "styled-components";
10 | 
11 | const StyledApp = styled.main`
12 |   display: grid;
13 |   grid-template-rows: 1fr auto;
14 |   grid-template-columns: 1fr;
15 |   height: 100vh;
16 | `;
17 | 
18 | const Container = styled.div`
19 |   overflow: scroll;
20 |   display: flex;
21 |   flex-direction: column;
22 | `;
23 | 
24 | function App() {
25 |   return (
26 |     <StyledApp>
27 |       <GlobalStyles />
28 |       <Router>
29 |         <Container>
30 |           <Route exact path="/" component={Home} />
31 |           <Route path="/standard" component={Standard} />
32 |           <Route path="/trackvaccines" component={TrackVaccines} />
33 |           <Route path="/login" component={Login} />
34 |           <Route path="/faq" component={Faq} />
35 |         </Container>
36 |       </Router>
37 |     </StyledApp>
38 |   );
39 | }
40 | 
41 | export default App;
42 | 


--------------------------------------------------------------------------------
/src/components/Navigation.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "styled-components";
 3 | 
 4 | export const StyledBurger = styled.button`
 5 |   position: absolute;
 6 |   top: 5%;
 7 |   left: 2rem;
 8 |   display: flex;
 9 |   flex-direction: column;
10 |   justify-content: space-around;
11 |   width: 2rem;
12 |   height: 2rem;
13 |   background: transparent;
14 |   border: none;
15 |   cursor: pointer;
16 |   padding: 0;
17 |   z-index: 10;
18 | 
19 |   &:focus {
20 |     outline: none;
21 |   }
22 | 
23 |   div {
24 |     width: 2rem;
25 |     height: 0.25rem;
26 |     background: lightblue;
27 |     border-radius: 10px;
28 |     transition: all 0.3s linear;
29 |     position: relative;
30 |     transform-origin: 1px;
31 | 
32 |     :first-child {
33 |       transform: ${({ open }) => (open ? "rotate(45deg)" : "rotate(0)")};
34 |     }
35 | 
36 |     :nth-child(2) {
37 |       opacity: ${({ open }) => (open ? "0" : "1")};
38 |       transform: ${({ open }) => (open ? "translateX(20px)" : "translateX(0)")};
39 |     }
40 | 
41 |     :nth-child(3) {
42 |       transform: ${({ open }) => (open ? "rotate(-45deg)" : "rotate(0)")};
43 |     }
44 |   }
45 | `;
46 | 
47 | export default function NavbarHamburger({ open, onClick }) {
48 |   return (
49 |     <>
50 |       <StyledBurger open={open} onClick={onClick}>
51 |         <div />
52 |         <div />
53 |         <div />
54 |       </StyledBurger>
55 |     </>
56 |   );
57 | }
58 | 


--------------------------------------------------------------------------------
/src/icons/Calendar.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function Calendar(props) {
 4 |   return (
 5 |     <svg
 6 |       xmlns="http://www.w3.org/2000/svg"
 7 |       width={props.width}
 8 |       height="44"
 9 |       viewBox="0 0 41.259 44.315"
10 |     >
11 |       <g transform="translate(-2)">
12 |         <path
13 |           d="M37.147,4V7.056H31.8V4H13.461V7.056H8.112V4H2v8.4H43.259V4Z"
14 |           transform="translate(0 -0.944)"
15 |           fill="#e74424"
16 |         />
17 |         <path
18 |           d="M8.112,15H2V47.854H43.259V15H8.112Z"
19 |           transform="translate(0 -3.539)"
20 |           fill="#edeada"
21 |         />
22 |         <path
23 |           d="M32.158,22H10V44.158H39.034V22Zm-6.876,1.528h5.348v5.348H25.281Zm5.348,12.225H25.281V30.4h5.348ZM18.4,30.4h5.348v5.348H18.4Zm0-6.876h5.348v5.348H18.4Zm-6.876,0h5.348v5.348H11.528Zm0,6.876h5.348v5.348H11.528Zm5.348,12.225H11.528V37.281h5.348Zm6.876,0H18.4V37.281h5.348Zm6.876,0H25.281V37.281h5.348Zm6.876,0H32.158V37.281h5.348Zm0-6.876H32.158V30.4h5.348Zm-5.348-6.876V23.528h5.348v5.348Z"
24 |           transform="translate(-1.888 -5.191)"
25 |           fill="#cec9ae"
26 |         />
27 |         <rect width="5" height="6" transform="translate(8)" fill="#28384c" />
28 |         <rect width="5" height="6" transform="translate(32)" fill="#28384c" />
29 |         <rect
30 |           width="6"
31 |           height="6"
32 |           transform="translate(23 25)"
33 |           fill="#26b99a"
34 |         />
35 |       </g>
36 |     </svg>
37 |   );
38 | }
39 | 


--------------------------------------------------------------------------------
/src/icons/FaqIcon.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function FaqIcon(props) {
 4 |   return (
 5 |     <svg
 6 |       xmlns="http://www.w3.org/2000/svg"
 7 |       width={props.width}
 8 |       height="44"
 9 |       viewBox="0 0 46.315 46.315"
10 |     >
11 |       <path
12 |         d="M46.315,23.158A23.158,23.158,0,1,1,23.158,0,23.157,23.157,0,0,1,46.315,23.158Zm0,0"
13 |         fill="#e74424"
14 |       />
15 |       <g transform="translate(7.619 5.066)">
16 |         <path
17 |           d="M91.882,92.184a1.357,1.357,0,0,1-1.357-1.357V83.5a15.131,15.131,0,0,1-6.3-12.26A15.542,15.542,0,1,1,99.762,86.49c-.369,0-.743-.013-1.117-.04L92.8,91.825A1.356,1.356,0,0,1,91.882,92.184Zm7.88-33.47A12.7,12.7,0,0,0,86.936,71.245a12.449,12.449,0,0,0,5.69,10.413,1.357,1.357,0,0,1,.613,1.135v4.942l4.011-3.689a1.356,1.356,0,0,1,1.066-.35,13.325,13.325,0,0,0,1.446.08,12.534,12.534,0,1,0,0-25.062Zm0,0"
18 |           transform="translate(-84.223 -56)"
19 |           fill="#fff"
20 |         />
21 |         <path
22 |           d="M198.867,145.358A1.357,1.357,0,0,1,197.51,144v-2.042a1.357,1.357,0,0,1,1.357-1.357h1.418a2.188,2.188,0,1,0,0-4.377h-4.964a1.357,1.357,0,1,1,0-2.714h4.964a4.9,4.9,0,1,1,0,9.8h-.061V144A1.357,1.357,0,0,1,198.867,145.358Zm0,0"
23 |           transform="translate(-184.038 -126.5)"
24 |           fill="#fff"
25 |         />
26 |         <path
27 |           d="M230.825,286.262a1.914,1.914,0,1,1-1.915-1.915A1.914,1.914,0,0,1,230.825,286.262Zm0,0"
28 |           transform="translate(-214.081 -263.691)"
29 |           fill="#fff"
30 |         />
31 |       </g>
32 |     </svg>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vacciner",
 3 |   "version": "0.1.0",
 4 |   "author": "cristinamerisoiu",
 5 |   "private": true,
 6 |   "dependencies": {
 7 |     "@hapi/joi": "^16.1.7",
 8 |     "axios": "^0.19.0",
 9 |     "dotenv": "^8.2.0",
10 |     "express": "^4.17.1",
11 |     "json-server": "^0.15.1",
12 |     "mongoose": "^5.7.7",
13 |     "npm": "^6.13.4",
14 |     "react": "^16.10.2",
15 |     "react-datepicker": "^2.9.6",
16 |     "react-dom": "^16.10.2",
17 |     "react-player": "^1.13.0",
18 |     "react-router-dom": "^5.1.2",
19 |     "react-scripts": "3.2.0",
20 |     "styled-components": "^4.4.0",
21 |     "video-react": "^0.14.1"
22 |   },
23 |   "scripts": {
24 |     "server": "nodemon src/server.js",
25 |     "start": "react-scripts start",
26 |     "build": "react-scripts build",
27 |     "test": "react-scripts test",
28 |     "eject": "react-scripts eject",
29 |     "storybook": "start-storybook -p 9009 -s public",
30 |     "build-storybook": "build-storybook -s public"
31 |   },
32 |   "eslintConfig": {
33 |     "extends": "react-app"
34 |   },
35 |   "browserslist": {
36 |     "production": [
37 |       ">0.2%",
38 |       "not dead",
39 |       "not op_mini all"
40 |     ],
41 |     "development": [
42 |       "last 1 chrome version",
43 |       "last 1 firefox version",
44 |       "last 1 safari version"
45 |     ]
46 |   },
47 |   "devDependencies": {
48 |     "@storybook/addon-actions": "^5.2.3",
49 |     "@storybook/addon-links": "^5.2.3",
50 |     "@storybook/addons": "^5.2.3",
51 |     "@storybook/react": "^5.2.3",
52 |     "eslint": "^6.5.1",
53 |     "nodemon": "^1.19.4",
54 |     "prettier": "1.18.2",
55 |     "proptypes": "^1.1.0"
56 |   },
57 |   "proxy": "http://localhost:3002"
58 | }
59 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta name="vaccine.log" />
 9 |     <link rel="apple-touch-icon" />
10 |     <link
11 |       href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap"
12 |       rel="stylesheet"
13 |     />
14 |     <!--
15 |       manifest.json provides metadata used when your web app is installed on a
16 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
17 |     -->
18 |     <link rel="manifest" />
19 |     <!--
20 |       Notice the use of %PUBLIC_URL% in the tags above.
21 |       It will be replaced with the URL of the `public` folder during the build.
22 |       Only files inside the `public` folder can be referenced from the HTML.
23 | 
24 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
25 |       work correctly both with client-side routing and a non-root public URL.
26 |       Learn how to configure a non-root public URL by running `npm run build`.
27 |     -->
28 |     <title>vaccine.log</title>
29 |   </head>
30 |   <body>
31 |     <noscript>You need to enable JavaScript to run this app.</noscript>
32 |     <div id="root"></div>
33 |     <!--
34 |       This HTML file is a template.
35 |       If you open it directly in the browser, you will see an empty page.
36 | 
37 |       You can add webfonts, meta tags, or analytics to this file.
38 |       The build step will place the bundled scripts into the <body> tag.
39 | 
40 |       To begin the development, run `npm start` or `yarn start`.
41 |       To create a production bundle, use `npm run build` or `yarn build`.
42 |     -->
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/src/components/VaccineContent.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import styled from "styled-components";
 3 | import Disclaimer from "../components/Disclaimer";
 4 | import { getDiseases } from "../api/diseases";
 5 | 
 6 | const Disease = styled.details`
 7 |   width: 100px;
 8 |   flex-direction: column;
 9 |   padding: 15px;
10 | `;
11 | 
12 | const DiseaseSummary = styled.summary`
13 |   padding: 2px 6px;
14 |   width: 15em;
15 |   box-shadow: 2px 2px 3px grey;
16 |   font-family: "Open Sans", sans-serif;
17 |   border-radius: 10px;
18 | `;
19 | 
20 | const DiseaseText = styled.div`
21 |   display: flex;
22 |   background-color: #edf2f4;
23 |   box-shadow: 1px 1px 2px grey;
24 |   color: #696969;
25 |   width: 15rem;
26 |   font-family: "Roboto", sans-serif;
27 |   border-radius: 10px;
28 |   margin-top: 2px;
29 | `;
30 | 
31 | const StyledDiv = styled.div`
32 |   display: flex;
33 |   color: #696969;
34 |   padding-left: 5px;
35 | `;
36 | 
37 | export default function VaccineContent() {
38 |   const [diseases, setDiseases] = useState([]);
39 | 
40 |   useEffect(() => {
41 |     getDiseases()
42 |       .then(response => {
43 |         // console.log(response);
44 |         setDiseases(response.data);
45 |       })
46 |       .catch(error => {
47 |         console.log(error);
48 |       });
49 |   }, []);
50 | 
51 |   return (
52 |     <>
53 |       {diseases && (
54 |         <>
55 |           {diseases.map(disease => {
56 |             return (
57 |               <Disease>
58 |                 <DiseaseSummary key={disease.id}>
59 |                   {disease.title}:
60 |                 </DiseaseSummary>
61 |                 <DiseaseText>
62 |                   <div>
63 |                     {disease.vaccines.map(vaccine => (
64 |                       <StyledDiv key={vaccine.title}>
65 |                         <a href={vaccine.href}>
66 |                           <div key={disease.id}>{vaccine.title}</div>
67 |                         </a>
68 |                         <p key={disease.id}>{vaccine.text}</p>
69 |                       </StyledDiv>
70 |                     ))}
71 |                   </div>
72 |                 </DiseaseText>
73 |               </Disease>
74 |             );
75 |           })}
76 |           <Disclaimer />
77 |         </>
78 |       )}
79 |     </>
80 |   );
81 | }
82 | 


--------------------------------------------------------------------------------
/src/components/MenuHamburger.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "styled-components";
 3 | import Medicine from "../icons/Medicine";
 4 | import Calendar from "../icons/Calendar";
 5 | import FaqIcon from "../icons/FaqIcon";
 6 | import { Link } from "react-router-dom";
 7 | import Key from "../icons/Key";
 8 | 
 9 | export const StyledMenu = styled.nav`
10 |   display: flex;
11 |   flex-direction: column;
12 |   justify-content: center;
13 |   background: #003459;
14 |   height: 100%;
15 |   text-align: left;
16 |   padding: 2rem;
17 |   position: absolute;
18 |   top: 0;
19 |   left: 0;
20 |   transition: transform 0.3s ease-in-out;
21 |   transform: ${({ open }) => (open ? "translateX(0)" : "translateX(-100%)")};
22 | 
23 |   div {
24 |     display: flex;
25 |     align-items: center;
26 |   }
27 | 
28 |   a {
29 |     font-size: 16px;
30 |     padding: 20px;
31 |     letter-spacing: 0.5rem;
32 |     color: white;
33 |     text-decoration: none;
34 |     transition: color 0.3s linear;
35 |     font-family: "Open Sans", sans-serif;
36 | 
37 |     &:hover {
38 |       color: deeppink;
39 |     }
40 |   }
41 | `;
42 | 
43 | const TextWrapper = styled.span`
44 |   margin-left: 15px;
45 | `;
46 | const StyledLink = styled(Link)`
47 |   text-decoration: none;
48 | `;
49 | 
50 | export default function MenuHamburger({ open }) {
51 |   return (
52 |     <>
53 |       <StyledMenu open={open}>
54 |         <StyledLink to="/standard">
55 |           <div>
56 |             <span aria-label="standard vaccines">
57 |               <Medicine width={30} />
58 |             </span>
59 |             <TextWrapper>Standard vaccines</TextWrapper>
60 |           </div>
61 |         </StyledLink>
62 | 
63 |         <StyledLink to="/trackvaccines">
64 |           <div>
65 |             <span aria-label="track your vaccines">
66 |               <Calendar width={25} />
67 |             </span>
68 |             <TextWrapper>Track your vaccines</TextWrapper>
69 |           </div>
70 |         </StyledLink>
71 |         <StyledLink to="/faq">
72 |           <div>
73 |             <span aria-label="faq">
74 |               <FaqIcon width={30} />
75 |             </span>
76 |             <TextWrapper>Faq</TextWrapper>
77 |           </div>
78 |         </StyledLink>
79 | 
80 |         <StyledLink to="/login">
81 |           <div>
82 |             <span aria-label="login">
83 |               <Key width={25} />
84 |             </span>
85 |             <TextWrapper>My account</TextWrapper>
86 |           </div>
87 |         </StyledLink>
88 |       </StyledMenu>
89 |     </>
90 |   );
91 | }
92 | 


--------------------------------------------------------------------------------
/src/pages/Login.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import SignupButton from "../components/SignupButton";
  3 | import TextFieldContainer from "../components/TextFieldContainer";
  4 | import styled from "styled-components";
  5 | import Headline from "../components/Headline";
  6 | import Footer from "../components/Footer";
  7 | 
  8 | const LoginFormWrapper = styled.form`
  9 |   width: 100%;
 10 |   height: 100%;
 11 | `;
 12 | 
 13 | const LoginWrapper = styled.div`
 14 |   display: flex;
 15 |   flex-direction: column;
 16 |   align-items: center;
 17 |   margin: 20px;
 18 | `;
 19 | 
 20 | const ButtonWrapper = styled.div`
 21 |   display: flex;
 22 |   justify-content: center;
 23 | `;
 24 | 
 25 | const TitleLogin = styled.h2`
 26 |   font-family: "Open Sans", sans-serif;
 27 |   font-size: 16px;
 28 | `;
 29 | export default function Login() {
 30 |   const [email, setEmail] = useState("");
 31 |   const [password, setPassword] = useState("");
 32 |   const [signUpEmail, setSignUpEmail] = useState("");
 33 |   const [signUpPassword, setSignUpPassword] = useState("");
 34 | 
 35 |   function handleSubmit(event) {
 36 |     event.preventDefault();
 37 |   }
 38 | 
 39 |   function validateForm() {
 40 |     return email.length > 0 && password.length > 0;
 41 |   }
 42 | 
 43 |   return (
 44 |     <>
 45 |       <Headline>My account</Headline>
 46 |       <LoginFormWrapper>
 47 |         <LoginWrapper onSubmit={handleSubmit}>
 48 |           <TitleLogin>Already have an account? Login</TitleLogin>
 49 |           <TextFieldContainer
 50 |             input
 51 |             type="email"
 52 |             placeholder="Enter Email"
 53 |             required
 54 |             onChange={event => setEmail(event.target.value)}
 55 |             value={email}
 56 |           />
 57 |           <TextFieldContainer
 58 |             input
 59 |             type="password"
 60 |             placeholder="Enter Password"
 61 |             required
 62 |             onChange={event => setPassword(event.target.value)}
 63 |             value={password}
 64 |           />
 65 |           <ButtonWrapper>
 66 |             <SignupButton disabled={!validateForm()} type="submit">
 67 |               Login
 68 |             </SignupButton>
 69 |           </ButtonWrapper>
 70 |         </LoginWrapper>
 71 | 
 72 |         <LoginWrapper onSubmit={handleSubmit}>
 73 |           <TitleLogin>Create your account</TitleLogin>
 74 |           <TextFieldContainer
 75 |             input
 76 |             type="email"
 77 |             placeholder="Enter Email"
 78 |             required
 79 |             onChange={event => setSignUpEmail(event.target.value)}
 80 |             value={signUpEmail}
 81 |           />
 82 |           <TextFieldContainer
 83 |             input
 84 |             type="password"
 85 |             placeholder="Enter Password"
 86 |             required
 87 |             onChange={event => setSignUpPassword(event.target.value)}
 88 |             value={signUpPassword}
 89 |           />
 90 |           <ButtonWrapper>
 91 |             <SignupButton disabled={!validateForm()} type="submit">
 92 |               Sign Up
 93 |             </SignupButton>
 94 |           </ButtonWrapper>
 95 |         </LoginWrapper>
 96 |       </LoginFormWrapper>
 97 |       <Footer />
 98 |     </>
 99 |   );
100 | }
101 | 


--------------------------------------------------------------------------------
/src/db.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "diseasesContent":[
  3 |         {
  4 |         "id":1,
  5 |         "title":"Babies",
  6 |         "vaccines":[
  7 |             {
  8 |                 "href":"https://www.who.int/news-room/fact-sheets/detail/hepatitis-a",
  9 |                 "title":"Hepatitis A"
 10 |             },
 11 |             {
 12 |                 "href":"https://www.who.int/immunization/diseases/rotavirus/en/",
 13 |                 "title":"Rotavirus"
 14 |             },
 15 |             {
 16 |                 "href":"https://www.who.int/biologicals/vaccines/diphtheria/en/",
 17 |                 "title":"Diphtheria,tetanus & acellular pertussis"
 18 |             },
 19 |             {
 20 |                 "href":"https://www.who.int/news-room/fact-sheets/detail/rubella",
 21 |                 "title":"Measles, mumps, rubella"
 22 |             },
 23 |             {
 24 |                 "href":"https://www.who.int/immunization/diseases/varicella/en/",
 25 |                 "title":"Varicella"
 26 |             },
 27 |             {
 28 |                 "href":"https://www.who.int/news-room/fact-sheets/detail/hepatitis-b",
 29 |                 "title":"Hepatitis B"
 30 |             },
 31 |             {
 32 |                 "href":"https://www.who.int/topics/poliomyelitis/en/",
 33 |                 "title":"Poliomyelitis"
 34 |             },
 35 |             {
 36 |                 "href":"https://www.who.int/ith/diseases/HiB/en/",
 37 |                 "title":"Haemophilus"
 38 |             },
 39 |             {
 40 |                 "href":"https://www.who.int/biologicals/areas/vaccines/pneumo/en/",
 41 |                 "title":"Pnemococcal"
 42 |             },
 43 |             {
 44 |                 "href":"https://www.who.int/immunization/diseases/meningitis/en/",
 45 |                 "title":""
 46 |             }
 47 |         ]
 48 |     },
 49 |     {
 50 |         "id":2,
 51 |         "title":"Children 5-6 years old",
 52 |         "vaccines":[
 53 |             {
 54 |                 "href":"https://www.who.int/biologicals/vaccines/diphtheria/en/",
 55 |                 "title":"Diphtheria,tetanus & acellular pertussis"
 56 |             }
 57 |         ]
 58 |     },
 59 |     {
 60 |         "id":2,
 61 |         "title":"Youngsters 9-17 years old",
 62 |         "vaccines":[
 63 |             {
 64 |                 "href":"https://www.who.int/biologicals/vaccines/diphtheria/en/",
 65 |                 "title":"Diphtheria,tetanus & acellular pertussis"
 66 |             },
 67 |             {
 68 |                 "href":"https://www.who.int/topics/poliomyelitis/en/",
 69 |                 "title":"Poliomyelitis"
 70 |             },
 71 |             {
 72 |                 "text":"All the children vaccines as long as the diseases was not experienced or the vaccines weren't made"
 73 |                 
 74 |             },
 75 |             {
 76 |                 "href":"https://www.who.int/reproductivehealth/topics/cancers/hpv-vaccination/en/",
 77 |                 "title":"Vaccination against HPV for girls aged 12-17 years old"
 78 |             }
 79 |         ]
 80 |     },
 81 |     {
 82 |         "id":2,
 83 |         "title":"Adults",
 84 |         "vaccines":[
 85 |             {
 86 |                 "text":"Refresh of tetanus and diphtheria every 10 years."
 87 |             }
 88 |         ]
 89 |     },
 90 |     {
 91 |         "id":2,
 92 |         "title":"Adults over 60",
 93 |         "vaccines":[
 94 |             {
 95 |                 "text":"Additional vaccines for Infleunza (every year) and once for Pneumococcal."
 96 |             }
 97 |         ]
 98 |     }
 99 |     ]
100 | }
101 | 
102 | 


--------------------------------------------------------------------------------
/src/pages/TrackVaccines.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import styled from "styled-components";
  3 | import Headline from "../components/Headline";
  4 | import SearchBar from "../components/SearchBar";
  5 | import { diseases } from "../api/diseases";
  6 | import axios from "axios";
  7 | import SelectDate from "../components/SelectDate";
  8 | import Footer from "../components/Footer";
  9 | 
 10 | const PageWrapper = styled.div`
 11 |   flex-grow: 1;
 12 |   align-items: center;
 13 |   display: flex;
 14 |   flex-direction: column;
 15 | `;
 16 | 
 17 | const SearchDisease = styled.ul`
 18 |   display: flex;
 19 |   margin-top: 10px;
 20 |   font-family: "Open Sans", sans-serif;
 21 | `;
 22 | const ResultDiseases = styled.div`
 23 |   display: flex;
 24 |   padding: 5px;
 25 | `;
 26 | 
 27 | const ButtonAdd = styled.button`
 28 |   background: transparent;
 29 |   border: 2px solid #0099cc;
 30 |   border-radius: 6px;
 31 |   color: black;
 32 |   padding: 5px;
 33 |   text-align: center;
 34 |   font-size: 10px;
 35 |   margin: 10px;
 36 | 
 37 |   :hover {
 38 |     background-color: #008cba;
 39 |     color: white;
 40 |   }
 41 |   :active {
 42 |     color: red;
 43 |   }
 44 | `;
 45 | 
 46 | const DateWrapper = styled.div`
 47 |   display: flex;
 48 |   flex-direction: column;
 49 |   width: 330px;
 50 |   height: 45px;
 51 |   border-radius: 20px;
 52 |   background-color: white;
 53 |   border: #707070 solid 1px;
 54 |   opacity: 0.5;
 55 |   margin-top: 50px;
 56 |   padding: 7px;
 57 |   text-align: center;
 58 |   justify-content: center;
 59 |   align-items: center;
 60 | 
 61 |   &::placeholder {
 62 |     color: grey;
 63 |   }
 64 | `;
 65 | 
 66 | export default function TrackVaccines({ handleInputChange }) {
 67 |   const [search, setSearch] = useState("aaa");
 68 | 
 69 |   const FilteredDiseases = diseases.filter(disease =>
 70 |     disease.toLowerCase().includes(search.toLowerCase())
 71 |   );
 72 | 
 73 |   const [startDate, setStartDate] = useState(new Date());
 74 | 
 75 |   function addToDbJson(disease) {
 76 |     axios
 77 |       .post("/diseases", {
 78 |         disease,
 79 |         startDate
 80 |       })
 81 |       .then(resp => {})
 82 |       .catch(error => {
 83 |         console.log(error);
 84 |       });
 85 |   }
 86 | 
 87 |   useEffect(() => {
 88 |     axios
 89 |       .get("/diseases")
 90 |       .then(resp => {})
 91 |       .catch(error => {
 92 |         console.log(error);
 93 |       });
 94 |   }, []);
 95 | 
 96 |   function handleClick(disease) {
 97 |     addToDbJson(disease);
 98 |     // alert(`${disease} added to your log`);
 99 |     console.log(`Link was clicked - data: ${disease}`);
100 |   }
101 | 
102 |   function handleSearch(value) {
103 |     setSearch(value);
104 |     console.log(search);
105 |   }
106 | 
107 |   return (
108 |     <>
109 |       <Headline>Track your vaccines</Headline>
110 |       <PageWrapper>
111 |         <SearchBar
112 |           handleInputChange={setSearch}
113 |           onSearch={handleSearch}
114 |           onChange={event => handleInputChange(event.target.value)}
115 |         />
116 |         {FilteredDiseases.map(disease => (
117 |           <ResultDiseases key={disease}>
118 |             <SearchDisease>{disease}</SearchDisease>
119 |             <ButtonAdd disease={disease} onClick={() => handleClick(disease)}>
120 |               Add
121 |             </ButtonAdd>
122 |           </ResultDiseases>
123 |         ))}
124 | 
125 |         <DateWrapper>
126 |           <SelectDate
127 |             selected={startDate}
128 |             onChange={date => setStartDate(date)}
129 |             onClick={startDate}
130 |           />
131 |         </DateWrapper>
132 |       </PageWrapper>
133 |       <Footer />
134 |     </>
135 |   );
136 | }
137 | 


--------------------------------------------------------------------------------
/src/pages/Faq.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import styled from "styled-components";
  3 | import Headline from "../components/Headline";
  4 | import Footer from "../components/Footer";
  5 | 
  6 | const FaqDetails = styled.details`
  7 |   display: flex;
  8 |   width: 100px;
  9 |   flex-direction: column;
 10 |   padding: 15px;
 11 | `;
 12 | 
 13 | const FaqSummary = styled.summary`
 14 |   padding: 2px 6px;
 15 |   width: 15em;
 16 |   box-shadow: 2px 2px 3px grey;
 17 |   font-family: "Open Sans", sans-serif;
 18 |   border-radius: 10px;
 19 | `;
 20 | 
 21 | const PageWrapper = styled.div`
 22 |   flex-grow: 1;
 23 | `;
 24 | 
 25 | const FaqText = styled.div`
 26 |   display: flex;
 27 |   background-color: #edf2f4;
 28 |   box-shadow: 1px 1px 2px grey;
 29 |   color: #696969;
 30 |   width: 15rem;
 31 |   font-family: "Roboto", sans-serif;
 32 |   border-radius: 10px;
 33 |   margin-top: 2px;
 34 |   line-height: 1.3;
 35 |   word-spacing: 1.5px;
 36 |   padding: 10px;
 37 | `;
 38 | 
 39 | export default function Faq() {
 40 |   return (
 41 |     <>
 42 |       <Headline>Faq</Headline>
 43 |       <PageWrapper>
 44 |         <FaqDetails>
 45 |           <FaqSummary>Why are vaccinations important?</FaqSummary>
 46 |           <FaqText>
 47 |             Vaccinations protect people against serious diseases by stimulating
 48 |             the immune system to create antibodies against certain bacteria or
 49 |             viruses.
 50 |           </FaqText>
 51 |         </FaqDetails>
 52 | 
 53 |         <FaqDetails>
 54 |           <FaqSummary>
 55 |             How do I know that vaccines are safe and have been tested properly?
 56 |           </FaqSummary>
 57 |           <FaqText>
 58 |             All vaccines go through a long and thorough process of development
 59 |             and testing before they are licensed for use. It can take as much as
 60 |             20 years for a vaccine to go from first concept to being licensed.
 61 |           </FaqText>
 62 |         </FaqDetails>
 63 |         <FaqDetails>
 64 |           <FaqSummary>Is there a link between vaccines and autism?</FaqSummary>
 65 |           <FaqText>
 66 |             No. Scientific studies and reviews continue to show no relationship
 67 |             between vaccines and autism.
 68 |           </FaqText>
 69 |         </FaqDetails>
 70 |         <FaqDetails>
 71 |           <FaqSummary>What are the side effects of vaccines?</FaqSummary>
 72 |           <FaqText>
 73 |             Vaccines, like any medication, may cause some side effects. Most of
 74 |             these side effects are very minor, like soreness where the shot was
 75 |             given, fussiness, or a low-grade fever. These side effects typically
 76 |             only last a couple of days and are treatable.
 77 |           </FaqText>
 78 |         </FaqDetails>
 79 | 
 80 |         <FaqDetails>
 81 |           <FaqSummary>
 82 |             What are combination vaccines and why are they used?
 83 |           </FaqSummary>
 84 |           <FaqText>
 85 |             Combination vaccines protects you against more than one disease with
 86 |             a single shot. They reduce the number of shots and office visits you
 87 |             would need.
 88 |           </FaqText>
 89 |         </FaqDetails>
 90 | 
 91 |         <FaqDetails>
 92 |           <FaqSummary>
 93 |             How long does immunity last after getting a vaccine?
 94 |           </FaqSummary>
 95 |           <FaqText>
 96 |             A few vaccines, like the two for measles or the series for hepatitis
 97 |             B, may make you immune for your entire life. Others, like tetanus,
 98 |             last for many years but require periodic shots (boosters) for
 99 |             continued protection against the disease.
100 |           </FaqText>
101 |         </FaqDetails>
102 |       </PageWrapper>
103 |       <Footer />
104 |     </>
105 |   );
106 | }
107 | 


--------------------------------------------------------------------------------
/src/icons/Medicine.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function Medicine(props) {
 4 |   return (
 5 |     <svg
 6 |       xmlns="http://www.w3.org/2000/svg"
 7 |       width={props.width}
 8 |       height="44"
 9 |       viewBox="0 0 49.139 47.362"
10 |     >
11 |       <g>
12 |         <path
13 |           d="M44.208,18h-5.4l3.82-3.682a4.633,4.633,0,0,0,0-6.723L41.263,6.279a5.064,5.064,0,0,0-6.976,0l-3.82,3.682V4.754A4.846,4.846,0,0,0,25.534,0H23.607a4.846,4.846,0,0,0-4.932,4.754V9.962L14.854,6.279a5.064,5.064,0,0,0-6.976,0L6.516,7.593a4.633,4.633,0,0,0,0,6.723L10.336,18h-5.4A4.846,4.846,0,0,0,0,22.752v1.857a4.846,4.846,0,0,0,4.933,4.754h5.4l-3.82,3.682a4.633,4.633,0,0,0,0,6.723l1.363,1.313a5.064,5.064,0,0,0,6.976,0l3.82-3.682v5.207a4.846,4.846,0,0,0,4.932,4.754h1.927a4.846,4.846,0,0,0,4.933-4.754V37.4l3.82,3.682a5.064,5.064,0,0,0,6.976,0l1.363-1.313a4.633,4.633,0,0,0,0-6.723L38.8,29.363h5.4a4.845,4.845,0,0,0,4.932-4.754V22.752A4.845,4.845,0,0,0,44.208,18ZM33.829,20.013a2.5,2.5,0,0,1-2.762.315,2.074,2.074,0,0,1-2.295.067,2.045,2.045,0,0,1-2.163.106,2.223,2.223,0,0,1-1.21.357v3.866l.089-.012c.251-.052,1.193-.257,2.327-.56a8.834,8.834,0,0,0,2.8-1.087.35.35,0,0,0-.078-.046,2.244,2.244,0,0,0-.529-.157,11.467,11.467,0,0,0-1.688-.157,10,10,0,0,0-1.478.008c-.331.005-.921-.121-.91-.614a.678.678,0,0,1,.745-.656c.32,0,.235,0,.92.011,1.136.082,4.613-.188,5.049,1.574a.676.676,0,0,0,.015.128c-.148,1.535-3.454,2.2-5.842,2.66a3.141,3.141,0,0,1,1.416,2.139c.086.96-.708,1.875-2.546,2.892C27.084,31.8,28,32.7,27.924,33.78a4.12,4.12,0,0,1-2.521,2.8h-.015a7.883,7.883,0,0,0,1.182-2.529A2.478,2.478,0,0,0,25.4,32.117v3.194a.805.805,0,0,1-1.61,0c0-.012,0-.023,0-.034v-3.3a1.948,1.948,0,0,0-.245.189c-.967.775-1.2,1.428-1.131,1.887A7.883,7.883,0,0,0,23.6,36.584h-.015a4.12,4.12,0,0,1-2.521-2.8c-.078-1.082.84-1.981,2.241-2.934-1.844-1.018-2.637-1.933-2.552-2.892a3.11,3.11,0,0,1,1.416-2.139c-2.388-.456-5.695-1.125-5.843-2.66a.656.656,0,0,0,.016-.128c.436-1.762,3.913-1.491,5.049-1.574a3.823,3.823,0,0,1,.975.037c.319.062.726.1.7.653s-.776.56-.922.568a12.9,12.9,0,0,0-1.478-.015,12.729,12.729,0,0,0-1.7.165,2.163,2.163,0,0,0-.521.157.228.228,0,0,0-.078.046,8.835,8.835,0,0,0,2.8,1.087c1.292.345,1.9.464,2.513.6.035.008.072.012.107.018V20.838a1.978,1.978,0,0,1-1.259-.337,2.041,2.041,0,0,1-2.163-.106,2.09,2.09,0,0,1-2.3-.067,2.494,2.494,0,0,1-2.754-.315,2.423,2.423,0,0,1-2.692-1.231c3.641.315,6.629-3.127,7.391-3.726.747-.593,1.276-.458,2.03.846a1.845,1.845,0,0,0,1.749.937v-.059a1.744,1.744,0,0,1-1-1.563,1.817,1.817,0,0,1,3.632,0A1.745,1.745,0,0,1,25.4,16.79v.051a1.836,1.836,0,0,0,1.7-.939c.754-1.3,1.276-1.44,2.03-.846s3.75,4.041,7.391,3.726A2.425,2.425,0,0,1,33.829,20.013Z"
14 |           transform="translate(-0.001)"
15 |           fill="#e74424"
16 |         />
17 |         <path
18 |           d="M175.139,217.355a1.388,1.388,0,0,0,.615,1.068,7.931,7.931,0,0,0,.831.505v-3.113C175.039,216.4,175.139,217.018,175.139,217.355Z"
19 |           transform="translate(-152.795 -189.278)"
20 |           fill="#e74424"
21 |         />
22 |         <path
23 |           d="M199.086,219.459a4.208,4.208,0,0,0,.627-.427,1.4,1.4,0,0,0,.617-1.009c0-.314.088-.942-1.244-1.514v2.95Z"
24 |           transform="translate(-173.688 -189.886)"
25 |           fill="#e74424"
26 |         />
27 |         <path
28 |           d="M115.434,111.115c-.755-.593-1.276-.457-2.03.846a1.837,1.837,0,0,1-1.7.938v-.051a1.744,1.744,0,0,0,1.023-1.572,1.817,1.817,0,0,0-3.632,0,1.743,1.743,0,0,0,1,1.563v.059a1.845,1.845,0,0,1-1.749-.937c-.754-1.3-1.284-1.439-2.03-.846-.762.6-3.75,4.039-7.391,3.724a2.423,2.423,0,0,0,2.692,1.23,2.5,2.5,0,0,0,2.754.315,2.091,2.091,0,0,0,2.3.066,2.041,2.041,0,0,0,2.163.106,1.978,1.978,0,0,0,1.259.337v3.931c-.036-.006-.072-.01-.107-.018-.617-.135-1.221-.255-2.513-.6a8.834,8.834,0,0,1-2.8-1.087.231.231,0,0,1,.078-.046,2.168,2.168,0,0,1,.521-.157,12.757,12.757,0,0,1,1.7-.165,12.9,12.9,0,0,1,1.478.015c.147-.008.9-.018.922-.568s-.383-.591-.7-.653a3.826,3.826,0,0,0-.975-.037c-1.136.082-4.613-.188-5.049,1.573a.655.655,0,0,1-.016.128c.148,1.535,3.454,2.2,5.843,2.659a3.108,3.108,0,0,0-1.416,2.138c-.086.959.708,1.874,2.552,2.891-1.4.952-2.318,1.851-2.241,2.932a4.119,4.119,0,0,0,2.521,2.8h.015a7.88,7.88,0,0,1-1.182-2.528c-.068-.459.163-1.111,1.131-1.886a1.946,1.946,0,0,1,.245-.189v3.3c0,.011,0,.023,0,.034a.805.805,0,0,0,1.61,0v-3.192a2.477,2.477,0,0,1,1.171,1.937,7.878,7.878,0,0,1-1.182,2.528h.015a4.118,4.118,0,0,0,2.521-2.8c.078-1.081-.84-1.98-2.235-2.932,1.838-1.017,2.632-1.932,2.546-2.891a3.14,3.14,0,0,0-1.416-2.138c2.388-.455,5.695-1.124,5.842-2.659a.665.665,0,0,1-.015-.128c-.436-1.761-3.913-1.491-5.049-1.573-.685-.008-.6-.013-.92-.011a.678.678,0,0,0-.745.656c-.01.492.579.619.91.614a10.032,10.032,0,0,1,1.478-.007,11.489,11.489,0,0,1,1.688.157,2.245,2.245,0,0,1,.529.157.351.351,0,0,1,.078.046,8.837,8.837,0,0,1-2.8,1.087c-1.135.3-2.077.507-2.327.559l-.089.012v-3.864a2.224,2.224,0,0,0,1.21-.357,2.046,2.046,0,0,0,2.163-.106,2.075,2.075,0,0,0,2.295-.066,2.505,2.505,0,0,0,2.762-.315,2.423,2.423,0,0,0,2.692-1.23C119.184,115.153,116.2,111.713,115.434,111.115ZM110.1,125.7a7.93,7.93,0,0,1-.831-.505,1.388,1.388,0,0,1-.615-1.068c0-.338-.1-.956,1.446-1.54Zm2.852-1.514a1.4,1.4,0,0,1-.617,1.009,4.206,4.206,0,0,1-.627.427v-2.95C113.035,123.246,112.947,123.874,112.947,124.188Z"
29 |           transform="translate(-86.305 -96.053)"
30 |           fill="#f7f1e6"
31 |         />
32 |       </g>
33 |     </svg>
34 |   );
35 | }
36 | 


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.1/8 is considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl)
104 |     .then(response => {
105 |       // Ensure service worker exists, and that we really are getting a JS file.
106 |       const contentType = response.headers.get('content-type');
107 |       if (
108 |         response.status === 404 ||
109 |         (contentType != null && contentType.indexOf('javascript') === -1)
110 |       ) {
111 |         // No service worker found. Probably a different app. Reload the page.
112 |         navigator.serviceWorker.ready.then(registration => {
113 |           registration.unregister().then(() => {
114 |             window.location.reload();
115 |           });
116 |         });
117 |       } else {
118 |         // Service worker found. Proceed as normal.
119 |         registerValidSW(swUrl, config);
120 |       }
121 |     })
122 |     .catch(() => {
123 |       console.log(
124 |         'No internet connection found. App is running in offline mode.'
125 |       );
126 |     });
127 | }
128 | 
129 | export function unregister() {
130 |   if ('serviceWorker' in navigator) {
131 |     navigator.serviceWorker.ready.then(registration => {
132 |       registration.unregister();
133 |     });
134 |   }
135 | }
136 | 


--------------------------------------------------------------------------------