Merge branch 'arcade-gallery' of https://github.com/claynicholson/site into pr/1312

components/arcade/showcase/cohort-card.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Card, Heading, Link, Text } from 'theme-ui'
+import { Box, Card, Heading, Link, Text, Close } from 'theme-ui'
 import styles from './cohort-card.module.css'
 import { useState } from 'react'
 import { Button } from 'theme-ui'
@@ -99,19 +99,29 @@ const CohortCard = ({
               bg: '#09AFB4',
               borderRadius: '10px',
               height: '32px',
-              cursor: 'pointer'
+              cursor: 'pointer',
+              transitionDuration: '0.4s',
+              '&:hover': {
+                transform: 'scale(1.15)'
+              }
             }}
           >
             <Icon glyph="edit" />{' '}
           </div>
           <div
-            onClick={handleDelete}
+            onClick={e => {
+              document.getElementById('delete-project').showModal()
+            }}
             sx={{
               color: 'white',
               bg: '#09AFB4',
               borderRadius: '10px',
               height: '32px',
-              cursor: 'pointer'
+              cursor: 'pointer',
+              transitionDuration: '0.4s',
+              '&:hover': {
+                transform: 'scale(1.15)'
+              }
             }}
           >
             <Icon glyph="minus" />{' '}
@@ -132,6 +142,47 @@ const CohortCard = ({
         <h1 className={styles.card_title}>{title}</h1>
         <p className={styles.card_description}>{desc}</p>
       </a>
+      <dialog
+        id="delete-project"
+        sx={{ borderRadius: '10px', border: '3px dashed #09AFB4' }}
+        className="gaegu"
+      >
+        <Text>Are you sure you want to delete this project?</Text>
+        <br />
+        <Button
+          sx={{
+            backgroundColor: '#FF5C00',
+            color: '#FAEFD6',
+            borderRadius: '5px',
+            border: 'none',
+            px: '20px',
+            transitionDuration: '0.3s',
+            '&:hover': {
+              transform: 'scale(1.05)'
+            },
+            width: 'fit-content'
+          }}
+          onClick={e => {
+            handleDelete()
+            document.getElementById('add-project').close()
+          }}
+        >
+          Yes
+        </Button>
+        <Close
+          sx={{
+            '&:hover': { cursor: 'pointer' },
+            position: 'absolute',
+            top: '10px',
+            right: '10px',
+            zIndex: 2,
+            color: '#09AFB4'
+          }}
+          onClick={e => {
+            document.getElementById('add-project').close()
+          }}
+        />
+      </dialog>
     </div>
   )
 }

components/arcade/showcase/project-view.js

