fix: cannot paste image, delete image, set default cover as opening t…

…ask detail (#171)
hudy9x · May 2, 2024 · c5df8d8 · c5df8d8
1 parent 0dfd996
commit c5df8d8
Show file tree

Hide file tree

Showing 12 changed files with 118 additions and 70 deletions.
diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/TaskUpdate2.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/TaskUpdate2.tsx
@@ -31,7 +31,7 @@ function TaskUpdateModal({
   }}>
     <Dialog.Portal>
       <Dialog.Content size='lg'>
-        <FileKitContainer fileIds={task.fileIds}>
+        <FileKitContainer taskId={id} fileIds={task.fileIds}>
           <TaskDetail
             id={id || ''}
             cover={task.cover || ''}
@@ -146,6 +146,7 @@ export const TaskUpdate2 = () => {
     const currentTask = tasks.find(task => task.id === taskId)
     refCurrentTask.current = currentTask
 
+    console.log('update current Task')
     if (currentTask) {
       setCurrentTask({
         title: currentTask?.title || defaultFormikValues.title,
@@ -177,6 +178,8 @@ export const TaskUpdate2 = () => {
     }
   }, [taskId, tasks])
 
+  console.log('currentTask', currentTask.fileIds)
+
 
   return <TaskUpdateModal
     id={taskId}

diff --git a/packages/ui-app/app/_components/FileKits/FileDelete.tsx b/packages/ui-app/app/_components/FileKits/FileDelete.tsx
@@ -6,13 +6,13 @@ import { useTaskStore } from '@/store/task'
 import { useUser } from '@goalie/nextjs'
 
 export default function FileDelete({ id }: { id: string }) {
-  const { previewFiles, setPreviewFiles } = useFileKitContext()
+  const { previewFiles, setPreviewFiles, taskId } = useFileKitContext()
 
   const { user } = useUser()
   const { updateTask } = useTaskStore()
   const { projectId, orgID } = useParams()
-  const sp = useSearchParams()
-  const taskId = sp.get('taskId')
+  // const sp = useSearchParams()
+  // const taskId = sp.get('taskId')
 
   const doDelete = () => {
     if (!taskId || !id) {
@@ -30,6 +30,8 @@ export default function FileDelete({ id }: { id: string }) {
       }
     })
 
+    console.log('previewFiles', remainFileIds, remainFileItems)
+
     setPreviewFiles(remainFileItems)
 
     updateTask({
@@ -51,12 +53,12 @@ export default function FileDelete({ id }: { id: string }) {
   }
 
   const onDeleteHandler = () => {
-    // confirmAlert({
-    //   message: 'Are you sure you want to delete this file ?',
-    //   yes: () => {
-    doDelete()
-    //   }
-    // })
+    confirmAlert({
+      message: 'Are you sure you want to delete this file ?',
+      yes: () => {
+        doDelete()
+      }
+    })
   }
 
   return <Button title="Delete" size="sm" onClick={onDeleteHandler} />

diff --git a/packages/ui-app/app/_components/FileKits/FileDesc.tsx b/packages/ui-app/app/_components/FileKits/FileDesc.tsx
@@ -3,7 +3,7 @@ import { AiOutlineCloudUpload } from 'react-icons/ai'
 export default function FileDesc({ inputId }: { inputId: string }) {
   return (
     <div className="file-area-desc">
-      <AiOutlineCloudUpload className="w-8 h-8 shadow-sm border rounded-md bg-white p-1.5 text-gray-500" />
+      <AiOutlineCloudUpload className="w-8 h-8 shadow-sm border rounded-md bg-white dark:bg-gray-800 dark:border-gray-700 p-1.5 text-gray-500" />
       <p className="text-center">
         <label
           className="underline cursor-pointer hover:text-gray-600"

diff --git a/packages/ui-app/app/_components/FileKits/FileItem.tsx b/packages/ui-app/app/_components/FileKits/FileItem.tsx
@@ -1,6 +1,6 @@
-import { Button, Loading, messageSuccess } from '@shared/ui'
+import { Button, Loading, messageSuccess, messageWarning } from '@shared/ui'
 import FileThumb from './FileThumb'
-import { IFileItem, isImage } from './context'
+import { IFileItem, isImage, useFileKitContext } from './context'
 import FileDelete from './FileDelete'
 import { format, formatDistanceToNow } from 'date-fns'
 import { useParams, useSearchParams } from 'next/navigation'
@@ -9,8 +9,9 @@ import { useTaskStore } from '@/store/task'
 
 export default function FileItem({ data }: { data: IFileItem }) {
   const { name, url, ext, mimeType, uploading, id, createdAt } = data
-  const sp = useSearchParams()
-  const taskId = sp.get('taskId')
+  const { taskId } = useFileKitContext()
+  // const sp = useSearchParams()
+  // const taskId = sp.get('taskId')
   const { projectId } = useParams()
   const { updateTask } = useTaskStore()
 
@@ -20,7 +21,10 @@ export default function FileItem({ data }: { data: IFileItem }) {
   const createdTime = createdAt ? format(new Date(createdAt), 'HH:mm') : null
 
   const makeThisCover = () => {
-    if (!taskId) return
+    if (!taskId) {
+      messageWarning('Can not turn this to cover => TaskId not found')
+      return
+    }
 
     updateTask({
       id: taskId,

diff --git a/packages/ui-app/app/_components/FileKits/FileList.tsx b/packages/ui-app/app/_components/FileKits/FileList.tsx
@@ -2,37 +2,62 @@ import { Button } from '@shared/ui'
 import FileItem from './FileItem'
 import { IFileItem } from './context'
 import { useState } from 'react'
+import useFileUpload from './useFileUpload'
 
 export default function FileList({ files }: { files: IFileItem[] }) {
+  const { onFileHandler } = useFileUpload()
   const [viewMore, setViewMore] = useState(false)
   const n = 3
   const sliced = files.slice(n)
   const onViewMore = () => {
     setViewMore(!viewMore)
   }
+  const onInputChange = (files: FileList) => {
+    onFileHandler(files)
+  }
+
+
   return (
     <div className="space-y-2">
-      {files.slice(0, n).map((file, id) => {
-        return <FileItem key={id} data={file} />
-      })}
+      <div className='space-y-2'>
+        {files.slice(0, n).map((file, id) => {
+          return <FileItem key={id} data={file} />
+        })}
 
-      {viewMore
-        ? sliced.map(file => {
+        {viewMore
+          ? sliced.map(file => {
             return <FileItem key={file.id || file.randId} data={file} />
           })
-        : null}
+          : null}
+      </div>
+
+      <div className='flex items-center gap-2'>
 
-      {sliced.length ? (
-        <Button
-          size="sm"
-          onClick={onViewMore}
-          title={
-            viewMore
-              ? `Hide ${sliced.length} file`
-              : `View ${sliced.length} file more`
-          }
-        />
-      ) : null}
+        {sliced.length ? (
+          <Button
+            size="sm"
+            onClick={onViewMore}
+            title={
+              viewMore
+                ? `Hide ${sliced.length} file`
+                : `View ${sliced.length} file more`
+            }
+          />
+        ) : null}
+        <div>
+          <label className='btn sm cursor-pointer' style={{ margin: 0 }} htmlFor='upload-more'>Add new file</label>
+          <input
+            id={'upload-more'}
+            multiple
+            className="hidden"
+            type="file"
+            onChange={ev => {
+              const files = ev.target.files
+              files && files.length && onInputChange(files)
+            }}
+          />
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/packages/ui-app/app/_components/FileKits/FilePaste.tsx b/packages/ui-app/app/_components/FileKits/FilePaste.tsx
@@ -1,23 +1,25 @@
 import { messageSuccess } from '@shared/ui'
 import { useEffect } from 'react'
 import useFileUpload from './useFileUpload'
+import { useFileKitContext } from './context'
 
 export default function FilePaste() {
   const { onFileHandler } = useFileUpload()
-  const onPaste = async (e: ClipboardEvent) => {
-    e.preventDefault()
-    const files = e.clipboardData?.files
-    if (!files || !files.length) return
-
-    messageSuccess('You pasted an image !')
-    onFileHandler(files)
-  }
+  const { taskId } = useFileKitContext()
 
   useEffect(() => {
+    const onPaste = async (e: ClipboardEvent) => {
+      e.preventDefault()
+      const files = e.clipboardData?.files
+      if (!files || !files.length) return
+
+      messageSuccess('You pasted an image !')
+      onFileHandler(files)
+    }
     document.addEventListener('paste', onPaste)
     return () => {
       document.removeEventListener('paste', onPaste)
     }
-  }, [])
+  }, [taskId, onFileHandler])
   return <></>
 }
diff --git a/packages/ui-app/app/_components/FileKits/context.ts b/packages/ui-app/app/_components/FileKits/context.ts
@@ -20,6 +20,7 @@ export type IFileUploadItem = {
 }
 
 interface IFileKitContextProps {
+  taskId: string
   uploading: boolean
   setUploading: Dispatch<SetStateAction<boolean>>
   loading: boolean
@@ -31,6 +32,7 @@ interface IFileKitContextProps {
 }
 
 const FileKitContext = createContext<IFileKitContextProps>({
+  taskId: '',
   loading: false,
   uploading: false,
   previewFiles: [],

diff --git a/packages/ui-app/app/_components/FileKits/index.tsx b/packages/ui-app/app/_components/FileKits/index.tsx
@@ -7,9 +7,11 @@ import FilePaste from './FilePaste'
 import FileCarousel from './FileCarousel'
 
 export default function FileKitContainer({
+  taskId,
   fileIds,
   children
 }: {
+  taskId: string
   fileIds: string[]
   children: ReactNode
 }) {
@@ -21,6 +23,7 @@ export default function FileKitContainer({
   return (
     <FileKitProvider
       value={{
+        taskId,
         uploading,
         setUploading,
         loading,

diff --git a/packages/ui-app/app/_components/FileKits/style.css b/packages/ui-app/app/_components/FileKits/style.css
@@ -22,7 +22,7 @@
 }
 
 .file-drop-label {
-  @apply absolute z-10 top-0 left-0 w-full h-full rounded-md bg-white/70 backdrop-blur-sm flex items-center justify-center pointer-events-none;
+  @apply absolute z-10 top-0 left-0 w-full h-full rounded-md bg-white/70 dark:bg-black/70 backdrop-blur-sm flex items-center justify-center pointer-events-none;
 }
 
 .file-drop-label + * {

diff --git a/packages/ui-app/app/_components/FileKits/useFileUpload.ts b/packages/ui-app/app/_components/FileKits/useFileUpload.ts
@@ -20,35 +20,35 @@ import { useEffect, useState } from 'react'
 import { onPushStateRun } from 'packages/ui-app/libs/pushState'
 
 export default function useFileUpload() {
-  const [taskId, setTaskId] = useState('')
-  const { uploading, setUploading, setPreviewFiles } = useFileKitContext()
+  // const [taskId, setTaskId] = useState('')
+  const { uploading, setUploading, setPreviewFiles, taskId } = useFileKitContext()
   const { setDefaultCover } = useSetDefaultCover()
   const { orgID, projectId } = useParams()
   const { push } = useRouter()
   // const sp = useSearchParams()
   // const taskId = sp.get('taskId')
 
-  useEffect(() => {
-    const destroy = onPushStateRun((url: string) => {
-
-      const newUrl = new URL(url)
-      const taskId = newUrl.searchParams.get('taskId')
-      setTaskId(taskId || '')
-    })
-
-    return () => {
-      destroy()
-    }
-  }, [])
-
-  useEffect(() => {
-    const newUrl = new URL(window.location.toString())
-    const taskId = newUrl.searchParams.get('taskId')
-    if (taskId) {
-      setTaskId(taskId)
-    }
-
-  }, [])
+  // useEffect(() => {
+  //   const destroy = onPushStateRun((url: string) => {
+  //
+  //     const newUrl = new URL(url)
+  //     const taskId = newUrl.searchParams.get('taskId')
+  //     setTaskId(taskId || '')
+  //   })
+  //
+  //   return () => {
+  //     destroy()
+  //   }
+  // }, [])
+  //
+  // useEffect(() => {
+  //   const newUrl = new URL(window.location.toString())
+  //   const taskId = newUrl.searchParams.get('taskId')
+  //   if (taskId) {
+  //     setTaskId(taskId)
+  //   }
+  //
+  // }, [])
 
   const { updateTaskData } = useServiceTaskUpdate()
 
@@ -201,6 +201,7 @@ export default function useFileUpload() {
   }
 
   const onFileHandler = async (files: FileList) => {
+    console.log('onFileHandler', taskId)
     if (!taskId) {
       messageError("Task id not found")
       return

diff --git a/packages/ui-app/app/_components/FileKits/useSetDefaultCover.ts b/packages/ui-app/app/_components/FileKits/useSetDefaultCover.ts
@@ -3,11 +3,12 @@ import { taskMakeCover } from "@/services/task"
 import { useTaskStore } from "@/store/task"
 import { messageSuccess } from "@shared/ui"
 import { useSearchParams } from "next/navigation"
+import { useFileKitContext } from "./context"
 
 export const useSetDefaultCover = () => {
   const { projectId } = useUrl()
-  const sp = useSearchParams()
-  const taskId = sp.get('taskId')
+  const { taskId } = useFileKitContext()
+
   const { tasks, updateTask } = useTaskStore()
   const currentTask = tasks.find(t => t.id === taskId)
 

diff --git a/packages/ui-app/store/task.ts b/packages/ui-app/store/task.ts
@@ -263,8 +263,13 @@ export const useTaskStore = create<TaskState>(set => ({
         }
 
         if (fileIds) {
-          const oldFileIds = task.fileIds
-          task.fileIds = [...fileIds, ...oldFileIds]
+          if (fileIds.length) {
+            const oldFileIds = task.fileIds
+            task.fileIds = [...fileIds, ...oldFileIds]
+          } else {
+            task.fileIds = []
+          }
+
         }
 
         if (visionId && task.visionId !== visionId) {