Fix: ref is undefined

README.md

@@ -49,23 +49,30 @@ To get started with li'l Judd, follow the instructions below.
    VITE_DISCORD_CLIENT=your_discord_client_id
    VITE_DISCORD_CLIENT_SECRET=your_discord_client_secret
    VITE_DISCORD_BOT_TOKEN=your_discord_bot_token
+   VITE_DISCORD_BOT_PERMISSIONS=18977581952080
 
    VITE_AUTH_SECRET=your_auth_secret
 
    VITE_DATABASE_URL=your_database_url
    ```
 
-   #### Development
+Recieve your discord applications client id & secret, as well as the bot token from the [Applications dashboard](https://discord.com/developers/applications/).
 
-   Specify `VITE_AUTH_REDIRECT_PROXY_URL` only if necessary, particularly when setting up a reverse proxy to test authentication with callbacks to your development box. [Auth.js Docs Reference](https://authjs.dev/reference/nextjs/#redirectproxyurl)
+How to generate your `VITE_AUTH_SECRET` with [`openssl rand -base64 32`](https://authjs.dev/reference/core#secret).
 
-   The duplicate `DATABASE_URL` is only needed for Drizzle Studio.
+Composite your `VITE_DATABASE_URL` like [`postgres://postgres:adminadmin@0.0.0.0:5432/db`](https://orm.drizzle.team/docs/get-started-postgresql#postgresjs).
 
