Skip to content

Commit

Permalink
Merge pull request #17 from ecss-soton/fix-name-change
Browse files Browse the repository at this point in the history 
Fix name change
  • Loading branch information
@Ortovoxx
Ortovoxx authored Mar 8, 2024
2 parents 0590f93 + 7650581 commit 19a0cbf
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 103 deletions.
103 changes: 48 additions & 55 deletions src/app/(pages)/account/AccountForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,19 @@ import { useRouter } from 'next/navigation'
import { Button } from '../../../_components/Button'
import { Input } from '../../../_components/Input'
import { Message } from '../../../_components/Message'
import { useAuth } from '../../../_providers/Auth'
import type { User } from '../../../../payload/payload-types'

import classes from './index.module.scss'

type FormData = {
email: string
name: string
password: string
passwordConfirm: string
}

const AccountForm: React.FC = () => {
const AccountForm: React.FC<{ user: User }> = ({ user }) => {
const [error, setError] = useState('')
const [success, setSuccess] = useState('')
const { user, setUser } = useAuth()
const [changePassword, setChangePassword] = useState(false)
// const { user, setUser } = useAuth()

const {
register,
Expand All @@ -32,43 +29,40 @@ const AccountForm: React.FC = () => {
watch,
} = useForm<FormData>()

const password = useRef({})
password.current = watch('password', '')

const router = useRouter()

const onSubmit = useCallback(
async (data: FormData) => {
if (user) {
const response = await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}/api/users/${user.id}`, {
// Make sure to include cookies with fetch
credentials: 'include',
method: 'PATCH',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
},
})

if (response.ok) {
const json = await response.json()
setUser(json.doc)
setSuccess('Successfully updated account.')
setError('')
setChangePassword(false)
reset({
email: json.doc.email,
name: json.doc.name,
password: '',
passwordConfirm: '',
})
} else {
setError('There was a problem updating your account.')
}
}
},
[user, setUser, reset],
)
// const onSubmit = useCallback(
// async (data: FormData) => {
// if (user) {
// const response = await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}/api/users/${user.id}`, {
// // Make sure to include cookies with fetch
// credentials: 'include',
// method: 'PATCH',
// body: JSON.stringify(data),
// headers: {
// 'Content-Type': 'application/json',
// },
// })
//
// if (response.ok) {
// const json = await response.json()
// setUser(json.doc)
// setSuccess('Successfully updated account.')
// setError('')
// setChangePassword(false)
// reset({
// email: json.doc.email,
// name: json.doc.name,
// password: '',
// passwordConfirm: '',
// })
// } else {
// setError('There was a problem updating your account.')
// }
// }
// },
// [user, setUser, reset],
// )

useEffect(() => {
if (user === null) {
Expand All @@ -84,34 +78,33 @@ const AccountForm: React.FC = () => {
reset({
email: user.email,
name: user.name,
password: '',
passwordConfirm: '',
})
}
}, [user, router, reset, changePassword])
}, [user, router, reset])

return (
<form onSubmit={handleSubmit(onSubmit)} className={classes.form}>
// <form onSubmit={handleSubmit(onSubmit)} className={classes.form}>
<form className={classes.form}>
<Message error={error} success={success} className={classes.message} />
<Fragment>
<p>Change your account details below</p>
<Input
name="email"
label="Email Address"
required
// required
disabled={true}
register={register}
error={errors.email}
type="email"
/>
<Input name="name" label="Name" register={register} error={errors.name} />
<Input name="name" label="Name" register={register} error={errors.name} disabled={true} />
</Fragment>
<Button
type="submit"
label={isLoading ? 'Processing' : changePassword ? 'Change Password' : 'Update Account'}
disabled={isLoading}
appearance="primary"
className={classes.submit}
/>
{/*<Button*/}
{/* type="submit"*/}
{/* label={isLoading ? 'Processing' : changePassword ? 'Change Password' : 'Update Account'}*/}
{/* disabled={isLoading}*/}
{/* appearance="primary"*/}
{/* className={classes.submit}*/}
{/*/>*/}
</form>
)
}
Expand Down
52 changes: 4 additions & 48 deletions src/app/(pages)/account/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import { mergeOpenGraph } from '../../_utilities/mergeOpenGraph'
import AccountForm from './AccountForm'

import classes from './index.module.scss'
import { Input } from '../../_components/Input'
import { useAuth } from '../../_providers/Auth'

export default async function Account() {
const { user } = await getMeUser({
Expand All @@ -22,10 +24,6 @@ export default async function Account() {
)}&redirect=${encodeURIComponent('/account')}`,
})

const comments = await fetchComments({
user: user?.id,
})

return (
<Fragment>
<Gutter>
Expand All @@ -47,56 +45,14 @@ export default async function Account() {
type: 'paragraph',
children: [
{
text: 'This is your account dashboard. Here you can update your account information, view your comment history, and more. To manage all users, ',
},
{
type: 'link',
url: '/admin/collections/users',
children: [
{
text: 'login to the admin dashboard.',
},
],
text: 'This is your account dashboard. Here you can view your account information, if there are any problems please email us at [email protected]',
},
],
},
]}
/>
<Gutter className={classes.account}>
<AccountForm />
<HR />
<h2>Comments</h2>
<p>
These are the comments you have placed over time. Each comment is associated with a
specific post. All comments must be approved by an admin before they appear on the site.
</p>
<HR />
{comments?.length === 0 && <p>You have not made any comments yet.</p>}
{comments.length > 0 &&
comments?.map((com, index) => {
const { doc, comment, createdAt } = com

if (!comment) return null

return (
<Fragment key={index}>
<div className={classes.column}>
<p className={classes.comment}>"{comment}"</p>
<p className={classes.meta}>
{'Posted '}
{doc && typeof doc === 'object' && (
<Fragment>
{' to '}
<Link href={`/posts/${doc?.slug}`}>{doc?.title || 'Untitled Post'}</Link>
</Fragment>
)}
{createdAt && ` on ${formatDateTime(createdAt)}`}
</p>
</div>
{index < comments.length - 1 && <HR />}
</Fragment>
)
})}
<AccountForm user={user} />
<HR />
<Button href="/logout" appearance="secondary" label="Log out" />
</Gutter>
Expand Down

0 comments on commit 19a0cbf

Please sign in to comment.