53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { useNavigate, useParams } from "react-router";
|
|
import { Trans } from "@lingui/react/macro";
|
|
import { useAuth } from "../../hooks/auth/useAuth.ts";
|
|
import {
|
|
DEFAULT_FEED_TAB,
|
|
FEED_TABS,
|
|
type FeedTab,
|
|
} from "../../config/feedTabs.ts";
|
|
import { useDefaultFeedTab } from "../../hooks/feed/useDefaultFeedTab.ts";
|
|
import { TabBar } from "../shared/TabBar.tsx";
|
|
import { CategorySwitcher } from "../category/CategorySwitcher.tsx";
|
|
|
|
/**
|
|
* Feed sort tabs (hot/new/journal/followed). Navigation stays within the
|
|
* current scope: `~` for all categories, or the active category slug — so the
|
|
* tabs link to `/~/new`, `/music/new`, etc.
|
|
*/
|
|
export function FeedTabBar() {
|
|
const { user } = useAuth();
|
|
const navigate = useNavigate();
|
|
const { categorySlug, feedTab } = useParams();
|
|
|
|
const [preferredTab] = useDefaultFeedTab();
|
|
const defaultTab: FeedTab = preferredTab === "followed" && !user
|
|
? DEFAULT_FEED_TAB
|
|
: preferredTab;
|
|
const active: FeedTab =
|
|
(FEED_TABS as readonly string[]).includes(feedTab ?? "") &&
|
|
(feedTab !== "followed" || !!user)
|
|
? (feedTab as FeedTab)
|
|
: defaultTab;
|
|
|
|
const scope = categorySlug ?? "~";
|
|
|
|
const tabs = [
|
|
{ key: "hot" as FeedTab, label: <Trans>Hot</Trans> },
|
|
{ key: "new" as FeedTab, label: <Trans>New</Trans> },
|
|
{ key: "journal" as FeedTab, label: <Trans>Journal</Trans> },
|
|
...(user
|
|
? [{ key: "followed" as FeedTab, label: <Trans>Followed</Trans> }]
|
|
: []),
|
|
];
|
|
|
|
return (
|
|
<TabBar
|
|
tabs={tabs}
|
|
activeTab={active}
|
|
onChange={(t) => navigate(`/${scope}/${t}`)}
|
|
leading={<CategorySwitcher />}
|
|
/>
|
|
);
|
|
}
|