mirror of
https://github.com/Portabase/portabase.git
synced 2026-07-14 11:16:13 +02:00
Moving files and rename some of them.
This commit is contained in:
charles-gauthereau
@@ -0,0 +1,97 @@
|
||||
"use client"
|
||||
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
|
||||
import {User} from "@prisma/client";
|
||||
import {UploadIcon} from "lucide-react";
|
||||
import {toast} from "sonner";
|
||||
import {uploadImageAction} from "@/features/upload/public/upload.action";
|
||||
import {useMutation} from "@tanstack/react-query";
|
||||
import {prisma} from "@/prisma";
|
||||
import {updateImageUserAction} from "@/components/wrappers/dashboard/profile/Avatar/avatar.action";
|
||||
import {useRouter} from "next/navigation";
|
||||
import {useSession} from "next-auth/react";
|
||||
|
||||
export type AvatarWithUploadProps = {
|
||||
user: User
|
||||
}
|
||||
|
||||
|
||||
export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
|
||||
const user = props.user
|
||||
const router = useRouter();
|
||||
const { data: session, update } = useSession();
|
||||
|
||||
|
||||
const submitImage = useMutation({
|
||||
mutationFn: async (file: File) => {
|
||||
const formData = new FormData();
|
||||
formData.set("file", file);
|
||||
const uploadImage = await uploadImageAction(formData)
|
||||
const data = uploadImage?.data?.data
|
||||
|
||||
if (uploadImage?.serverError || !data) {
|
||||
console.log(uploadImage?.serverError);
|
||||
toast.error(uploadImage?.serverError);
|
||||
return;
|
||||
}
|
||||
|
||||
const updateUser = await updateImageUserAction(data.url)
|
||||
const dataUser = updateUser?.data?.data
|
||||
|
||||
if (updateUser?.serverError || !dataUser) {
|
||||
console.log(updateUser?.serverError);
|
||||
toast.error(updateUser?.serverError);
|
||||
return;
|
||||
}
|
||||
|
||||
const newSession = {
|
||||
...session,
|
||||
user: {
|
||||
...session?.user,
|
||||
image: data.url
|
||||
},
|
||||
};
|
||||
|
||||
await update(newSession);
|
||||
toast.success("Successfully uploaded user image!");
|
||||
router.refresh()
|
||||
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
if (!file.type.includes("image")) {
|
||||
toast.error("File not an image")
|
||||
return;
|
||||
}
|
||||
submitImage.mutate(file)
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="relative " >
|
||||
<Avatar className="size-14 mr-3 ">
|
||||
<AvatarFallback>{user.name?.[0]}</AvatarFallback>
|
||||
{user.image ? (
|
||||
<AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`}/>
|
||||
) : null}
|
||||
</Avatar>
|
||||
<div
|
||||
onClick={() => {
|
||||
const fileInput = document.createElement("input");
|
||||
fileInput.type = "file";
|
||||
fileInput.accept = "image/*";
|
||||
// @ts-ignore
|
||||
fileInput.onchange = handleImageUpload;
|
||||
fileInput.click();
|
||||
}}
|
||||
className="cursor-pointer absolute inset-0 flex justify-center items-center opacity-0 transition-opacity hover:opacity-100 hover:bg-gray-500 hover:bg-opacity-50 rounded-full size-14"
|
||||
>
|
||||
<UploadIcon className="w-8 h-8 text-primary"/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
"use server"
|
||||
import {userAction} from "@/safe-actions";
|
||||
import {z} from "zod";
|
||||
import {prisma} from "@/prisma";
|
||||
|
||||
|
||||
export const updateImageUserAction = userAction
|
||||
.schema(z.string())
|
||||
.action(async ({parsedInput, ctx}) => {
|
||||
|
||||
const user = await prisma.user.update({
|
||||
where: {
|
||||
id: ctx.user.id,
|
||||
},
|
||||
data: {
|
||||
image: parsedInput,
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
return {
|
||||
data: user,
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,33 @@
|
||||
"use client"
|
||||
import {useMutation} from "@tanstack/react-query";
|
||||
import {signOutAction} from "@/features/auth/auth.action";
|
||||
import {ButtonWithConfirm} from "@/components/wrappers/common/button/ButtonWithConfirm/ButtonWithConfirm";
|
||||
import {deleteUserAction} from "@/components/wrappers/dashboard/profile/ButtonDeleteAccount/delete-account.action";
|
||||
import {Trash2} from "lucide-react";
|
||||
|
||||
export type ButtonDeleteAccountProps = {
|
||||
text? : string
|
||||
}
|
||||
|
||||
export const ButtonDeleteAccount = (props: ButtonDeleteAccountProps) => {
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: () => deleteUserAction(""),
|
||||
onSuccess: async () => {
|
||||
await signOutAction();
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<ButtonWithConfirm
|
||||
text={props.text ? props.text : ""}
|
||||
onClick={() => {
|
||||
mutation.mutate()
|
||||
}}
|
||||
variant={"destructive"}
|
||||
isPending={mutation.isPending}
|
||||
className="gap-2"
|
||||
icon={<Trash2/>}
|
||||
/>
|
||||
)
|
||||
}
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
"use server"
|
||||
import {userAction} from "@/safe-actions";
|
||||
import {prisma} from "@/prisma";
|
||||
import {z} from "zod";
|
||||
import {v4 as uuidv4} from "uuid";
|
||||
import {EmailFormSchema} from "@/components/wrappers/dashboard/admin/AdminEmailTab/EmailForm/email-form.schema";
|
||||
|
||||
|
||||
export const deleteUserAction = userAction
|
||||
.schema(z.string())
|
||||
.action(async ({parsedInput, ctx}) => {
|
||||
const userId = parsedInput.length > 0 ? parsedInput : ctx.user.id;
|
||||
|
||||
const uuid = uuidv4()
|
||||
|
||||
const user = await prisma.user.update({
|
||||
where: {
|
||||
id: userId,
|
||||
},
|
||||
data: {
|
||||
email: `${uuid}@portabase.com`,
|
||||
name: `${uuid}`,
|
||||
deleted: true
|
||||
}
|
||||
})
|
||||
|
||||
const account = await prisma.account.findFirst({
|
||||
where: {
|
||||
userId: userId,
|
||||
}
|
||||
})
|
||||
if (account) {
|
||||
await prisma.account.delete({
|
||||
where: {
|
||||
id: account.id
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
return {
|
||||
data: user,
|
||||
}
|
||||
});
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import {currentUser, requiredCurrentUser} from "@/auth/current-user";
|
||||
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
|
||||
|
||||
export type UserAvatarProps = {}
|
||||
|
||||
export const UserAvatar = async () => {
|
||||
|
||||
const user = await currentUser()
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Avatar className="size-6">
|
||||
<AvatarFallback>{user.name?.[0]}</AvatarFallback>
|
||||
{user.image ? (
|
||||
<AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`}/>
|
||||
) : null}
|
||||
</Avatar>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
"use client";
|
||||
|
||||
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
|
||||
import {
|
||||
FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useZodForm
|
||||
} from "@/components/ui/form";
|
||||
import {Input} from "@/components/ui/input";
|
||||
import {Form} from "@/components/ui/form"
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {useRouter} from "next/navigation";
|
||||
import {useMutation} from "@tanstack/react-query";
|
||||
import {TooltipProvider} from "@/components/ui/tooltip";
|
||||
import {UserSchema, UserType} from "@/components/wrappers/dashboard/profile/UserForm/user-form.schema";
|
||||
import {toast} from "sonner";
|
||||
import {updateUserAction} from "@/components/wrappers/dashboard/profile/UserForm/user-form.action";
|
||||
import { useSession } from "next-auth/react";
|
||||
|
||||
export type userFormProps = {
|
||||
defaultValues?: UserType;
|
||||
userId?: string;
|
||||
}
|
||||
|
||||
export const UserForm = (props: userFormProps) => {
|
||||
|
||||
const isCreate = !Boolean(props.defaultValues)
|
||||
|
||||
const form = useZodForm({
|
||||
schema: UserSchema,
|
||||
defaultValues: props.defaultValues,
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
const { data: session, update } = useSession();
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: async (values: UserType) => {
|
||||
console.log("values", values)
|
||||
console.log(props.userId)
|
||||
const updateUser = await updateUserAction({
|
||||
id: props.userId ?? "-",
|
||||
data: values
|
||||
})
|
||||
|
||||
const data = updateUser?.data?.data
|
||||
if (updateUser?.serverError || !data) {
|
||||
console.log(updateUser?.serverError);
|
||||
toast.error(updateUser?.serverError);
|
||||
return;
|
||||
}
|
||||
console.log("email:", values.email)
|
||||
|
||||
const newSession = {
|
||||
...session,
|
||||
user: {
|
||||
...session?.user,
|
||||
name: values.name,
|
||||
email: values.email
|
||||
},
|
||||
};
|
||||
|
||||
const updateSession = await update(newSession);
|
||||
console.log(updateSession);
|
||||
toast.success(`Success updating user informations`);
|
||||
router.push(`/dashboard/profile`);
|
||||
router.refresh()
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>
|
||||
Account
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Your informations
|
||||
</CardDescription>
|
||||
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form form={form}
|
||||
className="flex flex-col gap-4"
|
||||
onSubmit={async (values) => {
|
||||
await mutation.mutateAsync(values);
|
||||
}}
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder={"Your Name"} {...field} />
|
||||
</FormControl>
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder={'exemple@portabase.com'} disabled {...field}
|
||||
value={field.value ?? ""}/>
|
||||
</FormControl>
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button>
|
||||
{isCreate ? `` : `Save`}
|
||||
</Button>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
"use server"
|
||||
import {userAction} from "@/safe-actions";
|
||||
import {z} from "zod";
|
||||
import {prisma} from "@/prisma";
|
||||
import {UserSchema} from "@/components/wrappers/dashboard/profile/UserForm/user-form.schema";
|
||||
|
||||
export const updateUserAction = userAction
|
||||
.schema(
|
||||
z.object({
|
||||
id: z.string(),
|
||||
data: UserSchema,
|
||||
}
|
||||
)
|
||||
)
|
||||
.action(async ({parsedInput, ctx}) => {
|
||||
const updatedUser = await prisma.user.update({
|
||||
where: {
|
||||
id: parsedInput.id,
|
||||
},
|
||||
data: parsedInput.data,
|
||||
})
|
||||
return {
|
||||
data: updatedUser,
|
||||
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,9 @@
|
||||
import {z} from "zod";
|
||||
|
||||
export const UserSchema = z.object({
|
||||
name: z.string().optional(),
|
||||
email: z.string().optional(),
|
||||
role: z.string().optional(),
|
||||
});
|
||||
|
||||
export type UserType = z.infer<typeof UserSchema>;
|
||||
Reference in New Issue
Block a user