├── src
├── index.css
├── vite-env.d.ts
├── App.css
├── definitions.ts
├── components
│ ├── loading.tsx
│ ├── context
│ │ └── themeContext.tsx
│ ├── list-item.tsx
│ └── todo-form.tsx
├── main.tsx
├── assets
│ └── react.svg
└── App.tsx
├── public
├── icon.png
└── vite.svg
├── vite.config.ts
├── tsconfig.node.json
├── .gitignore
├── README.md
├── index.html
├── .gitpod.yml
├── .eslintrc.cjs
├── tsconfig.json
├── package.json
└── LICENSE
/src/index.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/public/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ikuzweelisa/react-todo-app/HEAD/public/icon.png
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | esbuild: {
8 | loader: "jsx"
9 | }
10 | })
11 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .header {
2 | font-size: 30px;
3 | }
4 | .h-full {
5 | height: 100vh;
6 | }
7 |
8 | .bg {
9 | background-color: #1E1E1E; /* Darker Gray for main background */
10 | }
11 |
12 | .secondary-bg {
13 | background-color: #282828; /* Slate Gray for secondary containers */
14 | }
15 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "skipLibCheck": true,
5 | "module": "ESNext",
6 | "moduleResolution": "bundler",
7 | "allowSyntheticDefaultImports": true,
8 | "strict": true
9 | },
10 | "include": ["vite.config.ts"]
11 | }
12 |
--------------------------------------------------------------------------------
/src/definitions.ts:
--------------------------------------------------------------------------------
1 | export type Todo={
2 | id: number,
3 | text: string,
4 | completed: boolean,
5 | };
6 |
7 | type TodoItem={
8 | id: number,
9 | text: string,
10 | completed: boolean,
11 | toggle: () => void,
12 | onDelete: () => void,
13 | }
14 | type TodoFormProps={
15 | addNote: (text: string) => void,
16 |
17 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React + TypeScript + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 | ## Getting Started
7 |
8 | First, run the development server:
9 |
10 | ```bash
11 | npm run dev
12 | # or
13 | yarn dev
14 | # or
15 | pnpm dev
16 | # or
17 | bun dev
18 | ```
19 |
--------------------------------------------------------------------------------
/src/components/loading.tsx:
--------------------------------------------------------------------------------
1 |
2 | import { Box, LinearProgress } from "@mui/material";
3 | export default function Loading() {
4 | return
5 |
6 | 
7 |
8 |
9 |
23 | toggle(id)} checked={completed} />
24 |
27 | {title}
28 |
29 |
37 |
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/todo-form.tsx:
--------------------------------------------------------------------------------
1 | import { FaNoteSticky, FaPlus } from "react-icons/fa6";
2 | import { TextField, Button } from "@mui/material";
3 | import { ThemeContext } from "./context/themeContext";
4 | import { useContext } from "react";
5 |
6 |
7 |
8 | export default function TodoForm({ submit, change, text }) {
9 |
10 | const themeContext = useContext(ThemeContext);
11 | const { darkTheme } = themeContext;
12 | return (
13 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import "./App.css";
2 | import "bootstrap/dist/css/bootstrap.min.css";
3 | import TodoForm from "./components/todo-form";
4 | import { useContext, useEffect, useState, ChangeEvent, FormEvent } from "react";
5 | import ListItem from "./components/list-item";
6 | import { FaNoteSticky, FaSun, FaTrashCan, FaMoon } from "react-icons/fa6";
7 | import toast from "react-hot-toast";
8 | import { Card, IconButton } from "@mui/material";
9 | import { ThemeContext } from "./components/context/themeContext";
10 | import Loading from "./components/loading";
11 |
12 |
13 | export default function App() {
14 | const { toggleTheme, darkTheme } = useContext(ThemeContext);
15 |
16 | const [notes, setNotes] = useState(() => {
17 | const value = localStorage.getItem("notes");
18 | return value ? JSON.parse(value) : [];
19 | });
20 | useEffect(()=>{
21 | window.localStorage.setItem("notes",JSON.stringify(notes))
22 | },[notes])
23 | const [text, setText] = useState("");
24 |
25 | const [isLoading, setIsLoading] = useState(true);
26 |
27 |
28 | useEffect(() => {
29 | const timer = setTimeout(() => {
30 | setIsLoading(false);
31 | }, 5000);
32 |
33 | return () => clearTimeout(timer);
34 | }, []);
35 |
36 | if (isLoading) {
37 | return ;
38 | }
39 |
40 | function handleChange(e) {
41 | setText(e.target.value);
42 | }
43 |
44 | function addNote() {
45 | setNotes((prevNotes) => [
46 | ...prevNotes,
47 | { id: crypto.randomUUID(), title: text, completed: false },
48 | ]);
49 | }
50 |
51 | function handleSubmit(e) {
52 | e.preventDefault();
53 | toast.promise(
54 | new Promise((resolve) => {
55 | addNote();
56 | resolve();
57 | }),
58 | {
59 | loading: "Adding note...",
60 | success: {`${text} Added!`},
61 | error: Failed to add note,
62 | },
63 | {
64 | duration: 8000,
65 | }
66 | );
67 | setText("");
68 | }
69 |
70 | function handleDelete(id) {
71 | setNotes((prevNotes) => prevNotes.filter((note) => note.id !== id));
72 | toast.success("Todo Deleted!");
73 | }
74 |
75 | function toggleNote(id) {
76 | setNotes((prevNotes) =>
77 | prevNotes.map((note) =>
78 | note.id === id ? { ...note, completed: !note.completed } : note
79 | )
80 | );
81 | }
82 |
83 |
84 | return (
85 |
89 |
90 |
91 |
92 |
93 | TODO APP
94 |
95 |
96 |
97 |
104 |
105 |
106 |
107 |
108 |
112 |
113 |
114 |
118 |
122 | Todos
123 | {notes.length}
124 |
125 | {notes.length !== 0 && (
126 |
127 |
128 | Remove all{" "}
129 | setNotes([])}>
130 |
131 | {" "}
132 |
133 |
134 | )}
135 |
136 | {notes.length === 0 ? (
137 | -
138 | No Todos available
139 |
140 | ) : (
141 | notes.map((note) => (
142 |
150 | ))
151 | )}
152 |
153 |
154 |
155 |