Vite + React + TS

162 | 163 | Task Description 164 | 165 |

setTextAreaVal(e.target.value)}
171 | 					className={`bg-inherit border rounded-sm p-2 h-32 resize-none focus:outline-none focus:ring-1 ${
172 | 						textAreaVal.length > 197
173 | 							? "border-error focus:ring-red-500 invalid:focus:ring-red-600"
174 | 							: "border-input focus:ring-slate-900"
175 | 					}`}
176 | 				/>
177 | 				{textAreaVal.length > 197 && (
178 | 					<span className="text-error mt-1">
179 | 						Warning description getting too long. Can only be 200 characters
180 | 					</span>
181 | 				)}
182 | 				<Button
183 | 					handleClick={generateDesc}
184 | 					disable={isGenerating}
185 | 					extraBtnClasses="bg-light mt-2 w-fit ml-auto"
186 | 				>
187 | 					<span>Generate description</span>
188 | 					<SparklesIcon height={20} />
189 | 				</Button>
190 | 			</div>
191 | 			<div className="flex flex-col mb-6">
192 | 				<label htmlFor="description" className="mb-1">
193 | 					Task Priority
194 | 				</label>
195 | 				<Select
196 | 					defaultSelectValue={priority}
197 | 					selectOptions={priorityArray}
198 | 					handleSelectChange={(e) => setPriority(e.target.value)}
199 | 				/>
200 | 			</div>
201 | 			<div className="flex flex-col mb-6">
202 | 				<label htmlFor="description" className="mb-1">
203 | 					Task Due Date
204 | 				</label>
205 | 				<input
206 | 					type="date"
207 | 					id="date"
208 | 					value={dueDate!.toISOString().split("T")[0]}
209 | 					min={new Date().toISOString().split("T")[0]}
210 | 					onChange={(e) => setDueDate(new Date(e.target.value))}
211 | 					className="bg-inherit border rounded-sm border-input p-2 focus:outline-none focus:ring-1 focus:ring-slate-900 invalid:focus:ring-red-600"
212 | 				/>
213 | 			</div>
214 | 			<Button
215 | 				type="submit"
216 | 				disable={isSubmitting}
217 | 				extraBtnClasses="bg-primary justify-center text-white font-semibold px-4 py-2 outline-1 hover:bg-primaryHover focus:ring-1 focus:ring-pink-800 w-full"
218 | 			>
219 | 				<span>
220 | 					{isSubmitting ? "Submitting..." : task ? "Edit Task" : "Add Task"}
221 | 				</span>
222 | 			</Button>
223 | 		</form>
224 | 	);
225 | };
226 | 
227 | export default AddTask;
228 |

--------------------------------------------------------------------------------
/src/components/Button.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode } from "react";
 2 | 
 3 | interface ButtonProps {
 4 | 	extraBtnClasses?: string;
 5 | 	textColor?: string;
 6 | 	handleClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 7 | 	title?: string;
 8 | 	disable?: boolean;
 9 | 	type?: "button" | "submit" | "reset";
10 | 	children: ReactNode;
11 | }
12 | 
13 | function Button({
14 | 	extraBtnClasses,
15 | 	textColor,
16 | 	handleClick,
17 | 	title,
18 | 	disable,
19 | 	type = "button",
20 | 	children,
21 | }: ButtonProps) {
22 | 	const handleClickProp = type === "submit" ? undefined : handleClick;
23 | 
24 | 	return (
25 | 		<button
26 | 			type={type}
27 | 			title={title ?? ""}
28 | 			onClick={handleClickProp}
29 | 			disabled={disable}
30 | 			className={`flex gap-2 items-center text-iconColor ${extraBtnClasses} ${
31 | 				textColor ?? ""
32 | 			} rounded-md px-2 py-1 hover:scale-105 transition duration-300 ease-in-out`}
33 | 		>
34 | 			{children}
35 | 		</button>
36 | 	);
37 | }
38 | 
39 | export default Button;
40 |

