Merge pull request #3 from recallwei/v1.0.2

Release v1.0.2

.cspell.json

@@ -13,7 +13,8 @@
     "stylelint",
     "hookform",
     "signup",
-    "tanstack"
+    "tanstack",
+    "unarchiving"
   ],
   "flagWords": []
 }

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## v1.1.0
 
+### v1.0.2
+
+- Fix the display of the whitespace error.
+- Add animation feedback after archiving, unarchiving or deleting a note.
+- Add notification after copy note description.
+
 ### v1.0.1
 
 - Fix Firefox compatibility.

src/App.tsx

@@ -2,7 +2,7 @@ import { Suspense } from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
-import { Authentication, Layout, Loading } from "@components";
+import { Authentication, Layout, Loading, Notification } from "@components";
 import { Home, Note, Archive, Trash, NotFound, Login, Signup } from "@pages";
 
 export default function App(): JSX.Element {
@@ -21,6 +21,7 @@ export default function App(): JSX.Element {
               element={
                 <Authentication>
                   <Layout />
+                  <Notification />
                 </Authentication>
               }
             >

src/components/Authentication/index.tsx

@@ -11,7 +11,7 @@ import { userAction } from "@store";
 export default function Authentication({
   children,
 }: {
-  children: JSX.Element;
+  children: JSX.Element | JSX.Element[];
 }): JSX.Element {
   const navigate = useNavigate();
   const userDispatch = useAppDispatch();
@@ -41,5 +41,5 @@ export default function Authentication({
     navigate("/login", { replace: true });
   };
 
-  return children;
+  return <>{children}</>;
 }

src/components/Layout/index.tsx

@@ -1,9 +1,11 @@
-import clsx from "clsx";
 import { Suspense } from "react";
 import { Outlet } from "react-router-dom";
-import { Header, Sidebar, Loading } from "..";
+import clsx from "clsx";
+
 import styles from "./styles.module.css";
 
+import { Header, Sidebar, Loading } from "..";
+
 export default function Layout(): JSX.Element {
   return (
     <>
@@ -24,12 +26,6 @@ export default function Layout(): JSX.Element {
           <Suspense fallback={<Loading />}>
             <Outlet />
           </Suspense>
-          {/* <Notification
-        show={showNotification}
-        className="sticky inset-x-0 bottom-10 m-auto"
-      >
-        {t("common:COPY.SUCCESS")}
-      </Notification> */}
         </div>
       </div>
     </>

src/components/Loading/index.tsx

@@ -1,22 +1,32 @@
+import clsx from "clsx";
+
 import { Icon } from "@components";
 import { LoadingProps } from "@interfaces";
 
 export default function Loading({
   fullScreen = false,
   width = "36",
   height = "36",
+  className,
+  style,
 }: LoadingProps): JSX.Element {
   if (fullScreen) {
     return (
-      <div className="h-screen w-screen">
+      <div className={clsx("h-screen w-screen", className)} style={style}>
         <div className="flex h-full w-full items-center justify-center">
           <Icon.Loading width={width} height={height} />
         </div>
       </div>
     );
   }
   return (
-    <div className="flex h-full w-full items-center justify-center">
+    <div
+      className={clsx(
+        "flex h-full w-full items-center justify-center",
+        className
+      )}
+      style={style}
+    >
       <Icon.Loading width={width} height={height} />
     </div>
   );

src/components/NoteListCard/EditNoteModal/index.tsx

@@ -89,7 +89,7 @@ export default function EditNoteModal({
       </div>
       <form
         className={clsx(
-          "flex max-h-[420px] flex-col gap-4 overflow-y-auto px-4"
+          "flex max-h-[420px] flex-col gap-4 overflow-y-auto overflow-x-hidden px-4"
         )}
         key={`${isEdit}`}
       >
@@ -109,7 +109,7 @@ export default function EditNoteModal({
         />
         <div
           className={clsx(
-            "min-h-[1.25rem] w-full cursor-text select-text resize-none whitespace-pre-wrap break-words px-0 text-sm font-normal tracking-wide outline-none placeholder:text-gray-500 empty:before:text-gray-500 empty:before:content-[attr(placeholder)] focus:outline-none dark:text-noteSecondTextDark dark:placeholder-gray-400",
+            "w-full cursor-text select-text resize-none whitespace-pre-wrap break-words px-0 text-sm font-normal tracking-wide outline-none placeholder:text-gray-500 empty:before:text-gray-500 empty:before:content-[attr(placeholder)] focus:outline-none dark:text-noteSecondTextDark dark:placeholder-gray-400",
             styles.textarea
           )}
           placeholder={t("note:NOTE.CREATE.PLACEHOLDER")}

src/components/NoteListCard/index.tsx

@@ -1,20 +1,14 @@
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 
-import { Icon } from "@components";
+import { NoteListCardPanel } from "@components";
 import {
   useArchiveNoteRequest,
   useDeleteNoteRequest,
   useUnarchiveNoteRequest,
 } from "@requests";
-import {
-  convertUtcToLocalTime,
-  convertUtcToFullLocalTime,
-  setClipBoardText,
-} from "@utils";
-import { useAppDispatch, useToggle } from "@hooks";
-import { sidebarAction, ActiveSidebarItem } from "@store";
+import { convertUtcToLocalTime, convertUtcToFullLocalTime } from "@utils";
+import { useToggle } from "@hooks";
 import { NoteListCardProps } from "@interfaces";
 
 import EditNoteModal from "./EditNoteModal";
@@ -25,8 +19,6 @@ export default function NoteListCard({
   className,
   style,
 }: NoteListCardProps): JSX.Element | null {
-  const { t } = useTranslation(["common", "layout", "note"]);
-
   const { mutate: archiveNote, isLoading: isArchiveNoteLoading } =
     useArchiveNoteRequest();
   const { mutate: deleteNote, isLoading: isDeleteNoteLoading } =
@@ -37,31 +29,27 @@ export default function NoteListCard({
 
   const [focused, setFocused] = useState<boolean>(false);
 
-  const copyDescription = (text: string | undefined | null) => {
-    const copyResult = setClipBoardText(text);
-    if (copyResult) {
-      // setShowNotification(true);
-      setTimeout(() => {
-        // setShowNotification(false);
-      }, 5000);
-    }
-  };
-
   if (!note) {
     return null;
   }
 
+  if (isArchiveNoteLoading || isDeleteNoteLoading || isUnarchiveNoteLoading) {
+    return null;
+  }
+
   return (
     <>
       <div
         key={note.id}
         className={clsx(
-          "mx-auto flex h-fit w-full cursor-pointer flex-col gap-4 rounded-md border border-gray-200 bg-white pt-4 transition-[visibility,opacity] dark:border-neutral-800 dark:bg-noteDark",
+          "mx-auto flex h-fit w-full cursor-pointer flex-col gap-4 rounded-md border border-gray-200 bg-white pt-4 transition-[visibility,opacity,transform] dark:border-neutral-800 dark:bg-noteDark",
           className,
           focused
             ? "drop-shadow-lg dark:drop-shadow-[0_10px_8px_#3a3d41]"
             : "drop-shadow-sm",
-          isEdit ? "invisible opacity-0" : "visible opacity-100"
+          isEdit
+            ? "invisible scale-0 opacity-0"
+            : "visible scale-100 opacity-100"
         )}
         style={style}
         onClick={() => {
@@ -91,83 +79,28 @@ export default function NoteListCard({
           >
             {convertUtcToLocalTime(note.createdAt)}
           </div>
-          <div
-            className={clsx(
-              "flex items-center gap-1 transition-[colors,transform,opacity,visibility] duration-500",
-              focused
-                ? "visible scale-100 opacity-100"
-                : "invisible scale-0 opacity-0"
-            )}
-          >
-            <div
-              title={t("common:COPY")}
-              onClick={(e) => {
-                e.stopPropagation();
-                copyDescription(note.description);
-              }}
-              className={clsx(
-                "flex h-10 w-10 select-none items-center justify-center rounded-full p-2 transition-colors hover:bg-gray-200 active:bg-gray-100 dark:hover:bg-gray-500 dark:active:bg-gray-600",
-                note.description ? "cursor-pointer" : "cursor-not-allowed"
-              )}
-            >
-              <Icon.Copy
-                width="18"
-                height="18"
-                className="fill-black dark:fill-white"
-              />
-            </div>
-            {type === "note" ? (
-              <div
-                title={t("layout:SIDEBAR.TITLE.ARCHIVE")}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  archiveNote(note.id);
-                }}
-                className={clsx(
-                  "flex h-10 w-10 cursor-pointer select-none items-center justify-center rounded-full p-2 transition-colors hover:bg-gray-200 active:bg-gray-100 dark:hover:bg-gray-500 dark:active:bg-gray-600"
-                )}
-              >
-                <Icon.Archive
-                  width="22"
-                  height="22"
-                  className="fill-black dark:fill-white"
-                />
-              </div>
-            ) : (
-              <div
-                title={t("note:UNARCHIVE")}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  unarchiveNote(note.id);
-                }}
-                className={clsx(
-                  "flex h-10 w-10 cursor-pointer select-none items-center justify-center rounded-full p-2 transition-colors hover:bg-gray-200 active:bg-gray-100 dark:hover:bg-gray-500 dark:active:bg-gray-600"
-                )}
-              >
-                <Icon.Unarchive
-                  width="22"
-                  height="22"
-                  className="fill-black dark:fill-white"
-                />
-              </div>
-            )}
-            <div
-              title={t("common:DELETE")}
-              onClick={(e) => {
-                e.stopPropagation();
-                deleteNote(note.id);
-              }}
-              className={clsx(
-                "flex h-10 w-10 cursor-pointer select-none items-center justify-center rounded-full p-2 transition-colors hover:bg-gray-200 active:bg-gray-100 dark:hover:bg-gray-500 dark:active:bg-gray-600"
-              )}
-            >
-              <Icon.Delete
-                width="26"
-                height="26"
-                className="fill-black dark:fill-white"
-              />
-            </div>
-          </div>
+          {type === "note" && (
+            <NoteListCardPanel
+              focused={focused}
+              note={note}
+              copy
+              archive={archiveNote}
+              archiveLoading={isArchiveNoteLoading}
+              softDelete={deleteNote}
+              softDeleteLoading={isDeleteNoteLoading}
+            />
+          )}
+          {type === "archive" && (
+            <NoteListCardPanel
+              focused={focused}
+              note={note}
+              copy
+              unarchive={unarchiveNote}
+              unarchiveLoading={isUnarchiveNoteLoading}
+              softDelete={deleteNote}
+              softDeleteLoading={isDeleteNoteLoading}
+            />
+          )}
         </div>
       </div>
       <EditNoteModal