From a155f3c7f5d81202fca44e045e6eec2cab1f2c96 Mon Sep 17 00:00:00 2001 From: WaDadidou Date: Mon, 4 Dec 2023 17:52:34 +0100 Subject: [PATCH] fix: Better UPP tabs handling --- packages/components/tabs/Tabs.tsx | 4 + .../UserPublicProfile/DAOMembersUPPScreen.tsx | 26 --- .../DAOProposalsUPPScreen.tsx | 26 --- .../UserPublicProfile/DAOsUPPScreen.tsx | 31 ---- .../UserPublicProfile/FeedMusicUPPScreen.tsx | 40 ----- .../UserPublicProfile/FundsUPPScreen.tsx | 26 --- .../UserPublicProfile/GnoDemoUPPScreen.tsx | 26 --- .../UserPublicProfile/NFTsUPPScreen.tsx | 26 --- .../UserPublicProfile/QuestsUPPScreen.tsx | 26 --- .../UserPublicProfileScreen.tsx | 79 ++++----- .../components/UPPHeader.tsx | 156 ++++++++---------- .../tabScreens/DAOsUPPScreen.tsx | 30 ++++ .../tabScreens/FundsUPPScreen.tsx | 25 +++ .../tabScreens/GnoDemoUPPScreen.tsx | 25 +++ .../tabScreens/MembersUPPScreen.tsx | 25 +++ .../MentionsPostsUPPScreen.tsx} | 31 ++-- .../tabScreens/MusicUPPScreen.tsx | 39 +++++ .../tabScreens/NFTsUPPScreen.tsx | 25 +++ .../PostsUPPScreen.tsx} | 35 ++-- .../tabScreens/ProposalsUPPScreen.tsx | 25 +++ .../tabScreens/QuestsUPPScreen.tsx | 25 +++ .../VideosUPPScreen.tsx} | 33 ++-- packages/utils/upp.ts | 72 ++++++-- 23 files changed, 443 insertions(+), 413 deletions(-) delete mode 100644 packages/screens/UserPublicProfile/DAOMembersUPPScreen.tsx delete mode 100644 packages/screens/UserPublicProfile/DAOProposalsUPPScreen.tsx delete mode 100644 packages/screens/UserPublicProfile/DAOsUPPScreen.tsx delete mode 100644 packages/screens/UserPublicProfile/FeedMusicUPPScreen.tsx delete mode 100644 packages/screens/UserPublicProfile/FundsUPPScreen.tsx delete mode 100644 packages/screens/UserPublicProfile/GnoDemoUPPScreen.tsx delete mode 100644 packages/screens/UserPublicProfile/NFTsUPPScreen.tsx delete mode 100644 packages/screens/UserPublicProfile/QuestsUPPScreen.tsx create mode 100644 packages/screens/UserPublicProfile/tabScreens/DAOsUPPScreen.tsx create mode 100644 packages/screens/UserPublicProfile/tabScreens/FundsUPPScreen.tsx create mode 100644 packages/screens/UserPublicProfile/tabScreens/GnoDemoUPPScreen.tsx create mode 100644 packages/screens/UserPublicProfile/tabScreens/MembersUPPScreen.tsx rename packages/screens/UserPublicProfile/{FeedMentionsPostsUPPScreen.tsx => tabScreens/MentionsPostsUPPScreen.tsx} (60%) create mode 100644 packages/screens/UserPublicProfile/tabScreens/MusicUPPScreen.tsx create mode 100644 packages/screens/UserPublicProfile/tabScreens/NFTsUPPScreen.tsx rename packages/screens/UserPublicProfile/{FeedPostsUPPScreen.tsx => tabScreens/PostsUPPScreen.tsx} (54%) create mode 100644 packages/screens/UserPublicProfile/tabScreens/ProposalsUPPScreen.tsx create mode 100644 packages/screens/UserPublicProfile/tabScreens/QuestsUPPScreen.tsx rename packages/screens/UserPublicProfile/{FeedVideosUPPScreen.tsx => tabScreens/VideosUPPScreen.tsx} (51%) diff --git a/packages/components/tabs/Tabs.tsx b/packages/components/tabs/Tabs.tsx index 2f028ecb08..0d5776dc00 100644 --- a/packages/components/tabs/Tabs.tsx +++ b/packages/components/tabs/Tabs.tsx @@ -12,6 +12,7 @@ import { ViewStyle, } from "react-native"; +import { NetworkFeature, NetworkKind, UserKind } from "../../networks"; import { gradientColorBlue, gradientColorDarkerBlue, @@ -37,6 +38,9 @@ export interface TabDefinition { scrollTo?: string; iconSVG?: any; iconColor?: string; + networkKinds?: NetworkKind[]; + networkFeatures?: NetworkFeature[]; + userKinds?: UserKind[]; } export const Tabs = ({ diff --git a/packages/screens/UserPublicProfile/DAOMembersUPPScreen.tsx b/packages/screens/UserPublicProfile/DAOMembersUPPScreen.tsx deleted file mode 100644 index ff0e705300..0000000000 --- a/packages/screens/UserPublicProfile/DAOMembersUPPScreen.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { FC } from "react"; - -import { UPPHeader } from "./components/UPPHeader"; -import { UPPScreenContentWrapper } from "./components/UPPScreenContentWrapper"; -import { - ScreenContainer, - ScreenContainerProps, -} from "../../components/ScreenContainer"; -import { DAOMembers } from "../../components/dao/DAOMembers"; - -export const DAOMembersUPPScreen: FC<{ - userId: string; - screenContainerOtherProps: Partial; -}> = ({ userId, screenContainerOtherProps }) => { - return ( - - - - - - - ); -}; diff --git a/packages/screens/UserPublicProfile/DAOProposalsUPPScreen.tsx b/packages/screens/UserPublicProfile/DAOProposalsUPPScreen.tsx deleted file mode 100644 index 2642141e71..0000000000 --- a/packages/screens/UserPublicProfile/DAOProposalsUPPScreen.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { FC } from "react"; - -import { UPPHeader } from "./components/UPPHeader"; -import { UPPScreenContentWrapper } from "./components/UPPScreenContentWrapper"; -import { - ScreenContainer, - ScreenContainerProps, -} from "../../components/ScreenContainer"; -import { DAOProposals } from "../../components/dao/DAOProposals"; - -export const DAOProposalsUPPScreen: FC<{ - userId: string; - screenContainerOtherProps: Partial; -}> = ({ userId, screenContainerOtherProps }) => { - return ( - - - - - - - ); -}; diff --git a/packages/screens/UserPublicProfile/DAOsUPPScreen.tsx b/packages/screens/UserPublicProfile/DAOsUPPScreen.tsx deleted file mode 100644 index 2470428238..0000000000 --- a/packages/screens/UserPublicProfile/DAOsUPPScreen.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React, { FC } from "react"; - -import { UPPHeader } from "./components/UPPHeader"; -import { UPPScreenContentWrapper } from "./components/UPPScreenContentWrapper"; -import { - ScreenContainer, - ScreenContainerProps, -} from "../../components/ScreenContainer"; -import { DAOsList } from "../../components/dao/DAOsList"; -import { parseUserId } from "../../networks"; - -export const DAOsUPPScreen: FC<{ - userId: string; - screenContainerOtherProps: Partial; -}> = ({ userId, screenContainerOtherProps }) => { - const [network, userAddress] = parseUserId(userId); - - return ( - - - - - - - ); -}; diff --git a/packages/screens/UserPublicProfile/FeedMusicUPPScreen.tsx b/packages/screens/UserPublicProfile/FeedMusicUPPScreen.tsx deleted file mode 100644 index 8827fadd77..0000000000 --- a/packages/screens/UserPublicProfile/FeedMusicUPPScreen.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { FC } from "react"; - -import { UPPHeader } from "./components/UPPHeader"; -import { UPPScreenContentWrapper } from "./components/UPPScreenContentWrapper"; -import { - ScreenContainer, - ScreenContainerProps, -} from "../../components/ScreenContainer"; -import { MusicList } from "../../components/music/MusicList"; -import { useNSUserInfo } from "../../hooks/useNSUserInfo"; -import useSelectedWallet from "../../hooks/useSelectedWallet"; -import { parseUserId } from "../../networks"; - -export const FeedMusicUPPScreen: FC<{ - userId: string; - screenContainerOtherProps: Partial; -}> = ({ userId, screenContainerOtherProps }) => { - const selectedWallet = useSelectedWallet(); - const [, userAddress] = parseUserId(userId); - const userInfo = useNSUserInfo(userId); - const userName = - userInfo?.metadata.public_name || userInfo?.metadata.tokenId || userAddress; - const isCurrentUser = userId === selectedWallet?.userId; - - return ( - - - - - - - ); -}; diff --git a/packages/screens/UserPublicProfile/FundsUPPScreen.tsx b/packages/screens/UserPublicProfile/FundsUPPScreen.tsx deleted file mode 100644 index 9f3936264c..0000000000 --- a/packages/screens/UserPublicProfile/FundsUPPScreen.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { FC } from "react"; - -import { UPPHeader } from "./components/UPPHeader"; -import { UPPScreenContentWrapper } from "./components/UPPScreenContentWrapper"; -import { - ScreenContainer, - ScreenContainerProps, -} from "../../components/ScreenContainer"; -import { Assets } from "../WalletManager/Assets"; - -export const FundsUPPScreen: FC<{ - userId: string; - screenContainerOtherProps: Partial; -}> = ({ userId, screenContainerOtherProps }) => { - return ( - - - - - - - ); -}; diff --git a/packages/screens/UserPublicProfile/GnoDemoUPPScreen.tsx b/packages/screens/UserPublicProfile/GnoDemoUPPScreen.tsx deleted file mode 100644 index 0aef7fdb20..0000000000 --- a/packages/screens/UserPublicProfile/GnoDemoUPPScreen.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { FC } from "react"; - -import { UPPHeader } from "./components/UPPHeader"; -import { UPPScreenContentWrapper } from "./components/UPPScreenContentWrapper"; -import { - ScreenContainer, - ScreenContainerProps, -} from "../../components/ScreenContainer"; -import { GnoDemo } from "../../components/dao/GnoDemo"; - -export const GnoDemoUPPScreen: FC<{ - userId: string; - screenContainerOtherProps: Partial; -}> = ({ userId, screenContainerOtherProps }) => { - return ( - - - - - - - ); -}; diff --git a/packages/screens/UserPublicProfile/NFTsUPPScreen.tsx b/packages/screens/UserPublicProfile/NFTsUPPScreen.tsx deleted file mode 100644 index 4db35d6999..0000000000 --- a/packages/screens/UserPublicProfile/NFTsUPPScreen.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { FC } from "react"; - -import { UPPHeader } from "./components/UPPHeader"; -import { UPPNFTs } from "./components/UPPNFTs"; -import { UPPScreenContentWrapper } from "./components/UPPScreenContentWrapper"; -import { - ScreenContainer, - ScreenContainerProps, -} from "../../components/ScreenContainer"; - -export const NFTsUPPScreen: FC<{ - userId: string; - screenContainerOtherProps: Partial; -}> = ({ userId, screenContainerOtherProps }) => { - return ( - - - - - - - ); -}; diff --git a/packages/screens/UserPublicProfile/QuestsUPPScreen.tsx b/packages/screens/UserPublicProfile/QuestsUPPScreen.tsx deleted file mode 100644 index 5badecdcaa..0000000000 --- a/packages/screens/UserPublicProfile/QuestsUPPScreen.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { FC } from "react"; - -import { UPPHeader } from "./components/UPPHeader"; -import { UPPScreenContentWrapper } from "./components/UPPScreenContentWrapper"; -import { Quests } from "../../components/Quests"; -import { - ScreenContainer, - ScreenContainerProps, -} from "../../components/ScreenContainer"; - -export const QuestsUPPScreen: FC<{ - userId: string; - screenContainerOtherProps: Partial; -}> = ({ userId, screenContainerOtherProps }) => { - return ( - - - - - - - ); -}; diff --git a/packages/screens/UserPublicProfile/UserPublicProfileScreen.tsx b/packages/screens/UserPublicProfile/UserPublicProfileScreen.tsx index 14bb77bc8f..f6a34b333e 100644 --- a/packages/screens/UserPublicProfile/UserPublicProfileScreen.tsx +++ b/packages/screens/UserPublicProfile/UserPublicProfileScreen.tsx @@ -1,17 +1,17 @@ import { bech32 } from "bech32"; import React, { useEffect, useMemo } from "react"; -import { DAOMembersUPPScreen } from "./DAOMembersUPPScreen"; -import { DAOProposalsUPPScreen } from "./DAOProposalsUPPScreen"; -import { DAOsUPPScreen } from "./DAOsUPPScreen"; -import { FeedMentionsPostsUPPScreen } from "./FeedMentionsPostsUPPScreen"; -import { FeedMusicUPPScreen } from "./FeedMusicUPPScreen"; -import { FeedPostsUPPScreen } from "./FeedPostsUPPScreen"; -import { FeedVideosUPPScreen } from "./FeedVideosUPPScreen"; -import { FundsUPPScreen } from "./FundsUPPScreen"; -import { GnoDemoUPPScreen } from "./GnoDemoUPPScreen"; -import { NFTsUPPScreen } from "./NFTsUPPScreen"; -import { QuestsUPPScreen } from "./QuestsUPPScreen"; +import { DAOsUPPScreen } from "./tabScreens/DAOsUPPScreen"; +import { FundsUPPScreen } from "./tabScreens/FundsUPPScreen"; +import { GnoDemoUPPScreen } from "./tabScreens/GnoDemoUPPScreen"; +import { MembersUPPScreen } from "./tabScreens/MembersUPPScreen"; +import { MentionsPostsUPPScreen } from "./tabScreens/MentionsPostsUPPScreen"; +import { MusicUPPScreen } from "./tabScreens/MusicUPPScreen"; +import { NFTsUPPScreen } from "./tabScreens/NFTsUPPScreen"; +import { PostsUPPScreen } from "./tabScreens/PostsUPPScreen"; +import { ProposalsUPPScreen } from "./tabScreens/ProposalsUPPScreen"; +import { QuestsUPPScreen } from "./tabScreens/QuestsUPPScreen"; +import { VideosUPPScreen } from "./tabScreens/VideosUPPScreen"; import { BrandText } from "../../components/BrandText"; import { NotFound } from "../../components/NotFound"; import { @@ -23,11 +23,16 @@ import { useNSUserInfo } from "../../hooks/useNSUserInfo"; import { NetworkKind, parseUserId } from "../../networks"; import { ScreenFC, useAppNavigation } from "../../utils/navigation"; import { fontSemibold20 } from "../../utils/style/fonts"; -import { DEFAULT_UPP_TAB } from "../../utils/upp"; +import { DEFAULT_UPP_TAB_KEY, UppTabKeys } from "../../utils/upp"; + +export interface UppTabScreenProps { + userId: string; + screenContainerOtherProps: Partial; +} export const UserPublicProfileScreen: ScreenFC<"UserPublicProfile"> = ({ route: { - params: { id, tab, network: routeNetwork }, + params: { id, tab: tabKey, network: routeNetwork }, }, }) => { const navigation = useAppNavigation(); @@ -60,9 +65,10 @@ export const UserPublicProfileScreen: ScreenFC<"UserPublicProfile"> = ({ }, [navigation, userAddress, metadata.tokenId]); useEffect(() => { - if (!tab) - navigation.replace("UserPublicProfile", { id, tab: DEFAULT_UPP_TAB }); - }, [tab, id, navigation]); + if (!tabKey) { + navigation.replace("UserPublicProfile", { id, tab: DEFAULT_UPP_TAB_KEY }); + } + }, [tabKey, id, navigation]); if ( network?.kind !== NetworkKind.Gno && @@ -80,90 +86,87 @@ export const UserPublicProfileScreen: ScreenFC<"UserPublicProfile"> = ({ ); } - switch (tab) { - case "feedPosts": + switch (tabKey) { + case UppTabKeys.posts: return ( - ); - case "feedMentionsPosts": + case UppTabKeys.mentionsPosts: return ( - ); - case "feedMusic": + case UppTabKeys.music: return ( - ); - case "feedVideos": + case UppTabKeys.videos: return ( - ); - - case "daos": + case UppTabKeys.daos: return ( ); - case "daosMembers": + case UppTabKeys.members: return ( - ); - case "daosProposals": + case UppTabKeys.proposals: return ( - ); - - case "quests": + case UppTabKeys.quests: return ( ); - case "nfts": + case UppTabKeys.nfts: return ( ); - case "funds": + case UppTabKeys.funds: return ( ); - case "gnoDemo": + case UppTabKeys.gnoDemo: return ( ); - default: return ( - diff --git a/packages/screens/UserPublicProfile/components/UPPHeader.tsx b/packages/screens/UserPublicProfile/components/UPPHeader.tsx index dcccd3a4c1..8451b16488 100644 --- a/packages/screens/UserPublicProfile/components/UPPHeader.tsx +++ b/packages/screens/UserPublicProfile/components/UPPHeader.tsx @@ -1,11 +1,12 @@ -import React, { useEffect } from "react"; +import { useFocusEffect } from "@react-navigation/native"; +import React, { memo } from "react"; import { UPPIntro } from "./UPPIntro"; import { Tabs } from "../../../components/tabs/Tabs"; import { useIsDAO } from "../../../hooks/cosmwasm/useCosmWasmContractInfo"; import { useMaxResolution } from "../../../hooks/useMaxResolution"; import useSelectedWallet from "../../../hooks/useSelectedWallet"; -import { NetworkFeature, NetworkKind, parseUserId } from "../../../networks"; +import { parseUserId, UserKind } from "../../../networks"; import { useAppNavigation } from "../../../utils/navigation"; import { primaryColor } from "../../../utils/style/colors"; import { layout } from "../../../utils/style/layout"; @@ -17,90 +18,75 @@ interface UserPublicProfileScreenHeaderProps { selectedTab: keyof typeof uppTabItems; } -export const UPPHeader = ({ - userId, - selectedTab, -}: UserPublicProfileScreenHeaderProps) => { - const navigation = useAppNavigation(); - const selectedWallet = useSelectedWallet(); - const { width } = useMaxResolution(); - const { isDAO } = useIsDAO(userId); - const [network] = parseUserId(userId); +export const UPPHeader = memo( + ({ + userId, + selectedTab: selectedTabKey, + }: UserPublicProfileScreenHeaderProps) => { + const navigation = useAppNavigation(); + const selectedWallet = useSelectedWallet(); + const { width } = useMaxResolution(); + const { isDAO } = useIsDAO(userId); + const [network] = parseUserId(userId); - const items = Object.entries(uppTabItems).reduce( - (o, [key, item]) => { - if ( - !network?.features.includes(NetworkFeature.NFTMarketplace) && - ["nfts"].includes(key) - ) { - return o; - } - if ( - !network?.features.includes(NetworkFeature.Organizations) && - ["daos", "daoProposals", "daoMembers"].includes(key) - ) { - return o; - } - if ( - network?.features.includes(NetworkFeature.Organizations) && - isDAO && - ["daos"].includes(key) - ) { - return o; - } - if ( - !network?.features.includes(NetworkFeature.SocialFeed) && - ["feedMentionsPosts", "feedMusic", "feedVideos"].includes(key) - ) { - return o; - } - if (network?.kind !== NetworkKind.Gno && ["gnoDemo"].includes(key)) { - return o; - } - if ( - !isDAO && - ["daosMembers", "daosProposals", "funds", "gnoDemo"].includes(key) - ) { - return o; - } + const items: typeof uppTabItems = Object.entries(uppTabItems).reduce( + (o, [key, item]) => { + if (!network) return o; + if (!item.networkKinds?.includes(network.kind)) { + return o; + } + if ( + !item.networkFeatures?.find((networkFeature) => + network.features.includes(networkFeature), + ) + ) { + return o; + } + if (!item.userKinds?.includes(UserKind.Single) && !isDAO) { + return o; + } + if (!item.userKinds?.includes(UserKind.Organization) && isDAO) { + return o; + } + return { ...o, [key]: item }; + }, + {} as { [key in keyof typeof uppTabItems]: { name: string } }, + ); - return { ...o, [key]: item }; - }, - {} as { [key in keyof typeof uppTabItems]: { name: string } }, - ); + const forcedTabKey = items[selectedTabKey] + ? selectedTabKey + : objectKeys(items)[0]; - const forcedSelection = items[selectedTab] - ? selectedTab - : objectKeys(items)[0]; - useEffect(() => { - if (forcedSelection && selectedTab !== forcedSelection) { - navigation.replace("UserPublicProfile", { - id: userId, - tab: forcedSelection, - }); - } - }, [userId, selectedTab, forcedSelection, navigation]); + useFocusEffect(() => { + if (forcedTabKey && selectedTabKey !== forcedTabKey) { + navigation.replace("UserPublicProfile", { + id: userId, + tab: forcedTabKey, + }); + } + }); - return ( - <> - - { - navigation.navigate("UserPublicProfile", { id: userId, tab: key }); - }} - style={{ - width, - marginTop: 32, - marginBottom: layout.spacing_x4, - height: 45, - }} - borderColorTabSelected={primaryColor} - /> - - ); -}; + return ( + <> + + { + navigation.navigate("UserPublicProfile", { id: userId, tab: key }); + }} + style={{ + width, + marginTop: 32, + marginBottom: layout.spacing_x4, + height: 45, + }} + borderColorTabSelected={primaryColor} + /> + + ); + }, +); diff --git a/packages/screens/UserPublicProfile/tabScreens/DAOsUPPScreen.tsx b/packages/screens/UserPublicProfile/tabScreens/DAOsUPPScreen.tsx new file mode 100644 index 0000000000..05049d102b --- /dev/null +++ b/packages/screens/UserPublicProfile/tabScreens/DAOsUPPScreen.tsx @@ -0,0 +1,30 @@ +import React, { FC } from "react"; + +import { ScreenContainer } from "../../../components/ScreenContainer"; +import { DAOsList } from "../../../components/dao/DAOsList"; +import { parseUserId } from "../../../networks"; +import { UppTabKeys } from "../../../utils/upp"; +import { UppTabScreenProps } from "../UserPublicProfileScreen"; +import { UPPHeader } from "../components/UPPHeader"; +import { UPPScreenContentWrapper } from "../components/UPPScreenContentWrapper"; + +export const DAOsUPPScreen: FC = ({ + userId, + screenContainerOtherProps, +}) => { + const [network, userAddress] = parseUserId(userId); + + return ( + + + + + + + ); +}; diff --git a/packages/screens/UserPublicProfile/tabScreens/FundsUPPScreen.tsx b/packages/screens/UserPublicProfile/tabScreens/FundsUPPScreen.tsx new file mode 100644 index 0000000000..a4f9505d47 --- /dev/null +++ b/packages/screens/UserPublicProfile/tabScreens/FundsUPPScreen.tsx @@ -0,0 +1,25 @@ +import React, { FC } from "react"; + +import { ScreenContainer } from "../../../components/ScreenContainer"; +import { UppTabKeys } from "../../../utils/upp"; +import { Assets } from "../../WalletManager/Assets"; +import { UppTabScreenProps } from "../UserPublicProfileScreen"; +import { UPPHeader } from "../components/UPPHeader"; +import { UPPScreenContentWrapper } from "../components/UPPScreenContentWrapper"; + +export const FundsUPPScreen: FC = ({ + userId, + screenContainerOtherProps, +}) => { + return ( + + + + + + + ); +}; diff --git a/packages/screens/UserPublicProfile/tabScreens/GnoDemoUPPScreen.tsx b/packages/screens/UserPublicProfile/tabScreens/GnoDemoUPPScreen.tsx new file mode 100644 index 0000000000..c59b1a7dca --- /dev/null +++ b/packages/screens/UserPublicProfile/tabScreens/GnoDemoUPPScreen.tsx @@ -0,0 +1,25 @@ +import React, { FC } from "react"; + +import { ScreenContainer } from "../../../components/ScreenContainer"; +import { GnoDemo } from "../../../components/dao/GnoDemo"; +import { UppTabKeys } from "../../../utils/upp"; +import { UppTabScreenProps } from "../UserPublicProfileScreen"; +import { UPPHeader } from "../components/UPPHeader"; +import { UPPScreenContentWrapper } from "../components/UPPScreenContentWrapper"; + +export const GnoDemoUPPScreen: FC = ({ + userId, + screenContainerOtherProps, +}) => { + return ( + + + + + + + ); +}; diff --git a/packages/screens/UserPublicProfile/tabScreens/MembersUPPScreen.tsx b/packages/screens/UserPublicProfile/tabScreens/MembersUPPScreen.tsx new file mode 100644 index 0000000000..c9c4c0b70f --- /dev/null +++ b/packages/screens/UserPublicProfile/tabScreens/MembersUPPScreen.tsx @@ -0,0 +1,25 @@ +import React, { FC } from "react"; + +import { ScreenContainer } from "../../../components/ScreenContainer"; +import { DAOMembers } from "../../../components/dao/DAOMembers"; +import { UppTabKeys } from "../../../utils/upp"; +import { UppTabScreenProps } from "../UserPublicProfileScreen"; +import { UPPHeader } from "../components/UPPHeader"; +import { UPPScreenContentWrapper } from "../components/UPPScreenContentWrapper"; + +export const MembersUPPScreen: FC = ({ + userId, + screenContainerOtherProps, +}) => { + return ( + + + + + + + ); +}; diff --git a/packages/screens/UserPublicProfile/FeedMentionsPostsUPPScreen.tsx b/packages/screens/UserPublicProfile/tabScreens/MentionsPostsUPPScreen.tsx similarity index 60% rename from packages/screens/UserPublicProfile/FeedMentionsPostsUPPScreen.tsx rename to packages/screens/UserPublicProfile/tabScreens/MentionsPostsUPPScreen.tsx index 97b93bf7b4..b644aa60f3 100644 --- a/packages/screens/UserPublicProfile/FeedMentionsPostsUPPScreen.tsx +++ b/packages/screens/UserPublicProfile/tabScreens/MentionsPostsUPPScreen.tsx @@ -1,20 +1,19 @@ import React, { FC, useCallback, useMemo } from "react"; -import { UPPHeader } from "./components/UPPHeader"; -import { PostsRequest } from "../../api/feed/v1/feed"; -import { - ScreenContainer, - ScreenContainerProps, -} from "../../components/ScreenContainer"; -import { NewsFeed } from "../../components/socialFeed/NewsFeed/NewsFeed"; -import { useNSUserInfo } from "../../hooks/useNSUserInfo"; -import useSelectedWallet from "../../hooks/useSelectedWallet"; -import { parseUserId } from "../../networks"; +import { PostsRequest } from "../../../api/feed/v1/feed"; +import { ScreenContainer } from "../../../components/ScreenContainer"; +import { NewsFeed } from "../../../components/socialFeed/NewsFeed/NewsFeed"; +import { useNSUserInfo } from "../../../hooks/useNSUserInfo"; +import useSelectedWallet from "../../../hooks/useSelectedWallet"; +import { parseUserId } from "../../../networks"; +import { UppTabKeys } from "../../../utils/upp"; +import { UppTabScreenProps } from "../UserPublicProfileScreen"; +import { UPPHeader } from "../components/UPPHeader"; -export const FeedMentionsPostsUPPScreen: FC<{ - userId: string; - screenContainerOtherProps: Partial; -}> = ({ userId, screenContainerOtherProps }) => { +export const MentionsPostsUPPScreen: FC = ({ + userId, + screenContainerOtherProps, +}) => { const [, userAddress] = parseUserId(userId); const selectedWallet = useSelectedWallet(); const userInfo = useNSUserInfo(userId); @@ -37,13 +36,13 @@ export const FeedMentionsPostsUPPScreen: FC<{ }, [userInfo?.metadata.tokenId, userAddress]); const Header = useCallback( - () => , + () => , [userId], ); return ( diff --git a/packages/screens/UserPublicProfile/tabScreens/MusicUPPScreen.tsx b/packages/screens/UserPublicProfile/tabScreens/MusicUPPScreen.tsx new file mode 100644 index 0000000000..6ec666c55b --- /dev/null +++ b/packages/screens/UserPublicProfile/tabScreens/MusicUPPScreen.tsx @@ -0,0 +1,39 @@ +import React, { FC } from "react"; + +import { ScreenContainer } from "../../../components/ScreenContainer"; +import { MusicList } from "../../../components/music/MusicList"; +import { useNSUserInfo } from "../../../hooks/useNSUserInfo"; +import useSelectedWallet from "../../../hooks/useSelectedWallet"; +import { parseUserId } from "../../../networks"; +import { UppTabKeys } from "../../../utils/upp"; +import { UppTabScreenProps } from "../UserPublicProfileScreen"; +import { UPPHeader } from "../components/UPPHeader"; +import { UPPScreenContentWrapper } from "../components/UPPScreenContentWrapper"; + +export const MusicUPPScreen: FC = ({ + userId, + screenContainerOtherProps, +}) => { + const selectedWallet = useSelectedWallet(); + const [, userAddress] = parseUserId(userId); + const userInfo = useNSUserInfo(userId); + const userName = + userInfo?.metadata.public_name || userInfo?.metadata.tokenId || userAddress; + const isCurrentUser = userId === selectedWallet?.userId; + + return ( + + + + + + + ); +}; diff --git a/packages/screens/UserPublicProfile/tabScreens/NFTsUPPScreen.tsx b/packages/screens/UserPublicProfile/tabScreens/NFTsUPPScreen.tsx new file mode 100644 index 0000000000..b1372ace67 --- /dev/null +++ b/packages/screens/UserPublicProfile/tabScreens/NFTsUPPScreen.tsx @@ -0,0 +1,25 @@ +import React, { FC } from "react"; + +import { ScreenContainer } from "../../../components/ScreenContainer"; +import { UppTabKeys } from "../../../utils/upp"; +import { UppTabScreenProps } from "../UserPublicProfileScreen"; +import { UPPHeader } from "../components/UPPHeader"; +import { UPPNFTs } from "../components/UPPNFTs"; +import { UPPScreenContentWrapper } from "../components/UPPScreenContentWrapper"; + +export const NFTsUPPScreen: FC = ({ + userId, + screenContainerOtherProps, +}) => { + return ( + + + + + + + ); +}; diff --git a/packages/screens/UserPublicProfile/FeedPostsUPPScreen.tsx b/packages/screens/UserPublicProfile/tabScreens/PostsUPPScreen.tsx similarity index 54% rename from packages/screens/UserPublicProfile/FeedPostsUPPScreen.tsx rename to packages/screens/UserPublicProfile/tabScreens/PostsUPPScreen.tsx index 5c3e5380ec..e155fce7c3 100644 --- a/packages/screens/UserPublicProfile/FeedPostsUPPScreen.tsx +++ b/packages/screens/UserPublicProfile/tabScreens/PostsUPPScreen.tsx @@ -1,22 +1,21 @@ import React, { FC, useCallback, useMemo } from "react"; -import { UPPHeader } from "./components/UPPHeader"; -import { PostsRequest } from "../../api/feed/v1/feed"; -import { - ScreenContainer, - ScreenContainerProps, -} from "../../components/ScreenContainer"; -import { NewsFeed } from "../../components/socialFeed/NewsFeed/NewsFeed"; -import { useIsDAO } from "../../hooks/cosmwasm/useCosmWasmContractInfo"; -import { useIsDAOMember } from "../../hooks/dao/useDAOMember"; -import { useNSUserInfo } from "../../hooks/useNSUserInfo"; -import useSelectedWallet from "../../hooks/useSelectedWallet"; -import { parseUserId } from "../../networks"; +import { PostsRequest } from "../../../api/feed/v1/feed"; +import { ScreenContainer } from "../../../components/ScreenContainer"; +import { NewsFeed } from "../../../components/socialFeed/NewsFeed/NewsFeed"; +import { useIsDAO } from "../../../hooks/cosmwasm/useCosmWasmContractInfo"; +import { useIsDAOMember } from "../../../hooks/dao/useDAOMember"; +import { useNSUserInfo } from "../../../hooks/useNSUserInfo"; +import useSelectedWallet from "../../../hooks/useSelectedWallet"; +import { parseUserId } from "../../../networks"; +import { UppTabKeys } from "../../../utils/upp"; +import { UppTabScreenProps } from "../UserPublicProfileScreen"; +import { UPPHeader } from "../components/UPPHeader"; -export const FeedPostsUPPScreen: FC<{ - userId: string; - screenContainerOtherProps: Partial; -}> = ({ userId, screenContainerOtherProps }) => { +export const PostsUPPScreen: FC = ({ + userId, + screenContainerOtherProps, +}) => { const [, userAddress] = parseUserId(userId); const selectedWallet = useSelectedWallet(); const userInfo = useNSUserInfo(userId); @@ -37,13 +36,13 @@ export const FeedPostsUPPScreen: FC<{ }, [userId]); const Header = useCallback( - () => , + () => , [userId], ); return ( diff --git a/packages/screens/UserPublicProfile/tabScreens/ProposalsUPPScreen.tsx b/packages/screens/UserPublicProfile/tabScreens/ProposalsUPPScreen.tsx new file mode 100644 index 0000000000..4fb0d169e1 --- /dev/null +++ b/packages/screens/UserPublicProfile/tabScreens/ProposalsUPPScreen.tsx @@ -0,0 +1,25 @@ +import React, { FC } from "react"; + +import { ScreenContainer } from "../../../components/ScreenContainer"; +import { DAOProposals } from "../../../components/dao/DAOProposals"; +import { UppTabKeys } from "../../../utils/upp"; +import { UppTabScreenProps } from "../UserPublicProfileScreen"; +import { UPPHeader } from "../components/UPPHeader"; +import { UPPScreenContentWrapper } from "../components/UPPScreenContentWrapper"; + +export const ProposalsUPPScreen: FC = ({ + userId, + screenContainerOtherProps, +}) => { + return ( + + + + + + + ); +}; diff --git a/packages/screens/UserPublicProfile/tabScreens/QuestsUPPScreen.tsx b/packages/screens/UserPublicProfile/tabScreens/QuestsUPPScreen.tsx new file mode 100644 index 0000000000..2651b748a2 --- /dev/null +++ b/packages/screens/UserPublicProfile/tabScreens/QuestsUPPScreen.tsx @@ -0,0 +1,25 @@ +import React, { FC } from "react"; + +import { Quests } from "../../../components/Quests"; +import { ScreenContainer } from "../../../components/ScreenContainer"; +import { UppTabKeys } from "../../../utils/upp"; +import { UppTabScreenProps } from "../UserPublicProfileScreen"; +import { UPPHeader } from "../components/UPPHeader"; +import { UPPScreenContentWrapper } from "../components/UPPScreenContentWrapper"; + +export const QuestsUPPScreen: FC = ({ + userId, + screenContainerOtherProps, +}) => { + return ( + + + + + + + ); +}; diff --git a/packages/screens/UserPublicProfile/FeedVideosUPPScreen.tsx b/packages/screens/UserPublicProfile/tabScreens/VideosUPPScreen.tsx similarity index 51% rename from packages/screens/UserPublicProfile/FeedVideosUPPScreen.tsx rename to packages/screens/UserPublicProfile/tabScreens/VideosUPPScreen.tsx index da9e515e89..61f684712f 100644 --- a/packages/screens/UserPublicProfile/FeedVideosUPPScreen.tsx +++ b/packages/screens/UserPublicProfile/tabScreens/VideosUPPScreen.tsx @@ -1,21 +1,20 @@ import React, { FC, useCallback } from "react"; -import { UPPHeader } from "./components/UPPHeader"; -import { PostsRequest } from "../../api/feed/v1/feed"; -import { - ScreenContainer, - ScreenContainerProps, -} from "../../components/ScreenContainer"; -import { NewsFeed } from "../../components/socialFeed/NewsFeed/NewsFeed"; -import { PostCategory } from "../../components/socialFeed/NewsFeed/NewsFeed.type"; -import { useNSUserInfo } from "../../hooks/useNSUserInfo"; -import useSelectedWallet from "../../hooks/useSelectedWallet"; -import { parseUserId } from "../../networks"; +import { PostsRequest } from "../../../api/feed/v1/feed"; +import { ScreenContainer } from "../../../components/ScreenContainer"; +import { NewsFeed } from "../../../components/socialFeed/NewsFeed/NewsFeed"; +import { PostCategory } from "../../../components/socialFeed/NewsFeed/NewsFeed.type"; +import { useNSUserInfo } from "../../../hooks/useNSUserInfo"; +import useSelectedWallet from "../../../hooks/useSelectedWallet"; +import { parseUserId } from "../../../networks"; +import { UppTabKeys } from "../../../utils/upp"; +import { UppTabScreenProps } from "../UserPublicProfileScreen"; +import { UPPHeader } from "../components/UPPHeader"; -export const FeedVideosUPPScreen: FC<{ - userId: string; - screenContainerOtherProps: Partial; -}> = ({ userId, screenContainerOtherProps }) => { +export const VideosUPPScreen: FC = ({ + userId, + screenContainerOtherProps, +}) => { const [, userAddress] = parseUserId(userId); const selectedWallet = useSelectedWallet(); const userInfo = useNSUserInfo(userId); @@ -33,13 +32,13 @@ export const FeedVideosUPPScreen: FC<{ }; const Header = useCallback( - () => , + () => , [userId], ); return ( diff --git a/packages/utils/upp.ts b/packages/utils/upp.ts index 1843682ec2..5ddeeb54d3 100644 --- a/packages/utils/upp.ts +++ b/packages/utils/upp.ts @@ -1,44 +1,92 @@ import { TabDefinition } from "../components/tabs/Tabs"; +import { NetworkFeature, NetworkKind, UserKind } from "../networks"; -export const DEFAULT_UPP_TAB: keyof typeof uppTabItems = "feedPosts"; +export enum UppTabKeys { + posts = "posts", + nfts = "nfts", + quests = "quests", + mentionsPosts = "mentionsPosts", + music = "music", + videos = "videos", + daos = "daos", + proposals = "proposals", + members = "members", + funds = "funds", + gnoDemo = "gnoDemo", +} + +export const DEFAULT_UPP_TAB_KEY: keyof typeof uppTabItems = UppTabKeys.posts; export const uppTabItems: { [key: string]: TabDefinition } = { - feedPosts: { + [UppTabKeys.posts]: { name: "Posts", + networkKinds: [NetworkKind.Cosmos, NetworkKind.Gno], + networkFeatures: [NetworkFeature.UPP, NetworkFeature.SocialFeed], + userKinds: [UserKind.Single, UserKind.Organization], }, - nfts: { + [UppTabKeys.nfts]: { name: "NFTs", + networkKinds: [NetworkKind.Cosmos], + networkFeatures: [NetworkFeature.UPP, NetworkFeature.NFTMarketplace], + userKinds: [UserKind.Single, UserKind.Organization], }, // activity: { // name: "Activity", // disabled: true, // }, - quests: { + [UppTabKeys.quests]: { name: "Quests", + networkKinds: [NetworkKind.Cosmos], + networkFeatures: [NetworkFeature.UPP], + userKinds: [UserKind.Single, UserKind.Organization], }, - feedMentionsPosts: { + [UppTabKeys.mentionsPosts]: { name: "Mentions Posts", + networkKinds: [NetworkKind.Cosmos], + networkFeatures: [NetworkFeature.UPP, NetworkFeature.SocialFeed], + userKinds: [UserKind.Single, UserKind.Organization], }, - feedMusic: { + [UppTabKeys.music]: { name: "Music", + networkKinds: [NetworkKind.Cosmos, NetworkKind.Gno], + networkFeatures: [NetworkFeature.UPP, NetworkFeature.SocialFeed], + userKinds: [UserKind.Single, UserKind.Organization], }, - feedVideos: { + [UppTabKeys.videos]: { name: "Videos", + networkKinds: [NetworkKind.Cosmos, NetworkKind.Gno], + networkFeatures: [NetworkFeature.UPP, NetworkFeature.SocialFeed], + userKinds: [UserKind.Single, UserKind.Organization], }, - daos: { + [UppTabKeys.daos]: { name: "Organizations", + networkKinds: [NetworkKind.Cosmos], + networkFeatures: [NetworkFeature.UPP, NetworkFeature.Organizations], + userKinds: [UserKind.Single], }, - daosProposals: { + [UppTabKeys.proposals]: { name: "Proposals", + networkKinds: [NetworkKind.Cosmos, NetworkKind.Gno], + networkFeatures: [NetworkFeature.UPP, NetworkFeature.Organizations], + userKinds: [UserKind.Organization], }, - daosMembers: { + [UppTabKeys.members]: { name: "Members", + networkKinds: [NetworkKind.Cosmos, NetworkKind.Gno], + networkFeatures: [NetworkFeature.UPP, NetworkFeature.Organizations], + userKinds: [UserKind.Organization], }, - funds: { + [UppTabKeys.funds]: { name: "Funds", + networkKinds: [NetworkKind.Cosmos], + networkFeatures: [NetworkFeature.UPP, NetworkFeature.Organizations], + userKinds: [UserKind.Organization], }, - gnoDemo: { + [UppTabKeys.gnoDemo]: { name: "POCs", + networkKinds: [NetworkKind.Gno], + networkFeatures: [NetworkFeature.UPP], + userKinds: [UserKind.Organization], }, // pathwar: { // name: "Pathwar Challenges",