--------------------------------------------------------------------------------
/src/components/Dialog.tsx:
--------------------------------------------------------------------------------
 1 | import { XMarkIcon } from "@heroicons/react/24/solid";
 2 | import { ReactNode, useState } from "react";
 3 | import Button from "./Button";
 4 | import { ITask } from "../models/interface";
 5 | 
 6 | interface DialogProps {
 7 | 	setIsViewTask?: (isViewTask: boolean) => void;
 8 | 	setSearchedTasks?: (tasks: ITask[]) => void;
 9 | 	children: ReactNode;
10 | }
11 | 
12 | function Dialog({ setIsViewTask, setSearchedTasks, children }: DialogProps) {
13 | 	const [isOpen, setIsOpen] = useState(true);
14 | 
15 | 	const closeModal = () => {
16 | 		if (setIsViewTask) setIsViewTask(false);
17 | 		if (setSearchedTasks) setSearchedTasks([]);
18 | 		setIsOpen(false);
19 | 	};
20 | 	return (
21 | 		<dialog
22 | 			open={isOpen}
23 | 			id="modal"
24 | 			style={{
25 | 				backgroundColor: "var(--base-bg)",
26 | 				color: "var(--text-main)",
27 | 			}}
28 | 			className={`${
29 | 				isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
30 | 			} transition-opacity duration-300 ease-in-out fixed inset-0 backdrop-filter backdrop-blur-md backdrop-brightness-50 w-4/6 border border-container rounded-md max-h-[80vh] overflow-y-auto text-main`}
31 | 		>
32 | 			<Button
33 | 				handleClick={closeModal}
34 | 				extraBtnClasses="ml-auto text-main font-medium hover:text-error mt-2"
35 | 			>
36 | 				<span>Close</span>
37 | 				<XMarkIcon height={25} />
38 | 			</Button>
39 | 			<div className="max-h-[80vh] overflow-y-auto">{children}</div>
40 | 		</dialog>
41 | 	);
42 | }
43 | 
44 | export default Dialog;
45 |

--------------------------------------------------------------------------------
/src/components/Navbar.tsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | import Select from "./Select";
 3 | import Button from "./Button";
 4 | import { PencilIcon } from "@heroicons/react/24/solid";
 5 | import { useEffect, useState } from "react";
 6 | 
 7 | const Navbar = () => {
 8 | 	const themeArray = ["light", "dark", "system"];
 9 | 	const [theme, setTheme] = useState(() => {
10 | 		return localStorage.getItem("theme") || themeArray[2];
11 | 	});
12 | 
13 | 	const applyTheme = (selectedTheme: string) => {
14 | 		const isDarkModePreferred = window.matchMedia(
15 | 			"(prefers-color-scheme: dark)"
16 | 		).matches;
17 | 
18 | 		document.documentElement.classList.remove("light", "dark");
19 | 		document.documentElement.classList.add(selectedTheme);
20 | 
21 | 		if (selectedTheme === "system") {
22 | 			document.documentElement.classList.toggle("dark", isDarkModePreferred);
23 | 			document.documentElement.classList.toggle("light", !isDarkModePreferred);
24 | 		}
25 | 	};
26 | 
27 | 	const handleSelectTheme = (e: React.ChangeEvent<HTMLSelectElement>) => {
28 | 		const selectedTheme = e.target.value;
29 | 		setTheme(selectedTheme);
30 | 
31 | 		// Store the selected theme in localStorage
32 | 		localStorage.setItem("theme", selectedTheme);
33 | 	};
34 | 
35 | 	useEffect(() => {
36 | 		applyTheme(theme);
37 | 	}, [theme]);
38 | 
39 | 	return (
40 | 		<nav className="py-4 border-b-2 border-container shadow-md shadow-gray-400 w-full fixed top-0 bg-base">
41 | 			<ul className="flex items-center justify-between  w-11/12 mx-auto">
42 | 				<Link to="/">
43 | 					<Button>
44 | 						<span className="font-semibold text-main">Taskwrite</span>
45 | 						<PencilIcon height={20} className="text-main" />
46 | 					</Button>
47 | 				</Link>
48 | 				<div className="flex items-center justify-between gap-6">
49 | 					<Link
50 | 						to="/tasks"
51 | 						className="font-semibold hover:scale-105 transition duration-300 ease-in-out"
52 | 					>
53 | 						View Tasks
54 | 					</Link>
55 | 					<div className="flex gap-2 items-center">
56 | 						<span className="font-semibold"> Theme: </span>
57 | 						<Select
58 | 							defaultSelectValue={theme}
59 | 							selectOptions={themeArray}
60 | 							handleSelectChange={handleSelectTheme}
61 | 						/>
62 | 					</div>
63 | 				</div>
64 | 			</ul>
65 | 		</nav>
66 | 	);
67 | };
68 | 
69 | export default Navbar;
70 |

