Add project loading & componentize cards

components/arcade/showcase/cohort-card.js

@@ -1,17 +1,27 @@
 import React from 'react'
-import { Box, Card, Heading, Text } from 'theme-ui'
+import { Box, Card, Heading, Link, Text } from 'theme-ui'
 import styles from './cohort-card.module.css'
 
 
-const CohortCard = ({ id, title, desc, slack, scrapbook, playable, images, githubProf }) => {
+const CohortCard = ({project: {
+  id,
+  title,
+  desc,
+  codeLink,
+  slackLink,
+  playLink,
+  images,
+  githubProf
+}}) => {
   return (
     <>
-    <link href='www.google.com'/>
       <div className={styles.card}>
-        <img src={images ? (images[0].url) : ("https://via.placeholder.com/150")} alt="Project Image" className={styles.card_img}/>
+        <img src={images ? (images[0]) : ("https://via.placeholder.com/150")} alt="Project Image" className={styles.card_img}/>
         <h1 className={styles.card_title}>{title}</h1>
         <p className={styles.card_description}>{desc}</p>
-      
+        <Link target="_blank" href={codeLink}>Code</Link>{' '}
+        <Link target="_blank" href={slackLink}>Slack</Link>{' '}
+        <Link target="_blank" href={playLink}>Play</Link>
       </div>
       
     </>

components/arcade/showcase/cohort-card.module.css

@@ -4,7 +4,7 @@
     background-color: rgb(217, 217, 217); /* Equivalent to bg-white/20 */
     background-clip: padding-box; /* Equivalent to bg-clip-padding */
     padding: 1.5rem 1.5rem 1rem 1.5rem; /* Equivalent to p-6 pb-4 */
-    cursor: pointer;
+    /* cursor: pointer; */
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Equivalent to shadow-lg */
     height: fit-content; /* Equivalent to h-fit */
     min-height: 400px;

pages/api/arcade/showcase/projects/my.js

@@ -0,0 +1,34 @@
+import AirtablePlus from "airtable-plus";
+import { ensureAuthed } from "../login/test";
+
+export default async function handler(req, res) {
+  const user = await ensureAuthed(req)
+  if (user.error) {
+    return res.status(401).json(user)
+  }
+
+  const airtable = new AirtablePlus({
+    apiKey: process.env.AIRTABLE_API_KEY,
+    baseID: 'app4kCWulfB02bV8Q',
+    tableName: "Showcase"
+  })
+
+  const projects = await airtable.read({
+    filterByFormula: `{User} = '${user.fields['Name']}'`
+  })
+
+  console.log({projects})
+  console.log({fields: projects[0].fields})
+  const results = projects.map(p => ({
+    id: p.id,
+    title: p.fields['Name'] || '',
+    desc: p.fields['Description'] || '',
+    slackLink: p.fields['Slack Link'] || '',
+    codeLink: p.fields['Code Link'] || '',
+    slackLink: p.fields['Slack Link'] || '',
+    playLink: p.fields['Play Link'] || '',
+    images: p.fields['Screenshot'].map(i => i.url) || [],
+    githubProf: p.fields['Github Profile'] || ''
+  }))
+  return res.status(200).json({ projects: results })
+}

pages/arcade/showcase/my.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import { useEffect, useState } from 'react'
 import CohortCard from '../../../components/arcade/showcase/cohort-card'
 import ProjectView from '../../../components/arcade/showcase/project-view'
 import Nav from '../../../components/Nav'
@@ -10,7 +10,43 @@ import SlideDown from '../../../components/slide-down'
 import styles from '../../../components/arcade/showcase/my.module.css'
 
 
+const ProjectGallery = ({ projects }) => (
+  <div className={styles.gallery}>
+    {projects.map(project => (
+      <CohortCard project={project} key={project.id} />
+    ))}
+  </div>
+)
+
+const Loading = () => (<div>Loading...</div>)
+
+const Error = (e) => (<div>There was an error loading your projects: {e}</div>)
+
 const my = () => {
+  const [projects, setProjects] = 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/my', {
+      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 (
     <section>
       <Nav />
@@ -56,15 +92,17 @@ const my = () => {
         </Button>
         </Heading>
       </SlideDown>
+      {
+        status == 'loading' && <Loading />
+      }
+        
+      {
+        status == 'error' && <Error error={errorMsg} />
+      }
 
-      <div className={styles.feed}>
-            <CohortCard/>
-            <CohortCard/>
-            <CohortCard/>
-            <CohortCard/>
-
-
-        </div>      
+      {
+        status == 'success' && <ProjectGallery projects={projects} />
+      }
       <Footer />
     </section>
   )