Loader for portfilio Menu Cap

jaltekruse · Mar 21, 2023 · 4115f83 · 4115f83
1 parent 4772f60
commit 4115f83
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 34 deletions.
diff --git a/src/Tools/_framework/MenuPanelCaps/PortfilioEditorInfoCap.jsx b/src/Tools/_framework/MenuPanelCaps/PortfilioEditorInfoCap.jsx
@@ -1,38 +1,19 @@
-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'
+import React from 'react';
+import { useLoaderData } from 'react-router';
 
-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)
+export async function loader(){
+  // export async function loader({params}){
+  let params = new URL(document.location).searchParams;
+  let doenetId = params.get("doenetId"); // is the string "Jonathan Smith".
+  const response = await fetch(`/api/getPortfolioActivityData.php?doenetId=${doenetId}`);
+  const data = await response.json();
 
+  return data.activityData;
+}
 
+export default function PortfilioEditorInfoCap(){
+  let data = useLoaderData();
+
 return <>
 <div style={{ position: "relative", width: "100%", height:"124px", overflow: "hidden"}}>
   <img src={data.imagePath} alt="Activity Thumbnail"/>

diff --git a/src/Tools/_framework/NewToolRoot.jsx b/src/Tools/_framework/NewToolRoot.jsx
@@ -493,7 +493,7 @@ let navigationObj = {
       hasNoMenuPanel: true,
     }
   },
-  portfolio: {
+  portfolioeditor: {
     editor: {
       //singleFile
       pageName: 'PortfolioEditor',

diff --git a/src/Tools/_framework/Panels/NewSupportPanel.jsx b/src/Tools/_framework/Panels/NewSupportPanel.jsx
@@ -59,7 +59,7 @@ export default function SupportPanel({ hide, children, panelTitles=[], panelInde
     return (
       <>
       <ControlsWrapper $hide={hide} aria-label="complementary controls" data-test="Support Panel Controls">
-        {recoilPageToolView?.page == 'portfolio' ? <Button value="Settings" onClick={()=>navigate(`/portfolio/${doenetId}/settings`)}/> : null }
+        {recoilPageToolView?.page == 'portfolioeditor' ? <Button value="Settings" onClick={()=>navigate(`/portfolio/${doenetId}/settings`)}/> : null }
         <Button value="Documentation" onClick={()=>window.open("/public?tool=editor&doenetId=_DG5JOeFNTc5rpWuf2uA-q")}/>
       </ControlsWrapper>
     <SupportWrapper  $hide={hide} role="complementary" data-test="Support Panel">{children}</SupportWrapper>

diff --git a/src/Tools/singlepage/index.jsx b/src/Tools/singlepage/index.jsx
@@ -18,6 +18,7 @@ import {loader as siteLoader, SiteHeader} from "../_framework/Paths/SiteHeader";
 import {loader as caroselLoader, Home} from "../_framework/Paths/Home";
 import {loader as portfolioActivitySettingsLoader, action as portfolioActivitySettingsAction, PortfolioActivitySettings} from "../_framework/Paths/PortfolioActivitySettings";
 import {loader as portfolioLoader, action as portfolioAction, Portfolio } from "../_framework/Paths/Portfolio";
+import { loader as portfolioEditorMenuCapLoader } from "../_framework/MenuPanelCaps/PortfilioEditorInfoCap";
 
 const router = createBrowserRouter([
   {
@@ -60,6 +61,22 @@ const router = createBrowserRouter([
     action: portfolioActivitySettingsAction,
     element: <RecoilRoot><PortfolioActivitySettings /></RecoilRoot>,
   },
+  {
+    path: "/portfolioeditor",
+    loader: portfolioEditorMenuCapLoader,
+    // errorElement: <div>Error!</div>,
+    element: (<RecoilRoot>
+            <DarkmodeController>
+              <MathJaxContext
+                version={2}
+                config={mathjaxConfig}
+                onStartup={(mathJax) => (mathJax.Hub.processSectionDelay = 0)}
+              >
+                <ToolRoot />
+              </MathJaxContext>
+            </DarkmodeController>
+    </RecoilRoot>),
+  },
   {
     path: "*",
     // errorElement: <div>Error!</div>,