--------------------------------------------------------------------------------
/src/components/Search.tsx:
--------------------------------------------------------------------------------
 1 | import { FormEvent, useState } from "react";
 2 | import { ITask } from "../models/interface";
 3 | import Dialog from "./Dialog";
 4 | import TaskItem from "./TaskItem";
 5 | import Button from "./Button";
 6 | import { searchTasks } from "../utils/db";
 7 | 
 8 | const Search = () => {
 9 | 	const [searchTerm, setSearchTerm] = useState("");
10 | 	const [isSearching, setIsSearching] = useState(false);
11 | 	const [searchedTasks, setSearchedTasks] = useState<ITask[]>([]);
12 | 	const [error, setError] = useState("");
13 | 
14 | 	const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
15 | 		e.preventDefault();
16 | 		if (!searchTerm) {
17 | 			setError("No search term entered");
18 | 			setTimeout(() => {
19 | 				setError("");
20 | 			}, 3000);
21 | 			return;
22 | 		}
23 | 
24 | 		setIsSearching(true);
25 | 
26 | 		const res = await searchTasks(searchTerm);
27 | 		console.log("res search: ", res);
28 | 		if (res.length === 0) {
29 | 			setIsSearching(false);
30 | 			setError("No task found");
31 | 			setTimeout(() => {
32 | 				setSearchTerm("");
33 | 				setError("");
34 | 			}, 3000);
35 | 			return;
36 | 		}
37 | 		setIsSearching(false);
38 | 		setSearchedTasks(res as ITask[]);
39 | 	};
40 | 	return (
41 | 		<div className="flex flex-col w-full md:w-1/2">
42 | 			<form
43 | 				className="flex flex-col md:flex-row items-start md:items-center gap-2"
44 | 				onSubmit={handleSubmit}
45 | 			>
46 | 				{searchedTasks.length > 0 && (
47 | 					<Dialog setSearchedTasks={setSearchedTasks}>
48 | 						{searchedTasks.map((task: ITask) => (
49 | 							<TaskItem key={task.$id} task={task} isViewTask={true} />
50 | 						))}
51 | 					</Dialog>
52 | 				)}
53 | 				<input
54 | 					aria-roledescription="search"
55 | 					type="text"
56 | 					id="search"
57 | 					placeholder="search your tasks..."
58 | 					value={searchTerm}
59 | 					onChange={(e) => setSearchTerm(e.target.value)}
60 | 					className={`bg-inherit w-5/6 border rounded-md p-2 focus:outline-none focus:ring-1 ${
61 | 						error
62 | 							? "border-error focus:ring-red-500 invalid:focus:ring-red-600"
63 | 							: "border-input focus:ring-slate-900"
64 | 					}`}
65 | 				/>
66 | 				<Button
67 | 					type="submit"
68 | 					extraBtnClasses="bg-primary text-white hover:bg-primaryHover font-medium text-main py-2"
69 | 				>
70 | 					<span>{isSearching ? "Searching..." : "Search"}</span>
71 | 				</Button>
72 | 			</form>
73 | 			<span className="text-error font-medium mt-1">{error}</span>
74 | 		</div>
75 | 	);
76 | };
77 | 
78 | export default Search;
79 |

--------------------------------------------------------------------------------
/src/components/Select.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | 
 3 | interface SelectProps {
 4 | 	defaultSelectValue: string;
 5 | 	selectOptions: string[];
 6 | 	handleSelectChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 7 | }
 8 | 
 9 | const Select = ({
10 | 	defaultSelectValue,
11 | 	handleSelectChange,
12 | 	selectOptions,
13 | }: SelectProps) => {
14 | 	const [selectVal, setSelectVal] = useState(defaultSelectValue);
15 | 	return (
16 | 		<select
17 | 			value={selectVal}
18 | 			onChange={(e) => {
19 | 				setSelectVal(e.target.value);
20 | 				handleSelectChange(e);
21 | 			}}
22 | 			className="bg-inherit border rounded-sm border-input p-2 focus:outline-none focus:ring-1 focus:ring-slate-900 cursor-pointer"
23 | 		>
24 | 			{selectOptions.map((option) => (
25 | 				<option key={option} value={option}>
26 | 					{option.charAt(0).toUpperCase() + option.slice(1)}
27 | 				</option>
28 | 			))}
29 | 		</select>
30 | 	);
31 | };
32 | 
33 | export default Select;
34 |

--------------------------------------------------------------------------------
/src/components/Speaker.tsx:
--------------------------------------------------------------------------------
 1 | import { useSpeechToTextHelper } from "../hooks/useSpeechToTextHelper";
 2 | import { MicrophoneIcon, XCircleIcon } from "@heroicons/react/24/solid";
 3 | import Button from "./Button";
 4 | import SpeechRecognition from "react-speech-recognition";
 5 | 
 6 | interface SpeakerProps {
 7 | 	handleClear: (e: React.MouseEvent<HTMLButtonElement>) => void;
 8 | }
 9 | 
10 | function Speaker({ handleClear }: SpeakerProps) {
11 | 	const { listening, error } = useSpeechToTextHelper();
12 | 
13 | 	const handleSpeech = () => {
14 | 		SpeechRecognition.startListening();
15 | 	};
16 | 
17 | 	return (
18 | 		<div>
19 | 			{error && <div>{error}</div>}
20 | 			<div className="flex gap-2 py-1 items-center text-center justify-center">
21 | 				<span className="font-medium">{listening ? "Mic on" : "Mic off"}</span>
22 | 				<Button
23 | 					handleClick={handleSpeech}
24 | 					extraBtnClasses="bg-lightOk"
25 | 					title="Start"
26 | 				>
27 | 					<MicrophoneIcon height={25} />
28 | 				</Button>
29 | 				<Button
30 | 					handleClick={handleClear}
31 | 					extraBtnClasses="bg-light"
32 | 					type="reset"
33 | 					title="Reset"
34 | 				>
35 | 					<XCircleIcon height={25} />
36 | 				</Button>
37 | 			</div>
38 | 		</div>
39 | 	);
40 | }
41 | 
42 | export default Speaker;
43 |

