diff --git a/src/components/Inputs/ImageUpload.module.scss b/src/components/Inputs/ImageUpload.module.scss new file mode 100644 index 0000000..5ac66bc --- /dev/null +++ b/src/components/Inputs/ImageUpload.module.scss @@ -0,0 +1,11 @@ +.spinner { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + z-index: 1; + -webkit-backdrop-filter: blur(1px); + backdrop-filter: blur(1px); + pointer-events: none; +} diff --git a/src/components/Inputs/ImageUpload.tsx b/src/components/Inputs/ImageUpload.tsx index eba3e49..1d11d5d 100644 --- a/src/components/Inputs/ImageUpload.tsx +++ b/src/components/Inputs/ImageUpload.tsx @@ -8,6 +8,8 @@ import { } from '../../controllers' import { errorFeedback } from '../../types' import { MediaInputPopover } from './MediaInputPopover' +import { Spinner } from 'components/Spinner' +import styles from './ImageUpload.module.scss' export interface ImageUploadProps { multiple?: boolean | undefined @@ -15,6 +17,7 @@ export interface ImageUploadProps { } export const ImageUpload = React.memo( ({ multiple = false, onChange }: ImageUploadProps) => { + const [isLoading, setIsLoading] = useState(false) const [mediaOption, setMediaOption] = useState( MEDIA_OPTIONS[0] ) @@ -28,6 +31,7 @@ export const ImageUpload = React.memo( async (acceptedFiles: File[]) => { if (acceptedFiles.length) { try { + setIsLoading(true) const imageController = new ImageController(mediaOption) const urls: string[] = [] for (let i = 0; i < acceptedFiles.length; i++) { @@ -37,6 +41,8 @@ export const ImageUpload = React.memo( onChange(urls) } catch (error) { errorFeedback(error) + } finally { + setIsLoading(false) } } }, @@ -79,7 +85,6 @@ export const ImageUpload = React.memo( />
- {dropzoneLabel}
+ {isLoading && ( +
+ +
+ )} ) diff --git a/src/pages/mod/loader.ts b/src/pages/mod/loader.ts index d311109..e490e65 100644 --- a/src/pages/mod/loader.ts +++ b/src/pages/mod/loader.ts @@ -26,7 +26,7 @@ import { export const modRouteLoader = (ndkContext: NDKContextType) => - async ({ params }: LoaderFunctionArgs) => { + async ({ params, request }: LoaderFunctionArgs) => { const { naddr } = params if (!naddr) { log(true, LogType.Error, 'Required naddr.') @@ -51,6 +51,14 @@ export const modRouteLoader = const loggedInUserPubkey = (userState?.user?.pubkey as string | undefined) || getFallbackPubkey() + // Check if editing and the user is the original author + // Redirect if NOT + const url = new URL(request.url) + const isEditMode = url.pathname.includes('edit-mod') + if (isEditMode && loggedInUserPubkey !== pubkey) { + return redirect(appRoutes.mods) + } + try { // Set up the filters // Main mod content