{
})
}
- const [prevForm, setPrevForm] = createSignal
(clone(form))
+ const [prevForm, setPrevForm] = createStore(clone(form))
const [saving, setSaving] = createSignal(false)
const mediaItems: Accessor = createMemo(() => {
@@ -94,6 +90,20 @@ export const EditView = (props: Props) => {
})
})
+ onMount(() => {
+ // eslint-disable-next-line unicorn/consistent-function-scoping
+ const handleBeforeUnload = (event) => {
+ if (!deepEqual(prevForm, form)) {
+ event.returnValue = t(
+ `There are unsaved changes in your publishing settings. Are you sure you want to leave the page without saving?`
+ )
+ }
+ }
+
+ window.addEventListener('beforeunload', handleBeforeUnload)
+ onCleanup(() => window.removeEventListener('beforeunload', handleBeforeUnload))
+ })
+
const handleTitleInputChange = (value) => {
setForm('title', value)
setForm('slug', slugify(value))
@@ -174,7 +184,7 @@ export const EditView = (props: Props) => {
const autoSaveRecursive = () => {
autoSaveTimeOutId = setTimeout(async () => {
- const hasChanges = !deepEqual(form, prevForm())
+ const hasChanges = !deepEqual(form, prevForm)
if (hasChanges) {
setSaving(true)
if (props.shout.visibility === 'owner') {
diff --git a/src/components/Views/PublishSettings/PublishSettings.tsx b/src/components/Views/PublishSettings/PublishSettings.tsx
index f2f6904d..61ab1d73 100644
--- a/src/components/Views/PublishSettings/PublishSettings.tsx
+++ b/src/components/Views/PublishSettings/PublishSettings.tsx
@@ -1,6 +1,6 @@
import { clsx } from 'clsx'
import styles from './PublishSettings.module.scss'
-import { createEffect, createSignal, onMount, Show } from 'solid-js'
+import { createSignal, onMount, Show } from 'solid-js'
import { TopicSelect, UploadModalContent } from '../../Editor'
import { Button } from '../../_shared/Button'
import { hideModal, showModal } from '../../../stores/ui'
diff --git a/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx b/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
index d5e70faf..452cb032 100644
--- a/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
+++ b/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
@@ -1,7 +1,6 @@
import { clsx } from 'clsx'
import styles from './GrowingTextarea.module.scss'
-import { createSignal, Show, Switch } from 'solid-js'
-import { style } from 'solid-js/web'
+import { createSignal, Show } from 'solid-js'
type Props = {
class?: string
diff --git a/src/context/editor.tsx b/src/context/editor.tsx
index 3cd0efca..28316a7d 100644
--- a/src/context/editor.tsx
+++ b/src/context/editor.tsx
@@ -65,6 +65,17 @@ const topic2topicInput = (topic: Topic): TopicInput => {
}
}
+const saveDraftToLocalStorage = (formToSave: ShoutForm) => {
+ localStorage.setItem(`shout-${formToSave.shoutId}`, JSON.stringify(formToSave))
+}
+const getDraftFromLocalStorage = (shoutId: number) => {
+ return JSON.parse(localStorage.getItem(`shout-${shoutId}`))
+}
+
+const removeDraftFromLocalStorage = (shoutId: number) => {
+ localStorage.removeItem(`shout-${shoutId}`)
+}
+
export const EditorProvider = (props: { children: JSX.Element }) => {
const { t } = useLocalize()
@@ -164,17 +175,6 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
await updateShout(draftForm, { publish: false })
}
- const saveDraftToLocalStorage = (formToSave: ShoutForm) => {
- localStorage.setItem(`shout-${formToSave.shoutId}`, JSON.stringify(formToSave))
- }
- const getDraftFromLocalStorage = (shoutId: number) => {
- return JSON.parse(localStorage.getItem(`shout-${shoutId}`))
- }
-
- const removeDraftFromLocalStorage = (shoutId: number) => {
- localStorage.removeItem(`shout-${shoutId}`)
- }
-
const publishShout = async (formToPublish: ShoutForm) => {
if (isEditorPanelVisible()) {
toggleEditorPanel()
diff --git a/src/context/profile.tsx b/src/context/profile.tsx
index 0e4a8cbf..6588c354 100644
--- a/src/context/profile.tsx
+++ b/src/context/profile.tsx
@@ -34,14 +34,16 @@ const useProfileForm = () => {
if (!currentSlug()) return
try {
await loadAuthor({ slug: currentSlug() })
- setForm({
+ const updatedFormValues = {
name: currentAuthor()?.name,
slug: currentAuthor()?.slug,
bio: currentAuthor()?.bio,
about: currentAuthor()?.about,
userpic: currentAuthor()?.userpic,
links: currentAuthor()?.links
- })
+ }
+
+ setForm(updatedFormValues)
} catch (error) {
console.error(error)
}
diff --git a/src/pages/profile/profileSettings.page.tsx b/src/pages/profile/profileSettings.page.tsx
index 2a8ebf68..b2ff4231 100644
--- a/src/pages/profile/profileSettings.page.tsx
+++ b/src/pages/profile/profileSettings.page.tsx
@@ -1,8 +1,10 @@
import { PageLayout } from '../../components/_shared/PageLayout'
import { Icon } from '../../components/_shared/Icon'
import ProfileSettingsNavigation from '../../components/Discours/ProfileSettingsNavigation'
-import { For, createSignal, Show, onMount } from 'solid-js'
+import { For, createSignal, Show, onMount, onCleanup } 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'
@@ -13,6 +15,8 @@ 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'
export const ProfileSettingsPage = () => {
const { t } = useLocalize()
@@ -24,11 +28,12 @@ export const ProfileSettingsPage = () => {
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)) {
@@ -45,6 +50,7 @@ export const ProfileSettingsPage = () => {
try {
await submit(form)
+ setPrevForm(clone(form))
showSnackbar({ body: t('Profile successfully saved') })
} catch {
showSnackbar({ type: 'error', body: t('Error') })
@@ -70,9 +76,23 @@ export const ProfileSettingsPage = () => {
}
const [hostname, setHostname] = createSignal(null)
- onMount(() => setHostname(window?.location.host))
- console.log('!!! form:', form)
+ 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))
+ })
+
return (