Issue 23

client/package.json

@@ -9,6 +9,7 @@
     "bootstrap": "^4.5.0",
     "classnames": "^2.2.6",
     "downloadjs": "^1.4.7",
+    "notyf": "^3.9.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

client/src/components/GifList/GifItem/GifItem.css

@@ -0,0 +1,29 @@
+.gif-card-image {
+    background: var(--color-secondary-100);
+    background-size: cover;
+    background-position: center;
+    border-radius: 12px;
+    padding-bottom: 75%;
+    object-fit: cover;
+    cursor: pointer;
+    z-index: 0;
+}
+
+.modal-top {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+i {
+    margin-left: 10px;
+}
+
+@media (min-width: 560px) {
+    .vl {
+        display: inline;
+        border-left: 1px solid var(--color-secondary-600);
+        margin: 0 10px;
+    }
+}
+

client/src/components/GifList/GifItem/GifItem.js

@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
+import { Notyf } from 'notyf'
+import 'notyf/notyf.min.css'
+
+import { downloadFromS3 } from '../../../utils/download'
+import Modal from '../../Modal'
+import Icon from '../../Icon'
+
+import './GifItem.css'
+
+const notyf = new Notyf({
+  position: {
+    x: 'center',
+    y: 'top',
+  },
+})
+
+const GifItem = ({ isLoading, Location, fileKey }) => {
+  const [modalOpen, setModalOpen] = useState(false)
+  const [gifId, setGifId] = useState('')
+  const history = useHistory()
+  const location = useLocation()
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search)
+    const regex = /\b(\d.*[^.gif])\b/g
+    const match = fileKey.match(regex)
+
+    if (match) {
+      setGifId(match[0])
+    }
+
+    if (params.get('gif_id') === gifId) {
+      setModalOpen(true)
+    }
+  }, [gifId, fileKey, location.search])
+
+  const handleGifSelect = () => {
+    const params = new URLSearchParams()
+
+    params.append('gif_id', gifId)
+    history.push({ search: params.toString() })
+
+    setModalOpen(true)
+  }
+
+  const handleCopyToClipboard = () => {
+    navigator.clipboard.writeText(Location).then(() => {
+      notyf.success('Link copied to clipboard')
+    })
+  }
+
+  const handleDownload = () => {
+    downloadFromS3(fileKey).then(() => {
+      notyf.success('File downloading...')
+    })
+  }
+
+  const handleModalClose = () => {
+    const params = new URLSearchParams()
+
+    params.delete('gif_id')
+    history.push({ search: params.toString() })
+
+    setModalOpen(false)
+  }
+
+  return (
+    <>
+      {modalOpen && (
+        <Modal displayModal={modalOpen} closeModal={handleModalClose}>
+          <div className="modal-top">
+            <div className="modal-top-left">
+              <button type="button" onClick={handleCopyToClipboard}>
+                Copy Link
+                <Icon name="link" />
+              </button>
+              <div className="vl" />
+              <button type="button" onClick={handleDownload}>
+                Download
+                <Icon name="download" />
+              </button>
+            </div>
+            <div className="modal-top-right">
+              <button
+                type="button"
+                className="close"
+                onClick={handleModalClose}
+              >
+                Close
+                <Icon name="close" />
+              </button>
+            </div>
+          </div>
+          <div
+            role="img"
+            className="gif-card-image"
+            alt={`GIF ${fileKey}`}
+            style={
+              isLoading
+                ? null
+                : {
+                    backgroundImage: `url("${Location}")`,
+                    marginTop: '20px',
+                  }
+            }
+          />
+        </Modal>
+      )}
+      <div
+        role="button"
+        tabIndex={0}
+        className="gif-card-image"
+        onClick={handleGifSelect}
+        onKeyDown={handleGifSelect}
+        alt={`GIF ${fileKey}`}
+        style={
+          isLoading
+            ? null
+            : {
+                backgroundImage: `url("${Location}")`,
+              }
+        }
+      />
+    </>
+  )
+}
+
+export default GifItem

client/src/components/GifList/GifItem/index.js

@@ -0,0 +1 @@
+export { default } from './GifItem'

client/src/components/GifList/GifList.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import GifItem from './GifItem'
+import './GifList.css'
+
+const GifList = ({ gifs, isLoading }) => (
+  <>
+    {gifs.map(({ Key, Location }) => (
+      <GifItem
+        key={Key}
+        fileKey={Key}
+        Location={Location}
+        isLoading={isLoading}
+      />
+    ))}
+  </>
+)
+
+export default GifList

client/src/components/GifList/index.js

@@ -0,0 +1 @@
+export { default } from './GifList'

client/src/components/Modal/Modal.css

@@ -0,0 +1,21 @@
+.modal {
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow: auto;
+    padding-top: 80px;
+}
+
+.modal-content {
+    background-color: white;
+    width: 70%;
+    max-width: 640px;
+    margin: auto;
+    padding: 40px;
+    border-radius: 20px;
+}

client/src/components/Modal/Modal.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import './Modal.css'
+
+const Modal = ({ displayModal, closeModal, children }) => {
+  const divStyle = {
+    display: displayModal ? 'block' : 'none',
+  }
+
+  const closePropModal = (e) => {
+    e.stopPropagation()
+    closeModal()
+  }
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className="modal"
+      onClick={closePropModal}
+      onKeyDown={closePropModal}
+      style={divStyle}
+    >
+      <div
+        role="button"
+        tabIndex={0}
+        className="modal-content"
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => e.stopPropagation()}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default Modal

client/src/components/Modal/index.js

@@ -0,0 +1 @@
+export { default } from './Modal'

client/src/pages/Home/Home.css

@@ -40,7 +40,6 @@ h1 > h2 {
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 10;
   pointer-events: none;
 }
 
@@ -53,17 +52,6 @@ h1 > h2 {
   max-width: calc(100vw - 32px);
 }
 
-.gif-card-image {
-  background: var(--color-secondary-100);
-  background-size: cover;
-  background-position: center;
-  border-radius: 12px;
-  padding-bottom: 75%;
-  object-fit: cover;
-  cursor: pointer;
-  z-index: 0;
-}
-
 .gif-cards-container {
   display: grid;
   justify-content: space-between;

client/src/pages/Home/Home.js

@@ -3,10 +3,10 @@ import { Link } from 'react-router-dom'
 import './Home.css'
 import ReactPaginate from 'react-paginate'
 import useListGIFs from '../../hooks/useListGIFs'
-import { downloadFromS3 } from '../../utils/download'
 import Button from '../../components/Button'
 import Icon from '../../components/Icon'
 import Page from '../../components/Page'
+import GifList from '../../components/GifList'
 
 const Home = () => {
   const {
@@ -62,23 +62,7 @@ const Home = () => {
             <Button icon="plus">Create Your Own GIF</Button>
           </Link>
         </div>
-        {gifs.map(({ Key, Location }) => (
-          // disabling this line as this will be changed into a modal with proper usage of buttons for click handling anyways
-          // eslint-disable-next-line
-          <div
-            onClick={() => downloadFromS3(Key)}
-            key={Key}
-            alt={`GIF ${Key}`}
-            className="gif-card-image"
-            style={
-              isLoading
-                ? null
-                : {
-                    backgroundImage: `url("${Location}")`,
-                  }
-            }
-          />
-        ))}
+        <GifList gifs={gifs} isLoading={isLoading} />
       </div>
     </Page>
   )