From fcb60baa24d467484cb6face8534a56242664b3d Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Tue, 26 Mar 2024 16:37:28 -0700
Subject: [PATCH] Remove modal from state, only use ModalOptions instead

---
 .../src/components/AddCriteriaButton.tsx      |  3 ++-
 .../src/components/BlockPickerModal.tsx       |  4 ++--
 teachertool/src/components/CatalogModal.tsx   |  2 +-
 .../src/components/ConfirmationModal.tsx      | 18 ++++++++---------
 .../components/CriteriaInstanceDisplay.tsx    |  9 +++++++--
 teachertool/src/components/HomeScreen.tsx     |  3 ++-
 .../src/components/ImportRubricModal.tsx      |  2 +-
 .../src/components/RubricWorkspace.tsx        |  3 ++-
 teachertool/src/state/actions.ts              | 20 ++++---------------
 teachertool/src/state/reducer.ts              | 10 ++--------
 teachertool/src/state/state.ts                |  4 +---
 teachertool/src/transforms/confirmAsync.ts    | 20 +++++++------------
 teachertool/src/transforms/hideModal.ts       |  2 +-
 teachertool/src/transforms/showBlockPicker.ts | 18 -----------------
 teachertool/src/transforms/showModal.ts       |  4 ++--
 teachertool/src/types/index.ts                |  2 --
 teachertool/src/types/modalOptions.ts         | 20 +++++++++++--------
 17 files changed, 55 insertions(+), 89 deletions(-)
 delete mode 100644 teachertool/src/transforms/showBlockPicker.ts

diff --git a/teachertool/src/components/AddCriteriaButton.tsx b/teachertool/src/components/AddCriteriaButton.tsx
index 5e51815e3676..8e3935c20876 100644
--- a/teachertool/src/components/AddCriteriaButton.tsx
+++ b/teachertool/src/components/AddCriteriaButton.tsx
@@ -5,6 +5,7 @@ import { AppStateContext } from "../state/appStateContext";
 import { useContext, useMemo } from "react";
 import { classList } from "react-common/components/util";
 import { Strings } from "../constants";
+import { CatalogDisplayOptions } from "../types/modalOptions";
 
 interface IProps {}
 
