in process

DHRI-Curriculum · Sep 14, 2023 · eb307a8 · eb307a8
1 parent 82d9e1c
commit eb307a8
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 61 deletions.
diff --git a/components/ConvertMarkdown.js b/components/ConvertMarkdown.js
@@ -19,13 +19,10 @@ import he from 'he';
 
 
 export default function ConvertMarkdown(markdown, uploads, workshop, language, setCode, setEditorOpen, setAskToRun, gitUser, gitRepo, gitFile) {
-
+    console.log(uploads)
 
     const Imager = ({ className, ...props }) => {
         let newProps = { ...props };
-        // if (process.env.NEXT_PUBLIC_GITHUB_ACTIONS === "true") {
-        //     newProps.src = '/' + process.env.NEXT_PUBLIC_REPO_NAME + newProps.src;
-        // }
         const [src, setSrc] = useState(newProps.src);
         const builtURL = `https://raw.githubusercontent.com/${gitUser}/${gitRepo}/main/${newProps.src}`
         return (

diff --git a/components/Download.js b/components/Download.js
@@ -6,7 +6,7 @@ export default function Download(props) {
 
     const allUploads = props.allUploads;
     const chosenUploads = typeof props.files === 'string' ? props.files.split(',') : [];
-
+    console.log(allUploads);
     var filteredUploads = [];
 
     if (chosenUploads != undefined) {

diff --git a/components/SecretComponent.js b/components/SecretComponent.js
@@ -1,10 +1,10 @@
-import React from 'react';
+import { useState } from 'react';
 import { Button } from '@mui/material/';
 import { ArrowDropDown } from '@mui/material/';
 
 
 export default function SecretComponent(props) {
-  const [show, setShow] = React.useState(false);
+  const [show, setShow] = useState(false);
   const children = props.text;
 
   return (

diff --git a/components/Sidebar.js b/components/Sidebar.js
@@ -1,4 +1,5 @@
-import * as React from 'react';
+// import * as React from 'react';
+import { useState, useEffect, Fragment} from 'react';
 import Drawer from '@mui/material/Drawer';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Button from '@mui/material/Button';
@@ -16,7 +17,7 @@ import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 
 export default function SidebarDrawer({ pages, currentPage, handlePageChange }) {
 
-    const [state, setState] = React.useState({
+    const [state, setState] = useState({
         top: false,
         left: false,
         bottom: false,
@@ -43,13 +44,13 @@ export default function SidebarDrawer({ pages, currentPage, handlePageChange })
     }
     const newPages = rearrangePages(pages);
     const CollapsibleList = ({ pages }) => {
-        const [open, setOpen] = React.useState(false)
+        const [open, setOpen] = useState(false)
         const handleClick = () => {
             setOpen(!open)
         }
         return (
             // top items are also pages with children
-            <React.Fragment>
+            <Fragment>
                 {pages.children.length == 0 &&
                     <ListItem>
                         <ListItemText primary={pages.title}
@@ -59,7 +60,7 @@ export default function SidebarDrawer({ pages, currentPage, handlePageChange })
                         />
                     </ListItem>
                 }
-                {pages.children.length > 0 && <React.Fragment>
+                {pages.children.length > 0 && <Fragment>
                     <ListItem>
                         <ListItemText primary={pages.title}
                             className={'sidebar-item'}
@@ -101,13 +102,13 @@ export default function SidebarDrawer({ pages, currentPage, handlePageChange })
                             ))}
                         </List>
                     </Collapse>
-                </React.Fragment>}
-            </React.Fragment>
+                </Fragment>}
+            </Fragment>
         )
     }
 
 
-    React.useEffect(() => {
+    useEffect(() => {
         // set the active page
         // const newPages = [...pages]
         newPages.forEach((page, index) => {
@@ -130,7 +131,7 @@ export default function SidebarDrawer({ pages, currentPage, handlePageChange })
 
     return (
         // icon and button to open top drawer 
-        <React.Fragment>
+        <Fragment>
 
             <Button color="primary"
                 aria-label="open drawer"
@@ -189,6 +190,6 @@ export default function SidebarDrawer({ pages, currentPage, handlePageChange })
                     </List>
                 </nav>
             </Drawer>
-        </React.Fragment>
+        </Fragment>
     );
 }
diff --git a/components/Uploads.js b/components/Uploads.js
@@ -0,0 +1,43 @@
+import useSWRImmutable from "swr/immutable";
+import { useState, useEffect } from "react";
+
+export default function useUploads(allUploads, setAllUploads, gitUser, gitRepo) {
+
+    let headers;
+    const builtURL = `https://api.github.com/repos/${gitUser}/${gitRepo}/contents/uploads`
+
+    if (process.env.NEXT_PUBLIC_GITHUBSECRET === 'true') {
+        headers = new Headers(
+            {
+                'Content-Type': 'application/json',
+                'authorization': `token ${process.env.NEXT_PUBLIC_GITHUBSECRET}`
+            });
+    } else {
+        headers = new Headers(
+            {
+                'Content-Type': 'application/json',
+            });
+    }
+
+    const fetcher = (headers) => (...args) => fetch(...args, {
+        headers: headers,
+        method: 'GET',
+    }).then(
+        res => res.json()
+    ).catch(
+        err => console.log('err', err)
+    )
+
+    const { data: uploads, error } = useSWRImmutable(gitUser ? builtURL : null, fetcher(headers),
+        { revalidateOnMount: true })
+
+
+    useEffect(() => {
+        if (uploads) {
+            setAllUploads(uploads)
+        }
+    }, [uploads])
+
+    return { uploads, error }
+
+}
diff --git a/components/useWorkshop.js b/components/useWorkshop.js
@@ -0,0 +1,51 @@
+import useSWRImmutable from "swr/immutable";
+import { useState, useEffect } from "react";
+
+export default function useWorkshop(gitUser, gitRepo, gitFile){
+
+    let headers;
+
+    if (process.env.NEXT_PUBLIC_GITHUBSECRET === 'true') {
+      headers = new Headers(
+        {
+          'Content-Type': 'application/json',
+          'authorization': `token ${process.env.NEXT_PUBLIC_GITHUBSECRET}`
+        });
+    } else {
+      headers = new Headers(
+        {
+          'Content-Type': 'application/json',
+        });
+    }
+
+    const fetcher = (headers) => (...args) => fetch(...args, {
+      headers: headers,
+      method: 'GET',
+    }).then(
+      res => res.json()
+    ).then(
+      // decode from base64
+      res => Buffer.from(res.content, 'base64').toString()
+    )
+
+    const { data, isLoading, error } = useSWRImmutable(gitUser !=null ? builtURL : null, fetcher(headers),
+      {
+        onSuccess(data) {
+          const matterResult = matter(data)
+          setCurrentFile(matterResult)
+          setContent(matterResult.content)
+          setLanguage(matterResult.data.programming_language);
+          setWorkshopTitle(matterResult.data.title);
+        },
+        onFailure(err) {
+          console.log('err', err)
+          console.log('workshop.url', builtURL)
+        }
+      },
+      {
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+        revalidateIfStale: false,
+      })
+
+}
diff --git a/pages/dynamic/index.js b/pages/dynamic/index.js
@@ -1,11 +1,10 @@
 'use client'
 import Head from 'next/head'
 import matter from 'gray-matter'
-import React, { cache, useEffect, useState } from 'react'
+import { useEffect, useState, Fragment } from 'react'
 import ConvertMarkdown from '../../components/ConvertMarkdown'
 import { useRouter } from 'next/router'
 import Sidebar from '../../components/Sidebar'
-import FrontPage from '../../components/FrontPage';
 import NewFrontPage from '../../components/NewFrontPage';
 import Container from '@mui/material/Container';
 import Button from '@mui/material/Button';
@@ -16,8 +15,8 @@ import Skeleton from '@mui/material/Skeleton';
 import DrawerEditor from '../../components/Editor/DrawerEditor'
 import { styled, useTheme } from '@mui/material/styles';
 import ClassFacilitator from '../../components/ClassFacilitator'
-import useSWRImmutable from 'swr/immutable'
-// import localStorage from 'localStorage';
+import useSWRImmutable from 'swr/immutable';
+import useUploads from '../../components/Uploads'
 
 const drawerWidth = '-30%';
 
@@ -43,7 +42,7 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
 export default function WorkshopPage({
   workshop,
   authors,
-  uploads,
+  // uploads,
   title,
   setTitle
   // facilitators,
@@ -58,21 +57,21 @@ export default function WorkshopPage({
   const [currentHeader, setCurrentHeader] = useState(null);
   const [editorOpen, setEditorOpen] = useState(false);
   const [workshopTitle, setWorkshopTitle] = useState('');
+  const [code, setCode] = useState(null);
+  // communicates with the editor to run code
+  const [askToRun, setAskToRun] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pages, setPages] = useState([]);
+  const [gitUser, setGitUser] = useState(null);
+  const [gitRepo, setGitRepo] = useState(null);
+  const [gitFile, setGitFile] = useState(null);
+  const [builtURL, setBuiltURL] = useState(null);
 
-  // const frontPageContent = FrontPage(
-  //   currentFile,
-  //   {
-  //     workshop,
-  //     authors,
-  //     // uploads,
-  //     // facilitators,
-  //   },
-  //   // facilitatorOpen, setFacilitatorOpen
-  // )
+  const [allUploads, setAllUploads] = useState([]);
+  const uploads = useUploads(allUploads, setAllUploads, gitUser, gitRepo);
 
   // convert markdown to html and split into pages
   const convertContenttoHTML = function (content) {
-
     const htmlifiedContent = ConvertMarkdown(content, uploads, workshop, language, setCode, setEditorOpen, setAskToRun, gitUser, gitRepo, gitFile);
     // split react element array into pages
     const allPages = [];
@@ -91,22 +90,15 @@ export default function WorkshopPage({
       return acc;
     }, []);
 
-    // allPages.unshift(frontPageContent);
-
     return (
       allPages.map((page, index) => {  // page = [h1, p, p]
-        // if (page.props != undefined && page.props.className.includes('frontpage')) {
-        //   return (
-        //     frontPageContent
-        //   )
-        // }
         return (
           <div key={index} className='page-content'>
             {page.map((element, index) => {
               return (
-                <React.Fragment key={index}>
+                <Fragment key={index}>
                   {element}
-                </React.Fragment>
+                </Fragment>
               )
             }
             )}
@@ -117,20 +109,7 @@ export default function WorkshopPage({
     )
   }
 
-
-  // set defaults 
-  const [code, setCode] = useState(null);
-  // communicates with the editor to run code
-  const [askToRun, setAskToRun] = useState(false);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pages, setPages] = useState([]);
-  const [gitUser, setGitUser] = useState(null);
-  const [gitRepo, setGitRepo] = useState(null);
-  const [gitFile, setGitFile] = useState(null);
-  const [builtURL, setBuiltURL] = useState(null);
-
   let headers;
-
   if (process.env.NEXT_PUBLIC_GITHUBSECRET === 'true') {
     headers = new Headers(
       {
@@ -174,9 +153,6 @@ export default function WorkshopPage({
       revalidateIfStale: false,
     })
 
-
-
-
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
     setGitUser(urlParams.get('user'));
@@ -189,7 +165,6 @@ export default function WorkshopPage({
     }
   }, [gitUser, gitRepo, gitFile])
 
-
   useEffect(() => {
     if (data && !currentFile && typeof (data) === 'string') {
       const matterResult = matter(data)
@@ -207,8 +182,6 @@ export default function WorkshopPage({
     }
   }, [currentFile])
 
-
-
   // list of page titles and highlight current page
   useEffect(() => {
     setTitle(workshopTitle);