Merge pull request #1320 from hackclub/editable-description-field-for-arcade-showcase

Make description editable

components/arcade/showcase/project-edit.js

@@ -90,6 +90,17 @@ const ProjectEditForm = ({ project }) => {
               sx={{ border: '1px dashed', borderColor: '#09AFB4', mb: 2 }}
             />
           </Label>
+          <Label>
+            <Text>Short description</Text>
+            <Text variant="caption">
+              This shows up on the showcase page. Keep it short and sweet!
+            </Text>
+            <Input
+              {...useField('description')}
+              placeholder="It's a party!"
+              sx={{ border: '1px dashed', borderColor: '#09AFB4', mb: 2 }}
+            />
+          </Label>
           <Label>
             <Text>ReadMe Link</Text>
             <Input

components/arcade/showcase/project-view.js

@@ -38,7 +38,7 @@ function invertColor(hex) {
 const ProjectView = ({
   id,
   title = 'Title Not Found',
-  desc = 'Description Not Found',
+  description = 'Description Not Found',
   slack = 'Slack Not Found',
   scrapbook = '',
   playLink,
@@ -112,6 +112,7 @@ const ProjectView = ({
         }}
       >
         <h1 className="slackey">{title}</h1>
+        <h2>{description}</h2>
         <h3>By {user}</h3>
 
         <div

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

@@ -15,7 +15,7 @@ export default async function handler(req, res) {
   const updatedFields = {}
   updatedFields['Name'] = body.title
   updatedFields['Estimated Hours'] = body.hours
-  updatedFields['Description'] = body.desc
+  updatedFields['Description'] = body.description
   updatedFields['Slack Link'] = body.slackLink
   updatedFields['Code Link'] = body.codeLink
   updatedFields['Play Link'] = body.playLink
@@ -41,7 +41,7 @@ export default async function handler(req, res) {
     id: project.id,
     title: project.fields['Name'] || '',
     hours: project.fields['Estimated Hours'] || '',
-    desc: project.fields['Description'] || '',
+    description: project.fields['Description'] || '',
     slackLink: project.fields['Slack Link'] || '',
     codeLink: project.fields['Code Link'] || '',
     slackLink: project.fields['Slack Link'] || '',

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

@@ -42,7 +42,7 @@ export default async function handler(req, res) {
   const results = {
     id: p.id,
     title: p.fields['Name'] || '',
-    desc: p.fields['Description'] || '',
+    description: p.fields['Description'] || '',
     hours: p.fields['Estimated Hours'],
     slackLink: p.fields['Slack Link'] || '',
     codeLink: p.fields['Code Link'] || '',