discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

beautiful profile update

Browse Source
This commit is contained in:
bniwredyc 2023-02-09 18:53:11 +01:00
parent 5a9abfa619
commit 6a1860d824
1 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/Pages/profile/ProfileSettingsPage.tsx
View File

@ -9,12 +9,20 @@ import styles from './Settings.module.scss'
import { useProfileForm } from '../../../context/profile' import { useProfileForm } from '../../../context/profile'
import validateUrl from '../../../utils/validateUrl' import validateUrl from '../../../utils/validateUrl'
import { createFileUploader, UploadFile } from '@solid-primitives/upload' import { createFileUploader, UploadFile } from '@solid-primitives/upload'
import { Loading } from '../../Loading'
import { useSession } from '../../../context/session'
import Button from '../../_shared/Button'
export const ProfileSettingsPage = (props: PageProps) => { export const ProfileSettingsPage = () => {
const [addLinkForm, setAddLinkForm] = createSignal<boolean>(false) const [addLinkForm, setAddLinkForm] = createSignal(false)
const [incorrectUrl, setIncorrectUrl] = createSignal<boolean>(false) const [incorrectUrl, setIncorrectUrl] = createSignal(false)
const [isSubmitting, setIsSubmitting] = createSignal(false)
const [isUserpicUpdating, setIsUserpicUpdating] = createSignal(false)
const {
actions: { loadSession }
} = useSession()
const { form, updateFormField, submit, slugError } = useProfileForm() const { form, updateFormField, submit, slugError } = useProfileForm()
let updateForm: HTMLFormElement
const handleChangeSocial = (value: string) => { const handleChangeSocial = (value: string) => {
if (validateUrl(value)) { if (validateUrl(value)) {
updateFormField('links', value) updateFormField('links', value)
@ -23,9 +31,12 @@ export const ProfileSettingsPage = (props: PageProps) => {
setIncorrectUrl(true) setIncorrectUrl(true)
} }
} }
const handleSubmit = (event: Event): void => { const handleSubmit = async (event: Event) => {
event.preventDefault() event.preventDefault()
submit(form) setIsSubmitting(true)
await submit(form)
await loadSession()
setIsSubmitting(false)
} }
const { selectFiles } = createFileUploader({ multiple: false, accept: 'image/*' }) const { selectFiles } = createFileUploader({ multiple: false, accept: 'image/*' })
@ -43,8 +54,10 @@ export const ProfileSettingsPage = (props: PageProps) => {
const handleUserpicUpload = async () => { const handleUserpicUpload = async () => {
await selectFiles(async ([uploadFile]) => { await selectFiles(async ([uploadFile]) => {
try { try {
setIsUserpicUpdating(true)
const fileUrl = await handleFileUpload(uploadFile) const fileUrl = await handleFileUpload(uploadFile)
updateFormField('userpic', fileUrl) updateFormField('userpic', fileUrl)
setIsUserpicUpdating(false)
} catch (error) { } catch (error) {
console.error('[upload avatar] error', error) console.error('[upload avatar] error', error)
} }
@ -68,13 +81,15 @@ export const ProfileSettingsPage = (props: PageProps) => {
<div class="col-md-10 col-lg-9 col-xl-8"> <div class="col-md-10 col-lg-9 col-xl-8">
<h1>{t('Profile settings')}</h1> <h1>{t('Profile settings')}</h1>
<p class="description">{t('Here you can customize your profile the way you want.')}</p> <p class="description">{t('Here you can customize your profile the way you want.')}</p>
<form ref={updateForm} onSubmit={handleSubmit} enctype="multipart/form-data"> <form onSubmit={handleSubmit} enctype="multipart/form-data">
<h4>{t('Userpic')}</h4> <h4>{t('Userpic')}</h4>
<div class="pretty-form__item"> <div class="pretty-form__item">
<div class={styles.avatarContainer}> <div class={styles.avatarContainer}>
<Show when={!isUserpicUpdating()} fallback={<Loading />}>
<button role="button" onClick={() => handleUserpicUpload()}> <button role="button" onClick={() => handleUserpicUpload()}>
<img class={styles.avatar} src={form.userpic} alt={form.name} /> <img class={styles.avatar} src={form.userpic} alt={form.name} />
</button> </button>
</Show>
</div> </div>
</div> </div>
<h4>{t('Name')}</h4> <h4>{t('Name')}</h4>
@ -187,13 +202,8 @@ export const ProfileSettingsPage = (props: PageProps) => {
)} )}
</For> </For>
</div> </div>
<br /> <br />
<p> <Button type="submit" size="L" value={t('Save settings')} loading={isSubmitting()} />
<button type="submit" class="button button--submit">
{t('Save settings')}
</button>
</p>
</form> </form>
</div> </div>
</div> </div>