├── src ├── App.css ├── pages │ ├── Home.js │ ├── LogOut.js │ ├── BecomeDonor.js │ ├── RequestBlood.js │ ├── LogIn.js │ └── SignUp.js ├── components │ ├── Footer.js │ └── Nav.js ├── App.test.js ├── data.js ├── index.css ├── reportWebVitals.js ├── index.js ├── context.js └── App.js ├── public ├── favicon.ico ├── logo192.png ├── logo512.png ├── robots.txt ├── manifest.json └── index.html ├── README.md ├── .gitignore ├── package.json └── .eslintcache /src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rkshaon/react_blood_bank/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rkshaon/react_blood_bank/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rkshaon/react_blood_bank/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Home = () => { 4 | return ( 5 |
6 |

Home

7 |
8 | ) 9 | } 10 | 11 | export default Home 12 | -------------------------------------------------------------------------------- /src/pages/LogOut.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | 3 | const LogOut = () => { 4 | return ( 5 |
6 |

Log Out Page

7 |
8 | ) 9 | } 10 | 11 | export default LogOut; 12 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Footer = () => { 4 | return ( 5 | 10 | ) 11 | } 12 | 13 | export default Footer 14 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### Packages 10 | 11 | `npm install react-router-dom` 12 | -------------------------------------------------------------------------------- /src/data.js: -------------------------------------------------------------------------------- 1 | const admins = [ 2 | { 3 | id: 1, 4 | username: "admin", 5 | email: 'admin@admin.com', 6 | password:"admin", 7 | }, 8 | { 9 | id: 2, 10 | username: "shaon", 11 | email: 'shaon@admin.com', 12 | password:"admin", 13 | }, 14 | ]; 15 | 16 | export default admins; 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import { AppProvider } from './context'; 6 | import reportWebVitals from './reportWebVitals'; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | 12 | 13 | , 14 | document.getElementById('root') 15 | ); 16 | 17 | // If you want to start measuring performance in your app, pass a function 18 | // to log results (for example: reportWebVitals(console.log)) 19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 20 | reportWebVitals(); 21 | -------------------------------------------------------------------------------- /src/pages/BecomeDonor.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const BecomeDonor = () => { 4 | return ( 5 |
6 |

become a donor

7 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis velit commodo, dignissim lectus eu, imperdiet dui. Suspendisse ornare vitae nisi eu vestibulum. Sed pretium est nec massa auctor, sit amet sagittis lectus scelerisque. Suspendisse quis viverra elit, eu volutpat est. Phasellus quis sagittis sem. Maecenas accumsan volutpat libero, sit amet egestas sapien malesuada at. Morbi tristique fermentum porta. Nunc sit amet finibus ipsum.

8 |
9 | ) 10 | } 11 | 12 | export default BecomeDonor 13 | -------------------------------------------------------------------------------- /src/pages/RequestBlood.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const RequstBlood = () => { 4 | return ( 5 |
6 |

request for blood

7 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis velit commodo, dignissim lectus eu, imperdiet dui. Suspendisse ornare vitae nisi eu vestibulum. Sed pretium est nec massa auctor, sit amet sagittis lectus scelerisque. Suspendisse quis viverra elit, eu volutpat est. Phasellus quis sagittis sem. Maecenas accumsan volutpat libero, sit amet egestas sapien malesuada at. Morbi tristique fermentum porta. Nunc sit amet finibus ipsum.

8 |
9 | ) 10 | } 11 | 12 | export default RequstBlood 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blood_bank", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.9", 7 | "@testing-library/react": "^11.2.3", 8 | "@testing-library/user-event": "^12.6.0", 9 | "bootstrap": "^4.6.0", 10 | "react": "^17.0.1", 11 | "react-bootstrap": "^1.4.3", 12 | "react-dom": "^17.0.1", 13 | "react-router-dom": "^5.2.0", 14 | "react-scripts": "4.0.1", 15 | "web-vitals": "^0.2.4" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/components/Nav.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | import { useGlobalContext } from '../context'; 4 | 5 | const Nav = () => { 6 | const {user} = useGlobalContext(); 7 | return ( 8 | 35 | ) 36 | } 37 | 38 | export default Nav 39 | -------------------------------------------------------------------------------- /src/context.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext, useEffect } from 'react'; 2 | import admins from './data'; 3 | const AppContext = React.createContext() 4 | 5 | const AppProvider = ({ children }) => { 6 | const [user, setUser] = useState({email: "", password: ""}); 7 | 8 | const Login = (details) => { 9 | for (var i = 0; i < admins.length; i++) { 10 | if (admins[i].email === details.email && admins[i].password === details.password) { 11 | console.log('logged in'); 12 | setUser({email: details.email, password: details.password}); 13 | break; 14 | } else { 15 | console.log('details do not matched'); 16 | } 17 | } 18 | } 19 | 20 | const Logout = () => { 21 | console.log('log out'); 22 | setUser({email: "", password: ""}); 23 | } 24 | 25 | return( 26 | 32 | {children} 33 | 34 | ); 35 | } 36 | // make sure use 37 | export const useGlobalContext = () => { 38 | return useContext(AppContext) 39 | } 40 | 41 | export { AppContext, AppProvider } 42 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import './App.css'; 3 | import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; 4 | // components 5 | import Nav from './components/Nav'; 6 | import Footer from './components/Footer'; 7 | // pages 8 | import Home from './pages/Home'; 9 | import BecomeDonor from './pages/BecomeDonor'; 10 | import RequestBlood from './pages/RequestBlood'; 11 | import SignUp from './pages/SignUp'; 12 | import LogIn from './pages/LogIn'; 13 | import LogOut from './pages/LogOut'; 14 | 15 | function App() { 16 | return ( 17 | 18 |