diff --git a/src/components/ActivityButtons.tsx b/src/components/ActivityButtons.tsx index d1e579dc..a30fa113 100644 --- a/src/components/ActivityButtons.tsx +++ b/src/components/ActivityButtons.tsx @@ -39,6 +39,7 @@ import { Class, LockOption, SectionLockOption, Sections } from "../lib/class"; import { WEEKDAY_STRINGS, TIMESLOT_STRINGS, Slot } from "../lib/dates"; import { State } from "../lib/state"; import { LuCheck as CheckIcon, LuX as CloseIcon } from "react-icons/lu"; +import { StarButton } from "./ClassTable"; /** * A button that toggles the active value, and is outlined if active, solid @@ -240,6 +241,14 @@ export function ClassButtons(props: { cls: Class; state: State }) { return ( + { + const event = new CustomEvent("refreshStarCells"); + window.dispatchEvent(event); + }} + /> diff --git a/src/components/ClassTable.tsx b/src/components/ClassTable.tsx index 200a19d1..9d703650 100644 --- a/src/components/ClassTable.tsx +++ b/src/components/ClassTable.tsx @@ -382,7 +382,7 @@ function ClassFlags(props: { ); } -const StarButton = ({ +export const StarButton = ({ cls, state, onStarToggle, @@ -416,6 +416,17 @@ export function ClassTable(props: { const { classes, state } = props; const gridRef = useRef(null); + useEffect(() => { + const refreshCells = () => { + gridRef.current?.api?.refreshCells({ + force: true, + columns: ["number"], + }); + }; + window.addEventListener("refreshStarCells", refreshCells); + return () => window.removeEventListener("refreshStarCells", refreshCells); + }, []); + // Setup table columns const columnDefs: ColDef[] = useMemo(() => { const initialSort = "asc" as const;