profile in process

2026-01-12 12:20:23 +01:00 · 2024-09-06 12:27:35 +03:00
parent c3e99d1366
commit bc072890fc
4 changed files with 152 additions and 104 deletions
--- a/web/app/(pages)/profile/_components/wrapper.tsx
+++ b/web/app/(pages)/profile/_components/wrapper.tsx
@@ -1,10 +1,11 @@
 "use client"

 import { useAccount } from "@/lib/providers/jazz-provider"
-import { useParams, useRouter } from "next/navigation"
+import { useParams } from "next/navigation"
+import { useState, useRef } from "react"
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
+import { Input } from "@/components/ui/input"
 import Link from "next/link"
-import { LaIcon } from "@/components/custom/la-icon"
-import { Icon } from "@/components/la-editor/components/ui/icon"
 import { Button } from "@/components/ui/button"

 interface ProfileStatsProps {
@@ -12,16 +13,6 @@ interface ProfileStatsProps {
 	label: string
 }

-interface ProfileLinksProps {
-	linklabel?: string
-	link?: string
-	topic?: string
-}
-
-interface ProfilePagesProps {
-	topic?: string
-}
-
 const ProfileStats: React.FC<ProfileStatsProps> = ({ number, label }) => {
 	return (
 		<div className="text-center font-semibold text-black/60 dark:text-white">
@@ -31,37 +22,47 @@ const ProfileStats: React.FC<ProfileStatsProps> = ({ number, label }) => {
 	)
 }

-const ProfileLinks: React.FC<ProfileLinksProps> = ({ linklabel, link, topic }) => {
-	return (
-		<div className="flex flex-row items-center justify-between bg-[#121212] p-3 text-black dark:text-white">
-			<div className="flex flex-row items-center space-x-3">
-				<p className="text-base text-opacity-90">{linklabel || "Untitled"}</p>
-				<div className="flex cursor-pointer flex-row items-center gap-1">
-					<Icon name="Link" />
-					<p className="text-sm text-opacity-10">{link || "#"}</p>
-				</div>
-			</div>
-			<div className="text0opacity-50 bg-[#1a1a1a] p-2">{topic || "Uncategorized"}</div>
-		</div>
-	)
-}
-
-const ProfilePages: React.FC<ProfilePagesProps> = ({ topic }) => {
-	return (
-		<div className="flex flex-row items-center justify-between rounded-lg bg-[#121212] p-3 text-black dark:text-white">
-			<div className="rounded-lg bg-[#1a1a1a] p-2 text-opacity-50">{topic || "Uncategorized"}</div>
-		</div>
-	)
-}
-
 export const ProfileWrapper = () => {
 	const account = useAccount()
 	const params = useParams()
 	const username = params.username as string
+	const avatarInputRef = useRef<HTMLInputElement>(null)

-	const router = useRouter()
+	const [isEditing, setIsEditing] = useState(false)
+	const [newName, setNewName] = useState(account.me?.profile?.name || "")
+	const [originalName, setOriginalName] = useState(account.me?.profile?.name || "")

-	const clickEdit = () => router.push("/edit-profile")
+	const editProfileClicked = () => {
+		setIsEditing(!isEditing)
+	}
+
+	const changeName = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setNewName(e.target.value)
+	}
+
+	const saveProfile = () => {
+		if (newName.trim() !== "") {
+			if (account.me && account.me.profile) {
+				account.me.profile.name = newName.trim()
+			}
+			setOriginalName(newName.trim())
+			setIsEditing(false)
+		}
+	}
+
+	const clickOutside = () => {
+		if (isEditing) {
+			setNewName(originalName)
+			setIsEditing(false)
+		}
+	}
+
+	const editAvatar = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const file = event.target.files?.[0]
+		if (file) {
+			console.log("File selected:", file)
+		}
+	}

 	if (!account.me || !account.me.profile) {
 		return (
@@ -87,31 +88,36 @@ export const ProfileWrapper = () => {
 		<div className="flex flex-1 flex-col text-black dark:text-white">
 			<div className="flex items-center justify-between p-[20px]">
 				<p className="text-2xl font-semibold">Profile</p>
-				<Button
-					onClick={clickEdit}
-					className="shadow-outer ml-auto flex h-[34px] cursor-pointer flex-row space-x-2 rounded-lg bg-white px-3 text-black shadow-[1px_1px_1px_1px_rgba(0,0,0,0.3)] hover:bg-black/10 dark:bg-[#222222] dark:text-white dark:hover:opacity-60"
-				>
-					<LaIcon name="UserCog" className="text-foreground cursor-pointer" />
-					<span>Edit Profile</span>
-				</Button>
 			</div>
 			<p className="text-2xl font-semibold">{username}</p>
 			<div className="flex flex-col items-center border-b border-neutral-900 bg-inherit pb-5">
 				<div className="flex w-full max-w-2xl align-top">
-					<div className="mr-3 h-[130px] w-[130px] rounded-md bg-[#222222]" />
+					<Avatar className="mr-3 h-[130px] w-[130px] hover:opacity-80">
+						<AvatarImage src={account.me?.profile?.avatarUrl} alt={account.me?.profile?.name} />
+						<AvatarFallback onClick={() => avatarInputRef.current?.click()} className="cursor-pointer">
+							{account.me?.profile?.name?.charAt(0)}
+						</AvatarFallback>
+					</Avatar>
+					<input type="file" ref={avatarInputRef} onChange={editAvatar} accept="image/*" style={{ display: "none" }} />
+
 					<div className="ml-6 flex-1">
-						<p className="mb-3 text-[25px] font-semibold">{account.me.profile.name}</p>
-						<div className="mb-1 flex flex-row items-center font-light text-[24]">
-							@<p className="pl-1">{account.me.root?.username}</p>
-						</div>
-						<a href={account.me.root?.website || "#"} className="mb-1 flex flex-row items-center text-sm font-light">
-							<Icon name="Link" />
-							<p className="pl-1">{account.me.root?.website}</p>
-						</a>
+						{isEditing ? (
+							<Input
+								value={newName}
+								onChange={changeName}
+								className="border-result mb-3 mr-3 text-[25px] font-semibold"
+								onBlur={clickOutside}
+							/>
+						) : (
+							<p className="mb-3 text-[25px] font-semibold">{account.me?.profile?.name}</p>
+						)}
 					</div>
-					<button className="shadow-outer ml-auto flex h-[34px] cursor-pointer flex-row items-center justify-center space-x-2 rounded-lg bg-white px-3 text-center font-medium text-black shadow-[1px_1px_1px_1px_rgba(0,0,0,0.3)] hover:bg-black/10 dark:bg-[#222222] dark:text-white dark:hover:opacity-60">
-						Follow
-					</button>
+					<Button
+						onClick={isEditing ? saveProfile : editProfileClicked}
+						className="shadow-outer ml-auto flex h-[34px] cursor-pointer flex-row items-center justify-center space-x-2 rounded-lg bg-white px-3 text-center font-medium text-black shadow-[1px_1px_1px_1px_rgba(0,0,0,0.3)] hover:bg-black/10 dark:bg-[#222222] dark:text-white dark:hover:opacity-60"
+					>
+						{isEditing ? "Save" : "Edit profile"}
+					</Button>
 				</div>
 			</div>
 			<div className="mt-10 flex justify-center">
@@ -121,17 +127,52 @@ export const ProfileWrapper = () => {
 					<ProfileStats number={account.me.root?.topicsLearned?.length || 0} label="Learned" />
 				</div>
 			</div>
-
-			{/* <div className="mx-auto mt-10 w-[50%] justify-center space-y-1">
-				<p className="pb-3 pl-2 text-base font-light text-white/50">Public Pages</p>
-				{account.me.root?.personalPages?.map((page, index) => <ProfileLinks topic={page.topic?.name} />)}
+			<div className="mx-auto py-20">
+				<p>Public profiles are coming soon</p>
 			</div>
-			<div className="mx-auto mt-10 w-[50%] justify-center space-y-1">
-				<p className="pb-3 pl-2 text-base font-light text-white/50">Public Links</p>
-				{account.me.root?.personalLinks?.map((link, index) => (
-					<ProfileLinks key={index} linklabel={link.title} link={link.url} topic={link.topic?.name} />
-				))}
-			</div> */}
 		</div>
 	)
 }
+
+{
+	// interface ProfileLinksProps {
+	// 	linklabel?: string
+	// 	link?: string
+	// 	topic?: string
+	// }
+	// interface ProfilePagesProps {
+	// 	topic?: string
+	// }
+	// const ProfileLinks: React.FC<ProfileLinksProps> = ({ linklabel, link, topic }) => {
+	// 	return (
+	// 		<div className="flex flex-row items-center justify-between bg-[#121212] p-3 text-black dark:text-white">
+	// 			<div className="flex flex-row items-center space-x-3">
+	// 				<p className="text-base text-opacity-90">{linklabel || "Untitled"}</p>
+	// 				<div className="flex cursor-pointer flex-row items-center gap-1">
+	// 					<LaIcon name="Link" />
+	// 					<p className="text-sm text-opacity-10">{link || "#"}</p>
+	// 				</div>
+	// 			</div>
+	// 			<div className="text0opacity-50 bg-[#1a1a1a] p-2">{topic || "Uncategorized"}</div>
+	// 		</div>
+	// 	)
+	// }
+	// const ProfilePages: React.FC<ProfilePagesProps> = ({ topic }) => {
+	// 	return (
+	// 		<div className="flex flex-row items-center justify-between rounded-lg bg-[#121212] p-3 text-black dark:text-white">
+	// 			<div className="rounded-lg bg-[#1a1a1a] p-2 text-opacity-50">{topic || "Uncategorized"}</div>
+	// 		</div>
+	// 	)
+	// }
+	/* <a href={account.me.root?.website || "#"} className="mb-1 flex flex-row items-center text-sm font-light">
+							<Icon name="Link" />
+							<p className="pl-1">{account.me.root?.website}</p>
+						</a> */
+	/* <Button
+					onClick={clickEdit}
+					className="shadow-outer ml-auto flex h-[34px] cursor-pointer flex-row space-x-2 rounded-lg bg-white px-3 text-black shadow-[1px_1px_1px_1px_rgba(0,0,0,0.3)] hover:bg-black/10 dark:bg-[#222222] dark:text-white dark:hover:opacity-60"
+				>
+					<LaIcon name="UserCog" className="text-foreground cursor-pointer" />
+					<span>Edit Profile</span>
+				</Button> */
+}