-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor DiaryEditor.vue: Replace
loading with loadingRef, rename… (
#61) * Refactor DiaryEditor.vue: Replace `loading` with `loadingRef`, rename `json` to `noteJsonRef`, and simplify initialization logic using `useQuery`. * before switch fetchNote and saveNote * works * works * Remove idb dependency and related files Deleted the idb package and all related files from the node_modules directory. This removes the IndexedDB wrapper library that was previously installed as a dependency. The package.json file was also deleted as it only contained the idb dependency.
- Loading branch information
Showing
6 changed files
with
220 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| // services/api.ts | ||
| import axios from '../axiosConfig.js'; | ||
|
|
||
| import { openDB, DBSchema, IDBPDatabase } from 'idb'; | ||
| import type { DiaryEntry, QueuedRequest } from '../types.ts'; | ||
|
|
||
| interface MyDB extends DBSchema { | ||
| notes: { | ||
| key: string; | ||
| value: DiaryEntry; | ||
| indexes: { 'noteId': string } | ||
| } | ||
| } | ||
|
|
||
| let db: IDBPDatabase<MyDB> | null = null; | ||
|
|
||
| const DB_NAME = 'logbook-db'; | ||
|
|
||
| const openDatabase = async () => { | ||
| if (db) return db; | ||
| db = await openDB<MyDB>(DB_NAME, 1, { | ||
| upgrade(db) { | ||
| db.createObjectStore('notes', { keyPath: 'noteId' }) | ||
| } | ||
| }); | ||
| return db; | ||
| } | ||
|
|
||
| const requestQueue: QueuedRequest[] = []; | ||
| let isSyncing = false; | ||
|
|
||
| // Function to process request queue | ||
| const processQueue = async () => { | ||
| if (isSyncing || !navigator.onLine) { | ||
| return; // syncing process or offline, wait | ||
| } | ||
|
|
||
| isSyncing = true; | ||
|
|
||
| while (requestQueue.length > 0) { | ||
| const request = requestQueue.shift(); | ||
| if (!request) continue; | ||
|
|
||
| try { | ||
| const response = await axios({ | ||
| url: request.url, | ||
| method: request.method, | ||
| data: request.data | ||
| }) | ||
| if (response.status >= 200 && response.status < 300) { | ||
| request.resolve && request.resolve(response.data) | ||
| } else { | ||
| console.error('request failed with status: ' + response.status) | ||
| requestQueue.unshift(request); // push back into the queue | ||
| request.reject && request.reject('request failed'); | ||
| break; | ||
| } | ||
| } | ||
| catch (error) { | ||
| console.error("request failed", error) | ||
| requestQueue.unshift(request); | ||
| request.reject && request.reject('request failed'); | ||
| break; | ||
| } | ||
| } | ||
|
|
||
| isSyncing = false; | ||
| if (requestQueue.length > 0) { | ||
| // if there are requests left, retry after a short delay | ||
| setTimeout(processQueue, 1000) | ||
| } | ||
| }; | ||
|
|
||
|
|
||
| const enqueueRequest = (url: string, method: 'PUT' | 'GET', data: any): Promise<any> => { | ||
| return new Promise((resolve, reject) => { | ||
| requestQueue.push({ url, method, data, resolve, reject }); | ||
| processQueue(); | ||
| }); | ||
|
|
||
| }; | ||
|
|
||
| const apiRequest = async (url: string, method: 'PUT' | 'GET', data: any) => { | ||
| if (navigator.onLine) { | ||
| // if online go straight to the network | ||
| try { | ||
| const response = await axios({ url, method, data }); | ||
| return response.data | ||
| } | ||
| catch (error) { | ||
| throw error | ||
| } | ||
| } | ||
| else { | ||
| return enqueueRequest(url, method, data); | ||
| } | ||
| }; | ||
|
|
||
|
|
||
| const saveNote = async (note: DiaryEntry) => { | ||
| const db = await openDatabase() | ||
| console.log("saving note", note); | ||
| await db.put('notes', note); | ||
|
|
||
| // if user online, immediately save to the server | ||
| return apiRequest(`/api/diary/${note.noteId}`, 'PUT', note); | ||
| }; | ||
|
|
||
| const fetchNote = async (noteId: string): Promise<DiaryEntry | undefined> => { | ||
| console.log("fetching note", noteId); | ||
| const db = await openDatabase(); | ||
| let cachedNote = await db.get('notes', noteId); | ||
| if (navigator.onLine) { | ||
| try { | ||
| const response = await apiRequest(`/api/diary/${noteId}`, 'GET', null); | ||
| if (response) { | ||
| cachedNote = response; | ||
| db.put('notes', response); | ||
| } | ||
| } catch (error) { | ||
| console.log("fetch note failed, using local", error); | ||
| } | ||
| } | ||
| return cachedNote | ||
| }; | ||
|
|
||
| window.addEventListener('online', () => { | ||
| processQueue(); //process the queue on network status change | ||
| }); | ||
|
|
||
| export { saveNote, fetchNote }; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| // types.ts | ||
| export interface DiaryEntry { | ||
| noteId: string; | ||
| note: string; | ||
| } | ||
| export interface QueuedRequest { | ||
| url: string; | ||
| method: 'PUT' | 'GET'; | ||
| data: any; | ||
| resolve?: (value: any) => void; | ||
| reject?: (reason?: any) => void; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. | ||
| # yarn lockfile v1 | ||
|
|
||
|
|
||
| idb@^8.0.1: | ||
| version "8.0.1" | ||
| resolved "https://registry.yarnpkg.com/idb/-/idb-8.0.1.tgz#15e8be673413d6caf4beefacf086c8902d785e1e" | ||
| integrity sha512-EkBCzUZSdhJV8PxMSbeEV//xguVKZu9hZZulM+2gHXI0t2hGVU3eYE6/XnH77DS6FM2FY8wl17aDcu9vXpvLWQ== |