From cd1aa84f897bfdb70a940307b1cf52ca9f52f25e Mon Sep 17 00:00:00 2001
From: JobvAlewijk <extrajvanalewijk@gmail.com>
Date: Fri, 2 Jan 2026 20:43:20 +0100
Subject: [PATCH] feat: using programstore

ref: N25B-399
---
 src/pages/SimpleProgram/SimpleProgram.tsx | 53 +++++++----------------
 src/pages/VisProgPage/VisProg.tsx         | 20 +++++----
 2 files changed, 27 insertions(+), 46 deletions(-)

diff --git a/src/pages/SimpleProgram/SimpleProgram.tsx b/src/pages/SimpleProgram/SimpleProgram.tsx
index d548108..16cb512 100644
--- a/src/pages/SimpleProgram/SimpleProgram.tsx
+++ b/src/pages/SimpleProgram/SimpleProgram.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import styles from "./SimpleProgram.module.css";
+import useProgramStore from "../../utils/programStore.ts";
 
 /* ---------- Types ---------- */
 
@@ -36,10 +37,6 @@ type Phase = {
   triggers: KeywordTrigger[];
 };
 
-type SimpleProgramProps = {
-  phases: Phase[];
-};
-
 /* ---------- Reusable UI ---------- */
 
 type BoxProps = {
@@ -63,11 +60,7 @@ const GoalList: React.FC<{ goals: Goal[] }> = ({ goals }) => {
     <ul className={styles.iconList}>
       {goals.map((goal) => (
         <li key={goal.id}>
-          <span
-            className={
-              goal.achieved ? styles.successIcon : styles.failIcon
-            }
-          >
+          <span className={goal.achieved ? styles.successIcon : styles.failIcon}>
             {goal.achieved ? "✔" : "✖"}
           </span>
           {goal.description}
@@ -77,11 +70,8 @@ const GoalList: React.FC<{ goals: Goal[] }> = ({ goals }) => {
   );
 };
 
-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: KeywordTrigger[] }> = ({ triggers }) => {
+  if (triggers.length === 0) return <p className={styles.empty}>No triggers defined.</p>;
 
   return (
     <ul className={styles.iconList}>
@@ -133,48 +123,37 @@ const PhaseGrid: React.FC<{ phase: Phase }> = ({ phase }) => {
 
 /* ---------- Main Component ---------- */
 
-const SimpleProgram: React.FC<SimpleProgramProps> = ({ phases }) => {
+const SimpleProgram: React.FC = () => {
+  // Get the phases from the program store
+  const phases = useProgramStore((state) => state.currentProgram.phases) as Phase[];
   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>;
+
   const phase = phases[phaseIndex];
 
   return (
     <div className={styles.container}>
       <header className={styles.header}>
-        <button
-        className={styles.backButton}
-        onClick={() => {
-            window.history.back();
-            setTimeout(() => {
-            window.history.forward();
-            }, 5);
-        }}
-        >
-        ← Back
-        </button>
         <h2>
           Phase {phaseIndex + 1} / {phases.length}: {phase.label}
         </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 === phases.length - 1} onClick={() => setPhaseIndex(i => i + 1)}>
             Next ▶
           </button>
         </div>
       </header>
-        <div className={styles.content}>
-            <PhaseGrid phase={phase} />
-        </div>
 
+      <div className={styles.content}>
+        <PhaseGrid phase={phase} />
+      </div>
     </div>
   );
 };
diff --git a/src/pages/VisProgPage/VisProg.tsx b/src/pages/VisProgPage/VisProg.tsx
index e289580..3db9a00 100644
--- a/src/pages/VisProgPage/VisProg.tsx
+++ b/src/pages/VisProgPage/VisProg.tsx
@@ -181,21 +181,23 @@ function graphReducer() {
  */
 function VisProgPage() {
   const [showSimpleProgram, setShowSimpleProgram] = useState(false);
-  const [phases, setPhases] = useState<any[]>([]);
+  const setProgramState = useProgramStore((state) => state.setProgramState);
 
   const runProgram = () => {
-    const reducedPhases = graphReducer();
-    setPhases(reducedPhases);
-    setShowSimpleProgram(true);
-    runProgramm();
+    const phases = graphReducer();       // reduce graph
+    setProgramState({ phases });          // <-- save to store
+    setShowSimpleProgram(true);          // show SimpleProgram
+    runProgramm();                        // send to backend if needed
   };
 
   if (showSimpleProgram) {
     return (
-      <SimpleProgram
-        phases={phases}
-
-      />
+    <div>
+      <button onClick={() => setShowSimpleProgram(false)}>
+        Back to Editor ◀ 
+      </button>
+      <SimpleProgram/>
+    </div>
     );
   }