Skip to content

Commit

Permalink
style wishlist
Browse files Browse the repository at this point in the history
  • Loading branch information
@khanghy2130
khanghy2130 committed Sep 19, 2024
1 parent c22e9f2 commit b3afcff
Show file tree
Hide file tree
Showing 8 changed files with 401 additions and 273 deletions.
193 changes: 6 additions & 187 deletions app/routes/profile/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,13 @@
import { Form, Link, useOutletContext } from "@remix-run/react";
import { useEffect, useState } from "react";

import { createAvatar } from "@dicebear/core";
import * as bigSmile from "@dicebear/big-smile";
import { Link, useOutletContext } from "@remix-run/react";

import { ContextProps } from "~/utils/types/ContextProps.type";
import AvatarCustomization from "./avatar/AvatarCustomization";
import SpinnerSVG from "~/components/SpinnerSVG";
import MyWishlist from "./wishlist/MyWishlist";
import MyOrders from "./orders/MyOrders";
import MyReviews from "./reviews/MyReviews";
import ProfileInfo from "./profile_info/ProfileInfo";

export default function Profile() {
const { supabase, user, addNotification } =
useOutletContext<ContextProps>();

const [enableNameEdit, setEnableNameEdit] = useState<boolean>(false);
const [enableAvatarCustomization, setEnableAvatarCustomization] =
useState<boolean>(false);

const [nameValue, setNameValue] = useState<string>("");
const [defaultNameValue, setDefaultNameValue] = useState<string>("");

const [avatarUri, setAvatarUri] = useState<string>("");
// trigger a refetch
const [avatarUriTrigger, setAvatarUriTrigger] = useState<{}>({});

// fetch avatar options from db
useEffect(() => {
(async function () {
if (!user) return;
const { data, error } = await supabase
.from("AVATARS")
.select(`*`)
.eq("id", user.id)
.single();

if (error) {
console.error("Error fetching avatar");
addNotification("Error fetching avatar", "FAIL");
return;
}

setAvatarUri(
createAvatar(bigSmile, {
accessoriesProbability: data.accessoriesProbability!,
backgroundColor: [data.backgroundColor!],
skinColor: [data.skinColor!],
hairColor: [data.hairColor!],
// expect errors of not matching types
// @ts-expect-error
hair: [data.hair!],
// @ts-expect-error
eyes: [data.eyes!],
// @ts-expect-error
mouth: [data.mouth!],
// @ts-expect-error
accessories: [data.accessories!],
}).toDataUri(),
);
})();
}, [avatarUriTrigger]);

// fetch display_name
useEffect(() => {
(async function () {
if (!user) return;
const { data: profileData, error: profileError } = await supabase
.from("PROFILES")
.select("display_name")
.eq("id", user.id)
.single();
if (profileError) {
console.error("Error fetching profile", profileError);
addNotification("Error fetching profile", "FAIL");
return;
}
setNameValue(profileData.display_name);
setDefaultNameValue(profileData.display_name);
})();
}, []);
const { user } = useOutletContext<ContextProps>();

/*
const location = useLocation();
Expand All @@ -93,34 +21,6 @@ export default function Profile() {
}, [hasScrolled, location.hash]);
*/

const submitNameEdit: React.FormEventHandler<HTMLFormElement> =
async function (event) {
event.preventDefault();

// disable edit and set new default name
setEnableNameEdit(false);
setDefaultNameValue(nameValue);

// send update
const { error } = await supabase
.from("PROFILES")
.update({ display_name: nameValue })
.eq("id", user!.id);

if (error) {
console.error("Error updating name", error);
}
};
const cancelNameEdit: React.DOMAttributes<HTMLButtonElement>["onClick"] =
function (event) {
setEnableNameEdit(false);
setNameValue(defaultNameValue);
};
const onChangeNameEdit: React.ChangeEventHandler<HTMLInputElement> =
function (event) {
setNameValue(event.currentTarget.value.trimStart());
};

// unauthenticated render
if (!user) {
return (
Expand All @@ -134,91 +34,10 @@ export default function Profile() {
}

return (
<div className="flex w-full max-w-[1200px] flex-col md:flex-row">
<div className="flex flex-col items-start px-4">
{/* Avatar */}
<button
className="group relative"
onClick={() => setEnableAvatarCustomization(true)}
>
<div className="h-36 w-36 overflow-hidden rounded-lg">
{avatarUri === "" ? (
<div className="h-1/3 w-1/3 text-primaryColor">
<SpinnerSVG />
</div>
) : (
<img className="h-full w-full" src={avatarUri} />
)}
</div>
<div className="absolute -right-3 -top-3 flex rounded-full bg-bgColor2 p-2 group-hover:bg-bgColor3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="size-5"
>
<path d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z" />
</svg>
</div>
</button>
{enableAvatarCustomization ? (
<AvatarCustomization
setEnableAvatarCustomization={
setEnableAvatarCustomization
}
setAvatarUriTrigger={setAvatarUriTrigger}
/>
) : null}

{/* User name */}
<Form onSubmit={submitNameEdit} className="mt-6">
<input
className="w-full max-w-52 rounded-md bg-bgColor2 px-2 py-1 text-xl text-textColor1 disabled:cursor-not-allowed disabled:text-textColor2"
type="text"
onChange={onChangeNameEdit}
value={nameValue}
disabled={!enableNameEdit}
required
/>
<div className="mt-2 flex">
{enableNameEdit ? (
<>
<button
className="rounded-md bg-bgColor2 px-2 py-1 hover:bg-bgColor3"
type="button"
onClick={cancelNameEdit}
>
Cancel
</button>
<button
className="ms-2 rounded-md bg-bgColor2 px-2 py-1 hover:bg-bgColor3"
type="submit"
>
Save
</button>
</>
) : (
<button
className="flex items-center rounded-md bg-bgColor2 px-2 py-1 hover:bg-bgColor3"
type="button"
onClick={() => setEnableNameEdit(true)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="size-4"
>
<path d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z" />
</svg>
<span className="text-md ms-1">Edit</span>
</button>
)}
</div>
</Form>
</div>
<div className="relative flex w-full max-w-[1200px] flex-col md:flex-row md:items-start">
<ProfileInfo />

<div className="flex flex-grow flex-col bg-black">
<div className="mt-10 flex flex-grow flex-col px-4 md:mt-0">
<MyWishlist />
<MyOrders />
<MyReviews />
Expand Down
0 ...es/profile/avatar/AvatarCustomization.tsx → ...file/profile_info/AvatarCustomization.tsx
View file
File renamed without changes.
0 app/routes/profile/avatar/AvatarOptions.ts → ...tes/profile/profile_info/AvatarOptions.ts
View file
File renamed without changes.
Loading

0 comments on commit b3afcff

Please sign in to comment.