Smol fixes to things while doing other PRs (#121)

- Fix dashboard loading state so controls are visible
- Fix an unhandled case in interaction handling logic
- Fix a schema/code types mismatch issue (this is slightly risky but I
verified locally that it's tracking correctly with integer dates)
- Suppress annoying Kysely upgrade nags on startup
- Fix an oversensitive spam trigger that got flagged a few weeks ago
- gitignore generated tailwind CSS file so it quits bugging me

Author: vcarl

.gitignore

@@ -12,3 +12,4 @@ k8s-context
 *.sqlite3
 tsconfig.tsbuildinfo
 .react-router
+tailwind.css

app/db.d.ts

@@ -19,7 +19,7 @@ export interface MessageStats {
   message_id: string | null;
   react_count: Generated<number>;
   recipient_id: string | null;
-  sent_at: string;
+  sent_at: number;
   word_count: number;
 }
 

app/discord/activityTracker.ts

@@ -76,7 +76,7 @@ async function getMessageStats(msg: Message | PartialMessage) {
     char_count: content?.length ?? 0,
     word_count: content?.split(/\s+/).length ?? 0,
     react_count: msg.reactions.cache.size,
-    sent_at: String(msg.createdTimestamp),
+    sent_at: msg.createdTimestamp,
   };
 }
 

app/discord/automod.test.ts

@@ -18,4 +18,7 @@ test("isSpam has a reasonable threshold", () => {
     ),
   ).toBe(false);
   expect(isSpam("free free free free free")).toBe(false);
+  expect(isSpam(`https://example.com//w1280$%7Btrend.backdrop_path`)).toBe(
+    false,
+  );
 });

app/discord/automod.ts

@@ -13,7 +13,6 @@ const spamKeywords = [
   "deepfake",
   "poki",
   "gift",
-  "\\d\\$",
   "18+",
   "nudes",
 ].map((x) => new RegExp(x));

app/discord/deployCommands.server.ts

@@ -61,6 +61,7 @@ export const deployCommands = async (client: Client) => {
         }
         if (isSlashCommand(config) && interaction.isChatInputCommand()) {
           config.handler(interaction);
+          return;
         }
         throw new Error("Didn't find a handler for an interaction");
       }

app/models/activity.server.ts

@@ -20,14 +20,14 @@ export async function getTopParticipants(
     .selectFrom("message_stats")
     .selectAll()
     .select(({ fn, val, eb }) => [
-      fn("date", [eb("sent_at", "/", "1000"), val("unixepoch")]).as("date"),
+      fn("date", [eb("sent_at", "/", 1000), val("unixepoch")]).as("date"),
     ])
     .where(({ between, and, or, eb }) =>
       and([
         between(
           "sent_at",
-          new Date(intervalStart).getTime().toString(),
-          new Date(intervalEnd).getTime().toString(),
+          new Date(intervalStart).getTime(),
+          new Date(intervalEnd).getTime(),
         ),
         or([
           eb("channel_id", "in", channels),

app/routes/__auth/dashboard.tsx

@@ -1,6 +1,6 @@
-import type { ActionFunction, LoaderFunction } from "react-router";
-import { data, useLoaderData } from "react-router";
-import type { LabelHTMLAttributes } from "react";
+import type { LoaderFunction } from "react-router";
+import { data, useLoaderData, useNavigation } from "react-router";
+import type { LabelHTMLAttributes, PropsWithChildren } from "react";
 import { getTopParticipants } from "#~/models/activity.server";
 
 export const loader = async ({
@@ -18,6 +18,7 @@ export const loader = async ({
   }
 
   const REACTIFLUX_GUILD_ID = "102860784329052160";
+
   const output = await getTopParticipants(
     REACTIFLUX_GUILD_ID,
     start,
@@ -29,43 +30,64 @@ export const loader = async ({
   return output;
 };
 
-export const action: ActionFunction = async ({ request }) => {
-  console.log({ request });
-};
-
 const Label = (props: LabelHTMLAttributes<Element>) => (
   <label {...props} className={`${props.className ?? ""} m-4`}>
     {props.children}
   </label>
 );
 
-const formatter = new Intl.NumberFormat("en-US", {
+const percent = new Intl.NumberFormat("en-US", {
   style: "percent",
   maximumFractionDigits: 0,
-});
+}).format;
+
+function RangeForm() {
+  return (
+    <form method="GET">
+      <Label>
+        Start date
+        <input name="start" type="date" />
+      </Label>
+      <Label>
+        End date
+        <input name="end" type="date" />
+      </Label>
+      <input type="submit" value="Submit" />
+    </form>
+  );
+}
+
+const DataHeading = ({ children }: PropsWithChildren) => {
+  return (
+    <th className="relative origin-bottom-left -rotate-45 max-w-8 text-nowrap">
+      {children}
+    </th>
+  );
+};
 
 export default function DashboardPage() {
+  const nav = useNavigation();
   const data = useLoaderData<typeof loader>();
 
-  if (!data) {
+  if (nav.state === "loading") {
     return "loading…";
   }
 
+  if (!data) {
+    return (
+      <div>
+        <div className="flex min-h-full justify-center">
+          <RangeForm />
+        </div>
+        <div></div>
+      </div>
+    );
+  }
+
   return (
     <div>
       <div className="flex min-h-full justify-center">
-        <div>test butts</div>
-        <form method="GET">
-          <Label>
-            Start date
-            <input name="start" type="date" />
-          </Label>
-          <Label>
-            End date
-            <input name="end" type="date" />
-          </Label>
-          <input type="submit" value="Submit" />
-        </form>
+        <RangeForm />
       </div>
       <div>
         <textarea
@@ -77,27 +99,27 @@ ${data
   )
   .join("\n")}`}
         ></textarea>
-        <table>
+        <table className="mt-24">
           <thead>
             <tr>
-              <th>Author ID</th>
-              <th>Percent Zero Days</th>
-              <th>Word Count</th>
-              <th>Message Count</th>
-              <th>Channel Count</th>
-              <th>Category Count</th>
-              <th>Reaction Count</th>
-              <th>Word Score</th>
-              <th>Message Score</th>
-              <th>Channel Score</th>
-              <th>Consistency Score</th>
+              <DataHeading>Author ID</DataHeading>
+              <DataHeading>Percent Zero Days</DataHeading>
+              <DataHeading>Word Count</DataHeading>
+              <DataHeading>Message Count</DataHeading>
+              <DataHeading>Channel Count</DataHeading>
+              <DataHeading>Category Count</DataHeading>
+              <DataHeading>Reaction Count</DataHeading>
+              <DataHeading>Word Score</DataHeading>
+              <DataHeading>Message Score</DataHeading>
+              <DataHeading>Channel Score</DataHeading>
+              <DataHeading>Consistency Score</DataHeading>
             </tr>
           </thead>
           <tbody>
             {data.map((d) => (
               <tr key={d.data.member.author_id}>
                 <td>{d.data.member.author_id}</td>
-                <td>{formatter.format(d.metadata.percentZeroDays)}</td>
+                <td>{percent(d.metadata.percentZeroDays)}</td>
                 <td>{d.data.member.total_word_count}</td>
                 <td>{d.data.member.message_count}</td>
                 <td>{d.data.member.channel_count}</td>