diff --git a/src/components/board-nav/board-nav.tsx b/src/components/board-nav/board-nav.tsx index 08c0f252..22726e17 100644 --- a/src/components/board-nav/board-nav.tsx +++ b/src/components/board-nav/board-nav.tsx @@ -1,35 +1,34 @@ import { useAccountComment } from '@plebbit/plebbit-react-hooks'; import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; -import { isCatalogView } from '../../lib/utils/view-utils'; +import { isAllView, isCatalogView, isSubscriptionsView } from '../../lib/utils/view-utils'; import styles from './board-nav.module.css'; -import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits'; +import useDefaultSubplebbits, { categorizeSubplebbits, useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits'; -interface BoardNavProps { - subplebbitAddresses: string[]; - subplebbitAddress?: string; -} - -const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => { +const BoardNavDesktop = () => { const { t } = useTranslation(); const location = useLocation(); const params = useParams(); const isInCatalogView = isCatalogView(location.pathname, params); + const subplebbits = useDefaultSubplebbits(); + + const { plebbitSubs, interestsSubs, randomSubs, internationalSubs, projectsSubs } = categorizeSubplebbits(subplebbits); + + const renderSubplebbits = (subplebbits: any) => { + return subplebbits.map((sub: any, index: any) => ( + + {index === 0 ? null : ' '} + {sub.address.includes('.') ? sub.address : sub.address.slice(0, 10).concat('...')} + {index !== subplebbits.length - 1 ? ' /' : null} + + )); + }; return (
- [ - {subplebbitAddresses.map((address: string, index: number) => { - return ( - - {index === 0 ? null : ' '} - {address.includes('.') ? address : address.slice(0, 10).concat('...')} - {index !== subplebbitAddresses.length - 1 ? ' /' : null} - - ); - })} - ] + [all / subscriptions] [{renderSubplebbits(plebbitSubs)}] [{renderSubplebbits(projectsSubs)}] [ + {renderSubplebbits(interestsSubs)}] [{renderSubplebbits(randomSubs)}] [{renderSubplebbits(internationalSubs)}] [{t('settings')}] [{t('home')} @@ -39,17 +38,23 @@ const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => { ); }; -const BoardNavMobile = ({ subplebbitAddresses, subplebbitAddress }: BoardNavProps) => { +const BoardNavMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => { const { t } = useTranslation(); const navigate = useNavigate(); + const subplebbitAddresses = useDefaultSubplebbitAddresses(); const displaySubplebbitAddress = subplebbitAddress && subplebbitAddress.length > 30 ? subplebbitAddress.slice(0, 30).concat('...') : subplebbitAddress; const currentSubplebbitIsInList = subplebbitAddresses.some((address: string) => address === subplebbitAddress); - const isInCatalogView = isCatalogView(useLocation().pathname, useParams()); + const location = useLocation(); + const params = useParams(); + const isInAllView = isAllView(location.pathname); + const isInCatalogView = isCatalogView(location.pathname, params); + const isInSubscriptionsView = isSubscriptionsView(location.pathname); + const selectValue = isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : subplebbitAddress; const boardSelect = ( - navigate(`/p/${e.target.value}${isInCatalogView ? '/catalog' : ''}`)}> {!currentSubplebbitIsInList && subplebbitAddress && } @@ -97,7 +102,7 @@ if (!window.STICKY_MENU_SCROLL_LISTENER) { const previousScrollInRange = currentScrollInRange; currentScrollInRange += scrollDifference; if (currentScrollInRange > scrollRange) { - currentScrollInRange = scrollRange; + currentScrollInRange = 0; } else if (currentScrollInRange < 0) { currentScrollInRange = 0; } @@ -125,16 +130,14 @@ if (!window.STICKY_MENU_SCROLL_LISTENER) { } const BoardNav = () => { - const subplebbitAddresses = useDefaultSubplebbitAddresses(); - const params = useParams(); const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; return ( <> - - + + ); }; diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index 85197f08..37406548 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -150,8 +150,6 @@ const PostFormTable = ({ closeForm }: { closeForm: () => void }) => { } }, [replyIndex, resetContent]); - console.log(publishCommentOptions.subplebbitAddress); - return ( diff --git a/src/hooks/use-default-subplebbits.ts b/src/hooks/use-default-subplebbits.ts index 1b57be96..8407f4fa 100644 --- a/src/hooks/use-default-subplebbits.ts +++ b/src/hooks/use-default-subplebbits.ts @@ -41,9 +41,32 @@ const useDefaultSubplebbits = () => { return cacheSubplebbits || subplebbits; }; +export const categorizeSubplebbits = (subplebbits: MultisubSubplebbit[]) => { + const plebbitSubs = subplebbits.filter((sub) => sub.tags?.includes('plebbit')); + const interestsSubs = subplebbits.filter( + (sub) => sub.tags?.includes('topic') && !sub.tags?.includes('plebbit') && !sub.tags?.includes('country') && !sub.tags?.includes('international'), + ); + const randomSubs = subplebbits.filter((sub) => sub.tags?.includes('random') && !sub.tags?.includes('plebbit')); + const internationalSubs = subplebbits.filter((sub) => sub.tags?.includes('international') || sub.tags?.includes('country')); + const projectsSubs = subplebbits.filter((sub) => sub.tags?.includes('project') && !sub.tags?.includes('plebbit') && !sub.tags?.includes('topic')); + + return { plebbitSubs, interestsSubs, randomSubs, internationalSubs, projectsSubs }; +}; + export const useDefaultSubplebbitAddresses = () => { const defaultSubplebbits = useDefaultSubplebbits(); - return useMemo(() => defaultSubplebbits.map((subplebbit: MultisubSubplebbit) => subplebbit.address), [defaultSubplebbits]); + const categorizedSubplebbits = useMemo(() => categorizeSubplebbits(defaultSubplebbits), [defaultSubplebbits]); + return useMemo( + () => + [ + ...categorizedSubplebbits.plebbitSubs, + ...categorizedSubplebbits.projectsSubs, + ...categorizedSubplebbits.interestsSubs, + ...categorizedSubplebbits.randomSubs, + ...categorizedSubplebbits.internationalSubs, + ].map((subplebbit) => subplebbit.address), + [categorizedSubplebbits], + ); }; export const useMultisubMetadata = () => { diff --git a/src/views/home/home.module.css b/src/views/home/home.module.css index 2c49ea45..d4a26aaf 100644 --- a/src/views/home/home.module.css +++ b/src/views/home/home.module.css @@ -159,8 +159,8 @@ .boardsBoxContent .column { float: left; - width: 163px; - margin-right: 20px; + width: 168px; + margin-right: 15px; overflow: hidden; } diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx index 1b7ed1b4..92fdadd1 100644 --- a/src/views/home/home.tsx +++ b/src/views/home/home.tsx @@ -4,7 +4,7 @@ import { Link, useNavigate } from 'react-router-dom'; import { Trans, useTranslation } from 'react-i18next'; import { Comment, Subplebbit, useAccount, useAccountSubplebbits, useSubplebbits } from '@plebbit/plebbit-react-hooks'; import packageJson from '../../../package.json'; -import useDefaultSubplebbits, { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits'; +import useDefaultSubplebbits, { useMultisubMetadata, useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits'; import usePopularPosts from '../../hooks/use-popular-posts'; import useSubplebbitsStats from '../../hooks/use-subplebbits-stats'; import { getCommentMediaInfo } from '../../lib/utils/media-utils'; @@ -106,6 +106,7 @@ const Boards = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits const isOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60; return isOffline; }; + const multisubMetadata = useMultisubMetadata(); return (
@@ -118,7 +119,7 @@ const Boards = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits

Multiboards

- All + {multisubMetadata?.title || 'All'}
Subscriptions