From 099e98d2e888a178b0fd6d8ed942e144a156d2e3 Mon Sep 17 00:00:00 2001
From: Max Wofford <max@maxwofford.com>
Date: Mon, 19 Aug 2024 16:51:58 -0400
Subject: [PATCH] Add styling improvements to showcase form

---
 components/arcade/showcase/project-edit.js    | 63 ++----------
 components/arcade/showcase/project-view.js    | 99 ++++++++++---------
 components/arcade/showcase/readme-renderer.js |  6 +-
 .../showcase/readme-renderer.module.css       |  3 +
 .../arcade/showcase/youtube-renderer.js       | 18 ++++
 package.json                                  |  1 +
 .../showcase/projects/[projectID]/edit.js     |  2 +-
 yarn.lock                                     |  5 +
 8 files changed, 90 insertions(+), 107 deletions(-)
 create mode 100644 components/arcade/showcase/youtube-renderer.js

diff --git a/components/arcade/showcase/project-edit.js b/components/arcade/showcase/project-edit.js
index 24edfa89..814a87bc 100644
--- a/components/arcade/showcase/project-edit.js
+++ b/components/arcade/showcase/project-edit.js
@@ -1,26 +1,14 @@
-import { Input, Label, Text, Flex, Box, Grid } from 'theme-ui'
+import { Input, Label, Text, Box, Grid } from 'theme-ui'
 import ProjectView from './project-view'
 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'
 /** @jsxImportSource theme-ui */
 
 const ProjectEditForm = ({ project }) => {
-  // const [previewProject, setPreviewProject] = useState(project)
-  const [screenshot, setScreenshot] = useState(project.screenshot)
-  const [newScreenshot, setNewScreenshot] = useState('')
-
-  const [video, setVideo] = useState(project.video)
-  const [newVideo, setNewVideo] = useState('')
-
-  function publishedChanges(e) {
-    console.log('published changes', e)
-  }
   const { status, formProps, useField, data } = useForm(
     `/api/arcade/showcase/projects/${project.id}/edit/`,
-    publishedChanges,
+    null,
     {
       method: 'PATCH',
       initData: { ...project, recordId: project.id },
@@ -29,38 +17,6 @@ const ProjectEditForm = ({ project }) => {
     }
   )
 
-  const updateScreenshot = newMedia => {
-    if (screenshot.some(item => item === newMedia)) {
-      alert('This media already exists and cannot be added.')
-      return
-    }
-    setScreenshot(screenshot => [...screenshot, newMedia])
-  }
-
-  const deleteScreenshot = deletedMedia => {
-    setScreenshot(screenshot.filter(item => !item.includes(deletedMedia)))
-  }
-
-  const updateNewScreenshot = e => {
-    setNewScreenshot(e.target.value)
-  }
-
-  const updateVideo = newMedia => {
-    if (video.some(item => item === newMedia)) {
-      alert('This media already exists and cannot be added.')
-      return
-    }
-    setVideo(video => [...video, newMedia])
-  }
-
-  const deleteVideo = deletedMedia => {
-    setVideo(video.filter(item => !item.includes(deletedMedia)))
-  }
-
-  const updateNewVideo = e => {
-    setNewVideo(e.target.value)
-  }
-
   const previewProject = {
     ...data
   }
@@ -160,11 +116,11 @@ const ProjectEditForm = ({ project }) => {
           </Label>
 
           <Label>
-            <Text>Screenshot link</Text>
+            <Text>Screenshot link (required)</Text>
             <Text variant="caption">
-              Demo your work! No hosted link? Try{' '}
+              Demo your work! Post an image in{' '}
               <a href="https://hackclub.slack.com/archives/C016DEDUL87" target="_blank">#cdn</a>{' '}
-              or <a href="https://tmpfiles.org/?upload" target="_blank">tmpfiles</a>
+              on Slack and paste the link here.
             </Text>
             <Input
               {...useField('screenshot')}
@@ -173,11 +129,9 @@ const ProjectEditForm = ({ project }) => {
             />
           </Label>
           <Label>
-            <Text>Video link</Text>
+            <Text>Video demo (optional)</Text>
             <Text variant="caption">
-              Add a link to your demo video! Need a host? Try{' '}
-              <a href="https://hackclub.slack.com/archives/C016DEDUL87" target="_blank">#cdn</a>{' '}
-              or <a href="https://tmpfiles.org/?upload" target="_blank">tmpfiles</a>
+              Short video demoing your project. YouTube link. Suggested for hardware projects.
             </Text>
             <Input
               {...useField('video')}
@@ -191,8 +145,6 @@ const ProjectEditForm = ({ project }) => {
             <Input
               {...useField('color')}
               type="color"
-              // value={color}
-              // onChange={handleColorChange}
               sx={{
                 width: '150px',
                 height: '50px',
@@ -240,7 +192,6 @@ const ProjectEditForm = ({ project }) => {
         </form>
         <Box
           sx={{
-            // backgroundColor: color,
             border: '2px dashed #09AFB4',
             borderRadius: '5px'
           }}
diff --git a/components/arcade/showcase/project-view.js b/components/arcade/showcase/project-view.js
index 17664eef..3d93dfff 100644
--- a/components/arcade/showcase/project-view.js
+++ b/components/arcade/showcase/project-view.js
@@ -4,6 +4,7 @@ import randomNotFoundImg from './random-not-found-img'
 import { Button, Text } from 'theme-ui'
 import Icon from '@hackclub/icons'
 import ReadmeRenderer from './readme-renderer'
+import YoutubeRenderer from './youtube-renderer'
 /** @jsxImportSource theme-ui */
 
 function darkenColor(hex, factor) {
@@ -66,23 +67,21 @@ const ProjectView = ({
     setInvertedColor(invertColor(textColor))
   }, [color])
 
-  function convertToRawUrl(githubUrl) {
-    if (!githubUrl.includes('github.com')) {
-      // throw new Error('Invalid GitHub URL')
-      return ''
-    }
+  // function convertToRawUrl(githubUrl) {
+  //   if (!githubUrl.includes('github.com')) {
+  //     // throw new Error('Invalid GitHub URL')
+  //     return ''
+  //   }
 
-    return githubUrl
-      .replace('github.com', 'raw.githubusercontent.com')
-      .replace('/blob/', '/')
-  }
+  //   return githubUrl
+  //     .replace('github.com', 'raw.githubusercontent.com')
+  //     .replace('/blob/', '/')
+  // }
 
   const [markdown, setMarkdown] = useState('')
 
   useEffect(() => {
-    console.log(readMeLink)
     const fetchMarkdown = async () => {
-      // const rawReadMeLink = convertToRawUrl(readMeLink)
       if (readMeLink) {
         try {
           const res = await fetch(readMeLink)
@@ -114,6 +113,43 @@ const ProjectView = ({
       >
         <h1 className="slackey">{title}</h1>
         <h3>By {user}</h3>
+
+        <div
+          className={styles.buttonGroup}
+          sx={{ width: '90%', margin: 'auto', pt: 2, pb: 2 }}
+        >
+          {playLink && (
+            <Button
+              as="a"
+              sx={{
+                backgroundColor: '#FF5C00',
+                color: '#ebebeb',
+                textSizeAdjust: '16px',
+                borderRadius: '10px'
+              }}
+              href={playLink}
+              target="_blank"
+              rel="noopener"
+            >
+              Play Now
+            </Button>
+          )}
+
+          <Button
+            as="a"
+            sx={{
+              backgroundColor: '#09AFB4',
+              color: '#ebebeb',
+              textSizeAdjust: '16px',
+              borderRadius: '10px'
+            }}
+            href={codeLink}
+            target="_blank"
+            rel="noopener"
+          >
+            {codeHost}
+          </Button>
+        </div>
         <Text
           as="a"
           href="/arcade/showcase/my"
@@ -176,7 +212,8 @@ const ProjectView = ({
               />
             </div>
           )}
-          { video != '' && (
+          <YoutubeRenderer youtubeLink={video} />
+          {/* { video != '' && (
             <div
               sx={{
                 display: 'flex',
@@ -189,7 +226,7 @@ const ProjectView = ({
                 Your browser does not support the video tag.
               </video>
             </div>
-          )}
+          )} */}
         </div>
 
         <p
@@ -200,42 +237,6 @@ const ProjectView = ({
         </p>
       </div>
 
-      <div
-        className={styles.buttonGroup}
-        sx={{ width: '90%', margin: 'auto', pt: 1, pb: 5 }}
-      >
-        {playLink && (
-          <Button
-            as="a"
-            sx={{
-              backgroundColor: '#FF5C00',
-              color: '#ebebeb',
-              textSizeAdjust: '16px',
-              borderRadius: '10px'
-            }}
-            href={playLink}
-            target="_blank"
-            rel="noopener"
-          >
-            Play Now
-          </Button>
-        )}
-
-        <Button
-          as="a"
-          sx={{
-            backgroundColor: '#09AFB4',
-            color: '#ebebeb',
-            textSizeAdjust: '16px',
-            borderRadius: '10px'
-          }}
-          href={codeLink}
-          target="_blank"
-          rel="noopener"
-        >
-          {codeHost}
-        </Button>
-      </div>
     </div>
   )
 }
diff --git a/components/arcade/showcase/readme-renderer.js b/components/arcade/showcase/readme-renderer.js
index 53acaacc..a4dc5f40 100644
--- a/components/arcade/showcase/readme-renderer.js
+++ b/components/arcade/showcase/readme-renderer.js
@@ -4,7 +4,11 @@ import style from './readme-renderer.module.css'
 
 const ReadmeRenderer = ({ markdown }) => {
   return (
-    <ReactMarkdown className={style.reactMarkDown} remarkPlugins={[remarkGfm]}>
+    <ReactMarkdown
+      className={style.reactMarkDown}
+      remarkPlugins={[remarkGfm]}
+      linkTarget={'_blank'}
+      >
       {markdown}
     </ReactMarkdown>
   )
diff --git a/components/arcade/showcase/readme-renderer.module.css b/components/arcade/showcase/readme-renderer.module.css
index d4d04d75..18f20d2b 100644
--- a/components/arcade/showcase/readme-renderer.module.css
+++ b/components/arcade/showcase/readme-renderer.module.css
@@ -1,3 +1,6 @@
+.reactMarkDown {
+  text-align: left;
+}
 .reactMarkDown img {
   max-width: 100%;
 }
\ No newline at end of file
diff --git a/components/arcade/showcase/youtube-renderer.js b/components/arcade/showcase/youtube-renderer.js
new file mode 100644
index 00000000..6b070e2b
--- /dev/null
+++ b/components/arcade/showcase/youtube-renderer.js
@@ -0,0 +1,18 @@
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
+
+const YoutubeRenderer = ({ youtubeLink }) => {
+  if (!youtubeLink) return null
+  const youtubeID = youtubeLink.split('v=')[1]
+  if (!youtubeID) return <p>Invalid YouTube link: "{youtubeLink}"</p>
+
+  return (
+    <LiteYouTubeEmbed
+      id={youtubeID}
+      adNetwork={false}
+      noCookie={true}
+    />
+  )
+}
+
+export default YoutubeRenderer
\ No newline at end of file
diff --git a/package.json b/package.json
index eb5ae56e..56cd62d1 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "react-dom": "^17.0.2",
     "react-horizontal-scrolling-menu": "^6.0.2",
     "react-konami-code": "^2.3.0",
+    "react-lite-youtube-embed": "^2.4.0",
     "react-markdown": "^8",
     "react-marquee-slider": "^1.1.5",
     "react-masonry-css": "^1.0.16",
diff --git a/pages/api/arcade/showcase/projects/[projectID]/edit.js b/pages/api/arcade/showcase/projects/[projectID]/edit.js
index a430dc59..09166542 100644
--- a/pages/api/arcade/showcase/projects/[projectID]/edit.js
+++ b/pages/api/arcade/showcase/projects/[projectID]/edit.js
@@ -19,7 +19,7 @@ export default async function handler(req, res) {
   updatedFields['Code Link'] = body.codeLink
   updatedFields['Play Link'] = body.playLink
   updatedFields['Screenshot'] = [body.screenshot].map(i => ({ url: i }))
-  updatedFields['Video'] = [body.video].map(i => ({ url: i }))
+  // updatedFields['Video'] = [body.video].map(i => ({ url: i }))
   updatedFields['color'] = body.color
   updatedFields['textColor'] = body.textColor
   updatedFields['ScreenshotLink'] = body.screenshot
diff --git a/yarn.lock b/yarn.lock
index 3620f3e1..f6f08750 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7478,6 +7478,11 @@ react-konami-code@^2.3.0:
   dependencies:
     prop-types "^15.8.1"
 
+react-lite-youtube-embed@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-lite-youtube-embed/-/react-lite-youtube-embed-2.4.0.tgz#1f56a12be1061d50431444d52d836bd09a1283a2"
+  integrity sha512-Xo6cM1zPlROvvM97JkqQIoXstlQDaC4+DawmM7BB7Hh1cXrkBHEGq1iJlQxBTUWAUklmpcC7ph7qg7CztXtABQ==
+
 react-markdown@^8:
   version "8.0.7"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-8.0.7.tgz#c8dbd1b9ba5f1c5e7e5f2a44de465a3caafdf89b"