Merge pull request #138 from drborges/bug-fixes

Bug fixes

examples/cypress/component/ShortCircuit.cy.tsx

@@ -0,0 +1,91 @@
+import React from "react"
+
+import { App } from "../../short-circuit/App"
+
+describe("ShortCircuit App", () => {
+  it("successfully renders components even when short circuit boolean logic is used", () => {
+    cy.mount(<App />)
+
+    cy.contains("store.state.flag1: false")
+    cy.contains("store.state.flag2: false")
+    cy.contains("store.state.flag3: false")
+    cy.contains(
+      "store.state.flag1 || store.state.flag2 || store.state.flag3 = false"
+    )
+    cy.contains(
+      "store.state.flag1 && store.state.flag2 && store.state.flag3 = false"
+    )
+
+    cy.get("[data-testid='toggle-flag3']").click()
+
+    cy.contains("store.state.flag1: false")
+    cy.contains("store.state.flag2: false")
+    cy.contains("store.state.flag3: true")
+    cy.contains(
+      "store.state.flag1 || store.state.flag2 || store.state.flag3 = true"
+    )
+    cy.contains(
+      "store.state.flag1 && store.state.flag2 && store.state.flag3 = false"
+    )
+
+    cy.get("[data-testid='toggle-flag2']").click()
+
+    cy.contains("store.state.flag1: false")
+    cy.contains("store.state.flag2: true")
+    cy.contains("store.state.flag3: true")
+    cy.contains(
+      "store.state.flag1 || store.state.flag2 || store.state.flag3 = true"
+    )
+    cy.contains(
+      "store.state.flag1 && store.state.flag2 && store.state.flag3 = false"
+    )
+
+    cy.get("[data-testid='toggle-flag1']").click()
+
+    cy.contains("store.state.flag1: true")
+    cy.contains("store.state.flag2: true")
+    cy.contains("store.state.flag3: true")
+    cy.contains(
+      "store.state.flag1 || store.state.flag2 || store.state.flag3 = true"
+    )
+    cy.contains(
+      "store.state.flag1 && store.state.flag2 && store.state.flag3 = true"
+    )
+
+    cy.get("[data-testid='toggle-flag3']").click()
+
+    cy.contains("store.state.flag1: true")
+    cy.contains("store.state.flag2: true")
+    cy.contains("store.state.flag3: false")
+    cy.contains(
+      "store.state.flag1 || store.state.flag2 || store.state.flag3 = true"
+    )
+    cy.contains(
+      "store.state.flag1 && store.state.flag2 && store.state.flag3 = false"
+    )
+
+    cy.get("[data-testid='toggle-flag2']").click()
+
+    cy.contains("store.state.flag1: true")
+    cy.contains("store.state.flag2: false")
+    cy.contains("store.state.flag3: false")
+    cy.contains(
+      "store.state.flag1 || store.state.flag2 || store.state.flag3 = true"
+    )
+    cy.contains(
+      "store.state.flag1 && store.state.flag2 && store.state.flag3 = false"
+    )
+
+    cy.get("[data-testid='toggle-flag1']").click()
+
+    cy.contains("store.state.flag1: false")
+    cy.contains("store.state.flag2: false")
+    cy.contains("store.state.flag3: false")
+    cy.contains(
+      "store.state.flag1 || store.state.flag2 || store.state.flag3 = false"
+    )
+    cy.contains(
+      "store.state.flag1 && store.state.flag2 && store.state.flag3 = false"
+    )
+  })
+})

examples/cypress/component/SimpleTodoList.cy.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+
+import { TodoList, store } from "../../react-todo/store/useTodos"
+import SimpleTodoListApp from "../../react-todo/SimpleApp"
+
+describe("SimpleTodoList", () => {
+  beforeEach(() => {
+    store.setState(new TodoList())
+  })
+
+  it("preserves list items references within store upon removal", () => {
+    cy.mount(<SimpleTodoListApp />)
+
+    cy.findByTestId("add-todo-input").type("Clean the house")
+    cy.findByText("Add").click()
+
+    cy.findByTestId("add-todo-input").type("Walk the dogs")
+    cy.findByText("Add")
+      .click()
+      .then(() => {
+        const todo1 = store.state[0]
+        const todo2 = store.state[1]
+
+        cy.findByTestId(`todo-${todo1.id}`).within(() => {
+          cy.findByText("Delete").click()
+        })
+
+        cy.findByTestId(`todo-${todo2.id}`).within(() => {
+          cy.findByText("Delete").click()
+        })
+      })
+  })
+})

