uploader: work in progress

ui2/src/components/modals/DropFiles.tsx

@@ -6,8 +6,8 @@ import GenericModal from "@/components/modals/Generic"
 import Error from "@/components/modals/Error"
 import type {NodeType, FolderType} from "@/types"
 import {MODALS} from "@/cconstants"
-import axios, {AxiosError} from "axios"
 import {store} from "@/app/store"
+import {uploadFile} from "@/slices/uploader"
 
 type Args = {
   source_files: File[]
@@ -23,6 +23,16 @@ const DropFilesModal = ({source_files, target, onOK, onCancel}: Args) => {
   const target_title = target.title
 
   const handleSubmit = async (signal: AbortSignal) => {
+    for (let i = 0; i < source_files.length; i++) {
+      store.dispatch(
+        uploadFile({
+          file: source_files[i],
+          refreshTarget: true,
+          skipOCR: true,
+          target
+        })
+      )
+    }
     return true
   }
 

ui2/src/main.tsx

@@ -5,7 +5,7 @@ import {RouterProvider} from "react-router-dom"
 import {MantineProvider} from "@mantine/core"
 
 import "@/index.css"
-import {store} from "@/app/store.ts"
+import {store} from "@/app/store"
 import {fetchCurrentUser} from "@/slices/currentUser"
 import {fetchTags} from "@/slices/tags"
 

ui2/src/slices/currentUser.ts

@@ -1,6 +1,8 @@
-import {createSlice, createAsyncThunk} from "@reduxjs/toolkit"
+import {createSlice, createAsyncThunk, PayloadAction} from "@reduxjs/toolkit"
 import axios from "@/httpClient"
-import type {SliceState, User} from "@/types"
+import type {SliceState, User, UserDetails} from "@/types"
+import {store} from "@/app/store"
+import {storeHomeNode, storeInboxNode} from "./dualPanel/dualPanel"
 
 const initialState: SliceState<User> = {
   data: null,
@@ -12,8 +14,21 @@ export const fetchCurrentUser = createAsyncThunk(
   "user/fetchCurrentUser",
   async () => {
     const response = await axios.get("/api/users/me")
+    const userDetails = response.data as UserDetails
+    store.dispatch(
+      storeHomeNode({
+        folder_id: userDetails.home_folder_id,
+        user_id: userDetails.id
+      })
+    )
+    store.dispatch(
+      storeInboxNode({
+        folder_id: userDetails.home_folder_id,
+        user_id: userDetails.id
+      })
+    )
 
-    return response.data
+    return userDetails
   }
 )
 
@@ -26,10 +41,13 @@ const currentUserSlice = createSlice({
       .addCase(fetchCurrentUser.pending, state => {
         state.status = "loading"
       })
-      .addCase(fetchCurrentUser.fulfilled, (state, action) => {
-        state.status = "succeeded"
-        state.data = action.payload
-      })
+      .addCase(
+        fetchCurrentUser.fulfilled,
+        (state, action: PayloadAction<UserDetails>) => {
+          state.status = "succeeded"
+          state.data = action.payload
+        }
+      )
       .addCase(fetchCurrentUser.rejected, (state, action) => {
         state.status = "failed"
         const message =

ui2/src/slices/dualPanel/dualPanel.ts

@@ -99,11 +99,52 @@ export const deleteNodes = createAsyncThunk<string[], string[]>(
     return nodeIds
   }
 )
+type StoreNodeInput = {
+  folder_id: string
+  user_id: string
+}
 
 const dualPanelSlice = createSlice({
   name: "dualPanel",
   initialState,
   reducers: {
+    storeHomeNode(state, action: PayloadAction<StoreNodeInput>) {
+      const node: NodeType = {
+        id: action.payload.folder_id,
+        ctype: "folder",
+        title: ".home",
+        breadcrumb: [],
+        tags: [],
+        user_id: action.payload.user_id,
+        update_at: "",
+        ocr_status: "UNKNOWN",
+        ocr: false,
+        parent_id: null,
+        thumbnail_url: null,
+        accept_dropped_nodes: false,
+        is_currently_dragged: false
+      }
+      state.nodes.push(node)
+    },
+    storeInboxNode(state, action: PayloadAction<StoreNodeInput>) {
+      const node: NodeType = {
+        id: action.payload.folder_id,
+        ctype: "folder",
+        title: ".inbox",
+        breadcrumb: [],
+        tags: [],
+        user_id: action.payload.user_id,
+        update_at: "",
+        ocr_status: "UNKNOWN",
+        ocr: false,
+        parent_id: null,
+        thumbnail_url: null,
+        accept_dropped_nodes: false,
+        is_currently_dragged: false
+      }
+      state.nodes.push(node)
+    },
+
     setCurrentNode(state, action: PayloadAction<SetCurrentNodeArgs>) {
       setCurrentNodeHelper({
         state,
@@ -234,7 +275,9 @@ export const {
   closeSecondaryPanel,
   selectionAddNode,
   selectionRemoveNode,
-  clearNodesSelection
+  clearNodesSelection,
+  storeHomeNode,
+  storeInboxNode
 } = dualPanelSlice.actions
 
 export default dualPanelSlice.reducer

ui2/src/slices/uploader/index.ts

@@ -1,5 +1,12 @@
 import uploaderReducer from "./uploader"
 import {selectOpened, selectFiles} from "./uploader"
-import {openUploader, closeUploader} from "./uploader"
+import {openUploader, closeUploader, uploadFile} from "./uploader"
 
-export {uploaderReducer, selectOpened, selectFiles, openUploader, closeUploader}
+export {
+  uploaderReducer,
+  selectOpened,
+  selectFiles,
+  openUploader,
+  closeUploader,
+  uploadFile
+}

ui2/src/slices/uploader/uploader.ts

@@ -1,12 +1,9 @@
-import {
-  createSlice,
-  createAsyncThunk,
-  createEntityAdapter,
-  PayloadAction
-} from "@reduxjs/toolkit"
+import {createSlice, createAsyncThunk, PayloadAction} from "@reduxjs/toolkit"
 
+import axios from "axios"
 import {RootState} from "@/app/types"
-import type {FolderType, FileItemType} from "@/types"
+import type {FolderType, FileItemType, NodeType} from "@/types"
+import {getBaseURL, getDefaultHeaders} from "@/utils"
 
 export type UploaderState = {
   opened: boolean
@@ -43,3 +40,49 @@ export const selectOpened = (state: RootState): boolean => state.uploader.opened
 
 export const selectFiles = (state: RootState): Array<FileItemType> =>
   state.uploader.files
+
+type UploadFileInput = {
+  file: File
+  refreshTarget: boolean
+  target: FolderType
+  skipOCR: boolean
+}
+
+type CreateDocumentType = {
+  title: string
+  parent_id: string
+  ctype: "document"
+  ocr: boolean
+}
+
+export const uploadFile = createAsyncThunk<NodeType, UploadFileInput>(
+  "group/fetchGroupDetails",
+  async (args: UploadFileInput) => {
+    const baseUrl = getBaseURL()
+    let defaultHeaders = getDefaultHeaders()
+    const data1: CreateDocumentType = {
+      title: args.file.name,
+      parent_id: args.target.id,
+      ctype: "document",
+      ocr: !args.skipOCR
+    }
+
+    const response1 = await axios.post(`${baseUrl}api/nodes/`, data1, {
+      headers: defaultHeaders
+    })
+    const createdNode = response1.data as NodeType
+    const form_data = new FormData()
+
+    form_data.append("file", args.file)
+
+    defaultHeaders["Content-Type"] = "multipart/form-data"
+
+    const response2 = await axios.post(
+      `${baseUrl}api/documents/${createdNode.id}/upload`,
+      form_data,
+      {headers: defaultHeaders}
+    )
+
+    return createdNode
+  }
+)