Deno•2y ago

Data sync input between parent and children

I have the following scheme (cf picture):

a route that get initial data
data with items are sent to an island
item of data are sent to a child island

Child islands have only input with no form nor validate button.

How to track and sync input change in children and reflect it to parent ?

foobarOP•5/20/24, 6:16 PM

routes/ToDoPage.tsx

islands/todos.tsx

islands/todoItem.tsx

marvinh.•5/20/24, 6:42 PM

Remove the signal, it's useless and only complicates the code. The function can directly write into the target signal. There is no need to manually sync state with signals or think in terms of parent or child components. That's the old react way of thinking that's made redundant with signals.

foobarOP•5/20/24, 7:17 PM

Thanks it works. I was a little bit out of date

and I am upgrading with deno/fresh

export const handler: Handlers = {
  async GET(req: Request, ctx: FreshContext) {
    //...
    // retrieve initial data from a DB (KV)
    const initialData = await todo.list();
    const res = await ctx.render({
      ...ctx.state,
      initialData,
    });
    return res;
  },
};

export default function ToDoPage(
  { data: { initialData } }: {data: { initialData: Todo[] }},
) {
  // Save data modified in DB todos
   const save = ()=> { //... }
  return (
    <>
        // Print Todo Items
        <ToDos data={initialData} />
    </>
  );
}

export const handler: Handlers = {
  async GET(req: Request, ctx: FreshContext) {
    //...
    // retrieve initial data from a DB (KV)
    const initialData = await todo.list();
    const res = await ctx.render({
      ...ctx.state,
      initialData,
    });
    return res;
  },
};

export default function ToDoPage(
  { data: { initialData } }: {data: { initialData: Todo[] }},
) {
  // Save data modified in DB todos
   const save = ()=> { //... }
  return (
    <>
        // Print Todo Items
        <ToDos data={initialData} />
    </>
  );
}

export default function ToDos(props: Props) {
  const data = useSignal<BenchItem[]>(props.data);
  const message = useSignal("");

  const addItem = () => {
    const item = {
      id: data.value.length,
      name: "new item",
    };
    data.value = data.value.concat(item);
  };

  const change = (item: BenchItem) => {
// ?? code is correct ??
    const newData = data.value.filter((x) => x.id !== item.id);
    newData.push(item);
    data.value = newData;
  };

  return (
    <>
      <button class="btn btn-primary" onClick={addItem}>
        Add todo
      </button>
      // ?? Pass a signal item instead ??
        {data.value?.map((item) => (
          <TodoItem
            item={item}
            change={change}
          />
        ))}
    </>
  );
}

export default function ToDos(props: Props) {
  const data = useSignal<BenchItem[]>(props.data);
  const message = useSignal("");

  const addItem = () => {
    const item = {
      id: data.value.length,
      name: "new item",
    };
    data.value = data.value.concat(item);
  };

  const change = (item: BenchItem) => {
// ?? code is correct ??
    const newData = data.value.filter((x) => x.id !== item.id);
    newData.push(item);
    data.value = newData;
  };

  return (
    <>
      <button class="btn btn-primary" onClick={addItem}>
        Add todo
      </button>
      // ?? Pass a signal item instead ??
        {data.value?.map((item) => (
          <TodoItem
            item={item}
            change={change}
          />
        ))}
    </>
  );
}

const TodoItem = ({  item, change }) => {
  // ?? use Signal to track change or only trigger a change function ??
  const newItem = useSignal(item);

  const doChange = useCallback(() => {
    // ?? what to do here ??
    // infinite loop ?
    change(newItem.value);
  }, [newItem]);

  return (
    <>
      <input
        type="text"
        // ?? infinite loop ??
        value={newItem.name}
        // ?? doChange or link with a signal variable ??
        onChange={doChange}
      />
    </>
  );
};

const TodoItem = ({  item, change }) => {
  // ?? use Signal to track change or only trigger a change function ??
  const newItem = useSignal(item);

  const doChange = useCallback(() => {
    // ?? what to do here ??
    // infinite loop ?
    change(newItem.value);
  }, [newItem]);

  return (
    <>
      <input
        type="text"
        // ?? infinite loop ??
        value={newItem.name}
        // ?? doChange or link with a signal variable ??
        onChange={doChange}
      />
    </>
  );
};