feat: start of dm overview page

src/pages/dm/dm-id.tsx

@@ -0,0 +1,144 @@
+import { type Accessor, type Component, createResource, Show } from "solid-js";
+import type { RouteSectionProps } from "@solidjs/router";
+
+import { type ChartData } from "chart.js";
+
+import { LineChart } from "~/components/ui/charts";
+
+import { dmPartnerRecipientQuery, dmSentMessagesPerPersonOverviewQuery, SELF_ID } from "~/db";
+
+export const DmId: Component<RouteSectionProps> = (props) => {
+  const dmId = () => Number(props.params.dmid);
+
+  const [dmPartner] = createResource(async () => {
+    const dmPartner = await dmPartnerRecipientQuery(dmId());
+
+    if (dmPartner) {
+      return {
+        id: dmPartner._id,
+        name: /* can be empty string */ !dmPartner.system_joined_name
+          ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            dmPartner.profile_joined_name!
+          : dmPartner.system_joined_name,
+      };
+    }
+  });
+
+  const [dmMessagesPerPerson] = createResource(() => dmSentMessagesPerPersonOverviewQuery(dmId()));
+
+  const dmMessages = () => {
+    return dmMessagesPerPerson()?.reduce<
+      {
+        date: Date;
+        totalMessages: number;
+        [key: number]: number;
+      }[]
+    >((prev, curr) => {
+      const existingDate = prev.find(({ date }) => date === curr.message_date);
+      if (existingDate) {
+        existingDate[curr.from_recipient_id] = curr.message_count;
+
+        existingDate.totalMessages += curr.message_count;
+      } else {
+        prev.push({
+          date: curr.message_date,
+          totalMessages: curr.message_count,
+          [curr.from_recipient_id]: curr.message_count,
+        });
+      }
+
+      return prev;
+    }, []);
+  };
+
+  const recipients = () => {
+    const currentDmPartner = dmPartner();
+
+    if (currentDmPartner) {
+      return [
+        { recipientId: currentDmPartner.id, name: currentDmPartner.name },
+        {
+          recipientId: SELF_ID,
+          name: "You",
+        },
+      ];
+    }
+
+    return [
+      {
+        recipientId: SELF_ID,
+        name: "You",
+      },
+    ];
+  };
+
+  const dateChartData: Accessor<ChartData<"line"> | undefined> = () => {
+    const currentDmMessages = dmMessages();
+    const currentRecipients = recipients();
+
+    if (currentDmMessages) {
+      return {
+        labels: currentDmMessages.map((row) => row.date),
+        datasets: [
+          {
+            label: "Total number of messages",
+            data: currentDmMessages.map((row) => row.totalMessages),
+            borderWidth: 2,
+          },
+          ...currentDmMessages.reduce<{ id: number; label: string; data: number[] }[]>(
+            (prev, curr) => {
+              for (const recipient of currentRecipients) {
+                prev.find(({ id }) => id === recipient.recipientId)?.data.push(curr[recipient.recipientId] ?? 0);
+              }
+
+              return prev;
+            },
+            currentRecipients.map((recipient) => {
+              return {
+                id: recipient.recipientId,
+                label: `Number of messages from ${recipient.name.toString()}`,
+                data: [],
+                borderWidth: 2,
+              };
+            }),
+          ),
+        ],
+      };
+    }
+  };
+
+  return (
+    <Show when={dateChartData()}>
+      {(currentDateChartData) => (
+        <div class="max-h-96">
+          <LineChart
+            options={{
+              normalized: true,
+              aspectRatio: 2,
+              plugins: {
+                zoom: {
+                  pan: {
+                    enabled: true,
+                    mode: "xy",
+                  },
+                  zoom: {
+                    wheel: {
+                      enabled: true,
+                    },
+                    pinch: {
+                      enabled: true,
+                    },
+                    mode: "xy",
+                  },
+                },
+              },
+            }}
+            data={currentDateChartData()}
+          />
+        </div>
+      )}
+    </Show>
+  );
+};
+
+export default DmId;

src/pages/group/group-id.tsx

