feat: Add boolean fields for Discord notification settings + updated schema accordingly

Author: Reynard-G

app/lib/db/schema.ts

@@ -1,5 +1,6 @@
 import { sql } from "drizzle-orm";
 import {
+  boolean,
   index,
   integer,
   numeric,
@@ -136,6 +137,11 @@ export const userSettings = pgTable(identifyTable("UserSettings"), {
       onUpdate: "cascade",
     }),
   font: text("font").notNull().default("Default"),
+  discordCommunication: boolean("discord_communication")
+    .notNull()
+    .default(false),
+  discordTransactions: boolean("discord_transactions").notNull().default(true),
+  discordSecurity: boolean("discord_security").notNull().default(true),
 });
 export type UserSetting = typeof userSettings.$inferSelect;
 export type NewUserSetting = typeof userSettings.$inferInsert;

app/lib/get.queries.server.ts

@@ -124,6 +124,28 @@ export async function getAppearanceSettings(
   };
 }
 
+/**
+ * Get notification settings for a user.
+ *
+ * @param userId The ID of the user.
+ * @returns The notification settings.
+ */
+export async function getNotificationSettings(
+  userId: number,
+): Promise<Partial<UserSetting>> {
+  const userSettings = await getUserSettingsById(userId);
+
+  if (!userSettings) {
+    throw new Error("User settings not found");
+  }
+
+  return {
+    discordCommunication: userSettings.discordCommunication,
+    discordTransactions: userSettings.discordTransactions,
+    discordSecurity: userSettings.discordSecurity,
+  };
+}
+
 /**
  * Get transactions based on the input provided. This function is used to
  * fetch transactions for the transactions table using the search parameters

app/lib/post.queries.server.ts

@@ -253,7 +253,30 @@ export async function updateAccountSettings(
  */
 export async function updateAppearanceSettings(
   userId: number,
-  settings: Omit<Partial<UserSetting>, "id" | "user_id">,
+  settings: Omit<
+    Partial<UserSetting>,
+    | "id"
+    | "user_id"
+    | "discordCommunication"
+    | "discordTransactions"
+    | "discordSecurity"
+  >,
+): Promise<void> {
+  await db
+    .update(userSettings)
+    .set(settings)
+    .where(eq(userSettings.userId, userId));
+}
+
+/**
+ * Get a user's notification settings.
+ *
+ * @param userId The ID of the user.
+ * @returns The user's notification settings.
+ */
+export async function updateNotificationSettings(
+  userId: number,
+  settings: Omit<Partial<UserSetting>, "id" | "user_id" | "font">,
 ): Promise<void> {
   await db
     .update(userSettings)

app/routes/app.$server.transactions.tsx

@@ -2,8 +2,8 @@ import {
   type ActionFunctionArgs,
   json,
   type LoaderFunctionArgs,
-  unstable_parseMultipartFormData,
   type TypedResponse,
+  unstable_parseMultipartFormData,
 } from "@remix-run/node";
 import { Await, defer, useLoaderData } from "@remix-run/react";
 import { Suspense } from "react";
@@ -29,18 +29,20 @@ import { searchParamsSchema } from "~/lib/validations";
 export type DepositActionData = { success: boolean; message: string };
 export type WithdrawActionData = { success: boolean; message: string };
 export type TransferActionData = { success: boolean; message: string };
-export type ExportActionData = { success: boolean; message: string; data?: Transaction[] };
+export type ExportActionData = {
+  success: boolean;
+  message: string;
+  data?: Transaction[];
+};
 
-type ActionData = 
-  | DepositActionData 
-  | WithdrawActionData 
-  | TransferActionData 
+type ActionData =
+  | DepositActionData
+  | WithdrawActionData
+  | TransferActionData
   | ExportActionData;
 
 export type ActionReturn = TypedResponse<ActionData>;
 
-export type ActionFunction = (args: ActionFunctionArgs) => Promise<ActionReturn>;
-
 export async function loader({ request, params }: LoaderFunctionArgs) {
   const url = new URL(request.url);
   const search = searchParamsSchema.parse(Object.fromEntries(url.searchParams));

app/routes/app.settings.account.tsx

@@ -1,6 +1,6 @@
 import { compare } from "@node-rs/bcrypt";
 import {
-  ActionFunctionArgs,
+  type ActionFunctionArgs,
   defer,
   json,
   type LoaderFunctionArgs,
@@ -23,11 +23,6 @@ import {
 } from "~/lib/post.queries.server";
 import { authenticator } from "~/lib/services/auth.server";
 
-export type AccountSettingsFetcherResponse = {
-  success: boolean;
-  message?: string;
-};
-
 export async function loader({ request }: LoaderFunctionArgs) {
   const userId = (
     await authenticator.isAuthenticated(request, {
@@ -178,7 +173,7 @@ export async function action({ request }: ActionFunctionArgs) {
 
 export default function AccountSettings() {
   const { accountSettings } = useLoaderData<typeof loader>();
-  const fetcher = useFetcher<AccountSettingsFetcherResponse>();
+  const fetcher = useFetcher<typeof action>();
 
   const isSubmitting = fetcher.state === "submitting";
 

app/routes/app.settings.appearance.tsx

@@ -1,12 +1,13 @@
 import {
-  ActionFunctionArgs,
+  type ActionFunctionArgs,
   defer,
   json,
   type LoaderFunctionArgs,
 } from "@remix-run/node";
 import { Await, useFetcher, useLoaderData } from "@remix-run/react";
-import { Suspense } from "react";
+import { Suspense, useEffect } from "react";
 import { namedAction } from "remix-utils/named-action";
+import { toast } from "sonner";
 
 import AppSettingsLayout from "~/components/Layout/AppSettingsLayout";
 import SettingsSelect from "~/components/Select/SettingsSelect";
@@ -75,10 +76,22 @@ export async function action({ request }: ActionFunctionArgs) {
 
 export default function AppearanceSettings() {
   const { appearanceSettings } = useLoaderData<typeof loader>();
-  const fetcher = useFetcher();
+  const fetcher = useFetcher<typeof action>();
 
   const isSubmitting = fetcher.state === "submitting";
 
+  useEffect(() => {
+    if (fetcher.data && !fetcher.data.success && fetcher.state === "idle") {
+      toast.error(fetcher.data.message);
+    } else if (
+      fetcher.data &&
+      fetcher.data.success &&
+      fetcher.state === "idle"
+    ) {
+      toast.success(fetcher.data.message);
+    }
+  }, [fetcher.data, fetcher.state]);
+
   return (
     <AppSettingsLayout title="Appearance" desc="Customize the look of the app.">
       <Suspense

app/routes/app.settings.notifications.tsx

@@ -1,18 +1,175 @@
-import { type LoaderFunctionArgs } from "@remix-run/node";
+import {
+  type ActionFunctionArgs,
+  defer,
+  json,
+  type LoaderFunctionArgs,
+} from "@remix-run/node";
+import { Await, useFetcher, useLoaderData } from "@remix-run/react";
+import { Suspense, useEffect } from "react";
+import { namedAction } from "remix-utils/named-action";
+import { toast } from "sonner";
 
 import AppSettingsLayout from "~/components/Layout/AppSettingsLayout";
+import SettingsSwitch from "~/components/Switch/SettingsSwitch";
+import { Button } from "~/components/ui/button";
+import { SpokeSpinner } from "~/components/ui/spinner";
+import { getNotificationSettings } from "~/lib/get.queries.server";
+import { updateNotificationSettings } from "~/lib/post.queries.server";
+import { authenticator } from "~/lib/services/auth.server";
 
 export async function loader({ request }: LoaderFunctionArgs) {
-  return null;
+  const userId = (
+    await authenticator.isAuthenticated(request, {
+      failureRedirect: "/login",
+    })
+  ).id;
+
+  const notificationSettings = getNotificationSettings(userId);
+
+  return defer(
+    { notificationSettings },
+    {
+      status: 200,
+      headers: {
+        "Cache-Control": "private, max-age=86400", // 1 day
+      },
+    },
+  );
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData();
+
+  const userId = (
+    await authenticator.isAuthenticated(request, {
+      failureRedirect: "/login",
+    })
+  ).id;
+
+  return namedAction(request, {
+    async save_notification_settings() {
+      const communication = formData.get("communication") === "on";
+      const transactions = formData.get("transactions") === "on";
+      const security = formData.get("security") === "on";
+
+      try {
+        await updateNotificationSettings(userId, {
+          discordCommunication: communication,
+          discordTransactions: transactions,
+          discordSecurity: security,
+        });
+      } catch (error) {
+        console.error("Error saving notification settings:", error);
+        return json(
+          {
+            success: false,
+            message: "Error saving notification settings.",
+          },
+          {
+            status: 500,
+          },
+        );
+      }
+
+      return json({
+        success: true,
+        message: "Notification settings saved successfully.",
+      });
+    },
+  });
 }
 
 export default function NotificationSettings() {
+  const { notificationSettings } = useLoaderData<typeof loader>();
+  const fetcher = useFetcher<typeof action>();
+
+  const isSubmitting = fetcher.state === "submitting";
+
+  useEffect(() => {
+    if (fetcher.data && !fetcher.data.success && fetcher.state === "idle") {
+      toast.error(fetcher.data.message);
+    } else if (
+      fetcher.data &&
+      fetcher.data.success &&
+      fetcher.state === "idle"
+    ) {
+      toast.success(fetcher.data.message);
+    }
+  }, [fetcher.data, fetcher.state]);
+
   return (
     <AppSettingsLayout
       title="Notifications"
-      desc="Customize the look of the app."
+      desc="Manage your notifications settings"
     >
-      <p>Notifications page</p>
+      <Suspense
+        fallback={
+          <div className="flex h-64 items-center justify-center">
+            <SpokeSpinner color="white" />
+          </div>
+        }
+      >
+        <Await
+          resolve={notificationSettings}
+          errorElement={
+            <div className="flex h-48 items-center justify-center">
+              <p className="text-red-500">
+                Error loading appearance settings, please try again later.
+              </p>
+            </div>
+          }
+        >
+          {(notificationSettings) => (
+            <fetcher.Form
+              method="post"
+              action="?/save_notification_settings"
+              className="space-y-4"
+            >
+              <div>
+                <h3 className="mb-2 text-lg font-semibold">
+                  Discord Notifications
+                </h3>
+                <div className="space-y-4">
+                  <SettingsSwitch
+                    name="communication"
+                    label="Communication"
+                    defaultChecked={notificationSettings.discordCommunication}
+                    description="Receive discord notifications for announcements, new features, etc."
+                  />
+
+                  <SettingsSwitch
+                    name="transactions"
+                    label="Transactions"
+                    defaultChecked={notificationSettings.discordTransactions}
+                    description="Receive discord notifications for transactions."
+                  />
+
+                  <SettingsSwitch
+                    name="security"
+                    label="Security"
+                    defaultChecked={notificationSettings.discordSecurity}
+                    description="Receive discord notifications for suspicious login attempts, etc."
+                  />
+
+                  <Button
+                    type="submit"
+                    name="_action"
+                    value="save_notification_settings"
+                    variant="default"
+                    className="!mt-8 w-1/2"
+                    disabled={isSubmitting}
+                  >
+                    {isSubmitting && (
+                      <SpokeSpinner size="sm" className="mr-1" />
+                    )}
+                    Save Changes
+                  </Button>
+                </div>
+              </div>
+            </fetcher.Form>
+          )}
+        </Await>
+      </Suspense>
     </AppSettingsLayout>
   );
 }