From 4115f8326e001a6c53a9794474bf423f7d44bda5 Mon Sep 17 00:00:00 2001
From: Kevin Charles <kevinmcharles@gmail.com>
Date: Tue, 21 Mar 2023 20:57:02 +0000
Subject: [PATCH] Loader for portfilio Menu Cap

---
 .../MenuPanelCaps/PortfilioEditorInfoCap.jsx  | 45 ++++++-------------
 src/Tools/_framework/NewToolRoot.jsx          |  2 +-
 .../_framework/Panels/NewSupportPanel.jsx     |  2 +-
 src/Tools/singlepage/index.jsx                | 17 +++++++
 4 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/src/Tools/_framework/MenuPanelCaps/PortfilioEditorInfoCap.jsx b/src/Tools/_framework/MenuPanelCaps/PortfilioEditorInfoCap.jsx
index 2aff7cbccf..0da57f29cc 100644
--- 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
index c7954e3ed8..625ef8e294 100644
--- 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
index b4dbab0ff2..5c56cc5382 100644
--- 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
index b29ce57dde..a2a3627c7d 100644
--- 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>,