feed selector on all feed pages
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
c493b959e7
commit
ff65b43c55
@ -1,11 +1,12 @@
|
|||||||
import "./RootTabs.css";
|
import "./RootTabs.css";
|
||||||
import { useState, ReactNode, useEffect } from "react";
|
import { useState, ReactNode, useEffect, useMemo } from "react";
|
||||||
import { useLocation, useNavigate } from "react-router-dom";
|
import { useLocation, useNavigate } from "react-router-dom";
|
||||||
import { Menu, MenuItem } from "@szhsin/react-menu";
|
import { Menu, MenuItem } from "@szhsin/react-menu";
|
||||||
import { FormattedMessage } from "react-intl";
|
import { FormattedMessage } from "react-intl";
|
||||||
|
|
||||||
import useLogin from "@/Hooks/useLogin";
|
import useLogin from "@/Hooks/useLogin";
|
||||||
import Icon from "@/Icons/Icon";
|
import Icon from "@/Icons/Icon";
|
||||||
|
import { Newest } from "@/Login";
|
||||||
|
|
||||||
export type RootTab =
|
export type RootTab =
|
||||||
| "following"
|
| "following"
|
||||||
@ -16,12 +17,7 @@ export type RootTab =
|
|||||||
| "tags"
|
| "tags"
|
||||||
| "global";
|
| "global";
|
||||||
|
|
||||||
export function RootTabs({ base }: { base?: string }) {
|
export function rootTabItems(base: string, pubKey: string | undefined, tags: Newest<Array<string>>) {
|
||||||
const navigate = useNavigate();
|
|
||||||
const location = useLocation();
|
|
||||||
const { publicKey: pubKey, tags } = useLogin();
|
|
||||||
const [rootType, setRootType] = useState<RootTab>("following");
|
|
||||||
|
|
||||||
const menuItems = [
|
const menuItems = [
|
||||||
{
|
{
|
||||||
tab: "following",
|
tab: "following",
|
||||||
@ -117,13 +113,24 @@ export function RootTabs({ base }: { base?: string }) {
|
|||||||
show: boolean;
|
show: boolean;
|
||||||
element: ReactNode;
|
element: ReactNode;
|
||||||
}>;
|
}>;
|
||||||
|
return menuItems;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function RootTabs({ base }: { base?: string }) {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
|
const { publicKey: pubKey, tags } = useLogin();
|
||||||
|
const [rootType, setRootType] = useState<RootTab>("following");
|
||||||
|
|
||||||
|
const menuItems = useMemo(() => rootTabItems(base, pubKey, tags), [base, pubKey, tags]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const currentTab = menuItems.find(a => a.path === location.pathname)?.tab;
|
const pathname = location.pathname === "/" ? `${base}/notes` : location.pathname;
|
||||||
|
const currentTab = menuItems.find(a => a.path === pathname)?.tab;
|
||||||
if (currentTab) {
|
if (currentTab) {
|
||||||
setRootType(currentTab);
|
setRootType(currentTab);
|
||||||
}
|
}
|
||||||
}, [location]);
|
}, [location, menuItems]);
|
||||||
|
|
||||||
function currentMenuItem() {
|
function currentMenuItem() {
|
||||||
if (location.pathname.startsWith(`${base}/t/`)) {
|
if (location.pathname.startsWith(`${base}/t/`)) {
|
||||||
@ -160,6 +167,7 @@ export function RootTabs({ base }: { base?: string }) {
|
|||||||
key={a.tab}
|
key={a.tab}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
navigate(a.path);
|
navigate(a.path);
|
||||||
|
window.scrollTo({ top: 0, behavior: "instant" });
|
||||||
}}>
|
}}>
|
||||||
{a.element}
|
{a.element}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
|
@ -1,20 +1,25 @@
|
|||||||
import { useLocation } from "react-router-dom";
|
import { useLocation } from "react-router-dom";
|
||||||
import React, { useCallback, useEffect, useState } from "react";
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import { LogoHeader } from "@/Pages/Layout/LogoHeader";
|
import { LogoHeader } from "@/Pages/Layout/LogoHeader";
|
||||||
import { RootTabs } from "@/Element/Feed/RootTabs";
|
import { rootTabItems, RootTabs } from "@/Element/Feed/RootTabs";
|
||||||
import NotificationsHeader from "@/Pages/Layout/NotificationsHeader";
|
import NotificationsHeader from "@/Pages/Layout/NotificationsHeader";
|
||||||
import { NostrLink, NostrPrefix, parseNostrLink } from "@snort/system";
|
import { NostrLink, NostrPrefix, parseNostrLink } from "@snort/system";
|
||||||
import { bech32ToHex } from "@/SnortUtils";
|
import { bech32ToHex } from "@/SnortUtils";
|
||||||
import { useEventFeed } from "@snort/system-react";
|
import { useEventFeed } from "@snort/system-react";
|
||||||
import { FormattedMessage } from "react-intl";
|
import { FormattedMessage } from "react-intl";
|
||||||
import DisplayName from "@/Element/User/DisplayName";
|
import DisplayName from "@/Element/User/DisplayName";
|
||||||
|
import useLogin from "@/Hooks/useLogin";
|
||||||
|
|
||||||
export function Header() {
|
export function Header() {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const showRootTabs = location.pathname === "/";
|
|
||||||
const pageName = location.pathname.split("/")[1];
|
const pageName = location.pathname.split("/")[1];
|
||||||
const [nostrLink, setNostrLink] = useState<NostrLink | undefined>();
|
const [nostrLink, setNostrLink] = useState<NostrLink | undefined>();
|
||||||
|
const { publicKey, tags } = useLogin();
|
||||||
|
|
||||||
|
const isRootTab = useMemo(() => {
|
||||||
|
return location.pathname === "/" || rootTabItems("", publicKey, tags).some(item => item.path === location.pathname);
|
||||||
|
}, [location.pathname, publicKey, tags]);
|
||||||
|
|
||||||
const scrollUp = useCallback(() => {
|
const scrollUp = useCallback(() => {
|
||||||
window.scrollTo({ top: 0, behavior: "instant" });
|
window.scrollTo({ top: 0, behavior: "instant" });
|
||||||
@ -46,8 +51,8 @@ export function Header() {
|
|||||||
<div className="md:hidden">
|
<div className="md:hidden">
|
||||||
<LogoHeader showText={false} />
|
<LogoHeader showText={false} />
|
||||||
</div>
|
</div>
|
||||||
{showRootTabs && <RootTabs base="" />}
|
{isRootTab && <RootTabs base="" />}
|
||||||
{!showRootTabs && (
|
{!isRootTab && (
|
||||||
<div
|
<div
|
||||||
onClick={scrollUp}
|
onClick={scrollUp}
|
||||||
className="cursor-pointer flex-1 text-center p-2 overflow-hidden whitespace-nowrap truncate">
|
className="cursor-pointer flex-1 text-center p-2 overflow-hidden whitespace-nowrap truncate">
|
||||||
|
Loading…
Reference in New Issue
Block a user