@@ -76,6 +76,7 @@ const ProjectView = ({
           >
             {imagesList.map((image, index) => (
               <div
+                key={index}
                 sx={{
                   display: 'flex',
                   alignItems: 'center',
@@ -83,7 +84,6 @@ const ProjectView = ({
                 }}
               >
                 <img
-                  key={index}
                   src={image}
                   alt={`Project image ${index + 1}`}
                   className={styles.image}

components/bin/footer.js

@@ -66,7 +66,7 @@ const Footer = () => {
                             clipRule="evenodd"></path>
                     </svg>
                     <div className={styles.footer_icons_container}>
-                        <a target="_self" rel="noopener me" href="/slack" title="Hack Club on Slack">
+                        <a target="_self" rel="noopener me" href="https://hackclub.com/slack" title="Hack Club on Slack">
                             <svg fillRule="evenodd" clipRule="evenodd" strokeLinejoin="round"
                                 strokeMiterlimit="1.414" xmlns="http://www.w3.org/2000/svg" aria-label="slack-fill"
                                 viewBox="0 0 32 32" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32"

pages/arcade/gallery.js

@@ -86,6 +86,7 @@ const gallery = ({ posts }) => {
                     playable={post.playable}
                     images={post.images}
                     githubProf={""}
+                    key={post.id}
                 />)
 
             })}

pages/arcade/showcase/login/[token].js

@@ -19,7 +19,7 @@ const flavorText = [
   "PUT that request back where it came from or so help me",
   "POST haste!",
   "TODO: Delete this message",
-  <p style={{fontSize: "3px"}}>{sample(tinyEyes)}</p>,
+  <p style={{fontSize: "3px"}} key="tinyEyes">{sample(tinyEyes)}</p>,
   "Caution: objects in loading box are slower than they appear",
   "Caution: wet pixels, do not touch",
   "*Fax machine noises*",

pages/arcade/showcase/my.js

@@ -61,8 +61,7 @@ a {
 }
 `
 
-const ProjectGallery = ({ projects, loadProjects}) => {
+const ProjectGallery = ({ projects, loadProjects }) => {
-
   return (
     <div className={styles.feed}>
       <div className={styles.container}>
@@ -120,11 +119,33 @@ const ProjectGallery = ({ projects, loadProjects}) => {
   )
 }
 
-const Loading = () => <div sx={{width: '90vw', maxWidth: '1200px', margin: 'auto', textAlign: 'center'}}>Loading...</div>
+const Loading = () => (
+  <div
+    sx={{
+      width: '90vw',
+      maxWidth: '1200px',
+      margin: 'auto',
+      textAlign: 'center'
+    }}
+  >
+    Loading...
+  </div>
+)
 
-const ErrorMessage = () => <div sx={{width: '90vw', maxWidth: '1200px', margin: 'auto', textAlign: 'center'}}>There was an error loading your projects.</div>
+const ErrorMessage = () => (
+  <div
+    sx={{
+      width: '90vw',
+      maxWidth: '1200px',
+      margin: 'auto',
+      textAlign: 'center'
+    }}
+  >
+    There was an error loading your projects.
+  </div>
+)
 
-const my = () => {
+const My = () => {
   const [projects, setProjects] = useState([])
   const [name, setName] = useState('')
   const [status, setStatus] = useState('loading')
@@ -209,7 +230,7 @@ const my = () => {
   }
 
   useEffect(async () => {
-    loadProjects();
+    loadProjects()
   }, [])
 
   return (
@@ -265,7 +286,6 @@ const my = () => {
             >
               <Text className="gaegu" sx={{ color: '#FF5C00' }}>
                 {status == 'success' ? `Welcome, ${name}` : ''}
-                
               </Text>
 
               <div>
@@ -293,13 +313,20 @@ const my = () => {
               </div>
             </Heading>
           </SlideDown>
+
           {status == 'loading' && <Loading />}
 
           {status == 'error' && <ErrorMessage />}
 
-          {status == 'success' && <ProjectGallery projects={projects} loadProjects={loadProjects} />}
+          {status == 'success' && (
-          <dialog id="add-project" sx={{borderRadius: '10px', border: '3px dashed #09AFB4'}} className='gaegu'>
+            <ProjectGallery projects={projects} loadProjects={loadProjects} />
-          <ProjectAddView />
+          )}
+          <dialog
+            id="add-project"
+            sx={{ borderRadius: '10px', border: '3px dashed #09AFB4' }}
+            className="gaegu"
+          >
+            <ProjectAddView />
             <Close
               sx={{
                 '&:hover': { cursor: 'pointer' },
@@ -322,4 +349,4 @@ const my = () => {
   )
 }
 
-export default my
+export default My

pages/arcade/showcase/project/[projectID]/edit.js

@@ -34,7 +34,7 @@ const Loading = () => <p>Loading...</p>
 
 const ErrorMsg = () => <p>There was an error loading your project!</p>
 
-export default ({ projectID }) => {
+const Showcase = ({ projectID }) => {
   const [status, setStatus] = useState('loading')
   const [project, setProject] = useState(null)
 
@@ -137,7 +137,9 @@ export default ({ projectID }) => {
   )
 }
 
+export default Showcase
+
 export function getServerSideProps(context) {
   const { projectID } = context.query
   return { props: { projectID } }
-}
+}

pages/bin/gallery.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import BinPost from '../../components/bin/GalleryPosts'
 import styles from '../../public/bin/style/gallery.module.css'
+import Script from 'next/script'
 import Nav from '../../components/bin/nav'
 import Footer from '../../components/footer'
 import PartTag from '../../components/bin/PartTag';
@@ -72,7 +73,7 @@ function Gallery({ posts = [], tags = [] }) {
     <section className='page'>
 
       <div className={styles.background}></div>
-      <script src="https://awdev.codes/utils/hackclub/orph.js"></script>
+      <Script src="https://awdev.codes/utils/hackclub/orph.js"></Script>
 
       
 
@@ -90,6 +91,7 @@ function Gallery({ posts = [], tags = [] }) {
                   return (
                     <PartTag
                       partID={tag.ID} 
+                      key={tag.ID}
                       search={true}
                       addFilter={addFilter}
                       removeFilter={removeFilter}