Simplify state structure

drborges · Sep 20, 2024 · f77a6ab · f77a6ab
1 parent fa8ec27
commit f77a6ab
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 65 deletions.
diff --git a/examples/cypress/component/ShortCircuit.cy.tsx b/examples/cypress/component/ShortCircuit.cy.tsx
@@ -6,58 +6,58 @@ describe("ShortCircuit App", () => {
   it("successfully renders components even when short circuit boolean logic is used", () => {
     cy.mount(<App />)
 
-    cy.contains("state.flags.flag1: false")
-    cy.contains("state.flags.flag2: false")
-    cy.contains("state.flags.flag3: false")
-    cy.contains("app.flags.flag1 || app.flags.flag2 || app.flags.flag3 = false")
-    cy.contains("app.flags.flag1 && app.flags.flag2 && app.flags.flag3 = false")
+    cy.contains("state.flag1: false")
+    cy.contains("state.flag2: false")
+    cy.contains("state.flag3: false")
+    cy.contains("app.flag1 || app.flag2 || app.flag3 = false")
+    cy.contains("app.flag1 && app.flag2 && app.flag3 = false")
 
     cy.get("[data-testid='toggle-flag3']").click()
 
-    cy.contains("state.flags.flag1: false")
-    cy.contains("state.flags.flag2: false")
-    cy.contains("state.flags.flag3: true")
-    cy.contains("app.flags.flag1 || app.flags.flag2 || app.flags.flag3 = true")
-    cy.contains("app.flags.flag1 && app.flags.flag2 && app.flags.flag3 = false")
+    cy.contains("state.flag1: false")
+    cy.contains("state.flag2: false")
+    cy.contains("state.flag3: true")
+    cy.contains("app.flag1 || app.flag2 || app.flag3 = true")
+    cy.contains("app.flag1 && app.flag2 && app.flag3 = false")
 
     cy.get("[data-testid='toggle-flag2']").click()
 
-    cy.contains("state.flags.flag1: false")
-    cy.contains("state.flags.flag2: true")
-    cy.contains("state.flags.flag3: true")
-    cy.contains("app.flags.flag1 || app.flags.flag2 || app.flags.flag3 = true")
-    cy.contains("app.flags.flag1 && app.flags.flag2 && app.flags.flag3 = false")
+    cy.contains("state.flag1: false")
+    cy.contains("state.flag2: true")
+    cy.contains("state.flag3: true")
+    cy.contains("app.flag1 || app.flag2 || app.flag3 = true")
+    cy.contains("app.flag1 && app.flag2 && app.flag3 = false")
 
     cy.get("[data-testid='toggle-flag1']").click()
 
-    cy.contains("state.flags.flag1: true")
-    cy.contains("state.flags.flag2: true")
-    cy.contains("state.flags.flag3: true")
-    cy.contains("app.flags.flag1 || app.flags.flag2 || app.flags.flag3 = true")
-    cy.contains("app.flags.flag1 && app.flags.flag2 && app.flags.flag3 = true")
+    cy.contains("state.flag1: true")
+    cy.contains("state.flag2: true")
+    cy.contains("state.flag3: true")
+    cy.contains("app.flag1 || app.flag2 || app.flag3 = true")
+    cy.contains("app.flag1 && app.flag2 && app.flag3 = true")
 
     cy.get("[data-testid='toggle-flag3']").click()
 
-    cy.contains("state.flags.flag1: true")
-    cy.contains("state.flags.flag2: true")
-    cy.contains("state.flags.flag3: false")
-    cy.contains("app.flags.flag1 || app.flags.flag2 || app.flags.flag3 = true")
-    cy.contains("app.flags.flag1 && app.flags.flag2 && app.flags.flag3 = false")
+    cy.contains("state.flag1: true")
+    cy.contains("state.flag2: true")
+    cy.contains("state.flag3: false")
+    cy.contains("app.flag1 || app.flag2 || app.flag3 = true")
+    cy.contains("app.flag1 && app.flag2 && app.flag3 = false")
 
     cy.get("[data-testid='toggle-flag2']").click()
 
-    cy.contains("state.flags.flag1: true")
-    cy.contains("state.flags.flag2: false")
-    cy.contains("state.flags.flag3: false")
-    cy.contains("app.flags.flag1 || app.flags.flag2 || app.flags.flag3 = true")
-    cy.contains("app.flags.flag1 && app.flags.flag2 && app.flags.flag3 = false")
+    cy.contains("state.flag1: true")
+    cy.contains("state.flag2: false")
+    cy.contains("state.flag3: false")
+    cy.contains("app.flag1 || app.flag2 || app.flag3 = true")
+    cy.contains("app.flag1 && app.flag2 && app.flag3 = false")
 
     cy.get("[data-testid='toggle-flag1']").click()
 
-    cy.contains("state.flags.flag1: false")
-    cy.contains("state.flags.flag2: false")
-    cy.contains("state.flags.flag3: false")
-    cy.contains("app.flags.flag1 || app.flags.flag2 || app.flags.flag3 = false")
-    cy.contains("app.flags.flag1 && app.flags.flag2 && app.flags.flag3 = false")
+    cy.contains("state.flag1: false")
+    cy.contains("state.flag2: false")
+    cy.contains("state.flag3: false")
+    cy.contains("app.flag1 || app.flag2 || app.flag3 = false")
+    cy.contains("app.flag1 && app.flag2 && app.flag3 = false")
   })
 })
