Merge pull request #2 from recallwei/dev

Release v1.0.1
taskward · Sep 4, 2022 · 3f4af8b · 3f4af8b · vercel · Sep 4, 2022
2 parents 9facbb7 + e06ab51
commit 3f4af8b
Show file tree

Hide file tree

Showing 16 changed files with 52 additions and 66 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## v1.1.0
+
+### v1.0.1
+
+- Fix Firefox compatibility.
+- Fix edit archived note error.
+
 ## v1.0.0
 
 - Note, Archive, and Trash features have been released.

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -56,7 +56,7 @@ export default function Modal({
       <div
         ref={outsideClickRef}
         className={clsx(
-          "z-[55] mt-20 mb-auto max-h-[520px] rounded-md bg-white p-4 shadow-lg transition-[transform,visibility,opacity] dark:bg-gray-700 sm:mx-auto",
+          "z-[55] mt-20 mb-auto max-h-[520px] overflow-y-auto rounded-md bg-white p-4 shadow-lg transition-[transform,visibility,opacity] dark:bg-gray-700 sm:mx-auto",
           styles.modalWrapper,
           show
             ? "visible scale-100 opacity-100"

diff --git a/src/components/Modal/styles.module.css b/src/components/Modal/styles.module.css
@@ -1,4 +1,3 @@
 .modalWrapper {
-  overflow-y: overlay;
   @apply w-full sm:w-[396px] md:w-[475px] lg:w-[633px];
 }
diff --git a/src/components/NoteListCard/EditNoteModal/index.tsx b/src/components/NoteListCard/EditNoteModal/index.tsx
@@ -6,7 +6,12 @@ import clsx from "clsx";
 
 import styles from "./styles.module.css";
 
-import { Note, type EditNoteFormData, EditNoteFormSchema } from "@interfaces";
+import {
+  Note,
+  type EditNoteFormData,
+  EditNoteFormSchema,
+  NoteType,
+} from "@interfaces";
 import { Icon, Modal } from "@components";
 import {
   convertUtcToLocalTime,
@@ -19,17 +24,19 @@ type EditNoteModalProps = {
   isEdit: boolean;
   toggle: () => void;
   note: Note;
+  type?: NoteType;
 };
 
 export default function EditNoteModal({
   isEdit,
   toggle,
   note,
+  type,
 }: EditNoteModalProps): JSX.Element {
   const { t } = useTranslation(["common", "note"]);
 
   const { mutateAsync: updateNoteAsync, isLoading: isUpdateNoteLoading } =
-    useUpdateNoteRequest();
+    useUpdateNoteRequest(type);
 
   const { handleSubmit, setValue, reset } = useForm<EditNoteFormData>({
     defaultValues: {
@@ -82,8 +89,7 @@ export default function EditNoteModal({
       </div>
       <form
         className={clsx(
-          "flex max-h-[420px] flex-col gap-4 px-4",
-          styles.formScrollbar
+          "flex max-h-[420px] flex-col gap-4 overflow-y-auto px-4"
         )}
         key={`${isEdit}`}
       >

diff --git a/src/components/NoteListCard/EditNoteModal/styles.module.css b/src/components/NoteListCard/EditNoteModal/styles.module.css
@@ -5,7 +5,3 @@
 .textarea p {
   margin: 0;
 }
-
-.formScrollbar {
-  overflow-y: overlay;
-}
diff --git a/src/components/NoteListCard/index.tsx b/src/components/NoteListCard/index.tsx
@@ -21,7 +21,7 @@ import EditNoteModal from "./EditNoteModal";
 
 export default function NoteListCard({
   note,
-  type = "note",
+  type,
   className,
   style,
 }: NoteListCardProps): JSX.Element | null {
@@ -170,7 +170,12 @@ export default function NoteListCard({
           </div>
         </div>
       </div>
-      <EditNoteModal isEdit={isEdit} toggle={toggleEdit} note={note} />
+      <EditNoteModal
+        isEdit={isEdit}
+        toggle={toggleEdit}
+        note={note}
+        type={type}
+      />
     </>
   );
 }
diff --git a/src/interfaces/components.ts b/src/interfaces/components.ts
@@ -64,9 +64,11 @@ interface LoadingProperties {
 type LoadingProps = Partial<LoadingProperties> & CustomComponentProps;
 
 // Note
+type NoteType = "note" | "archive" | "trash";
+
 interface NoteListCardProperties {
   note: Note;
-  type: "note" | "archive";
+  type: NoteType;
 }
 
 type Note = {
@@ -130,6 +132,7 @@ export type {
   GitHubButtonProps,
   NotificationProps,
   LoadingProps,
+  NoteType,
   NoteListCardProps,
   Note,
   NotesResult,

diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
@@ -5,6 +5,7 @@ export type {
   GitHubButtonProps,
   NotificationProps,
   LoadingProps,
+  NoteType,
   NoteListCardProps,
   Note,
   NotesResult,

diff --git a/src/pages/Archive/index.tsx b/src/pages/Archive/index.tsx
@@ -13,11 +13,8 @@ export default function Archive(): JSX.Element {
   const { t, i18n } = useTranslation(["common", "layout"]);
   const sidebarDispatch = useAppDispatch();
 
-  const {
-    data: notesData,
-    isLoading: isGetArchiveNotesLoading,
-    isRefetching: isGetArchiveNotesRefetching,
-  } = useGetArchiveNotesRequest();
+  const { data: notesData, isLoading: isGetArchiveNotesLoading } =
+    useGetArchiveNotesRequest();
 
   useEffect(() => {
     document.title = getDocumentTitle(t("layout:SIDEBAR.TITLE.ARCHIVE"));
@@ -30,12 +27,7 @@ export default function Archive(): JSX.Element {
   }, []);
 
   return (
-    <div
-      className={clsx(
-        "relative flex h-full w-auto flex-col overflow-y-scroll",
-        styles.scrollbar
-      )}
-    >
+    <div className="relative flex h-full w-auto flex-col overflow-y-auto">
       <div className="mx-auto mb-80 mt-4 w-full p-4">
         {isGetArchiveNotesLoading ? (
           <Loading />

diff --git a/src/pages/Archive/styles.module.css b/src/pages/Archive/styles.module.css
@@ -1,7 +1,3 @@
-.scrollbar {
-  overflow: overlay;
-}
-
 .contentWrapper {
   @apply w-full sm:w-[396px] md:w-[475px] lg:w-[633px];
 }
diff --git a/src/pages/Note/index.tsx b/src/pages/Note/index.tsx
@@ -13,11 +13,8 @@ export default function Note(): JSX.Element {
   const { t, i18n } = useTranslation(["common", "layout", "note"]);
   const sidebarDispatch = useAppDispatch();
 
-  const {
-    data: notesData,
-    isLoading: isGetNotesLoading,
-    isRefetching: isGetNotesRefetching,
-  } = useGetNotesRequest();
+  const { data: notesData, isLoading: isGetNotesLoading } =
+    useGetNotesRequest();
 
   useEffect(() => {
     document.title = getDocumentTitle(t("layout:SIDEBAR.TITLE.NOTE"));
@@ -30,12 +27,7 @@ export default function Note(): JSX.Element {
   }, []);
 
   return (
-    <div
-      className={clsx(
-        "relative flex h-full w-auto flex-col overflow-y-scroll",
-        styles.scrollbar
-      )}
-    >
+    <div className="relative flex h-full w-auto flex-col overflow-y-auto">
       <div className="mx-auto mb-80 flex w-full flex-col gap-4 p-4">
         <NoteCreator className={styles.contentWrapper} />
         {isGetNotesLoading ? (
@@ -47,7 +39,7 @@ export default function Note(): JSX.Element {
               styles.contentWrapper
             )}
           >
-            <div className="text-[0.5rem] font-medium dark:text-noteSecondTextDark">
+            <div className="text-xs font-medium dark:text-noteSecondTextDark">
               {notesData?.count && notesData.count > 0 ? (
                 <>{t("note:NOTE.COUNT", { count: notesData.count })} 🎉</>
               ) : (
@@ -56,7 +48,7 @@ export default function Note(): JSX.Element {
             </div>
 
             {notesData?.notes.map((note) => {
-              return <NoteListCard key={note.id} note={note} />;
+              return <NoteListCard key={note.id} note={note} type="note" />;
             })}
           </div>
         )}

diff --git a/src/pages/Note/styles.module.css b/src/pages/Note/styles.module.css
@@ -1,7 +1,3 @@
-.scrollbar {
-  overflow: overlay;
-}
-
 .contentWrapper {
   @apply w-full sm:w-[396px] md:w-[475px] lg:w-[633px];
 }
diff --git a/src/pages/Trash/index.tsx b/src/pages/Trash/index.tsx
@@ -13,11 +13,8 @@ export default function Trash(): JSX.Element {
   const { t, i18n } = useTranslation(["common", "layout"]);
   const sidebarDispatch = useAppDispatch();
 
-  const {
-    data: trashNotesData,
-    isLoading: isGetTrashNotesLoading,
-    isRefetching: isGetTrashNotesRefetching,
-  } = useGetTrashNotesRequest();
+  const { data: trashNotesData, isLoading: isGetTrashNotesLoading } =
+    useGetTrashNotesRequest();
 
   useEffect(() => {
     document.title = getDocumentTitle(t("layout:SIDEBAR.TITLE.TRASH"));
@@ -30,12 +27,7 @@ export default function Trash(): JSX.Element {
   }, []);
 
   return (
-    <div
-      className={clsx(
-        "relative flex h-full w-auto flex-col overflow-y-scroll",
-        styles.scrollbar
-      )}
-    >
+    <div className="relative flex h-full w-auto flex-col overflow-y-auto">
       {isGetTrashNotesLoading ? (
         <div className="h-screen">
           <Loading />

diff --git a/src/pages/Trash/styles.module.css b/src/pages/Trash/styles.module.css
@@ -1,7 +1,3 @@
-.scrollbar {
-  overflow: overlay;
-}
-
 .contentWrapper {
   @apply w-full sm:w-[396px] md:w-[475px] lg:w-[633px];
 }
diff --git a/src/requests/api/notes/useDeleteNoteRequest.ts b/src/requests/api/notes/useDeleteNoteRequest.ts
@@ -1,9 +1,9 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { axiosService, NOTES_KEY, ARCHIVE_KEY, TRASH_KEY } from "@requests";
 
-type NoteType = "note" | "archive";
+import { axiosService, NOTES_KEY, ARCHIVE_KEY, TRASH_KEY } from "@requests";
+import { NoteType } from "@interfaces";
 
-const useDeleteNoteRequest = (type: NoteType) => {
+const useDeleteNoteRequest = (type?: NoteType) => {
   const queryClient = useQueryClient();
   const { mutate, mutateAsync, isLoading, isSuccess, isError } = useMutation(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

diff --git a/src/requests/api/notes/useUpdateNoteRequest.ts b/src/requests/api/notes/useUpdateNoteRequest.ts
@@ -1,9 +1,10 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { axiosService, NOTES_KEY } from "@requests";
+import { axiosService, NOTES_KEY, ARCHIVE_KEY } from "@requests";
 
 import { EditNoteFormData } from "@interfaces";
+import { NoteType } from "@interfaces";
 
-const useUpdateNoteRequest = () => {
+const useUpdateNoteRequest = (type?: NoteType) => {
   const queryClient = useQueryClient();
   const { mutate, mutateAsync, isLoading, isSuccess, isError } = useMutation(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -17,7 +18,11 @@ const useUpdateNoteRequest = () => {
     },
     {
       onSuccess: () => {
-        return queryClient.invalidateQueries([NOTES_KEY]);
+        if (type === "note") {
+          return queryClient.invalidateQueries([NOTES_KEY]);
+        } else if (type === "archive") {
+          return queryClient.invalidateQueries([ARCHIVE_KEY]);
+        }
       },
     }
   );