added two step quick reply popup

src/components/quickReplyModal/quickReplyModalStyles.ts

@@ -13,25 +13,51 @@ export default EStyleSheet.create({
   modalContainer: {
     padding: 12,
   },
-  modalHeader: {
-    justifyContent: 'center',
+
+  intialView: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
     alignItems: 'center',
   },
+  userAvatar: {
+    width: 50,
+    height: 50,
+    borderRadius: 50,
+  },
+  addCommentBtn: {
+    backgroundColor: '$primaryLightBackground',
+    flex: 1,
+    height: 50,
+    marginLeft: 8,
+    borderRadius: 8,
+    justifyContent: 'center',
+    paddingLeft: 12,
+  },
+  modalHeader: {},
+  titleBtnTxt: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '$primaryBlack',
+  },
+  inputContainer: {
+    paddingVertical: 16,
+  },
   textInput: {
     color: '$iconColor',
     fontSize: 16,
     flexGrow: 1,
     fontWeight: '500',
-    height: 40,
+    height: 100,
   },
-  inputContainer: {
+  footer: {
     flexDirection: 'row',
-    paddingVertical: 12,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
   },
   commentBtn: {
+    width: 100,
     height: 40,
-    justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: 12,
+    justifyContent: 'center',
   },
 });

src/components/quickReplyModal/quickReplyModalView.tsx

@@ -1,20 +1,31 @@
-import React, { useImperativeHandle, useRef, useState } from 'react';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import ActionSheet from 'react-native-actions-sheet';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import styles from './quickReplyModalStyles';
 import { forwardRef } from 'react';
 import { View, Text } from 'react-native';
 import { useIntl } from 'react-intl';
-import { TextButton, TextInput } from '..';
+import { MainButton, TextButton, TextInput, UserAvatar } from '..';
+import { useSelector } from 'react-redux';
 
 export interface QuickReplyModalProps {}
 
 const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
   const intl = useIntl();
+  const currentAccount = useSelector((state) => state.account.currentAccount);
+
   const [selectedPost, setSelectedPost] = useState(null);
   const [commentValue, setCommentValue] = useState('');
+  const [expand, setExpand] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const sheetModalRef = useRef<ActionSheet>();
 
+  // reset the state when post changes
+  useEffect(() => {
+    setExpand(false);
+    setCommentValue('');
+  }, [selectedPost]);
+
   //CALLBACK_METHODS
   useImperativeHandle(ref, () => ({
     show: (post: any) => {
@@ -26,11 +37,32 @@ const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
 
   //VIEW_RENDERERS
 
-  const _renderContent = () => {
+  const _renderInitialView = () => {
     return (
-      <View style={styles.modalContainer}>
+      <View style={styles.intialView}>
+        <UserAvatar username={currentAccount.name} disableSize style={styles.userAvatar} />
+        <TextButton
+          text={intl.formatMessage({
+            id: 'quick_reply.placeholder',
+          })}
+          onPress={() => setExpand(true)}
+          style={styles.addCommentBtn}
+          textStyle={styles.btnText}
+        />
+      </View>
+    );
+  };
+
+  const _renderFullView = () => {
+    return (
+      <View style={styles.fullView}>
         <View style={styles.modalHeader}>
-          <Text>{selectedPost.title}</Text>
+          <TextButton
+            text={selectedPost.title}
+            onPress={() => console.log('title pressed!')}
+            style={styles.titleBtn}
+            textStyle={styles.titleBtnTxt}
+          />
         </View>
         <View style={styles.inputContainer}>
           <TextInput
@@ -43,16 +75,28 @@ const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
             placeholderTextColor="#c1c5c7"
             autoCapitalize="none"
             style={styles.textInput}
-          />
-          <TextButton
-            text={intl.formatMessage({
-              id: 'quick_reply.comment',
-            })}
-            onPress={() => console.log('Comment!')}
-            style={styles.commentBtn}
-            textStyle={styles.btnText}
+            multiline={true}
+            numberOfLines={5}
           />
         </View>
+        <View style={styles.footer}>
+          <MainButton
+            style={styles.commentBtn}
+            onPress={() => console.log('comment pressed!')}
+            text={intl.formatMessage({
+              id: 'quick_reply.reply',
+            })}
+            isLoading={isLoading}
+          />
+        </View>
+      </View>
+    );
+  };
+  const _renderContent = () => {
+    return (
+      <View style={styles.modalContainer}>
+        {!expand && _renderInitialView()}
+        {expand && _renderFullView()}
       </View>
     );
   };

src/config/locales/en-US.json

@@ -709,7 +709,8 @@
     "year":"years"
   },
   "quick_reply":{
-    "placeholder":"Type your comment",
-    "comment": "Comment"
+    "placeholder":"Add a comment",
+    "comment": "Comment",
+    "reply": "Reply"
   }
 }