Revert "Upgrade to react-router@7, eslint@9, version bump the rest (#101

)"

This reverts commit 89f7ae2.

.eslintignore

@@ -0,0 +1,4 @@
+build
+# Hack fix to override default behavior for ignore files linted by name
+# https://github.com/eslint/eslint/issues/15010
+!.*

.eslintrc.js

@@ -0,0 +1,22 @@
+/**
+ * @type {import('@types/eslint').Linter.BaseConfig}
+ */
+module.exports = {
+  extends: [
+    "@remix-run/eslint-config",
+    "@remix-run/eslint-config/node",
+    "@remix-run/eslint-config/jest-testing-library",
+    "prettier",
+  ],
+  // we're using vitest which has a very similar API to jest
+  // (so the linting plugins work nicely), but it we have to explicitly
+  // set the jest version.
+  settings: {
+    jest: {
+      version: 27,
+    },
+  },
+  rules: {
+    "react/style-prop-object": 0,
+  },
+};

.gitignore

@@ -10,5 +10,6 @@ yarn.lock
 *.log
 k8s-context
 *.sqlite3
+/cypress/screenshots
+/cypress/videos
 tsconfig.tsbuildinfo
-.react-router

.husky/pre-push

@@ -1,2 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
 
 npm run validate

.lintstagedrc.js

@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   "**/*.[tj]s?(x)": ["eslint --fix --max-warnings=0", "prettier --check"],
   "migrations/*.[tj]s": [
     "npm run start:migrate",

Dockerfile

@@ -4,7 +4,7 @@ WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm install
 
-COPY vite.config.ts tailwind.config.js kysely.config.ts tsconfig.json .eslint* .prettierignore ./
+COPY remix.config.js tailwind.config.js kysely.config.ts tsconfig.json .eslint* .prettierignore ./
 COPY app ./app
 
 RUN npm run build
@@ -20,6 +20,7 @@ ADD package.json package-lock.json ./
 RUN npm prune --production
 
 COPY --from=build /app/build ./build
+COPY --from=build /app/public ./public
 
 COPY kysely.config.ts ./
 COPY migrations ./migrations

app/commands/convene.tsx

@@ -82,7 +82,7 @@ export const handler = async (
                 staff,
                 extra: "✅ Restricted",
               }),
-              applyRestriction(message.member),
+              applyRestriction(message.member!),
               message.reply(
                 "After a vote by the mods, this member has had restrictions applied to them",
               ),
@@ -96,7 +96,7 @@ export const handler = async (
                 staff,
                 extra: "✅ Kicked",
               }),
-              kick(message.member),
+              kick(message.member!),
               message.reply(
                 "After a vote by the mods, this member has been kicked from the server to cool off",
               ),
@@ -110,13 +110,13 @@ export const handler = async (
                 staff,
                 extra: "✅ Banned",
               }),
-              ban(message.member),
+              ban(message.member!),
               message.reply(
                 "After a vote by the mods, this member has been permanently banned",
               ),
             ]);
             return;
