chore: temporarily disable photo sharing and tagging (#807)

src/components/Header.tsx

@@ -32,15 +32,18 @@ export default function Header (props: HeaderProps): JSX.Element {
       </div>
       <AppAlert
         message={
-          <div className='flex items-center justify-center flex-wrap'>
-            We created a special&nbsp;
-            <Link href='/crag/18c5dd5c-8186-50b6-8a60-ae2948c548d1'>
-              <a className='link-dotted'>
-                <strong>Test area</strong>
-              </a>
-            </Link>&nbsp;for test driving the new edit feature.
-            &nbsp;<a className='btn btn-xs font-light' href='https://openbeta.substack.com/p/new-year-new-milestone'>Learn more</a>
-          </div>
+          <>
+            <div className='text-sm'>• May 2023: Photo sharing and tagging is temporarily disabled while we're upgrading our media storage.</div>
+            <div className='text-sm'>
+              • January 2023: Use this special&nbsp;
+              <Link href='/crag/18c5dd5c-8186-50b6-8a60-ae2948c548d1'>
+                <a className='link-dotted font-semibold'>
+                  Test area
+                </a>
+              </Link>&nbsp;for test driving the new edit feature&nbsp;<a className='btn-link font-light text-xs' href='https://openbeta.substack.com/p/new-year-new-milestone'>Learn more</a>
+            </div>
+
+          </>
         }
       />
     </>

src/components/UploadPhotoTrigger.tsx

@@ -87,7 +87,7 @@ export default function UploadPhotoTrigger ({ className = '', onUploaded, childr
 
   return (
     <div
-      className={clx(className, uploading ? 'pointer-events-none' : '')} {...getRootProps()} onClick={(e) => {
+      className={clx('pointer-events-none cursor-not-allowed', className, uploading ? 'pointer-events-none' : '')} {...getRootProps()} onClick={(e) => {
         if (status === 'authenticated' && !uploading) {
           openFileDialog()
         } else {

src/components/broadcast/AppAlert.tsx

@@ -25,13 +25,13 @@ export default function MiniAlert ({ message }: Props): JSX.Element | null {
   })
   return open
     ? (
-      <div className='w-full z-40 alert alert-info flex-wrap justify-center xl:px-4 xl:py-0.5 rounded-none gap-6'>
-        <div className='inline-flex items-center justify-between'>
+      <div className='w-full z-40 alert alert-info flex-wrap justify-center xl:p-4 rounded-none gap-4'>
+        <div className='block flex flex-col gap-2 items-start'>
           {message}
         </div>
-        <div className='inline-flex w-[210]px grow-1'>
+        <div className='inline-flex w-[210px] grow-1'>
           <button
-            className='btn btn-link btn-sm btn-primary font-light text-opacity-60'
+            className='btn btn-link btn-sm btn-primary font-light text-opacity-60 text-xs'
             onClick={() => {
               localStorage.setItem(STORAGE_KEY, '1')
               setOpen(false)

src/components/media/PhotoUploader.tsx

@@ -14,7 +14,7 @@ export default function PhotoUploader ({ className, onUploaded, children }: Phot
   return (
     // Fiddling with syntax here seems to make dropzone clicking work.
     // (tested both FF and Chrome on Ubuntu)
-    <div {...getRootProps({ className: `dropzone ${className}` })}>
+    <div {...getRootProps({ className: `pointer-events-none cursor-not-allowed dropzone ${className}` })}>
       {uploading && <Progress />}
       <input {...getInputProps()} />
       {children}

src/components/media/Tag.tsx

@@ -34,6 +34,7 @@ export default function Tag ({ tag, onDelete, size = 'md', showDelete = false, i
         <div className='mt-0.5 whitespace-nowrap truncate text-sm'>{name}</div>
         {isAuthorized && showDelete &&
           <button
+            disabled
             onClick={(e) => {
               onDelete(tag.id)
               e.preventDefault()

src/components/media/__tests__/Tag.tsx

@@ -19,7 +19,7 @@ const TAG_DATA = [
   }
 ]
 
-test('Default tag', () => {
+test.skip('Default tag', () => {
   render(
     <Tag
       tag={TAG_DATA[0]}
@@ -34,7 +34,7 @@ test('Default tag', () => {
   expect(screen.queryByRole('button')).toBeNull()
 })
 
-test('Tag with permission to delete', async () => {
+test.skip('Tag with permission to delete', async () => {
   const user = userEvent.setup()
   const onDeleteFn = jest.fn()
   render(

src/js/hooks/useDeleteTagBackend.tsx

@@ -34,6 +34,7 @@ export default function useDeleteTagBackend (): ReturnType {
     await actions.media.removeTag(data.removeTag)
   }
 
+  // eslint-disable-next-line
   const [removeTag] = useMutation<GQLRemoveTagType, RemoveTagMutationProps>(
     MUTATION_REMOVE_MEDIA_TAG, {
       client: graphqlClient,
@@ -42,11 +43,11 @@ export default function useDeleteTagBackend (): ReturnType {
   )
 
   const onDelete = async (tagId: string): Promise<void> => {
-    await removeTag({
-      variables: {
-        tagId
-      }
-    })
+    // await removeTag({
+    //   variables: {
+    //     tagId
+    //   }
+    // })
   }
 
   return { onDelete }

src/js/hooks/usePhotoTagCmd.tsx

@@ -15,6 +15,7 @@ export interface UsePhotTagReturn {
 export default function usePhotoTagCmd (): UsePhotTagReturn {
   const addTagToLocalStore = async (data: any): Promise<void> => await actions.media.addTag(data)
 
+  // eslint-disable-next-line
   const [tagPhoto] = useMutation<any, SetTagType>(
     MUTATION_ADD_CLIMB_TAG_TO_MEDIA, {
       client: graphqlClient,
@@ -25,9 +26,10 @@ export default function usePhotoTagCmd (): UsePhotTagReturn {
   )
 
   const tagPhotoCmd = async (props: SetTagType): Promise<any> => {
-    await tagPhoto({
-      variables: props
-    })
+    console.log('Tagging temporarily disabled')
+    // await tagPhoto({
+    //   variables: props
+    // })
   }
 
   return { tagPhotoCmd }