@@ -19,7 +20,7 @@ export const AddCriteriaButton: React.FC<IProps> = ({}) => {
         <Button
             className={classList("inline", "outline-button")}
             label={Strings.AddCriteria}
-            onClick={() => showModal("catalog-display")}
+            onClick={() => showModal({ modal: "catalog-display" } as CatalogDisplayOptions)}
             title={Strings.AddCriteria}
             leftIcon="fas fa-plus-circle"
             disabled={!hasAvailableCriteria}
diff --git a/teachertool/src/components/BlockPickerModal.tsx b/teachertool/src/components/BlockPickerModal.tsx
index cb4be6414a07..8d0c1c811abe 100644
--- a/teachertool/src/components/BlockPickerModal.tsx
+++ b/teachertool/src/components/BlockPickerModal.tsx
@@ -111,7 +111,7 @@ export const BlockPickerModal: React.FC<BlockPickerModalProps> = ({}) => {
     const [blockPickerOptions, setBlockPickerOptions] = useState<BlockPickerOptions | undefined>(undefined);
 
     useEffect(() => {
-        if (teacherTool.modalOptions && teacherTool.modalOptions.modal === "block-picker") {
+        if (teacherTool.modalOptions?.modal === "block-picker") {
             setBlockPickerOptions(teacherTool.modalOptions as BlockPickerOptions);
         } else {
             setBlockPickerOptions(undefined);
@@ -136,7 +136,7 @@ export const BlockPickerModal: React.FC<BlockPickerModalProps> = ({}) => {
         },
     ];
 
-    return teacherTool.modal === "block-picker" && blockPickerOptions ? (
+    return blockPickerOptions ? (
         <Modal
             className={css["block-picker-modal"]}
             title={Strings.SelectBlock}
diff --git a/teachertool/src/components/CatalogModal.tsx b/teachertool/src/components/CatalogModal.tsx
index bcbc2fe88eaf..c755d1e5f8eb 100644
--- a/teachertool/src/components/CatalogModal.tsx
+++ b/teachertool/src/components/CatalogModal.tsx
@@ -59,7 +59,7 @@ export const CatalogModal: React.FC<CatalogModalProps> = ({}) => {
         },
     ];
 
-    return teacherTool.modal === "catalog-display" ? (
+    return teacherTool.modalOptions?.modal === "catalog-display" ? (
         <Modal
             className={css["catalog-modal"]}
             title={lf("Select the criteria you'd like to include")}
diff --git a/teachertool/src/components/ConfirmationModal.tsx b/teachertool/src/components/ConfirmationModal.tsx
index 383d115cb30d..b357b9c970ec 100644
--- a/teachertool/src/components/ConfirmationModal.tsx
+++ b/teachertool/src/components/ConfirmationModal.tsx
@@ -8,24 +8,24 @@ import { ConfirmationModalOptions } from "../types/modalOptions";
 export interface IProps {}
 export const ConfirmationModal: React.FC<IProps> = () => {
     const { state: teacherTool } = useContext(AppStateContext);
-    const [modalOptions, setModalOptions] = useState<ConfirmationModalOptions | undefined>(undefined);
+    const [confirmationModalOptions, setConfirmationModalOptions] = useState<ConfirmationModalOptions | undefined>(undefined);
 
     useEffect(() => {
-        if (teacherTool.modalOptions && teacherTool.modalOptions.modal === "confirmation") {
-            setModalOptions(teacherTool.modalOptions as ConfirmationModalOptions);
+        if (teacherTool.modalOptions?.modal === "confirmation") {
+            setConfirmationModalOptions(teacherTool.modalOptions as ConfirmationModalOptions);
         } else {
-            setModalOptions(undefined);
+            setConfirmationModalOptions(undefined);
         }
     }, [teacherTool.modalOptions]);
 
     function handleCancel() {
         hideModal();
-        modalOptions?.onCancel?.();
+        confirmationModalOptions?.onCancel?.();
     }
 
     function handleContinue() {
         hideModal();
-        modalOptions?.onContinue?.();
+        confirmationModalOptions?.onContinue?.();
     }
 
     const actions = [
@@ -41,9 +41,9 @@ export const ConfirmationModal: React.FC<IProps> = () => {
         },
     ];
 
-    return teacherTool.modal === "confirmation" && modalOptions ? (
-        <Modal title={modalOptions.title} onClose={handleCancel} actions={actions}>
-            {modalOptions.message}
+    return confirmationModalOptions ? (
+        <Modal title={confirmationModalOptions.title} onClose={handleCancel} actions={actions}>
+            {confirmationModalOptions.message}
         </Modal>
     ) : null;
 };
diff --git a/teachertool/src/components/CriteriaInstanceDisplay.tsx b/teachertool/src/components/CriteriaInstanceDisplay.tsx
index 632d046728d0..b26da1a253af 100644
--- a/teachertool/src/components/CriteriaInstanceDisplay.tsx
+++ b/teachertool/src/components/CriteriaInstanceDisplay.tsx
@@ -9,9 +9,10 @@ import css from "./styling/CriteriaInstanceDisplay.module.scss";
 import { useContext, useMemo, useState } from "react";
 import { Input } from "react-common/components/controls/Input";
 import { Button } from "react-common/components/controls/Button";
-import { showBlockPicker } from "../transforms/showBlockPicker";
 import { AppStateContext } from "../state/appStateContext";
 import { Strings } from "../constants";
+import { showModal } from "../transforms/showModal";
+import { BlockPickerOptions } from "../types/modalOptions";
 
 interface InlineInputSegmentProps {
     initialValue: string;
@@ -68,7 +69,11 @@ interface BlockData {
 const BlockInputSegment: React.FC<BlockInputSegmentProps> = ({ instance, param }) => {
     const { state: teacherTool } = useContext(AppStateContext);
     function handleClick() {
-        showBlockPicker(instance.instanceId, param.name);
+        showModal({
+            modal: "block-picker",
+            criteriaInstanceId: instance.instanceId,
+            paramName: param.name,
+        } as BlockPickerOptions);
     }
 
     const blockData = useMemo<BlockData | undefined>(() => {
diff --git a/teachertool/src/components/HomeScreen.tsx b/teachertool/src/components/HomeScreen.tsx
index ba771c7540f7..c0ebebccd2b1 100644
--- a/teachertool/src/components/HomeScreen.tsx
+++ b/teachertool/src/components/HomeScreen.tsx
@@ -18,6 +18,7 @@ import { AppStateContext } from "../state/appStateContext";
 import { CarouselCardSet, RequestStatus, CarouselRubricResourceCard, CardType } from "../types";
 import { useJsonDocRequest } from "../hooks/useJsonDocRequest";
 import { isRubricResourceCard } from "../utils";
+import { ImportRubricOptions } from "../types/modalOptions";
 
 const Welcome: React.FC = () => {
     return (
@@ -148,7 +149,7 @@ const GetStarted: React.FC = () => {
 
     const onImportRubricClicked = () => {
         pxt.tickEvent(Ticks.ImportRubric);
-        showModal("import-rubric");
+        showModal({ modal: "import-rubric" } as ImportRubricOptions);
     };
 
     return (
diff --git a/teachertool/src/components/ImportRubricModal.tsx b/teachertool/src/components/ImportRubricModal.tsx
index 17bb85d332aa..0bc07ae187dd 100644
--- a/teachertool/src/components/ImportRubricModal.tsx
+++ b/teachertool/src/components/ImportRubricModal.tsx
@@ -30,7 +30,7 @@ export const ImportRubricModal: React.FC<IProps> = () => {
         }
     }
 
-    return teacherTool.modal === "import-rubric" ? (
+    return teacherTool.modalOptions?.modal === "import-rubric" ? (
         <Modal title={Strings.ImportRubric} onClose={closeModal} className={css["import-rubric-modal"]}>
             <div className={css["import-rubric"]}>
                 <DragAndDropFileSurface onFileDroppedAsync={handleFileDroppedAsync} errorMessage={errorMessage} />
diff --git a/teachertool/src/components/RubricWorkspace.tsx b/teachertool/src/components/RubricWorkspace.tsx
index 587b7001f290..107cea484ec8 100644
--- a/teachertool/src/components/RubricWorkspace.tsx
+++ b/teachertool/src/components/RubricWorkspace.tsx
@@ -18,10 +18,11 @@ import { setAutorun } from "../transforms/setAutorun";
 import { Strings, Ticks } from "../constants";
 import { resetRubricAsync } from "../transforms/resetRubricAsync";
 import { PrintButton } from "./PrintButton";
+import { ImportRubricOptions } from "../types/modalOptions";
 
 function handleImportRubricClicked() {
     pxt.tickEvent(Ticks.ImportRubric);
-    showModal("import-rubric");
+    showModal({ modal: "import-rubric" } as ImportRubricOptions);
 }
 
 function handleExportRubricClicked() {
diff --git a/teachertool/src/state/actions.ts b/teachertool/src/state/actions.ts
index c62ca3516230..8e0be1f69ddb 100644
--- a/teachertool/src/state/actions.ts
+++ b/teachertool/src/state/actions.ts
@@ -1,4 +1,4 @@
-import { ModalType, ToastWithId, TabName, ProjectData } from "../types";
+import { ToastWithId, TabName, ProjectData } from "../types";
 import { CatalogCriteria, CriteriaResult } from "../types/criteria";
 import { ModalOptions } from "../types/modalOptions";
 import { Rubric } from "../types/rubric";
@@ -56,14 +56,9 @@ type SetRubric = ActionBase & {
     rubric: Rubric;
 };
 
-type SetModalOptions = ActionBase & {
-    type: "SET_MODAL_OPTIONS";
-    options: ModalOptions | undefined;
-};
-
 type ShowModal = ActionBase & {
     type: "SHOW_MODAL";
-    modal: ModalType;
+    modalOptions: ModalOptions;
 };
 
 type HideModal = ActionBase & {
@@ -121,7 +116,6 @@ export type Action =
     | SetTargetConfig
     | SetCatalog
     | SetRubric
-    | SetModalOptions
     | ShowModal
     | HideModal
     | SetValidatorPlans
@@ -178,14 +172,9 @@ const setRubric = (rubric: Rubric): SetRubric => ({
     rubric,
 });
 
-const setModalOptions = (options: ModalOptions | undefined): SetModalOptions => ({
-    type: "SET_MODAL_OPTIONS",
-    options,
-});
-
-const showModal = (modal: ModalType): ShowModal => ({
+const showModal = (modalOptions: ModalOptions): ShowModal => ({
     type: "SHOW_MODAL",
-    modal,
+    modalOptions,
 });
 
 const hideModal = (): HideModal => ({
@@ -239,7 +228,6 @@ export {
     setTargetConfig,
     setCatalog,
     setRubric,
-    setModalOptions,
     showModal,
     hideModal,
     setValidatorPlans,
diff --git a/teachertool/src/state/reducer.ts b/teachertool/src/state/reducer.ts
index e01cd99f9cf8..a1df05ebb446 100644
--- a/teachertool/src/state/reducer.ts
+++ b/teachertool/src/state/reducer.ts
@@ -83,22 +83,16 @@ export default function reducer(state: AppState, action: Action): AppState {
                 rubric: action.rubric,
             };
         }
-        case "SET_MODAL_OPTIONS": {
-            return {
-                ...state,
-                modalOptions: action.options,
-            };
-        }
         case "SHOW_MODAL": {
             return {
                 ...state,
-                modal: action.modal,
+                modalOptions: action.modalOptions,
             };
         }
         case "HIDE_MODAL": {
             return {
                 ...state,
-                modal: undefined,
+                modalOptions: undefined,
             };
         }
         case "SET_VALIDATOR_PLANS": {
diff --git a/teachertool/src/state/state.ts b/teachertool/src/state/state.ts
index 828a7210959c..5730016cb447 100644
--- a/teachertool/src/state/state.ts
+++ b/teachertool/src/state/state.ts
@@ -1,4 +1,4 @@
-import { ModalType, ToastWithId, TabName, ProjectData } from "../types";
+import { ToastWithId, TabName, ProjectData } from "../types";
 import { CatalogCriteria, CriteriaResult } from "../types/criteria";
 import { ModalOptions } from "../types/modalOptions";
 import { Rubric } from "../types/rubric";
@@ -11,7 +11,6 @@ export type AppState = {
     projectMetadata: ProjectData | undefined;
     catalog: CatalogCriteria[] | undefined;
     rubric: Rubric;
-    modal: ModalType | undefined;
     activeTab: TabName;
     validatorPlans: pxt.blocks.ValidatorPlan[] | undefined;
     autorun: boolean;
@@ -29,7 +28,6 @@ export const initialAppState: AppState = {
     projectMetadata: undefined,
     catalog: undefined,
     rubric: makeRubric(),
-    modal: undefined,
     activeTab: "home",
     validatorPlans: undefined,
     autorun: false,
diff --git a/teachertool/src/transforms/confirmAsync.ts b/teachertool/src/transforms/confirmAsync.ts
index 0f63e58a2b0a..b252e2cd0bf0 100644
--- a/teachertool/src/transforms/confirmAsync.ts
+++ b/teachertool/src/transforms/confirmAsync.ts
@@ -1,20 +1,14 @@
-import { stateAndDispatch } from "../state";
 import { showModal } from "./showModal";
 import { ConfirmationModalOptions } from "../types/modalOptions";
-import * as Actions from "../state/actions";
 
 export async function confirmAsync(title: string, message: string): Promise<boolean> {
-    const { dispatch } = stateAndDispatch();
     return new Promise<boolean>(resolve => {
-        dispatch(
-            Actions.setModalOptions({
-                modal: "confirmation",
-                title,
-                message,
-                onCancel: () => resolve(false),
-                onContinue: () => resolve(true),
-            } as ConfirmationModalOptions)
-        );
-        showModal("confirmation");
+        showModal({
+            modal: "confirmation",
+            title,
+            message,
+            onCancel: () => resolve(false),
+            onContinue: () => resolve(true),
+        } as ConfirmationModalOptions);
     });
 }
diff --git a/teachertool/src/transforms/hideModal.ts b/teachertool/src/transforms/hideModal.ts
index ad80749e8902..639630a4477c 100644
--- a/teachertool/src/transforms/hideModal.ts
+++ b/teachertool/src/transforms/hideModal.ts
@@ -5,7 +5,7 @@ import * as Actions from "../state/actions";
 export function hideModal() {
     const { state: teacherTool, dispatch } = stateAndDispatch();
 
-    if (teacherTool.modal !== undefined) {
+    if (teacherTool.modalOptions !== undefined) {
         dispatch(Actions.hideModal());
     } else {
         logDebug(`Trying to hide model when no modal is active`);
diff --git a/teachertool/src/transforms/showBlockPicker.ts b/teachertool/src/transforms/showBlockPicker.ts
deleted file mode 100644
index b94eb3d597da..000000000000
--- a/teachertool/src/transforms/showBlockPicker.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { stateAndDispatch } from "../state";
-import { showModal } from "./showModal";
-import * as Actions from "../state/actions";
-import { BlockPickerOptions } from "../types/modalOptions";
-
-export function showBlockPicker(criteriaInstanceId: string, paramName: string) {
-    const { dispatch } = stateAndDispatch();
-
-    dispatch(
-        Actions.setModalOptions({
-            modal: "block-picker",
-            criteriaInstanceId,
-            paramName,
-        } as BlockPickerOptions)
-    );
-
-    showModal("block-picker");
-}
diff --git a/teachertool/src/transforms/showModal.ts b/teachertool/src/transforms/showModal.ts
index f8154135e01b..3e51dba88c97 100644
--- a/teachertool/src/transforms/showModal.ts
+++ b/teachertool/src/transforms/showModal.ts
@@ -1,8 +1,8 @@
 import { stateAndDispatch } from "../state";
 import * as Actions from "../state/actions";
-import { ModalType } from "../types";
+import { ModalOptions } from "../types/modalOptions";
 
-export function showModal(modal: ModalType) {
+export function showModal(modal: ModalOptions) {
     const { dispatch } = stateAndDispatch();
     dispatch(Actions.showModal(modal));
 }
diff --git a/teachertool/src/types/index.ts b/teachertool/src/types/index.ts
index 993dbca17e35..b16bb1e5849c 100644
--- a/teachertool/src/types/index.ts
+++ b/teachertool/src/types/index.ts
@@ -21,8 +21,6 @@ export type ToastWithId = Toast & {
     id: string;
 };
 
-export type ModalType = "catalog-display" | "import-rubric" | "confirmation" | "block-picker";
-
 export type TabName = "home" | "rubric" | "results";
 
 export type CardType = "rubric-resource";
diff --git a/teachertool/src/types/modalOptions.ts b/teachertool/src/types/modalOptions.ts
index 27bb2b838de0..5663583f5beb 100644
--- a/teachertool/src/types/modalOptions.ts
+++ b/teachertool/src/types/modalOptions.ts
@@ -1,10 +1,4 @@
-import { ModalType } from ".";
-
-export interface ModalOptions {
-    modal: ModalType;
-}
-
-export interface ConfirmationModalOptions extends ModalOptions {
+export type ConfirmationModalOptions = {
     modal: "confirmation";
     title: string;
     message: string;
@@ -12,8 +6,18 @@ export interface ConfirmationModalOptions extends ModalOptions {
     onContinue: () => void;
 }
 
-export interface BlockPickerOptions extends ModalOptions {
+export type BlockPickerOptions = {
     modal: "block-picker";
     criteriaInstanceId: string;
     paramName: string;
 }
+
+export type CatalogDisplayOptions = {
+    modal: "catalog-display";
+}
+
+export type ImportRubricOptions = {
+    modal: "import-rubric";
+}
+
+export type ModalOptions = CatalogDisplayOptions | ImportRubricOptions | ConfirmationModalOptions | BlockPickerOptions;