Fix: Working Frontend without bugs

src/routes/config/[guildId].tsx

@@ -1,18 +1,15 @@
-import { getSession } from "@auth/solid-start";
 import { faToggleOff, faToggleOn } from "@fortawesome/pro-regular-svg-icons";
-import { useNavigate, useParams } from "@solidjs/router";
-import { eq } from "drizzle-orm";
-import moment from "moment-timezone";
-import createClient from "openapi-fetch";
-import { Index, createEffect, createResource, createSignal } from "solid-js";
+import { useLocation, useNavigate, useParams } from "@solidjs/router";
+import {
+  For,
+  Index,
+  createEffect,
+  createResource,
+  createSignal,
+} from "solid-js";
 import { createStore } from "solid-js/store";
-import { getRequestEvent } from "solid-js/web";
 import { FontAwesomeIcon } from "~/components/FontAwesomeIcon";
 import Layout from "~/components/Layout";
-import db from "~/drizzle";
-import { accounts } from "~/drizzle/schema";
-import { authOptions } from "~/server/auth";
-import { paths } from "~/types/discord";
 import "../../styles/pages/config.scss";
 
 const guessTZ = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -23,113 +20,75 @@ const initialValue = (params: ReturnType<typeof useParams>) => ({
     id: params.guildId,
     name: undefined as string | undefined,
     icon: undefined as string | null | undefined,
+    channel: "",
+    channels: [] as { id: string; name: string }[],
   },
   tzNames: [guessTZ()],
 });
 
