Added delete button

components/arcade/showcase/cohort-card.js

@@ -4,23 +4,40 @@ import styles from './cohort-card.module.css'
 import { useState } from 'react'
 import { Button } from 'theme-ui'
 
-const CohortCard = ({ id, title = "Title Not Found", desc = "Description Not Found", slack = "Slack Not Found", scrapbook = "", playLink = "", images = [], githubProf, githubLink = "", draggable = false, personal = false}) => {
+const CohortCard = ({ id, title = "Title Not Found", desc = "Description Not Found", slack = "Slack Not Found", scrapbook = "", playLink = "", images = [], githubProf, githubLink = "", draggable = false, personal = false, reload}) => {
   const [isHovered, setIsHovered] = useState(false);
 
 
-  const handleDelete = async () => {
-    const { status, formProps, useField, data } = useForm(
-    `/api/arcade/showcase/projects/${project.id}/edit`,
-    publishedChanges,
-    {
-      method: 'PATCH',
-      initData: { ...project, recordId: project.id },
-      bearer: window.localStorage.getItem('arcade.authToken')
-    }
-  )
-    return;
+  async function handleDelete() {
+    try {
+      const authToken = window.localStorage.getItem('arcade.authToken');
+
+      if (!authToken) {
+          throw new Error('Authorization token is missing.');
+      }
+
+      const response = await fetch(`/api/arcade/showcase/projects/${id}/delete`, {
+          method: 'PATCH',
+          headers: {
+              'Authorization': `Bearer ${authToken}`,
+              'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({}) // Empty body since your API expects some body content
+      });
+
+      if (!response.ok) {
+          throw new Error(`Failed to delete project with ID ${id}: ${response.statusText}`);
+      }
+
+      console.log(`Project with ID ${id} marked as deleted.`);
+  } catch (error) {
+      console.error('Error deleting project:', error);
   }
 
+  reload();
+}
+
+
   const firstImage = images[0] || "https://picsum.photos/200" 
 
 

components/arcade/showcase/project-edit.js

@@ -20,7 +20,7 @@ const ProjectEditForm = ({ project }) => {
       bearer: window.localStorage.getItem('arcade.authToken')
     }
   )
-    console.log()
+
   return (
     <Flex>
       <form {...formProps}>

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

@@ -1,43 +1,34 @@
 import AirtablePlus from "airtable-plus";
 import { ensureAuthed } from "../../login/test";
-import { DefaultLegendContent } from "recharts";
 
 export default async function handler(req, res) {
-  const user = await ensureAuthed(req)
+  const user = await ensureAuthed(req);
   if (user.error) {
-    return res.status(401).json(user)
+    return res.status(401).json(user);
   }
 
-  const body = req.body
+  const body = req.body;
   if (!body) {
-    return res.status(400).json({ error: "No body provided" })
+    return res.status(400).json({ error: "No body provided" });
   }
 
-  const updatedFields = {}
-  updatedFields['deleted'] = true;
+  const updatedFields = { deleted: true };
 
   const airtable = new AirtablePlus({
     apiKey: process.env.AIRTABLE_API_KEY,
     baseID: 'app4kCWulfB02bV8Q',
     tableName: "Showcase"
-  })
+  });
 
-  const { projectID } = req.query
+  const { projectID } = req.query;
 
-  const project = await airtable.update(projectID, updatedFields )
+  try {
+    await airtable.update(projectID, updatedFields);
 
-  const results = {
-    id: project.id,
-    title: project.fields['Name'] || '',
-    desc: project.fields['Description'] || '',
-    slackLink: project.fields['Slack Link'] || '',
-    codeLink: project.fields['Code Link'] || '',
-    slackLink: project.fields['Slack Link'] || '',
-    playLink: project.fields['Play Link'] || '',
-    images: (project.fields['Screenshot'] || []).map(i => i.url),
-    githubProf: project.fields['Github Profile'] || '',
-    deleted: project.fields['deleted'] || ''
+    // No content returned, only status code 204 for success
+    return res.status(204).end();
+  } catch (error) {
+    console.error("Error updating project:", error);
+    return res.status(500).json({ error: "Failed to update project" });
   }
-
-  return res.status(200).json({ project: results })
-}
+}

pages/arcade/showcase/my.js

@@ -14,7 +14,7 @@ import { StyleSheetContext } from 'styled-components'
 
 
 
-const ProjectGallery = ({ projects }) => {
+const ProjectGallery = ({ projects, loadProjects}) => {
 
   return (
     <div className={styles.feed}>
@@ -30,6 +30,7 @@ const ProjectGallery = ({ projects }) => {
           images={project.images}
           githubProf={project.githubProf}
           personal={true}
+          reload={loadProjects}
         />
       ))}
     </div>
@@ -48,7 +49,7 @@ const my = () => {
 
   const launchDate = new Date(2024, 7, 19, 0, 0, 0, 0);
 
-  useEffect(async () => {
+  const loadProjects = async () => {
     const token = window.localStorage.getItem('arcade.authToken')
     const response = await fetch('/api/arcade/showcase/projects/my', {
       method: 'GET',
@@ -68,6 +69,10 @@ const my = () => {
       setProjects(data.projects)
       setStatus('success')
     }
+  }
+
+  useEffect(async () => {
+    loadProjects();
   }, [])
 
   return (
@@ -139,7 +144,7 @@ const my = () => {
       }
 
       {
-        status == 'success' && <ProjectGallery projects={projects} />
+        status == 'success' && <ProjectGallery projects={projects} loadProjects={loadProjects}/>
       }
       <Footer />
     </section>