From 54415f6e992514d7c4bc5f8df5c011668eaed774 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 22 Mar 2025 18:15:54 -0500
Subject: [PATCH] Refine upload error status text

---
 src/admin/upload/AdminUploadPanel.tsx |  2 +-
 src/photo/PhotoUploadWithStatus.tsx   | 55 +++++++++++++--------------
 src/state/AppState.ts                 | 12 +++---
 src/state/AppStateProvider.tsx        | 21 +++++-----
 4 files changed, 44 insertions(+), 46 deletions(-)

diff --git a/src/admin/upload/AdminUploadPanel.tsx b/src/admin/upload/AdminUploadPanel.tsx
index 5d809f06..4df9edf4 100644
--- a/src/admin/upload/AdminUploadPanel.tsx
+++ b/src/admin/upload/AdminUploadPanel.tsx
@@ -28,7 +28,7 @@ export default function AdminUploadPanel({
   return (
     <AppGrid
       className={clsx(
-        ((!isUploading || uploadError) || hideUploadPanel) && 'hidden',
+        ((!isUploading && !uploadError) || hideUploadPanel) && 'hidden',
       )}
       contentMain={
         <Container
diff --git a/src/photo/PhotoUploadWithStatus.tsx b/src/photo/PhotoUploadWithStatus.tsx
index 0b43a919..9f6cdc69 100644
--- a/src/photo/PhotoUploadWithStatus.tsx
+++ b/src/photo/PhotoUploadWithStatus.tsx
@@ -132,7 +132,7 @@ export default function PhotoUploadWithStatus({
                   console.error(error);
                   setUploadState?.({
                     isUploading: false,
-                    uploadError: `Upload Error: ${error.message}`,
+                    uploadError: error.message,
                   });
                 });
             }
@@ -142,8 +142,7 @@ export default function PhotoUploadWithStatus({
         />
       </div>
       {showStatusText && <div className={clsx(
-        'flex items-center gap-4',
-        'truncate',
+        'flex items-center gap-4 overflow-hidden',
       )}>
         {isUploading && !showButton &&
           <Spinner
@@ -151,32 +150,32 @@ export default function PhotoUploadWithStatus({
             color="text"
             size={14}
           />}
-        <span className="truncate">
-          {isUploading
-            ? isFinishing
-              ? <>
-                Finishing ...
-              </>
-              : <>
-                {!showButton && uploadStatusText
-                  ? <>
-                    <ResponsiveText shortText={uploadStatusText}>
-                      Uploading {uploadStatusText}
-                    </ResponsiveText>
-                    {': '}
-                    {fileUploadName}
-                  </>
-                  : <ResponsiveText shortText={fileUploadName}>
-                    Uploading {fileUploadName}
-                  </ResponsiveText>}
-              </>
-            : !showButton && <>Initializing</>}
-        </span>
+        {uploadError
+          ? <span className="text-error">
+            {uploadError}
+          </span>
+          : <span className="truncate">
+            {isUploading
+              ? isFinishing
+                ? <>
+                  Finishing ...
+                </>
+                : <>
+                  {!showButton && uploadStatusText
+                    ? <>
+                      <ResponsiveText shortText={uploadStatusText}>
+                        Uploading {uploadStatusText}
+                      </ResponsiveText>
+                      {': '}
+                      {fileUploadName}
+                    </>
+                    : <ResponsiveText shortText={fileUploadName}>
+                      Uploading {fileUploadName}
+                    </ResponsiveText>}
+                </>
+              : !showButton && <>Initializing</>}
+          </span>}
       </div>}
-      {uploadError &&
-        <div className="text-error">
-          {uploadError}
-        </div>}
       {debug && debugDownload &&
         <a
           className="block"
diff --git a/src/state/AppState.ts b/src/state/AppState.ts
index 47578319..09a79c48 100644
--- a/src/state/AppState.ts
+++ b/src/state/AppState.ts
@@ -24,12 +24,6 @@ export type AppStateContext = {
   clearNextPhotoAnimation?: () => void
   shouldRespondToKeyboardCommands?: boolean
   setShouldRespondToKeyboardCommands?: Dispatch<SetStateAction<boolean>>
-  // UPLOAD
-  startUpload?: (onStart?: () => void) => void
-  uploadInputRef?: RefObject<HTMLInputElement | null>
-  uploadState: UploadState
-  setUploadState?: (uploadState: Partial<UploadState>) => void
-  resetUploadState?: () => void
   // MODAL
   isCommandKOpen?: boolean
   setIsCommandKOpen?: Dispatch<SetStateAction<boolean>>
@@ -54,6 +48,12 @@ export type AppStateContext = {
   isPerformingSelectEdit?: boolean
   setIsPerformingSelectEdit?: Dispatch<SetStateAction<boolean>>
   insightsIndicatorStatus?: InsightsIndicatorStatus
+  // UPLOAD
+  startUpload?: (onStart?: () => void) => void
+  uploadInputRef?: RefObject<HTMLInputElement | null>
+  uploadState: UploadState
+  setUploadState?: (uploadState: Partial<UploadState>) => void
+  resetUploadState?: () => void
   // DEBUG
   isGridHighDensity?: boolean
   setIsGridHighDensity?: Dispatch<SetStateAction<boolean>>
diff --git a/src/state/AppStateProvider.tsx b/src/state/AppStateProvider.tsx
index 92d7c1fb..af49e2a1 100644
--- a/src/state/AppStateProvider.tsx
+++ b/src/state/AppStateProvider.tsx
@@ -45,10 +45,6 @@ export default function AppStateProvider({
     useState<AnimationConfig>();
   const [shouldRespondToKeyboardCommands, setShouldRespondToKeyboardCommands] =
     useState(true);
-  // UPLOAD
-  const uploadInputRef = useRef<HTMLInputElement>(null);
-  const [uploadState, _setUploadState] =
-    useState(INITIAL_UPLOAD_STATE);
   // MODAL
   const [isCommandKOpen, setIsCommandKOpen] =
     useState(false);
@@ -68,6 +64,9 @@ export default function AppStateProvider({
     useState<string[] | undefined>();
   const [isPerformingSelectEdit, setIsPerformingSelectEdit] =
     useState(false);
+  // UPLOAD
+  const uploadInputRef = useRef<HTMLInputElement>(null);
+  const [uploadState, _setUploadState] = useState(INITIAL_UPLOAD_STATE);
   // DEBUG
   const [isGridHighDensity, setIsGridHighDensity] =
     useState(HIGH_DENSITY_GRID);
@@ -135,7 +134,7 @@ export default function AppStateProvider({
     if (isPathAdmin(pathname)) { router.push(PATH_SIGN_IN); }
   }, [router, pathname]);
 
-  // Returns false when an upload is cancelled
+  // Returns false when upload is cancelled
   const startUpload = useCallback(() => new Promise<boolean>(resolve => {
     if (uploadInputRef.current) {
       uploadInputRef.current.value = '';
@@ -168,12 +167,6 @@ export default function AppStateProvider({
         clearNextPhotoAnimation: () => setNextPhotoAnimation?.(undefined),
         shouldRespondToKeyboardCommands,
         setShouldRespondToKeyboardCommands,
-        // UPLOAD
-        uploadInputRef,
-        startUpload,
-        uploadState,
-        setUploadState,
-        resetUploadState,
         // MODAL
         isCommandKOpen,
         setIsCommandKOpen,
@@ -198,6 +191,12 @@ export default function AppStateProvider({
         setSelectedPhotoIds,
         isPerformingSelectEdit,
         setIsPerformingSelectEdit,
+        // UPLOAD
+        uploadInputRef,
+        startUpload,
+        uploadState,
+        setUploadState,
+        resetUploadState,
         // DEBUG
         isGridHighDensity,
         setIsGridHighDensity,