Skip to content

Commit

Permalink
Fix some UI bugs with settings page
Browse files Browse the repository at this point in the history
  • Loading branch information
@bombies
bombies committed Nov 2, 2023
1 parent a9baf44 commit f6420a1
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 70 deletions.
130 changes: 69 additions & 61 deletions src/app/(site)/(internal)/settings/account/components/EditableUserProfile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import {FC, Fragment, useCallback, useState} from "react";
import {useMemberData} from "@/app/(site)/components/providers/user-data/UserProvider";
import {Spacer, Spinner} from "@nextui-org/react";
import {Spacer, Spinner, Tooltip} from "@nextui-org/react";
import Card from "@/app/(site)/components/Card";
import {CardBody} from "@nextui-org/card";
import EditableInput from "@/app/(site)/components/inputs/editable/EditableInput";
Expand Down Expand Up @@ -40,7 +40,7 @@ const EditableUserProfile: FC = () => {
<Card
className="w-1/2 laptop:w-5/6"
classNames={{
body: "p-12"
body: "p-12 phone:px-4"
}}
>
<CardBody>
Expand All @@ -50,12 +50,12 @@ const EditableUserProfile: FC = () => {
:
(
<Fragment>
<div className="flex gap-8">
<div className="flex phone:justify-center gap-8">
<EditableMemberAvatar
srcOverride={optimisticAvatarSrc}
editEnabled={member !== undefined}
member={member}
className="w-24 h-24"
className="w-24 h-24 phone:w-16 phone:h-16"
isBordered

onUploadStart={async (file) => {
Expand All @@ -81,8 +81,8 @@ const EditableUserProfile: FC = () => {
toast.error(error)
}}
/>
<div className="flex flex-col justify-center">
<h3 className="capitalize font-semibold text-2xl">{member?.firstName} {member?.lastName}</h3>
<div className="flex flex-col justify-center break-words w-1/2">
<h3 className="capitalize font-semibold text-2xl phone:text-xl">{member?.firstName} {member?.lastName}</h3>
<h3 className="text-primary brightness-200">@{member?.username}</h3>
</div>
</div>
Expand Down Expand Up @@ -131,65 +131,73 @@ const EditableUserProfile: FC = () => {
})
}}
>
<p className="flex gap-2">{member?.username} <EditIcon
className="self-center"/></p>
<p className="flex justify-between gap-2">{member?.username}
<span className="self-center">
<EditIcon/>
</span>
</p>
</EditableInput>
</div>
<div className="flex phone:flex-col gap-24 phone:gap-4">
<div>
<h4 className="text-subtext font-semibold mb-2">FIRST NAME</h4>
<EditableInput
isEditable
isRequired
value={member?.firstName}
minLength={1}
maxLength={60}
size="sm"
onEdit={async (newValue) => {
if (!newValue)
return
<div>
<h4 className="text-subtext font-semibold mb-2 flex gap-2">FIRST
NAME</h4>
<EditableInput
isEditable
isRequired
value={member?.firstName}
minLength={1}
maxLength={60}
size="sm"
onEdit={async (newValue) => {
if (!newValue)
return

if (editMemberData)
await editMemberData(
() => doUpdate({firstName: newValue}, true),
{
...member!,
firstName: newValue
}
)
}}
>
<p className="capitalize flex gap-2">{member?.firstName} <EditIcon
className="self-center"/></p>
</EditableInput>
</div>
<div>
<h4 className="text-subtext font-semibold mb-2">LAST NAME</h4>
<EditableInput
isEditable
isRequired
value={member?.lastName}
minLength={1}
maxLength={60}
size="sm"
onEdit={async (newValue) => {
if (!newValue)
return
if (editMemberData)
await editMemberData(
() => doUpdate({firstName: newValue}, true),
{
...member!,
firstName: newValue
}
)
}}
>
<p className="capitalize flex justify-between gap-2">{member?.firstName}
<span className="self-center">
<EditIcon/>
</span>
</p>
</EditableInput>
</div>
<div>
<h4 className="text-subtext font-semibold mb-2">LAST NAME</h4>
<EditableInput
isEditable
isRequired
value={member?.lastName}
minLength={1}
maxLength={60}
size="sm"
onEdit={async (newValue) => {
if (!newValue)
return

if (editMemberData)
await editMemberData(
() => doUpdate({lastName: newValue}, true),
{
...member!,
lastName: newValue
}
)
}}
>
<p className="capitalize flex gap-2">{member?.lastName} <EditIcon
className="self-center"/></p>
</EditableInput>
</div>
if (editMemberData)
await editMemberData(
() => doUpdate({lastName: newValue}, true),
{
...member!,
lastName: newValue
}
)
}}
>
<p className="capitalize flex justify-between gap-2 break-all">{member?.lastName}
<span className="self-center">
<EditIcon/>
</span>
</p>
</EditableInput>
</div>
<div>
<h4 className="text-subtext font-semibold mb-2">EMAIL ADDRESS</h4>
Expand Down
28 changes: 20 additions & 8 deletions src/app/(site)/components/inputs/editable/EditableInput.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
"use client"

import {FC, PropsWithChildren, useCallback, useEffect, useState} from "react";
import {FC, PropsWithChildren, useCallback, useEffect, useRef, useState} from "react";
import {AnimatePresence, motion} from "framer-motion";
import Input, {InputProps} from "@/app/(site)/components/inputs/Input";
import {Button} from "@nextui-org/button";
import {SubmitHandler, useForm} from "react-hook-form";
import CheckIcon from "@/app/(site)/components/icons/CheckIcon";
import CloseIcon from "@/app/(site)/components/icons/CloseIcon";
import useOnClickOutside from "use-onclickoutside";

type FormProps = {
value: string
}

type Props = {
isEditable?: boolean,
value?: string,
onEdit?: (value?: string) => void,
} & Pick<InputProps, "classNames" | "placeholder" | "label" | "size" | "isRequired" | "maxLength" | "minLength" | "validate"> & PropsWithChildren
type Props =
{
isEditable?: boolean,
value?: string,
onEdit?: (value?: string) => void,
}
& Pick<InputProps, "classNames" | "placeholder" | "label" | "size" | "isRequired" | "maxLength" | "minLength" | "validate">
& PropsWithChildren

const EditableInput: FC<Props> = ({isEditable, value, children, onEdit, ...inputProps}) => {
const {register, handleSubmit} = useForm<FormProps>()
Expand All @@ -42,10 +46,16 @@ const EditableInput: FC<Props> = ({isEditable, value, children, onEdit, ...input
setCurrentValue(value ?? "")
}, [inputProps.validate, onEdit, value])

const formRef = useRef<HTMLFormElement>(null)
useOnClickOutside(formRef, () => {
setEditToggled(false)
})

return (
<AnimatePresence>
{isEditable ? (editToggled ?
<motion.form
ref={formRef}
initial={{opacity: 0}}
animate={{opacity: 1}}
exit={{opacity: 1}}
Expand All @@ -64,19 +74,21 @@ const EditableInput: FC<Props> = ({isEditable, value, children, onEdit, ...input
color="success"
variant="light"
type="submit"
size="sm"
>
<CheckIcon/>
<CheckIcon width={16}/>
</Button>
<Button
isIconOnly
color="danger"
variant="light"
size="sm"
onPress={() => {
setEditToggled(false)
setCurrentValue(value ?? "")
}}
>
<CloseIcon/>
<CloseIcon width={16}/>
</Button>
</div>
}
Expand Down
1 change: 0 additions & 1 deletion src/app/(site)/components/sidebar/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ const Sidebar: FC<Props> = ({children, headerText}) => {
setOpen(false)
})


return (
<motion.aside
ref={sidebarRef}
Expand Down

0 comments on commit f6420a1

Please sign in to comment.