Merge pull request #453 from carbon-bond/apply_tab_panel_on_pop_and_s…

…ubscribe_article

套用 tab panel 到全站熱門和我的追蹤

frontend/app/desktop/src/tsx/app/main_routes.tsx

@@ -6,7 +6,7 @@ import {
 	Navigate,
 } from 'react-router-dom';
 
-import { BoardList, HotBoardList, SubscribeBoardList } from '../board_list';
+import { AllBoardList, HotBoardList, SubscribeBoardList } from '../board_list';
 import { SignupPage } from '../signup_page';
 import { ResetPassword } from '../reset_password';
 import { KeepAliveUserPage } from '../profile/user_page';
@@ -30,8 +30,8 @@ export function MainRoutes(): JSX.Element {
 		<Route path="/app/reset_password/:token" element={<ResetPassword />} />
 		<Route path="/app/change_email/:token" element={<ChangeEmail />} />
 		<Route path="/app/verify_title/:token" element={<VerifyTitle />} />
-		<Route path="/app" element={<BoardList />} />
-		<Route path="/app/board_list" element={<BoardList />} />
+		<Route path="/app" element={<AllBoardList />} />
+		<Route path="/app/all_board_list" element={<AllBoardList />} />
 		<Route path="/app/hot_board_list" element={<HotBoardList />} />
 		<Route path="/app/subscribe_board_list" element={<SubscribeBoardList />} />
 		<Route path="/app/search" element={<SearchPage />} />

frontend/app/desktop/src/tsx/board_list.tsx

@@ -38,7 +38,7 @@ async function fetchHotBoards(): Promise<BoardOverview[]> {
 	return boards;
 }
 
-function AllBoardList(props: {boards: Board[]}): JSX.Element {
+function AllBoardListElement(props: {boards: Board[]}): JSX.Element {
 	return <div className={style.boardList}>
 		<div className="mainContent">
 			{
@@ -92,7 +92,7 @@ function SubscribeBoardListElement(props: {boards: Board[], subscribe_boards: Su
 	</div>;
 }
 
-function BoardList(): JSX.Element {
+function AllBoardList(): JSX.Element {
 	const { setCurrentLocation } = LocationState.useContainer();
 	let [all_boards, setAllBoards] = React.useState<Board[]>([]);
 
@@ -114,8 +114,8 @@ function BoardList(): JSX.Element {
 			link="/app/hot_board_list"
 			element={<></>}/>
 		<TabPanelWithLinkItem is_disable={false} title="所有看板"
-			link="/app/board_list"
-			element={<AllBoardList boards={all_boards}/>} />
+			link="/app/all_board_list"
+			element={<AllBoardListElement boards={all_boards}/>} />
 	</TabPanelWithLink>;
 }
 
@@ -150,7 +150,7 @@ function HotBoardList(): JSX.Element {
 			link="/app/hot_board_list"
 			element={<HotBoardListElement boards={all_boards} hot_boards={hot_boards}/>} />
 		<TabPanelWithLinkItem is_disable={false} title="所有看板"
-			link="/app/board_list"
+			link="/app/all_board_list"
 			element={<></>}/>
 	</TabPanelWithLink>;
 }
@@ -178,9 +178,9 @@ function SubscribeBoardList(): JSX.Element {
 			link="/app/hot_board_list"
 			element={<></>}/>
 		<TabPanelWithLinkItem is_disable={false} title="所有看板"
-			link="/app/board_list"
+			link="/app/all_board_list"
 			element={<></>}/>
 	</TabPanelWithLink>;
 }
 
-export { BoardList, HotBoardList, SubscribeBoardList };
+export { AllBoardList, HotBoardList, SubscribeBoardList };

frontend/app/desktop/src/tsx/left_panel/browse_bar.tsx

@@ -80,7 +80,7 @@ export function BrowseBar(props: { onLinkClick: () => void }): JSX.Element {
 						<span className={style.specialBlock}>🔥 全站熱門</span>
 					</div>
 				</InjectedLink>
-				<InjectedLink to={'/app/board_list'}>
+				<InjectedLink to={'/app/all_board_list'}>
 					<div>
 						<span className={style.specialBlock}>🛹 所有看板</span>
 					</div>

frontend/app/desktop/src/tsx/pop_article_page.tsx

@@ -4,11 +4,12 @@ import { ArticleCard } from './article_card';
 import { ArticleMetaWithBonds } from 'carbonbond-api/api_trait';
 import { toastErr } from './utils';
 import { LocationState, SimpleLocation } from './global_state/location';
+import { TabPanelWithLink, TabPanelWithLinkItem } from './components/tab_panel';
 
 import style from '../css/pop_article_page.module.css';
 import '../css/layout.css';
 
-export function PopularArticlePage(): JSX.Element {
+function PopularArticlePageElement(): JSX.Element {
 	const [articles, setArticles] = React.useState<ArticleMetaWithBonds[]>([]);
 	const { setCurrentLocation } = LocationState.useContainer();
 	const [fetching, setFetching] = React.useState<boolean>(true);
@@ -50,4 +51,15 @@ function Articles(props: {articles: ArticleMetaWithBonds[]}): JSX.Element {
 
 async function fetchPopArticles(): Promise<ArticleMetaWithBonds[]> {
 	return unwrap_or(await API_FETCHER.articleQuery.searchPopArticle(30), []);
-}
+}
+
+export function PopularArticlePage(): JSX.Element {
+	return <TabPanelWithLink select_tab={0}>
+		<TabPanelWithLinkItem is_disable={false} title="全站熱門"
+			link="/app/pop_article"
+			element={<PopularArticlePageElement />} />
+		<TabPanelWithLinkItem is_disable={false} title="我的追蹤"
+			link="/app/subscribe_article"
+			element={<></>}/>
+	</TabPanelWithLink>;
+}

frontend/app/desktop/src/tsx/subscribe_article_page.tsx

@@ -5,11 +5,12 @@ import { ArticleMetaWithBonds } from 'carbonbond-api/api_trait';
 import { UserState } from './global_state/user';
 import { toastErr } from './utils';
 import { LocationState, SimpleLocation } from './global_state/location';
+import { TabPanelWithLink, TabPanelWithLinkItem } from './components/tab_panel';
 
 import style from '../css/pop_article_page.module.css';
 import '../css/layout.css';
 
-export function SubscribeArticlePage(): JSX.Element {
+export function SubscribeArticlePageElement(): JSX.Element {
 	const [articles, setArticles] = React.useState<ArticleMetaWithBonds[]>([]);
 	const { user_state } = UserState.useContainer();
 	const { setCurrentLocation } = LocationState.useContainer();
@@ -47,4 +48,15 @@ function Articles(props: {articles: ArticleMetaWithBonds[]}): JSX.Element {
 
 async function fetchSubscribeArticles(): Promise<ArticleMetaWithBonds[]> {
 	return unwrap_or(await API_FETCHER.articleQuery.getSubscribeArticle(10), []);
-}
+}
+
+export function SubscribeArticlePage(): JSX.Element {
+	return <TabPanelWithLink select_tab={1}>
+		<TabPanelWithLinkItem is_disable={false} title="全站熱門"
+			link="/app/pop_article"
+			element={<></>} />
+		<TabPanelWithLinkItem is_disable={false} title="我的追蹤"
+			link="/app/subscribe_article"
+			element={<SubscribeArticlePageElement />}/>
+	</TabPanelWithLink>;
+}