resolves language-transfer#20

12ya · Oct 20, 2023 · fbe2758 · fbe2758
1 parent 9c0e624
commit fbe2758
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 60 deletions.
diff --git a/js/components/LanguageHome/AdditionalButton.react.tsx b/js/components/LanguageHome/AdditionalButton.react.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+
+import {Icon} from 'react-native-elements';
+import {TouchableNativeFeedback} from 'react-native-gesture-handler';
+
+interface Props {
+  onPress: () => void;
+  title: string;
+  icon: string;
+  useForeground: boolean;
+}
+
+export const AdditionalButton = ({
+  title,
+  onPress,
+  icon,
+  useForeground,
+}: Props) => {
+  return (
+    <View style={styles.additionalButton}>
+      <TouchableNativeFeedback onPress={onPress} useForeground={useForeground}>
+        <View style={styles.additionalButtonInner}>
+          <Text style={styles.additionalButtonText}>{title}</Text>
+          <Icon name={icon} type="font-awesome-5" />
+        </View>
+      </TouchableNativeFeedback>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  additionalButton: {
+    marginHorizontal: 25,
+    marginBottom: 25,
+    borderRadius: 10,
+    backgroundColor: 'white',
+    overflow: 'hidden',
+    elevation: 1,
+  },
+  additionalButtonInner: {
+    padding: 25,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  additionalButtonText: {
+    fontSize: 20,
+    maxWidth: '90%',
+  },
+});
diff --git a/js/components/LanguageHome/LanguageHome.react.tsx b/js/components/LanguageHome/LanguageHome.react.tsx
@@ -11,7 +11,8 @@ import LanguageHomeTopButton from './LanguageHomeTopButton.react';
 import CourseData from '../../course-data';
 import {log} from '../../metrics';
 import useStatusBarStyle from '../../hooks/useStatusBarStyle';
-import { MainNavigationProp } from '../App.react';
+import {MainNavigationProp} from '../App.react';
+import {AdditionalButton} from './AdditionalButton.react';
 
 const donationLinksNotAllowedBecauseGooglePlayIsAStinkyPooPoo = true;
 let metadataWarningTimeout: NodeJS.Timeout | null = null;
@@ -85,68 +86,65 @@ const LanguageHomeBody = ({route}: {route: any}) => {
     <View style={styles.body}>
       <ScrollView>
         <LanguageHomeTopButton course={course} />
-
-        <View style={styles.additionalButton}>
-          <TouchableNativeFeedback
-            onPress={() => navigate('All Lessons', {course})}
-            useForeground={true}>
-            <View style={styles.additionalButtonInner}>
-              <Text style={styles.additionalButtonText}>All Lessons</Text>
-              <Icon name="list-ol" type="font-awesome-5" />
-            </View>
-          </TouchableNativeFeedback>
-        </View>
-
-        <View style={styles.additionalButton}>
-          <TouchableNativeFeedback
-            onPress={() => navigate('Data Management', {course})}
-            useForeground={true}>
-            <View style={styles.additionalButtonInner}>
-              <Text style={styles.additionalButtonText}>Data Management</Text>
-              <Icon name="tools" type="font-awesome-5" />
-            </View>
-          </TouchableNativeFeedback>
-        </View>
+        <AdditionalButton
+          title="All lessons"
+          onPress={() => navigate('All Lessons', {course})}
+          icon="list-ol"
+          useForeground
+        />
+
+        <AdditionalButton
+          title="Data Management"
+          onPress={() => navigate('Data Management', {course})}
+          icon="tools"
+          useForeground
+        />
 
         {donationLinksNotAllowedBecauseGooglePlayIsAStinkyPooPoo ? (
-          <View style={styles.additionalButton}>
-            <TouchableNativeFeedback
-              onPress={() => {
-                log({
-                  action: 'visit_website',
-                  surface: 'language_home',
-                });
-                Linking.openURL('https://www.languagetransfer.org/');
-              }}
-              useForeground={true}>
-              <View style={styles.additionalButtonInner}>
-                <Text style={styles.additionalButtonText}>
-                  Visit languagetransfer.org
-                </Text>
-                <Icon name="link" type="font-awesome-5" />
-              </View>
-            </TouchableNativeFeedback>
-          </View>
+          <AdditionalButton
+            title="Visit languagetransfer.org"
+            onPress={() => {
+              log({
+                action: 'visit_website',
+                surface: 'language_home',
+              });
+              Linking.openURL('https://www.languagetransfer.org/');
+            }}
+            icon="link"
+            useForeground
+          />
         ) : (
-          <View style={styles.additionalButton}>
-            <TouchableNativeFeedback
-              onPress={() => {
-                log({
-                  action: 'open_patreon',
-                  surface: 'language_home',
-                  course,
-                });
-                Linking.openURL('https://www.patreon.com/languagetransfer');
-              }}
-              useForeground={true}>
-              <View style={styles.additionalButtonInner}>
-                <Text style={styles.additionalButtonText}>
-                  Support Language Transfer
-                </Text>
-                <Icon name="patreon" type="font-awesome-5" />
-              </View>
-            </TouchableNativeFeedback>
-          </View>
+          //   <View style={styles.additionalButton}>
+          //     <TouchableNativeFeedback
+          //       onPress={() => {
+          //         log({
+          //           action: 'visit_website',
+          //           surface: 'language_home',
+          //         });
+          //         Linking.openURL('https://www.languagetransfer.org/');
+          //       }}
+          //       useForeground={true}>
+          //       <View style={styles.additionalButtonInner}>
+          //         <Text style={styles.additionalButtonText}>
+          //           Visit languagetransfer.org
+          //         </Text>
+          //         <Icon name="link" type="font-awesome-5" />
+          //       </View>
+          //     </TouchableNativeFeedback>
+          //   </View>
+          <AdditionalButton
+            title="Support Language Transfer"
+            onPress={() => {
+              log({
+                action: 'open_patreon',
+                surface: 'language_home',
+                course,
+              });
+              Linking.openURL('https://www.patreon.com/languagetransfer');
+            }}
+            icon="patreon"
+            useForeground
+          />
         )}
       </ScrollView>
     </View>