From ef673c2a053b2ec411e8897e609bc326be04133f Mon Sep 17 00:00:00 2001 From: Martti Malmi Date: Fri, 12 Jan 2024 17:33:02 +0200 Subject: [PATCH] tab selector vs content naming, refactoring --- packages/app/CHANGELOG.md | 2 +- .../Components/Event/Note/ReactionsModal.tsx | 4 +- .../TabSelectors.css} | 0 .../TabSelectors.tsx} | 10 +-- packages/app/src/Pages/Discover.tsx | 4 +- .../Pages/Notifications/NotificationChart.tsx | 8 +- .../app/src/Pages/Profile/ProfilePage.tsx | 75 +++++++------------ ...ofileTabs.tsx => ProfileTabComponents.tsx} | 35 ++++++++- ...ProfileTab.tsx => ProfileTabSelectors.tsx} | 6 +- packages/app/src/Pages/SearchPage.tsx | 4 +- 10 files changed, 82 insertions(+), 66 deletions(-) rename packages/app/src/Components/{Tabs/Tabs.css => TabSelectors/TabSelectors.css} (100%) rename packages/app/src/Components/{Tabs/Tabs.tsx => TabSelectors/TabSelectors.tsx} (73%) rename packages/app/src/Pages/Profile/{ProfileTabs.tsx => ProfileTabComponents.tsx} (60%) rename packages/app/src/Pages/Profile/{ProfileTab.tsx => ProfileTabSelectors.tsx} (93%) diff --git a/packages/app/CHANGELOG.md b/packages/app/CHANGELOG.md index c64946f8..9f9305b1 100644 --- a/packages/app/CHANGELOG.md +++ b/packages/app/CHANGELOG.md @@ -583,7 +583,7 @@ https://git.v0l.io/Kieran/snort/compare/v0.1.9...v0.1.10 - Fix event mention bug by @SamSamskies in https://github.com/v0l/snort/pull/421 - fix NaN when parsing empty string by @SamSamskies in https://github.com/v0l/snort/pull/422 - NIP06 support by @w3irdrobot in https://github.com/v0l/snort/pull/425 -- Added key attr to Tabs to remove React warning by @w3irdrobot in https://github.com/v0l/snort/pull/424 +- Added key attr to TabSelectors to remove React warning by @w3irdrobot in https://github.com/v0l/snort/pull/424 - New Crowdin updates by @v0l in https://github.com/v0l/snort/pull/426 - New Crowdin updates by @v0l in https://github.com/v0l/snort/pull/436 - Update Wavlake embed URL, add support for album & artist links by @blastshielddown in https://github.com/v0l/snort/pull/439 diff --git a/packages/app/src/Components/Event/Note/ReactionsModal.tsx b/packages/app/src/Components/Event/Note/ReactionsModal.tsx index cef25863..6bdab39b 100644 --- a/packages/app/src/Components/Event/Note/ReactionsModal.tsx +++ b/packages/app/src/Components/Event/Note/ReactionsModal.tsx @@ -8,7 +8,7 @@ import { FormattedMessage, useIntl } from "react-intl"; import CloseButton from "@/Components/Button/CloseButton"; import Icon from "@/Components/Icons/Icon"; import Modal from "@/Components/Modal/Modal"; -import Tabs from "@/Components/Tabs/Tabs"; +import TabSelectors from "@/Components/TabSelectors/TabSelectors"; import ProfileImage from "@/Components/User/ProfileImage"; import { formatShort } from "@/Utils/Number"; @@ -75,7 +75,7 @@ const ReactionsModal = ({ onClose, event, initialTab = 0 }: ReactionsModalProps) - +
{tab.value === 0 && likes.map(ev => renderReactionItem(ev, "heart"))} {tab.value === 1 && diff --git a/packages/app/src/Components/Tabs/Tabs.css b/packages/app/src/Components/TabSelectors/TabSelectors.css similarity index 100% rename from packages/app/src/Components/Tabs/Tabs.css rename to packages/app/src/Components/TabSelectors/TabSelectors.css diff --git a/packages/app/src/Components/Tabs/Tabs.tsx b/packages/app/src/Components/TabSelectors/TabSelectors.tsx similarity index 73% rename from packages/app/src/Components/Tabs/Tabs.tsx rename to packages/app/src/Components/TabSelectors/TabSelectors.tsx index 658b9af7..b01d4544 100644 --- a/packages/app/src/Components/Tabs/Tabs.tsx +++ b/packages/app/src/Components/TabSelectors/TabSelectors.tsx @@ -1,4 +1,4 @@ -import "./Tabs.css"; +import "./TabSelectors.css"; import { ReactNode } from "react"; @@ -20,7 +20,7 @@ interface TabElementProps extends Omit { t: Tab; } -export const TabElement = ({ t, tab, setTab }: TabElementProps) => { +export const TabSelector = ({ t, tab, setTab }: TabElementProps) => { return (
{ ); }; -const Tabs = ({ tabs, tab, setTab }: TabsProps) => { +const TabSelectors = ({ tabs, tab, setTab }: TabsProps) => { const horizontalScroll = useHorizontalScroll(); return (
{tabs.map((t, index) => ( - + ))}
); }; -export default Tabs; +export default TabSelectors; diff --git a/packages/app/src/Pages/Discover.tsx b/packages/app/src/Pages/Discover.tsx index 022cc7dd..bc03a833 100644 --- a/packages/app/src/Pages/Discover.tsx +++ b/packages/app/src/Pages/Discover.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; import { useIntl } from "react-intl"; import SuggestedProfiles from "@/Components/SuggestedProfiles"; -import { Tab, TabElement } from "@/Components/Tabs/Tabs"; +import { Tab, TabSelector } from "@/Components/TabSelectors/TabSelectors"; import TrendingNotes from "@/Components/Trending/TrendingPosts"; import TrendingUsers from "@/Components/Trending/TrendingUsers"; @@ -32,7 +32,7 @@ export default function Discover() { <>
{[Tabs.Follows, Tabs.Posts, Tabs.Profiles].map(a => ( - + ))}
{renderTab()} diff --git a/packages/app/src/Pages/Notifications/NotificationChart.tsx b/packages/app/src/Pages/Notifications/NotificationChart.tsx index 750a8d43..e42cddcc 100644 --- a/packages/app/src/Pages/Notifications/NotificationChart.tsx +++ b/packages/app/src/Pages/Notifications/NotificationChart.tsx @@ -7,7 +7,7 @@ import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recha import { AsyncIcon } from "@/Components/Button/AsyncIcon"; import Icon from "@/Components/Icons/Icon"; -import Tabs, { Tab } from "@/Components/Tabs/Tabs"; +import TabSelectors, { Tab } from "@/Components/TabSelectors/TabSelectors"; import { orderAscending } from "@/Utils"; import { Day } from "@/Utils/Const"; import { formatShort } from "@/Utils/Number"; @@ -123,7 +123,11 @@ export default function NotificationSummary({ evs }: { evs: Array
- a.value === period))} setTab={t => setPeriod(t.value)} /> + a.value === period))} + setTab={t => setPeriod(t.value)} + />
diff --git a/packages/app/src/Pages/Profile/ProfilePage.tsx b/packages/app/src/Pages/Profile/ProfilePage.tsx index 8398dab7..5cad089d 100644 --- a/packages/app/src/Pages/Profile/ProfilePage.tsx +++ b/packages/app/src/Pages/Profile/ProfilePage.tsx @@ -1,29 +1,34 @@ import "./ProfilePage.css"; import { fetchNip05Pubkey, LNURL } from "@snort/shared"; -import { CachedMetadata, EventKind, NostrPrefix, tryParseNostrLink } from "@snort/system"; +import { CachedMetadata, NostrPrefix, tryParseNostrLink } from "@snort/system"; import { useUserProfile } from "@snort/system-react"; import { useEffect, useMemo, useState } from "react"; import { useLocation, useNavigate, useParams } from "react-router-dom"; -import Note from "@/Components/Event/EventComponent"; -import Timeline from "@/Components/Feed/Timeline"; import { ProxyImg } from "@/Components/ProxyImg"; import { SpotlightMediaModal } from "@/Components/Spotlight/SpotlightMedia"; -import { Tab, TabElement } from "@/Components/Tabs/Tabs"; +import { Tab, TabSelector } from "@/Components/TabSelectors/TabSelectors"; import BlockList from "@/Components/User/BlockList"; import FollowsList from "@/Components/User/FollowListBase"; import MutedList from "@/Components/User/MutedList"; import useFollowsFeed from "@/Feed/FollowsFeed"; import useHorizontalScroll from "@/Hooks/useHorizontalScroll"; -import { useMuteList, usePinList } from "@/Hooks/useLists"; +import { useMuteList } from "@/Hooks/useLists"; import useLogin from "@/Hooks/useLogin"; import useModeration from "@/Hooks/useModeration"; import AvatarSection from "@/Pages/Profile/AvatarSection"; import ProfileDetails from "@/Pages/Profile/ProfileDetails"; -import ProfileTab from "@/Pages/Profile/ProfileTab"; -import { BookMarksTab, FollowersTab, FollowsTab, RelaysTab, ZapsProfileTab } from "@/Pages/Profile/ProfileTabs"; +import { + BookMarksTab, + FollowersTab, + FollowsTab, + RelaysTab, + ZapsProfileTab, +} from "@/Pages/Profile/ProfileTabComponents"; +import ProfileTabSelectors from "@/Pages/Profile/ProfileTabSelectors"; import { ProfileTabType } from "@/Pages/Profile/ProfileTabType"; +import { NotesTab } from "@/Pages/Root/NotesTab"; import { parseId, unwrap } from "@/Utils"; import { EmailRegex } from "@/Utils/Const"; @@ -58,15 +63,17 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) { // feeds const { blocked } = useModeration(); - const pinned = usePinList(id); const muted = useMuteList(id); const follows = useFollowsFeed(id); // tabs - const [tab, setTab] = useState(ProfileTab.Notes); - const optionalTabs = [ProfileTab.Zaps, ProfileTab.Relays, ProfileTab.Bookmarks, ProfileTab.Muted].filter(a => - unwrap(a), - ) as Tab[]; + const [tab, setTab] = useState(ProfileTabSelectors.Notes); + const optionalTabs = [ + ProfileTabSelectors.Zaps, + ProfileTabSelectors.Relays, + ProfileTabSelectors.Bookmarks, + ProfileTabSelectors.Muted, + ].filter(a => unwrap(a)) as Tab[]; const horizontalScroll = useHorizontalScroll(); useEffect(() => { @@ -98,7 +105,7 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) { } } } - setTab(ProfileTab.Notes); + setTab(ProfileTabSelectors.Notes); }, [id, propId, params]); function tabContent() { @@ -106,35 +113,7 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) { switch (tab.value) { case ProfileTabType.NOTES: - return ( - <> - {pinned - .filter(a => a.kind === EventKind.TextNote) - .map(n => { - return ( - - ); - })} - - - ); + return ; case ProfileTabType.ZAPS: { return ; } @@ -163,8 +142,8 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) { } } - function renderTab(v: Tab) { - return ; + function renderTabSelector(v: Tab) { + return ; } const bannerWidth = Math.min(window.innerWidth, 940); @@ -189,9 +168,11 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
- {[ProfileTab.Notes, ProfileTab.Followers, ProfileTab.Follows].map(renderTab)} - {optionalTabs.map(renderTab)} - {isMe && blocked.length > 0 && renderTab(ProfileTab.Blocked)} + {[ProfileTabSelectors.Notes, ProfileTabSelectors.Followers, ProfileTabSelectors.Follows].map( + renderTabSelector, + )} + {optionalTabs.map(renderTabSelector)} + {isMe && blocked.length > 0 && renderTabSelector(ProfileTabSelectors.Blocked)}
{tabContent()}
diff --git a/packages/app/src/Pages/Profile/ProfileTabs.tsx b/packages/app/src/Pages/Profile/ProfileTabComponents.tsx similarity index 60% rename from packages/app/src/Pages/Profile/ProfileTabs.tsx rename to packages/app/src/Pages/Profile/ProfileTabComponents.tsx index f14c8b7e..6c69760e 100644 --- a/packages/app/src/Pages/Profile/ProfileTabs.tsx +++ b/packages/app/src/Pages/Profile/ProfileTabComponents.tsx @@ -1,7 +1,10 @@ -import { HexKey, NostrLink, NostrPrefix } from "@snort/system"; +import { EventKind, HexKey, NostrLink, NostrPrefix } from "@snort/system"; +import { useMemo } from "react"; import { FormattedMessage } from "react-intl"; +import { Note } from "@/Components/Event/Note/Note"; import Zap from "@/Components/Event/Zap"; +import Timeline from "@/Components/Feed/Timeline"; import RelaysMetadata from "@/Components/Relay/RelaysMetadata"; import Bookmarks from "@/Components/User/Bookmarks"; import FollowsList from "@/Components/User/FollowListBase"; @@ -9,7 +12,7 @@ import useFollowersFeed from "@/Feed/FollowersFeed"; import useFollowsFeed from "@/Feed/FollowsFeed"; import useRelaysFeed from "@/Feed/RelaysFeed"; import useZapsFeed from "@/Feed/ZapsFeed"; -import { useBookmarkList } from "@/Hooks/useLists"; +import { useBookmarkList, usePinList } from "@/Hooks/useLists"; import messages from "@/Pages/messages"; import { formatShort } from "@/Utils/Number"; @@ -47,3 +50,31 @@ export function BookMarksTab({ id }: { id: HexKey }) { const bookmarks = useBookmarkList(id); return ; } + +export function NotesTab({ id, relays, isMe }: { id: HexKey; relays?: Array; isMe: boolean }) { + const pinned = usePinList(id); + const options = useMemo(() => ({ showTime: false, showPinned: true, canUnpin: isMe }), [isMe]); + return ( + <> + {pinned + .filter(a => a.kind === EventKind.TextNote) + .map(n => { + return ; + })} + + + ); +} diff --git a/packages/app/src/Pages/Profile/ProfileTab.tsx b/packages/app/src/Pages/Profile/ProfileTabSelectors.tsx similarity index 93% rename from packages/app/src/Pages/Profile/ProfileTab.tsx rename to packages/app/src/Pages/Profile/ProfileTabSelectors.tsx index 91425675..ce8426a3 100644 --- a/packages/app/src/Pages/Profile/ProfileTab.tsx +++ b/packages/app/src/Pages/Profile/ProfileTabSelectors.tsx @@ -1,10 +1,10 @@ import { FormattedMessage } from "react-intl"; import Icon from "@/Components/Icons/Icon"; -import { Tab } from "@/Components/Tabs/Tabs"; +import { Tab } from "@/Components/TabSelectors/TabSelectors"; import { ProfileTabType } from "@/Pages/Profile/ProfileTabType"; -const ProfileTab = { +const ProfileTabSelectors = { Notes: { text: ( <> @@ -88,4 +88,4 @@ const ProfileTab = { }, } as { [key: string]: Tab }; -export default ProfileTab; +export default ProfileTabSelectors; diff --git a/packages/app/src/Pages/SearchPage.tsx b/packages/app/src/Pages/SearchPage.tsx index d5812ebd..b3319052 100644 --- a/packages/app/src/Pages/SearchPage.tsx +++ b/packages/app/src/Pages/SearchPage.tsx @@ -3,7 +3,7 @@ import { FormattedMessage, useIntl } from "react-intl"; import { useNavigate, useParams } from "react-router-dom"; import Timeline from "@/Components/Feed/Timeline"; -import Tabs, { Tab } from "@/Components/Tabs/Tabs"; +import TabSelectors, { Tab } from "@/Components/TabSelectors/TabSelectors"; import TrendingNotes from "@/Components/Trending/TrendingPosts"; import TrendingUsers from "@/Components/Trending/TrendingUsers"; import FollowListBase from "@/Components/User/FollowListBase"; @@ -107,7 +107,7 @@ const SearchPage = () => { value={search} onChange={e => setSearch(e.target.value)} /> - +
{tabContent()}