Merge remote-tracking branch 'origin/master' into develop

Author: guesung

chrome-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-extension",
-  "version": "1.5.2",
+  "version": "1.5.5",
   "description": "chrome extension",
   "scripts": {
     "clean": "rimraf ../../dist",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-memo",
-  "version": "1.5.2",
+  "version": "1.5.5",
   "description": "Web Memo - Chrome Extension",
   "bugs": "https://github.com/guesung/Web-Memo/issues",
   "homepage": "https://web-memos.vercel.app",

packages/dev-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/dev-utils",
-  "version": "1.5.2",
+  "version": "1.5.5",
   "description": "chrome extension dev utils",
   "private": true,
   "sideEffects": false,

packages/hmr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/hmr",
-  "version": "1.5.2",
+  "version": "1.5.5",
   "description": "chrome extension hot module reload or refresh",
   "private": true,
   "sideEffects": true,

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/shared",
-  "version": "1.5.2",
+  "version": "1.5.5",
   "description": "chrome extension shared code",
   "private": true,
   "sideEffects": false,

packages/shared/src/hooks/useMemoPostMutation.ts

@@ -1,4 +1,4 @@
-import { queryKeys } from '@src/constants';
+import { NoMemoListError, queryKeys } from '@src/constants';
 import { MemoSupabaseClient, MemoSupabaseResponse, MemoTableInsert } from '@src/types';
 import { insertMemo } from '@src/utils';
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query';
@@ -19,9 +19,24 @@ export default function useMemoPostMutation({
   return useMutation<MemoSupabaseResponse, Error, PostMemoProps>({
     ...useMutationProps,
     mutationFn: async (postMemoProps: PostMemoProps) => await insertMemo(supabaseClient, postMemoProps),
-    onSuccess: async () => {
-      queryClient.invalidateQueries({ queryKey: queryKeys.memoList() });
+    onSuccess: async ({ data: newData }) => {
+      await queryClient.cancelQueries({ queryKey: queryKeys.memoList() });
+
+      const previousMemoList = queryClient.getQueryData<MemoSupabaseResponse>(queryKeys.memoList());
+
+      if (!previousMemoList || !newData) throw new NoMemoListError();
+
+      const { data: previousMemoListData } = previousMemoList;
+
+      if (!previousMemoListData) throw new NoMemoListError();
+
+      const newMemoListData = previousMemoListData.concat(newData);
+
+      await queryClient.setQueryData(queryKeys.memoList(), { ...previousMemoList, data: newMemoListData });
+
       handleSuccess();
+
+      return { previousMemoList };
     },
   });
 }

packages/shared/src/hooks/useMemoQuery.ts

@@ -1,6 +1,6 @@
 import { queryKeys } from '@src/constants';
 import { MemoSupabaseClient, MemoSupabaseResponse } from '@src/types';
-import { getMemoSupabase } from '@src/utils';
+import { formatUrl, getMemoSupabase } from '@src/utils';
 import { useQuery } from '@tanstack/react-query';
 
 interface UseMemoQueryProps {
@@ -14,7 +14,7 @@ export default function useMemoQuery({ supabaseClient, url }: UseMemoQueryProps)
     queryKey: queryKeys.memoList(),
     enabled: !!supabaseClient,
     select: ({ data: memoList }: MemoSupabaseResponse) => {
-      const currentMemo = memoList?.find(memo => memo.url === url);
+      const currentMemo = memoList?.find(memo => memo.url === formatUrl(url));
       return currentMemo;
     },
   });

packages/storage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/storage",
-  "version": "1.5.2",
+  "version": "1.5.5",
   "description": "chrome extension storage",
   "private": true,
   "sideEffects": false,

packages/tailwind-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/tailwindcss-config",
-  "version": "1.5.2",
+  "version": "1.5.5",
   "description": "Tailwind CSS configuration for boilerplate",
   "main": "./tailwind.config.js",
   "private": true,

packages/tsconfig/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/tsconfig",
-  "version": "1.5.2",
+  "version": "1.5.5",
   "description": "tsconfig for chrome extension",
   "private": true
 }