examples/cypress/component/TodoList.cy.tsx

@@ -79,4 +79,29 @@ describe("TodoList", () => {
         cy.findByText("0 of 1 completed").should("exist")
       })
   })
+
+  it("preserves list items references within store upon removal", () => {
+    cy.mount(<TodoListApp />)
+
+    cy.findByTestId("add-todo-input").type("Clean the house")
+    cy.findByText("Add").click()
+
+    cy.findByTestId("add-todo-input").type("Walk the dogs")
+    cy.findByText("Add").click()
+
+    cy.findByText("All")
+      .click()
+      .then(() => {
+        const todo1 = store.state[0]
+        const todo2 = store.state[1]
+
+        cy.findByTestId(`todo-${todo1.id}`).within(() => {
+          cy.findByText("Delete").click()
+        })
+
+        cy.findByTestId(`todo-${todo2.id}`).within(() => {
+          cy.findByText("Delete").click()
+        })
+      })
+  })
 })

examples/react-counter/Counter.tsx

@@ -1,4 +1,5 @@
-import { Arbor, useArbor } from "@arborjs/react"
+import { Arbor } from "@arborjs/store"
+import { useArbor } from "@arborjs/react"
 import React, { memo } from "react"
 
 import "./styles.css"

examples/react-todo/SimpleApp.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+
+import Summary from "./components/Summary"
+import NewTodoForm from "./components/NewTodoForm"
+import SimpleTodoList from "./components/SimpleTodoList"
+
+import "./index.css"
+
+export default function SimpleApp() {
+  return (
+    <div className="app">
+      <h1>todos</h1>
+
+      <div className="body">
+        <NewTodoForm />
+        <SimpleTodoList />
+
+        <div className="footer">
+          <Summary />
+        </div>
+      </div>
+    </div>
+  )
+}

examples/react-todo/components/NewTodoForm.tsx

@@ -1,7 +1,7 @@
 import React, { memo, SyntheticEvent } from "react"
 
 import useNewTodo from "../store/useNewTodo"
