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

components/arcade/showcase/cohort-card.js

@@ -4,6 +4,7 @@ import styles from './cohort-card.module.css'
 import { useState } from 'react'
 import { Button } from 'theme-ui'
 import Icon from '@hackclub/icons'
+import randomNotFoundImg from './random-not-found-img'
 /** @jsxImportSource theme-ui */
 
 const CohortCard = ({
@@ -56,7 +57,7 @@ const CohortCard = ({
     reload()
   }
 
-  const firstImage = images[0] || 'https://picsum.photos/200'
+  const firstImage = images[0] || randomNotFoundImg(id)
 
   function red() {
     window.location.href = '/arcade/showcase/project/' + id + '/edit'
@@ -134,7 +135,7 @@ const CohortCard = ({
         rel="noopener noreferrer"
       >
         <img
-          src={images[0] || 'https://picsum.photos/200'}
+          src={firstImage}
           alt="Project Image"
           className={styles.card_img}
         />

components/arcade/showcase/project-view.js

@@ -1,4 +1,5 @@
 import styles from './project-view.module.css'
+import randomNotFoundImg from './random-not-found-img'
 import { Button, Text } from 'theme-ui'
 import Icon from '@hackclub/icons'
 /** @jsxImportSource theme-ui */
@@ -19,6 +20,8 @@ const ProjectView = ({
   const codeHost = codeLink.includes('github')
     ? 'View on GitHub'
     : 'View project source'
+  
+  const imagesList = images.length > 0 ? images : [randomNotFoundImg(id)]
   return (
     <div {...props} className="gaegu" sx={{ position: 'relative' }}>
       <div sx={{ py: 4, backgroundColor: '#F4E7C7', textAlign: 'center', color: '#333' }}>
@@ -71,7 +74,7 @@ const ProjectView = ({
               gridTemplateColumns: images > 1 ? ['1fr', '1fr 1fr', '1fr 1fr 1fr'] : '1fr'
             }}
           >
-            {images.map((image, index) => (
+            {imagesList.map((image, index) => (
               <div
                 sx={{
                   display: 'flex',

components/arcade/showcase/random-not-found-img.js

@@ -0,0 +1,19 @@
+const notFoundImgs = [
+  'https://cloud-6laa73jem-hack-club-bot.vercel.app/0not_found5.png',
+  'https://cloud-6laa73jem-hack-club-bot.vercel.app/1not_found4.png',
+  'https://cloud-6laa73jem-hack-club-bot.vercel.app/2not_found3.png',
+  'https://cloud-6laa73jem-hack-club-bot.vercel.app/3not_found2.png',
+  'https://cloud-6laa73jem-hack-club-bot.vercel.app/4not_found1.png'
+]
+
+const hashCode = (s='key') =>
+  s.split('').reduce((a, b) => {
+    a = (a << 5) - a + b.charCodeAt(0)
+    return a & a
+  }, 0)
+
+const randomNotFoundImg = key => {
+  return notFoundImgs[hashCode(key) % notFoundImgs.length]
+}
+
+export default randomNotFoundImg

pages/api/arcade/showcase/projects/[projectID]/edit.js

@@ -20,14 +20,6 @@ export default async function handler(req, res) {
   updatedFields['Play Link'] = body.playLink
   updatedFields['Screenshot'] = body.images
 
-  // allow list of fields to change
-  // const allowedFields = ['Name', 'Description', 'Slack Link', 'Code Link', 'Play Link', 'Screenshot', 'Github Profile']
-  // Object.keys(body).forEach(key => {
-  //   if (!allowedFields.includes(key)) {
-  //     delete body[key]
-  //   }
-  // })
-
   const airtable = new AirtablePlus({
     apiKey: process.env.AIRTABLE_API_KEY,
     baseID: 'app4kCWulfB02bV8Q',
@@ -38,8 +30,6 @@ export default async function handler(req, res) {
 
   const project = await airtable.update(projectID, updatedFields )
 
-  console.log(project.fields)
-
   const results = {
     id: project.id,
     title: project.fields['Name'] || '',