--------------------------------------------------------------------------------
/src/components/TaskItem.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import Button from "./Button";
  3 | import { PencilSquareIcon, TrashIcon } from "@heroicons/react/24/solid";
  4 | import { IPayload, ITask } from "../models/interface";
  5 | import { deleteDocument, updateDocument } from "../utils/db";
  6 | import { getTasks } from "../utils/shared";
  7 | import { useNavigate } from "react-router-dom";
  8 | 
  9 | interface TaskItemProps {
 10 | 	task: ITask;
 11 | 	setTasks?: (tasks: ITask[]) => void;
 12 | 	isViewTask: boolean;
 13 | 	handleViewTask?: (e: React.MouseEvent<HTMLDivElement>) => void;
 14 | }
 15 | 
 16 | function TaskItem({
 17 | 	task,
 18 | 	setTasks,
 19 | 	isViewTask = false,
 20 | 	handleViewTask,
 21 | }: TaskItemProps) {
 22 | 	const navigate = useNavigate();
 23 | 
 24 | 	const [isDone, setIsDone] = useState(false);
 25 | 
 26 | 	const updateTasks = async () => {
 27 | 		try {
 28 | 			const allTasks = await getTasks();
 29 | 			if (setTasks) setTasks(allTasks.reverse());
 30 | 		} catch (error) {
 31 | 			console.error(error);
 32 | 		}
 33 | 	};
 34 | 
 35 | 	const handleEdit = async (currentTask: ITask) => {
 36 | 		navigate("/", { state: { task: currentTask } });
 37 | 	};
 38 | 
 39 | 	const handleDelete = async (
 40 | 		e: React.MouseEvent<HTMLButtonElement>,
 41 | 		currentTaskId: string
 42 | 	) => {
 43 | 		e.stopPropagation();
 44 | 		try {
 45 | 			await deleteDocument(currentTaskId);
 46 | 			if (isViewTask) {
 47 | 				navigate(0);
 48 | 			} else {
 49 | 				updateTasks();
 50 | 			}
 51 | 		} catch (error) {
 52 | 			console.error(error);
 53 | 		}
 54 | 	};
 55 | 
 56 | 	const handleCheckbox = async (
 57 | 		currentTask: IPayload,
 58 | 		id: string,
 59 | 		e: React.ChangeEvent<HTMLInputElement>
 60 | 	) => {
 61 | 		const payload: IPayload = {
 62 | 			title: currentTask.title,
 63 | 			description: currentTask.description,
 64 | 			due_date: currentTask.due_date,
 65 | 			priority: currentTask.priority,
 66 | 			done: e.target.checked,
 67 | 		};
 68 | 
 69 | 		try {
 70 | 			await updateDocument(payload, id);
 71 | 			updateTasks();
 72 | 		} catch (error) {
 73 | 			console.error(error);
 74 | 		}
 75 | 	};
 76 | 
 77 | 	return (
 78 | 		<>
 79 | 			<div
 80 | 				className="m-8 cursor-pointer border border-container rounded-md p-4 hover:shadow-lg transition duration-300 ease-in-out max-h-96"
 81 | 				onClick={handleViewTask}
 82 | 			>
 83 | 				<section
 84 | 					key={task.$id}
 85 | 					className="flex flex-col justify-between gap-2 my-4 h-full"
 86 | 				>
 87 | 					<section className="flex gap-4 items-center justify-between flex-wrap">
 88 | 						{task.priority && (
 89 | 							<span>
 90 | 								<span className="font-medium">Priority: </span>
 91 | 								<span
 92 | 									className={`${
 93 | 										task.priority === "low"
 94 | 											? "bg-lowPriority text-iconColor"
 95 | 											: task.priority === "medium"
 96 | 											? "bg-mediumPriority text-iconColor"
 97 | 											: "bg-highPriority text-iconColor"
 98 | 									} py-1 px-2 rounded-md`}
 99 | 								>
100 | 									{task.priority}
101 | 								</span>
102 | 							</span>
103 | 						)}
104 | 						<div className="flex gap-2 py-1 ml-auto">
105 | 							{!task.done && (
106 | 								<Button
107 | 									handleClick={() => handleEdit(task)}
108 | 									extraBtnClasses="bg-ok"
109 | 								>
110 | 									<span className="font-medium">Edit</span>
111 | 									<PencilSquareIcon height={25} className="hidden lg:flex" />
112 | 								</Button>
113 | 							)}
114 | 							<Button
115 | 								handleClick={(e) => handleDelete(e, task.$id)}
116 | 								extraBtnClasses="bg-highPriority"
117 | 							>
118 | 								<span className="font-medium">Delete</span>
119 | 								<TrashIcon height={25} className="hidden lg:flex" />
120 | 							</Button>
121 | 						</div>
122 | 					</section>
123 | 					<section className="">
124 | 						<h2 className="text-xl font-medium py-2 break-words">
125 | 							{task.title}
126 | 						</h2>
127 | 						<p className="py-1 mb-4 min-h-16 break-words">
128 | 							{task.description.length > 70 && !isViewTask
129 | 								? task.description.substring(0, 70) + "..."
130 | 								: task.description}
131 | 						</p>
132 | 						<span className="font-extralight mt-2">
133 | 							<span className="font-medium">Due on: </span>
134 | 							<span className="underline">{`${new Date(
135 | 								task.due_date
136 | 							).toLocaleDateString()}`}</span>
137 | 						</span>
138 | 					</section>
139 | 					<section className="flex justify-between">
140 | 						{task.done ? (
141 | 							<span className="items-center text-ok font-bol ml-auto">
142 | 								Completed
143 | 							</span>
144 | 						) : (
145 | 							<div className="flex items-center ml-auto hover:scale-105 transition duration-300 ease-in-out">
146 | 								<label htmlFor="done" className="mr-2 font-light">
147 | 									Mark as complete
148 | 								</label>
149 | 								<input
150 | 									type="checkbox"
151 | 									checked={isDone}
152 | 									onClick={(e) => e.stopPropagation()}
153 | 									onChange={(e) => {
154 | 										setIsDone(e.target.checked);
155 | 										handleCheckbox(task, task.$id, e);
156 | 									}}
157 | 									className="size-5 accent-pink-600 rounded-sm"
158 | 								/>
159 | 							</div>
160 | 						)}
161 | 					</section>
162 | 				</section>
163 | 			</div>
164 | 		</>
165 | 	);
166 | }
167 | 
168 | export default TaskItem;
169 |

