Feature/auth guard update (#230)

- add AuthGuard on myFeed
- make AuthGuard closable with redirect to MainPage

src/components/Article/FullArticle.tsx

@@ -60,7 +60,6 @@ export const FullArticle = (props: Props) => {
     }, 'bookmark')
   }
 
-  console.log('!!! props.article.media:', props.article.media)
   const body = createMemo(() => {
     if (props.article.layout === 'literature') {
       try {

src/components/AuthGuard/AuthGuard.tsx

@@ -4,11 +4,16 @@ import { hideModal, showModal } from '../../stores/ui'
 
 type Props = {
   children: JSX.Element
+  disabled?: boolean
 }
 
 export const AuthGuard = (props: Props) => {
   const { isAuthenticated, isSessionLoaded } = useSession()
+
   createEffect(() => {
+    if (props.disabled) {
+      return
+    }
     if (isSessionLoaded()) {
       if (isAuthenticated()) {
         hideModal()
@@ -18,5 +23,5 @@ export const AuthGuard = (props: Props) => {
     }
   })
 
-  return <Show when={isSessionLoaded() && isAuthenticated()}>{props.children}</Show>
+  return <Show when={(isSessionLoaded() && isAuthenticated()) || props.disabled}>{props.children}</Show>
 }

src/components/Nav/Modal/Modal.tsx

@@ -5,6 +5,8 @@ import { hideModal, useModalStore } from '../../../stores/ui'
 import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler'
 
 import styles from './Modal.module.scss'
+import { redirectPage } from '@nanostores/router'
+import { router } from '../../../stores/router'
 
 interface Props {
   name: string
@@ -22,9 +24,11 @@ export const Modal = (props: Props) => {
   const allowClose = createMemo(() => props.allowClose !== false)
   const handleHide = () => {
     if (modal() && allowClose()) {
-      hideModal()
       props.onClose && props.onClose()
+    } else {
+      redirectPage(router, 'home')
     }
+    hideModal()
   }
 
   useEscKeyDownHandler(handleHide)
@@ -45,7 +49,6 @@ export const Modal = (props: Props) => {
           onClick={(event) => event.stopPropagation()}
         >
           {props.children}
-          <Show when={allowClose()}>
           <div class={styles.close} onClick={handleHide}>
             <svg
               class={styles.icon}
@@ -60,7 +63,6 @@ export const Modal = (props: Props) => {
               />
             </svg>
           </div>
-          </Show>
         </div>
       </div>
     </Show>

src/components/Views/Feed.tsx

@@ -18,6 +18,9 @@ import stylesTopic from '../Feed/CardTopic.module.scss'
 import stylesBeside from '../../components/Feed/Beside.module.scss'
 import { CommentDate } from '../Article/CommentDate'
 import { Loading } from '../_shared/Loading'
+import { ConditionalWrapper } from '../_shared/ConditionalWrapper'
+import { AuthGuard } from '../AuthGuard'
+import { useSession } from '../../context/session'
 
 export const FEED_PAGE_SIZE = 20
 
@@ -37,9 +40,17 @@ const getOrderBy = (by: FeedSearchParams['by']) => {
   return ''
 }
 
+const routesWithAuthGuard = new Set([
+  'feedMy',
+  'feedNotifications',
+  'feedBookmarks',
+  'feedCollaborations',
+  'feedDiscussions'
+])
 export const FeedView = () => {
   const { t } = useLocalize()
   const { page, searchParams } = useRouter<FeedSearchParams>()
+  const { isAuthenticated } = useSession()
   const [isLoading, setIsLoading] = createSignal(false)
 
   // state
@@ -69,7 +80,6 @@ export const FeedView = () => {
       { defer: true }
     )
   )
-
   const loadFeedShouts = () => {
     const options: LoadShoutsOptions = {
       limit: FEED_PAGE_SIZE,
@@ -82,7 +92,7 @@ export const FeedView = () => {
       options.order_by = orderBy
     }
 
-    if (page().route === 'feedMy') {
+    if (routesWithAuthGuard.has(page().route) && isAuthenticated()) {
       return loadMyFeed(options)
     }
 
@@ -116,6 +126,7 @@ export const FeedView = () => {
 
   return (
     <div>
+      <AuthGuard disabled={!routesWithAuthGuard.has(page().route)}>
         <div class="wide-container feed">
           <div class="row">
             <div class={clsx('col-md-5 col-xl-4', styles.feedNavigation)}>
@@ -265,6 +276,7 @@ export const FeedView = () => {
             </aside>
           </div>
         </div>
+      </AuthGuard>
     </div>
   )
 }

src/components/_shared/GrowingTextarea/GrowingTextarea.tsx

@@ -39,8 +39,6 @@ export const GrowingTextarea = (props: Props) => {
     }
   }
 
-  console.log('!!! initialValue:', props.initialValue)
-
   return (
     <div
       class={clsx(styles.GrowingTextarea, {