feat: cache stats sources

src/pages/dm/dm-id.tsx

@@ -1,4 +1,4 @@
-import { type Component, createResource } from "solid-js";
+import { type Component, createMemo, createResource } from "solid-js";
 import type { RouteSectionProps } from "@solidjs/router";
 
 import { dmPartnerRecipientQuery, SELF_ID, threadMostUsedWordsQuery, threadSentMessagesOverviewQuery } from "~/db";
@@ -35,7 +35,7 @@ export const DmId: Component<RouteSectionProps> = (props) => {
     }
   });
 
-  const [dmMessagesOverview] = createResource<MessageOverview>(async () => {
+  const [dmMessagesOverview] = createResource<MessageOverview | undefined>(async () => {
     const dmMessageOverview = await threadSentMessagesOverviewQuery(dmId());
     if (dmMessageOverview) {
       return dmMessageOverview.map((row) => {
@@ -61,16 +61,16 @@ export const DmId: Component<RouteSectionProps> = (props) => {
         },
       ];
     }
-
-    return [
-      {
-        recipientId: SELF_ID,
-        name: "You",
-      },
-    ];
   };
 
-  const dmMessageStats = createMessageStatsSources(dmMessagesOverview, recipients);
+  const dmMessageStats = createMemo(() => {
+    const currentDmMessagesOverview = dmMessagesOverview();
+    const currentRecipients = recipients();
+
+    if (currentDmMessagesOverview && currentRecipients) {
+      return createMessageStatsSources(currentDmMessagesOverview, currentRecipients);
+    }
+  });
 
   return (
     <>
@@ -78,26 +78,26 @@ export const DmId: Component<RouteSectionProps> = (props) => {
       <div class="flex flex-col items-center">
         <Heading level={1}>DM with {dmPartner()?.name}</Heading>
         <Heading level={2}>Chat timeline</Heading>
-        <DmMessagesPerDate dateStats={dmMessageStats().date} recipients={recipients()} />
+        <DmMessagesPerDate dateStats={dmMessageStats()?.date} recipients={recipients()} />
         <DmOverview messages={dmMessagesOverview()} />
         <Heading level={2}>Messages per</Heading>
 
         <Grid cols={1} colsMd={2} class="gap-x-16 gap-y-16">
           <div>
             <Heading level={3}>Person</Heading>
-            <DmMessagesPerRecipient personStats={dmMessageStats().person} recipients={recipients()} />
+            <DmMessagesPerRecipient personStats={dmMessageStats()?.person} recipients={recipients()} />
           </div>
           <div>
             <Heading level={3}>Daytime</Heading>
-            <DmMessagesPerDaytime daytimeStats={dmMessageStats().daytime} recipients={recipients()} />
+            <DmMessagesPerDaytime daytimeStats={dmMessageStats()?.daytime} recipients={recipients()} />
           </div>
           <div>
             <Heading level={3}>Month</Heading>
-            <DmMessagesPerMonth monthStats={dmMessageStats().month} recipients={recipients()} />
+            <DmMessagesPerMonth monthStats={dmMessageStats()?.month} recipients={recipients()} />
           </div>
           <div>
             <Heading level={3}>Weekday</Heading>
-            <DmMessagesPerWeekday weekdayStats={dmMessageStats().weekday} recipients={recipients()} />
+            <DmMessagesPerWeekday weekdayStats={dmMessageStats()?.weekday} recipients={recipients()} />
           </div>
         </Grid>
         <Heading level={2}>Word cloud</Heading>

src/pages/dm/dm-messages-per-date.tsx

@@ -4,14 +4,14 @@ import { LineChart } from "~/components/ui/charts";
 import type { MessageStats, Recipients } from "~/types";
 
 export const DmMessagesPerDate: Component<{
-  dateStats: MessageStats["date"];
-  recipients: Recipients;
+  dateStats: MessageStats["date"] | undefined;
+  recipients: Recipients | undefined;
 }> = (props) => {
   const dateChartData: Accessor<ChartData<"line"> | undefined> = () => {
     const currentDmMessages = props.dateStats;
     const currentRecipients = props.recipients;
 
-    if (currentDmMessages) {
+    if (currentDmMessages && currentRecipients) {
       const currentDmMessagesValues = Object.values(currentDmMessages);
 
       return {

src/pages/dm/dm-messages-per-daytime.tsx

@@ -5,8 +5,8 @@ import type { MessageStats, Recipients } from "~/types";
 import { hourNames } from "~/lib/messages";
 
 export const DmMessagesPerDaytime: Component<{
-  daytimeStats: MessageStats["daytime"];
-  recipients: Recipients;
+  daytimeStats: MessageStats["daytime"] | undefined;
+  recipients: Recipients | undefined;
 }> = (props) => {
   const daytimeChartData: Accessor<ChartData<"bar"> | undefined> = () => {
     const currentMessagesPerHour = props.daytimeStats;

src/pages/dm/dm-messages-per-month.tsx

@@ -5,8 +5,8 @@ import { monthNames } from "~/lib/messages";
 import type { MessageStats, Recipients } from "~/types";
 
 export const DmMessagesPerMonth: Component<{
-  monthStats: MessageStats["month"];
-  recipients: Recipients;
+  monthStats: MessageStats["month"] | undefined;
+  recipients: Recipients | undefined;
 }> = (props) => {
   const monthChartData: Accessor<ChartData<"radar"> | undefined> = () => {
     const currentMessagesPerMonth = props.monthStats;

src/pages/dm/dm-messages-per-recipients.tsx

@@ -4,8 +4,8 @@ import { PieChart } from "~/components/ui/charts";
 import type { MessageStats, Recipients } from "~/types";
 
 export const DmMessagesPerRecipient: Component<{
-  personStats: MessageStats["person"];
-  recipients: Recipients;
+  personStats: MessageStats["person"] | undefined;
+  recipients: Recipients | undefined;
 }> = (props) => {
   const recipientChartData: Accessor<ChartData<"pie"> | undefined> = () => {
     const currentMessagesPerRecipient = props.personStats;

src/pages/dm/dm-messages-per-weekday.tsx

@@ -5,8 +5,8 @@ import { weekdayNames } from "~/lib/messages";
 import type { MessageStats, Recipients } from "~/types";
 
 export const DmMessagesPerWeekday: Component<{
-  weekdayStats: MessageStats["weekday"];
-  recipients: Recipients;
+  weekdayStats: MessageStats["weekday"] | undefined;
+  recipients: Recipients | undefined;
 }> = (props) => {
   const weekdayChartData: Accessor<ChartData<"radar"> | undefined> = () => {
     const currentMessagesPerWeekday = props.weekdayStats;

src/pages/dm/dm-overview.tsx

@@ -6,7 +6,7 @@ import { getDistanceBetweenDatesInDays } from "~/lib/date";
 import type { MessageOverview } from "~/types";
 
 export const DmOverview: Component<{
-  messages: MessageOverview;
+  messages: MessageOverview | undefined;
 }> = (props) => {
   const dmOverview = () => {
     const firstMessageDate = props.messages?.at(0)?.messageDate;

src/pages/home.tsx

@@ -4,6 +4,7 @@ import { type RouteSectionProps, useNavigate } from "@solidjs/router";
 import { setDb, SQL } from "~/db";
 import { Portal } from "solid-js/web";
 import { Flex } from "~/components/ui/flex";
+import { Title } from "@solidjs/meta";
 
 export const Home: Component<RouteSectionProps> = () => {
   const [isLoadingDb, setIsLoadingDb] = createSignal(false);
@@ -38,6 +39,7 @@ export const Home: Component<RouteSectionProps> = () => {
           </Flex>
         </Show>
       </Portal>
+      <Title>Signal stats</Title>
       <div>
         <input type="file" accept=".sqlite" onChange={onFileChange}></input>
       </div>