Enhance user profile update and sharing features (#371)

ttizze · Nov 21, 2024 · 26189db · 26189db
2 parents a5b57ee + 834c57d
commit 26189db
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 25 deletions.
diff --git a/web/app/routes/$userName+/edit/functions/mutations.server.ts b/web/app/routes/$userName+/edit/functions/mutations.server.ts
@@ -1,18 +1,28 @@
-import type { User } from "@prisma/client";
 import { prisma } from "~/utils/prisma";
 import { isUserNameTaken } from "./queries.server";
 
-export async function updateUser(userId: number, data: Partial<User>) {
+export async function updateUser(
+	userId: number,
+	data: {
+		displayName: string;
+		userName: string;
+		profile: string | undefined;
+		icon: string;
+		geminiApiKey: string | undefined;
+	},
+) {
 	return prisma.$transaction(async (tx) => {
 		const currentUser = await tx.user.findUnique({
 			where: { id: userId },
 		});
 		if (!currentUser) {
 			throw new Error("User not found");
 		}
-		const isNameTaken = await isUserNameTaken(currentUser.userName);
-		if (isNameTaken && data.userName !== currentUser.userName) {
-			throw new Error("This name is already taken.");
+		if (data.userName !== currentUser.userName) {
+			const isNameTaken = await isUserNameTaken(data.userName);
+			if (isNameTaken) {
+				throw new Error("This name is already taken.");
+			}
 		}
 		return tx.user.update({
 			where: {

diff --git a/web/app/routes/$userName+/edit/route.tsx b/web/app/routes/$userName+/edit/route.tsx
@@ -20,6 +20,7 @@ import { Label } from "~/components/ui/label";
 import { validateGeminiApiKey } from "~/features/translate/services/gemini";
 import { uploadImage } from "~/routes/$userName+/utils/uploadImage";
 import { authenticator } from "~/utils/auth.server";
+import { cn } from "~/utils/cn";
 import { sanitizeUser } from "~/utils/sanitizeUser";
 import { commitSession, getSession } from "~/utils/session.server";
 import { updateUser } from "./functions/mutations.server";
@@ -44,10 +45,12 @@ const schema = z.object({
 			/^[a-zA-Z][a-zA-Z0-9-]*$/,
 			"Must start with a alphabet and can only contain alphabets, numbers, and hyphens",
 		)
-		.refine(
-			(name) => !RESERVED_USERNAMES.includes(name.toLowerCase()),
-			"This username cannot be used",
-		)
+		.refine((name) => {
+			const isReserved = RESERVED_USERNAMES.some(
+				(reserved) => reserved.toLowerCase() === name.toLowerCase(),
+			);
+			return !isReserved;
+		}, "This username cannot be used")
 		.refine(
 			(name) => !/^\d+$/.test(name),
 			"Username cannot consist of only numbers",
@@ -211,15 +214,19 @@ export default function EditProfile() {
 								{showUsernameInput ? "Cancel" : "Edit Username"}
 							</Button>
 						</div>
-						{showUsernameInput && (
-							<code className="flex items-center gap-2 px-2 mt-2 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg">
-								evame.tech/
-								<Input
-									{...getInputProps(fields.userName, { type: "text" })}
-									className=" border rounded-lg bg-white dark:bg-black/50 focus:outline-none"
-								/>
-							</code>
-						)}
+
+						<code
+							className={cn(
+								"flex items-center gap-2 px-2 mt-2 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg",
+								showUsernameInput ? "block" : "hidden",
+							)}
+						>
+							evame.tech/
+							<Input
+								{...getInputProps(fields.userName, { type: "text" })}
+								className=" border rounded-lg bg-white dark:bg-black/50 focus:outline-none"
+							/>
+						</code>
 						<div
 							id={fields.userName.errorId}
 							className="text-red-500 text-sm mt-1"
@@ -298,8 +305,10 @@ export default function EditProfile() {
 							</span>
 						)}
 					</Button>
-					{form.errors && (
-						<p className="text-red-500 text-center mt-2">{form.errors}</p>
+					{form.allErrors && (
+						<p className="text-red-500 text-center mt-2">
+							{Object.values(form.allErrors).join(", ")}
+						</p>
 					)}
 				</Form>
 			</div>

diff --git a/web/app/routes/$userName+/index.tsx b/web/app/routes/$userName+/index.tsx
@@ -158,10 +158,10 @@ export default function UserPage() {
 	};
 
 	return (
-		<div className="container mx-auto">
+		<div className="">
 			<div className="mb-6 rounded-3xl w-full overflow-hidden ">
-				<div className="grid grid-cols-4 gap-4 p-4">
-					<div className="col-span-1 flex  justify-start">
+				<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+					<div className=" flex  justify-start">
 						<Link to={`${sanitizedUserWithPages.icon}`}>
 							<Avatar className="w-32 h-32">
 								<AvatarImage
@@ -174,7 +174,7 @@ export default function UserPage() {
 							</Avatar>
 						</Link>
 					</div>
-					<div className="col-span-3">
+					<div className="md:col-span-3">
 						<CardHeader className="p-0">
 							<CardTitle className="text-2xl font-bold flex justify-between items-center">
 								<div>{sanitizedUserWithPages.displayName}</div>

diff --git a/web/app/routes/$userName+/page+/$slug+/components/ShareDialog.tsx b/web/app/routes/$userName+/page+/$slug+/components/ShareDialog.tsx
@@ -1,4 +1,5 @@
 import { Share } from "lucide-react";
+import { CopyIcon } from "lucide-react";
 import { useState } from "react";
 import {
 	FacebookIcon,
@@ -36,11 +37,17 @@ export function ShareDialog({ url, title }: ShareDialogProps) {
 					<Share className="h-5 w-5" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-md">
+			<DialogContent className="sm:max-w-md rounded-3xl">
 				<DialogHeader>
 					<DialogTitle>Share</DialogTitle>
 				</DialogHeader>
 				<div className="flex justify-center space-x-4 mt-4">
+					<CopyIcon
+						className="w-4 h-4 ml-2 cursor-pointer"
+						onClick={() => {
+							navigator.clipboard.writeText(url);
+						}}
+					/>
 					<FacebookShareButton url={url}>
 						<FacebookIcon size={32} round />
 					</FacebookShareButton>