Adapt photo in photos

pacoccino · Mar 17, 2022 · 5a9be5c · 5a9be5c
1 parent d1c78d0
commit 5a9be5c
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 50 deletions.
diff --git a/web/src/Routes.tsx b/web/src/Routes.tsx
@@ -6,7 +6,6 @@ import { FilterContextProvider } from 'src/contexts/filter'
 import { TagContextProvider } from 'src/contexts/tags'
 import { SelectContextProvider } from 'src/contexts/select'
 import { ApluContextProvider } from 'src/contexts/aplu'
-import PhotosPage from 'src/pages/PhotosPage/PhotosPage'
 
 const contexts = [FilterContextProvider, TagContextProvider, SelectContextProvider, ApluContextProvider]
 

diff --git a/web/src/pages/PhotoPage/PhotoPage.tsx → web/src/components/Image/ImageOverlay.tsx b/web/src/pages/PhotoPage/PhotoPage.tsx → web/src/components/Image/ImageOverlay.tsx
@@ -3,12 +3,14 @@ import ImageCell from 'src/components/Image/ImageCell'
 import { useFilterContext } from 'src/contexts/filter'
 import { useCallback, useState } from 'react'
 import { RightPanelOptions } from 'src/components/Image/RightPanel'
+import { Modal, ModalOverlay, ModalContent } from '@chakra-ui/react'
+import { routes, navigate } from '@redwoodjs/router'
 
-type PhotoPageProps = {
-  id: string
+type ImageOverlayProps = {
+  photoId: string
 }
 
-const PhotoPage = ({ id }: PhotoPageProps) => {
+const ImageOverlay = ({ photoId }: ImageOverlayProps) => {
   const { filter } = useFilterContext()
 
   const [rightPanel, setRightPanel] = useState<RightPanelOptions | null>(null)
@@ -25,14 +27,25 @@ const PhotoPage = ({ id }: PhotoPageProps) => {
     <>
       <MetaTags title="Photo" description="Photo page" />
 
-      <ImageCell
-        id={id}
-        filter={filter}
-        rightPanel={rightPanel}
-        switchRightPanel={switchRightPanel}
-      />
+      <Modal
+        onClose={() => navigate(routes.photos())}
+        size="full"
+        isOpen={!!photoId}
+      >
+        <ModalOverlay />
+        <ModalContent>
+          {photoId && (
+            <ImageCell
+              id={photoId}
+              filter={filter}
+              rightPanel={rightPanel}
+              switchRightPanel={switchRightPanel}
+            />
+          )}
+        </ModalContent>
+      </Modal>
     </>
   )
 }
 
-export default PhotoPage
+export default ImageOverlay
diff --git a/web/src/pages/PhotoPage/PhotoPage.stories.tsx b/web/src/pages/PhotoPage/PhotoPage.stories.tsx
diff --git a/web/src/pages/PhotoPage/PhotoPage.test.tsx b/web/src/pages/PhotoPage/PhotoPage.test.tsx
diff --git a/web/src/pages/PhotosPage/PhotosPage.tsx b/web/src/pages/PhotosPage/PhotosPage.tsx
@@ -7,34 +7,24 @@ import { useMemo } from 'react'
 import { HorizontalCollapse } from 'src/design-system'
 import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
 import { SelectBar } from 'src/components/Images/SelectBar'
-import { useLocation, useParams } from '@redwoodjs/router'
+import ImageOverlay from 'src/components/Image/ImageOverlay'
 
-const PhotosPage = ({ photoId }) => {
+const PhotosPanel = () => {
   const { filter } = useFilterContext()
   const variables = useMemo(() => ({ filter }), [filter])
   const filterPanelDisclosure = useDisclosure({ defaultIsOpen: true })
 
-  const a = useLocation()
-  const b = useParams()
-  console.log(a, b)
-
   return (
     <Flex h="100%">
-      <MetaTags title="Photos" description="Photos page" />
-
-      {photoId ? (
-        <Box>p:{photoId}</Box>
-      ) : (
-        <HorizontalCollapse
-          isOpen={filterPanelDisclosure.isOpen}
-          width={300}
-          borderRightWidth={1}
-          boxShadow="lg"
-          height="100%"
-        >
-          <FilterPanel />
-        </HorizontalCollapse>
-      )}
+      <HorizontalCollapse
+        isOpen={filterPanelDisclosure.isOpen}
+        width={300}
+        borderRightWidth={1}
+        boxShadow="lg"
+        height="100%"
+      >
+        <FilterPanel />
+      </HorizontalCollapse>
 
       <Flex flex="1">
         <VStack flex="1" align="stretch" spacing={0}>
@@ -69,4 +59,16 @@ const PhotosPage = ({ photoId }) => {
   )
 }
 
+const PhotosPage = ({ photoId }) => {
+  return (
+    <>
+      <MetaTags title="Photos" description="Photos page" />
+
+      <PhotosPanel />
+
+      <ImageOverlay photoId={photoId} />
+    </>
+  )
+}
+
 export default PhotosPage