From 8bc8dcc094cd21daec639ff8db5ebb08dc5fe92f Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 30 Aug 2023 16:13:09 -0700
Subject: Simplify the RecommendedFeeds with breakpoint components

---
 src/view/com/auth/onboarding/RecommendedFeeds.tsx  | 187 +++++++++++++++++++--
 .../auth/onboarding/RecommendedFeedsDesktop.tsx    |  92 ----------
 .../com/auth/onboarding/RecommendedFeedsMobile.tsx |  66 --------
 .../com/auth/onboarding/RecommendedFeedsTablet.tsx |  91 ----------
 src/view/com/util/layouts/Breakpoints.tsx          |   8 +
 src/view/com/util/layouts/Breakpoints.web.tsx      |  20 +++
 6 files changed, 204 insertions(+), 260 deletions(-)
 delete mode 100644 src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx
 delete mode 100644 src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx
 delete mode 100644 src/view/com/auth/onboarding/RecommendedFeedsTablet.tsx
 create mode 100644 src/view/com/util/layouts/Breakpoints.tsx
 create mode 100644 src/view/com/util/layouts/Breakpoints.web.tsx

(limited to 'src')

diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
index 12c984e71..28dc2cdd0 100644
--- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
@@ -1,11 +1,176 @@
-import 'react'
-import {withBreakpoints} from 'view/com/util/layouts/withBreakpoints'
-import {RecommendedFeedsDesktop} from './RecommendedFeedsDesktop'
-import {RecommendedFeedsTablet} from './RecommendedFeedsTablet'
-import {RecommendedFeedsMobile} from './RecommendedFeedsMobile'
-
-export const RecommendedFeeds = withBreakpoints(
-  RecommendedFeedsMobile,
-  RecommendedFeedsTablet,
-  RecommendedFeedsDesktop,
-)
+import React from 'react'
+import {FlatList, StyleSheet, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {TabletOrDesktop, Mobile} from 'view/com/util/layouts/Breakpoints'
+import {Text} from 'view/com/util/text/Text'
+import {ViewHeader} from 'view/com/util/ViewHeader'
+import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
+import {Button} from 'view/com/util/forms/Button'
+import {RecommendedFeedsItem} from './RecommendedFeedsItem'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {usePalette} from 'lib/hooks/usePalette'
+import {RECOMMENDED_FEEDS} from 'lib/constants'
+
+type Props = {
+  next: () => void
+}
+export const RecommendedFeeds = observer(({next}: Props) => {
+  const pal = usePalette('default')
+  const {isTabletOrMobile} = useWebMediaQueries()
+
+  const title = (
+    <>
+      <Text
+        style={[
+          pal.textLight,
+          tdStyles.title1,
+          isTabletOrMobile && tdStyles.title1Small,
+        ]}>
+        Choose your
+      </Text>
+      <Text
+        style={[
+          pal.link,
+          tdStyles.title2,
+          isTabletOrMobile && tdStyles.title2Small,
+        ]}>
+        Recomended
+      </Text>
+      <Text
+        style={[
+          pal.link,
+          tdStyles.title2,
+          isTabletOrMobile && tdStyles.title2Small,
+        ]}>
+        Feeds
+      </Text>
+      <Text type="2xl-medium" style={[pal.textLight, tdStyles.description]}>
+        Feeds are created by users to curate content. Choose some feeds that you
+        find interesting.
+      </Text>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'flex-end',
+          marginTop: 20,
+        }}>
+        <Button onPress={next} testID="continueBtn">
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              paddingLeft: 2,
+              gap: 6,
+            }}>
+            <Text
+              type="2xl-medium"
+              style={{color: '#fff', position: 'relative', top: -1}}>
+              Done
+            </Text>
+            <FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
+          </View>
+        </Button>
+      </View>
+    </>
+  )
+
+  return (
+    <>
+      <TabletOrDesktop>
+        <TitleColumnLayout
+          testID="recommendedFeedsScreen"
+          title={title}
+          horizontal
+          titleStyle={isTabletOrMobile ? undefined : {minWidth: 470}}
+          contentStyle={{paddingHorizontal: 0}}>
+          <FlatList
+            data={RECOMMENDED_FEEDS}
+            renderItem={({item}) => <RecommendedFeedsItem {...item} />}
+            keyExtractor={item => item.did + item.rkey}
+            style={{flex: 1}}
+          />
+        </TitleColumnLayout>
+      </TabletOrDesktop>
+      <Mobile>
+        <View style={[mStyles.container]} testID="recommendedFeedsScreen">
+          <ViewHeader
+            title="Recommended Feeds"
+            showBackButton={false}
+            showOnDesktop
+          />
+          <Text type="lg-medium" style={[pal.text, mStyles.header]}>
+            Check out some recommended feeds. Tap + to add them to your list of
+            pinned feeds.
+          </Text>
+
+          <FlatList
+            data={RECOMMENDED_FEEDS}
+            renderItem={({item}) => <RecommendedFeedsItem {...item} />}
+            keyExtractor={item => item.did + item.rkey}
+            style={{flex: 1}}
+          />
+
+          <Button
+            onPress={next}
+            label="Continue"
+            testID="continueBtn"
+            style={mStyles.button}
+            labelStyle={mStyles.buttonText}
+          />
+        </View>
+      </Mobile>
+    </>
+  )
+})
+
+const tdStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginHorizontal: 16,
+    justifyContent: 'space-between',
+  },
+  title1: {
+    fontSize: 36,
+    fontWeight: '800',
+    textAlign: 'right',
+  },
+  title1Small: {
+    fontSize: 24,
+  },
+  title2: {
+    fontSize: 58,
+    fontWeight: '800',
+    textAlign: 'right',
+  },
+  title2Small: {
+    fontSize: 36,
+  },
+  description: {
+    maxWidth: 400,
+    marginTop: 10,
+    marginLeft: 'auto',
+    textAlign: 'right',
+  },
+})
+
+const mStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  header: {
+    marginBottom: 16,
+    marginHorizontal: 16,
+  },
+  button: {
+    marginBottom: 16,
+    marginHorizontal: 16,
+    marginTop: 16,
+  },
+  buttonText: {
+    textAlign: 'center',
+    fontSize: 18,
+    paddingVertical: 4,
+  },
+})
diff --git a/src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx b/src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx
deleted file mode 100644
index 937313bc6..000000000
--- a/src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react'
-import {FlatList, StyleSheet, View} from 'react-native'
-import {observer} from 'mobx-react-lite'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {Text} from 'view/com/util/text/Text'
-import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
-import {Button} from 'view/com/util/forms/Button'
-import {RecommendedFeedsItem} from './RecommendedFeedsItem'
-import {usePalette} from 'lib/hooks/usePalette'
-import {RECOMMENDED_FEEDS} from 'lib/constants'
-
-type Props = {
-  next: () => void
-}
-export const RecommendedFeedsDesktop = observer(({next}: Props) => {
-  const pal = usePalette('default')
-
-  const title = (
-    <>
-      <Text style={[pal.textLight, styles.title1]}>Choose your</Text>
-      <Text style={[pal.link, styles.title2]}>Recomended</Text>
-      <Text style={[pal.link, styles.title2]}>Feeds</Text>
-      <Text type="2xl-medium" style={[pal.textLight, styles.description]}>
-        Feeds are created by users to curate content. Choose some feeds that you
-        find interesting.
-      </Text>
-      <View
-        style={{
-          flexDirection: 'row',
-          justifyContent: 'flex-end',
-          marginTop: 20,
-        }}>
-        <Button onPress={next} testID="continueBtn">
-          <View
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              paddingLeft: 2,
-              gap: 6,
-            }}>
-            <Text
-              type="2xl-medium"
-              style={{color: '#fff', position: 'relative', top: -1}}>
-              Done
-            </Text>
-            <FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
-          </View>
-        </Button>
-      </View>
-    </>
-  )
-
-  return (
-    <TitleColumnLayout
-      testID="recommendedFeedsScreen"
-      title={title}
-      horizontal
-      titleStyle={{minWidth: 470}}
-      contentStyle={{paddingHorizontal: 0}}>
-      <FlatList
-        data={RECOMMENDED_FEEDS}
-        renderItem={({item}) => <RecommendedFeedsItem {...item} />}
-        keyExtractor={item => item.did + item.rkey}
-        style={{flex: 1}}
-      />
-    </TitleColumnLayout>
-  )
-})
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginHorizontal: 16,
-    justifyContent: 'space-between',
-  },
-  title1: {
-    fontSize: 36,
-    fontWeight: '800',
-    textAlign: 'right',
-  },
-  title2: {
-    fontSize: 58,
-    fontWeight: '800',
-    textAlign: 'right',
-  },
-  description: {
-    maxWidth: 400,
-    marginTop: 10,
-    marginLeft: 'auto',
-    textAlign: 'right',
-  },
-})
diff --git a/src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx b/src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx
deleted file mode 100644
index a3e379883..000000000
--- a/src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react'
-import {FlatList, StyleSheet, View} from 'react-native'
-import {observer} from 'mobx-react-lite'
-import {Text} from 'view/com/util/text/Text'
-import {Button} from 'view/com/util/forms/Button'
-import {ViewHeader} from 'view/com/util/ViewHeader'
-import {RecommendedFeedsItem} from './RecommendedFeedsItem'
-import {usePalette} from 'lib/hooks/usePalette'
-import {RECOMMENDED_FEEDS} from 'lib/constants'
-
-type Props = {
-  next: () => void
-}
-export const RecommendedFeedsMobile = observer(({next}: Props) => {
-  const pal = usePalette('default')
-
-  return (
-    <View style={[styles.container]} testID="recommendedFeedsScreen">
-      <ViewHeader
-        title="Recommended Feeds"
-        showBackButton={false}
-        showOnDesktop
-      />
-      <Text type="lg-medium" style={[pal.text, styles.header]}>
-        Check out some recommended feeds. Tap + to add them to your list of
-        pinned feeds.
-      </Text>
-
-      <FlatList
-        data={RECOMMENDED_FEEDS}
-        renderItem={({item}) => <RecommendedFeedsItem {...item} />}
-        keyExtractor={item => item.did + item.rkey}
-        style={{flex: 1}}
-      />
-
-      <Button
-        onPress={next}
-        label="Continue"
-        testID="continueBtn"
-        style={styles.button}
-        labelStyle={styles.buttonText}
-      />
-    </View>
-  )
-})
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-  header: {
-    marginBottom: 16,
-    marginHorizontal: 16,
-  },
-  button: {
-    marginBottom: 16,
-    marginHorizontal: 16,
-    marginTop: 16,
-  },
-  buttonText: {
-    textAlign: 'center',
-    fontSize: 18,
-    paddingVertical: 4,
-  },
-})
diff --git a/src/view/com/auth/onboarding/RecommendedFeedsTablet.tsx b/src/view/com/auth/onboarding/RecommendedFeedsTablet.tsx
deleted file mode 100644
index bc2e57ade..000000000
--- a/src/view/com/auth/onboarding/RecommendedFeedsTablet.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from 'react'
-import {FlatList, StyleSheet, View} from 'react-native'
-import {observer} from 'mobx-react-lite'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {Text} from 'view/com/util/text/Text'
-import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
-import {Button} from 'view/com/util/forms/Button'
-import {RecommendedFeedsItem} from './RecommendedFeedsItem'
-import {usePalette} from 'lib/hooks/usePalette'
-import {RECOMMENDED_FEEDS} from 'lib/constants'
-
-type Props = {
-  next: () => void
-}
-export const RecommendedFeedsTablet = observer(({next}: Props) => {
-  const pal = usePalette('default')
-
-  const title = (
-    <>
-      <Text style={[pal.textLight, styles.title1]}>Choose your</Text>
-      <Text style={[pal.link, styles.title2]}>Recomended</Text>
-      <Text style={[pal.link, styles.title2]}>Feeds</Text>
-      <Text type="2xl-medium" style={[pal.textLight, styles.description]}>
-        Feeds are created by users to curate content. Choose some feeds that you
-        find interesting.
-      </Text>
-      <View
-        style={{
-          flexDirection: 'row',
-          justifyContent: 'flex-end',
-          marginTop: 20,
-        }}>
-        <Button onPress={next} testID="continueBtn">
-          <View
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              paddingLeft: 2,
-              gap: 6,
-            }}>
-            <Text
-              type="2xl-medium"
-              style={{color: '#fff', position: 'relative', top: -1}}>
-              Done
-            </Text>
-            <FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
-          </View>
-        </Button>
-      </View>
-    </>
-  )
-
-  return (
-    <TitleColumnLayout
-      testID="recommendedFeedsScreen"
-      title={title}
-      horizontal
-      contentStyle={{paddingHorizontal: 0}}>
-      <FlatList
-        data={RECOMMENDED_FEEDS}
-        renderItem={({item}) => <RecommendedFeedsItem {...item} />}
-        keyExtractor={item => item.did + item.rkey}
-        style={{flex: 1}}
-      />
-    </TitleColumnLayout>
-  )
-})
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginHorizontal: 16,
-    justifyContent: 'space-between',
-  },
-  title1: {
-    fontSize: 24,
-    fontWeight: '800',
-    textAlign: 'right',
-  },
-  title2: {
-    fontSize: 36,
-    fontWeight: '800',
-    textAlign: 'right',
-  },
-  description: {
-    maxWidth: 400,
-    marginTop: 10,
-    marginLeft: 'auto',
-    textAlign: 'right',
-  },
-})
diff --git a/src/view/com/util/layouts/Breakpoints.tsx b/src/view/com/util/layouts/Breakpoints.tsx
new file mode 100644
index 000000000..51c3ccd5a
--- /dev/null
+++ b/src/view/com/util/layouts/Breakpoints.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+
+export const Desktop = ({}: React.PropsWithChildren<{}>) => null
+export const TabletOrDesktop = ({}: React.PropsWithChildren<{}>) => null
+export const Tablet = ({}: React.PropsWithChildren<{}>) => null
+export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) =>
+  children
+export const Mobile = ({children}: React.PropsWithChildren<{}>) => children
diff --git a/src/view/com/util/layouts/Breakpoints.web.tsx b/src/view/com/util/layouts/Breakpoints.web.tsx
new file mode 100644
index 000000000..7031a1735
--- /dev/null
+++ b/src/view/com/util/layouts/Breakpoints.web.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import MediaQuery from 'react-responsive'
+
+export const Desktop = ({children}: React.PropsWithChildren<{}>) => (
+  <MediaQuery minWidth={1224}>{children}</MediaQuery>
+)
+export const TabletOrDesktop = ({children}: React.PropsWithChildren<{}>) => (
+  <MediaQuery minWidth={800}>{children}</MediaQuery>
+)
+export const Tablet = ({children}: React.PropsWithChildren<{}>) => (
+  <MediaQuery minWidth={800} maxWidth={1224}>
+    {children}
+  </MediaQuery>
+)
+export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => (
+  <MediaQuery maxWidth={1224}>{children}</MediaQuery>
+)
+export const Mobile = ({children}: React.PropsWithChildren<{}>) => (
+  <MediaQuery maxWidth={800}>{children}</MediaQuery>
+)
-- 
cgit 1.4.1