-          case resolutions.nudge: {
+          case resolutions.nudge:
             const [thread] = await Promise.all([
               originalChannel.threads.create({
                 name: message.author.username,
@@ -145,7 +145,6 @@ This isn't a formal warning, but your message concerned the moderators enough th
 
   ${quoteAndEscape(message.content)}`);
             return;
-          }
           case resolutions.warning:
             reportUser({
               reason: ReportReasons.mod,
@@ -173,7 +172,7 @@ This isn't a formal warning, but your message concerned the moderators enough th
               staff,
               extra: "✅ Timed out overnight",
             });
-            timeout(message.member);
+            timeout(message.member!);
 
             return;
         }

app/commands/reacord/ModResponse.tsx

@@ -1,4 +1,4 @@
-import type { ComponentEventUser } from "reacord";
+import type { UserInfo } from "reacord";
 import { Button } from "reacord";
 
 import type { Resolution } from "~/helpers/modResponse";
@@ -17,7 +17,7 @@ export const ModResponse = ({
   modRoleId,
 }: {
   votesRequired?: number;
-  onVote: (result: { vote: Resolution; user: ComponentEventUser }) => void;
+  onVote: (result: { vote: Resolution; user: UserInfo }) => void;
   onResolve: (result: Resolution) => Promise<void>;
   modRoleId: string;
 }) => {

app/commands/setupTickets.ts

@@ -15,7 +15,7 @@ import {
 import { REST } from "@discordjs/rest";
 import { Routes, TextInputStyle } from "discord-api-types/v10";
 
-import { discordToken } from "~/helpers/env.server";
+import { discordToken } from "~/helpers/env";
 import { SETTINGS, fetchSettings } from "~/models/guilds.server";
 import { format } from "date-fns";
 import type {
@@ -114,7 +114,7 @@ export default [
       await thread.send({
         content: "When you’ve finished, please close the ticket.",
         components: [
-          // @ts-expect-error Types for this are super busted
+          // @ts-ignore
           new ActionRowBuilder().addComponents(
             new ButtonBuilder()
               .setCustomId(`close-ticket||${user.id}`)

app/components/login.tsx

@@ -1,4 +1,4 @@
-import { Form } from "react-router";
+import { Form } from "@remix-run/react";
 import type { ButtonHTMLAttributes } from "react";
 
 interface LoginProps extends ButtonHTMLAttributes<Element> {
@@ -8,7 +8,7 @@ interface LoginProps extends ButtonHTMLAttributes<Element> {
 
 export function Login({
   children = "Log in with Discord",
-  // errors,
+  errors,
   redirectTo,
   ...props
 }: LoginProps) {

app/components/logout.tsx

@@ -1,9 +1,17 @@
-import { Form } from "react-router";
+import { Form } from "@remix-run/react";
 import type { ButtonHTMLAttributes } from "react";
 
-type LoginProps = ButtonHTMLAttributes<Element>;
+interface LoginProps extends ButtonHTMLAttributes<Element> {
+  errors?: { [k: string]: string };
+  redirectTo?: string;
+}
 
-export function Logout({ children = "Log out", ...props }: LoginProps) {
+export function Logout({
+  children = "Log out",
+  errors,
+  redirectTo,
+  ...props
+}: LoginProps) {
   return (
     <Form method="post" action="/logout" className="space-y-6">
       <button

app/db.d.ts

@@ -1,9 +1,8 @@
 import type { ColumnType } from "kysely";
 
-export type Generated<T> =
-  T extends ColumnType<infer S, infer I, infer U>
-    ? ColumnType<S, I | undefined, U>
-    : ColumnType<T, T | undefined, T>;
+export type Generated<T> = T extends ColumnType<infer S, infer I, infer U>
+  ? ColumnType<S, I | undefined, U>
+  : ColumnType<T, T | undefined, T>;
 
 export interface Guilds {
   id: string | null;

app/db.server.ts

@@ -1,7 +1,7 @@
 import SQLite from "better-sqlite3";
 import { Kysely, ParseJSONResultsPlugin, SqliteDialect } from "kysely";
 import type { DB } from "./db";
-import { databaseUrl } from "./helpers/env.server";
+import { databaseUrl } from "./helpers/env";
 
 export { SqliteError } from "better-sqlite3";
 

app/discord/activityTracker.ts

@@ -17,16 +17,13 @@ export async function startActivityTracking(client: Client) {
   client.on(Events.MessageCreate, async (msg) => {
     const info = await getMessageStats(msg);
     if (!info) return;
-    if (!msg.author || !msg.guildId) {
-      throw Error("Missing author or guild info when tracking message stats");
-    }
     await db
       .insertInto("message_stats")
       .values({
         ...info,
         message_id: msg.id,
-        author_id: msg.author.id,
-        guild_id: msg.guildId,
+        author_id: msg.author!.id,
+        guild_id: msg.guildId!,
         channel_id: msg.channelId,
         recipient_id: msg.mentions?.repliedUser?.id ?? null,
         channel_category: (await getOrFetchChannel(msg))?.parent?.name,
@@ -95,5 +92,5 @@ export async function reportByGuild(guildId: string) {
     .where("guild_id", "=", guildId)
     .groupBy("author_id")
     .execute();
-  return result;
+  return result
 }

app/discord/api.ts

@@ -1,4 +1,4 @@
 import { REST } from "discord.js";
-import { discordToken } from "~/helpers/env.server";
+import { discordToken } from "~/helpers/env";
 
 export const rest = new REST({ version: "10" }).setToken(discordToken);

app/discord/client.server.ts

@@ -1,6 +1,6 @@
 import { GatewayIntentBits, Client, Partials, ActivityType } from "discord.js";
 import { ReacordDiscordJs } from "reacord";
-import { discordToken } from "~/helpers/env.server";
+import { discordToken } from "~/helpers/env";
 
 export const client = new Client({
   intents: [

app/discord/deployCommands.server.ts

@@ -2,7 +2,6 @@ import type {
   APIApplicationCommand,
   Client,
   ContextMenuCommandBuilder,
-  OAuth2Guild,
   SlashCommandBuilder,
 } from "discord.js";
 import { InteractionType, Routes } from "discord.js";
@@ -16,7 +15,7 @@ import {
   isSlashCommand,
   isUserContextCommand,
 } from "~/helpers/discord";
-import { applicationId, isProd } from "~/helpers/env.server";
+import { applicationId, isProd } from "~/helpers/env";
 import { calculateChangedCommands } from "~/helpers/discordCommands";
 
 /**
@@ -72,14 +71,12 @@ export const deployCommands = async (client: Client) => {
         ) {
           config.handler(interaction);
         }
-        return;
       }
       case InteractionType.ModalSubmit: {
         const config = matchCommand(interaction.customId);
         if (isModalCommand(config) && interaction.isModalSubmit()) {
           config.handler(interaction);
         }
-        return;
       }
     }
   });
@@ -114,16 +111,9 @@ export const deployProdCommands = async (
   // This should only one once as a migration, but maybe stuff will get into
   // weird states.
   const guilds = await client.guilds.fetch();
-  const randomGuild = ((): OAuth2Guild => {
-    let g: OAuth2Guild | undefined;
-    // This is really just to appease TS
-    while (!g) {
-      g = guilds.at(Math.floor(Math.random() * guilds.size));
-    }
-    return g;
-  })();
+  const randomGuild = guilds.at(Math.floor(Math.random() * guilds.size));
   const randomGuildCommands = (await rest.get(
-    Routes.applicationGuildCommands(applicationId, randomGuild.id),
+    Routes.applicationGuildCommands(applicationId, randomGuild!.id),
   )) as APIApplicationCommand[];
   if (randomGuildCommands.length > 0) {
     await Promise.allSettled(

app/entry.client.tsx

@@ -1,4 +1,4 @@
-import { HydratedRouter } from "react-router/dom";
-import { hydrateRoot } from "react-dom/client";
+import { RemixBrowser } from "@remix-run/react";
+import { hydrate } from "react-dom";
 
-hydrateRoot(document, <HydratedRouter />);
+hydrate(<RemixBrowser />, document);

app/entry.server.tsx

@@ -0,0 +1,22 @@
+import "dotenv/config";
+import type { EntryContext } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
+import { renderToString } from "react-dom/server";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />,
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  });
+}

app/helpers/discordCommands.ts

@@ -29,8 +29,9 @@ export const compareCommands = (
     return result;
   }
   if (json.type === ApplicationCommandType.ChatInput || !json.type) {
-    const remoteOptions = remoteCommand.options;
-    const localOptions = json.options;
+    const hasRemoteOptions =
+      "options" in remoteCommand && remoteCommand.options!.length > 0;
+    const hasLocalOptions = "options" in json && json.options!.length > 0;
 
     const typeMatches = !json.type || json.type === remoteCommand.type;
     if (!typeMatches) {
@@ -43,29 +44,29 @@ export const compareCommands = (
     if (!descriptionMatches) {
       return false;
     }
-    const remoteOptionsMatch = !remoteOptions
-      ? true
-      : remoteOptions.every((o) =>
+    const remoteOptionsMatch = hasRemoteOptions
+      ? remoteCommand.options!.every((o) =>
           json.options?.some(
             (o2) =>
               o.name === o2.name &&
               o.description === o2.description &&
               o.type === o2.type,
           ),
-        );
+        )
+      : true;
     if (!remoteOptionsMatch) {
       return false;
     }
-    const localOptionsMatch = !localOptions
-      ? true
-      : localOptions.every((o) =>
+    const localOptionsMatch = hasLocalOptions
+      ? json.options!.every((o) =>
           remoteCommand.options?.some(
             (o2) =>
               o.name === o2.name &&
               o.description === o2.description &&
               o.type === o2.type,
           ),
-        );
+        )
+      : true;
     if (!localOptionsMatch) {
       return false;
     }

app/helpers/modResponse.ts

@@ -1,4 +1,4 @@
-import { uniq } from "lodash-es";
+import { uniq } from "lodash";
 import { useCallback, useMemo, useState } from "react";
 
 export const resolutions = {
@@ -19,7 +19,7 @@ export const humanReadableResolutions = {
   [resolutions.kick]: "Kick",
   [resolutions.ban]: "Ban",
 } as const;
-export type Resolution = (typeof resolutions)[keyof typeof resolutions];
+export type Resolution = typeof resolutions[keyof typeof resolutions];
 
 export const useVotes = () => {
   const [votes, setVotes] = useState({} as Record<Resolution, string[]>);