--------------------------------------------------------------------------------
/src/hooks/useSpeechToTextHelper.ts:
--------------------------------------------------------------------------------
 1 | import "regenerator-runtime/runtime";
 2 | import { useState } from "react";
 3 | import { useSpeechRecognition } from "react-speech-recognition";
 4 | 
 5 | export function useSpeechToTextHelper() {
 6 | 	const [error, setError] = useState("");
 7 | 
 8 | 	const {
 9 | 		transcript,
10 | 		listening,
11 | 		resetTranscript,
12 | 		browserSupportsSpeechRecognition,
13 | 	} = useSpeechRecognition();
14 | 
15 | 	if (!browserSupportsSpeechRecognition) {
16 | 		setError("Browser doesn't support speech recognition.");
17 | 	}
18 | 
19 | 	return {
20 | 		error,
21 | 		listening,
22 | 		transcript,
23 | 		resetTranscript,
24 | 	};
25 | }
26 |

--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Quicksand:wght@300..700&display=swap');
 2 | @tailwind base;
 3 | @tailwind components;
 4 | @tailwind utilities;
 5 | 
 6 | @layer base {
 7 |     :root{
 8 |         --base-bg: #ffffff;
 9 |         --btn-bg-primary: #be185d;
10 |         --btn-bg-primary-hover: #9d174d;
11 |         --btn-icon-main: #1e293b;
12 |         --btn-bg-ok: #4ade80;
13 |         --btn-bg-light-ok: #bbf7d0;
14 |         --btn-bg-light: #e5e7eb;
15 |         --low-priority: #facc15;
16 |         --medium-priority: #fb923c;
17 |         --high-priority: #f87171;
18 |         --text-error: #dc2626;
19 |         --text-ok: #16a34a;
20 |         --text-main: #262626;
21 |         --border-container: #9ca3af;
22 |         --border-input: #1e293b;
23 |         --border-error: #dc2626;
24 |     }
25 | 
26 |     body{
27 |         background-color: var(--base-bg);
28 |         color: var(--text-main);    
29 |     }
30 | 
31 |     #date::-webkit-calendar-picker-indicator {
32 |         background-color: var(--btn-bg-light); 
33 |     }
34 | 
35 |     .dark{
36 |         --base-bg: #262626;
37 |         --text-main: #ffffff;
38 |         --text-error: #fca5a5;
39 |         --text-ok: #86efac;
40 |         --border-input: #e2e8f0;
41 |         --border-error: #fca5a5;
42 |     }
43 | }
44 | 
45 | 
46 | 
47 |

--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import { BrowserRouter } from "react-router-dom";
 4 | import App from "./App.tsx";
 5 | import "./index.css";
 6 | 
 7 | ReactDOM.createRoot(document.getElementById("root")!).render(
 8 | 	<React.StrictMode>
 9 | 		<BrowserRouter>
10 | 			<App />
11 | 		</BrowserRouter>
12 | 	</React.StrictMode>
13 | );
14 |

--------------------------------------------------------------------------------
/src/models/interface.ts:
--------------------------------------------------------------------------------
 1 | import { Models } from "appwrite";
 2 | 
 3 | export interface IPayload {
 4 | 	title: string;
 5 | 	description: string;
 6 | 	due_date: Date;
 7 | 	priority?: string;
 8 | 	done?: boolean;
 9 | }
10 | 
11 | export interface ITask extends Models.Document {
12 | 	title: string;
13 | 	description: string;
14 | 	due_date: Date;
15 | 	priority?: string;
16 | 	done: boolean;
17 | }
18 |

--------------------------------------------------------------------------------
/src/routes/Index.tsx:
--------------------------------------------------------------------------------
 1 | //
 2 | 
 3 | import { useEffect, useState } from "react";
 4 | import AddTask from "../components/AddTask";
 5 | import { useLocation, useNavigate } from "react-router-dom";
 6 | import { ITask } from "../models/interface";
 7 | 
 8 | const Index = () => {
 9 | 	const location = useLocation();
10 | 	const navigate = useNavigate();
11 | 
12 | 	const taskFromState: ITask = location.state?.task;
13 | 
14 | 	const [taskToEdit] = useState<ITask | null>(taskFromState ?? null);
15 | 
16 | 	useEffect(() => {
17 | 		if (taskFromState) {
18 | 			navigate(location.pathname, {});
19 | 		}
20 | 	}, [taskFromState, location.pathname, navigate]);
21 | 
22 | 	return (
23 | 		<main className="container mx-auto">
24 | 			<section className="max-w-5xl mx-auto m-12 p-16">
25 | 				<h1 className="text-4xl md:text-7xl font-bold text-center py-3 mb-16">
26 | 					AI-enhanced, Voice-enabled, Searchable Task Manager
27 | 				</h1>
28 | 				<AddTask task={taskToEdit} isEdit={taskToEdit ? true : false} />
29 | 			</section>
30 | 		</main>
31 | 	);
32 | };
33 | 
34 | export default Index;
35 |

--------------------------------------------------------------------------------
/src/routes/Task.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from "react";
  2 | import { ITask } from "../models/interface";
  3 | import TaskItem from "../components/TaskItem";
  4 | import { getTasks } from "../utils/shared";
  5 | import Dialog from "../components/Dialog";
  6 | import Button from "../components/Button";
  7 | import Search from "../components/Search";
  8 | import { PlusIcon } from "@heroicons/react/24/solid";
  9 | import { useNavigate } from "react-router-dom";
 10 | import Select from "../components/Select";
 11 | import { sortByDueDate } from "../utils/db";
 12 | 
 13 | const Task = () => {
 14 | 	const [tasks, setTasks] = useState<ITask[]>([]);
 15 | 	const [tasksError, setTasksError] = useState("");
 16 | 	const [isViewTask, setIsViewTask] = useState(false);
 17 | 	const [selectedTask, setSelectedTask] = useState<ITask>();
 18 | 
 19 | 	const navigate = useNavigate();
 20 | 
 21 | 	const sortByPriority = (tasksList: ITask[], isAsc: boolean): ITask[] => {
 22 | 		const priorityOrder: { [key: string]: number } = {
 23 | 			low: 1,
 24 | 			medium: 2,
 25 | 			high: 3,
 26 | 		};
 27 | 
 28 | 		return [...tasksList].sort((a, b) => {
 29 | 			const priorityA = priorityOrder[a.priority!.toLowerCase()];
 30 | 			const priorityB = priorityOrder[b.priority!.toLowerCase()];
 31 | 			return isAsc ? priorityA - priorityB : priorityB - priorityA;
 32 | 		});
 33 | 	};
 34 | 
 35 | 	const handleSelectChange = async (
 36 | 		e: React.ChangeEvent<HTMLSelectElement>
 37 | 	) => {
 38 | 		const selectedOption = e.target.value;
 39 | 		const doneTasks = tasks.filter((task) => task.done);
 40 | 
 41 | 		switch (selectedOption) {
 42 | 			case "priority - (low - high)":
 43 | 			case "priority - (high - low)": {
 44 | 				const isAsc = selectedOption === "priority - (low - high)";
 45 | 				const sortedTasks = sortByPriority(tasks, isAsc);
 46 | 				setTasks([...doneTasks, ...sortedTasks.filter((task) => !task.done)]);
 47 | 				break;
 48 | 			}
 49 | 			case "due date - (earliest - latest)":
 50 | 			case "due date - (latest - earliest)": {
 51 | 				const isEarliestToLatest =
 52 | 					selectedOption === "due date - (earliest - latest)";
 53 | 				const dueDateResult = await sortByDueDate(isEarliestToLatest);
 54 | 				const sortedTasks = dueDateResult.documents as ITask[];
 55 | 				setTasks([...doneTasks, ...sortedTasks.filter((task) => !task.done)]);
 56 | 				break;
 57 | 			}
 58 | 			default:
 59 | 				break;
 60 | 		}
 61 | 	};
 62 | 
 63 | 	const selectArray = [
 64 | 		"priority - (low - high)",
 65 | 		"priority - (high - low)",
 66 | 		"due date - (earliest - latest)",
 67 | 		"due date - (latest - earliest)",
 68 | 	];
 69 | 
 70 | 	const handleViewTask = (activeTask: ITask) => {
 71 | 		console.log("ACTIVE TASK" + activeTask);
 72 | 		setIsViewTask(true);
 73 | 		setSelectedTask(activeTask);
 74 | 	};
 75 | 
 76 | 	useEffect(() => {
 77 | 		getTasks()
 78 | 			.then((res) => {
 79 | 				setTasks(res.reverse());
 80 | 			})
 81 | 			.catch((err) => {
 82 | 				console.error(err);
 83 | 				setTasksError("Error fetching tasks, please try again");
 84 | 			});
 85 | 	}, []);
 86 | 	return (
 87 | 		<main className="container mx-auto">
 88 | 			<section className="max-w-5xl mx-auto m-12 p-16">
 89 | 				{isViewTask && selectedTask && (
 90 | 					<Dialog key={selectedTask.$id} setIsViewTask={setIsViewTask}>
 91 | 						<TaskItem
 92 | 							task={selectedTask}
 93 | 							handleViewTask={() => handleViewTask(selectedTask!)}
 94 | 							isViewTask={isViewTask}
 95 | 						/>
 96 | 					</Dialog>
 97 | 				)}
 98 | 				<h1 className="text-4xl md:text-7xl font-bold text-center py-3 mb-16">
 99 | 					Your Tasks
100 | 				</h1>
101 | 				<div className="m-8 flex flex-col-reverse md:flex-row gap-8 items-start md:items-center md:justify-between">
102 | 					<Search />
103 | 					<Button
104 | 						handleClick={() => navigate("/")}
105 | 						extraBtnClasses="bg-primary text-white font-medium py-2 hover:bg-primaryHover ml-auto"
106 | 					>
107 | 						<span>Add Task</span>
108 | 						<PlusIcon height={25} className="hidden md:flex" />
109 | 					</Button>
110 | 				</div>
111 | 				{tasksError ? (
112 | 					<span className="m-8 text-error">{tasksError}</span>
113 | 				) : (
114 | 					<div className="flex flex-col md:flex-row justify-between">
115 | 						<div className="flex-1">
116 | 							<h3 className="text-2xl font-bold m-8">Pending Tasks</h3>
117 | 							<div className="m-8 flex items-start lg:items-center gap-1 justify-between flex-col lg:flex-row">
118 | 								<span className="font-medium">Sort Tasks by: </span>
119 | 								<Select
120 | 									defaultSelectValue={selectArray[0]}
121 | 									handleSelectChange={handleSelectChange}
122 | 									selectOptions={selectArray}
123 | 								/>
124 | 							</div>
125 | 							<div>
126 | 								{tasks
127 | 									.filter((task) => !task.done)
128 | 									.map((task) => (
129 | 										<TaskItem
130 | 											key={task.$id}
131 | 											task={task}
132 | 											setTasks={setTasks}
133 | 											handleViewTask={() => handleViewTask(task)}
134 | 											isViewTask={isViewTask}
135 | 										/>
136 | 									))}
137 | 							</div>
138 | 						</div>
139 | 						<div className="flex-1">
140 | 							<h3 className="text-2xl font-bold m-8">Completed Tasks</h3>
141 | 							<div>
142 | 								{tasks
143 | 									.filter((task) => task.done)
144 | 									.map((task) => (
145 | 										<TaskItem
146 | 											key={task.$id}
147 | 											task={task}
148 | 											setTasks={setTasks}
149 | 											handleViewTask={() => handleViewTask(task)}
150 | 											isViewTask={isViewTask}
151 | 										/>
152 | 									))}
153 | 							</div>
154 | 						</div>
155 | 					</div>
156 | 				)}
157 | 			</section>
158 | 		</main>
159 | 	);
160 | };
161 | 
162 | export default Task;
163 |

--------------------------------------------------------------------------------
/src/utils/ai.ts:
--------------------------------------------------------------------------------
 1 | import { HfInference } from "@huggingface/inference";
 2 | 
 3 | // Create a new HuggingFace Inference instance
 4 | const Hf = new HfInference(import.meta.env.VITE_HUGGINGFACE_KEY);
 5 | 
 6 | // IMPORTANT! Set the runtime to edge
 7 | export const runtime = "edge";
 8 | 
 9 | export const callAI = async (prompt: string) => {
10 | 	const response = Hf.textGeneration({
11 | 		model: "mistralai/Mistral-7B-Instruct-v0.3",
12 | 		inputs: `<|prompter|>${prompt}<|endoftext|><|assistant|>`,
13 | 		parameters: {
14 | 			max_new_tokens: 200,
15 | 			// @ts-ignore (this is a valid parameter specifically in OpenAssistant models)
16 | 			typical_p: 0.2,
17 | 			repetition_penalty: 1,
18 | 			truncate: 1000,
19 | 			return_full_text: false,
20 | 		},
21 | 	});
22 | 
23 | 	return response;
24 | };
25 |

