) => {
11 | e.preventDefault();
12 | if (!task) {
13 | toast.error('Please enter a task');
14 | return;
15 | }
16 | dispatch(
17 | addTask({
18 | id: new Date().getTime().toString(),
19 | name: task,
20 | isCompleted: false,
21 | })
22 | );
23 | setTask('');
24 | };
25 |
26 | return (
27 |
50 | );
51 | }
52 | export default TaskForm;
53 |
--------------------------------------------------------------------------------
/src/components/TaskList.tsx:
--------------------------------------------------------------------------------
1 | import { useAppSelector } from '../hooks';
2 | import Task from './Task';
3 | import TaskFilterBar from './TaskFilterBar';
4 |
5 | function TaskList() {
6 | const { tasks, filteredTasks } = useAppSelector((state) => state.taskState);
7 | if (tasks.length === 0) return Your task list is empty.
;
8 | const areNoTasksMatchingFilter = filteredTasks.length === 0;
9 | return (
10 |
11 | {areNoTasksMatchingFilter ? (
12 | No tasks match the selected filter.
13 | ) : (
14 |
15 | {filteredTasks.map((task) => {
16 | return ;
17 | })}
18 |
19 | )}
20 |
21 |
22 |
23 | );
24 | }
25 | export default TaskList;
26 |
--------------------------------------------------------------------------------
/src/components/ThemeToggle.tsx:
--------------------------------------------------------------------------------
1 | import { BsFillSunFill, BsFillMoonFill } from 'react-icons/bs';
2 | import { useAppSelector } from '../hooks';
3 | import { toggleTheme } from '../features/theme/themeSlice';
4 | import { useAppDispatch } from '../hooks';
5 | function ThemeToggle() {
6 | const darkThemeEnabled = useAppSelector(
7 | (state) => state.themeState.darkThemeEnabled
8 | );
9 | const dispatch = useAppDispatch();
10 | const handleToggleTheme = () => {
11 | dispatch(toggleTheme());
12 | };
13 | return (
14 |
21 | );
22 | }
23 | export default ThemeToggle;
24 |
--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export { default as TaskForm } from './TaskForm';
2 | export { default as TaskList } from './TaskList';
3 | export { default as AppHeader } from './AppHeader';
4 |
--------------------------------------------------------------------------------
/src/features/task/taskSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, PayloadAction } from '@reduxjs/toolkit';
2 | import {
3 | type Task,
4 | type TaskState,
5 | type TaskFilterValue,
6 | } from '../../utils/types';
7 | import {
8 | retrieveTasksFromLocalStorage,
9 | saveTasksToLocalStorage,
10 | } from '../../utils/taskUtils';
11 | import toast from 'react-hot-toast';
12 |
13 | const initialState: TaskState = {
14 | tasks: retrieveTasksFromLocalStorage(),
15 | filteredTasks: retrieveTasksFromLocalStorage(),
16 | filterValue: 'all',
17 | };
18 | const taskSlice = createSlice({
19 | name: 'task',
20 | initialState,
21 | reducers: {
22 | addTask: (state, action: PayloadAction) => {
23 | state.tasks.push(action.payload);
24 | taskSlice.caseReducers.saveTasks(state);
25 | toast.success('Task created');
26 | },
27 | toggleTaskCompletion: (state, action: PayloadAction) => {
28 | const task = state.tasks.find((task) => task.id === action.payload);
29 | if (task) {
30 | task.isCompleted = !task.isCompleted;
31 | taskSlice.caseReducers.saveTasks(state);
32 | toast.success('Task updated');
33 | }
34 | },
35 | deleteTask: (state, action: PayloadAction) => {
36 | state.tasks = state.tasks.filter((task) => task.id !== action.payload);
37 | taskSlice.caseReducers.saveTasks(state);
38 |
39 | toast.error('Task removed');
40 | },
41 | filterTasks: (state, action: PayloadAction) => {
42 | state.filterValue = action.payload;
43 | switch (action.payload) {
44 | case 'active':
45 | state.filteredTasks = state.tasks.filter((task) => !task.isCompleted);
46 | break;
47 | case 'completed':
48 | state.filteredTasks = state.tasks.filter((task) => task.isCompleted);
49 | break;
50 | case 'all':
51 | state.filteredTasks = state.tasks;
52 | break;
53 | default:
54 | const unexpectedValue: never = action.payload;
55 | throw new Error(`Unexpected value: ${unexpectedValue}`);
56 | }
57 | },
58 | deleteCompletedTasks: (state) => {
59 | state.tasks = state.tasks.filter((task) => !task.isCompleted);
60 | state.filterValue = 'all';
61 | taskSlice.caseReducers.saveTasks(state);
62 | toast.error('Completed tasks removed');
63 | },
64 | saveTasks: (state) => {
65 | state.filteredTasks = state.tasks;
66 | saveTasksToLocalStorage(state.tasks);
67 | },
68 | },
69 | });
70 |
71 | export const {
72 | addTask,
73 | toggleTaskCompletion,
74 | deleteTask,
75 | filterTasks,
76 | deleteCompletedTasks,
77 | } = taskSlice.actions;
78 |
79 | export default taskSlice.reducer;
80 |
--------------------------------------------------------------------------------
/src/features/theme/themeSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 | import {
3 | THEME_KEY,
4 | DARK_THEME_CLASS,
5 | getInitialThemeStatus,
6 | } from '../../utils/themeUtils';
7 |
8 | type ThemeState = {
9 | darkThemeEnabled: boolean;
10 | };
11 |
12 | const initialState: ThemeState = {
13 | darkThemeEnabled: getInitialThemeStatus(),
14 | };
15 |
16 | const themeSlice = createSlice({
17 | name: 'theme',
18 | initialState,
19 | reducers: {
20 | toggleTheme: (state) => {
21 | const updatedDarkThemeStatus = !state.darkThemeEnabled;
22 | state.darkThemeEnabled = updatedDarkThemeStatus;
23 | document.body.classList.toggle(DARK_THEME_CLASS, updatedDarkThemeStatus);
24 | localStorage.setItem(THEME_KEY, JSON.stringify(updatedDarkThemeStatus));
25 | },
26 | },
27 | });
28 |
29 | export const { toggleTheme } = themeSlice.actions;
30 |
31 | export default themeSlice.reducer;
32 |
--------------------------------------------------------------------------------
/src/hooks.ts:
--------------------------------------------------------------------------------
1 | import { useDispatch, useSelector } from 'react-redux';
2 | import type { TypedUseSelectorHook } from 'react-redux';
3 | import type { RootState, AppDispatch } from './store';
4 |
5 | // Use throughout your app instead of plain `useDispatch` and `useSelector`
6 | export const useAppDispatch: () => AppDispatch = useDispatch;
7 | export const useAppSelector: TypedUseSelectorHook = useSelector;
8 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | /* ============= GLOBAL CSS =============== */
2 |
3 | *,
4 | ::after,
5 | ::before {
6 | margin: 0;
7 | padding: 0;
8 | box-sizing: border-box;
9 | }
10 |
11 | html {
12 | font-size: 100%;
13 | } /*16px*/
14 |
15 | :root {
16 | /* colors */
17 | --primary-50: #e0fcff;
18 | --primary-100: #bef8fd;
19 | --primary-200: #87eaf2;
20 | --primary-300: #54d1db;
21 | --primary-400: #38bec9;
22 | --primary-500: #2cb1bc;
23 | --primary-600: #14919b;
24 | --primary-700: #0e7c86;
25 | --primary-800: #0a6c74;
26 | --primary-900: #044e54;
27 |
28 | /* grey */
29 | --grey-50: #f8fafc;
30 | --grey-100: #f1f5f9;
31 | --grey-200: #e2e8f0;
32 | --grey-300: #cbd5e1;
33 | --grey-400: #94a3b8;
34 | --grey-500: #64748b;
35 | --grey-600: #475569;
36 | --grey-700: #334155;
37 | --grey-800: #1e293b;
38 | --grey-900: #0f172a;
39 | /* rest of the colors */
40 | --black: #222;
41 | --white: #fff;
42 | --red-light: #f8d7da;
43 | --red-dark: #842029;
44 | --green-light: #d1e7dd;
45 | --green-dark: #0f5132;
46 |
47 | --small-text: 0.875rem;
48 | --extra-small-text: 0.7em;
49 | /* rest of the vars */
50 |
51 | --border-radius: 0.25rem;
52 | --letter-spacing: 1px;
53 | --transition: 0.3s ease-in-out all;
54 | --max-width: 1120px;
55 | --fixed-width: 600px;
56 | --fluid-width: 90vw;
57 | --nav-height: 6rem;
58 | /* box shadow*/
59 | --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
60 | --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
61 | 0 2px 4px -1px rgba(0, 0, 0, 0.06);
62 | --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
63 | 0 4px 6px -2px rgba(0, 0, 0, 0.05);
64 | --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
65 | 0 10px 10px -5px rgba(0, 0, 0, 0.04);
66 | /* DARK MODE */
67 |
68 | --dark-mode-bg-color: #333;
69 | --dark-mode-text-color: #f0f0f0;
70 | --dark-mode-bg-secondary-color: #3f3f3f;
71 | --dark-mode-text-secondary-color: var(--grey-300);
72 |
73 | --background-color: var(--grey-50);
74 | --text-color: var(--grey-900);
75 | --background-secondary-color: var(--white);
76 | --text-secondary-color: var(--grey-500);
77 | }
78 |
79 | .dark-theme {
80 | --text-color: var(--dark-mode-text-color);
81 | --background-color: var(--dark-mode-bg-color);
82 | --text-secondary-color: var(--dark-mode-text-secondary-color);
83 | --background-secondary-color: var(--dark-mode-bg-secondary-color);
84 | }
85 |
86 | body {
87 | background: var(--background-color);
88 | color: var(--text-color);
89 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
90 | Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
91 | font-weight: 400;
92 | line-height: 1;
93 | }
94 | p {
95 | margin: 0;
96 | }
97 | h1,
98 | h2,
99 | h3,
100 | h4,
101 | h5 {
102 | margin: 0;
103 | font-weight: 400;
104 | line-height: 1;
105 | letter-spacing: var(--letter-spacing);
106 | }
107 |
108 | h1 {
109 | font-size: clamp(1.5rem, 4vw, 4rem); /* Large heading */
110 | }
111 |
112 | h2 {
113 | font-size: clamp(1.25rem, 2.5vw, 2.5rem); /* Medium heading */
114 | }
115 |
116 | h3 {
117 | font-size: clamp(1rem, 2vw, 2rem); /* Small heading */
118 | }
119 |
120 | h4 {
121 | font-size: clamp(0.875rem, 1.5vw, 1.5rem); /* Extra small heading */
122 | }
123 |
124 | h5 {
125 | font-size: clamp(0.75rem, 1vw, 1rem); /* Tiny heading */
126 | }
127 |
128 | .text {
129 | margin-bottom: 1.5rem;
130 | max-width: 40em;
131 | }
132 |
133 | small,
134 | .text-small {
135 | font-size: var(--small-text);
136 | }
137 |
138 | a {
139 | text-decoration: none;
140 | }
141 | ul {
142 | list-style-type: none;
143 | padding: 0;
144 | }
145 |
146 | .img {
147 | width: 100%;
148 | display: block;
149 | object-fit: cover;
150 | }
151 | /* buttons */
152 |
153 | .btn {
154 | cursor: pointer;
155 | color: var(--white);
156 | background: var(--primary-500);
157 | border: transparent;
158 | border-radius: var(--border-radius);
159 | letter-spacing: var(--letter-spacing);
160 | padding: 0.375rem 0.75rem;
161 | box-shadow: var(--shadow-1);
162 | transition: var(--transition);
163 | text-transform: capitalize;
164 | display: inline-block;
165 | }
166 | .btn:hover {
167 | background: var(--primary-700);
168 | box-shadow: var(--shadow-3);
169 | }
170 | .btn-hipster {
171 | color: var(--primary-500);
172 | background: var(--primary-200);
173 | }
174 | .btn-hipster:hover {
175 | color: var(--primary-200);
176 | background: var(--primary-700);
177 | }
178 | .btn-block {
179 | width: 100%;
180 | }
181 | button:disabled {
182 | cursor: wait;
183 | }
184 | .danger-btn {
185 | color: var(--red-dark);
186 | background: var(--red-light);
187 | }
188 | .danger-btn:hover {
189 | color: var(--white);
190 | background: var(--red-dark);
191 | }
192 | /* alerts */
193 | .alert {
194 | padding: 0.375rem 0.75rem;
195 | margin-bottom: 1rem;
196 | border-color: transparent;
197 | border-radius: var(--border-radius);
198 | }
199 |
200 | .alert-danger {
201 | color: var(--red-dark);
202 | background: var(--red-light);
203 | }
204 | .alert-success {
205 | color: var(--green-dark);
206 | background: var(--green-light);
207 | }
208 | /* form */
209 |
210 | .form {
211 | background: var(--background-secondary-color);
212 | border-radius: var(--border-radius);
213 | box-shadow: var(--shadow-2);
214 | padding: 2rem 2.5rem;
215 | }
216 | .form-label {
217 | display: block;
218 | font-size: var(--small-text);
219 | margin-bottom: 0.75rem;
220 | text-transform: capitalize;
221 | letter-spacing: var(--letter-spacing);
222 | line-height: 1.5;
223 | }
224 | .form-input,
225 | .form-textarea,
226 | .form-select {
227 | width: 100%;
228 | padding: 0.375rem 0.75rem;
229 | border-radius: var(--border-radius);
230 | background: var(--background-color);
231 | border: 1px solid var(--grey-300);
232 | color: var(--text-color);
233 | }
234 | .form-input,
235 | .form-select,
236 | .form-btn {
237 | height: 35px;
238 | }
239 | .form-row {
240 | margin-bottom: 1rem;
241 | }
242 |
243 | .form-textarea {
244 | height: 7rem;
245 | }
246 | ::placeholder {
247 | font-family: inherit;
248 | color: var(--grey-400);
249 | }
250 | .form-alert {
251 | color: var(--red-dark);
252 | letter-spacing: var(--letter-spacing);
253 | text-transform: capitalize;
254 | }
255 |
256 | /* Main Container */
257 | .container {
258 | width: var(--fluid-width);
259 | max-width: var(--fixed-width);
260 | margin: 0 auto;
261 | padding: 5rem 0;
262 | }
263 |
264 | /* App Header */
265 |
266 | .app-header {
267 | display: flex;
268 | justify-content: space-between;
269 | align-items: center;
270 | margin-bottom: 3rem;
271 | }
272 | .app-header h1 {
273 | font-size: clamp(1.25rem, 2.5vw, 2.5rem); /* Medium heading */
274 | }
275 |
276 | .toggle-btn {
277 | font-size: 1.5rem;
278 | background: transparent;
279 | border-color: transparent;
280 | color: var(--text-color);
281 | cursor: pointer;
282 | transition: var(--transition);
283 | display: grid;
284 | place-items: center;
285 | }
286 | .toggle-btn:hover {
287 | color: var(--primary-500);
288 | }
289 |
290 | /* Task Form */
291 |
292 | .task-form {
293 | margin-bottom: 3rem;
294 | display: grid;
295 | }
296 | .submit-btn {
297 | height: 35px;
298 | }
299 | @media screen and (min-width: 640px) {
300 | .task-form {
301 | grid-template-columns: 1fr auto;
302 | align-items: center;
303 | gap: 1rem;
304 | }
305 | .form-row {
306 | margin-bottom: 0;
307 | }
308 | .submit-btn {
309 | align-self: flex-end;
310 | }
311 | }
312 |
313 | /* Task List */
314 |
315 | .task-list {
316 | margin-bottom: 3rem;
317 | background-color: var(--background-secondary-color);
318 | border-radius: var(--border-radius);
319 | box-shadow: var(--shadow-2);
320 | padding: 2rem 2.5rem 0;
321 | }
322 |
323 | .task {
324 | display: grid;
325 | grid-template-columns: auto 1fr auto;
326 | align-items: center;
327 | gap: 1rem;
328 | margin-bottom: 1rem;
329 | }
330 | .task span {
331 | letter-spacing: var(--letter-spacing);
332 | text-transform: capitalize;
333 | }
334 | .delete-task {
335 | display: grid;
336 | place-items: center;
337 | cursor: pointer;
338 | color: var(--primary-500);
339 | background: transparent;
340 | border-color: transparent;
341 | font-size: 1.1rem;
342 | }
343 |
344 | .tasklist-filters {
345 | display: flex;
346 | gap: 1rem;
347 | align-items: center;
348 | flex-wrap: wrap;
349 | padding: 2rem 0 1rem;
350 | }
351 | @media screen and (min-width: 640px) {
352 | .tasklist-filters {
353 | justify-content: space-between;
354 | }
355 | }
356 | .tasklist-filters span {
357 | color: var(--text-secondary-color);
358 | }
359 | .btn-container {
360 | display: flex;
361 | gap: 1rem;
362 | }
363 |
364 | .filter-btn {
365 | background: transparent;
366 | border-color: transparent;
367 | color: var(--text-secondary-color);
368 | cursor: pointer;
369 | transition: var(--transition);
370 | text-transform: capitalize;
371 | letter-spacing: var(--letter-spacing);
372 | }
373 | .filter-btn.active-btn {
374 | color: var(--primary-500);
375 | }
376 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import ReactDOM from 'react-dom/client';
2 | import App from './App.tsx';
3 | import './index.css';
4 | import { store } from './store';
5 | import { Provider } from 'react-redux';
6 | import { Toaster } from 'react-hot-toast';
7 | ReactDOM.createRoot(document.getElementById('root')!).render(
8 |
9 |
10 |
11 |
12 | );
13 |
--------------------------------------------------------------------------------
/src/store.ts:
--------------------------------------------------------------------------------
1 | import { configureStore } from '@reduxjs/toolkit';
2 | import themeReducer from './features/theme/themeSlice';
3 | import taskSlice from './features/task/taskSlice';
4 |
5 | export const store = configureStore({
6 | reducer: {
7 | themeState: themeReducer,
8 | taskState: taskSlice,
9 | },
10 | });
11 |
12 | export type RootState = ReturnType;
13 | export type AppDispatch = typeof store.dispatch;
14 |
--------------------------------------------------------------------------------
/src/utils/taskUtils.ts:
--------------------------------------------------------------------------------
1 | import { Task } from './types';
2 |
3 | export const retrieveTasksFromLocalStorage = (): Task[] => {
4 | const tasks = localStorage.getItem('tasks');
5 | return tasks ? JSON.parse(tasks) : [];
6 | };
7 |
8 | export const saveTasksToLocalStorage = (tasks: Task[]): void => {
9 | localStorage.setItem('tasks', JSON.stringify(tasks));
10 | };
11 |
--------------------------------------------------------------------------------
/src/utils/themeUtils.ts:
--------------------------------------------------------------------------------
1 | export const THEME_KEY = 'darkTheme';
2 | export const DARK_THEME_CLASS = 'dark-theme';
3 |
4 | export const getInitialThemeStatus = (): boolean => {
5 | const darkThemeEnabled = localStorage.getItem(THEME_KEY) === 'true';
6 | document.body.classList.toggle(DARK_THEME_CLASS, darkThemeEnabled);
7 | return darkThemeEnabled;
8 | };
9 |
--------------------------------------------------------------------------------
/src/utils/types.ts:
--------------------------------------------------------------------------------
1 | export type Task = {
2 | id: string;
3 | name: string;
4 | isCompleted: boolean;
5 | };
6 |
7 | export type TaskState = {
8 | tasks: Task[];
9 | filterValue: TaskFilterValue;
10 | filteredTasks: Task[];
11 | };
12 |
13 | export type TaskFilterValue = 'all' | 'active' | 'completed';
14 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "noEmit": true,
15 | "jsx": "react-jsx",
16 |
17 | /* Linting */
18 | "strict": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "noFallthroughCasesInSwitch": true
22 | },
23 | "include": ["src"],
24 | "references": [{ "path": "./tsconfig.node.json" }]
25 | }
26 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 | })
8 |
--------------------------------------------------------------------------------