diff --git a/examples/short-circuit/components/Actions.tsx b/examples/short-circuit/components/Actions.tsx
@@ -6,22 +6,13 @@ import { store } from "../store"
 export function Actions() {
   return (
     <Highlight label="<Actions />" key={Math.random()}>
-      <button
-        data-testid="toggle-flag1"
-        onClick={store.state.flags.toggleFlag1}
-      >
+      <button data-testid="toggle-flag1" onClick={store.state.toggleFlag1}>
         Toggle <code>store.state.flag1</code>
       </button>
-      <button
-        data-testid="toggle-flag2"
-        onClick={store.state.flags.toggleFlag2}
-      >
+      <button data-testid="toggle-flag2" onClick={store.state.toggleFlag2}>
         Toggle <code>store.state.flag2</code>
       </button>
-      <button
-        data-testid="toggle-flag3"
-        onClick={store.state.flags.toggleFlag3}
-      >
+      <button data-testid="toggle-flag3" onClick={store.state.toggleFlag3}>
         Toggle <code>store.state.flag3</code>
       </button>
     </Highlight>

diff --git a/examples/short-circuit/components/AreAllFlagsTrue.tsx b/examples/short-circuit/components/AreAllFlagsTrue.tsx
@@ -8,12 +8,10 @@ export function AreAllFlagsTrue() {
   const app = useArbor(store)
   return (
     <Highlight label="<AreAllFlagsTrue />" key={Math.random()}>
-      <div>
-        <code>
-          app.flags.flag1 && app.flags.flag2 && app.flags.flag3 ={" "}
-          {(app.flags.flag1 && app.flags.flag2 && app.flags.flag3).toString()}
-        </code>
-      </div>
+      <code>
+        app.flag1 && app.flag2 && app.flag3 ={" "}
+        {(app.flag1 && app.flag2 && app.flag3).toString()}
+      </code>
     </Highlight>
   )
 }
diff --git a/examples/short-circuit/components/AreThereAnyFlagsTrue.tsx b/examples/short-circuit/components/AreThereAnyFlagsTrue.tsx
@@ -8,12 +8,10 @@ export function AreThereAnyFlagsTrue() {
   const app = useArbor(store)
   return (
     <Highlight label="<AreThereAnyFlagsTrue />" key={Math.random()}>
-      <div>
-        <code>
-          app.flags.flag1 || app.flags.flag2 || app.flags.flag3 ={" "}
-          {(app.flags.flag1 || app.flags.flag2 || app.flags.flag3).toString()}
-        </code>
-      </div>
+      <code>
+        app.flag1 || app.flag2 || app.flag3 ={" "}
+        {(app.flag1 || app.flag2 || app.flag3).toString()}
+      </code>
     </Highlight>
   )
 }
diff --git a/examples/short-circuit/components/StoreState.tsx b/examples/short-circuit/components/StoreState.tsx
@@ -10,13 +10,13 @@ export function StoreState() {
   return (
     <Highlight label="<StoreState />" key={Math.random()}>
       <div>
-        <code>state.flags.flag1: {state.flags.flag1.toString()}</code>
+        <code>state.flag1: {state.flag1.toString()}</code>
       </div>
       <div>
-        <code>state.flags.flag2: {state.flags.flag2.toString()}</code>
+        <code>state.flag2: {state.flag2.toString()}</code>
       </div>
       <div>
-        <code>state.flags.flag3: {state.flags.flag3.toString()}</code>
+        <code>state.flag3: {state.flag3.toString()}</code>
       </div>
     </Highlight>
   )

diff --git a/examples/short-circuit/store/index.ts b/examples/short-circuit/store/index.ts
@@ -2,6 +2,4 @@ import { Arbor } from "@arborjs/store"
 
 import { ShortCircuitApp } from "./models/ShortCircuitApp"
 
-export const store = new Arbor({
-  flags: new ShortCircuitApp(),
-})
+export const store = new Arbor(new ShortCircuitApp())