-const getPayload = async (
-  id: string,
-): Promise<
-  | { success: false; message: string }
-  | (ReturnType<typeof initialValue> & { success: true })
-> => {
-  "use server";
-  const event = getRequestEvent();
-  if (!event) return { success: false, message: "No request event!" };
-
-  const session = await getSession(event.request, authOptions);
-  if (!session?.user?.id)
-    return { success: false, message: "No user with id!" };
-
-  const { DISCORD_ACCESS_TOKEN } = (
-    await db
-      .selectDistinct({ DISCORD_ACCESS_TOKEN: accounts.access_token })
-      .from(accounts)
-      .where(eq(accounts.userId, session.user?.id))
-      .limit(1)
-      .execute()
-  )[0];
-  if (!DISCORD_ACCESS_TOKEN)
-    return { success: false, message: "No discord access token!" };
-
-  // const guilds = await fetch("https://discord.com/api/users/@me/guilds", {
-  //   headers: { Authorization: `Bearer ${DISCORD_ACCESS_TOKEN}` },
-  // }).then((res) => res.json());
-  const { GET } = createClient<paths>({
-    baseUrl: "https://discord.com/api/v10",
-  });
-  const { data: guilds, error } = await GET("/users/@me/guilds", {
-    headers: { Authorization: `Bearer ${DISCORD_ACCESS_TOKEN}` },
-  });
-
-  if (error) {
-    console.log(error);
-    return { success: false, message: "Error on discord api request!" };
-  }
-
-  const guild = guilds?.find((e) => e.id === id);
-
-  if (!guild)
-    return {
-      success: false,
-      message: "User is in no such guild with requested id!",
-    };
-  if (!(parseInt(guild.permissions) & (1 << 5)))
-    return {
-      success: false,
-      message:
-        "User is no MANAGE_GUILD permissions on this guild with requested id!",
-    };
-
-  return {
-    success: true,
-    guild: {
-      id: guild.id,
-      name: guild.name,
-      icon: guild.icon,
-    },
-    // guild: guilds
-    //   .filter((e: any) => e.permissions & (1 << 5))
-    //   .map((e: any) => e.name),
-    tzNames: moment.tz.names(),
-  };
-};
-
 function config() {
   const params = useParams();
   const navigator = useNavigate();
-  let [timezoneRef, setTimezoneRef] = createSignal<HTMLInputElement>();
-  let [timePlanningRef, setTimePlanningRef] = createSignal<HTMLInputElement>();
-  let [pingableRolesRef, setPingableRolesRef] =
+  const location = useLocation();
+  const [timezoneRef, setTimezoneRef] = createSignal<HTMLInputElement>();
+  const [timePlanningRef, setTimePlanningRef] =
+    createSignal<HTMLInputElement>();
+  const [channelRef, setChannelRef] = createSignal<HTMLSelectElement>();
+  const [pingableRolesRef, setPingableRolesRef] =
     createSignal<HTMLInputElement>();
 
   const [timezone, setTimezone] = createSignal(guessTZ());
-  const [payload] = createResource(params.guildId, async (id) => {
-    const payload = await getPayload(id);
+  const [payload] = createResource(
+    params.guildId,
+    async (id) => {
+      const payload = await fetch(`http://localhost:3000/api/config/${id}`)
+        .then(
+          (res) =>
+            res.json() as Promise<
+              | {
+                  success: false;
+                  message: string;
+                }
+              | (ReturnType<typeof initialValue> & {
+                  success: true;
+                })
+            >,
+        )
+        .catch((e) => console.warn(e, id));
 
-    if (!payload.success) {
-      console.log(payload.message, "No success");
-      navigator("/config", { replace: false });
-      return initialValue(params);
-    }
-    return payload;
-  });
-  const guild = () => payload()?.guild ?? initialValue(params).guild;
-  const tzNames = () => payload()?.tzNames ?? [];
+      if (!payload) return initialValue(params);
+
+      if (!payload.success) {
+        console.log(payload);
+        console.log(location.pathname, payload.message, "No success");
+        // navigator("/config", { replace: false });
+        return initialValue(params);
+      }
+      return payload;
+    },
+    { initialValue: initialValue(params) },
+  );
   const [config, setConfig] = createStore({
     features: {
       timePlanning: {
         enabled: false,
+        channelId: "833442323160891452",
         pingableRoles: false,
       },
     },
   });
 
-  createEffect(() => console.log(payload()));
+  createEffect(() => console.log(payload.loading, payload()));
   createEffect(() => console.log("timezone", timezone()));
   createEffect(() =>
     console.log("timePlanning.enabled", config.features.timePlanning.enabled),
   );
+  createEffect(() =>
+    console.log(
+      "timePlanning.channelId",
+      config.features.timePlanning.channelId,
+    ),
+  );
   createEffect(() =>
     console.log(
       "timePlanning.pingableRoles",
@@ -147,11 +106,42 @@ function config() {
     if (!ref) return;
     ref.checked = config.features.timePlanning.enabled;
   });
+  createEffect(() => {
+    const channelId = payload().guild.channel;
+    setConfig("features", "timePlanning", "channelId", channelId);
+    console.log(channelId, payload());
+    const ref = channelRef();
+    if (!ref) return;
+    if (
+      !ref ||
+      !channelId ||
+      !payload().guild.channels.find((e) => e.id === channelId)
+    )
+      return;
+    ref.value = channelId;
+  });
   createEffect(() => {
     const ref = pingableRolesRef();
     if (!ref) return;
     ref.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;
+  });
+
+  // console.log(payload());
 
   return (
     <Layout site="config">
@@ -162,15 +152,15 @@ function config() {
             <img
               class="guildpfp"
               src={
-                guild()?.icon
-                  ? `https://cdn.discordapp.com/icons/${guild()?.id}/${
-                      guild()?.icon
+                payload().guild.icon
+                  ? `https://cdn.discordapp.com/icons/${payload().guild.id}/${
+                      payload().guild.icon
                     }.webp?size=240`
                   : "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240"
               }
               alt="Server pfp"
             />
-            <h1>{guild()?.name ?? "li'l Judds home base"}</h1>
+            <h1>{payload().guild.name}</h1>
           </div>
         </div>
 
@@ -189,7 +179,7 @@ function config() {
             />
 
             <datalist id="timezones">
-              <Index each={tzNames()}>
+              <Index each={payload().tzNames}>
                 {(zone) => <option value={zone()} />}
               </Index>
             </datalist>
@@ -231,12 +221,28 @@ function config() {
           >
             <div class="flex-row">
               <label>Target channel:</label>
-              <select value={timezone()}>
-                <optgroup label="--Select a Channel--">
-                  <Index each={tzNames()}>
-                    {(channel) => <option>{channel()}</option>}
-                  </Index>
-                </optgroup>
+              <select
+                ref={(e) => setChannelRef(e)}
+                onInput={(e) =>
+                  setConfig(
+                    "features",
+                    "timePlanning",
+                    "channelId",
+                    e.target.value,
+                  )
+                }
+              >
+                <option
+                  disabled={!!config.features.timePlanning.channelId}
+                  value=""
+                >
+                  --Select a Channel--
+                </option>
+                <For each={payload().guild.channels}>
+                  {(channel) => (
+                    <option value={channel.id}>{channel.name}</option>
+                  )}
+                </For>
               </select>
             </div>
             <div class="flex-row">
@@ -271,6 +277,7 @@ function config() {
 
         <section>
           <button>Apply</button>
+          <button onClick={() => navigator("/config")}>Back</button>
         </section>
       </div>
     </Layout>