--------------------------------------------------------------------------------
/src/utils/appwrite.ts:
--------------------------------------------------------------------------------
 1 | import { Client, Databases } from "appwrite";
 2 | 
 3 | export const client = new Client();
 4 | 
 5 | client
 6 | 	.setEndpoint(import.meta.env.VITE_APPWRITE_URL)
 7 | 	.setProject(import.meta.env.VITE_APPWRITE_PROJ_ID);
 8 | 
 9 | export const databases = new Databases(client);
10 | 
11 | export { ID } from "appwrite";
12 |

--------------------------------------------------------------------------------
/src/utils/db.ts:
--------------------------------------------------------------------------------
 1 | import { ID, databases } from "./appwrite";
 2 | import { IPayload } from "../models/interface";
 3 | import { Query } from "appwrite";
 4 | 
 5 | const dbID: string = import.meta.env.VITE_APPWRITE_DB_ID;
 6 | const collectionID: string = import.meta.env.VITE_APPWRITE_COLLECTION_ID;
 7 | 
 8 | const createDocument = async (payload: IPayload) => {
 9 | 	const res = await databases.createDocument(dbID, collectionID, ID.unique(), {
10 | 		...payload,
11 | 	});
12 | 
13 | 	return res;
14 | };
15 | 
16 | const readDocuments = async () => {
17 | 	const res = await databases.listDocuments(dbID, collectionID);
18 | 
19 | 	return res;
20 | };
21 | 
22 | const updateDocument = async (payload: IPayload, id: string) => {
23 | 	const res = await databases.updateDocument(dbID, collectionID, id, {
24 | 		...payload,
25 | 	});
26 | 
27 | 	return res;
28 | };
29 | const deleteDocument = async (id: string) => {
30 | 	const res = await databases.deleteDocument(dbID, collectionID, id);
31 | 
32 | 	return res;
33 | };
34 | 
35 | const searchTasks = async (searchTerm: string) => {
36 | 	const resTitle = await databases.listDocuments(dbID, collectionID, [
37 | 		Query.search("title", searchTerm),
38 | 	]);
39 | 	const resDesc = await databases.listDocuments(dbID, collectionID, [
40 | 		Query.search("description", searchTerm),
41 | 	]);
42 | 
43 | 	const res = [...resTitle.documents, ...resDesc.documents];
44 | 
45 | 	// remove duplicate tasks
46 | 	const uniqueRes = res.filter(
47 | 		(task, index, self) => index === self.findIndex((t) => t.$id === task.$id)
48 | 	);
49 | 
50 | 	return uniqueRes;
51 | };
52 | const sortByDueDate = async (isEarliestToLatest: boolean) => {
53 | 	const orderQuery = isEarliestToLatest
54 | 		? Query.orderAsc("due_date")
55 | 		: Query.orderDesc("due_date");
56 | 	const res = await databases.listDocuments(dbID, collectionID, [orderQuery]);
57 | 	return res;
58 | };
59 | 
60 | export {
61 | 	createDocument,
62 | 	readDocuments,
63 | 	updateDocument,
64 | 	deleteDocument,
65 | 	searchTasks,
66 | 	sortByDueDate,
67 | };
68 |

--------------------------------------------------------------------------------
/src/utils/shared.ts:
--------------------------------------------------------------------------------
1 | import { readDocuments } from "./db";
2 | import { ITask } from "../models/interface";
3 | 
4 | export const getTasks = async () => {
5 | 	const { documents } = await readDocuments();
6 | 
7 | 	return documents as ITask[];
8 | };
9 |

--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |

--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 | 	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
 4 | 	darkMode: "selector",
 5 | 	theme: {
 6 | 		extend: {
 7 | 			textColor: {
 8 | 				error: "var(--text-error)",
 9 | 				ok: "var(--text-ok)",
10 | 				main: "var(--text-main)",
11 | 				iconColor: "var(--btn-icon-main)",
12 | 			},
13 | 			backgroundColor: {
14 | 				base: "var(--base-bg)",
15 | 				primary: "var(--btn-bg-primary)",
16 | 				primaryHover: "var(--btn-bg-primary-hover)",
17 | 				ok: "var(--btn-bg-ok)",
18 | 				lightOk: "var(--btn-bg-light-ok)",
19 | 				light: "var(--btn-bg-light)",
20 | 				lowPriority: "var(--low-priority)",
21 | 				mediumPriority: "var(--medium-priority)",
22 | 				highPriority: "var(--high-priority)",
23 | 			},
24 | 			borderColor: {
25 | 				container: "var(--border-container)",
26 | 				input: "var(--border-input)",
27 | 				error: "var(--border-error)",
28 | 			},
29 | 		},
30 | 	},
31 | 	plugins: [],
32 | };
33 |

--------------------------------------------------------------------------------
/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 |   },
 9 |   "include": ["vite.config.ts"]
10 | }
11 |

--------------------------------------------------------------------------------
/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 |

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