Portfolio Editor Menu Cap

src/Tools/_framework/MenuPanelCaps/PortfilioEditorInfoCap.jsx

@@ -0,0 +1,44 @@
+import { set } from 'idb-keyval';
+import React, { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { itemByDoenetId, courseIdAtom, useCourse } from '../../../_reactComponents/Course/CourseActions';
+import { searchParamAtomFamily } from '../NewToolRoot';
+// import { ClipboardLinkButtons } from '../ToolHandlers/CourseToolHandler';
+// import { find_image_label, find_color_label } from './util'
+
+export default function PortfilioEditorInfoCap(){
+  const doenetId = useRecoilValue(searchParamAtomFamily('doenetId'));
+  const [data,setData] = useState({})
+
+  // const activityInfo = useRecoilValue(itemByDoenetId(doenetId));
+  // const courseId = useRecoilValue(courseIdAtom);
+  // const pageId = useRecoilValue(searchParamAtomFamily('pageId'));
+  // const pageInfo = useRecoilValue(itemByDoenetId(pageId));
+
+
+  useEffect(()=>{
+    //Move this to loader when using React Router
+    async function loadData(){
+    const response = await fetch(`/api/getPortfolioActivityData.php?doenetId=${doenetId}`);
+    const respdata = await response.json();
+    setData(respdata.activityData);
+    }
+    if (doenetId){
+      loadData();
+    }
+  },[doenetId])
+
+  if (!data?.label){ return null;}
+
+  // console.log("data",data)
+
+
+return <>
+<div style={{ position: "relative", width: "100%", height:"124px", overflow: "hidden"}}>
+  <img src={data.imagePath} alt="Activity Thumbnail"/>
+</div>
+<div style={{ marginBottom: "5px",padding:'1px 5px' }}>Portfolio Activity Editor</div>
+{/* <div style={{ marginBottom: "5px",padding:'1px 5px' }}>{data.label}</div> */}
+</>
+
+}

src/Tools/_framework/Menus/SupportingFilesMenu.jsx

@@ -296,7 +296,7 @@ export default function SupportingFilesMenu(props){
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
 
   let uploadProgressJSX = uploadProgress.map((info)=>{
-    return <div>{info.fileName} - {info.progressPercent}%</div>
+    return <div key={`${info.fileName}`}>{info.fileName} - {info.progressPercent}%</div>
   })
 
   let uploadingSection = null;
@@ -344,7 +344,7 @@ export default function SupportingFilesMenu(props){
     // }
 
     supportFilesJSX.push(
-    <div>
+    <div key={`${cid}`}>
       <div>
         <span style={{width:'116px'}}>asFileName:</span>
         <EditableText text={asFileName} submit={(text)=>{updateAsFileName(text,cid)}}/>
@@ -380,7 +380,7 @@ export default function SupportingFilesMenu(props){
     //Checkbox for hasHeader attr hasHeader={T/F} default is true Also in DB
 
     supportFilesJSX.push(
-    <div>
+    <div key={`${cid}`}>
       <div>
         <span style={{width:'116px'}}>fileName: <EditableText text={asFileName} submit={(text)=>{updateAsFileName(text,cid)}}/></span>
 

src/Tools/_framework/NewToolRoot.jsx

@@ -497,7 +497,7 @@ let navigationObj = {
     editor: {
       //singleFile
       pageName: 'PortfolioEditor',
-      menuPanelCap: 'EditorInfoCap',
+      menuPanelCap: 'PortfilioEditorInfoCap',
       currentMainPanel: 'EditorViewer',
       currentMenus: [
         'PageVariant',

src/Tools/_framework/Panels/NewMenuPanel.jsx

@@ -272,6 +272,7 @@ const hideLinks = useRecoilValue(searchParamAtomFamily('hideLinks'));
     DriveInfoCap:lazy(() => import('../MenuPanelCaps/DriveInfoCap')),
     DataCap:lazy(() => import('../MenuPanelCaps/DataCap')),
     EditorInfoCap:lazy(() => import('../MenuPanelCaps/EditorInfoCap')),
+    PortfilioEditorInfoCap:lazy(() => import('../MenuPanelCaps/PortfilioEditorInfoCap')),
     AssignmentInfoCap:lazy(() => import('../MenuPanelCaps/AssignmentInfoCap')),
     DraftActivityCap:lazy(() => import('../MenuPanelCaps/DraftActivityCap')),
     ContentInfoCap:lazy(() => import('../MenuPanelCaps/ContentInfoCap')),

src/Tools/singlepage/index.jsx

@@ -62,7 +62,7 @@ const router = createBrowserRouter([
   },
   {
     path: "*",
-    errorElement: <div>Error!</div>,
+    // errorElement: <div>Error!</div>,
     element: (<RecoilRoot>
             <DarkmodeController>
               <MathJaxContext