harmless changes (#178)

* harmless changes

* build fix

src/components/Article/FullArticle.tsx

@@ -132,7 +132,7 @@ export const FullArticle = (props: Props) => {
     <>
       <Title>{props.article.title}</Title>
       <div class="wide-container">
-        <div class="row">
+        <div class="row position-relative">
           <article class="col-md-16 col-lg-14 col-xl-12 offset-md-5">
             {/*TODO: Check styles.shoutTopic*/}
             <Show when={props.article.layout !== 'audio'}>

src/components/Editor/Editor.tsx

@@ -62,6 +62,7 @@ const providers: Record<string, HocuspocusProvider> = {}
 export const Editor = (props: Props) => {
   const { t } = useLocalize()
   const { user } = useSession()
+
   const [isCommonMarkup, setIsCommonMarkup] = createSignal(false)
 
   const docName = `shout-${props.shoutId}`

src/components/TableOfContents/TableOfContents.tsx

@@ -1,10 +1,12 @@
-import { onMount, For, Show, createSignal } from 'solid-js'
+import { For, Show, createSignal, createEffect, on, onMount } from 'solid-js'
 import { clsx } from 'clsx'
 
 import { DEFAULT_HEADER_OFFSET } from '../../stores/router'
 
 import { useLocalize } from '../../context/localize'
 
+import { debounce } from 'debounce'
+
 import { Icon } from '../_shared/Icon'
 
 import styles from './TableOfContents.module.scss'

src/components/Views/Edit.tsx

@@ -3,16 +3,11 @@ import { useLocalize } from '../../context/localize'
 import { clsx } from 'clsx'
 import { Title } from '@solidjs/meta'
 import type { Shout, Topic } from '../../graphql/types.gen'
-import { apiClient } from '../../utils/apiClient'
 import { useRouter } from '../../stores/router'
 import { ShoutForm, useEditorContext } from '../../context/editor'
-import { Editor, Panel, TopicSelect, UploadModalContent } from '../Editor'
+import { Editor, Panel } from '../Editor'
 import { Icon } from '../_shared/Icon'
-import { Button } from '../_shared/Button'
 import styles from './Edit.module.scss'
-import { useSession } from '../../context/session'
-import { Modal } from '../Nav/Modal'
-import { hideModal, showModal } from '../../stores/ui'
 import { imageProxy } from '../../utils/imageProxy'
 import { GrowingTextarea } from '../_shared/GrowingTextarea'
 import { VideoUploader } from '../Editor/VideoUploader'
@@ -25,6 +20,7 @@ import { clone } from '../../utils/clone'
 import deepEqual from 'fast-deep-equal'
 import { AutoSaveNotice } from '../Editor/AutoSaveNotice'
 import { PublishSettings } from './PublishSettings'
+import { createStore } from 'solid-js/store'
 
 type Props = {
   shout: Shout
@@ -76,7 +72,7 @@ export const EditView = (props: Props) => {
     })
   }
 
-  const [prevForm, setPrevForm] = createSignal<ShoutForm>(clone(form))
+  const [prevForm, setPrevForm] = createStore<ShoutForm>(clone(form))
   const [saving, setSaving] = createSignal(false)
 
   const mediaItems: Accessor<MediaItem[]> = 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') {

src/context/profile.tsx

@@ -34,6 +34,7 @@ const useProfileForm = () => {
     if (!currentSlug()) return
     try {
       await loadAuthor({ slug: currentSlug() })
+
       setForm({
         name: currentAuthor()?.name,
         slug: currentAuthor()?.slug,

src/pages/profile/profileSettings.page.tsx

@@ -1,7 +1,8 @@
 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'
@@ -13,6 +14,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()
@@ -29,6 +32,7 @@ export const ProfileSettingsPage = () => {
     actions: { loadSession }
   } = useSession()
   const { form, updateFormField, submit, slugError } = useProfileForm()
+  const [prevForm, setPrevForm] = createStore(clone(form))
 
   const handleChangeSocial = (value: string) => {
     if (validateUrl(value)) {
@@ -45,6 +49,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 +75,23 @@ export const ProfileSettingsPage = () => {
   }
 
   const [hostname, setHostname] = createSignal<string | null>(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 (
     <PageLayout>
       <Show when={form}>