External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(home): derive board link state from directory availability

Browse Source 
Replaced one-off /biz/ and /pol/ checks with a single board-name-to-address resolver built from useDirectories() data. The homepage boards list now consistently colors and links any available directory board without manual hardcoding.
This commit is contained in:
plebeius
2026-02-15 14:32:14 +08:00
parent 8645f7365a
commit e47727c074
1 changed files with 110 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/home/boards-list/boards-list.tsx
+110 -411
View File
@@ -8,10 +8,9 @@ import useBoardsFilterStore from '../../../stores/use-boards-filter-store';
import BoardsFilterModal from './boards-filter-modal'; import BoardsFilterModal from './boards-filter-modal';
import styles from '../home.module.css'; import styles from '../home.module.css';
// Helper function to find board address by matching title pattern const getBoardNameFromDirectoryTitle = (title: string): string => {
const findBoardAddress = (multisub: DirectoryCommunity[], titlePattern: string): string | null => { const match = title.match(/^\/[^/]+\/\s*-\s*(.+)$/);
const entry = multisub.find((ms) => ms.title === titlePattern); return match?.[1]?.trim() || title.trim();
return entry?.address || null;
}; };
const NSFWBadge = () => { const NSFWBadge = () => {
@@ -55,9 +54,37 @@ const BoardsList = ({ multisub }: { multisub: DirectoryCommunity[] }) => {
openDirectoryModal(); openDirectoryModal();
}; };
// Find active boards const boardAddressesByName = multisub.reduce<Record<string, string>>((acc, community) => {
const bizAddress = findBoardAddress(multisub, '/biz/ - Business & Finance'); if (!community.title) return acc;
const polAddress = findBoardAddress(multisub, '/pol/ - Politically Incorrect'); const boardName = getBoardNameFromDirectoryTitle(community.title);
if (!acc[boardName]) {
acc[boardName] = community.address;
}
return acc;
}, {});
const renderBoardLink = (boardName: string) => {
const address = boardAddressesByName[boardName];
if (address) {
return (
<li>
<Link to={getBoardLink(address)} onClick={(e) => handleLinkClick(e, address)}>
{boardName}
</Link>
</li>
);
}
return (
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
{boardName}
</Link>
</li>
);
};
const errorMessage = error?.message; const errorMessage = error?.message;
// Filtering logic: determine which categories to show // Filtering logic: determine which categories to show
@@ -93,62 +120,20 @@ const BoardsList = ({ multisub }: { multisub: DirectoryCommunity[] }) => {
<ul> <ul>
{(showAll || showWorksafeOnly) && ( {(showAll || showWorksafeOnly) && (
<> <>
<li> {renderBoardLink('Anime & Manga')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}> {renderBoardLink('Anime/Cute')}
Anime & Manga {renderBoardLink('Anime/Wallpapers')}
</Link> {renderBoardLink('Mecha')}
</li> {renderBoardLink('Cosplay & EGL')}
<li> {renderBoardLink('Cute/Male')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Anime/Cute
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Anime/Wallpapers
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Mecha
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Cosplay & EGL
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Cute/Male
</Link>
</li>
</> </>
)} )}
{(showAll || showNsfwOnly) && ( {(showAll || showNsfwOnly) && renderBoardLink('Flash')}
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Flash
</Link>
</li>
)}
{(showAll || showWorksafeOnly) && ( {(showAll || showWorksafeOnly) && (
<> <>
<li> {renderBoardLink('Transportation')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}> {renderBoardLink('Otaku Culture')}
Transportation {renderBoardLink('Virtual YouTubers')}
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Otaku Culture
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Virtual YouTubers
</Link>
</li>
</> </>
)} )}
</ul> </ul>
@@ -160,46 +145,14 @@ const BoardsList = ({ multisub }: { multisub: DirectoryCommunity[] }) => {
<> <>
<h3>Video Games</h3> <h3>Video Games</h3>
<ul> <ul>
<li> {renderBoardLink('Video Games')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}> {renderBoardLink('Video Game Generals')}
Video Games {renderBoardLink('Video Games/Multiplayer')}
</Link> {renderBoardLink('Video Games/Mobile')}
</li> {renderBoardLink('Pokémon')}
<li> {renderBoardLink('Retro Games')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}> {renderBoardLink('Video Games/RPG')}
Video Game Generals {renderBoardLink('Video Games/Strategy')}
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Video Games/Multiplayer
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Video Games/Mobile
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Pokémon
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Retro Games
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Video Games/RPG
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Video Games/Strategy
</Link>
</li>
</ul> </ul>
</> </>
)} )}
@@ -211,81 +164,21 @@ const BoardsList = ({ multisub }: { multisub: DirectoryCommunity[] }) => {
<div className={styles.boardsColumn}> <div className={styles.boardsColumn}>
<h3>Interests</h3> <h3>Interests</h3>
<ul> <ul>
<li> {renderBoardLink('Comics & Cartoons')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}> {renderBoardLink('Technology')}
Comics & Cartoons {renderBoardLink('Television & Film')}
</Link> {renderBoardLink('Weapons')}
</li> {renderBoardLink('Auto')}
<li> {renderBoardLink('Animals & Nature')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}> {renderBoardLink('Traditional Games')}
Technology {renderBoardLink('Sports')}
</Link> {renderBoardLink('Extreme Sports')}
</li> {renderBoardLink('Professional Wrestling')}
<li> {renderBoardLink('Science & Math')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}> {renderBoardLink('History & Humanities')}
Television & Film {renderBoardLink('International')}
</Link> {renderBoardLink('Outdoors')}
</li> {renderBoardLink('Toys')}
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Weapons
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Auto
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Animals & Nature
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Traditional Games
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Sports
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Extreme Sports
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Professional Wrestling
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Science & Math
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
History & Humanities
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
International
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Outdoors
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Toys
</Link>
</li>
</ul> </ul>
</div> </div>
)} )}
@@ -295,88 +188,26 @@ const BoardsList = ({ multisub }: { multisub: DirectoryCommunity[] }) => {
<div className={styles.boardsColumn}> <div className={styles.boardsColumn}>
<h3>Creative</h3> <h3>Creative</h3>
<ul> <ul>
{(showAll || showNsfwOnly) && ( {(showAll || showNsfwOnly) && renderBoardLink('Oekaki')}
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Oekaki
</Link>
</li>
)}
{(showAll || showWorksafeOnly) && ( {(showAll || showWorksafeOnly) && (
<> <>
<li> {renderBoardLink('Papercraft & Origami')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}> {renderBoardLink('Photography')}
Papercraft & Origami {renderBoardLink('Food & Cooking')}
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Photography
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Food & Cooking
</Link>
</li>
</> </>
)} )}
{(showAll || showNsfwOnly) && ( {(showAll || showNsfwOnly) && renderBoardLink('Artwork/Critique')}
<li> {(showAll || showNsfwOnly) && renderBoardLink('Wallpapers/General')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Artwork/Critique
</Link>
</li>
)}
{(showAll || showNsfwOnly) && (
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Wallpapers/General
</Link>
</li>
)}
{(showAll || showWorksafeOnly) && ( {(showAll || showWorksafeOnly) && (
<> <>
<li> {renderBoardLink('Literature')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}> {renderBoardLink('Music')}
Literature {renderBoardLink('Fashion')}
</Link> {renderBoardLink('3DCG')}
</li> {renderBoardLink('Graphic Design')}
<li> {renderBoardLink('Do-It-Yourself')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}> {renderBoardLink('Worksafe GIF')}
Music {renderBoardLink('Quests')}
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Fashion
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
3DCG
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Graphic Design
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Do-It-Yourself
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Worksafe GIF
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Quests
</Link>
</li>
</> </>
)} )}
</ul> </ul>
@@ -391,64 +222,16 @@ const BoardsList = ({ multisub }: { multisub: DirectoryCommunity[] }) => {
<> <>
<h3>Other</h3> <h3>Other</h3>
<ul> <ul>
{bizAddress ? ( {renderBoardLink('Business & Finance')}
<li> {renderBoardLink('Travel')}
<Link to={getBoardLink(bizAddress)} onClick={(e) => handleLinkClick(e, bizAddress)}> {renderBoardLink('Fitness')}
Business & Finance {renderBoardLink('Paranormal')}
</Link> {renderBoardLink('Advice')}
</li> {renderBoardLink('LGBT')}
) : ( {renderBoardLink('Pony')}
<li> {renderBoardLink('Current News')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}> {renderBoardLink('Worksafe Requests')}
Business & Finance {renderBoardLink('Very Important Posts')}
</Link>
</li>
)}
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Travel
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Fitness
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Paranormal
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Advice
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
LGBT
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Pony
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Current News
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Worksafe Requests
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Very Important Posts
</Link>
</li>
</ul> </ul>
</> </>
)} )}
@@ -459,44 +242,12 @@ const BoardsList = ({ multisub }: { multisub: DirectoryCommunity[] }) => {
<h3>Misc.</h3> <h3>Misc.</h3>
<NSFWBadge /> <NSFWBadge />
<ul> <ul>
<li> {renderBoardLink('Random')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}> {renderBoardLink('ROBOT9001')}
Random {renderBoardLink('Politically Incorrect')}
</Link> {renderBoardLink('International/Random')}
</li> {renderBoardLink('Cams & Meetups')}
<li> {renderBoardLink('Shit 5chan Says')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
ROBOT9001
</Link>
</li>
{polAddress ? (
<li>
<Link to={getBoardLink(polAddress)} onClick={(e) => handleLinkClick(e, polAddress)}>
Politically Incorrect
</Link>
</li>
) : (
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Politically Incorrect
</Link>
</li>
)}
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
International/Random
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Cams & Meetups
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Shit 5chan Says
</Link>
</li>
</ul> </ul>
</> </>
)} )}
@@ -509,71 +260,19 @@ const BoardsList = ({ multisub }: { multisub: DirectoryCommunity[] }) => {
<h3>Adult</h3> <h3>Adult</h3>
<NSFWBadge /> <NSFWBadge />
<ul> <ul>
<li> {renderBoardLink('Sexy Beautiful Women')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}> {renderBoardLink('Hardcore')}
Sexy Beautiful Women {renderBoardLink('Handsome Men')}
</Link> {renderBoardLink('Hentai')}
</li> {renderBoardLink('Ecchi')}
<li> {renderBoardLink('Yuri')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}> {renderBoardLink('Hentai/Alternative')}
Hardcore {renderBoardLink('Yaoi')}
</Link> {renderBoardLink('Torrents')}
</li> {renderBoardLink('High Resolution')}
<li> {renderBoardLink('Adult GIF')}
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}> {renderBoardLink('Adult Cartoons')}
Handsome Men {renderBoardLink('Adult Requests')}
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Hentai
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Ecchi
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Yuri
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Hentai/Alternative
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Yaoi
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Torrents
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
High Resolution
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Adult GIF
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Adult Cartoons
</Link>
</li>
<li>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Adult Requests
</Link>
</li>
</ul> </ul>
</div> </div>
)} )}