refactoring photogallerymodal to look more like recentmediacard

env.local

@@ -0,0 +1,9 @@
+# Auth0.com
+AUTH0_CLIENT_SECRET=PkfojbazYk5Pmr-duoF6GjYQvNP2pvMvMlMYe2Hwx0b2FpQT8iM83MvQK711_Grf
+AUTH0_MGMT_CLIENT_SECRET=pic00B-lXVlzoMWQTHNpXIMdTVF6D-UgiKzLWiWcWmNH77ZKS2gn6WMSu8nQMVnb
+
+# Google cloud storage
+[email protected]
+GC_BUCKET_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCd7Ntal+ECKAo+\nVNIV2RqpfN777Y8Po2SqoSjBYvcYag+unGOrAZVaFRWjPgJc/0Kuzdn1TZwwXxD+\nQ0gtnHaAqnswWftmKCy4b1TbJ0aEepmz6yt82OCY9Ct8+bwKAJhI74ilGLi6HG83\na+8jdgGJhIdeOMWJ2vpNaDXibMYQp6S9Pf60SdbshbpLcspz4Ww5kvNkfNE4PcEi\nUV/dce0S6EkbpR9NBGfUlciYogUjpJOpVLSbtYA1utrZJXq+g/5tznTTRifFTwcO\njmGWNZGe4A+ZxGUSoA+TG+bC1+8oVrJUXFsxznFx86LMpcOitzDD17hmhbiWrch2\n4+XXvKU/AgMBAAECggEALx7lomXP1udgixGe77LsQCcIl43d0lIz7q+QbAdd5/R5\ngmWaXYNm7058Os19QgdN+79jKczC7jHnbZ5gsm9Ncn2rrRUkLGqPUWayoINbCJtW\nMjdYrfM+LJUqRqtzPl7IEXcbQ/uY3rsuOhCj9WY39jLLe0MgOc5TQfZ2oX1IKd6L\nhGe2TsbbsfM8LvH1LptQYX3tSoec0FGvC6+BBFqTEQMjeQLRG6ACrXl7LWfJ+q7c\nw78gyckgQr7QlwIk+f64Ip7fV/2oszusn3sPmKje06E889YTUFo+lHCNgnbPl0bt\n4GR885/XTwC60tDGIQcc2bDwBJYM5eNm7jtOBsVXcQKBgQDN9MKI7UWSzxQNhg8p\nICoYi+txt7AOp/J3BxK1AJ2giTB1NN3okuoZJekHen6NqgxVF2jBkdPOXUNx6DGm\nBlRriqc+yJXuRCstCfWTD2PlfdDcOW3n9oRcgxs+ML9Bw+6esWuk45g4E0E+QO8Z\nTiofRpo08+FKPHlgeIovdPpN0QKBgQDETGWdKebqQAhzA9jxRtPVgqunIyEySdQZ\nQA7J6vQ1+TJxqqUEVOB4nxtYA1+IVK9aD5vwg1cX2b+ZaKBb5tQlkw1Q/HAohqqV\n/D+jhI37e+ULa3PHe/Ur9g9PBGvY/iDHGvCW/ShkyKPnEY3syt6yNgSkCFS5FIHv\n6LGeiCg2DwKBgF4S0ZTXxDK1sbQnqt8fGPtTVf0AaUOYhRDHQ0039cfxQhgXSNFF\n4fYQses/kXTF2pI3ehsIsBWP1hG+fIcYVxE0KQZtesZ1jr8o0GoW2otlt7QP61rL\n6FOVcykp/QJeK62C3udXKh1a9i8oW85UPLtCdYeAakSNcOeWx4+7v+UxAoGAXUS7\nZ0B4kkbYfOWQF5wCnMkYjDJ53G4N0+2G2VPEszxzRmTBQVyex1E56ci4hItQQed2\nvYF6ST/R9K8sul3j4PKM+jTnianqtZcEGcqqt5n3i0SD3327USb5wR6lq5Wbt17K\nf8NLhQ98KRdDKwZ9Z4mZDONUdhgTYQ1cD6o8COsCgYEAuItHSAUwyV+Dz4By4/J0\nQ5aSqHFBxb6GCi8DRYCZid8gMcXVC1ee0mVCWjY2pgVykdSM34+acK7Nmilk7vU4\nXJWE0qvTtKH8xFODlacEZ4qPcuQp2lZxMMFYy+0JylGWJ4pCQLCls+nIdkZd3z76\nXdsBQ+P7VnbUk/PbbBpBZQ0=\n-----END PRIVATE KEY-----\n"
+
+NEXT_PUBLIC_DEVTOOLS_ENABLED=true

src/components/media/GalleryImageCard.tsx

