src/pages/SimpleProgram/SimpleProgram.tsx

@@ -2,41 +2,6 @@ import React from "react";
 import styles from "./SimpleProgram.module.css";
 import useProgramStore from "../../utils/programStore.ts";
 
-/* ---------- Types ---------- */
-
-type Norm = {
-  id: string;
-  label: string;
-  norm: string;
-};
-
-type Goal = {
-  id: string;
-  label: string;
-  description: string;
-  achieved: boolean;
-};
-
-type TriggerKeyword = {
-  id: string;
-  keyword: string;
-};
-
-type KeywordTrigger = {
-  id: string;
-  label: string;
-  type: string;
-  keywords: TriggerKeyword[];
-};
-
-type Phase = {
-  id: string;
-  label: string;
-  norms: Norm[];
-  goals: Goal[];
-  triggers: KeywordTrigger[];
-};
-
 /* ---------- Reusable UI ---------- */
 
 type BoxProps = {
@@ -53,70 +18,111 @@ const Box: React.FC<BoxProps> = ({ title, children }) => (
 
 /* ---------- Lists ---------- */
 
-const GoalList: React.FC<{ goals: Goal[] }> = ({ goals }) => {
-  if (goals.length === 0) return <p className={styles.empty}>No goals defined.</p>;
+const GoalList: React.FC<{ goals: unknown[] }> = ({ goals }) => {
+  if (!goals.length) {
+    return <p className={styles.empty}>No goals defined.</p>;
+  }
 
   return (
     <ul className={styles.iconList}>
-      {goals.map((goal) => (
-        <li key={goal.id}>
-          <span className={goal.achieved ? styles.successIcon : styles.failIcon}>
+      {goals.map((g, idx) => {
+        const goal = g as {
+          id?: string;
+          description?: string;
+          achieved?: boolean;
+        };
+
+        return (
+          <li key={goal.id ?? idx}>
+            <span
+              className={
+                goal.achieved ? styles.successIcon : styles.failIcon
+              }
+            >
               {goal.achieved ? "✔" : "✖"}
             </span>
-          {goal.description}
+            {goal.description ?? "Unnamed goal"}
           </li>
-      ))}
+        );
+      })}
     </ul>
   );
 };
 
-const TriggerList: React.FC<{ triggers: KeywordTrigger[] }> = ({ triggers }) => {
-  if (triggers.length === 0) return <p className={styles.empty}>No triggers defined.</p>;
+const TriggerList: React.FC<{ triggers: unknown[] }> = ({ triggers }) => {
+  if (!triggers.length) {
+    return <p className={styles.empty}>No triggers defined.</p>;
+  }
 
   return (
     <ul className={styles.iconList}>
-      {triggers.map((trigger) => (
-        <li key={trigger.id}>
+      {triggers.map((t, idx) => {
+        const trigger = t as {
+          id?: string;
+          label?: string;
+        };
+
+        return (
+          <li key={trigger.id ?? idx}>
             <span className={styles.failIcon}>✖</span>
-          {trigger.label}
+            {trigger.label ?? "Unnamed trigger"}
           </li>
-      ))}
+        );
+      })}
     </ul>
   );
 };
 
-const NormList: React.FC<{ norms: Norm[] }> = ({ norms }) => {
-  if (norms.length === 0) return <p className={styles.empty}>No norms defined.</p>;
+const NormList: React.FC<{ norms: unknown[] }> = ({ norms }) => {
+  if (!norms.length) {
+    return <p className={styles.empty}>No norms defined.</p>;
+  }
 
   return (
     <ul className={styles.bulletList}>
-      {norms.map((norm) => (
-        <li key={norm.id}>{norm.norm}</li>
-      ))}
+      {norms.map((n, idx) => {
+        const norm = n as {
+          id?: string;
+          norm?: string;
+        };
+
+        return <li key={norm.id ?? idx}>{norm.norm ?? "Unnamed norm"}</li>;
+      })}
     </ul>
   );
 };
 
 /* ---------- Phase Grid ---------- */
 
-const PhaseGrid: React.FC<{ phase: Phase }> = ({ phase }) => {
+type PhaseGridProps = {
+  norms: unknown[];
+  goals: unknown[];
+  triggers: unknown[];
+};
+
+const PhaseGrid: React.FC<PhaseGridProps> = ({
+  norms,
+  goals,
+  triggers,
+}) => {
   return (
     <div className={styles.phaseGrid}>
       <Box title="Norms">
-        <NormList norms={phase.norms} />
+        <NormList norms={norms} />
       </Box>
 
       <Box title="Triggers">
-        <TriggerList triggers={phase.triggers} />
+        <TriggerList triggers={triggers} />
       </Box>
 
       <Box title="Goals">
-        <GoalList goals={phase.goals} />
+        <GoalList goals={goals} />
       </Box>
 
       <Box title="Conditional Norms">
         <p className={styles.empty}>No conditional norms defined.</p>
       </Box>
+      {/* Let er dus op dat deze erbij moeten */}
     </div>
   );
 };
@@ -124,35 +130,50 @@ const PhaseGrid: React.FC<{ phase: Phase }> = ({ phase }) => {
 /* ---------- Main Component ---------- */
 
 const SimpleProgram: React.FC = () => {
-  // Get the phases from the program store
-  const phases = useProgramStore((state) => state.currentProgram.phases) as Phase[];
+  const getPhaseIds = useProgramStore((s) => s.getPhaseIds);
+  const getNormsInPhase = useProgramStore((s) => s.getNormsInPhase);
+  const getGoalsInPhase = useProgramStore((s) => s.getGoalsInPhase);
+  const getTriggersInPhase = useProgramStore((s) => s.getTriggersInPhase);
+
+  const phaseIds = getPhaseIds();
   const [phaseIndex, setPhaseIndex] = React.useState(0);
 
-  // If no phases are available, display a message
-  if (phases.length === 0) return <p className={styles.empty}>No program loaded.</p>;
+  if (phaseIds.length === 0) {
+    return <p className={styles.empty}>No program loaded.</p>;
+  }
 
-  const phase = phases[phaseIndex];
+  const phaseId = phaseIds[phaseIndex];
 
   return (
     <div className={styles.container}>
       <header className={styles.header}>
         <h2>
-          Phase {phaseIndex + 1} / {phases.length}: {phase.label}
+          Phase {phaseIndex + 1} / {phaseIds.length}
         </h2>
 
         <div className={styles.controls}>
-          <button disabled={phaseIndex === 0} onClick={() => setPhaseIndex(i => i - 1)}>
+          <button
+            disabled={phaseIndex === 0}
+            onClick={() => setPhaseIndex((i) => i - 1)}
+          >
             ◀ Prev
           </button>
 
-          <button disabled={phaseIndex === phases.length - 1} onClick={() => setPhaseIndex(i => i + 1)}>
+          <button
+            disabled={phaseIndex === phaseIds.length - 1}
+            onClick={() => setPhaseIndex((i) => i + 1)}
+          >
             Next ▶
           </button>
         </div>
       </header>
 
       <div className={styles.content}>
-        <PhaseGrid phase={phase} />
+        <PhaseGrid
+          norms={getNormsInPhase(phaseId)}
+          goals={getGoalsInPhase(phaseId)}
+          triggers={getTriggersInPhase(phaseId)}
+        />
       </div>
     </div>
   );