Merge pull request #8 from recallwei/v1.1.4

Release v1.1.4
taskward · Oct 1, 2022 · 4346842 · 4346842 · vercel · Oct 1, 2022
2 parents 5aea383 + d37d663
commit 4346842
Show file tree

Hide file tree

Showing 29 changed files with 592 additions and 484 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 ## v1.1
 
+## v1.1.4
+
+- A brand new UI for the task checkbox.
+- Add sync state icon.
+- Refactor react-router.
+- Fix the redirect error when getting status code 400 and 401.
+
 ## v1.1.3
 
 - Update the icon of the start button.

diff --git a/PLAN.md b/PLAN.md
@@ -62,5 +62,5 @@
   - [ ] Theme preference
   - [ ] Language preference
   - [ ] Custom background image
-- [ ] Auto sync/refresh
+- [x] Sync state icon
 - [ ] More App
diff --git a/README.md b/README.md
@@ -7,10 +7,11 @@ Taskward is a Todo&Task application.
 - React
 - TypeScript
 - Vite
-- Tailwind
 
 ## Library
 
+- Tailwind
+- DaisyUI
 - React-Redux
 - React-Query
 - React-Hook-Form & yup

diff --git a/global.d.ts b/global.d.ts
@@ -0,0 +1,2 @@
+declare module "@tailwindcss/typography";
+declare module "daisyui";
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="taskward">
   <head>
     <meta charset="UTF-8" />
     <link rel="stylesheet" type="text/css" href="/src/css/index.css" />

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,10 @@
 import { Suspense } from "react";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import {
+  Route,
+  RouterProvider,
+  createBrowserRouter,
+  createRoutesFromElements
+} from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import { Authentication, Layout, Loading, Notification } from "@components";
@@ -11,43 +16,47 @@ import {
   NotFound,
   Login,
   Signup,
-  Icons,
+  Icons
 } from "@pages";
 
 export default function App(): JSX.Element {
   const { i18n } = useTranslation();
 
+  const router = createBrowserRouter(
+    createRoutesFromElements(
+      <>
+        <Route index element={<Home />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route
+          path="/"
+          element={
+            <Authentication>
+              <Layout />
+              <Notification />
+            </Authentication>
+          }
+        >
+          <Route path="note" element={<Note />} />
+          <Route path="archive" element={<Archive />} />
+          <Route path="trash" element={<Trash />} />
+        </Route>
+        <Route path="/icons" element={<Icons />} />
+        <Route path="*" element={<NotFound />} />
+      </>
+    )
+  );
+
   return (
     <div
       className={clsx(
         "text-black transition-[background-color] dark:bg-darkMode-darker dark:text-white",
         i18n.language
       )}
     >
-      <BrowserRouter>
-        <Suspense fallback={<Loading fullScreen />}>
-          <Routes>
-            <Route index element={<Home />} />
-            <Route path="/login" element={<Login />} />
-            <Route path="/signup" element={<Signup />} />
-            <Route
-              path="/"
-              element={
-                <Authentication>
-                  <Layout />
-                  <Notification />
-                </Authentication>
-              }
-            >
-              <Route path="note" element={<Note />} />
-              <Route path="archive" element={<Archive />} />
-              <Route path="trash" element={<Trash />} />
-            </Route>
-            <Route path="/icons" element={<Icons />} />
-            <Route path="*" element={<NotFound />} />
-          </Routes>
-        </Suspense>
-      </BrowserRouter>
+      <Suspense fallback={<Loading fullScreen />}>
+        <RouterProvider router={router} />
+      </Suspense>
     </div>
   );
 }
diff --git a/src/components/Header/LanguageButton/index.tsx b/src/components/Header/LanguageButton/index.tsx
@@ -6,7 +6,7 @@ import { Icon } from "@components";
 import { LanguageType } from "@i18n";
 import { Language } from "@constants";
 
-export default function LanguageIcon() {
+export default function LanguageIcon(): JSX.Element {
   const { t, i18n } = useTranslation();
 
   const [showDropdown, setShowDropdown] = useState<boolean>(false);

diff --git a/src/components/Header/MenuIcon/index.tsx b/src/components/Header/MenuIcon/index.tsx
@@ -3,7 +3,7 @@ import { useAppDispatch } from "@hooks";
 import { sidebarAction } from "@store";
 import { Icon } from "@components";
 
-export default function MenuIcon() {
+export default function MenuIcon(): JSX.Element {
   const { t } = useTranslation(["layout"]);
   const sidebarDispatch = useAppDispatch();
 

diff --git a/src/components/Header/SyncIcon/index.tsx b/src/components/Header/SyncIcon/index.tsx
@@ -0,0 +1,16 @@
+import { Icon } from "@components";
+import { useAppSelector } from "@hooks";
+
+export default function SyncIcon(): JSX.Element | null {
+  const isLoading = useAppSelector((state) => state.request.isLoading);
+
+  if (!isLoading) {
+    return null;
+  }
+
+  return (
+    <div className="select-none rounded-full p-2 transition-colors">
+      <Icon.Sync />
+    </div>
+  );
+}
diff --git a/src/components/Header/ThemeModeButton/index.tsx b/src/components/Header/ThemeModeButton/index.tsx
@@ -3,7 +3,7 @@ import { Icon } from "@components";
 import { useAppSelector, useAppDispatch } from "@hooks";
 import { styleAction, ThemeMode } from "@store";
 
-export default function ThemeModeButton() {
+export default function ThemeModeButton(): JSX.Element {
   const { t } = useTranslation(["layout"]);
   const styleDispatch = useAppDispatch();
 

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -6,6 +6,7 @@ import LanguageIcon from "./LanguageButton";
 import ThemeModeButton from "./ThemeModeButton";
 import MenuIcon from "./MenuIcon";
 import UserAvatar from "./UserAvatar";
+import SyncIcon from "./SyncIcon";
 
 export default function Header(): JSX.Element {
   const { t } = useTranslation(["layout"]);
@@ -39,6 +40,7 @@ export default function Header(): JSX.Element {
         <div className="ml-2">{getActiveSidebarItemTitle()}</div>
       </div>
       <div className="mr-2 flex items-center justify-end gap-2">
+        <SyncIcon />
         <LanguageIcon />
         <ThemeModeButton />
         <UserAvatar />

diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -15,7 +15,7 @@ export default function Input({
   register = {},
   rightIcon,
   error,
-  errorMessage,
+  errorMessage
 }: InputProps): JSX.Element {
   return (
     <div className={className}>

diff --git a/src/components/NoteCreator/index.tsx b/src/components/NoteCreator/index.tsx
@@ -9,7 +9,7 @@ import { Button, Icon, TaskCheckbox } from "@components";
 import type {
   CustomComponentProps,
   CreateNoteFormData,
-  TaskFormData,
+  TaskFormData
 } from "@interfaces";
 import { useDetectOutsideClick } from "@hooks";
 import { useCreateNoteRequest } from "@requests";
@@ -19,7 +19,7 @@ import { useTaskListDataManager } from "@hooks";
 
 export default function NoteCreator({
   style,
-  className,
+  className
 }: CustomComponentProps): JSX.Element {
   const { t } = useTranslation(["common", "note"]);
 
@@ -33,7 +33,7 @@ export default function NoteCreator({
     removeCreatedTask,
     changeChecked,
     changeContent,
-    changeLinkUrl,
+    changeLinkUrl
   } = useTaskListDataManager();
 
   const outsideClickRef = useDetectOutsideClick({
@@ -43,31 +43,31 @@ export default function NoteCreator({
     insideClickCallback: () => {
       setEditable(true);
       setTasksData(getValues("tasks") ?? []);
-    },
+    }
   });
 
   const { handleSubmit, getValues, setValue, reset } =
     useForm<CreateNoteFormData>({
       defaultValues: {
         name: null,
         description: null,
-        tasks: [],
-      },
+        tasks: []
+      }
     });
 
   const handleCreateNote = async (formData: CreateNoteFormData) => {
     createNote(formData, {
       onSuccess: () => {
         setEditable(false);
         reset();
-      },
+      }
     });
   };
 
   return (
     <div
       className={clsx(
-        "mx-auto shrink-0 rounded-lg border border-gray-200 bg-white p-4 ring-0 drop-shadow-lg dark:border-neutral-800 dark:bg-noteDark",
+        "mx-auto shrink-0 rounded-lg border border-gray-200 bg-white p-4 ring-0 drop-shadow-lg dark:border-slate-800 dark:bg-noteDark",
         className
       )}
       style={style}
@@ -88,7 +88,7 @@ export default function NoteCreator({
               contentEditable
               onInput={(e) => {
                 setValue("name", e.currentTarget.textContent as string, {
-                  shouldValidate: true,
+                  shouldValidate: true
                 });
               }}
               dangerouslySetInnerHTML={{ __html: getValues("name") ?? "" }}
@@ -102,11 +102,11 @@ export default function NoteCreator({
               contentEditable
               onInput={(e) => {
                 setValue("description", e.currentTarget.textContent as string, {
-                  shouldValidate: true,
+                  shouldValidate: true
                 });
               }}
               dangerouslySetInnerHTML={{
-                __html: getValues("description") ?? "",
+                __html: getValues("description") ?? ""
               }}
             />
             {tasksData && tasksData.length > 0 && (
@@ -168,7 +168,7 @@ export default function NoteCreator({
                     id: generateGUID(),
                     content: null,
                     linkUrl: null,
-                    finished: false,
+                    finished: false
                   });
                   setValue("tasks", result);
                   setTasksData(result);