diff --git a/src/components/Views/EditView/EditView.tsx b/src/components/Views/EditView/EditView.tsx
index 1e8650b1..2148a3e4 100644
--- a/src/components/Views/EditView/EditView.tsx
+++ b/src/components/Views/EditView/EditView.tsx
@@ -2,7 +2,7 @@ import { clsx } from 'clsx'
import deepEqual from 'fast-deep-equal'
import { Accessor, Show, createMemo, createSignal, lazy, onCleanup, onMount } from 'solid-js'
import { createStore } from 'solid-js/store'
-import { throttle } from 'throttle-debounce'
+import { debounce } from 'throttle-debounce'
import { ShoutForm, useEditorContext } from '../../../context/editor'
import { useLocalize } from '../../../context/localize'
@@ -42,9 +42,8 @@ export const EMPTY_TOPIC: Topic = {
slug: '',
}
-const THROTTLING_INTERVAL = 2000
-const AUTO_SAVE_INTERVAL = 5000
-const AUTO_SAVE_DELAY = 5000
+const AUTO_SAVE_DELAY = 3000
+
const handleScrollTopButtonClick = (e) => {
e.preventDefault()
window.scrollTo({
@@ -104,6 +103,8 @@ export const EditView = (props: Props) => {
return JSON.parse(form.media || '[]')
})
+ const [hasChanges, setHasChanges] = createSignal(false)
+
onMount(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 0)
@@ -113,7 +114,7 @@ export const EditView = (props: Props) => {
onCleanup(() => {
window.removeEventListener('scroll', handleScroll)
})
- // eslint-disable-next-line unicorn/consistent-function-scoping
+
const handleBeforeUnload = (event) => {
if (!deepEqual(prevForm, form)) {
event.returnValue = t(
@@ -127,8 +128,8 @@ export const EditView = (props: Props) => {
})
const handleTitleInputChange = (value: string) => {
- setForm('title', value)
- setForm('slug', slugify(value))
+ handleInputChange('title', value)
+ handleInputChange('slug', slugify(value))
if (value) {
setFormErrors('title', '')
}
@@ -136,21 +137,21 @@ export const EditView = (props: Props) => {
const handleAddMedia = (data) => {
const newMedia = [...mediaItems(), ...data]
- setForm('media', JSON.stringify(newMedia))
+ handleInputChange('media', JSON.stringify(newMedia))
}
const handleSortedMedia = (data) => {
- setForm('media', JSON.stringify(data))
+ handleInputChange('media', JSON.stringify(data))
}
const handleMediaDelete = (index) => {
const copy = [...mediaItems()]
copy.splice(index, 1)
- setForm('media', JSON.stringify(copy))
+ handleInputChange('media', JSON.stringify(copy))
}
const handleMediaChange = (index, value) => {
const updated = mediaItems().map((item, idx) => (idx === index ? value : item))
- setForm('media', JSON.stringify(updated))
+ handleInputChange('media', JSON.stringify(updated))
}
const [baseAudioFields, setBaseAudioFields] = createSignal({
@@ -162,7 +163,7 @@ export const EditView = (props: Props) => {
const handleBaseFieldsChange = (key, value) => {
if (mediaItems().length > 0) {
const updated = mediaItems().map((media) => ({ ...media, [key]: value }))
- setForm('media', JSON.stringify(updated))
+ handleInputChange('media', JSON.stringify(updated))
} else {
setBaseAudioFields({ ...baseAudioFields(), [key]: value })
}
@@ -182,34 +183,32 @@ export const EditView = (props: Props) => {
}
}
- let autoSaveTimeOutId: number | string | NodeJS.Timeout
-
const autoSave = async () => {
- const hasChanges = !deepEqual(form, prevForm)
- const hasTopic = Boolean(form.mainTopic)
- if (hasChanges || hasTopic) {
+ console.log('autoSave called')
+ if (hasChanges()) {
console.debug('saving draft', form)
setSaving(true)
saveDraftToLocalStorage(form)
await saveDraft(form)
setPrevForm(clone(form))
- setTimeout(() => setSaving(false), AUTO_SAVE_DELAY)
+ setSaving(false)
+ setHasChanges(false)
}
}
- // Throttle the autoSave function
- const throttledAutoSave = throttle(THROTTLING_INTERVAL, autoSave)
+ const debouncedAutoSave = debounce(AUTO_SAVE_DELAY, autoSave)
- const autoSaveRecursive = () => {
- autoSaveTimeOutId = setTimeout(() => {
- throttledAutoSave()
- autoSaveRecursive()
- }, AUTO_SAVE_INTERVAL)
+ const handleInputChange = (key, value) => {
+ console.log(`[handleInputChange] ${key}: ${value}`)
+ setForm(key, value)
+ setHasChanges(true)
+ debouncedAutoSave()
}
onMount(() => {
- autoSaveRecursive()
- onCleanup(() => clearTimeout(autoSaveTimeOutId))
+ onCleanup(() => {
+ debouncedAutoSave.cancel()
+ })
})
const showSubtitleInput = () => {
@@ -310,7 +309,7 @@ export const EditView = (props: Props) => {
subtitleInput.current = el
}}
allowEnterKey={false}
- value={(value) => setForm('subtitle', value || '')}
+ value={(value) => handleInputChange('subtitle', value || '')}
class={styles.subtitleInput}
placeholder={t('Subheader')}
initialValue={form.subtitle || ''}
@@ -324,7 +323,7 @@ export const EditView = (props: Props) => {
smallHeight={true}
placeholder={t('A short introduction to keep the reader interested')}
initialContent={form.lead}
- onChange={(value) => setForm('lead', value)}
+ onChange={(value) => handleInputChange('lead', value)}
/>
@@ -345,7 +344,7 @@ export const EditView = (props: Props) => {
}
isMultiply={false}
fileType={'image'}
- onUpload={(val) => setForm('coverImageUrl', val[0].url)}
+ onUpload={(val) => handleInputChange('coverImageUrl', val[0].url)}
/>
}
>
@@ -362,7 +361,7 @@ export const EditView = (props: Props) => {
setForm('coverImageUrl', null)}
+ onClick={() => handleInputChange('coverImageUrl', null)}
>
@@ -408,7 +407,7 @@ export const EditView = (props: Props) => {
setForm('body', body)}
+ onChange={(body) => handleInputChange('body', body)}
/>
diff --git a/src/context/connect.tsx b/src/context/connect.tsx
index 2b2dc808..f8ebb1c9 100644
--- a/src/context/connect.tsx
+++ b/src/context/connect.tsx
@@ -30,53 +30,57 @@ const ConnectContext = createContext
()
export const ConnectProvider = (props: { children: JSX.Element }) => {
const [messageHandlers, setHandlers] = createSignal([])
- // const [messages, setMessages] = createSignal>([]);
const [connected, setConnected] = createSignal(false)
const { session } = useSession()
+ const [retried, setRetried] = createSignal(0)
const addHandler = (handler: MessageHandler) => {
setHandlers((hhh) => [...hhh, handler])
}
- const [retried, setRetried] = createSignal(0)
createEffect(async () => {
const token = session()?.access_token
- if (token && !connected()) {
+ if (token && !connected() && retried() <= RECONNECT_TIMES) {
console.info('[context.connect] init SSE connection')
- await fetchEventSource('https://connect.discours.io', {
- method: 'GET',
- headers: {
- 'Content-Type': 'application/json',
- Authorization: token,
- },
- onmessage(event) {
- const m: SSEMessage = JSON.parse(event.data || '{}')
- console.log('[context.connect] Received message:', m)
-
- // Iterate over all registered handlers and call them
- messageHandlers().forEach((handler) => handler(m))
- },
- async onopen(response) {
- console.log('[context.connect] SSE connection opened', response)
- if (response.ok && response.headers.get('content-type') === EventStreamContentType) {
- setConnected(true)
- } else if (response.status === 401) {
- throw new Error('SSE: cannot connect to real-time updates')
- } else {
- setRetried((r) => r + 1)
- throw new Error(`SSE: failed to connect ${retried()} times`)
- }
- },
- onclose() {
- console.log('[context.connect] SSE connection closed by server')
- setConnected(false)
- },
- onerror(err) {
- if (err.message === 'unauthorized' || retried() > RECONNECT_TIMES) {
- throw err // rethrow to stop the operation
- }
- },
- })
+ try {
+ await fetchEventSource('https://connect.discours.io', {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: token,
+ },
+ onmessage(event) {
+ const m: SSEMessage = JSON.parse(event.data || '{}')
+ console.log('[context.connect] Received message:', m)
+ messageHandlers().forEach((handler) => handler(m))
+ },
+ onopen: (response) => {
+ console.log('[context.connect] SSE connection opened', response)
+ if (response.ok && response.headers.get('content-type') === EventStreamContentType) {
+ setConnected(true)
+ setRetried(0)
+ return Promise.resolve()
+ }
+ return Promise.reject(`SSE: cannot connect to real-time updates, status: ${response.status}`)
+ },
+ onclose() {
+ console.log('[context.connect] SSE connection closed by server')
+ setConnected(false)
+ if (retried() < RECONNECT_TIMES) {
+ setRetried((r) => r + 1)
+ }
+ },
+ onerror(err) {
+ console.error('[context.connect] SSE connection error:', err)
+ setConnected(false)
+ if (retried() < RECONNECT_TIMES) {
+ setRetried((r) => r + 1)
+ } else throw Error(err)
+ },
+ })
+ } catch (error) {
+ console.error('[context.connect] SSE connection failed:', error)
+ }
}
})
diff --git a/src/pages/edit.page.tsx b/src/pages/edit.page.tsx
index 21353681..aaa08eee 100644
--- a/src/pages/edit.page.tsx
+++ b/src/pages/edit.page.tsx
@@ -1,4 +1,4 @@
-import { Show, Suspense, createEffect, createMemo, createSignal, lazy, on, onMount } from 'solid-js'
+import { Show, Suspense, createEffect, createMemo, createSignal, lazy, on } from 'solid-js'
import { AuthGuard } from '../components/AuthGuard'
import { Loading } from '../components/_shared/Loading'
@@ -7,7 +7,7 @@ import { useLocalize } from '../context/localize'
import { useSession } from '../context/session'
import { apiClient } from '../graphql/client/core'
import { Shout } from '../graphql/schema/core.gen'
-import { router } from '../stores/router'
+import { router, useRouter } from '../stores/router'
import { redirectPage } from '@nanostores/router'
import { useSnackbar } from '../context/snackbar'
@@ -33,6 +33,7 @@ const getContentTypeTitle = (layout: LayoutType) => {
export const EditPage = () => {
const { t } = useLocalize()
const { session } = useSession()
+ const { page } = useRouter()
const snackbar = useSnackbar()
const fail = async (error: string) => {
@@ -45,12 +46,22 @@ export const EditPage = () => {
const [shoutId, setShoutId] = createSignal(0)
const [shout, setShout] = createSignal()
- onMount(() => {
- const shoutId = window.location.pathname.split('/').pop()
- const shoutIdFromUrl = Number.parseInt(shoutId ?? '0', 10)
- console.debug(`editing shout ${shoutIdFromUrl}`)
- if (shoutIdFromUrl) setShoutId(shoutIdFromUrl)
- })
+ createEffect(
+ on(
+ () => page(),
+ (p) => {
+ if (p?.path) {
+ console.debug(p?.path)
+ const shoutId = p?.path.split('/').pop()
+ const shoutIdFromUrl = Number.parseInt(shoutId ?? '0', 10)
+ console.debug(`editing shout ${shoutIdFromUrl}`)
+ if (shoutIdFromUrl) {
+ setShoutId(shoutIdFromUrl)
+ }
+ }
+ },
+ ),
+ )
createEffect(
on([session, shout, shoutId], async ([ses, sh, shid]) => {
@@ -63,6 +74,7 @@ export const EditPage = () => {
}
}
}),
+ { defer: true },
)
const title = createMemo(() => {