Hide My custom projects tab in navigation sidebar when user is not lo…

…gged and Re-organize My custom projects in Profile section
Vizzuality · Dec 14, 2024 · e70cfee · e70cfee
1 parent f10abb7
commit e70cfee
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 41 deletions.
diff --git a/client/src/containers/nav/index.tsx b/client/src/containers/nav/index.tsx
@@ -83,33 +83,34 @@ export default function MainNav() {
         <SidebarGroup>
           <SidebarGroupContent>
             <SidebarMenu>
-              {!isLoading && navItems.main
-                .filter(
-                  (item) => !item.requireAuth || status === "authenticated"
-                )
-                .map((item) => {
-                  const isActive = item.match(pathname);
-                  return (
-                    <SidebarMenuItem key={item.title}>
-                      <SidebarMenuButton
-                        asChild
-                        tooltip={{
-                          children: item.title,
-                          hidden: open,
-                        }}
-                        className={cn(
-                          isActive &&
-                            "bg-sidebar-accent text-sidebar-accent-foreground",
-                        )}
-                      >
-                        <Link href={item.url}>
-                          {item.icon && <item.icon />}
-                          <span>{item.title}</span>
-                        </Link>
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                  );
-                })}
+              {!isLoading &&
+                navItems.main
+                  .filter(
+                    (item) => !item.requireAuth || status === "authenticated",
+                  )
+                  .map((item) => {
+                    const isActive = item.match(pathname);
+                    return (
+                      <SidebarMenuItem key={item.title}>
+                        <SidebarMenuButton
+                          asChild
+                          tooltip={{
+                            children: item.title,
+                            hidden: open,
+                          }}
+                          className={cn(
+                            isActive &&
+                              "bg-sidebar-accent text-sidebar-accent-foreground",
+                          )}
+                        >
+                          <Link href={item.url}>
+                            {item.icon && <item.icon />}
+                            <span>{item.title}</span>
+                          </Link>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    );
+                  })}
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>

diff --git a/client/src/containers/profile/user-details/index.tsx b/client/src/containers/profile/user-details/index.tsx
@@ -1,5 +1,7 @@
 import { FC, KeyboardEvent, useCallback, useRef } from "react";
-import { useForm } from "react-hook-form";
+
+import { useForm, UseFormReturn, FieldValues } from "react-hook-form";
+
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQueryClient } from "@tanstack/react-query";
 import { useSession } from "next-auth/react";
@@ -9,21 +11,22 @@ import { client } from "@/lib/query-client";
 import { queryKeys } from "@/lib/query-keys";
 
 import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import {
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-  FormDescription,
+  // FormDescription,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { useToast } from "@/components/ui/toast/use-toast";
-import { Card } from "@/components/ui/card";
 
 import { accountDetailsSchema } from "../account-details/schema";
 import { changePasswordSchema } from "../edit-password/form/schema";
+import { accountDetailsSchema as emailSchema } from "../update-email/schema";
 
 const UserDetails: FC = () => {
   const queryClient = useQueryClient();
@@ -53,8 +56,8 @@ const UserDetails: FC = () => {
     mode: "onSubmit",
   });
 
-  const emailForm = useForm<z.infer<typeof accountDetailsSchema>>({
-    resolver: zodResolver(accountDetailsSchema),
+  const emailForm = useForm<z.infer<typeof emailSchema>>({
+    resolver: zodResolver(emailSchema),
     defaultValues: {
       email: user?.email,
     },
@@ -106,7 +109,7 @@ const UserDetails: FC = () => {
   const onSubmitEmail = useCallback(
     async (data: FormData) => {
       const formData = Object.fromEntries(data);
-      const parsed = accountDetailsSchema.safeParse(formData);
+      const parsed = emailSchema.safeParse(formData);
 
       if (parsed.success) {
         try {
@@ -185,7 +188,11 @@ const UserDetails: FC = () => {
   );
 
   const handleEnterKey = useCallback(
-    (evt: KeyboardEvent, form: any, onSubmit: (data: FormData) => Promise<void>) => {
+    <T extends FieldValues>(
+      evt: KeyboardEvent,
+      form: UseFormReturn<T>,
+      onSubmit: (data: FormData) => Promise<void>,
+    ) => {
       if (evt.code === "Enter" && form.formState.isValid) {
         form.handleSubmit(async () => {
           await onSubmit(new FormData(formRef.current!));
@@ -223,7 +230,9 @@ const UserDetails: FC = () => {
                         <Input
                           type="text"
                           autoComplete={field.name}
-                          onKeyDown={(e) => handleEnterKey(e, accountForm, onSubmitAccount)}
+                          onKeyDown={(e) =>
+                            handleEnterKey(e, accountForm, onSubmitAccount)
+                          }
                           {...field}
                         />
                       </div>
@@ -253,7 +262,11 @@ const UserDetails: FC = () => {
                 )}
               />
               <div className="flex justify-end gap-2">
-                <Button variant="outline" type="button" onClick={() => accountForm.reset()}>
+                <Button
+                  variant="outline"
+                  type="button"
+                  onClick={() => accountForm.reset()}
+                >
                   Cancel
                 </Button>
                 <Button type="submit" disabled={!accountForm.formState.isDirty}>
@@ -286,7 +299,9 @@ const UserDetails: FC = () => {
                         <Input
                           type="email"
                           autoComplete={field.name}
-                          onKeyDown={(e) => handleEnterKey(e, emailForm, onSubmitEmail)}
+                          onKeyDown={(e) =>
+                            handleEnterKey(e, emailForm, onSubmitEmail)
+                          }
                           placeholder={user?.email}
                           className="w-full"
                           {...field}
@@ -328,7 +343,9 @@ const UserDetails: FC = () => {
                         <Input
                           type="password"
                           autoComplete={field.name}
-                          onKeyDown={(e) => handleEnterKey(e, passwordForm, onSubmitPassword)}
+                          onKeyDown={(e) =>
+                            handleEnterKey(e, passwordForm, onSubmitPassword)
+                          }
                           {...field}
                         />
                       </div>
@@ -348,7 +365,9 @@ const UserDetails: FC = () => {
                         <Input
                           type="password"
                           autoComplete={field.name}
-                          onKeyDown={(e) => handleEnterKey(e, passwordForm, onSubmitPassword)}
+                          onKeyDown={(e) =>
+                            handleEnterKey(e, passwordForm, onSubmitPassword)
+                          }
                           {...field}
                         />
                       </div>
@@ -368,7 +387,9 @@ const UserDetails: FC = () => {
                         <Input
                           type="password"
                           autoComplete={field.name}
-                          onKeyDown={(e) => handleEnterKey(e, passwordForm, onSubmitPassword)}
+                          onKeyDown={(e) =>
+                            handleEnterKey(e, passwordForm, onSubmitPassword)
+                          }
                           {...field}
                         />
                       </div>
@@ -378,7 +399,10 @@ const UserDetails: FC = () => {
                 )}
               />
               <div className="flex justify-end">
-                <Button type="submit" disabled={!passwordForm.formState.isValid}>
+                <Button
+                  type="submit"
+                  disabled={!passwordForm.formState.isValid}
+                >
                   Update password
                 </Button>
               </div>