mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
refactor home component
This commit is contained in:
Tom (plebeius.eth)
@@ -29,7 +29,7 @@ const usePopularPosts = (subplebbits: Subplebbit[]) => {
|
||||
|
||||
if (
|
||||
isMediaShowed &&
|
||||
(replyCount > 0 || postsPerSub > 1) &&
|
||||
replyCount > 0 &&
|
||||
!deleted &&
|
||||
!removed &&
|
||||
!locked &&
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { create } from 'zustand';
|
||||
|
||||
interface HomeFiltersStore {
|
||||
showNsfwBoardsOnly: boolean;
|
||||
setShowNsfwBoardsOnly: (value: boolean) => void;
|
||||
showWorksafeBoardsOnly: boolean;
|
||||
setShowWorksafeBoardsOnly: (value: boolean) => void;
|
||||
useCatalog: boolean;
|
||||
setUseCatalog: (value: boolean) => void;
|
||||
showWorksafeContentOnly: boolean;
|
||||
setShowWorksafeContentOnly: (value: boolean) => void;
|
||||
showNsfwContentOnly: boolean;
|
||||
setShowNsfwContentOnly: (value: boolean) => void;
|
||||
}
|
||||
|
||||
const useHomeFiltersStore = create<HomeFiltersStore>((set) => ({
|
||||
showNsfwBoardsOnly: localStorage.getItem('showNsfwBoardsOnly') === 'true' ? true : false,
|
||||
setShowNsfwBoardsOnly: (value: boolean) => {
|
||||
set({ showNsfwBoardsOnly: value });
|
||||
localStorage.setItem('showNsfwBoardsOnly', value.toString());
|
||||
},
|
||||
showWorksafeBoardsOnly: localStorage.getItem('showWorksafeBoardsOnly') === 'true' ? true : false,
|
||||
setShowWorksafeBoardsOnly: (value: boolean) => {
|
||||
set({ showWorksafeBoardsOnly: value });
|
||||
localStorage.setItem('showWorksafeBoardsOnly', value.toString());
|
||||
},
|
||||
useCatalog: localStorage.getItem('useCatalog') === 'true' ? true : false,
|
||||
setUseCatalog: (value: boolean) => {
|
||||
set({ useCatalog: value });
|
||||
localStorage.setItem('useCatalog', value.toString());
|
||||
},
|
||||
showWorksafeContentOnly: localStorage.getItem('showWorksafeContentOnly') === 'true' ? true : false,
|
||||
setShowWorksafeContentOnly: (value: boolean) => {
|
||||
set({ showWorksafeContentOnly: value });
|
||||
localStorage.setItem('showWorksafeContentOnly', value.toString());
|
||||
},
|
||||
showNsfwContentOnly: localStorage.getItem('showNsfwContentOnly') === 'true' ? true : false,
|
||||
setShowNsfwContentOnly: (value: boolean) => {
|
||||
set({ showNsfwContentOnly: value });
|
||||
localStorage.setItem('showNsfwContentOnly', value.toString());
|
||||
},
|
||||
}));
|
||||
|
||||
export default useHomeFiltersStore;
|
||||
@@ -0,0 +1,296 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Subplebbit, useAccount, useAccountSubplebbits } from '@plebbit/plebbit-react-hooks';
|
||||
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
|
||||
import useHomeFiltersStore from '../../../stores/use-home-filters';
|
||||
import { useMultisubMetadata } from '../../../hooks/use-default-subplebbits';
|
||||
import styles from '../home.module.css';
|
||||
import { nsfwTags } from '../home';
|
||||
|
||||
const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
|
||||
const { t } = useTranslation();
|
||||
const [showFilterModal, setShowFilterModal] = useState(false);
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const {
|
||||
showNsfwBoardsOnly,
|
||||
setShowNsfwBoardsOnly,
|
||||
showWorksafeBoardsOnly,
|
||||
setShowWorksafeBoardsOnly,
|
||||
useCatalog,
|
||||
setUseCatalog,
|
||||
showWorksafeContentOnly,
|
||||
setShowWorksafeContentOnly,
|
||||
showNsfwContentOnly,
|
||||
setShowNsfwContentOnly,
|
||||
} = useHomeFiltersStore();
|
||||
|
||||
const handleClickOutside = useCallback(
|
||||
(event: MouseEvent) => {
|
||||
if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
|
||||
setShowFilterModal(false);
|
||||
}
|
||||
},
|
||||
[modalRef, setShowFilterModal],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, [handleClickOutside]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<span ref={modalRef} onClick={() => setShowFilterModal(true)}>
|
||||
{isBoardsBoxModal ? t('filter') : t('options')} ▼
|
||||
</span>
|
||||
{showFilterModal && (
|
||||
<div ref={modalRef} className={styles.filterModal}>
|
||||
{isBoardsBoxModal ? (
|
||||
<>
|
||||
<div
|
||||
className={`${styles.option} ${!showNsfwBoardsOnly && !showWorksafeBoardsOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
setShowNsfwBoardsOnly(false);
|
||||
setShowWorksafeBoardsOnly(false);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show All Boards
|
||||
</div>
|
||||
<div
|
||||
className={`${styles.option} ${showNsfwBoardsOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
if (showWorksafeBoardsOnly) {
|
||||
setShowWorksafeBoardsOnly(false);
|
||||
}
|
||||
setShowNsfwBoardsOnly(!showNsfwBoardsOnly);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show NSFW Boards Only
|
||||
</div>
|
||||
<div
|
||||
className={`${styles.option} ${showWorksafeBoardsOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
if (showNsfwBoardsOnly) {
|
||||
setShowNsfwBoardsOnly(false);
|
||||
}
|
||||
setShowWorksafeBoardsOnly(!showWorksafeBoardsOnly);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show Worksafe Boards Only
|
||||
</div>
|
||||
<div className={styles.separator} />
|
||||
<div
|
||||
className={`${styles.option} ${useCatalog && styles.selected}`}
|
||||
onClick={() => {
|
||||
setUseCatalog(!useCatalog);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Use Catalog
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className={`${styles.option} ${showWorksafeContentOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
if (showNsfwContentOnly) {
|
||||
setShowNsfwContentOnly(false);
|
||||
}
|
||||
setShowWorksafeContentOnly(!showWorksafeContentOnly);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show Worksafe Content Only
|
||||
</div>
|
||||
<div
|
||||
className={`${styles.option} ${showNsfwContentOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
if (showWorksafeContentOnly) {
|
||||
setShowWorksafeContentOnly(false);
|
||||
}
|
||||
setShowNsfwContentOnly(!showNsfwContentOnly);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show NSFW Content Only
|
||||
</div>
|
||||
<div
|
||||
className={`${styles.option} ${!showWorksafeContentOnly && !showNsfwContentOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
setShowWorksafeContentOnly(false);
|
||||
setShowNsfwContentOnly(false);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show All Content
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const Board = ({ isOffline, subplebbit }: { isOffline: boolean; subplebbit: Subplebbit }) => {
|
||||
const { t } = useTranslation();
|
||||
const { address, title, tags } = subplebbit || {};
|
||||
const nsfwTag = tags.find((tag: string) => nsfwTags.includes(tag));
|
||||
const { useCatalog } = useHomeFiltersStore();
|
||||
|
||||
const boardLink = useCatalog ? `/p/${address}/catalog` : `/p/${address}`;
|
||||
|
||||
return (
|
||||
<div className={styles.subplebbit} key={address}>
|
||||
{isOffline && <span className={styles.offlineIcon} />}
|
||||
<Link to={boardLink}>{title || address}</Link>
|
||||
{nsfwTag && <span className={styles.nsfw}> ({t(nsfwTag)})</span>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const BoardsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits: any }) => {
|
||||
const { t } = useTranslation();
|
||||
const account = useAccount();
|
||||
const subscriptions = account?.subscriptions || [];
|
||||
const { accountSubplebbits } = useAccountSubplebbits();
|
||||
const accountSubplebbitAddresses = Object.keys(accountSubplebbits);
|
||||
const { showNsfwBoardsOnly, showWorksafeBoardsOnly } = useHomeFiltersStore();
|
||||
|
||||
const filterSubs = (subs: Subplebbit[], includeTags: string[], excludeTags: string[] = []) =>
|
||||
subs.filter((sub) => includeTags.every((tag) => sub.tags?.includes(tag)) && excludeTags.every((tag) => !sub.tags?.includes(tag)));
|
||||
|
||||
let plebbitSubs = filterSubs(multisub, ['plebbit']);
|
||||
let interestsSubs = filterSubs(multisub, ['topic'], ['plebbit', 'country', 'international']);
|
||||
let randomSubs = filterSubs(multisub, ['random'], ['plebbit']);
|
||||
let internationalSubs = filterSubs(multisub, ['international']);
|
||||
let projectsSubs = filterSubs(multisub, ['project'], ['plebbit', 'topic']);
|
||||
|
||||
const filterByNsfw = (subs: Subplebbit[], includeNsfw: boolean) => subs.filter((sub) => sub.tags.some((tag: string) => nsfwTags.includes(tag)) === includeNsfw);
|
||||
|
||||
const filterCategoriesByNsfw = (subsArray: Subplebbit[][], includeNsfw: boolean) => subsArray.map((subs) => filterByNsfw(subs, includeNsfw));
|
||||
|
||||
const includeNsfw = showNsfwBoardsOnly ? true : showWorksafeBoardsOnly ? false : null;
|
||||
|
||||
if (includeNsfw !== null) {
|
||||
[plebbitSubs, interestsSubs, randomSubs, internationalSubs, projectsSubs] = filterCategoriesByNsfw(
|
||||
[plebbitSubs, interestsSubs, randomSubs, internationalSubs, projectsSubs],
|
||||
includeNsfw,
|
||||
);
|
||||
}
|
||||
|
||||
const isSubOffline = (address: string) => {
|
||||
const subplebbit = subplebbits && subplebbits.find((sub: Subplebbit) => sub?.address === address);
|
||||
const isOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60;
|
||||
return isOffline;
|
||||
};
|
||||
const multisubMetadata = useMultisubMetadata();
|
||||
|
||||
return (
|
||||
<div className={`${styles.box} ${styles.boardsBox}`}>
|
||||
<div className={styles.boxBar}>
|
||||
<h2 className={styles.capitalize}>{t('boards')}</h2>
|
||||
<BoxModal isBoardsBoxModal={true} />
|
||||
</div>
|
||||
<div className={styles.boardsBoxContent}>
|
||||
<div className={styles.column}>
|
||||
<h3>Multiboards</h3>
|
||||
<div className={styles.list}>
|
||||
<div className={styles.subplebbit}>
|
||||
<Link to='/p/all'>{multisubMetadata?.title || 'All'}</Link>
|
||||
</div>
|
||||
<div className={styles.subplebbit}>
|
||||
<Link to='/p/subscriptions'>Subscriptions</Link>
|
||||
</div>
|
||||
</div>
|
||||
{plebbitSubs.length > 0 && (
|
||||
<>
|
||||
<h3>Plebbit</h3>
|
||||
<div className={styles.list}>
|
||||
{plebbitSubs.map((sub) => (
|
||||
<Board key={sub.address} subplebbit={sub} isOffline={sub.address && isSubOffline(sub.address)} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{projectsSubs.length > 0 && (
|
||||
<>
|
||||
<h3>{t('projects')}</h3>
|
||||
<div className={styles.list}>
|
||||
{projectsSubs.map((sub) => (
|
||||
<Board key={sub.address} subplebbit={sub} isOffline={sub.address && isSubOffline(sub.address)} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.column}>
|
||||
{interestsSubs.length > 0 && (
|
||||
<>
|
||||
<h3>{t('interests')}</h3>
|
||||
<div className={styles.list}>
|
||||
{interestsSubs.map((sub) => (
|
||||
<Board key={sub.address} subplebbit={sub} isOffline={sub.address && isSubOffline(sub.address)} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.column}>
|
||||
{randomSubs.length > 0 && (
|
||||
<>
|
||||
<h3>{t('random')}</h3>
|
||||
<div className={styles.list}>
|
||||
{randomSubs.map((sub) => (
|
||||
<Board key={sub.address} subplebbit={sub} isOffline={sub.address && isSubOffline(sub.address)} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{internationalSubs.length > 0 && (
|
||||
<>
|
||||
<h3>{t('international')}</h3>
|
||||
<div className={styles.list}>
|
||||
{internationalSubs.map((sub) => (
|
||||
<Board key={sub.address} subplebbit={sub} isOffline={sub.address && isSubOffline(sub.address)} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.column}>
|
||||
<div className={styles.list}>
|
||||
<h3>{t('subscriptions')}</h3>
|
||||
{subscriptions.length > 0
|
||||
? subscriptions.map((address: string, index: number) => (
|
||||
<div className={styles.subplebbit} key={index}>
|
||||
<Link to={`/p/${address}`}>p/{address && Plebbit.getShortAddress(address)}</Link>
|
||||
</div>
|
||||
))
|
||||
: t('not_subscribed')}
|
||||
</div>
|
||||
<div className={styles.list}>
|
||||
<h3>{t('moderating')}</h3>
|
||||
{accountSubplebbitAddresses.length > 0
|
||||
? accountSubplebbitAddresses.map((address: string, index: number) => (
|
||||
<div className={styles.subplebbit} key={index}>
|
||||
<Link to={`/p/${address}`}>p/{address && Plebbit.getShortAddress(address)}</Link>
|
||||
</div>
|
||||
))
|
||||
: t('not_moderating')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BoardsBox;
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from './boards-box';
|
||||
@@ -0,0 +1,138 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import useHomeFiltersStore from '../../../stores/use-home-filters';
|
||||
import styles from '../home.module.css';
|
||||
|
||||
const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
|
||||
const { t } = useTranslation();
|
||||
const [showFilterModal, setShowFilterModal] = useState(false);
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const {
|
||||
showNsfwBoardsOnly,
|
||||
setShowNsfwBoardsOnly,
|
||||
showWorksafeBoardsOnly,
|
||||
setShowWorksafeBoardsOnly,
|
||||
useCatalog,
|
||||
setUseCatalog,
|
||||
showWorksafeContentOnly,
|
||||
setShowWorksafeContentOnly,
|
||||
showNsfwContentOnly,
|
||||
setShowNsfwContentOnly,
|
||||
} = useHomeFiltersStore();
|
||||
|
||||
const handleClickOutside = useCallback(
|
||||
(event: MouseEvent) => {
|
||||
if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
|
||||
setShowFilterModal(false);
|
||||
}
|
||||
},
|
||||
[modalRef, setShowFilterModal],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, [handleClickOutside]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<span ref={modalRef} onClick={() => setShowFilterModal(true)}>
|
||||
{isBoardsBoxModal ? t('filter') : t('options')} ▼
|
||||
</span>
|
||||
{showFilterModal && (
|
||||
<div ref={modalRef} className={styles.filterModal}>
|
||||
{isBoardsBoxModal ? (
|
||||
<>
|
||||
<div
|
||||
className={`${styles.option} ${!showNsfwBoardsOnly && !showWorksafeBoardsOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
setShowNsfwBoardsOnly(false);
|
||||
setShowWorksafeBoardsOnly(false);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show All Boards
|
||||
</div>
|
||||
<div
|
||||
className={`${styles.option} ${showNsfwBoardsOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
if (showWorksafeBoardsOnly) {
|
||||
setShowWorksafeBoardsOnly(false);
|
||||
}
|
||||
setShowNsfwBoardsOnly(!showNsfwBoardsOnly);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show NSFW Boards Only
|
||||
</div>
|
||||
<div
|
||||
className={`${styles.option} ${showWorksafeBoardsOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
if (showNsfwBoardsOnly) {
|
||||
setShowNsfwBoardsOnly(false);
|
||||
}
|
||||
setShowWorksafeBoardsOnly(!showWorksafeBoardsOnly);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show Worksafe Boards Only
|
||||
</div>
|
||||
<div className={styles.separator} />
|
||||
<div
|
||||
className={`${styles.option} ${useCatalog && styles.selected}`}
|
||||
onClick={() => {
|
||||
setUseCatalog(!useCatalog);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Use Catalog
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className={`${styles.option} ${showWorksafeContentOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
if (showNsfwContentOnly) {
|
||||
setShowNsfwContentOnly(false);
|
||||
}
|
||||
setShowWorksafeContentOnly(!showWorksafeContentOnly);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show Worksafe Content Only
|
||||
</div>
|
||||
<div
|
||||
className={`${styles.option} ${showNsfwContentOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
if (showWorksafeContentOnly) {
|
||||
setShowWorksafeContentOnly(false);
|
||||
}
|
||||
setShowNsfwContentOnly(!showNsfwContentOnly);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show NSFW Content Only
|
||||
</div>
|
||||
<div
|
||||
className={`${styles.option} ${!showWorksafeContentOnly && !showNsfwContentOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
setShowWorksafeContentOnly(false);
|
||||
setShowNsfwContentOnly(false);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show All Content
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BoxModal;
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from './box-modal';
|
||||
+9
-406
@@ -1,58 +1,17 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useEffect, useMemo, useRef } from 'react';
|
||||
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 Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
|
||||
import { create } from 'zustand';
|
||||
import { useSubplebbits } from '@plebbit/plebbit-react-hooks';
|
||||
import styles from './home.module.css';
|
||||
import packageJson from '../../../package.json';
|
||||
import useDefaultSubplebbits, { useMultisubMetadata, useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
|
||||
import usePopularPosts from '../../hooks/use-popular-posts';
|
||||
import useDefaultSubplebbits, { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
|
||||
import useSubplebbitsStats from '../../hooks/use-subplebbits-stats';
|
||||
import { getCommentMediaInfo } from '../../lib/utils/media-utils';
|
||||
import { CatalogPostMedia } from '../../components/catalog-row';
|
||||
import LoadingEllipsis from '../../components/loading-ellipsis';
|
||||
import PopularThreadsBox from './popular-threads-box';
|
||||
import BoardsBox from './boards-box';
|
||||
|
||||
interface BoxModalStore {
|
||||
showNsfwBoardsOnly: boolean;
|
||||
setShowNsfwBoardsOnly: (value: boolean) => void;
|
||||
showWorksafeBoardsOnly: boolean;
|
||||
setShowWorksafeBoardsOnly: (value: boolean) => void;
|
||||
useCatalog: boolean;
|
||||
setUseCatalog: (value: boolean) => void;
|
||||
showWorksafeContentOnly: boolean;
|
||||
setShowWorksafeContentOnly: (value: boolean) => void;
|
||||
showNsfwContentOnly: boolean;
|
||||
setShowNsfwContentOnly: (value: boolean) => void;
|
||||
}
|
||||
|
||||
const useBoxModalStore = create<BoxModalStore>((set) => ({
|
||||
showNsfwBoardsOnly: localStorage.getItem('showNsfwBoardsOnly') === 'true' ? true : false,
|
||||
setShowNsfwBoardsOnly: (value: boolean) => {
|
||||
set({ showNsfwBoardsOnly: value });
|
||||
localStorage.setItem('showNsfwBoardsOnly', value.toString());
|
||||
},
|
||||
showWorksafeBoardsOnly: localStorage.getItem('showWorksafeBoardsOnly') === 'true' ? true : false,
|
||||
setShowWorksafeBoardsOnly: (value: boolean) => {
|
||||
set({ showWorksafeBoardsOnly: value });
|
||||
localStorage.setItem('showWorksafeBoardsOnly', value.toString());
|
||||
},
|
||||
useCatalog: localStorage.getItem('useCatalog') === 'true' ? true : false,
|
||||
setUseCatalog: (value: boolean) => {
|
||||
set({ useCatalog: value });
|
||||
localStorage.setItem('useCatalog', value.toString());
|
||||
},
|
||||
showWorksafeContentOnly: localStorage.getItem('showWorksafeContentOnly') === 'true' ? true : false,
|
||||
setShowWorksafeContentOnly: (value: boolean) => {
|
||||
set({ showWorksafeContentOnly: value });
|
||||
localStorage.setItem('showWorksafeContentOnly', value.toString());
|
||||
},
|
||||
showNsfwContentOnly: localStorage.getItem('showNsfwContentOnly') === 'true' ? true : false,
|
||||
setShowNsfwContentOnly: (value: boolean) => {
|
||||
set({ showNsfwContentOnly: value });
|
||||
localStorage.setItem('showNsfwContentOnly', value.toString());
|
||||
},
|
||||
}));
|
||||
// https://github.com/plebbit/temporary-default-subplebbits/blob/master/README.md
|
||||
export const nsfwTags = ['adult', 'anti', 'gore'];
|
||||
|
||||
const SearchBar = () => {
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
@@ -101,362 +60,6 @@ const InfoBox = () => {
|
||||
);
|
||||
};
|
||||
|
||||
// https://github.com/plebbit/temporary-default-subplebbits/blob/master/README.md
|
||||
const nsfwTags = ['adult', 'anti', 'gore'];
|
||||
|
||||
const Board = ({ isOffline, subplebbit }: { isOffline: boolean; subplebbit: Subplebbit }) => {
|
||||
const { t } = useTranslation();
|
||||
const { address, title, tags } = subplebbit || {};
|
||||
const nsfwTag = tags.find((tag: string) => nsfwTags.includes(tag));
|
||||
const { useCatalog } = useBoxModalStore();
|
||||
|
||||
const boardLink = useCatalog ? `/p/${address}/catalog` : `/p/${address}`;
|
||||
|
||||
return (
|
||||
<div className={styles.subplebbit} key={address}>
|
||||
{isOffline && <span className={styles.offlineIcon} />}
|
||||
<Link to={boardLink}>{title || address}</Link>
|
||||
{nsfwTag && <span className={styles.nsfw}> ({t(nsfwTag)})</span>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const BoxModal = ({ isBoardsBoxModal }: { isBoardsBoxModal: boolean }) => {
|
||||
const { t } = useTranslation();
|
||||
const [showFilterModal, setShowFilterModal] = useState(false);
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const {
|
||||
showNsfwBoardsOnly,
|
||||
setShowNsfwBoardsOnly,
|
||||
showWorksafeBoardsOnly,
|
||||
setShowWorksafeBoardsOnly,
|
||||
useCatalog,
|
||||
setUseCatalog,
|
||||
showWorksafeContentOnly,
|
||||
setShowWorksafeContentOnly,
|
||||
showNsfwContentOnly,
|
||||
setShowNsfwContentOnly,
|
||||
} = useBoxModalStore();
|
||||
|
||||
const handleClickOutside = useCallback(
|
||||
(event: MouseEvent) => {
|
||||
if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
|
||||
setShowFilterModal(false);
|
||||
}
|
||||
},
|
||||
[modalRef, setShowFilterModal],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, [handleClickOutside]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<span ref={modalRef} onClick={() => setShowFilterModal(true)}>
|
||||
{isBoardsBoxModal ? t('filter') : t('options')} ▼
|
||||
</span>
|
||||
{showFilterModal && (
|
||||
<div ref={modalRef} className={styles.filterModal}>
|
||||
{isBoardsBoxModal ? (
|
||||
<>
|
||||
<div
|
||||
className={`${styles.option} ${!showNsfwBoardsOnly && !showWorksafeBoardsOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
setShowNsfwBoardsOnly(false);
|
||||
setShowWorksafeBoardsOnly(false);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show All Boards
|
||||
</div>
|
||||
<div
|
||||
className={`${styles.option} ${showNsfwBoardsOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
if (showWorksafeBoardsOnly) {
|
||||
setShowWorksafeBoardsOnly(false);
|
||||
}
|
||||
setShowNsfwBoardsOnly(!showNsfwBoardsOnly);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show NSFW Boards Only
|
||||
</div>
|
||||
<div
|
||||
className={`${styles.option} ${showWorksafeBoardsOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
if (showNsfwBoardsOnly) {
|
||||
setShowNsfwBoardsOnly(false);
|
||||
}
|
||||
setShowWorksafeBoardsOnly(!showWorksafeBoardsOnly);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show Worksafe Boards Only
|
||||
</div>
|
||||
<div className={styles.separator} />
|
||||
<div
|
||||
className={`${styles.option} ${useCatalog && styles.selected}`}
|
||||
onClick={() => {
|
||||
setUseCatalog(!useCatalog);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Use Catalog
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className={`${styles.option} ${showWorksafeContentOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
if (showNsfwContentOnly) {
|
||||
setShowNsfwContentOnly(false);
|
||||
}
|
||||
setShowWorksafeContentOnly(!showWorksafeContentOnly);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show Worksafe Content Only
|
||||
</div>
|
||||
<div
|
||||
className={`${styles.option} ${showNsfwContentOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
if (showWorksafeContentOnly) {
|
||||
setShowWorksafeContentOnly(false);
|
||||
}
|
||||
setShowNsfwContentOnly(!showNsfwContentOnly);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show NSFW Content Only
|
||||
</div>
|
||||
<div
|
||||
className={`${styles.option} ${!showWorksafeContentOnly && !showNsfwContentOnly && styles.selected}`}
|
||||
onClick={() => {
|
||||
setShowWorksafeContentOnly(false);
|
||||
setShowNsfwContentOnly(false);
|
||||
setShowFilterModal(false);
|
||||
}}
|
||||
>
|
||||
Show All Content
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const Boards = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits: any }) => {
|
||||
const { t } = useTranslation();
|
||||
const account = useAccount();
|
||||
const subscriptions = account?.subscriptions || [];
|
||||
const { accountSubplebbits } = useAccountSubplebbits();
|
||||
const accountSubplebbitAddresses = Object.keys(accountSubplebbits);
|
||||
const { showNsfwBoardsOnly, showWorksafeBoardsOnly } = useBoxModalStore();
|
||||
|
||||
const filterSubs = (subs: Subplebbit[], includeTags: string[], excludeTags: string[] = []) =>
|
||||
subs.filter((sub) => includeTags.every((tag) => sub.tags?.includes(tag)) && excludeTags.every((tag) => !sub.tags?.includes(tag)));
|
||||
|
||||
let plebbitSubs = filterSubs(multisub, ['plebbit']);
|
||||
let interestsSubs = filterSubs(multisub, ['topic'], ['plebbit', 'country', 'international']);
|
||||
let randomSubs = filterSubs(multisub, ['random'], ['plebbit']);
|
||||
let internationalSubs = filterSubs(multisub, ['international']);
|
||||
let projectsSubs = filterSubs(multisub, ['project'], ['plebbit', 'topic']);
|
||||
|
||||
const filterByNsfw = (subs: Subplebbit[], includeNsfw: boolean) => subs.filter((sub) => sub.tags.some((tag: string) => nsfwTags.includes(tag)) === includeNsfw);
|
||||
|
||||
const filterCategoriesByNsfw = (subsArray: Subplebbit[][], includeNsfw: boolean) => subsArray.map((subs) => filterByNsfw(subs, includeNsfw));
|
||||
|
||||
const includeNsfw = showNsfwBoardsOnly ? true : showWorksafeBoardsOnly ? false : null;
|
||||
|
||||
if (includeNsfw !== null) {
|
||||
[plebbitSubs, interestsSubs, randomSubs, internationalSubs, projectsSubs] = filterCategoriesByNsfw(
|
||||
[plebbitSubs, interestsSubs, randomSubs, internationalSubs, projectsSubs],
|
||||
includeNsfw,
|
||||
);
|
||||
}
|
||||
|
||||
const isSubOffline = (address: string) => {
|
||||
const subplebbit = subplebbits && subplebbits.find((sub: Subplebbit) => sub?.address === address);
|
||||
const isOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60;
|
||||
return isOffline;
|
||||
};
|
||||
const multisubMetadata = useMultisubMetadata();
|
||||
|
||||
return (
|
||||
<div className={`${styles.box} ${styles.boardsBox}`}>
|
||||
<div className={styles.boxBar}>
|
||||
<h2 className={styles.capitalize}>{t('boards')}</h2>
|
||||
<BoxModal isBoardsBoxModal={true} />
|
||||
</div>
|
||||
<div className={styles.boardsBoxContent}>
|
||||
<div className={styles.column}>
|
||||
<h3>Multiboards</h3>
|
||||
<div className={styles.list}>
|
||||
<div className={styles.subplebbit}>
|
||||
<Link to='/p/all'>{multisubMetadata?.title || 'All'}</Link>
|
||||
</div>
|
||||
<div className={styles.subplebbit}>
|
||||
<Link to='/p/subscriptions'>Subscriptions</Link>
|
||||
</div>
|
||||
</div>
|
||||
{plebbitSubs.length > 0 && (
|
||||
<>
|
||||
<h3>Plebbit</h3>
|
||||
<div className={styles.list}>
|
||||
{plebbitSubs.map((sub) => (
|
||||
<Board key={sub.address} subplebbit={sub} isOffline={sub.address && isSubOffline(sub.address)} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{projectsSubs.length > 0 && (
|
||||
<>
|
||||
<h3>{t('projects')}</h3>
|
||||
<div className={styles.list}>
|
||||
{projectsSubs.map((sub) => (
|
||||
<Board key={sub.address} subplebbit={sub} isOffline={sub.address && isSubOffline(sub.address)} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.column}>
|
||||
{interestsSubs.length > 0 && (
|
||||
<>
|
||||
<h3>{t('interests')}</h3>
|
||||
<div className={styles.list}>
|
||||
{interestsSubs.map((sub) => (
|
||||
<Board key={sub.address} subplebbit={sub} isOffline={sub.address && isSubOffline(sub.address)} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.column}>
|
||||
{randomSubs.length > 0 && (
|
||||
<>
|
||||
<h3>{t('random')}</h3>
|
||||
<div className={styles.list}>
|
||||
{randomSubs.map((sub) => (
|
||||
<Board key={sub.address} subplebbit={sub} isOffline={sub.address && isSubOffline(sub.address)} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{internationalSubs.length > 0 && (
|
||||
<>
|
||||
<h3>{t('international')}</h3>
|
||||
<div className={styles.list}>
|
||||
{internationalSubs.map((sub) => (
|
||||
<Board key={sub.address} subplebbit={sub} isOffline={sub.address && isSubOffline(sub.address)} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.column}>
|
||||
<div className={styles.list}>
|
||||
<h3>{t('subscriptions')}</h3>
|
||||
{subscriptions.length > 0
|
||||
? subscriptions.map((address: string, index: number) => (
|
||||
<div className={styles.subplebbit} key={index}>
|
||||
<Link to={`/p/${address}`}>p/{address && Plebbit.getShortAddress(address)}</Link>
|
||||
</div>
|
||||
))
|
||||
: t('not_subscribed')}
|
||||
</div>
|
||||
<div className={styles.list}>
|
||||
<h3>{t('moderating')}</h3>
|
||||
{accountSubplebbitAddresses.length > 0
|
||||
? accountSubplebbitAddresses.map((address: string, index: number) => (
|
||||
<div className={styles.subplebbit} key={index}>
|
||||
<Link to={`/p/${address}`}>p/{address && Plebbit.getShortAddress(address)}</Link>
|
||||
</div>
|
||||
))
|
||||
: t('not_moderating')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface PopularThreadProps {
|
||||
post: Comment;
|
||||
boardTitle: string | undefined;
|
||||
boardShortAddress: string;
|
||||
}
|
||||
|
||||
const PopularThreadCard = ({ post, boardTitle, boardShortAddress }: PopularThreadProps) => {
|
||||
const { cid, content, subplebbitAddress, title } = post || {};
|
||||
const commentMediaInfo = getCommentMediaInfo(post);
|
||||
|
||||
return (
|
||||
<div className={styles.popularThread} key={cid}>
|
||||
<div className={styles.title}>{boardTitle || boardShortAddress}</div>
|
||||
<div className={styles.mediaContainer}>
|
||||
<Link to={`/p/${subplebbitAddress}/c/${cid}`}>
|
||||
<CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={true} />
|
||||
</Link>
|
||||
</div>
|
||||
<div className={styles.threadContent}>
|
||||
{title && <b>{title}</b>}
|
||||
{content && (content.length > 99 ? `: ${content.substring(0, 99)}...` : `: ${content}`)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const PopularThreads = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits: any }) => {
|
||||
const { t } = useTranslation();
|
||||
const { showWorksafeContentOnly, showNsfwContentOnly } = useBoxModalStore();
|
||||
|
||||
const getFilteredSubplebbits = () => {
|
||||
if (showWorksafeContentOnly) {
|
||||
return subplebbits.filter((sub: Subplebbit) => {
|
||||
const multisubEntry = multisub.find((ms) => ms.address === sub.address);
|
||||
return multisubEntry ? !multisubEntry.tags.some((tag: string) => nsfwTags.includes(tag)) : true;
|
||||
});
|
||||
}
|
||||
if (showNsfwContentOnly) {
|
||||
return subplebbits.filter((sub: Subplebbit) => {
|
||||
const multisubEntry = multisub.find((ms) => ms.address === sub.address);
|
||||
return multisubEntry ? multisubEntry.tags.some((tag: string) => nsfwTags.includes(tag)) : false;
|
||||
});
|
||||
}
|
||||
return subplebbits;
|
||||
};
|
||||
|
||||
const filteredSubplebbits = getFilteredSubplebbits();
|
||||
const popularPosts = usePopularPosts(filteredSubplebbits);
|
||||
|
||||
return (
|
||||
<div className={styles.box}>
|
||||
<div className={`${styles.boxBar} ${styles.color2ColorBar}`}>
|
||||
<h2 className={styles.capitalize}>{t('popular_threads')}</h2>
|
||||
<BoxModal isBoardsBoxModal={false} />
|
||||
</div>
|
||||
<div className={`${styles.boxContent} ${popularPosts.length === 8 ? styles.popularThreads : ''}`}>
|
||||
{popularPosts.length < 8 ? (
|
||||
<LoadingEllipsis string={t('loading')} />
|
||||
) : (
|
||||
popularPosts.map((post: any) => (
|
||||
<PopularThreadCard key={post.cid} post={post} boardTitle={post.subplebbitTitle || post.subplebbitAddress} boardShortAddress={post.subplebbitAddress} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Stats = ({ multisub, subplebbitAddresses }: { multisub: any; subplebbitAddresses: string[] }) => {
|
||||
const { t } = useTranslation();
|
||||
const stats = useSubplebbitsStats({ subplebbitAddresses });
|
||||
@@ -620,8 +223,8 @@ const Home = () => {
|
||||
<HomeLogo />
|
||||
<SearchBar />
|
||||
<InfoBox />
|
||||
<Boards multisub={defaultSubplebbits} subplebbits={subplebbits} />
|
||||
<PopularThreads multisub={defaultSubplebbits} subplebbits={subplebbits} />
|
||||
<BoardsBox multisub={defaultSubplebbits} subplebbits={subplebbits} />
|
||||
<PopularThreadsBox multisub={defaultSubplebbits} subplebbits={subplebbits} />
|
||||
<Stats multisub={defaultSubplebbits} subplebbitAddresses={subplebbitAddresses} />
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from './popular-threads-box';
|
||||
@@ -0,0 +1,82 @@
|
||||
import { useMemo } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Comment, Subplebbit } from '@plebbit/plebbit-react-hooks';
|
||||
import styles from '../home.module.css';
|
||||
import usePopularPosts from '../../../hooks/use-popular-posts';
|
||||
import useHomeFiltersStore from '../../../stores/use-home-filters';
|
||||
import { getCommentMediaInfo } from '../../../lib/utils/media-utils';
|
||||
import { CatalogPostMedia } from '../../../components/catalog-row';
|
||||
import LoadingEllipsis from '../../../components/loading-ellipsis';
|
||||
import BoxModal from '../box-modal';
|
||||
import { nsfwTags } from '../home';
|
||||
|
||||
interface PopularThreadProps {
|
||||
post: Comment;
|
||||
boardTitle: string | undefined;
|
||||
boardShortAddress: string;
|
||||
}
|
||||
|
||||
const PopularThreadCard = ({ post, boardTitle, boardShortAddress }: PopularThreadProps) => {
|
||||
const { cid, content, subplebbitAddress, title } = post || {};
|
||||
const commentMediaInfo = getCommentMediaInfo(post);
|
||||
|
||||
return (
|
||||
<div className={styles.popularThread} key={cid}>
|
||||
<div className={styles.title}>{boardTitle || boardShortAddress}</div>
|
||||
<div className={styles.mediaContainer}>
|
||||
<Link to={`/p/${subplebbitAddress}/c/${cid}`}>
|
||||
<CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={true} />
|
||||
</Link>
|
||||
</div>
|
||||
<div className={styles.threadContent}>
|
||||
{title && <b>{title}</b>}
|
||||
{content && (content.length > 99 ? `: ${content.substring(0, 99)}...` : `: ${content}`)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const PopularThreadsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits: any }) => {
|
||||
const { t } = useTranslation();
|
||||
const { showWorksafeContentOnly, showNsfwContentOnly } = useHomeFiltersStore();
|
||||
|
||||
const getFilteredSubplebbits = () => {
|
||||
if (showWorksafeContentOnly) {
|
||||
return subplebbits.filter((sub: Subplebbit) => {
|
||||
const multisubEntry = multisub.find((ms) => ms?.address === sub?.address);
|
||||
return multisubEntry ? !multisubEntry.tags.some((tag: string) => nsfwTags.includes(tag)) : true;
|
||||
});
|
||||
}
|
||||
if (showNsfwContentOnly) {
|
||||
return subplebbits.filter((sub: Subplebbit) => {
|
||||
const multisubEntry = multisub.find((ms) => ms?.address === sub?.address);
|
||||
return multisubEntry ? multisubEntry.tags.some((tag: string) => nsfwTags.includes(tag)) : false;
|
||||
});
|
||||
}
|
||||
return subplebbits;
|
||||
};
|
||||
|
||||
const filteredSubplebbits = useMemo(getFilteredSubplebbits, [subplebbits, showWorksafeContentOnly, showNsfwContentOnly, multisub]);
|
||||
const popularPosts = usePopularPosts(filteredSubplebbits);
|
||||
|
||||
return (
|
||||
<div className={styles.box}>
|
||||
<div className={`${styles.boxBar} ${styles.color2ColorBar}`}>
|
||||
<h2 className={styles.capitalize}>{t('popular_threads')}</h2>
|
||||
<BoxModal isBoardsBoxModal={false} />
|
||||
</div>
|
||||
<div className={`${styles.boxContent} ${popularPosts.length === 8 ? styles.popularThreads : ''}`}>
|
||||
{popularPosts.length < 8 ? (
|
||||
<LoadingEllipsis string={t('loading')} />
|
||||
) : (
|
||||
popularPosts.map((post: any) => (
|
||||
<PopularThreadCard key={post.cid} post={post} boardTitle={post.subplebbitTitle || post.subplebbitAddress} boardShortAddress={post.subplebbitAddress} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PopularThreadsBox;
|
||||
Reference in New Issue
Block a user