WIP: document thumbnail query

ui2/src/features/nodes/apiSlice.ts

@@ -1,3 +1,4 @@
+import {getDefaultHeaders, imageEncode} from "@/utils"
 import {apiSlice} from "@/features/api/slice"
 import type {Paginated, FolderType, NodeType} from "@/types"
 
@@ -25,6 +26,7 @@ export type PaginatedArgs = {
 }
 
 import {PAGINATION_DEFAULT_ITEMS_PER_PAGES} from "@/cconstants"
+import {RootState} from "@/app/types"
 
 export const apiSliceWithNodes = apiSlice.injectEndpoints({
   endpoints: builder => ({
@@ -56,6 +58,33 @@ export const apiSliceWithNodes = apiSlice.injectEndpoints({
       query: folderID => `/folders/${folderID}`,
       providesTags: (_result, _error, arg) => [{type: "Folder", id: arg}]
     }),
+    getDocumentThumbnail: builder.query<string, string>({
+      //@ts-ignore
+      queryFn: async (node_id, queryApi) => {
+        const state = queryApi.getState() as RootState
+        const node = state.nodes.entities[node_id]
+        const thumbnails_url = node.thumbnail_url
+        const headers = getDefaultHeaders()
+
+        if (!thumbnails_url) {
+          return "node does not have thumbnail"
+        }
+        try {
+          const response = await fetch(thumbnails_url, {headers: headers})
+          const resp2 = await response.arrayBuffer()
+          const encodedData = imageEncode(resp2, "image/jpeg")
+          return {data: encodedData}
+        } catch (err) {
+          return {err}
+        }
+
+        return "OK"
+      },
+      transformResponse: (resp: string) => {
+        debugger
+        return resp
+      }
+    }),
     addNewFolder: builder.mutation<NodeType, CreateFolderType>({
       query: folder => ({
         url: "/nodes/",
@@ -100,5 +129,6 @@ export const {
   useAddNewFolderMutation,
   useRenameFolderMutation,
   useUpdateNodeTagsMutation,
-  useDeleteNodesMutation
+  useDeleteNodesMutation,
+  useGetDocumentThumbnailQuery
 } = apiSliceWithNodes

ui2/src/features/nodes/components/Node/Document/Document.tsx

@@ -14,6 +14,7 @@ import classes from "./Document.module.scss"
 import {RootState} from "@/app/types"
 import PanelContext from "@/contexts/PanelContext"
 import {useProtectedJpg} from "@/hooks/protected_image"
+import {useGetDocumentThumbnailQuery} from "@/features/nodes/apiSlice"
 
 type Args = {
   node: NodeType
@@ -26,6 +27,7 @@ export default function Document({node, onClick}: Args) {
     selectSelectedNodeIds(state, mode)
   ) as Array<string>
   const protected_image = useProtectedJpg(node.thumbnail_url)
+  const {data} = useGetDocumentThumbnailQuery(node.id)
   const dispatch = useDispatch()
   const tagNames = node.tags.map(t => t.name)
 

ui2/src/hooks/protected_image.tsx

@@ -1,8 +1,7 @@
 import {useState, useEffect, useRef} from "react"
 import {State} from "@/types"
 import {getDefaultHeaders, getBaseURL} from "@/utils"
-
-type MimeType = "image/jpeg" | "image/svg+xml"
+import {imageEncode} from "@/utils"
 
 function fetch_jpeg(
   url: string | null,
@@ -27,11 +26,11 @@ function fetch_jpeg(
 
     if (res.status === 200) {
       res.arrayBuffer().then(data => {
-        setBase(_imageEncode(data, "image/jpeg"))
+        setBase(imageEncode(data, "image/jpeg"))
         setResult({
           is_loading: false,
           error: null,
-          data: _imageEncode(data, "image/jpeg")
+          data: imageEncode(data, "image/jpeg")
         })
       })
     }
@@ -164,16 +163,3 @@ export const useProtectedJpg = (url: string | null) => {
 
   return result
 }
-
-function _imageEncode(arrayBuffer: ArrayBuffer, mimetype: MimeType) {
-  let bytes = new Uint8Array(arrayBuffer)
-  let binary: string = ""
-
-  for (let i = 0; i < bytes.length; i++) {
-    binary += String.fromCharCode(bytes[i])
-  }
-
-  let b64encoded = window.btoa(binary)
-
-  return "data:" + mimetype + ";base64," + b64encoded
-}

ui2/src/utils.ts

@@ -273,4 +273,19 @@ function reorder<T = number, K = string>({
   return result
 }
 
-export {getCurrentUser, contains_every, reorder}
+type MimeType = "image/jpeg" | "image/svg+xml"
+
+function imageEncode(arrayBuffer: ArrayBuffer, mimetype: MimeType) {
+  let bytes = new Uint8Array(arrayBuffer)
+  let binary: string = ""
+
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i])
+  }
+
+  let b64encoded = window.btoa(binary)
+
+  return "data:" + mimetype + ";base64," + b64encoded
+}
+
+export {getCurrentUser, contains_every, reorder, imageEncode}