From 8a71cb41ea15d5a50c9a25cd490b2689b4b2632f Mon Sep 17 00:00:00 2001 From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com> Date: Sun, 24 Sep 2023 17:55:46 +0300 Subject: [PATCH] Feature/auth guard update (#230) - add AuthGuard on myFeed - make AuthGuard closable with redirect to MainPage --- src/components/Article/FullArticle.tsx | 1 - src/components/AuthGuard/AuthGuard.tsx | 7 +- src/components/Nav/Modal/Modal.tsx | 36 ++- src/components/Views/Feed.tsx | 302 +++++++++--------- .../GrowingTextarea/GrowingTextarea.tsx | 2 - 5 files changed, 182 insertions(+), 166 deletions(-) diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index bcd49c2a..4eefa9bf 100644 --- a/src/components/Article/FullArticle.tsx +++ b/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 { diff --git a/src/components/AuthGuard/AuthGuard.tsx b/src/components/AuthGuard/AuthGuard.tsx index 9cc6b842..5fa27636 100644 --- a/src/components/AuthGuard/AuthGuard.tsx +++ b/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 {props.children} + return {props.children} } diff --git a/src/components/Nav/Modal/Modal.tsx b/src/components/Nav/Modal/Modal.tsx index 43868240..7c5120bd 100644 --- a/src/components/Nav/Modal/Modal.tsx +++ b/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,22 +49,20 @@ export const Modal = (props: Props) => { onClick={(event) => event.stopPropagation()} > {props.children} - -
- - - -
- +
+ + + +
diff --git a/src/components/Views/Feed.tsx b/src/components/Views/Feed.tsx index a37dd66a..15f32f26 100644 --- a/src/components/Views/Feed.tsx +++ b/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() + 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,155 +126,157 @@ export const FeedView = () => { return (
-
-
-
- -
+ +
+
+
+ +
-
- - - }> - 0}> - - {(article) => } - - -
-
-

{t('Popular authors')}

- - {t('All authors')} - - -
- -
    - - {(author) => ( -
  • - -
    • - )} -     -
-
- - - {(article) => } - - - - -

- -

- - -
- - + + }> + 0}> + + {(article) => } + + +
+
+

{t('Popular authors')}

+ + {t('All authors')} + + +
+ +
    + + {(author) => ( +
  • + +
    • + )} +     +
+
+ + + {(article) => } + + + + +

+ +

+ + +
+ + +
-
+
) } diff --git a/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx b/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx index dd5313f0..230b8784 100644 --- a/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx +++ b/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx @@ -39,8 +39,6 @@ export const GrowingTextarea = (props: Props) => { } } - console.log('!!! initialValue:', props.initialValue) - return (