-import { store, Todo } from "../store/useTodos"
+import { store } from "../store/useTodos"
 import { activate, store as filterStore } from "../store/useTodosFilter"
 
 export default memo(function NewTodoForm() {

examples/react-todo/components/SimpleTodoList.tsx

@@ -0,0 +1,17 @@
+import React, { memo } from "react"
+import { useArbor } from "@arborjs/react"
+
+import { TodoList, store } from "../store/useTodos"
+import TodoView from "./TodoView"
+
+export default memo(function SimpleTodoList() {
+  const todos = useArbor(store) as TodoList
+
+  return (
+    <div className="todo-list">
+      {todos.map((todo) => (
+        <TodoView key={todo.uuid} id={todo.uuid} />
+      ))}
+    </div>
+  )
+})

examples/react-todo/components/TodoView.tsx

@@ -10,7 +10,7 @@ export interface TodoProps {
 
 export default memo(function TodoView({ id }: TodoProps) {
   const [editing, setEditing] = useState(false)
-  const todo = useArbor(store.state.find(t => t.uuid === id)!)
+  const todo = useArbor(store.state.find((t) => t.uuid === id)!)
 
   return (
     <div

examples/react-todo/store/useNewTodo.ts

@@ -1,5 +1,6 @@
+import { Arbor } from "@arborjs/store"
+import { useArbor } from "@arborjs/react"
 import { LocalStorage, Logger } from "@arborjs/plugins"
-import { Arbor, useArbor } from "@arborjs/react"
 
 export interface Input {
   value: string

examples/react-todo/store/useTodos.ts

@@ -1,6 +1,6 @@
 import { Json, SerializedBy, serializable } from "@arborjs/json"
 import { LocalStorage, Logger } from "@arborjs/plugins"
-import { Arbor, ArborNode, detach, proxiable } from "@arborjs/react"
+import { Arbor, ArborNode, detach, proxiable } from "@arborjs/store"
 import { v4 as uuid } from "uuid"
 
 export type Status = "completed" | "active"

examples/react-todo/store/useTodosFilter.ts

@@ -1,5 +1,6 @@
 import { LocalStorage, Logger } from "@arborjs/plugins"
-import { Arbor, useArbor } from "@arborjs/react"
+import { useArbor } from "@arborjs/react"
+import { Arbor } from "@arborjs/store"
 
 import { TodoList } from "./useTodos"
 

examples/short-circuit/App.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+
+import { Highlight } from "./components/Highlight"
+import { StoreState } from "./components/StoreState"
+import { Actions } from "./components/Actions"
+import { AreThereAnyFlagsTrue } from "./components/AreThereAnyFlagsTrue"
+import { AreAllFlagsTrue } from "./components/AreAllFlagsTrue"
+
+import "./styles.css"
+
+export function App() {
+  return (
+    <Highlight label="<App />" key={Math.random()}>
+      <Actions />
+      <StoreState />
+      <AreThereAnyFlagsTrue />
+      <AreAllFlagsTrue />
+    </Highlight>
+  )
+}

examples/short-circuit/components/Actions.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+
+import { Highlight } from "./Highlight"
+import { store } from "../store"
+
+export function Actions() {
+  return (
+    <Highlight label="<Actions />" key={Math.random()}>
+      <button data-testid="toggle-flag1" onClick={store.state.toggleFlag1}>
+        Toggle <code>store.state.flag1</code>
+      </button>
+      <button data-testid="toggle-flag2" onClick={store.state.toggleFlag2}>
+        Toggle <code>store.state.flag2</code>
+      </button>
+      <button data-testid="toggle-flag3" onClick={store.state.toggleFlag3}>
+        Toggle <code>store.state.flag3</code>
+      </button>
+    </Highlight>
+  )
+}

examples/short-circuit/components/AreAllFlagsTrue.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+import { useArbor } from "@arborjs/react"
+
+import { Highlight } from "./Highlight"
+import { store } from "../store"
+
+export function AreAllFlagsTrue() {
+  const app = useArbor(store)
+  return (
+    <Highlight label="<AreAllFlagsTrue />" key={Math.random()}>
+      <code>
+        store.state.flag1 && store.state.flag2 && store.state.flag3 ={" "}
+        {(app.flag1 && app.flag2 && app.flag3).toString()}
+      </code>
+    </Highlight>
+  )
+}

examples/short-circuit/components/AreThereAnyFlagsTrue.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+import { useArbor } from "@arborjs/react"
+
+import { Highlight } from "./Highlight"
+import { store } from "../store"
+
+export function AreThereAnyFlagsTrue() {
+  const app = useArbor(store)
+  return (
+    <Highlight label="<AreThereAnyFlagsTrue />" key={Math.random()}>
+      <code>
+        store.state.flag1 || store.state.flag2 || store.state.flag3 ={" "}
+        {(app.flag1 || app.flag2 || app.flag3).toString()}
+      </code>
+    </Highlight>
+  )
+}

examples/short-circuit/components/Highlight.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+
+import { useAnimatedClassName } from "../hooks/useAnimatedClassName"
+
+export function Highlight({
+  key,
+  children,
+  label,
+}: {
+  key: number
+  children: React.ReactNode
+  label: string
+}) {
+  const className = useAnimatedClassName(key)
+  return (
+    <div className={`highlight ${className}`}>
+      <span>{label}</span>
+      {children}
+    </div>
+  )
+}

examples/short-circuit/components/StoreState.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import { useArbor } from "@arborjs/react"
+
+import { Highlight } from "./Highlight"
+import { store } from "../store"
+
+export function StoreState() {
+  const state = useArbor(store)
+
+  return (
+    <Highlight label="<StoreState />" key={Math.random()}>
+      <div>
+        <code>store.state.flag1: {state.flag1.toString()}</code>
+      </div>
+      <div>
+        <code>store.state.flag2: {state.flag2.toString()}</code>
+      </div>
+      <div>
+        <code>store.state.flag3: {state.flag3.toString()}</code>
+      </div>
+    </Highlight>
+  )
+}

examples/short-circuit/hooks/useAnimatedClassName.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react"
+
+export function useAnimatedClassName(key: number) {
+  const [className, setClassName] = useState("")
+
+  useEffect(() => {
+    setClassName("animate")
+    const timeoutId = setTimeout(() => {
+      setClassName("")
+    }, 1000)
+
+    return () => clearTimeout(timeoutId)
+  }, [key])
+
+  return className
+}

examples/short-circuit/store/index.ts

@@ -0,0 +1,5 @@
+import { Arbor } from "@arborjs/store"
+
+import { ShortCircuitApp } from "./models/ShortCircuitApp"
+
+export const store = new Arbor(new ShortCircuitApp())