strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine upload error status text

Browse Source
This commit is contained in:
Sam Becker 2025-03-22 18:15:54 -05:00
parent c0e4316e77
commit 54415f6e99
4 changed files with 44 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/admin/upload/AdminUploadPanel.tsx
View File

@ -28,7 +28,7 @@ export default function AdminUploadPanel({
return (
<AppGrid
className={clsx(
((!isUploading || uploadError) || hideUploadPanel) && 'hidden',
((!isUploading && !uploadError) || hideUploadPanel) && 'hidden',
)}
contentMain={
<Container

55
src/photo/PhotoUploadWithStatus.tsx
View File

@ -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"

12
src/state/AppState.ts
View File

@ -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>>

21
src/state/AppStateProvider.tsx
View File

@ -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,