-   ```
-   VITE_AUTH_REDIRECT_PROXY_URL=your_auth_redirect_proxy_url
+#### Development
 
-   DATABASE_URL=your_database_url
-   ```
+Specify `VITE_AUTH_REDIRECT_PROXY_URL` only if necessary, particularly when setting up a reverse proxy to test authentication with callbacks to your development box. [Auth.js Docs Reference](https://authjs.dev/reference/nextjs/#redirectproxyurl)
+
+The duplicate `DATABASE_URL` is only needed for Drizzle Studio.
+
+```
+VITE_AUTH_REDIRECT_PROXY_URL=your_auth_redirect_proxy_url
+
+DATABASE_URL=your_database_url
+```
 
 ### Usage
 
@@ -120,6 +127,6 @@ If you'd like to contribute to li'l Judd, feel free to open an issue or submit a
 
 ## License
 
-This project is licensed under the [MIT License](LICENSE).
+This project is licensed under the [GPL v3 License](LICENSE).
 
 Happy splatting! 🦑🎮

src/components/NavBar.tsx

@@ -40,7 +40,7 @@ function NavBar() {
       </ul>
       <ul class="flex-row responsive thick">
         <Li
-          href="https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=18977581952080&scope=bot"
+          href={`https://discord.com/api/oauth2/authorize?client_id=${import.meta.env.VITE_DISCORD_CLIENT_ID}&permissions=${import.meta.env.VITE_DISCORD_BOT_PERMISSIONS}&scope=bot`}
           name="Invite to your server"
         >
           <FontAwesomeIcon class="lower" icon={faCirclePlus} size="xl" />

src/drizzle/schema.ts

@@ -1,6 +1,7 @@
 import type { AdapterAccount } from "@auth/core/adapters";
 import { relations } from "drizzle-orm";
 import {
+  boolean,
   integer,
   pgTable,
   primaryKey,
@@ -71,7 +72,7 @@ export const matchPlannings = pgTable("match_planning", {
   roleId: varchar("role_id", { length: 20 }).notNull(),
   opponentName: varchar("opponent_name", { length: 100 }).notNull(),
   messageId: varchar("message_id", { length: 20 }).notNull(),
-  ts: timestamp("ts").notNull(),
+  utc_ts: timestamp("utc_ts").notNull(),
   guildId: varchar("guild_id", { length: 20 })
     .notNull()
     .references(() => guilds.id, { onDelete: "cascade" }),
@@ -107,6 +108,7 @@ export const timePlannings = pgTable("time_planning", {
     }),
   channelId: varchar("channel_id", { length: 20 }).notNull(),
   target_interval: smallint("target_interval").notNull(),
+  roles: boolean("roles").notNull(),
   isAvailableRoleId: varchar("is_available_role_id", { length: 20 }),
   wantsToBeNotifieRoledId: varchar("wants_to_be_notified_role_id", {
     length: 20,

src/routes/config/[guildId].tsx

@@ -98,9 +98,10 @@ const getPayload = async (
 function config() {
   const params = useParams();
   const navigator = useNavigate();
-  let timezoneRef: HTMLInputElement;
-  let timePlanningRef: HTMLInputElement;
-  let pingableRolesRef: HTMLInputElement;
+  let [timezoneRef, setTimezoneRef] = createSignal<HTMLInputElement>();
+  let [timePlanningRef, setTimePlanningRef] = createSignal<HTMLInputElement>();
+  let [pingableRolesRef, setPingableRolesRef] =
+    createSignal<HTMLInputElement>();
 
   const [timezone, setTimezone] = createSignal(guessTZ());
   const [payload] = createResource(params.guildId, async (id) => {
@@ -136,14 +137,21 @@ function config() {
     ),
   );
 
-  createEffect(() => (timezoneRef.value = timezone()));
-  createEffect(
-    () => (timePlanningRef.checked = config.features.timePlanning.enabled),
-  );
-  createEffect(
-    () =>
-      (pingableRolesRef.checked = config.features.timePlanning.pingableRoles),
-  );
+  createEffect(() => {
+    const ref = timezoneRef();
+    if (!ref) return;
+    ref.value = timezone();
+  });
+  createEffect(() => {
+    const ref = timePlanningRef();
+    if (!ref) return;
+    ref.checked = config.features.timePlanning.enabled;
+  });
+  createEffect(() => {
+    const ref = pingableRolesRef();
+    if (!ref) return;
+    ref.checked = config.features.timePlanning.pingableRoles;
+  });
 
   return (
     <Layout site="config">
@@ -155,8 +163,9 @@ function config() {
               class="guildpfp"
               src={
                 guild()?.icon
-                  ? `https://cdn.discordapp.com/icons/${guild()?.id}/${guild()
-                      ?.icon}.webp?size=240`
+                  ? `https://cdn.discordapp.com/icons/${guild()?.id}/${
+                      guild()?.icon
+                    }.webp?size=240`
                   : "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240"
               }
               alt="Server pfp"
@@ -174,7 +183,7 @@ function config() {
               type="text"
               list="timezones"
               id="timezone"
-              ref={timezoneRef!}
+              ref={(e) => setTimezoneRef(e)}
               // disabled={!tzNames().find((e) => e === timezone())}
               onInput={(e) => setTimezone(e.target.value)}
             />
@@ -211,7 +220,7 @@ function config() {
             hidden
             type="checkbox"
             id="timePlanning"
-            ref={timePlanningRef!}
+            ref={(e) => setTimePlanningRef(e)}
             onInput={(e) =>
               setConfig("features", "timePlanning", "enabled", e.target.checked)
             }
@@ -246,7 +255,7 @@ function config() {
                 hidden
                 type="checkbox"
                 id="pingableRoles"
-                ref={pingableRolesRef!}
+                ref={(e) => setPingableRolesRef(e)}
                 onInput={(e) =>
                   setConfig(
                     "features",

src/types/env.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="vinxi/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_DISCORD_CLIENT: string;
+  readonly VITE_DISCORD_CLIENT_ID: string;
   readonly VITE_DISCORD_CLIENT_SECRET: string;
   readonly VITE_DISCORD_BOT_TOKEN: string;
+  readonly VITE_DISCORD_BOT_PERMISSIONS: string;
 
   readonly VITE_AUTH_SECRET: string;
   readonly VITE_AUTH_REDIRECT_PROXY_URL: string | undefined;
@@ -11,6 +12,7 @@ interface ImportMetaEnv {
   readonly VITE_DATABASE_URL: string;
 }
 
+// eslint-disable-next-line no-unused-vars
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }