import { PageLayout } from '../../components/_shared/PageLayout' import { Icon } from '../../components/_shared/Icon' import ProfileSettingsNavigation from '../../components/Discours/ProfileSettingsNavigation' import { For, createSignal, Show, onMount, onCleanup, createEffect, on } from 'solid-js' import deepEqual from 'fast-deep-equal' import { clsx } from 'clsx' import styles from './Settings.module.scss' import { useProfileForm } from '../../context/profile' import { validateUrl } from '../../utils/validateUrl' import { createFileUploader } from '@solid-primitives/upload' import { useSession } from '../../context/session' import FloatingPanel from '../../components/_shared/FloatingPanel/FloatingPanel' import { useSnackbar } from '../../context/snackbar' import { useLocalize } from '../../context/localize' import { handleFileUpload } from '../../utils/handleFileUpload' import { Userpic } from '../../components/Author/Userpic' import { createStore } from 'solid-js/store' import { clone } from '../../utils/clone' import SimplifiedEditor from '../../components/Editor/SimplifiedEditor' import { GrowingTextarea } from '../../components/_shared/GrowingTextarea' import { resetSortedArticles } from '../../stores/zine/articles' export const ProfileSettingsPage = () => { const { t } = useLocalize() const [addLinkForm, setAddLinkForm] = createSignal(false) const [incorrectUrl, setIncorrectUrl] = createSignal(false) const [isUserpicUpdating, setIsUserpicUpdating] = createSignal(false) const [isFloatingPanelVisible, setIsFloatingPanelVisible] = createSignal(false) const { actions: { showSnackbar } } = useSnackbar() const { actions: { loadSession } } = useSession() const { form, updateFormField, submit, slugError } = useProfileForm() const [prevForm, setPrevForm] = createStore(clone(form)) const handleChangeSocial = (value: string) => { if (validateUrl(value)) { updateFormField('links', value) setAddLinkForm(false) } else { setIncorrectUrl(true) } } const handleSubmit = async (event: Event) => { event.preventDefault() try { await submit(form) setPrevForm(clone(form)) showSnackbar({ body: t('Profile successfully saved') }) } catch { showSnackbar({ type: 'error', body: t('Error') }) } loadSession() } const { selectFiles } = createFileUploader({ multiple: false, accept: 'image/*' }) const handleAvatarClick = async () => { await selectFiles(async ([uploadFile]) => { try { setIsUserpicUpdating(true) const result = await handleFileUpload(uploadFile) updateFormField('userpic', result.url) setIsUserpicUpdating(false) setIsFloatingPanelVisible(true) } catch (error) { console.error('[upload avatar] error', error) } }) } const [hostname, setHostname] = createSignal(null) onMount(() => { setHostname(window?.location.host) // eslint-disable-next-line unicorn/consistent-function-scoping const handleBeforeUnload = (event) => { if (!deepEqual(form, prevForm)) { event.returnValue = t( 'There are unsaved changes in your profile settings. Are you sure you want to leave the page without saving?' ) } } window.addEventListener('beforeunload', handleBeforeUnload) onCleanup(() => window.removeEventListener('beforeunload', handleBeforeUnload)) }) const handleSaveProfile = () => { setIsFloatingPanelVisible(false) setPrevForm(clone(form)) } createEffect(() => { if (!deepEqual(form, prevForm)) { setIsFloatingPanelVisible(true) } }) return (

{t('Profile settings')}

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

{t('Userpic')}

{t('Name')}

{t( 'Your name will appear on your profile page and as your signature in publications, comments and responses.' )}

updateFormField('name', event.currentTarget.value)} value={form.name} />

{t('Address on Discourse')}

updateFormField('slug', event.currentTarget.value)} value={form.slug} class="nolabel" />

{t(`${slugError()}`)}

{t('Introduce')}

updateFormField('bio', value)} initialValue={form.bio} allowEnterKey={false} maxLength={80} />

{t('About myself')}

updateFormField('about', value)} maxLength={500} /> {/*Нет реализации полей на бэке*/} {/*

{t('How can I help/skills')}

*/} {/*
*/} {/* */} {/*
*/} {/*

{t('Where')}

*/} {/*
*/} {/* */} {/* */} {/*
*/} {/*

{t('Date of Birth')}

*/} {/*
*/} {/* */} {/*
*/}

{t('Social networks')}

handleChangeSocial(event.currentTarget.value)} />

{t('It does not look like url')}

{(link) => (
)}

setIsFloatingPanelVisible(false)} />
) } export const Page = ProfileSettingsPage