Skip to content

Commit

Permalink
A bunch of UI fixes and simplifications
Browse files Browse the repository at this point in the history
  • Loading branch information
Your Name committed Oct 19, 2024
1 parent ad152db commit 4aa222b
Show file tree
Hide file tree
Showing 8 changed files with 197 additions and 345 deletions.
98 changes: 41 additions & 57 deletions apps/web/components/dashboard/admin/AddUserDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Form,
Expand All @@ -18,28 +19,31 @@ import {
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { toast } from "@/components/ui/use-toast";
import { api } from "@/lib/trpc"; // Adjust the import path as needed
import { api } from "@/lib/trpc";
import { zodResolver } from "@hookform/resolvers/zod";
import { TRPCClientError } from "@trpc/client";
import { SubmitHandler, useForm } from "react-hook-form";
import { useForm } from "react-hook-form";
import { z } from "zod";

import { zAdminCreateUserSchema } from "@hoarder/shared/types/users";
import { zAdminCreateUserSchema } from "@hoarder/shared/types/admin";

type AdminCreateUserSchema = z.infer<typeof zAdminCreateUserSchema>;

interface AddUserDialogProps {
isOpen: boolean;
onOpenChange: (isOpen: boolean) => void;
onUserAdded: () => void;
}

export default function AddUserDialog({
isOpen,
onOpenChange,
onUserAdded,
}: AddUserDialogProps) {
children,
}: {
children?: React.ReactNode;
}) {
const apiUtils = api.useUtils();
const [isOpen, onOpenChange] = useState(false);
const form = useForm<AdminCreateUserSchema>({
resolver: zodResolver(zAdminCreateUserSchema),
defaultValues: {
Expand All @@ -48,24 +52,18 @@ export default function AddUserDialog({
password: "",
confirmPassword: "",
role: "user",
adminPassword: "",
},
});
const [isLoading, setIsLoading] = useState(false);
const createUserMutation = api.admin.createUser.useMutation();

const handleCreateUser: SubmitHandler<AdminCreateUserSchema> = async (
data,
) => {
setIsLoading(true);
try {
await createUserMutation.mutateAsync(data);
const { mutate, isPending } = api.admin.createUser.useMutation({
onSuccess: () => {
toast({
description: "User created successfully",
});
onOpenChange(false);
onUserAdded();
} catch (error) {
apiUtils.users.list.invalidate();
apiUtils.admin.userStats.invalidate();
},
onError: (error) => {
if (error instanceof TRPCClientError) {
toast({
variant: "destructive",
Expand All @@ -77,10 +75,8 @@ export default function AddUserDialog({
description: "Failed to create user",
});
}
} finally {
setIsLoading(false);
}
};
},
});

useEffect(() => {
if (!isOpen) {
Expand All @@ -90,12 +86,13 @@ export default function AddUserDialog({

return (
<Dialog open={isOpen} onOpenChange={onOpenChange}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Add User</DialogTitle>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(handleCreateUser)}>
<form onSubmit={form.handleSubmit((val) => mutate(val))}>
<div className="flex w-full flex-col space-y-2">
<FormField
control={form.control}
Expand Down Expand Up @@ -176,36 +173,23 @@ export default function AddUserDialog({
<FormItem>
<FormLabel>Role</FormLabel>
<FormControl>
<select {...field} className="w-full rounded border p-2">
<option value="user">User</option>
<option value="admin">Admin</option>
</select>
<Select
value={field.value}
onValueChange={field.onChange}
>
<SelectTrigger className="w-full">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="user">User</SelectItem>
<SelectItem value="admin">Admin</SelectItem>
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<hr className="my-4" />
<div className="mt-8">
<FormField
control={form.control}
name="adminPassword"
render={({ field }) => (
<FormItem>
<FormLabel>Admin Password</FormLabel>
<FormControl>
<Input
type="password"
placeholder="Admin Password"
{...field}
className="w-full rounded border p-2"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<DialogFooter className="sm:justify-end">
<DialogClose asChild>
<Button type="button" variant="secondary">
Expand All @@ -214,8 +198,8 @@ export default function AddUserDialog({
</DialogClose>
<ActionButton
type="submit"
loading={isLoading}
disabled={isLoading}
loading={isPending}
disabled={isPending}
>
Create
</ActionButton>
Expand Down
92 changes: 44 additions & 48 deletions apps/web/components/dashboard/admin/ChangeRoleDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Form,
Expand All @@ -17,55 +18,53 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { toast } from "@/components/ui/use-toast";
import { api } from "@/lib/trpc"; // Adjust the import path as needed
import { api } from "@/lib/trpc";
import { zodResolver } from "@hookform/resolvers/zod";
import { TRPCClientError } from "@trpc/client";
import { SubmitHandler, useForm } from "react-hook-form";
import { useForm } from "react-hook-form";
import { z } from "zod";

import { changeRoleSchema } from "@hoarder/shared/types/users";
import { changeRoleSchema } from "@hoarder/shared/types/admin";

type ChangeRoleSchema = z.infer<typeof changeRoleSchema>;

interface ChangeRoleDialogProps {
isOpen: boolean;
onOpenChange: (isOpen: boolean) => void;
userId: string;
currentRole: "user" | "admin";
onRoleChanged: () => void;
children?: React.ReactNode;
}

export default function ChangeRoleDialog({
isOpen,
onOpenChange,
userId,
currentRole,
onRoleChanged,
children,
}: ChangeRoleDialogProps) {
console.log(currentRole);
const apiUtils = api.useUtils();
const [isOpen, onOpenChange] = useState(false);
const form = useForm<ChangeRoleSchema>({
resolver: zodResolver(changeRoleSchema),
defaultValues: {
userId: "",
userId,
role: currentRole,
adminPassword: "",
},
});
const [isLoading, setIsLoading] = useState(false);
const changeRoleMutation = api.admin.changeRole.useMutation();

const handleChangeRole: SubmitHandler<ChangeRoleSchema> = async (data) => {
setIsLoading(true);
try {
await changeRoleMutation.mutateAsync({ ...data, userId });
const { mutate, isPending } = api.admin.changeRole.useMutation({
onSuccess: () => {
toast({
description: "Role changed successfully",
});
apiUtils.users.list.invalidate();
onOpenChange(false);
onRoleChanged();
} catch (error) {
},
onError: (error) => {
if (error instanceof TRPCClientError) {
toast({
variant: "destructive",
Expand All @@ -77,29 +76,25 @@ export default function ChangeRoleDialog({
description: "Failed to change role",
});
}
} finally {
setIsLoading(false);
}
};
},
});

useEffect(() => {
if (isOpen) {
form.reset({
userId,
role: currentRole,
adminPassword: "",
});
form.reset();
}
}, [isOpen, form, userId, currentRole]);
}, [isOpen, form]);

return (
<Dialog open={isOpen} onOpenChange={onOpenChange}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent>
<DialogTrigger asChild></DialogTrigger>
<DialogHeader>
<DialogTitle>Change Role</DialogTitle>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(handleChangeRole)}>
<form onSubmit={form.handleSubmit((val) => mutate(val))}>
<div className="flex w-full flex-col space-y-2">
<FormField
control={form.control}
Expand All @@ -108,30 +103,31 @@ export default function ChangeRoleDialog({
<FormItem>
<FormLabel>Role</FormLabel>
<FormControl>
<select {...field} className="w-full rounded border p-2">
<option value="user">User</option>
<option value="admin">Admin</option>
</select>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
>
<SelectTrigger className="w-full">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="user">User</SelectItem>
<SelectItem value="admin">Admin</SelectItem>
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="adminPassword"
name="userId"
render={({ field }) => (
<FormItem>
<FormLabel>Admin Password</FormLabel>
<FormControl>
<Input
type="password"
placeholder="Admin Password"
{...field}
className="w-full rounded border p-2"
/>
<input type="hidden" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
Expand All @@ -143,8 +139,8 @@ export default function ChangeRoleDialog({
</DialogClose>
<ActionButton
type="submit"
loading={isLoading}
disabled={isLoading}
loading={isPending}
disabled={isPending}
>
Change
</ActionButton>
Expand Down
Loading

0 comments on commit 4aa222b

Please sign in to comment.