Attempt to fix project previews

components/arcade/showcase/project-edit.js

@@ -4,11 +4,11 @@ import useForm from '../../../lib/use-form'
 import Submit from '../../submit'
 import { useState } from 'react'
 import Icon from '@hackclub/icons'
-import FileInput from '../../../pages/api/arcade/showcase/projects/[projectID]/file-input'
+// import FileInput from '../../../pages/api/arcade/showcase/projects/[projectID]/file-input'
 /** @jsxImportSource theme-ui */
 
 const ProjectEditForm = ({ project }) => {
-  const [previewProject, setPreviewProject] = useState(project)
+  // const [previewProject, setPreviewProject] = useState(project)
   const [screenshot, setScreenshot] = useState(project.screenshot)
   const [newScreenshot, setNewScreenshot] = useState('')
 
@@ -17,11 +17,9 @@ const ProjectEditForm = ({ project }) => {
 
   function publishedChanges(e) {
     console.log('published changes', e)
-
-    console.log(color)
   }
   const { status, formProps, useField, data } = useForm(
-    `/api/arcade/showcase/projects/${project.id}/edit`,
+    `/api/arcade/showcase/projects/${project.id}/edit/`,
     publishedChanges,
     {
       method: 'PATCH',
@@ -63,6 +61,10 @@ const ProjectEditForm = ({ project }) => {
     setNewVideo(e.target.value)
   }
 
+  const previewProject = {
+    ...data
+  }
+
   return (
     <Box
       sx={{

components/arcade/showcase/project-view.js

@@ -139,7 +139,7 @@ const ProjectView = ({
             gap: '10px'
           }}
         >
-          {screenshot.map((image, index) => (
+          {imagesList.map((image, index) => (
             <div
               key={index}
               sx={{

components/arcade/showcase/project-view.module.css

@@ -13,11 +13,12 @@
   }
   
   .image {
-    max-width: 100%;
+    max-width: 24em;
     max-height: 100%;
     width: auto;
     height: auto;
     border-radius: 8px;
+    margin: 0 auto;
 }
   
   .description {

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

@@ -20,13 +20,11 @@ export default async function handler(req, res) {
   updatedFields['Slack Link'] = body.slackLink
   updatedFields['Code Link'] = body.codeLink
   updatedFields['Play Link'] = body.playLink
-  updatedFields['Screenshot'] = body.images
+  updatedFields['Screenshot'] = body.images.map(i => ({ url: i }))
   updatedFields['color'] = body.color
   updatedFields['textColor'] = body.textColor
-  updatedFields['ScreenshotLinks'] = body.screenshot
-  updatedFields['VideoLinks'] = body.video
-
-  console.log(body.color)
+  updatedFields['ScreenshotLinks'] = JSON.stringify(body.screenshot || [])
+  updatedFields['VideoLinks'] = JSON.stringify(body.video || [])
 
   const airtable = new AirtablePlus({
     apiKey: process.env.AIRTABLE_API_KEY,
@@ -51,9 +49,8 @@ export default async function handler(req, res) {
     githubProf: project.fields['Github Profile'] || '',
     color: project.fields['color'] || '',
     textColor: project.fields['textColor'] || '',
-    screenshot: JSON.parse(p.fields['ScreenshotLinks']) || [],
-    video: JSON.parse(p.fields['VideoLinks']) || [],
-
+    screenshot: project.fields['ScreenshotLinks'] || [],
+    video: project.fields['VideoLinks'] || [],
   }
 
   return res.status(200).json({ project: results })

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

@@ -15,18 +15,19 @@ export default async function handler(req, res) {
 
   const { projectID } = req.query
 
-  const project = await airtable.read({
+  const projects = await airtable.read({
     filterByFormula: `AND({User} = '${user.fields['Name']}', RECORD_ID() = '${projectID}')`,
     maxRecords: 1
   })
+  const p = projects[0]
 
   let screenshot
-  try { screenshot = JSON.parse(project.fields['ScreenshotLinks']) } catch { screenshot = [] }
+  try { screenshot = JSON.parse(p.fields['ScreenshotLinks']) } catch(e) { screenshot = [] }
 
   let video
-  try { video = JSON.parse(project.fields['VideoLinks']) } catch { video = [] }
+  try { video = JSON.parse(p.fields['VideoLinks']) } catch(e) { video = [] }
 
-  const results = project.map(p => ({
+  const results = {
     id: p.id,
     title: p.fields['Name'] || '',
     desc: p.fields['Description'] || '',
@@ -41,6 +42,6 @@ export default async function handler(req, res) {
     textColor: p.fields['textColor'] || '',
     screenshot,
     video,
-  }))
-  return res.status(200).json({ project: results[0] })
+  }
+  return res.status(200).json({ project: results })
 }

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

@@ -65,10 +65,13 @@ const Showcase = ({ projectID }) => {
     })
       .then(res => res.json())
       .then(data => {
-        setProject(data.project)
         if (data.error) {
           throw new Error(data.error)
         }
+        if (data.project === null) {
+          throw new Error('Project not found')
+        }
+        setProject(data.project)
         setStatus('success')
       })
       .catch(e => {

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

@@ -82,16 +82,15 @@ const ProjectShowPage = ({ projectID }) => {
           }}
         />
         <div className={styles.min}>
-          {/* {
-        status == 'loading' && <Loading />
-      }
+        {
+          status == 'loading' && <Loading />
+        }
 
-      {
-        status == 'error' && <ErrorMessage />
-      } */}
+        {
+          status == 'error' && <ErrorMessage />
+        }
 
-          {/* {
-        status == 'success' &&  */}
+        { status == 'success' && (
           <ProjectView
             key={project.id}
             id={project.id}
@@ -108,7 +107,7 @@ const ProjectShowPage = ({ projectID }) => {
             screenshot={project.screenshot}
             video={project.video}
           />
-          {/* } */}
+        )}
         </div>
       </div>
       <style>{styled}</style>