diff --git a/teachertool/src/components/EvalResultDisplay.tsx b/teachertool/src/components/EvalResultDisplay.tsx index 8eff3eb21f6f..d9aca0e2146a 100644 --- a/teachertool/src/components/EvalResultDisplay.tsx +++ b/teachertool/src/components/EvalResultDisplay.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { useContext } from "react"; +import { useContext, useRef } from "react"; import css from "./styling/EvalResultDisplay.module.scss"; import { AppStateContext } from "../state/appStateContext"; import { CriteriaResultEntry } from "./CriteriaResultEntry"; @@ -27,13 +27,13 @@ const ResultsHeader: React.FC = () => { ); }; -export const EvalResultDisplay: React.FC<{}> = () => { +export const EvalResultDisplay: React.FC<{printRef: React.RefObject}> = ({ printRef }) => { const { state: teacherTool } = useContext(AppStateContext); return ( <> {teacherTool.projectMetadata && ( -
+
{Object.keys(teacherTool.evalResults ?? {}).map(criteriaInstanceId => { return ; diff --git a/teachertool/src/components/PrintButton.tsx b/teachertool/src/components/PrintButton.tsx index e066046eeae2..cf3333d83e33 100644 --- a/teachertool/src/components/PrintButton.tsx +++ b/teachertool/src/components/PrintButton.tsx @@ -5,13 +5,12 @@ import { Toolbar } from "./Toolbar"; interface PrintButtonProps { printRef: React.RefObject; - onHandlePrint: () => void; + onHandlePrint?: () => void; } export const PrintButton: React.FC = ({ printRef, onHandlePrint }) => { const handlePrint = useReactToPrint({ content: () => printRef.current, - onAfterPrint: onHandlePrint, }); return ; }; diff --git a/teachertool/src/components/RubricWorkspace.tsx b/teachertool/src/components/RubricWorkspace.tsx index 441dbbfcb793..9fa27c4a2a11 100644 --- a/teachertool/src/components/RubricWorkspace.tsx +++ b/teachertool/src/components/RubricWorkspace.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import css from "./styling/RubricWorkspace.module.scss"; -import { useContext } from "react"; +import { useContext, useRef } from "react"; import { AppStateContext, stateAndDispatch } from "../state/appStateContext"; import { Toolbar } from "./Toolbar"; import { TabGroup, TabButton } from "./TabGroup"; @@ -17,6 +17,7 @@ import { isProjectLoaded } from "../state/helpers"; import { setAutorun } from "../transforms/setAutorun"; import { Strings, Ticks } from "../constants"; import { resetRubricAsync } from "../transforms/resetRubricAsync"; +import { PrintButton } from "./PrintButton"; function handleImportRubricClicked() { pxt.tickEvent(Ticks.ImportRubric); @@ -53,7 +54,11 @@ const WorkspaceTabButtons: React.FC = () => { ); }; -const WorkspaceTabPanels: React.FC = () => { +interface WithRefProps { + printRef: React.RefObject; +} + +const WorkspaceTabPanels: React.FC = ({ printRef }) => { return ( <> @@ -63,7 +68,7 @@ const WorkspaceTabPanels: React.FC = () => { - + ); @@ -101,7 +106,7 @@ function getActionMenuItems(tab: TabName): MenuItem[] { return items; } -const WorkspaceToolbarButtons: React.FC = () => { +const WorkspaceToolbarButtons: React.FC = ({ printRef }) => { const { state: teacherTool } = useContext(AppStateContext); const { activeTab, autorun } = teacherTool; @@ -115,7 +120,7 @@ const WorkspaceToolbarButtons: React.FC = () => { return ( {activeTab === "results" && ( - console.log("Print")} /> + )} {/* Conditional buttons go above this line */} { }; export const RubricWorkspace: React.FC = () => { + const printRef = useRef(null); return (
- } right={} /> - + } right={} /> +
); };