@@ -0,0 +1,8 @@
+import type { Component } from "solid-js";
+import type { RouteSectionProps } from "@solidjs/router";
+
+export const GroupId: Component<RouteSectionProps> = (props) => {
+  const groupId = () => Number(props.params.groupid);
+};
+
+export default GroupId;

src/pages/index.tsx

@@ -2,4 +2,7 @@ import { lazy } from "solid-js";
 
 export { Home } from "./home";
 
+export const GroupId = lazy(() => import("./group/group-id"));
+export const DmId = lazy(() => import("./dm/dm-id"));
+
 export const Overview = lazy(() => import("./overview"));

src/pages/overview/index.tsx

@@ -1,17 +1,19 @@
-import { type Component, createResource, Show } from "solid-js";
+import { type Component, createEffect, createResource, Show } from "solid-js";
 import type { RouteSectionProps } from "@solidjs/router";
 
-import { overallSentMessagesQuery, SELF_ID, threadOverviewQuery } from "~/db";
+import { allThreadsOverviewQuery, overallSentMessagesQuery, SELF_ID } from "~/db";
 
 import { OverviewTable, type RoomOverview } from "./overview-table";
 
 export const Overview: Component<RouteSectionProps> = () => {
-  const [allSelfSentMessagesCount] = createResource(() => overallSentMessagesQuery(SELF_ID).executeTakeFirstOrThrow());
+  const [allSelfSentMessagesCount] = createResource(() => overallSentMessagesQuery(SELF_ID));
 
   const [roomOverview] = createResource<RoomOverview[]>(async () => {
-    return (await threadOverviewQuery.execute()).map((row) => {
+    return (await allThreadsOverviewQuery()).rows.map((row) => {
       const isGroup = row.title !== null;
 
+      console.log(row);
+
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const name = (
         isGroup
@@ -33,13 +35,18 @@ export const Overview: Component<RouteSectionProps> = () => {
     });
   });
 
+  createEffect(() => {
+    console.log(roomOverview());
+  });
+
   return (
     <div>
-      <p>All messages: {allSelfSentMessagesCount()?.message_count as number}</p>
+      <p>All messages: {allSelfSentMessagesCount()?.messageCount as number}</p>
       <Show
         when={!roomOverview.loading}
         fallback="Loading..."
       >
+        {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
         <OverviewTable data={roomOverview()!} />;
       </Show>
     </div>

src/pages/overview/overview-table.tsx

@@ -1,4 +1,5 @@
 import { type Component, createSignal, For, Match, Show, Switch } from "solid-js";
+import { useNavigate } from "@solidjs/router";
 
 import {
   type ColumnFiltersState,
@@ -37,7 +38,7 @@ export interface RoomOverview {
 
 const columnHelper = createColumnHelper<RoomOverview>();
 
-const archivedFilterFn: FilterFn<RoomOverview> = (row, columnId, filterValue) => {
+const archivedFilterFn: FilterFn<RoomOverview> = (row, _columnId, filterValue) => {
   if (filterValue === true) {
     return true;
   }
@@ -241,6 +242,8 @@ export const OverviewTable = (props: OverviewTableProps) => {
     },
   });
 
+  const navigate = useNavigate();
+
   return (
     <div>
       <div class="flex flex-row items-center gap-x-4">
@@ -304,8 +307,14 @@ export const OverviewTable = (props: OverviewTableProps) => {
             <For each={table.getRowModel().rows}>
               {(row) => (
                 <TableRow
-                  class="[&:last-of-type>td:first-of-type]:rounded-bl-md [&:last-of-type>td:last-of-type]:rounded-br-md"
+                  class="cursor-pointer [&:last-of-type>td:first-of-type]:rounded-bl-md [&:last-of-type>td:last-of-type]:rounded-br-md"
                   data-state={row.getIsSelected() && "selected"}
+                  onClick={() => {
+                    const threadId = row.original.threadId;
+                    const isGroup = row.original.isGroup;
+
+                    navigate(`/${isGroup ? "group" : "dm"}/${threadId.toString()}`);
+                  }}
                 >
                   <For each={row.getVisibleCells()}>
                     {(cell) => (