4 replies

building realtime table similar to notion tables

Hey al

, so inspired by Notion and LiveBlocks I wanted to create a realtime table. My idea was that the state, as well as the mutation will be in store similar to how redux works. For hydration and persistence I wanted to build an store enhancer to handle this similar to the approach of the (LiveBlocks-Redux integration)[https://liveblocks.io/docs/api-reference/liveblocks-redux] which will fire an update mutation on every state change. However, because reactive queries in Convex is only accessable through query hooks and hooks can't be used in a store enhancer since it's not a component nor a hook.

My question is, is there is away to work around this issue, to build a realtime table. Currently the custom hook powering the notion table looks like this

function useNotionTable(initialState?: NotionTableState) {
  const tableState = { ...defaultState, ...initialState };
  const includeTitle = tableState.columns.find((column) => column.type === "title");
  if (!includeTitle) {
    tableState.columns.push({
      id: "title",
      type: "title",
      header: "Title",
      accessorKey: "title",
      columnConfigs: {
        options: [],
      },
    });
  }
  const [state, dispatch] = useReducer(tableReducer, tableState);

  return {
    state,
    dispatch: (action: NotionTableAction) => {
      dispatch(action);
    },
  };
}

function useNotionTable(initialState?: NotionTableState) {
  const tableState = { ...defaultState, ...initialState };
  const includeTitle = tableState.columns.find((column) => column.type === "title");
  if (!includeTitle) {
    tableState.columns.push({
      id: "title",
      type: "title",
      header: "Title",
      accessorKey: "title",
      columnConfigs: {
        options: [],
      },
    });
  }
  const [state, dispatch] = useReducer(tableReducer, tableState);

  return {
    state,
    dispatch: (action: NotionTableAction) => {
      dispatch(action);
    },
  };
}

Convex Community•3y ago•

4 replies

fawwaz

building realtime table similar to notion tables

Hey al

function useNotionTable(initialState?: NotionTableState) {
  const tableState = { ...defaultState, ...initialState };
  const includeTitle = tableState.columns.find((column) => column.type === "title");
  if (!includeTitle) {
    tableState.columns.push({
      id: "title",
      type: "title",
      header: "Title",
      accessorKey: "title",
      columnConfigs: {
        options: [],
      },
    });
  }
  const [state, dispatch] = useReducer(tableReducer, tableState);

  return {
    state,
    dispatch: (action: NotionTableAction) => {
      dispatch(action);
    },
  };
}

function useNotionTable(initialState?: NotionTableState) {
  const tableState = { ...defaultState, ...initialState };
  const includeTitle = tableState.columns.find((column) => column.type === "title");
  if (!includeTitle) {
    tableState.columns.push({
      id: "title",
      type: "title",
      header: "Title",
      accessorKey: "title",
      columnConfigs: {
        options: [],
      },
    });
  }
  const [state, dispatch] = useReducer(tableReducer, tableState);

  return {
    state,
    dispatch: (action: NotionTableAction) => {
      dispatch(action);
    },
  };
}

building realtime table similar to notion tables

Similar Threads

building realtime table similar to notion tables

Similar Threads

Similar Threads

Similar Threads