✨ (stacked note) cache visited note

src/assets/icons/saved.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-floppy" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
+  <circle cx="12" cy="14" r="2" />
+  <polyline points="14 4 14 8 8 8 8 4" />
+</svg>

src/components/StackedNote.vue

@@ -12,6 +12,12 @@
         {{ title }}
       </a>
     </div>
+    <img
+      class="offline-ready"
+      v-if="fromCache"
+      src="@/assets/icons/saved.svg"
+      alt="offline ready"
+    />
     <section v-html="content"></section>
   </div>
 </template>
@@ -33,7 +39,7 @@ export default defineComponent({
     sha: { type: String, required: true }
   },
   setup(props) {
-    const { content } = useFile(props.user, props.repo, props.sha)
+    const { content, fromCache } = useFile(props.user, props.repo, props.sha)
     const { listenToClick } = useLinks('stacked-note', props.sha)
     const { scrollToFocusedNote } = useFocus()
     const className = computed(() => `stacked-note-${props.index}`)
@@ -51,6 +57,7 @@ export default defineComponent({
 
     return {
       content,
+      fromCache,
       titleClassName,
       className,
       displayNoteOverlay,
@@ -77,6 +84,12 @@ $border-color: rgba(18, 19, 58, 0.2);
   }
 }
 
+.offline-ready {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+}
+
 .title-stacked-note {
   position: sticky;
   top: 0;

src/data/DataType.enum.ts

@@ -1,4 +1,5 @@
 export enum DataType {
   GithubAccessToken = 'GithubAccessToken',
-  FavoriteRepo = 'FavoriteRepo'
+  FavoriteRepo = 'FavoriteRepo',
+  Note = 'Note'
 }

src/hooks/useFile.hook.ts

@@ -1,11 +1,13 @@
 import { ref } from 'vue'
-import { request } from '@octokit/request'
 import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
 import { Octokit } from '@octokit/rest'
+import { useNoteCache } from '@/modules/note/hooks/useNoteCache'
 
 export const useFile = (owner: string, repo: string, sha: string) => {
+  const { getCachedNote, saveCacheNote } = useNoteCache(sha)
   const { accessToken } = useGitHubLogin()
+  const fromCache = ref(false)
 
   const octokit = new Octokit({
     auth: accessToken.value
@@ -15,6 +17,15 @@ export const useFile = (owner: string, repo: string, sha: string) => {
 
   const getContent = async () => {
     const { render } = useMarkdown()
+    const cachedNote = await getCachedNote()
+
+    fromCache.value = !!cachedNote
+
+    if (cachedNote) {
+      content.value = render(cachedNote.content)
+      return
+    }
+
     const file = await octokit.request(
       'GET /repos/{owner}/{repo}/git/blobs/{file_sha}',
       {
@@ -27,12 +38,15 @@ export const useFile = (owner: string, repo: string, sha: string) => {
     if (!file) {
       return
     }
+
+    saveCacheNote(file.data.content)
     content.value = render(file.data.content)
   }
 
   getContent()
 
   return {
-    content
+    content,
+    fromCache
   }
 }

src/hooks/useRepos.hook.ts

@@ -1,5 +1,5 @@
 import { Octokit } from '@octokit/rest'
-import { RepoBase } from '@/modules/interfaces/RepoBase'
+import { RepoBase } from '@/modules/repo/interfaces/RepoBase'
 import { useAsyncState } from '@vueuse/core'
 import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
 

src/modules/note/hooks/useNoteCache.ts

@@ -0,0 +1,31 @@
+import { data } from '@/data/data'
+import { DataType } from '@/data/DataType.enum'
+import { Note } from '@/modules/note/models/Note'
+import { useAsyncState } from '@vueuse/core'
+import { computed } from 'vue'
+
+export const useNoteCache = (sha: string) => {
+  const noteId = computed(() => data.generateId(DataType.Note, sha))
+  const getCachedNote = async () => data.get<DataType.Note, Note>(noteId.value)
+
+  const cachedNote = useAsyncState(getCachedNote, null)
+
+  const saveCacheNote = async (content: string) => {
+    const newNote: Note = {
+      _id: noteId.value,
+      $type: DataType.Note,
+      content
+    }
+
+    await data.update(newNote)
+
+    await cachedNote.execute()
+  }
+
+  return {
+    cachedNote: cachedNote.state,
+    isReady: cachedNote.isReady,
+    getCachedNote,
+    saveCacheNote
+  }
+}

src/modules/note/models/Note.ts

@@ -0,0 +1,6 @@
+import { DataType } from '@/data/DataType.enum'
+import { Model } from '@/data/models/Model'
+
+export interface Note extends Model<DataType.Note> {
+  content: string
+}

src/modules/repo/hooks/useFavoriteRepos.hook.ts

@@ -1,8 +1,8 @@
 import { computed, onMounted, ref } from 'vue'
 
 import { DataType } from '@/data/DataType.enum'
-import { FavoriteRepo } from '@/modules/models/FavoriteRepo'
+import { FavoriteRepo } from '@/modules/repo/models/FavoriteRepo'
-import { RepoBase } from '@/modules/interfaces/RepoBase'
+import { RepoBase } from '@/modules/repo/interfaces/RepoBase'
 import { data } from '@/data/data'
 import { useRepos } from '@/hooks/useRepos.hook'
 

src/modules/repo/hooks/useRepoList.hook.ts

@@ -1,4 +1,4 @@
-import { RepoBase } from '@/modules/interfaces/RepoBase'
+import { RepoBase } from '@/modules/repo/interfaces/RepoBase'
 import { computed } from 'vue'
 import { useFavoriteRepos } from '@/modules/repo/hooks/useFavoriteRepos.hook'
 import { useRepos } from '@/hooks/useRepos.hook'

src/views/RepoList.vue

@@ -81,7 +81,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
-import { useRepoList } from '@/modules/repo/hooks/userRepoList.hook'
+import { useRepoList } from '@/modules/repo/hooks/useRepoList.hook'
 import { useRepos } from '@/hooks/useRepos.hook'
 import GoBack from '@/components/GoBack.vue'