file picker done!!

frontend/src/gallery/components/AlbumEditModal.jsx

@@ -8,6 +8,7 @@ export default function AlbumEditModal({ open, onOpenChange, trigger, id, startT
     const { getAccessToken } = useAccount()
     const [title, setTitle] = useState(startTitle || '')
     const [description, setDescription] = useState(startDescription || '')
+    const [thumbnail, setThumbnail] = useState(null)
     const { showError } = useNotifier()
     const handleEditAlbum = async () => {
         const response = await fetch(`${getServerUrl()}/api/albums/editAlbum`, {
@@ -21,6 +22,7 @@ export default function AlbumEditModal({ open, onOpenChange, trigger, id, startT
                 properties: {
                     title: title,
                     description: description,
+                    thumbnail: thumbnail,
                 }
             })
         })
@@ -37,6 +39,10 @@ export default function AlbumEditModal({ open, onOpenChange, trigger, id, startT
             setDescription(startDescription || '')
         }
     }, [open])
+    const handleFileSelect = (file) => {
+        console.log(file)
+        setThumbnail(file.selectedAlbum.ID + '/' + file.selectedFile.ID)
+    }
     return (
         <Modal open={open} onOpenChange={onOpenChange} trigger={trigger} title="Edit Album">
             <div className="flex flex-col gap-2">
@@ -45,7 +51,7 @@ export default function AlbumEditModal({ open, onOpenChange, trigger, id, startT
                 <p className="text-white red-hat-mono">Description</p>
                 <textarea type="text" placeholder="Description" className="w-full h-[20vh] px-3 py-2.5 bg-[#141414] border border-[#2B2B2B] rounded-md text-white placeholder-gray-600 focus:outline-none focus:border-[#3B3B3B] transition-colors red-hat-text resize-none" value={description} onChange={(e) => setDescription(e.target.value)} />
                 <p className="text-white red-hat-mono">Thumbnail</p>
-                <FilePicker currentAlbum={currentAlbum} />
+                <FilePicker currentAlbum={currentAlbum} onFileSelect={handleFileSelect} />
                 <button className="w-full py-2.5 bg-[#2B2B2B] hover:bg-[#3B3B3B] text-white rounded-md font-medium transition-colors red-hat-mono cursor-pointer mt-2" onClick={handleEditAlbum}>Save Changes</button>
             </div>
         </Modal>

frontend/src/gallery/components/FilePicker.jsx

@@ -5,12 +5,13 @@ import { useAccount } from '../../contexts/useAccount'
 import { getServerUrl } from '../../hooks/getConstants'
 import { useNotifier } from '../../contexts/useNotifier'
 import { ArrowLeft } from 'lucide-react'
-export default function FilePicker({ currentAlbum }) {
+import AuthImage from '../../components/AuthImage'
+export default function FilePicker({ currentAlbum, onFileSelect }) {
     const [selectedFile, setSelectedFile] = useState(null)
     const [selectedAlbum, setSelectedAlbum] = useState(currentAlbum)
     const [currentPath, setCurrentPath] = useState([])
     const [albums, setAlbums] = useState([])
-    const [media, setMedia] = useState([])
+    const [media, setMedia] = useState(null)
     const [filePickerOpen, setFilePickerOpen] = useState(false)
     const { getAccessToken } = useAccount()
     const { showError } = useNotifier()
@@ -49,6 +50,24 @@ export default function FilePicker({ currentAlbum }) {
                 setSelectedAlbum(data)
             }
         }
+        const getMedia = async () => {
+            const response = await fetch(`${getServerUrl()}/api/media/getAllMediaInAlbum?albumId=${selectedAlbum?.ID}`, {
+                method: 'GET',
+                headers: {
+                    'Authorization': getAccessToken(),
+                },
+            })
+            const data = await response.json()
+            if (data.error) {
+                showError(data.error)
+            } else {
+                if (data.media.length === 0) {
+                    setMedia(null)
+                } else {
+                    setMedia(data.media)
+                }
+            }
+        }
         const reconstructPath = async () => {
             if (!selectedAlbum?.ID) {
                 setCurrentPath(['gallery'])
@@ -99,13 +118,22 @@ export default function FilePicker({ currentAlbum }) {
         }
         getAlbum()
         reconstructPath()
+        getMedia()
     }, [selectedAlbum])
     return (
-        <div className="flex flex-row gap-2 border border-[#2B2B2B] rounded-lg p-2 cursor-pointer" onClick={() => {
+        <>
-            setFilePickerOpen(true)
+            <div className="flex flex-row gap-2 border border-[#2B2B2B] rounded-lg p-2 cursor-pointer" onClick={() => {
-        }}>
+                setFilePickerOpen(true)
-            <File className="w-6 h-6" />
+            }}>
-            <p className="text-white red-hat-mono">{selectedFile?.name || 'No image selected'}</p>
+                <File className="w-6 h-6 flex-shrink-0" />
+                {selectedFile?.Title ? (
+                    <p className="text-white red-hat-mono truncate flex-1 min-w-0" dir="rtl">
+                        <span dir="ltr">{currentPath.join(' / ') + ' / ' + selectedFile?.Title}</span>
+                    </p>
+                ) : (
+                    <p className="text-white red-hat-mono">No image selected</p>
+                )}
+            </div>
             <Modal open={filePickerOpen} onOpenChange={setFilePickerOpen} title="Select File">
                 <div className="flex flex-col gap-2">
                     <div className="flex flex-row gap-2 items-center justify-start">
@@ -123,14 +151,23 @@ export default function FilePicker({ currentAlbum }) {
                         </div>
                     ))}
                     <hr className="border-[#2B2B2B] my-2" />
-                    {media.length === 0 && (
+                    {media === null && (
                         <p className="text-white red-hat-mono">No media found</p>
                     )}
-                    {media.length > 0 && (
+                    {media && media.length === 0 && (
+                        <p className="text-white red-hat-mono">Loading...</p>
+                    )}
+                    {media && media.length > 0 && (
                         <div className="flex flex-col gap-2">
                             {media.map((m) => (
-                                <div key={m.ID} className="flex flex-row gap-2 cursor-pointer hover:bg-[#2B2B2B] rounded-md p-2 border border-[#2B2B2B]">
+                                <div key={m.ID} className="flex flex-row gap-2 cursor-pointer hover:bg-[#2B2B2B] rounded-md p-2 border border-[#2B2B2B] items-center justify-start" onClick={() => {
-                                    <File className="w-6 h-6" />
+                                    setSelectedFile(m)
+                                    if (onFileSelect) {
+                                        onFileSelect({ selectedFile: m, selectedAlbum: selectedAlbum, currentPath: currentPath })
+                                    }
+                                    setFilePickerOpen(false)
+                                }}>
+                                    <AuthImage src={`${getServerUrl()}/api/media/thumb/${selectedAlbum?.ID}/${m.ID}`} token={getAccessToken()} className="w-10 h-10 object-cover rounded-md" />
                                     <p className="text-white red-hat-mono">{m.Title}</p>
                                 </div>
                             ))}
@@ -138,6 +175,6 @@ export default function FilePicker({ currentAlbum }) {
                     )}
                 </div>
             </Modal>
-        </div>
+        </>
     )
 }