diff --git a/src/components/Pages/profile/ProfileSettingsPage.tsx b/src/components/Pages/profile/ProfileSettingsPage.tsx index 49587b67..eab8fc6f 100644 --- a/src/components/Pages/profile/ProfileSettingsPage.tsx +++ b/src/components/Pages/profile/ProfileSettingsPage.tsx @@ -9,12 +9,20 @@ import styles from './Settings.module.scss' import { useProfileForm } from '../../../context/profile' import validateUrl from '../../../utils/validateUrl' 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) => { - const [addLinkForm, setAddLinkForm] = createSignal(false) - const [incorrectUrl, setIncorrectUrl] = createSignal(false) +export const ProfileSettingsPage = () => { + const [addLinkForm, setAddLinkForm] = createSignal(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() - let updateForm: HTMLFormElement + const handleChangeSocial = (value: string) => { if (validateUrl(value)) { updateFormField('links', value) @@ -23,9 +31,12 @@ export const ProfileSettingsPage = (props: PageProps) => { setIncorrectUrl(true) } } - const handleSubmit = (event: Event): void => { + const handleSubmit = async (event: Event) => { event.preventDefault() - submit(form) + setIsSubmitting(true) + await submit(form) + await loadSession() + setIsSubmitting(false) } const { selectFiles } = createFileUploader({ multiple: false, accept: 'image/*' }) @@ -43,8 +54,10 @@ export const ProfileSettingsPage = (props: PageProps) => { const handleUserpicUpload = async () => { await selectFiles(async ([uploadFile]) => { try { + setIsUserpicUpdating(true) const fileUrl = await handleFileUpload(uploadFile) updateFormField('userpic', fileUrl) + setIsUserpicUpdating(false) } catch (error) { console.error('[upload avatar] error', error) } @@ -68,13 +81,15 @@ export const ProfileSettingsPage = (props: PageProps) => {

{t('Profile settings')}

{t('Here you can customize your profile the way you want.')}

-
+

{t('Userpic')}

- + }> + +

{t('Name')}

@@ -187,13 +202,8 @@ export const ProfileSettingsPage = (props: PageProps) => { )}
-
-

- -

+