Disable used criteria instead of hiding them

microsoft · Apr 19, 2024 · 0041831 · 0041831
1 parent 699c840
commit 0041831
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 28 deletions.
diff --git a/teachertool/src/components/AddCriteriaButton.tsx b/teachertool/src/components/AddCriteriaButton.tsx
@@ -1,8 +1,6 @@
-import { getSelectableCatalogCriteria } from "../state/helpers";
 import { Button } from "react-common/components/controls/Button";
-import { showModal } from "../transforms/showModal";
 import { AppStateContext } from "../state/appStateContext";
-import { useContext, useMemo } from "react";
+import { useContext } from "react";
 import { classList } from "react-common/components/util";
 import { Strings } from "../constants";
 import { setCatalogOpen } from "../transforms/setCatalogOpen";
@@ -12,18 +10,13 @@ interface IProps {}
 export const AddCriteriaButton: React.FC<IProps> = ({}) => {
     const { state: teacherTool } = useContext(AppStateContext);
 
-    const hasAvailableCriteria = useMemo<boolean>(
-        () => getSelectableCatalogCriteria(teacherTool).length > 0,
-        [teacherTool.catalog, teacherTool.rubric]
-    );
     return !teacherTool.catalogOpen ? (
         <Button
             className={classList("inline", "outline-button")}
             label={Strings.AddCriteria}
             onClick={() => setCatalogOpen(true)}
             title={Strings.AddCriteria}
             leftIcon="fas fa-plus-circle"
-            disabled={!hasAvailableCriteria}
         />
     ) : null;
 };
diff --git a/teachertool/src/components/CatalogOverlay.tsx b/teachertool/src/components/CatalogOverlay.tsx
@@ -2,7 +2,7 @@ import React, { useContext, useMemo, useState } from "react";
 import { AppStateContext } from "../state/appStateContext";
 import { addCriteriaToRubric } from "../transforms/addCriteriaToRubric";
 import { CatalogCriteria } from "../types/criteria";
-import { getSelectableCatalogCriteria } from "../state/helpers";
+import { criteriaIsSelectable, getCatalogCriteria } from "../state/helpers";
 import { ReadOnlyCriteriaDisplay } from "./ReadonlyCriteriaDisplay";
 import { Strings } from "../constants";
 import { Button } from "react-common/components/controls/Button";
@@ -14,8 +14,8 @@ interface CatalogOverlayProps {}
 export const CatalogOverlay: React.FC<CatalogOverlayProps> = ({}) => {
     const { state: teacherTool } = useContext(AppStateContext);
 
-    const selectableCriteria = useMemo<CatalogCriteria[]>(
-        () => getSelectableCatalogCriteria(teacherTool),
+    const criteria = useMemo<CatalogCriteria[]>(
+        () => getCatalogCriteria(teacherTool),
         [teacherTool.catalog, teacherTool.rubric]
     );
 
@@ -44,16 +44,17 @@ export const CatalogOverlay: React.FC<CatalogOverlayProps> = ({}) => {
     const CatalogList: React.FC = () => {
         return (
             <div className={css["catalog-list"]}>
-                {selectableCriteria.map(criteria => {
+                {criteria.map(c => {
                     return (
-                        criteria?.template && (
+                        c.template && (
                             <Button
-                                id={`criteria_${criteria.id}`}
-                                title={getReadableCriteriaTemplate(criteria)}
-                                key={criteria.id}
+                                id={`criteria_${c.id}`}
+                                title={getReadableCriteriaTemplate(c)}
+                                key={c.id}
                                 className={css["catalog-item"]}
-                                label={<ReadOnlyCriteriaDisplay catalogCriteria={criteria} showDescription={true} />}
-                                onClick={() => handleCriteriaClick(criteria)}
+                                label={<ReadOnlyCriteriaDisplay catalogCriteria={c} showDescription={true} />}
+                                onClick={() => handleCriteriaClick(c)}
+                                disabled={!criteriaIsSelectable(teacherTool, c)}
                             />
                         )
                     );

diff --git a/teachertool/src/state/helpers.ts b/teachertool/src/state/helpers.ts
@@ -75,17 +75,12 @@ export function getSafeRubricName(state: AppState): string | undefined {
     return state.rubric.name || Strings.UntitledRubric;
 }
 
-export function getSelectableCatalogCriteria(state: AppState): CatalogCriteria[] {
-    const usedCatalogCriteria = state.rubric.criteria.map(c => c.catalogCriteriaId) ?? [];
+export function getCatalogCriteria(state: AppState): CatalogCriteria[] {
+    return state.catalog?.filter(c => !c.hideInCatalog) ?? [];
+}
 
+export function criteriaIsSelectable(state: AppState, catalogCriteria: CatalogCriteria): boolean {
     // Return a criteria as selectable if it has parameters (so it can be used multiple times in a rubric)
     // or if it has not yet been used in the active rubric.
-    return (
-        state.catalog?.filter(
-            catalogCriteria =>
-                ((catalogCriteria.params && catalogCriteria.params.length > 0) ||
-                    !usedCatalogCriteria.includes(catalogCriteria.id)) &&
-                !catalogCriteria.hideInCatalog
-        ) ?? []
-    );
+    return (catalogCriteria.params && catalogCriteria.params.length > 0) || !state.rubric.criteria.some(c => c.catalogCriteriaId === catalogCriteria.id)
 }