From 17bc12abdddd080dc0b44c4990735675cf42be10 Mon Sep 17 00:00:00 2001
From: gregor <gregor.schulz@holi.social>
Date: Fri, 10 Jan 2025 13:33:18 +0100
Subject: [PATCH] consolidate layout of organize page
---
core/screens/spaces/discover/Spaces.tsx | 51 +++++++++----------
.../components/GetStartedView/index.tsx | 20 ++++----
.../components/GetStartedView/index.web.tsx | 24 ++++-----
.../spaces/discover/components/MySpaces.tsx | 19 +++----
.../ui/components/atoms/HoliContainer.tsx | 14 +++--
.../organisms/HoliTabs/index.web.tsx | 1 -
6 files changed, 60 insertions(+), 69 deletions(-)
diff --git a/core/screens/spaces/discover/Spaces.tsx b/core/screens/spaces/discover/Spaces.tsx
index 6663c9ae0c..37b9490a2c 100644
--- a/core/screens/spaces/discover/Spaces.tsx
+++ b/core/screens/spaces/discover/Spaces.tsx
@@ -2,13 +2,15 @@ import { type DocumentNode, useApolloClient, useQuery } from '@apollo/client'
import { withProfiler } from '@sentry/react'
import React, { useMemo, useRef } from 'react'
import { useTranslation } from 'react-i18next'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet } from 'react-native'
import type Animated from 'react-native-reanimated'
import { useLoggedInUser } from '@holi/core/auth/hooks/useLoggedInUser'
import HoliHead from '@holi/core/components/HoliHead'
+import { useThrottledMobileScrollEvents } from '@holi/core/components/ScrollHeaderLayout/useMobileScrollHandler'
import { useErrorHandling } from '@holi/core/errors/hooks'
import useIsomorphicLayoutEffect from '@holi/core/helpers/useIsomorphicLayoutEffect'
+import { ScrollViewRefreshable } from '@holi/core/helpers/withRefreshControl'
import CreateSpaceButton from '@holi/core/navigation/components/CreateSpaceButton'
import HeaderTitle from '@holi/core/navigation/components/HeaderTitle'
import NotificationAndSearchHeader from '@holi/core/navigation/components/header/NotificationAndSearchHeader'
@@ -25,8 +27,6 @@ import { HoliHorizontalRow } from '@holi/ui/components/molecules/HoliHorizontalR
import HoliLoader from '@holi/ui/components/molecules/HoliLoader'
import HoliTabs from '@holi/ui/components/organisms/HoliTabs'
import { type HoliTheme, useTheme } from '@holi/ui/styles/theme'
-import { ScrollViewRefreshable } from '@holi/core/helpers/withRefreshControl'
-import { useThrottledMobileScrollEvents } from '@holi/core/components/ScrollHeaderLayout/useMobileScrollHandler'
export enum Tab {
MINE = 'mine',
@@ -122,30 +122,27 @@ const Spaces = () => {
/* User has NO spaces => show discover view */
<GetStartedView />
) : (
- <View style={styles.tabsWrapper}>
- {/* User HAS spaces => show tabs with mine and discover */}
- <HoliTabs
- activeTab={activeTab}
- onChange={onChangeTab}
- backgroundColor={colors.background20}
- data={[
- {
- key: Tab.MINE,
- tabTitle: t('spaces.tabs.mine'),
- content: () => <MySpaces mySpaces={mySpaces} />,
- },
- {
- key: Tab.DISCOVER,
- tabTitle: t('spaces.tabs.getstarted'),
- content: () => <GetStartedView />,
- },
- ]}
- keyExtractor={({ key }) => key}
- renderTabContent={({ item }) => item.content()}
- testID="spaces-tab-navigation"
- marginHorizontal={0}
- />
- </View>
+ <HoliTabs
+ activeTab={activeTab}
+ onChange={onChangeTab}
+ backgroundColor={colors.background20}
+ marginHorizontal={0}
+ data={[
+ {
+ key: Tab.MINE,
+ tabTitle: t('spaces.tabs.mine'),
+ content: () => <MySpaces mySpaces={mySpaces} />,
+ },
+ {
+ key: Tab.DISCOVER,
+ tabTitle: t('spaces.tabs.getstarted'),
+ content: () => <GetStartedView />,
+ },
+ ]}
+ keyExtractor={({ key }) => key}
+ renderTabContent={({ item }) => item.content()}
+ testID="spaces-tab-navigation"
+ />
)}
</ScrollViewRefreshable>
</SpaceTermContextProvider>
diff --git a/core/screens/spaces/discover/components/GetStartedView/index.tsx b/core/screens/spaces/discover/components/GetStartedView/index.tsx
index 571c3dc38f..c197486a92 100644
--- a/core/screens/spaces/discover/components/GetStartedView/index.tsx
+++ b/core/screens/spaces/discover/components/GetStartedView/index.tsx
@@ -2,15 +2,16 @@ import type React from 'react'
import { useTranslation } from 'react-i18next'
import { View } from 'react-native'
-import HoliLocalImage from '@holi/ui/components/atoms/HoliLocalImage'
+import type { User } from '@holi/core/domain/shared/types'
import useAuthRequiredNavigation from '@holi/core/navigation/hooks/useAuthRequiredNavigation'
-import { Button } from 'holi-bricks/components/button'
+import useRouting from '@holi/core/navigation/hooks/useRouting'
+import HoliContainer from '@holi/ui/components/atoms/HoliContainer'
+import HoliLocalImage from '@holi/ui/components/atoms/HoliLocalImage'
import Spacing from '@holi/ui/foundations/Spacing'
+import { Button } from 'holi-bricks/components/button'
import { Text } from 'holi-bricks/components/text'
-import { BorderRadius } from 'holi-bricks/tokens'
-import useRouting from '@holi/core/navigation/hooks/useRouting'
-import type { User } from '@holi/core/domain/shared/types'
import { useStyles } from 'holi-bricks/hooks'
+import { BorderRadius } from 'holi-bricks/tokens'
import { createStyleSheet } from 'holi-bricks/utils'
interface GetStartedViewProps {
@@ -24,7 +25,7 @@ const GetStartedView: React.FC<GetStartedViewProps> = () => {
const { styles } = useStyles(stylesheet)
return (
- <View testID="spaces-container" style={styles.container}>
+ <HoliContainer testID="spaces-container" gap={Spacing.md} noPadding={true}>
<View style={styles.description}>
<View style={styles.text} testID="get-started-view-header">
<Text headingLevel="2" size="3xl">
@@ -129,18 +130,15 @@ const GetStartedView: React.FC<GetStartedViewProps> = () => {
/>
</View>
</View>
- </View>
+ </HoliContainer>
)
}
const stylesheet = createStyleSheet((theme) => ({
- container: {
- paddingTop: Spacing.md,
- gap: Spacing.md,
- },
description: {
gap: Spacing.xs,
paddingHorizontal: Spacing.xs,
+ paddingTop: Spacing.md,
},
text: {
gap: Spacing['4xs'],
diff --git a/core/screens/spaces/discover/components/GetStartedView/index.web.tsx b/core/screens/spaces/discover/components/GetStartedView/index.web.tsx
index 943fd5d0f3..23ac51ae26 100644
--- a/core/screens/spaces/discover/components/GetStartedView/index.web.tsx
+++ b/core/screens/spaces/discover/components/GetStartedView/index.web.tsx
@@ -2,18 +2,19 @@ import type React from 'react'
import { useTranslation } from 'react-i18next'
import { View } from 'react-native'
+import type { User } from '@holi/core/domain/shared/types'
import { useClientWindowDimensions } from '@holi/core/helpers/useClientWindowDimensions'
-import HoliLocalImage from '@holi/ui/components/atoms/HoliLocalImage'
import useAuthRequiredNavigation from '@holi/core/navigation/hooks/useAuthRequiredNavigation'
-import { Button } from 'holi-bricks/components/button'
+import useRouting from '@holi/core/navigation/hooks/useRouting'
+import HoliContainer from '@holi/ui/components/atoms/HoliContainer'
+import HoliLocalImage from '@holi/ui/components/atoms/HoliLocalImage'
import Spacing from '@holi/ui/foundations/Spacing'
+import { Button } from 'holi-bricks/components/button'
import { Text } from 'holi-bricks/components/text'
-import { BorderRadius } from 'holi-bricks/tokens'
-import useRouting from '@holi/core/navigation/hooks/useRouting'
-import type { User } from '@holi/core/domain/shared/types'
-import { createStyleSheet } from 'holi-bricks/utils'
import { useStyles } from 'holi-bricks/hooks'
+import { BorderRadius } from 'holi-bricks/tokens'
import { breakpoints } from 'holi-bricks/tokens'
+import { createStyleSheet } from 'holi-bricks/utils'
interface GetStartedViewProps {
user?: User
@@ -35,7 +36,7 @@ const GetStartedView: React.FC<GetStartedViewProps> = () => {
}
return (
- <View testID="spaces-container" style={styles.container}>
+ <HoliContainer testID="spaces-container" gap={Spacing.md} noPaddingOnSmallViewports={true}>
<View style={styles.description(screenWidth)}>
<View style={styles.text} testID="get-started-view-header">
<Text headingLevel="2" size="3xl">
@@ -144,19 +145,16 @@ const GetStartedView: React.FC<GetStartedViewProps> = () => {
/>
</View>
</View>
- </View>
+ </HoliContainer>
)
}
const stylesheet = createStyleSheet((theme) => ({
- container: {
- paddingTop: Spacing.md,
- gap: Spacing.md,
- },
description: (screenWidth: number) => {
return {
gap: Spacing.xs,
- paddingHorizontal: screenWidth < breakpoints.md ? Spacing.xs : 0,
+ paddingHorizontal: screenWidth < breakpoints.sm ? Spacing.xs : 0,
+ paddingTop: Spacing.md,
}
},
text: {
diff --git a/core/screens/spaces/discover/components/MySpaces.tsx b/core/screens/spaces/discover/components/MySpaces.tsx
index 6b77b4830e..7664270ba1 100644
--- a/core/screens/spaces/discover/components/MySpaces.tsx
+++ b/core/screens/spaces/discover/components/MySpaces.tsx
@@ -1,22 +1,20 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
-import { Platform, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
+import { StyleSheet, View } from 'react-native'
import SpaceMineTile from '@holi/core/screens/spaces/discover/components/SpaceMineTile'
import type { SpaceSection } from '@holi/core/screens/spaces/types'
-import { Spacing } from 'holi-bricks/tokens'
+import HoliContainer from '@holi/ui/components/atoms/HoliContainer'
import { Text } from 'holi-bricks/components/text'
+import { Spacing } from 'holi-bricks/tokens'
export type MySpacesProps = {
mySpaces: SpaceSection[]
- style?: StyleProp<ViewStyle>
}
-const MySpaces = ({ mySpaces = [], style }: MySpacesProps) => {
+const MySpaces = ({ mySpaces = [] }: MySpacesProps) => {
const { t } = useTranslation()
- // FIXME: this will be very expensive when spaces start growing.
- // If we need a better API this should be changed on the backend.
const mappedSpaces = mySpaces.map((section) => ({
title: t(`spaces.tabs.mine.${section.type.toLowerCase()}`),
type: section.type,
@@ -24,7 +22,7 @@ const MySpaces = ({ mySpaces = [], style }: MySpacesProps) => {
}))
return (
- <View style={[styles.container, style]}>
+ <HoliContainer>
{mappedSpaces.map((section, sectionIndex) => (
<View key={`${sectionIndex}`} style={styles.section}>
<View testID={`section-headline-${section.type}`}>
@@ -42,18 +40,13 @@ const MySpaces = ({ mySpaces = [], style }: MySpacesProps) => {
))}
</View>
))}
- </View>
+ </HoliContainer>
)
}
export default MySpaces
const styles = StyleSheet.create({
- container: {
- flex: 1,
- paddingBottom: Spacing.md,
- paddingHorizontal: Platform.OS !== 'web' ? Spacing.xs : 0,
- },
section: {
marginTop: Spacing.md,
},
diff --git a/packages/ui/components/atoms/HoliContainer.tsx b/packages/ui/components/atoms/HoliContainer.tsx
index fd0f5c3180..e3d52a0b5c 100644
--- a/packages/ui/components/atoms/HoliContainer.tsx
+++ b/packages/ui/components/atoms/HoliContainer.tsx
@@ -13,6 +13,7 @@ export interface ContainerProps {
flexWrap?: FlexStyle['flexWrap']
flexDirection?: FlexStyle['flexDirection']
noPadding?: boolean
+ noPaddingOnSmallViewports?: boolean
testID?: string
}
@@ -25,9 +26,13 @@ const HoliContainer = ({
alignItems = 'stretch',
justifyContent = 'flex-start',
noPadding,
+ noPaddingOnSmallViewports,
testID = 'holi-container',
}: PropsWithChildren<ContainerProps>) => {
- const { styles, ids } = useMemo(() => getStyles(noPadding), [noPadding])
+ const { styles, ids } = useMemo(
+ () => getStyles(noPadding, noPaddingOnSmallViewports),
+ [noPadding, noPaddingOnSmallViewports]
+ )
return (
<View
@@ -63,14 +68,15 @@ const buildContainerFlexStyle = (
return sheet.styles.container
}
-const getStyles = (noPadding?: boolean) => {
+const getStyles = (noPadding?: boolean, noPaddingOnSmallViewports?: boolean) => {
const horizontalPadding = noPadding
? {
/* none – fill container */
}
: {
- paddingLeft: Spacing.xs,
- paddingRight: Spacing.xs,
+ ...(noPaddingOnSmallViewports
+ ? { paddingLeft: 0, paddingRight: 0 }
+ : { paddingLeft: Spacing.xs, paddingRight: Spacing.xs }),
[`@media (min-width: ${dimensions.breakpointS}px)`]: {
paddingRight: Spacing.lg,
diff --git a/packages/ui/components/organisms/HoliTabs/index.web.tsx b/packages/ui/components/organisms/HoliTabs/index.web.tsx
index d4c228c053..d868b6ff9d 100644
--- a/packages/ui/components/organisms/HoliTabs/index.web.tsx
+++ b/packages/ui/components/organisms/HoliTabs/index.web.tsx
@@ -97,7 +97,6 @@ const HoliTabs = <D extends HoliTabItem>({
renderItem={renderTabContent}
tabsId={testID}
testID={`${testID}-content-list`}
- marginHorizontal={marginHorizontal}
/>
)}
</HoliContainer>
--
GitLab