From 2c2921af0fc075482aa1a7d2064d24c4999497ca Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 8 Jul 2021 16:23:49 -0400
Subject: Remove moment post button, Update to use square button

---
 src/components/common/TaggSquareButton.tsx  | 17 +++++---
 src/components/moments/MomentPostButton.tsx | 49 -----------------------
 src/components/moments/index.ts             |  1 -
 src/screens/profile/CaptionScreen.tsx       | 61 ++++++++++++++++++++++-------
 4 files changed, 58 insertions(+), 70 deletions(-)
 delete mode 100644 src/components/moments/MomentPostButton.tsx

(limited to 'src')

diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
index 1a1c33b3..2447276d 100644
--- a/src/components/common/TaggSquareButton.tsx
+++ b/src/components/common/TaggSquareButton.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import {
   GestureResponderEvent,
+  StyleProp,
   StyleSheet,
   Text,
   TextStyle,
   TouchableOpacity,
-  ViewProps,
+  TouchableOpacityProps,
   ViewStyle,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
@@ -15,14 +16,15 @@ import {
   TAGG_PURPLE,
 } from '../../constants';
 import {normalize, SCREEN_WIDTH} from '../../utils';
-interface TaggSquareButtonProps extends ViewProps {
+
+interface TaggSquareButtonProps extends TouchableOpacityProps {
   onPress: (event: GestureResponderEvent) => void;
   title: string;
   buttonStyle: 'normal' | 'large' | 'gradient';
   buttonColor: 'purple' | 'white' | 'blue';
   labelColor: 'white' | 'blue';
-  style?: ViewStyle;
-  labelStyle?: TextStyle;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
 }
 
 const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
@@ -50,6 +52,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
     case 'large':
       return (
         <TouchableOpacity
+          {...props}
           onPress={props.onPress}
           style={[styles.largeButton, buttonColor, props.style]}>
           <Text style={[styles.largeLabel, labelColor, props.labelStyle]}>
@@ -59,7 +62,10 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
       );
     case 'gradient':
       return (
-        <TouchableOpacity onPress={props.onPress} style={props.style}>
+        <TouchableOpacity
+          {...props}
+          onPress={props.onPress}
+          style={props.style}>
           <LinearGradient
             style={styles.gradientButton}
             colors={BACKGROUND_GRADIENT_MAP[0]}
@@ -75,6 +81,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
     default:
       return (
         <TouchableOpacity
+          {...props}
           onPress={props.onPress}
           style={[styles.normalButton, buttonColor, props.style]}>
           <Text style={[styles.normalLabel, labelColor, props.labelStyle]}>
diff --git a/src/components/moments/MomentPostButton.tsx b/src/components/moments/MomentPostButton.tsx
deleted file mode 100644
index 78fe209b..00000000
--- a/src/components/moments/MomentPostButton.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import {Text} from 'react-native-animatable';
-import {TouchableOpacity} from 'react-native-gesture-handler';
-import {TAGG_LIGHT_BLUE} from '../../constants';
-import {normalize, SCREEN_WIDTH} from '../../utils';
-
-interface MomentPostButtonProps {
-  enabled: boolean;
-  onPress: () => void;
-}
-
-const MomentPostButton: React.FC<MomentPostButtonProps> = ({
-  enabled,
-  onPress,
-}) => {
-  return (
-    <TouchableOpacity
-      style={[styles.button, enabled ? {} : styles.grey]}
-      onPress={onPress}
-      disabled={!enabled}>
-      <Text style={styles.text}>Post</Text>
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    width: SCREEN_WIDTH * 0.8,
-    height: normalize(37),
-    backgroundColor: TAGG_LIGHT_BLUE,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 6,
-    alignSelf: 'center',
-  },
-  grey: {
-    backgroundColor: '#C4C4C4',
-  },
-  text: {
-    color: 'white',
-    fontWeight: 'bold',
-    fontSize: normalize(15),
-    lineHeight: 18,
-    letterSpacing: 2,
-  },
-});
-
-export default MomentPostButton;
diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts
index d2f5d150..cac2da2e 100644
--- a/src/components/moments/index.ts
+++ b/src/components/moments/index.ts
@@ -3,4 +3,3 @@ export {default as CaptionScreenHeader} from './CaptionScreenHeader';
 export {default as Moment} from './Moment';
 export {default as TagFriendsFooter} from './TagFriendsFoooter';
 export {default as MomentPost} from './MomentPost';
-export {default as MomentPostButton} from './MomentPostButton';
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 86628d16..86e30bdc 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -22,10 +22,11 @@ import {
   MentionInputControlled,
   MomentPostButton,
   SearchBackground,
+  TaggSquareButton,
 } from '../../components';
 import {CaptionScreenHeader} from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
-import {TAGG_LIGHT_BLUE_2} from '../../constants';
+import {TAGG_LIGHT_BLUE, TAGG_LIGHT_BLUE_2} from '../../constants';
 import {
   ERROR_NO_MOMENT_CATEGORY,
   ERROR_SOMETHING_WENT_WRONG_REFRESH,
@@ -46,7 +47,7 @@ import {
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {MomentTagType} from '../../types';
-import {normalize, StatusBarHeight} from '../../utils';
+import {normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
 /**
@@ -268,12 +269,6 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 buttonStyle={styles.button}
                 onPress={() => navigation.goBack()}
               />
-              <Button
-                title={moment ? 'Done' : 'Share'}
-                titleStyle={styles.shareButtonTitle}
-                buttonStyle={styles.button}
-                onPress={moment ? handleDoneEditing : handleShare}
-              />
             </View>
             <CaptionScreenHeader style={styles.header} title={'Moments'} />
             <View style={styles.captionContainer}>
@@ -292,7 +287,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               )}
               <MentionInputControlled
                 style={styles.text}
-                containerStyle={styles.textContainer}
+                containerStyle={styles.flex}
                 placeholder="Write something....."
                 placeholderTextColor="white"
                 value={caption}
@@ -318,7 +313,28 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 })
               }
             />
-            <MomentPostButton enabled={true} onPress={() => null} />
+            {momentCategory ? (
+              <TaggSquareButton
+                onPress={moment ? handleDoneEditing : handleShare}
+                title={'Post'}
+                buttonStyle={'large'}
+                buttonColor={'blue'}
+                labelColor={'white'}
+                style={styles.postButton}
+                labelStyle={styles.postText}
+              />
+            ) : (
+              <TaggSquareButton
+                disabled={true}
+                onPress={moment ? handleDoneEditing : handleShare}
+                title={'Post'}
+                buttonStyle={'large'}
+                buttonColor={'blue'}
+                labelColor={'white'}
+                style={[styles.postButton, styles.greyBackground]}
+                labelStyle={styles.postText}
+              />
+            )}
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>
@@ -364,12 +380,8 @@ const styles = StyleSheet.create({
     fontSize: normalize(12),
     lineHeight: 14,
     fontWeight: '500',
-  },
-  textContainer: {
-    flex: 1,
     height: normalize(150),
     marginLeft: normalize(15),
-    color: 'white',
   },
   flex: {
     flex: 1,
@@ -386,7 +398,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginBottom: normalize(20),
+    marginBottom: normalize(42),
   },
   asteriskText: {
     color: TAGG_LIGHT_BLUE_2,
@@ -413,6 +425,25 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
   },
+  greyBackground: {
+    backgroundColor: '#C4C4C4',
+  },
+  postButton: {
+    width: SCREEN_WIDTH * 0.8,
+    height: normalize(37),
+    backgroundColor: TAGG_LIGHT_BLUE,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 6,
+    alignSelf: 'center',
+  },
+  postText: {
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: normalize(15),
+    lineHeight: 18,
+    letterSpacing: 2,
+  },
 });
 
 export default CaptionScreen;
-- 
cgit v1.2.3-70-g09d2