Remove modal from state, only use ModalOptions instead

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}

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}

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")}

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;
 };

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>(() => {

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 (

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} />

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() {

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,

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": {

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,

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);
     });
 }

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`);

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));
 }

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";

teachertool/src/types/modalOptions.ts

@@ -1,19 +1,23 @@
-import { ModalType } from ".";
-
-export interface ModalOptions {
-    modal: ModalType;
-}
-
-export interface ConfirmationModalOptions extends ModalOptions {
+export type ConfirmationModalOptions = {
     modal: "confirmation";
     title: string;
     message: string;
     onCancel: () => void;
     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;