Network mode (#63)

* Remove loading icon and unused code, simplify query and mutation logic in DiaryEditor.vue * Remove `networkMode: 'always'` from useQuery in DiaryEditor.vue * Fix initial value of `content` ref in DiaryEditor.vue to an empty object * Remove console.log in DiaryEditor and add debug logs in note service for request re-queueing
swuecho · Dec 28, 2024 · 6e2e0ab · 6e2e0ab
1 parent b708705
commit 6e2e0ab
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 23 deletions.
diff --git a/web/src/components/DiaryEditor.vue b/web/src/components/DiaryEditor.vue
@@ -4,7 +4,6 @@
       <el-tiptap :key="'editor-' + date" :content="content" :extensions="extensions" @onUpdate="debouncedOnUpdate"
         @onInit="onInit"></el-tiptap>
     </div>
-    <Icon v-if="isLoading || isSaving" icon="line-md:loading-alt-loop" />
   </div>
 </template>
 
@@ -29,32 +28,16 @@ import { saveNote, fetchNote } from '@/services/note.ts';
 import { useQueryClient } from '@tanstack/vue-query';
 const queryClient = useQueryClient();
 
-// import axios from '@/axiosConfig.js';
-// const saveNote = async (noteObj) => {
-//   const response = await axios.put(`/api/diary/${props.date}`, noteObj);
-//   // Introduce a 2-second delay
-//   await new Promise(resolve => setTimeout(resolve, 2000));
-//   return response.data;
-// }
-
-// const fetchNote = async () => {
-//   const response = await axios.get(`/api/diary/${props.date}`);
-//   // Introduce a 2-second delay
-//   await new Promise(resolve => setTimeout(resolve, 2000));
-//   return response.data;
-// }
-
 const props = defineProps({
   date: String
 });
 
-
 const extensions = createExtensions();
 
-const content = ref(null);
+const content = ref({});
 const noteJsonRef = ref(null);
 
-const { data: noteData, isLoading } = useQuery({
+const { data: noteData } = useQuery({
   queryKey: ['diaryContent', props.date],
   queryFn: () => fetchNote(props.date),
   // TODO: fix the onError removed from the useQuery issue
@@ -65,7 +48,7 @@ const { data: noteData, isLoading } = useQuery({
     }
     console.error('Error fetching diary:', error);
   },
-  staleTime: 1000 * 60 * 5, // Data is fresh for 5 minutes
+  staleTime: 1000 * 60 * 5,
 });
 
 
@@ -82,10 +65,10 @@ const onInit = async ({ editor }) => {
 };
 
 
-const { mutate: updateNote, isLoading: isSaving } = useMutation({
+const { mutate: updateNote } = useMutation({
   mutationFn: saveNote,
-  onSuccess: (data) => {
-    console.log(data);
+  networkMode: 'always',
+  onSuccess: () => {
     // Invalidate the todoContent query
     // Invalidate the todoContent query
     // Note: queryClient is not defined in this scope. 

diff --git a/web/src/services/note.ts b/web/src/services/note.ts
@@ -73,6 +73,8 @@ const processQueue = async () => {
                                                 request.resolve && request.resolve(response.data);
                                         } else {
                                                 console.error('Request failed with status: ' + response.status);
+                                                console.log('re-queueing request', request);
+
                                                 // Re-queue only the latest state
                                                 requestQueue.push({
                                                         ...request,
@@ -85,6 +87,7 @@ const processQueue = async () => {
                         } catch (error) {
                                 console.error("Request failed", error);
                                 // Re-queue the request
+                                console.log('re-queueing request', request);
                                 requestQueue.push({
                                         ...request,
                                         timestamp: Date.now()
@@ -128,6 +131,13 @@ const axiosRequest = async (url: string, method: 'PUT' | 'GET', data: any) => {
 const wraperApiRequest = async (url: string, method: 'PUT' | 'GET', data: any) => {
         if (navigator.onLine) {
                 axiosRequest(url, method, data);
+                // try {
+                //         axiosRequest(url, method, data);
+
+                // } catch (error) {
+                //         console.error("Request failed", error);
+                //         return enqueueRequest(url, method, data);
+                // }
         }
         else {
                 return enqueueRequest(url, method, data);