add project page

pages/api/arcade/showcase/projects/[ID].js

@@ -9,16 +9,16 @@ export default async function handler(req, res) {
   }
 
   const airtable = new AirtablePlus({
-    apiKey: process.env.AIRTABLE_API_KEY,
-    baseID: 'app4kCWulfB02bV8Q',
+        apiKey: process.env.AIRTABLE_API_KEY,
+        baseID: 'app4kCWulfB02bV8Q',
     tableName: "Showcase"
   })
 
-  const projects = await airtable.read({
+  const project = await airtable.read({
     filterByFormula: `AND({User} = '${user.fields['Name']}', {ID} = '${ID}')`
 })
 
-  const results = projects.map(p => ({
+  const results = project.map(p => ({
     id: p.id,
     title: p.fields['Name'] || '',
     desc: p.fields['Description'] || '',
@@ -29,5 +29,5 @@ export default async function handler(req, res) {
     images: p.fields['Screenshot'].map(i => i.url) || [],
     githubProf: p.fields['Github Profile'] || ''
   }))
-  return res.status(200).json({ projects: results })
+  return res.status(200).json({ project: results[0] })
 }

pages/arcade/showcase/my.js

@@ -8,7 +8,6 @@ import background from '../../../public/arcade/subtle-stripes.svg'
 import { Button, Heading, Text } from 'theme-ui'
 import SlideDown from '../../../components/slide-down'
 import styles from '../../../components/arcade/showcase/my.module.css'
-import NewCard from '../../../components/arcade/showcase/create-card'
 
 const ProjectGallery = ({ projects }) => {
   console.log("projects", projects);

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

@@ -1,8 +1,52 @@
 import React from 'react'
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/router';
+import CohortCard from '../../../../../components/arcade/showcase/cohort-card'
+
 
 const Page = () => {
+  const router = useRouter();
+  const { id } = router.query;
+
+  const [project, setProject] = useState([])
+  const [status, setStatus] = useState('loading')
+  const [errorMsg, setError] = useState(null)
+  useEffect(async () => {
+    const token = window.localStorage.getItem('arcade.authToken')
+    const response = await fetch(`/api/arcade/showcase/projects/${id}`, {
+      method: 'GET',
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    }).catch(e => {
+      console.error(e)
+      setStatus('error')
+      setError(e)
+    })
+    const data = await response.json()
+    if (data.error) {
+      setStatus('error')
+      return
+    } else {
+      setProjects(data.projects)
+      setStatus('success')
+    }
+  }, [])
+
   return (
-    <div>Project</div>
+    <div>
+      <CohortCard
+        key={project.id}
+        id={project.id}
+        title={project.title}
+        desc={project.desc}
+        slack={project.slackLink}
+        codeLink={project.codeLink}
+        playLink={project.playLink}
+        images={project.images}
+        githubProf={project.githubProf}
+      />
+    </div>
   )
 }