└── front-end
├── .gitignore
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── components
├── AddTodo.jsx
├── EmptyTodo.jsx
├── Header.jsx
├── Todo.jsx
└── Todos.jsx
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js
/front-end/.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 |
--------------------------------------------------------------------------------
/front-end/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "front-end",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@chakra-ui/react": "^1.6.6",
7 | "@emotion/react": "^11.4.1",
8 | "@emotion/styled": "^11.3.0",
9 | "@testing-library/jest-dom": "^5.14.1",
10 | "@testing-library/react": "^11.2.7",
11 | "@testing-library/user-event": "^12.8.3",
12 | "framer-motion": "^4.1.17",
13 | "nanoid": "^3.1.25",
14 | "react": "^17.0.2",
15 | "react-dom": "^17.0.2",
16 | "react-icons": "^4.2.0",
17 | "react-scripts": "4.0.3",
18 | "web-vitals": "^1.1.2"
19 | },
20 | "scripts": {
21 | "start": "react-scripts start",
22 | "build": "react-scripts build",
23 | "test": "react-scripts test",
24 | "eject": "react-scripts eject"
25 | },
26 | "eslintConfig": {
27 | "extends": [
28 | "react-app",
29 | "react-app/jest"
30 | ]
31 | },
32 | "browserslist": {
33 | "production": [
34 | ">0.2%",
35 | "not dead",
36 | "not op_mini all"
37 | ],
38 | "development": [
39 | "last 1 chrome version",
40 | "last 1 firefox version",
41 | "last 1 safari version"
42 | ]
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/front-end/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mr-dev-dragon/react-x-app/bd5da27c48757516048276cdaae4bd4294b5ee29/front-end/public/favicon.ico
--------------------------------------------------------------------------------
/front-end/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/front-end/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mr-dev-dragon/react-x-app/bd5da27c48757516048276cdaae4bd4294b5ee29/front-end/public/logo192.png
--------------------------------------------------------------------------------
/front-end/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mr-dev-dragon/react-x-app/bd5da27c48757516048276cdaae4bd4294b5ee29/front-end/public/logo512.png
--------------------------------------------------------------------------------
/front-end/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 |
--------------------------------------------------------------------------------
/front-end/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/front-end/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #282c34;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: white;
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 | to {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/front-end/src/App.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import { VStack, Box } from '@chakra-ui/react';
3 |
4 | //components
5 | import Header from "./components/Header";
6 | import Todos from './components/Todos';
7 | import AddTodo from './components/AddTodo';
8 |
9 | const initialTodo = [
10 | {
11 | id: 1,
12 | text: 'Hello'
13 | }
14 | ];
15 |
16 | function App() {
17 |
18 | const [todos, setTodos] = useState(() => JSON.parse(localStorage.getItem('todos')) || []) //initialTodo
19 |
20 | useEffect(() => {
21 | localStorage.setItem('todos', JSON.stringify(todos))
22 | }, [todos])
23 |
24 | const deleteTodo = (id) => {
25 | const updatedTodo = todos.filter(todo => todo.id !== id);
26 | setTodos(updatedTodo);
27 | }
28 |
29 | return (
30 |
31 |
32 |
36 |
37 |
38 |
39 |
40 | );
41 | }
42 |
43 | export default App;
44 |
--------------------------------------------------------------------------------
/front-end/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 |
--------------------------------------------------------------------------------
/front-end/src/components/AddTodo.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { Button, HStack, Input, useToast } from "@chakra-ui/react"
3 | import { nanoid } from 'nanoid';
4 |
5 |
6 | const AddTodo = ({ todos, setTodos }) => {
7 |
8 | const [todo, setTodo] = useState('');
9 | const toast = useToast();
10 |
11 | const handleChange = (e) => {
12 | setTodo(e.target.value);
13 | }
14 |
15 | const addTodo = () => {
16 | if(!todo) {
17 | toast({
18 | title: 'No Todo item to Add',
19 | status: 'error',
20 | duration: '3000',
21 | isClosable: true
22 | })
23 | return;
24 | };
25 |
26 | const newTodo = {
27 | id: nanoid(),
28 | text: todo
29 | }
30 |
31 | setTodos([...todos, newTodo])
32 | setTodo('')
33 | }
34 |
35 | return (
36 |
37 | handleChange(e)}
41 | value={todo}
42 | />
43 |
48 |
49 | )
50 | }
51 |
52 | export default AddTodo;
--------------------------------------------------------------------------------
/front-end/src/components/EmptyTodo.jsx:
--------------------------------------------------------------------------------
1 |
2 | import { Text } from '@chakra-ui/react';
3 |
4 | const EmptyTodo = () => {
5 | return (
6 | No Todo Items
12 | )
13 | }
14 |
15 | export default EmptyTodo;
--------------------------------------------------------------------------------
/front-end/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 |
2 | import { Heading, IconButton, Box, useColorMode } from '@chakra-ui/react';
3 | import { FaSun, FaMoon } from 'react-icons/fa';
4 |
5 | const Header = () => {
6 | const { colorMode, toggleColorMode } = useColorMode();
7 | return (
8 |
9 | : }
11 | isRound={true}
12 | mr={5}
13 | onClick={toggleColorMode}
14 | />
15 | Todo App
19 |
20 | )
21 | }
22 |
23 | export default Header;
--------------------------------------------------------------------------------
/front-end/src/components/Todo.jsx:
--------------------------------------------------------------------------------
1 |
2 |
3 | import { Text, IconButton, HStack, StackDivider } from "@chakra-ui/react";
4 | import { FaTrash } from 'react-icons/fa';
5 |
6 |
7 | const Todo = ({ todo, deleteTodo }) => {
8 | return (
9 |
10 | {todo.text}
11 | }
12 | isRound={true}
13 | onClick={() => deleteTodo(todo.id)}
14 | />
15 |
16 | )
17 | }
18 |
19 | export default Todo;
--------------------------------------------------------------------------------
/front-end/src/components/Todos.jsx:
--------------------------------------------------------------------------------
1 | import { VStack, StackDivider, Text } from "@chakra-ui/react"
2 |
3 | //components
4 | import Todo from './Todo';
5 | import EmptyTodo from './EmptyTodo';
6 |
7 | const Todos = ({ todos, deleteTodo }) => {
8 |
9 | return (
10 | }
12 | borderWidth={todos.length > 0 ? '1px' : 'none' }
13 | alignItems='stretch'
14 | mt={8}
15 | >
16 | {
17 | todos.length > 0 ? todos.map(todo => (
18 |
19 | )) :
20 | }
21 |
22 | )
23 | }
24 |
25 | export default Todos;
--------------------------------------------------------------------------------
/front-end/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 |
--------------------------------------------------------------------------------
/front-end/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 reportWebVitals from './reportWebVitals';
6 |
7 | import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
8 |
9 | ReactDOM.render(
10 |
11 |
12 |
13 |
14 |
15 | ,
16 | document.getElementById('root')
17 | );
18 |
19 | // If you want to start measuring performance in your app, pass a function
20 | // to log results (for example: reportWebVitals(console.log))
21 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
22 | reportWebVitals();
23 |
--------------------------------------------------------------------------------
/front-end/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/front-end/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 |
--------------------------------------------------------------------------------
/front-end/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------