From c36c5276e5857b2250b18f488d7e7ce05a70b674 Mon Sep 17 00:00:00 2001
From: doobry <doobry@systemli.org>
Date: Sat, 27 Apr 2024 21:28:53 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Clicking=20on=20an=20image=20opens?=
 =?UTF-8?q?=20it=20in=20a=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Attachments.tsx | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/Attachments.tsx b/src/components/Attachments.tsx
index 6385ea1..ba6f42f 100644
--- a/src/components/Attachments.tsx
+++ b/src/components/Attachments.tsx
@@ -1,9 +1,9 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { ButtonBack, ButtonNext, CarouselProvider, Dot, Image, Slide, Slider } from 'pure-react-carousel'
 import styled from 'styled-components'
 import { Attachment } from '../lib/types'
 import 'pure-react-carousel/dist/react-carousel.es.css'
-import { Button } from 'semantic-ui-react'
+import { Button, Modal, ModalContent } from 'semantic-ui-react'
 
 const Wrapper = styled(CarouselProvider)`
   position: relative;
@@ -22,6 +22,9 @@ interface Props {
 }
 
 const Attachments: FC<Props> = props => {
+  const [modalOpen, setModalOpen] = useState<boolean>(false)
+  const [modalImageSrc, setModalImageSrc] = useState<string>('')
+
   const renderButtonsAndDots = () => {
     // FIXME: This doesn't feel like a good pattern.
     // Tried to use styled components instead which didn't work right away.
@@ -46,16 +49,34 @@ const Attachments: FC<Props> = props => {
     )
   }
 
+  const handleImageClick = (event: React.MouseEvent) => {
+    if (!event.target?.src) {
+      return
+    }
+    setModalImageSrc(event.target.src)
+    setModalOpen(true)
+  }
+
+  const handleModalClose = () => {
+    setModalOpen(false)
+    setModalImageSrc('')
+  }
+
   return (
     <Wrapper naturalSlideHeight={0.75} naturalSlideWidth={1} totalSlides={props.attachments.length}>
       <Slider>
         {props.attachments.map((image, key) => (
           <Slide key={key} index={key}>
-            <Image hasMasterSpinner={false} src={image.url} style={{ objectFit: 'scale-down' }} />
+            <Image hasMasterSpinner={false} src={image.url} onClick={handleImageClick} style={{ objectFit: 'scale-down' }} />
           </Slide>
         ))}
       </Slider>
       {props.attachments.length > 1 && renderButtonsAndDots()}
+      <Modal closeIcon onClose={handleModalClose} open={modalOpen}>
+        <ModalContent>
+          <Image hasMasterSpinner={false} src={modalImageSrc} style={{ objectFit: 'scale-down' }} />
+        </ModalContent>
+      </Modal>
     </Wrapper>
   )
 }