From 77e482863d9aa4f2e39dc37c94d267885cb74824 Mon Sep 17 00:00:00 2001
From: Ricardo Esteves <ricardoglsesteves@gmail.com>
Date: Mon, 15 Jan 2024 20:51:12 +0000
Subject: [PATCH] feat: :sparkles: feat(settings-page-improvements): Enhance UI
 components on settings page

Description:
This commit introduces enhancements to the user interface components on the settings page. The changes are part of the ongoing work on the `settings-page-improvements` branch.
- In `app/(protected)/_components/navbar.tsx`, `app/(protected)/settings/page.tsx`, and `components/client-only.tsx`, updates have been made to handle the UI enhancements.

Changes:
- Update `app/(protected)/_components/navbar.tsx` to modify the text and hover colors
- Update `app/(protected)/settings/page.tsx` and `components/client-only.tsx` for functionality updates

This commit doesn't introduce any breaking changes. The updates are compatible with the existing codebase.
Co-authored-by: Ricardo Esteves <30535937+RicardoGEsteves@users.noreply.github.com>
---
 app/(protected)/_components/navbar.tsx |  2 +-
 app/(protected)/settings/page.tsx      | 18 +++++++++++++++---
 components/client-only.tsx             |  3 ++-
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/app/(protected)/_components/navbar.tsx b/app/(protected)/_components/navbar.tsx
index e49ccaa..ac6f479 100644
--- a/app/(protected)/_components/navbar.tsx
+++ b/app/(protected)/_components/navbar.tsx
@@ -37,7 +37,7 @@ const Navbar = () => {
               asChild
               variant="secondary"
               size="sm"
-              className="w-full text-background hover:text-sky-400"
+              className="w-full text-sky-400 hover:text-background"
             >
               <MdMenu />
             </Button>
diff --git a/app/(protected)/settings/page.tsx b/app/(protected)/settings/page.tsx
index 6715479..2f3c140 100644
--- a/app/(protected)/settings/page.tsx
+++ b/app/(protected)/settings/page.tsx
@@ -8,6 +8,8 @@ import { useSession } from "next-auth/react";
 import { RiUserSettingsLine } from "react-icons/ri";
 
 import { useCurrentUser } from "@/hooks/use-current-user";
+import { useIsClient } from "@/hooks/use-is-client";
+import Spinner from "@/components/spinner";
 import { SettingsSchema } from "@/schemas";
 import { settings } from "@/actions/settings";
 import { Card, CardHeader, CardContent } from "@/components/ui/card";
@@ -45,6 +47,8 @@ export default function SettingsPage() {
 
   const [isPending, startTransition] = useTransition();
 
+  const isClient = useIsClient();
+
   const form = useForm<z.infer<typeof SettingsSchema>>({
     resolver: zodResolver(SettingsSchema),
     defaultValues: {
@@ -75,12 +79,15 @@ export default function SettingsPage() {
     } catch (error) {
       setError("Something went wrong!");
     } finally {
-      form.reset();
-      setError("");
-      setSuccess("");
+      // TODO: Check if needed
+      // form.reset();
+      // setError("");
+      // setSuccess("");
     }
   };
 
+  if (!isClient) return <Spinner />;
+
   return (
     <Card className="w-auto shadow-sm">
       <CardHeader className="flex-row items-center justify-center font-semibold gap-x-3">
@@ -113,6 +120,7 @@ export default function SettingsPage() {
                   </FormItem>
                 )}
               />
+
               {user?.isOAuth === false && (
                 <>
                   <FormField
@@ -195,6 +203,7 @@ export default function SettingsPage() {
                   />
                 </>
               )}
+
               <FormField
                 control={form.control}
                 name="role"
@@ -220,6 +229,7 @@ export default function SettingsPage() {
                   </FormItem>
                 )}
               />
+
               {user?.isOAuth === false && (
                 <FormField
                   control={form.control}
@@ -234,11 +244,13 @@ export default function SettingsPage() {
                       </div>
                       <FormControl>
                         <Switch
+                          value={field.name}
                           disabled={isPending}
                           checked={field.value}
                           onCheckedChange={field.onChange}
                         />
                       </FormControl>
+                      <FormMessage />
                     </FormItem>
                   )}
                 />
diff --git a/components/client-only.tsx b/components/client-only.tsx
index dcb9ee0..d2c9979 100644
--- a/components/client-only.tsx
+++ b/components/client-only.tsx
@@ -1,7 +1,8 @@
 import { useIsClient } from "@/hooks/use-is-client";
+import Spinner from "./spinner";
 
 export function ClientOnly({ children }: { children: React.ReactNode }) {
   const isClient = useIsClient();
 
-  return isClient ? <>{children}</> : null;
+  return isClient ? <>{children}</> : <Spinner />;
 }