feat: adjustment role form

sainseni · Aug 26, 2024 · 525333a · 525333a
1 parent 6c9ad7f
commit 525333a
Show file tree

Hide file tree

Showing 16 changed files with 308 additions and 265 deletions.
diff --git a/src/app/(private)/dashboard/(admin)/users/page.tsx b/src/app/(private)/dashboard/(admin)/users/page.tsx
@@ -1,9 +1,7 @@
 'use client';
 
 import { Menu, Users } from 'lucide-react';
-import { useState } from 'react';
 
-import { useGetRoles } from '@/lib/queries/roles.query';
 import { useGetUsers } from '@/lib/queries/users.query';
 
 import { Button } from '@/components/ui/button';
@@ -28,26 +26,11 @@ import {
 
 import RoleFormDialog from './role-form';
 export default function Component() {
-    const {
-        data: roleData,
-        isLoading: isRoleLoading,
-        error: roleError,
-    } = useGetRoles({});
-
     const {
         data: userData,
-        isLoading: isuserLoading,
-        error: userError,
+        // isLoading: isuserLoading,
+        // error: userError,
     } = useGetUsers({});
-    const [newMember, setNewMember] = useState({
-        name: '',
-        email: '',
-        role: '',
-    });
-    const [newRole, setNewRole] = useState('');
-    const [editingRole, setEditingRole] = useState('');
-    console.error(userData, 'userData');
-
     return (
         <div className='container mx-auto p-4 space-y-8'>
             <header className='flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0'>

diff --git a/src/app/(private)/dashboard/(admin)/users/role-form.tsx b/src/app/(private)/dashboard/(admin)/users/role-form.tsx
@@ -10,7 +10,8 @@ import {
 } from 'lucide-react';
 import { useState } from 'react';
 
-import { useGetRoles } from '@/lib/queries/roles.query';
+import { useCreateRole, useDeleteRole, useEditRoleName } from '@/lib/mutations';
+import { useGetRoles } from '@/lib/queries';
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
@@ -26,6 +27,9 @@ import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
 
 export default function RoleFormDialog() {
+    const editMutation = useEditRoleName();
+    const createMutation = useCreateRole();
+    const deleteMutation = useDeleteRole();
     const [newRoleName, setNewRoleName] = useState('');
     const {
         data: roleData,
@@ -35,20 +39,17 @@ export default function RoleFormDialog() {
     } = useGetRoles({});
 
     const handleAddRole = () => {
-        // Implement add role logic here
-        console.log('Adding new role:', newRoleName);
+        createMutation.mutate(newRoleName);
         setNewRoleName('');
         refetchRoles();
     };
 
     const handleEditRole = (roleId: string) => {
-        // Implement edit role logic here
-        console.log('Editing role:', roleId);
+        editMutation.mutate({ roleId, name: 'new name' });
     };
 
     const handleDeleteRole = (roleId: string) => {
-        // Implement delete role logic here
-        console.log('Deleting role:', roleId);
+        deleteMutation.mutate(roleId);
         refetchRoles();
     };
 

diff --git a/src/components/private/header.tsx b/src/components/private/header.tsx
@@ -4,7 +4,7 @@ import { CircleUser, Menu, Sparkles } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { signOut } from '@/lib/actions/auth';
+import { signOut } from '@/lib/actions/auth.action';
 import { DatabaseUserAttributes } from '@/lib/auth';
 
 import { Button } from '@/components/ui/button';

diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
@@ -1,59 +1,62 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
+    'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+    {
+        variants: {
+            variant: {
+                default: 'bg-background text-foreground',
+                destructive:
+                    'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
     },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
+);
 
 const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
 >(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-))
-Alert.displayName = "Alert"
+    <div
+        ref={ref}
+        role='alert'
+        className={cn(alertVariants({ variant }), className)}
+        {...props}
+    />
+));
+Alert.displayName = 'Alert';
 
 const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-AlertTitle.displayName = "AlertTitle"
+    <h5
+        ref={ref}
+        className={cn(
+            'mb-1 font-medium leading-none tracking-tight',
+            className,
+        )}
+        {...props}
+    />
+));
+AlertTitle.displayName = 'AlertTitle';
 
 const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
+    <div
+        ref={ref}
+        className={cn('text-sm [&_p]:leading-relaxed', className)}
+        {...props}
+    />
+));
+AlertDescription.displayName = 'AlertDescription';
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertDescription, AlertTitle };
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
@@ -1,48 +1,50 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+    React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+    <ScrollAreaPrimitive.Root
+        ref={ref}
+        className={cn('relative overflow-hidden', className)}
+        {...props}
+    >
+        <ScrollAreaPrimitive.Viewport className='h-full w-full rounded-[inherit]'>
+            {children}
+        </ScrollAreaPrimitive.Viewport>
+        <ScrollBar />
+        <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+    React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+    React.ComponentPropsWithoutRef<
+        typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+    >
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+        ref={ref}
+        orientation={orientation}
+        className={cn(
+            'flex touch-none select-none transition-colors',
+            orientation === 'vertical' &&
+                'h-full w-2.5 border-l border-l-transparent p-[1px]',
+            orientation === 'horizontal' &&
+                'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+            className,
+        )}
+        {...props}
+    >
+        <ScrollAreaPrimitive.ScrollAreaThumb className='relative flex-1 rounded-full bg-border' />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };