diff --git a/app/layout.tsx b/app/layout.tsx index 0cb9993c..f2d687ec 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -19,7 +19,7 @@ import CommandK from '@/app/CommandK'; import SwrConfigClient from '@/state/SwrConfigClient'; import AdminBatchEditPanel from '@/admin/AdminBatchEditPanel'; import ShareModals from '@/share/ShareModals'; -import AdminUploadPanel from '@/admin/AdminUploadPanel'; +import AdminUploadPanel from '@/admin/upload/AdminUploadPanel'; import '../tailwind.css'; diff --git a/src/admin/AdminUploadPanel.tsx b/src/admin/AdminUploadPanel.tsx deleted file mode 100644 index 1c8fc73f..00000000 --- a/src/admin/AdminUploadPanel.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import Container from '@/components/Container'; -import LoaderButton from '@/components/primitives/LoaderButton'; -import SiteGrid from '@/components/SiteGrid'; -import Spinner from '@/components/Spinner'; -import clsx from 'clsx'; -import { IoCloseSharp } from 'react-icons/io5'; - -export default function AdminUploadPanel() { - return ( - -
-
- - 1 of 4: Uploading DSC-4353.jpg -
- } - /> -
- } - /> - ); -} diff --git a/src/admin/upload/AdminUploadPanel.tsx b/src/admin/upload/AdminUploadPanel.tsx new file mode 100644 index 00000000..d4f150d3 --- /dev/null +++ b/src/admin/upload/AdminUploadPanel.tsx @@ -0,0 +1,52 @@ +'use client'; + +import Container from '@/components/Container'; +import LoaderButton from '@/components/primitives/LoaderButton'; +import SiteGrid from '@/components/SiteGrid'; +import Spinner from '@/components/Spinner'; +import { useAppState } from '@/state/AppState'; +import clsx from 'clsx'; +import { IoCloseSharp } from 'react-icons/io5'; + +export default function AdminUploadPanel() { + const { uploadState: { + isUploading, + filesLength, + fileUploadIndex, + fileUploadName, + } } = useAppState(); + + return ( + +
+
+ {isUploading + ?
+ + {/* eslint-disable-next-line max-len */} + Uploading {fileUploadIndex + 1} of {filesLength}: {fileUploadName} + + +
+ : 'Upload Photos'} +
+ } + /> +
+ } + /> + ); +} diff --git a/src/photo/PhotoUpload.tsx b/src/photo/PhotoUpload.tsx index 6ebacf17..0482ba1e 100644 --- a/src/photo/PhotoUpload.tsx +++ b/src/photo/PhotoUpload.tsx @@ -25,6 +25,7 @@ export default function PhotoUpload({ debugDownload, }, setUploadState, + resetUploadState, } = useAppState(); const router = useRouter(); @@ -67,6 +68,7 @@ export default function PhotoUpload({ .then(async url => { if (isLastBlob) { await onLastUpload?.(); + resetUploadState?.(); if (hasMultipleUploads) { // Redirect to view multiple uploads router.push(PATH_ADMIN_UPLOADS); diff --git a/src/state/AppState.ts b/src/state/AppState.ts index 07d3c550..2c49c8b3 100644 --- a/src/state/AppState.ts +++ b/src/state/AppState.ts @@ -19,6 +19,7 @@ export interface AppStateContext { // UPLOADS uploadState: UploadState setUploadState?: (uploadState: Partial) => void + resetUploadState?: () => void // MODAL isCommandKOpen?: boolean setIsCommandKOpen?: Dispatch> diff --git a/src/state/AppStateProvider.tsx b/src/state/AppStateProvider.tsx index 0b6a93cb..6e0781b3 100644 --- a/src/state/AppStateProvider.tsx +++ b/src/state/AppStateProvider.tsx @@ -91,6 +91,9 @@ export default function AppStateProvider({ const setUploadState = useCallback((uploadState: Partial) => { _setUploadState(prev => ({ ...prev, ...uploadState })); }, []); + const resetUploadState = useCallback(() => { + _setUploadState(INITIAL_UPLOAD_STATE); + }, []); const invalidateSwr = useCallback(() => setSwrTimestamp(Date.now()), []); @@ -165,6 +168,7 @@ export default function AppStateProvider({ // UPLOADS uploadState, setUploadState, + resetUploadState, // MODAL isCommandKOpen, setIsCommandKOpen,