From 93119aa93c760ceb81e4033553fb0eda4ec29b41 Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Fri, 29 Dec 2023 21:37:06 +0700 Subject: [PATCH 01/15] fix: flickering when first render space page --- src/components/spaces/ViewSpace.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/spaces/ViewSpace.tsx b/src/components/spaces/ViewSpace.tsx index a2b7dbfcb..4cc229451 100644 --- a/src/components/spaces/ViewSpace.tsx +++ b/src/components/spaces/ViewSpace.tsx @@ -124,7 +124,7 @@ export const InnerViewSpace = (props: Props) => { const setChatConfig = useSetChatEntityConfig() const setChatOpen = useSetChatOpen() - const { isCreatorSpace } = useIsCreatorSpace(spaceData?.id) + const { isCreatorSpace, loading } = useIsCreatorSpace(spaceData?.id) // We do not return 404 page here, because this component could be used to render a space in list. if (!spaceData) return null @@ -292,7 +292,7 @@ export const InnerViewSpace = (props: Props) => { ) } - const showCreatorCards = isCreatorSpace && isMobile + const showCreatorCards = isCreatorSpace && isMobile && !loading return (
From 850768d581aa9944d807f25162c96861ab23f6d8 Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Fri, 29 Dec 2023 21:52:05 +0700 Subject: [PATCH 02/15] feat: add banner for home page --- .../MobileIncreaseSubRewards.module.sass | 2 +- .../creators/MobileIncreaseSubRewards.tsx | 27 ++++++++++++------- src/components/main/HomePage.tsx | 11 +++++++- 3 files changed, 29 insertions(+), 11 deletions(-) diff --git a/src/components/creators/MobileIncreaseSubRewards.module.sass b/src/components/creators/MobileIncreaseSubRewards.module.sass index 4718444a8..3b2e23e93 100644 --- a/src/components/creators/MobileIncreaseSubRewards.module.sass +++ b/src/components/creators/MobileIncreaseSubRewards.module.sass @@ -8,7 +8,7 @@ gap: $space_normal background: #FFEDF5 border-radius: 0px 0px $border_radius_huge $border_radius_huge - padding: $space_normal + padding: $space_small $space_normal overflow: hidden .Title, .Link diff --git a/src/components/creators/MobileIncreaseSubRewards.tsx b/src/components/creators/MobileIncreaseSubRewards.tsx index aa93e6e41..f7f486589 100644 --- a/src/components/creators/MobileIncreaseSubRewards.tsx +++ b/src/components/creators/MobileIncreaseSubRewards.tsx @@ -5,25 +5,34 @@ import { ComponentProps } from 'react' import { useFetchStakeData } from 'src/rtk/features/creators/stakesHooks' import { activeStakingLinks } from 'src/utils/links' import { useMyAddress } from '../auth/MyAccountsContext' +import { MutedSpan } from '../utils/MutedText' import styles from './MobileIncreaseSubRewards.module.sass' export type MobileIncreaseSubRewardsProps = ComponentProps<'div'> & { - space: SpaceData + space?: SpaceData + isActiveStakingBanner?: boolean } export default function MobileIncreaseSubRewards(props: MobileIncreaseSubRewardsProps) { + const { space, isActiveStakingBanner } = props const myAddress = useMyAddress() - const { data } = useFetchStakeData(myAddress ?? '', props.space.id) - if (!data?.hasStaked) return null + const { data } = useFetchStakeData(myAddress ?? '', space?.id || '') + if (!data?.hasStaked && space?.id) return null return (
- Increase SUB rewards - - - Learn more - - + + {isActiveStakingBanner ? 'Active Staking' : 'Increase SUB rewards'} + + {isActiveStakingBanner ? ( + Coming soon + ) : ( + + + Learn more + + + )}
) diff --git a/src/components/main/HomePage.tsx b/src/components/main/HomePage.tsx index 5609e1452..1970d0d0e 100644 --- a/src/components/main/HomePage.tsx +++ b/src/components/main/HomePage.tsx @@ -8,9 +8,11 @@ import config from 'src/config' import { GET_TOTAL_COUNTS } from 'src/graphql/queries' import { GetHomePageData } from 'src/graphql/__generated__/GetHomePageData' import { getInitialPropsWithRedux } from 'src/rtk/app' +import { useFetchTotalStake } from 'src/rtk/features/creators/totalStakeHooks' import { PostKind } from 'src/types/graphql-global-types' -import { useIsSignedIn } from '../auth/MyAccountsContext' +import { useIsSignedIn, useMyAddress } from '../auth/MyAccountsContext' import { CreatorDashboardHomeVariant } from '../creators/CreatorDashboardSidebar' +import MobileIncreaseSubRewards from '../creators/MobileIncreaseSubRewards' import { CreatorsSpaces } from '../spaces/LatestSpacesPage' import Section from '../utils/Section' import style from './HomePage.module.sass' @@ -165,8 +167,15 @@ const TabsHomePage = ({ } }, [tab, type, date]) + const myAddress = useMyAddress() + const { data } = useFetchTotalStake(myAddress ?? '') + return ( <> + From e4eae3113b73a356cc81dde7f4ee255d505a9db0 Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Fri, 29 Dec 2023 21:52:35 +0700 Subject: [PATCH 03/15] chore: render null if data is loading --- src/components/spaces/ViewSpace.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/spaces/ViewSpace.tsx b/src/components/spaces/ViewSpace.tsx index 4cc229451..34f2f3a72 100644 --- a/src/components/spaces/ViewSpace.tsx +++ b/src/components/spaces/ViewSpace.tsx @@ -313,7 +313,9 @@ export const InnerViewSpace = (props: Props) => { function MobileCreatorCard({ spaceData }: { spaceData: SpaceData }) { const myAddress = useMyAddress() - const { data } = useFetchStakeData(myAddress ?? '', spaceData.id) + const { data, loading } = useFetchStakeData(myAddress ?? '', spaceData.id) + + if (loading) return null return (
From cdb4009cdc2fd599ae4e8996d31d05a23b7b652e Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Fri, 29 Dec 2023 22:02:15 +0700 Subject: [PATCH 04/15] fix: spacing issues in mobile, for post preview and tab margins --- src/components/lists/InfiniteList.tsx | 3 ++- src/components/main/HomePageFilters.tsx | 4 ++-- src/components/spaces/LatestSpacesPage.tsx | 6 +++++- src/styles/subsocial-mobile.scss | 3 --- src/styles/subsocial.scss | 3 +++ 5 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/lists/InfiniteList.tsx b/src/components/lists/InfiniteList.tsx index 23360946a..69b85104b 100644 --- a/src/components/lists/InfiniteList.tsx +++ b/src/components/lists/InfiniteList.tsx @@ -1,4 +1,5 @@ import { isEmptyArray, nonEmptyArr } from '@subsocial/utils' +import clsx from 'clsx' import { useRouter } from 'next/router' import { useCallback, useEffect, useState } from 'react' import InfiniteScroll from 'react-infinite-scroll-component' @@ -52,7 +53,7 @@ export const InfiniteListByPage = (props: InfiniteListByPageProps } export const InfinitePageList = (props: InfiniteListByPageProps) => { - return + return } const canHaveMoreData = (currentPageItems?: T[]) => { diff --git a/src/components/main/HomePageFilters.tsx b/src/components/main/HomePageFilters.tsx index 60feab5a2..fcbc8f121 100644 --- a/src/components/main/HomePageFilters.tsx +++ b/src/components/main/HomePageFilters.tsx @@ -86,7 +86,7 @@ export const SpaceFilterView = ({ filter: { type, date }, ...props }: SpaceFilte const onChangeWrap = (onChange: OnChangeFn) => (e: RadioChangeEvent) => onChange(e.target.value) export const Filters = (props: Props) => { - const { tabKey, isAffix } = props + const { tabKey } = props const { isMobile } = useResponsiveSize() const router = useRouter() @@ -106,7 +106,7 @@ export const Filters = (props: Props) => { if (!needDateFilter && !filterByKey[tabKey]?.length) return null return ( -
+
{!isMobile ? ( diff --git a/src/components/spaces/LatestSpacesPage.tsx b/src/components/spaces/LatestSpacesPage.tsx index e549b3435..b94961878 100644 --- a/src/components/spaces/LatestSpacesPage.tsx +++ b/src/components/spaces/LatestSpacesPage.tsx @@ -28,6 +28,7 @@ type Props = { totalSpaceCount: number filter: SpaceFilterType dateFilter?: DateFilterType + className?: string } const loadMoreSpacesFn = async ( @@ -69,7 +70,7 @@ const loadMoreSpacesFn = async ( } const InfiniteListOfSpaces = (props: Props) => { - const { totalSpaceCount, initialSpaceIds, filter, dateFilter, customFetcher } = props + const { totalSpaceCount, initialSpaceIds, filter, dateFilter, customFetcher, className } = props const client = useDfApolloClient() const dispatch = useDispatch() const { subsocial } = useSubsocialApi() @@ -94,6 +95,7 @@ const InfiniteListOfSpaces = (props: Props) => { const List = useCallback( () => ( { shuffledCreators = shuffle(spaceIds) return shuffledCreators } + return ( diff --git a/src/styles/subsocial-mobile.scss b/src/styles/subsocial-mobile.scss index becae1197..0bc8e18b6 100644 --- a/src/styles/subsocial-mobile.scss +++ b/src/styles/subsocial-mobile.scss @@ -243,9 +243,6 @@ margin-top: 0; font-size: $font_large; } - &.DfSegment { - padding-bottom: 0 !important; - } } .DfPostImagePreviewWrapper { diff --git a/src/styles/subsocial.scss b/src/styles/subsocial.scss index c119087eb..1232db046 100644 --- a/src/styles/subsocial.scss +++ b/src/styles/subsocial.scss @@ -534,6 +534,9 @@ a { // margin: $space_small 0; /* white-space: pre-wrap; */ } +.-mt-2 { + margin-top: -$space_small !important; +} .DfBookPage { @extend .DfBoxShadow; From 2a4be8b2901f2d295c85eb6d8777beb003727b29 Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Fri, 29 Dec 2023 22:07:12 +0700 Subject: [PATCH 05/15] style: change active staking banner colors --- .../creators/MobileIncreaseSubRewards.module.sass | 8 +++++++- src/components/creators/MobileIncreaseSubRewards.tsx | 9 ++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/creators/MobileIncreaseSubRewards.module.sass b/src/components/creators/MobileIncreaseSubRewards.module.sass index 3b2e23e93..cee1bd0bf 100644 --- a/src/components/creators/MobileIncreaseSubRewards.module.sass +++ b/src/components/creators/MobileIncreaseSubRewards.module.sass @@ -23,4 +23,10 @@ left: 75% border-radius: 50% width: 400px - height: 400px \ No newline at end of file + height: 400px + +.ActiveStakingBanner + background: #EDF4FF + + .Gradient + background: rgba(140, 180, 252, 0.18) diff --git a/src/components/creators/MobileIncreaseSubRewards.tsx b/src/components/creators/MobileIncreaseSubRewards.tsx index f7f486589..f16928898 100644 --- a/src/components/creators/MobileIncreaseSubRewards.tsx +++ b/src/components/creators/MobileIncreaseSubRewards.tsx @@ -20,7 +20,14 @@ export default function MobileIncreaseSubRewards(props: MobileIncreaseSubRewards if (!data?.hasStaked && space?.id) return null return ( -
+
{isActiveStakingBanner ? 'Active Staking' : 'Increase SUB rewards'} From 853a7dd82f9ad8e5b3fc0858713744e64c86154c Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Fri, 29 Dec 2023 22:14:41 +0700 Subject: [PATCH 06/15] fix: show mobile sub banner only in mobile --- src/components/main/HomePage.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/main/HomePage.tsx b/src/components/main/HomePage.tsx index 1970d0d0e..a889640e6 100644 --- a/src/components/main/HomePage.tsx +++ b/src/components/main/HomePage.tsx @@ -13,6 +13,7 @@ import { PostKind } from 'src/types/graphql-global-types' import { useIsSignedIn, useMyAddress } from '../auth/MyAccountsContext' import { CreatorDashboardHomeVariant } from '../creators/CreatorDashboardSidebar' import MobileIncreaseSubRewards from '../creators/MobileIncreaseSubRewards' +import { useIsMobileWidthOrDevice } from '../responsive' import { CreatorsSpaces } from '../spaces/LatestSpacesPage' import Section from '../utils/Section' import style from './HomePage.module.sass' @@ -169,13 +170,16 @@ const TabsHomePage = ({ const myAddress = useMyAddress() const { data } = useFetchTotalStake(myAddress ?? '') + const isMobile = useIsMobileWidthOrDevice() return ( <> - + {isMobile && ( + + )} From 9fcc533c6bf3dd3f78f52af6283100a4a5cb3078 Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Fri, 29 Dec 2023 22:15:12 +0700 Subject: [PATCH 07/15] fix: spacing issue in home page tab --- src/components/main/HomePageFilters.tsx | 4 ++-- src/styles/subsocial-mobile.scss | 3 --- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/main/HomePageFilters.tsx b/src/components/main/HomePageFilters.tsx index fcbc8f121..60feab5a2 100644 --- a/src/components/main/HomePageFilters.tsx +++ b/src/components/main/HomePageFilters.tsx @@ -86,7 +86,7 @@ export const SpaceFilterView = ({ filter: { type, date }, ...props }: SpaceFilte const onChangeWrap = (onChange: OnChangeFn) => (e: RadioChangeEvent) => onChange(e.target.value) export const Filters = (props: Props) => { - const { tabKey } = props + const { tabKey, isAffix } = props const { isMobile } = useResponsiveSize() const router = useRouter() @@ -106,7 +106,7 @@ export const Filters = (props: Props) => { if (!needDateFilter && !filterByKey[tabKey]?.length) return null return ( -
+
{!isMobile ? ( diff --git a/src/styles/subsocial-mobile.scss b/src/styles/subsocial-mobile.scss index 0bc8e18b6..71bad4519 100644 --- a/src/styles/subsocial-mobile.scss +++ b/src/styles/subsocial-mobile.scss @@ -28,9 +28,6 @@ .ant-tabs-content-holder { padding: 0 $space_normal; } - .DfHomeTab > .ant-tabs-nav { - margin-bottom: $space_normal; - } } .infinite-scroll-component { From 66fe800a6381300e75cd80f2d22eef9c147a3b78 Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Fri, 29 Dec 2023 22:15:26 +0700 Subject: [PATCH 08/15] fix: remove unnecessary margin --- src/components/spaces/LatestSpacesPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/spaces/LatestSpacesPage.tsx b/src/components/spaces/LatestSpacesPage.tsx index b94961878..def173998 100644 --- a/src/components/spaces/LatestSpacesPage.tsx +++ b/src/components/spaces/LatestSpacesPage.tsx @@ -141,7 +141,6 @@ export const CreatorsSpaces = () => { From a47977230c90e274499150697d46c2a3534d357a Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Fri, 29 Dec 2023 22:16:02 +0700 Subject: [PATCH 09/15] fix: creator sidebar rendered in server (causes flickering in mobile) --- src/components/main/PageWrapper.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/main/PageWrapper.tsx b/src/components/main/PageWrapper.tsx index cbec93e9e..cc5fc58ed 100644 --- a/src/components/main/PageWrapper.tsx +++ b/src/components/main/PageWrapper.tsx @@ -11,6 +11,7 @@ import CreatorDashboardSidebar, { } from '../creators/CreatorDashboardSidebar' import { useIsMobileWidthOrDevice } from '../responsive' import { fullUrl } from '../urls/helpers' +import { isServerSide } from '../utils' import Section from '../utils/Section' const { metaTags, canonicalUrl, appBaseUrl } = config @@ -121,12 +122,13 @@ export const PageContent: FC = ({ // const myAddress = useMyAddress() const isMobile = useIsMobileWidthOrDevice() + const shouldRenderMobileLayout = isMobile || isServerSide() // const isPanels = leftPanel || rightPanel return ( <> - {isMobile ? ( + {shouldRenderMobileLayout ? (
{children} {/* {showOnBoarding && } */} From eb783e85bc36105bfc164727dcf0c8e8ffd08d49 Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Fri, 29 Dec 2023 22:34:04 +0700 Subject: [PATCH 10/15] fix: issue for first render --- src/components/main/PageWrapper.tsx | 5 ++--- tsconfig.tsbuildinfo | 1 + 2 files changed, 3 insertions(+), 3 deletions(-) create mode 100644 tsconfig.tsbuildinfo diff --git a/src/components/main/PageWrapper.tsx b/src/components/main/PageWrapper.tsx index cc5fc58ed..6148171cd 100644 --- a/src/components/main/PageWrapper.tsx +++ b/src/components/main/PageWrapper.tsx @@ -122,13 +122,12 @@ export const PageContent: FC = ({ // const myAddress = useMyAddress() const isMobile = useIsMobileWidthOrDevice() - const shouldRenderMobileLayout = isMobile || isServerSide() // const isPanels = leftPanel || rightPanel return ( <> - {shouldRenderMobileLayout ? ( + {isMobile ? (
{children} {/* {showOnBoarding && } */} @@ -160,7 +159,7 @@ export const PageContent: FC = ({ {/* {isPanels &&
{rightPanel}
} */}
{rightPanel} - {rightPanel === undefined && creatorDashboardSidebarType && ( + {rightPanel === undefined && creatorDashboardSidebarType && !isServerSide() && (
Date: Fri, 29 Dec 2023 22:37:02 +0700 Subject: [PATCH 11/15] fix: add style to hide sidebar from css in mobile --- src/components/main/PageWrapper.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/main/PageWrapper.tsx b/src/components/main/PageWrapper.tsx index 6148171cd..87765088a 100644 --- a/src/components/main/PageWrapper.tsx +++ b/src/components/main/PageWrapper.tsx @@ -11,7 +11,6 @@ import CreatorDashboardSidebar, { } from '../creators/CreatorDashboardSidebar' import { useIsMobileWidthOrDevice } from '../responsive' import { fullUrl } from '../urls/helpers' -import { isServerSide } from '../utils' import Section from '../utils/Section' const { metaTags, canonicalUrl, appBaseUrl } = config @@ -159,7 +158,7 @@ export const PageContent: FC = ({ {/* {isPanels &&
{rightPanel}
} */}
{rightPanel} - {rightPanel === undefined && creatorDashboardSidebarType && !isServerSide() && ( + {rightPanel === undefined && creatorDashboardSidebarType && (
= ({ margin: -BOX_SHADOW_OFFSET, padding: BOX_SHADOW_OFFSET, }} - className='HideScrollbar' + className='HideScrollbar sm:hidden' > {/* setShowOnBoardingSidebar(false)} /> */} From bcce19eb0c5970c30e093e841f51590ff98b9a7d Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Fri, 29 Dec 2023 22:37:31 +0700 Subject: [PATCH 12/15] fix: add hidden style for mobile --- src/styles/subsocial.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/styles/subsocial.scss b/src/styles/subsocial.scss index 1232db046..98edfb90d 100644 --- a/src/styles/subsocial.scss +++ b/src/styles/subsocial.scss @@ -2171,3 +2171,9 @@ hr { .ant-form-item-explain { margin-top: 4px; } + +@media screen and (max-width: 768px) { + .sm:hidden { + display: none !important; + } +} From 8164fddeabe41037fc14961d204e909d14e837f6 Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Fri, 29 Dec 2023 22:40:33 +0700 Subject: [PATCH 13/15] fix: className with : not working --- src/components/main/PageWrapper.tsx | 2 +- src/styles/subsocial.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/main/PageWrapper.tsx b/src/components/main/PageWrapper.tsx index 87765088a..5c0ab5a58 100644 --- a/src/components/main/PageWrapper.tsx +++ b/src/components/main/PageWrapper.tsx @@ -170,7 +170,7 @@ export const PageContent: FC = ({ margin: -BOX_SHADOW_OFFSET, padding: BOX_SHADOW_OFFSET, }} - className='HideScrollbar sm:hidden' + className='HideScrollbar sm-hidden' > {/* setShowOnBoardingSidebar(false)} /> */} diff --git a/src/styles/subsocial.scss b/src/styles/subsocial.scss index 98edfb90d..1910bd160 100644 --- a/src/styles/subsocial.scss +++ b/src/styles/subsocial.scss @@ -2173,7 +2173,7 @@ hr { } @media screen and (max-width: 768px) { - .sm:hidden { + .sm-hidden { display: none !important; } } From b3016603a50b93cb552ec6e6c28044e76d29b9c6 Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Fri, 29 Dec 2023 22:53:12 +0700 Subject: [PATCH 14/15] fix: don't render active staking banner when its loading --- src/components/main/HomePage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/main/HomePage.tsx b/src/components/main/HomePage.tsx index a889640e6..6604e7728 100644 --- a/src/components/main/HomePage.tsx +++ b/src/components/main/HomePage.tsx @@ -169,12 +169,12 @@ const TabsHomePage = ({ }, [tab, type, date]) const myAddress = useMyAddress() - const { data } = useFetchTotalStake(myAddress ?? '') + const { data, loading } = useFetchTotalStake(myAddress ?? '') const isMobile = useIsMobileWidthOrDevice() return ( <> - {isMobile && ( + {isMobile && !loading && ( Date: Fri, 29 Dec 2023 23:12:15 +0700 Subject: [PATCH 15/15] feat: add tooltip to my stake question mark --- src/components/creators/cards/MyStakeCard.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/creators/cards/MyStakeCard.tsx b/src/components/creators/cards/MyStakeCard.tsx index 50ff10089..4dccc1dd2 100644 --- a/src/components/creators/cards/MyStakeCard.tsx +++ b/src/components/creators/cards/MyStakeCard.tsx @@ -1,5 +1,5 @@ import { SpaceData } from '@subsocial/api/types' -import { Button, Skeleton } from 'antd' +import { Button, Skeleton, Tooltip } from 'antd' import clsx from 'clsx' import Link from 'next/link' import { BsBoxArrowUpRight } from 'react-icons/bs' @@ -44,7 +44,9 @@ export default function MyStakeCard({ space }: MyStakeCardProps) {
My Stake - + + +
{loading ? (