From 7dc2efca66411232d03ccb4d4d0a43cf7f731868 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Fri, 3 May 2024 11:36:15 +0300
Subject: [PATCH] isAuthenticate memo removed

---
 src/components/Article/FullArticle.tsx        |  4 +-
 src/components/AuthGuard/AuthGuard.tsx        |  6 +-
 src/components/Editor/Panel/Panel.tsx         | 19 +++++-
 src/components/Nav/HeaderAuth.tsx             | 59 +++++++++++--------
 .../NotificationsPanel/NotificationsPanel.tsx | 19 +++---
 src/context/notifications.tsx                 | 10 ++--
 src/context/session.tsx                       |  5 --
 7 files changed, 70 insertions(+), 52 deletions(-)

diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index 25001f38..5d878580 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)))
 
@@ -561,7 +561,7 @@ export const FullArticle = (props: Props) => {
               />
             </div>
 
-            <Show when={isAuthenticated() && !canEdit()}>
+            <Show when={author()?.id && !canEdit()}>
               <div class={styles.help}>
                 <button class="button">{t('Cooperate')}</button>
               </div>
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<RootSearchParams & AuthModalSearchParams>()
 
   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 <Show when={(isSessionLoaded() && isAuthenticated()) || props.disabled}>{props.children}</Show>
+  return <Show when={(isSessionLoaded() && author()?.id) || props.disabled}>{props.children}</Show>
 }
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) => {
       <Show when={isSessionLoaded()} keyed={true}>
         <div class={clsx('col-auto col-lg-7', styles.usernav)}>
           <div class={styles.userControl}>
-            <Show when={isCreatePostButtonVisible() && isAuthenticated()}>
+            <Show when={isCreatePostButtonVisible() && author()?.id}>
               <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
                 <a href={getPagePath(router, 'create')}>
                   <span class={styles.textLabel}>{t('Create post')}</span>
@@ -215,7 +217,7 @@ export const HeaderAuth = (props: Props) => {
               </div>
             </Show>
 
-            <Show when={isCreatePostButtonVisible() && !isAuthenticated()}>
+            <Show when={isCreatePostButtonVisible() && !author()?.id}>
               <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
                 <a href={getPagePath(router, 'create')}>
                   <span class={styles.textLabel}>{t('Create post')}</span>
@@ -228,7 +230,7 @@ export const HeaderAuth = (props: Props) => {
             <Show
               when={isAuthenticatedControlsVisible()}
               fallback={
-                <Show when={!isAuthenticated()}>
+                <Show when={!author()?.id}>
                   <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
                     <a href="?m=auth&mode=login">
                       <span class={styles.textLabel}>{t('Enter')}</span>
@@ -239,20 +241,31 @@ export const HeaderAuth = (props: Props) => {
                 </Show>
               }
             >
-              <Show when={!isSaveButtonVisible()}>
-                <div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
-                  <a href={getPagePath(router, 'inbox')}>
-                    <div classList={{ entered: page().path === '/inbox' }}>
-                      <Icon name="inbox-white" class={styles.icon} />
-                      <Icon name="inbox-white-hover" class={clsx(styles.icon, styles.iconHover)} />
-                    </div>
-                  </a>
+              <Show
+                when={isSaveButtonVisible()}
+                fallback={
+                  <div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
+                    <a href={getPagePath(router, 'inbox')}>
+                      <div classList={{ entered: page().path === '/inbox' }}>
+                        <Icon name="inbox-white" class={styles.icon} />
+                        <Icon name="inbox-white-hover" class={clsx(styles.icon, styles.iconHover)} />
+                      </div>
+                    </a>
+                  </div>
+                }
+              >
+                <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
+                  <button onClick={handleSaveClick}>
+                    <span class={styles.textLabel}>{t('Save')}</span>
+                    <Icon name="save" class={styles.icon} />
+                    <Icon name="save" class={clsx(styles.icon, styles.iconHover)} />
+                  </button>
                 </div>
               </Show>
             </Show>
           </div>
 
-          <Show when={isAuthenticated()}>
+          <Show when={author()?.id}>
             <ProfilePopup
               onVisibilityChange={(isVisible) => {
                 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/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<Record<string, NotificationGroup>>({})
-  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<Author | null>
   authError: Accessor<string>
   isSessionLoaded: Accessor<boolean>
-  isAuthenticated: Accessor<boolean>
   loadSession: () => AuthToken | Promise<AuthToken>
   setSession: (token: AuthToken | null) => void // setSession
   loadAuthor: (info?: unknown) => Author | Promise<Author>
@@ -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,
   }