adding docs brainstorm for the main data flow with context provider api

docs/frontend cache.md

@@ -0,0 +1,43 @@
+# Custom Cache
+
+- utilize react query for list of lines
+- child component will call another
+
+## Universe of Data Hooks
+
+1. useLinesData()
+
+- subscribes to number 2
+
+2. useSpecificLineData(lineId: string)
+
+- if we want to send it up the tree, it will cause re-renders everywhere...we
+  want to use context prolly to optimize the dom tree
+
+## Universe of Context API
+
+- linesDataContext Provider -> sends one big object -> also has function to send
+  only specific line data from the list of lines
+
+-> has a function to which sends ordered lines list after calculating everything
+-> has a function sent down for loadMore(lineId: string, howManyBlocks) which
+the child line details page can call -> this triggers the axios call and then we
+do a setState in context provider which updates the main object that is being
+sent down automatically -> has useEffect for socket data -> has
+
+- minimizes function call up the tree and bunch of isolated recoil atoms for
+  hacking things around...top down
+
+- socket data should add to the main context data
+- for a child to "refetch" instead of adding to the data, need another function
+  to serve as the refetch as we are not having a specific useQuery here since it
+  would be custom based on when we need certain line data instead of having
+  useQueries firing for every line (socket data should handle our need for
+  availability and appending data to the context)
+- biggest thing is that we need to clear the cache as well and take out old data
+  when it fills up
+- have isFetching for individual lineIds if we are trying to get more data
+- if it's not in the cache, we probably wouldn't have gotten in this child line
+  details page as it was pass through props, but still can fetch from here and
+  add it to the big tree and thus will be passed down appropriately and re-order
+  it in the list of lines

docs/test.tsx

@@ -0,0 +1,70 @@
+import { Conversation } from "../packages/core/models/conversation.model";
+import { User } from "@nirvana/core/models";
+import { useEffect } from "react";
+import { useQuery } from "react-query";
+
+interface LineData {
+  lineInfo: Conversation;
+  members: User[];
+
+  blocks: { id: string; type: "audio" | "link"; content: { mediaUrl: string } };
+
+  // is there activity right now
+  isActive?: boolean;
+  isUserActive?: boolean;
+
+  isUserToggleTuned?: boolean;
+
+  isFetching: boolean;
+
+  broadcastSettings: {
+    method: "toggle" | "push_to_talk";
+    lineId: string;
+  };
+}
+
+export default function useLinesData() {
+  const linesData: LineData[] = [{} as LineData];
+
+  // TODO: iterate on this to allow getting only relevant
+  // lines so that the frontend isn't subscribing to a 100 socket io rooms
+  // const basicLinesData = useQuery()
+
+  /**
+   * INCOMING SOCKET
+   * DATA HANDLERS
+   * these can be used to make changes or use refetch
+   */
+  useEffect(() => {
+    // socket.on => handler
+  });
+
+  // transform the data as needed for a perfectly readable format for
+  // the line details and overlay components
+  // frontend needs to know the order of the lines
+  // do the ordering in the lines list, but at least provide data here
+  // like is there one line with someone talking in
+
+  // include the loading, and other things of the useQuery of the initial one
+  // pass in a modified refetch...we want to make sure sockets know when we do refetches
+  // include which one I am broadcasting to
+
+  return linesData;
+}
+
+// don't export this...only should be exposed through the line data?
+// nahhh will re-render children who are subscribing to useLinesData even though
+// they have nothing to do with the entire object...could use a context provider instead?
+
+// need to figure out how to use this hook in line details
+// and at the same time, update the useLinesData hook...need to send it up there or something
+function useDetailedLineData(lineId: string) {
+  // const x = useQuery(api.getLineData(pagination, etc..))
+
+  // return the react query query itself
+  return;
+}
+
+export function useLinesContext() {
+  return {};
+}