@@ -0,0 +1,82 @@
+import { useState } from 'react'
+import Image from 'next/image'
+import clx from 'classnames'
+import Card from '../ui/Card/Card'
+import TagList from '../media/TagList'
+import { MobileLoader } from '../../js/sirv/util'
+import { MediaWithTags } from '../../js/types'
+import { getUploadDateSummary } from '../../js/utils'
+import { PostHeader } from '../home/Post'
+
+const MOBILE_IMAGE_MAX_WIDITH = 600
+
+interface GalleryImageCardProps {
+  header?: JSX.Element
+  mediaWithTags: MediaWithTags
+  onImageClick?: (event: React.MouseEvent<HTMLImageElement>, mediaWithTags: MediaWithTags) => void
+}
+
+/**
+ * Image card for the gallery page
+ */
+export const GalleryImageCard = ({
+  mediaWithTags,
+  onImageClick
+}: GalleryImageCardProps): JSX.Element => {
+  const [loaded, setLoaded] = useState(false)
+  const { mediaUrl, width, height, username } = mediaWithTags
+  const imageRatio = width / height
+  return (
+    <Card
+      header={<PostHeader username={username} />}
+      image={
+        <div className='relative block w-full h-full'>
+          <Image
+            src={MobileLoader({
+              src: mediaUrl,
+              width: MOBILE_IMAGE_MAX_WIDITH
+            })}
+            width={MOBILE_IMAGE_MAX_WIDITH}
+            height={MOBILE_IMAGE_MAX_WIDITH / imageRatio}
+            sizes='100vw'
+            objectFit='cover'
+            onLoad={() => setLoaded(true)}
+            onClick={(event) => {
+              if (onImageClick != null) {
+                console.log('onImageClick')
+                event.stopPropagation()
+                event.preventDefault()
+                onImageClick(event, mediaWithTags)
+              }
+            }}
+          />
+          <div
+            className={clx(
+              'absolute top-0 left-0 w-full h-full',
+              loaded
+                ? 'bg-transparent'
+                : 'bg-gray-50 bg-opacity-60 border animate-pulse'
+            )}
+          >
+            {loaded}
+          </div>
+        </div>
+      }
+      body={
+        <>
+          <section className='flex flex-col gap-y-4 justify-between px-2'>
+            <TagList
+              mediaWithTags={mediaWithTags}
+              showActions={false}
+              isAuthorized={false}
+              isAuthenticated={false}
+            />
+            <span className='uppercase text-xs text-base-200'>
+              {getUploadDateSummary(mediaWithTags.uploadTime)}
+            </span>
+          </section>
+        </>
+      }
+    />
+  )
+}

src/components/media/PhotoGalleryModal.tsx

@@ -1,11 +1,10 @@
 import React, { Dispatch, SetStateAction, useState } from 'react'
 import { userMediaStore } from '../../js/stores/media'
-import ResponsiveImage, { ResponsiveImage2 } from './slideshow/ResponsiveImage'
+import ResponsiveImage from './slideshow/ResponsiveImage'
 import { MobileDialog, DialogContent } from '../ui/MobileDialog'
 import { XMarkIcon } from '@heroicons/react/24/outline'
-import TagList from './TagList'
-import clx from 'classnames'
 import { MediaWithTags } from '../../js/types'
+import { GalleryImageCard } from './GalleryImageCard'
 
 export interface PhotoGalleryModalProps {
   setShowPhotoGalleryModal: Dispatch<SetStateAction<boolean>>
@@ -23,7 +22,6 @@ const PhotoGalleryModal = ({
 
   // Fetch the list of photos.
   const photoList = userMediaStore.use.photoList()
-  console.log('photoList', photoList)
 
   return (
     <MobileDialog
@@ -34,38 +32,14 @@ const PhotoGalleryModal = ({
       <DialogContent fullScreen title='Gallery'>
         <div className='px-0 lg:px-4 mt-20 relative columns-2 md:columns-3 lg:columns-4 xl:columns-5 gap-2 lg:gap-4'>
           {photoList.map((mediaWithTags) => {
-            const { mediaUrl, width, height, entityTags } = mediaWithTags
-
             return (
               <div
                 data-testid='thumbnail'
                 onClick={() => setImageProperties(mediaWithTags)}
-                key={mediaUrl}
-                className='overflow-hidden mt-0 mb-2 lg:mb-4 hover:brightness-75 break-inside-avoid-column cursor-pointer break-inside-avoid relative block rounded-md'
+                key={mediaWithTags.mediaUrl}
+                className='overflow-hidden hover:brightness-75 break-inside-avoid-column cursor-pointer relative block rounded-md mb-4'
               >
-                <ResponsiveImage2
-                  naturalWidth={width}
-                  naturalHeight={height}
-                  mediaUrl={mediaUrl}
-                  isHero={false}
-                />
-                <div
-                  className={
-                      clx(
-                        entityTags.length === 0
-                          ? 'hidden'
-                          : 'absolute inset-x-0 bottom-0 p-2 flex items-center bg-base-100 bg-opacity-60'
-                      )
-                      }
-                >
-                  <TagList
-                    key={mediaUrl}
-                    mediaWithTags={mediaWithTags}
-                    showDelete
-                    showActions={false}
-                    showUsernameTag
-                  />
-                </div>
+                <GalleryImageCard key={mediaWithTags.mediaUrl} mediaWithTags={mediaWithTags} onImageClick={() => setImageProperties(mediaWithTags)} />
               </div>
             )
           })}

src/components/media/__tests__/PhotoGalleryModal.tsx

@@ -12,7 +12,8 @@ describe('<PhotoGalleryModal />', () => {
             mediaUrl: 'test.jpg',
             width: 200,
             height: 200,
-            entityTags: []
+            entityTags: [],
+            uploadTime: 1667766325921
           }
         ])
       }

src/components/ui/MobileDialog.tsx

@@ -28,7 +28,7 @@ export const DialogContent = React.forwardRef<any, Props>(
           {children}
           {/* Use absolute positioning to place the close button on the upper left corner */}
           <DialogPrimitive.Close aria-label='Close' asChild className='dialog-close-button'>
-            <button className='btn btn-circle btn-ghost'>
+            <button className='btn btn-circle btn-ghost m-2'>
               <XMarkIcon className='w-8 h-8' />
             </button>
           </DialogPrimitive.Close>