diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 6f76d47a..1c54c144 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -75,7 +75,7 @@ export const FullArticle = (props: Props) => { const [isReactionsLoaded, setIsReactionsLoaded] = createSignal(false) const [isActionPopupActive, setIsActionPopupActive] = createSignal(false) const { t, formatDate, lang } = useLocalize() - const { author, session, isAuthenticated, requireAuthentication } = useSession() + const { author, session, requireAuthentication } = useSession() const formattedDate = createMemo(() => formatDate(new Date(props.article.published_at * 1000))) @@ -576,7 +576,7 @@ export const FullArticle = (props: Props) => { /> - +
diff --git a/src/components/AuthGuard/AuthGuard.tsx b/src/components/AuthGuard/AuthGuard.tsx index 6ba70476..96f3e502 100644 --- a/src/components/AuthGuard/AuthGuard.tsx +++ b/src/components/AuthGuard/AuthGuard.tsx @@ -12,7 +12,7 @@ type Props = { } export const AuthGuard = (props: Props) => { - const { isAuthenticated, isSessionLoaded } = useSession() + const { author, isSessionLoaded } = useSession() const { changeSearchParams } = useRouter() createEffect(() => { @@ -20,7 +20,7 @@ export const AuthGuard = (props: Props) => { return } if (isSessionLoaded()) { - if (isAuthenticated()) { + if (author()?.id) { hideModal() } else { changeSearchParams( @@ -37,5 +37,5 @@ export const AuthGuard = (props: Props) => { } }) - return {props.children} + return {props.children} } diff --git a/src/components/Editor/Panel/Panel.tsx b/src/components/Editor/Panel/Panel.tsx index fe96f1e7..aaf7bd60 100644 --- a/src/components/Editor/Panel/Panel.tsx +++ b/src/components/Editor/Panel/Panel.tsx @@ -23,8 +23,16 @@ type Props = { export const Panel = (props: Props) => { const { t } = useLocalize() - const { isEditorPanelVisible, wordCounter, editorRef, form, toggleEditorPanel, saveShout, publishShout } = - useEditorContext() + const { + isEditorPanelVisible, + wordCounter, + editorRef, + form, + toggleEditorPanel, + saveShout, + saveDraft, + publishShout, + } = useEditorContext() const containerRef: { current: HTMLElement } = { current: null } const [isShortcutsVisible, setIsShortcutsVisible] = createSignal(false) @@ -43,7 +51,12 @@ export const Panel = (props: Props) => { }) const handleSaveClick = () => { - saveShout(form) + const hasTopics = form.selectedTopics?.length > 0 + if (hasTopics) { + saveShout(form) + } else { + saveDraft(form) + } } const html = useEditorHTML(() => editorRef.current()) diff --git a/src/components/Nav/HeaderAuth.tsx b/src/components/Nav/HeaderAuth.tsx index 490323ad..246a9246 100644 --- a/src/components/Nav/HeaderAuth.tsx +++ b/src/components/Nav/HeaderAuth.tsx @@ -32,14 +32,14 @@ const MD_WIDTH_BREAKPOINT = 992 export const HeaderAuth = (props: Props) => { const { t } = useLocalize() const { page } = useRouter() - const { session, author, isAuthenticated, isSessionLoaded } = useSession() + const { session, author, isSessionLoaded } = useSession() const { unreadNotificationsCount, showNotificationsPanel } = useNotifications() - const { form, toggleEditorPanel, saveShout, publishShout } = useEditorContext() + const { form, toggleEditorPanel, saveShout, saveDraft, publishShout } = useEditorContext() const handleBellIconClick = (event: Event) => { event.preventDefault() - if (!isAuthenticated()) { + if (!author()?.id) { showModal('auth') return } @@ -48,20 +48,22 @@ export const HeaderAuth = (props: Props) => { } const isEditorPage = createMemo(() => page().route === 'edit' || page().route === 'editSettings') - const isNotificationsVisible = createMemo(() => isAuthenticated() && !isEditorPage()) - const isSaveButtonVisible = createMemo(() => isAuthenticated() && isEditorPage()) + const isNotificationsVisible = createMemo(() => author()?.id && !isEditorPage()) + const isSaveButtonVisible = createMemo(() => author()?.id && isEditorPage()) const isCreatePostButtonVisible = createMemo(() => !isEditorPage()) - const isAuthenticatedControlsVisible = createMemo( - () => isAuthenticated() && session()?.user?.email_verified, - ) + const isAuthenticatedControlsVisible = createMemo(() => author()?.id && session()?.user?.email_verified) const handleBurgerButtonClick = () => { toggleEditorPanel() } - // FIXME: remove the code if not needed here - const _handleSaveButtonClick = () => { - saveShout(form) + const handleSaveClick = () => { + const hasTopics = form.selectedTopics?.length > 0 + if (hasTopics) { + saveShout(form) + } else { + saveDraft(form) + } } const [width, setWidth] = createSignal(0) @@ -107,7 +109,7 @@ export const HeaderAuth = (props: Props) => {
- + - +
{t('Create post')} @@ -228,7 +230,7 @@ export const HeaderAuth = (props: Props) => { + - + { props.setIsProfilePopupVisible(isVisible) diff --git a/src/components/NotificationsPanel/NotificationsPanel.tsx b/src/components/NotificationsPanel/NotificationsPanel.tsx index 8d98292a..45c4cd3f 100644 --- a/src/components/NotificationsPanel/NotificationsPanel.tsx +++ b/src/components/NotificationsPanel/NotificationsPanel.tsx @@ -46,7 +46,7 @@ const isEarlier = (date: Date) => { export const NotificationsPanel = (props: Props) => { const [isLoading, setIsLoading] = createSignal(false) - const { isAuthenticated } = useSession() + const { author } = useSession() const { t } = useLocalize() const { after, @@ -150,16 +150,13 @@ export const NotificationsPanel = (props: Props) => { }) createEffect( - on( - () => isAuthenticated(), - async () => { - if (isAuthenticated()) { - setIsLoading(true) - await loadNextPage() - setIsLoading(false) - } - }, - ), + on(author, async (a) => { + if (a?.id) { + setIsLoading(true) + await loadNextPage() + setIsLoading(false) + } + }), ) return ( diff --git a/src/components/Views/EditView/EditView.tsx b/src/components/Views/EditView/EditView.tsx index 625d3a59..1e8650b1 100644 --- a/src/components/Views/EditView/EditView.tsx +++ b/src/components/Views/EditView/EditView.tsx @@ -68,13 +68,14 @@ export const EditView = (props: Props) => { } = useEditorContext() const shoutTopics = props.shout.topics || [] - // TODO: проверить сохранение черновика в local storage (не работает) - const draft = props.shout || getDraftFromLocalStorage(props.shout.id) + const draft = getDraftFromLocalStorage(props.shout.id) + if (draft) { - // console.debug('draft: ', draft) - setForm(Object.keys(draft).length !== 0 ? draft : { shoutId: props.shout.id }) + const draftForm = Object.keys(draft).length !== 0 ? draft : { shoutId: props.shout.id } + setForm(draftForm) + console.debug('draft from localstorage: ', draftForm) } else { - setForm({ + const draftForm = { slug: props.shout.slug, shoutId: props.shout.id, title: props.shout.title, @@ -87,7 +88,9 @@ export const EditView = (props: Props) => { coverImageUrl: props.shout.cover, media: props.shout.media, layout: props.shout.layout, - }) + } + setForm(draftForm) + console.debug('draft from props data: ', draftForm) } const subtitleInput: { current: HTMLTextAreaElement } = { current: null } @@ -110,9 +113,6 @@ export const EditView = (props: Props) => { onCleanup(() => { window.removeEventListener('scroll', handleScroll) }) - }) - - onMount(() => { // eslint-disable-next-line unicorn/consistent-function-scoping const handleBeforeUnload = (event) => { if (!deepEqual(prevForm, form)) { @@ -188,17 +188,12 @@ export const EditView = (props: Props) => { const hasChanges = !deepEqual(form, prevForm) const hasTopic = Boolean(form.mainTopic) if (hasChanges || hasTopic) { - console.debug('[EditView.autoSave] shout has topic') + console.debug('saving draft', form) setSaving(true) - if (props.shout?.published_at) { - saveDraftToLocalStorage(form) - } else { - await saveDraft(form) - } + saveDraftToLocalStorage(form) + await saveDraft(form) setPrevForm(clone(form)) - setTimeout(() => { - setSaving(false) - }, AUTO_SAVE_DELAY) + setTimeout(() => setSaving(false), AUTO_SAVE_DELAY) } } diff --git a/src/context/notifications.tsx b/src/context/notifications.tsx index b25ca037..7233f426 100644 --- a/src/context/notifications.tsx +++ b/src/context/notifications.tsx @@ -40,11 +40,11 @@ export const NotificationsProvider = (props: { children: JSX.Element }) => { const [unreadNotificationsCount, setUnreadNotificationsCount] = createSignal(0) const [totalNotificationsCount, setTotalNotificationsCount] = createSignal(0) const [notificationEntities, setNotificationEntities] = createStore>({}) - const { isAuthenticated } = useSession() + const { author } = useSession() const { addHandler } = useConnect() const loadNotificationsGrouped = async (options: { after: number; limit?: number; offset?: number }) => { - if (isAuthenticated() && notifierClient?.private) { + if (author()?.id && notifierClient?.private) { const notificationsResult = await notifierClient.getNotifications(options) const groups = notificationsResult?.notifications || [] const total = notificationsResult?.total || 0 @@ -74,7 +74,7 @@ export const NotificationsProvider = (props: { children: JSX.Element }) => { onMount(() => { addHandler((data: SSEMessage) => { - if (data.entity === 'reaction' && isAuthenticated()) { + if (data.entity === 'reaction' && author()?.id) { console.info('[context.notifications] event', data) loadNotificationsGrouped({ after: after(), limit: Math.max(PAGE_SIZE, loadedNotificationsCount()) }) } @@ -91,14 +91,14 @@ export const NotificationsProvider = (props: { children: JSX.Element }) => { } const markSeenAll = async () => { - if (isAuthenticated() && notifierClient.private) { + if (author()?.id && notifierClient.private) { await notifierClient.markSeenAfter({ after: after() }) await loadNotificationsGrouped({ after: after(), limit: loadedNotificationsCount() }) } } const markSeen = async (notification_id: number) => { - if (isAuthenticated() && notifierClient.private) { + if (author()?.id && notifierClient.private) { await notifierClient.markSeen(notification_id) await loadNotificationsGrouped({ after: after(), limit: loadedNotificationsCount() }) } diff --git a/src/context/session.tsx b/src/context/session.tsx index c2bad423..8ebb803a 100644 --- a/src/context/session.tsx +++ b/src/context/session.tsx @@ -48,7 +48,6 @@ export type SessionContextType = { author: Resource authError: Accessor isSessionLoaded: Accessor - isAuthenticated: Accessor loadSession: () => AuthToken | Promise setSession: (token: AuthToken | null) => void // setSession loadAuthor: (info?: unknown) => Author | Promise @@ -375,9 +374,6 @@ export const SessionProvider = (props: { console.warn(error) } } - - const isAuthenticated = createMemo(() => Boolean(author())) - const actions = { loadSession, requireAuthentication, @@ -402,7 +398,6 @@ export const SessionProvider = (props: { isSessionLoaded, author, ...actions, - isAuthenticated, resendVerifyEmail, }