added basic quick reply modal

src/components/index.js

@@ -92,6 +92,7 @@ import { CustomiseFiltersModal } from './customiseFiltersModal';
 import { ForegroundNotification } from './foregroundNotification';
 import { PostHtmlRenderer } from './postHtmlRenderer';
 import { QuickProfileModal } from './organisms';
+import QuickReplyModal from './quickReplyModal/quickReplyModalView';
 
 // Basic UI Elements
 import {
@@ -232,4 +233,5 @@ export {
   ForegroundNotification,
   PostHtmlRenderer,
   QuickProfileModal,
+  QuickReplyModal,
 };

src/components/postCard/container/postCardContainer.js

@@ -29,6 +29,7 @@ const PostCardContainer = ({
   imageHeight,
   setImageHeight,
   pageType,
+  showQuickReplyModal,
 }) => {
   const dispatch = useAppDispatch();
 
@@ -124,6 +125,9 @@ const PostCardContainer = ({
     setIsMuted(false);
   };
 
+  const _handleQuickReplyModal = () => {
+    showQuickReplyModal(content);
+  };
   return (
     <PostCardView
       handleOnUserPress={_handleOnUserPress}
@@ -140,6 +144,7 @@ const PostCardContainer = ({
       setImageHeight={setImageHeight}
       isMuted={isMuted}
       fetchPost={_fetchPost}
+      showQuickReplyModal={_handleQuickReplyModal}
     />
   );
 };

src/components/postCard/view/postCardView.js

@@ -32,6 +32,7 @@ const PostCardView = ({
   handleOnVotersPress,
   handleOnReblogsPress,
   handleOnUnmutePress,
+  showQuickReplyModal,
   content,
   reblogs,
   isHideImage,
@@ -201,6 +202,7 @@ const PostCardView = ({
             iconType="MaterialCommunityIcons"
             isClickable
             text={get(content, 'children', 0)}
+            onPress={showQuickReplyModal}
           />
         </View>
       </View>

src/components/postsList/container/postsListContainer.tsx

@@ -17,6 +17,7 @@ interface postsListContainerProps extends FlatListProps<any> {
     isLoading:boolean;
     isRefreshing:boolean;
     pageType:'main'|'profile'|'ownProfile'|'community';
+    showQuickReplyModal:(post:any)=>void;
 }
 
 let _onEndReachedCalledDuringMomentum = true;
@@ -28,6 +29,7 @@ const postsListContainer = ({
     isRefreshing,
     isLoading,
     pageType,
+    showQuickReplyModal,
     ...props
 }:postsListContainerProps, ref) => {
    
@@ -124,6 +126,7 @@ const postsListContainer = ({
                   imageHeight={imgHeight}
                   setImageHeight = {_setImageHeightInMap}
                   pageType={pageType}
+                  showQuickReplyModal={showQuickReplyModal}
                 />,
               );
             }
@@ -142,6 +145,7 @@ const postsListContainer = ({
               imageHeight={imgHeight}
               setImageHeight = {_setImageHeightInMap}
               pageType={pageType}
+              showQuickReplyModal={showQuickReplyModal}
             />,
           );
         }

src/components/quickReplyModal/quickReplyModalStyles.ts

@@ -0,0 +1,37 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  sheetContent: {
+    backgroundColor: '$primaryBackgroundColor',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 999,
+  },
+
+  modalContainer: {
+    padding: 12,
+  },
+  modalHeader: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textInput: {
+    color: '$iconColor',
+    fontSize: 16,
+    flexGrow: 1,
+    fontWeight: '500',
+    height: 40,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    paddingVertical: 12,
+  },
+  commentBtn: {
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+  },
+});

src/components/quickReplyModal/quickReplyModalView.tsx

@@ -0,0 +1,73 @@
+import React, { 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 '..';
+
+export interface QuickReplyModalProps {}
+
+const QuickReplyModal = ({}: QuickReplyModalProps, ref) => {
+  const intl = useIntl();
+  const [selectedPost, setSelectedPost] = useState(null);
+  const [commentValue, setCommentValue] = useState('');
+  const sheetModalRef = useRef<ActionSheet>();
+
+  //CALLBACK_METHODS
+  useImperativeHandle(ref, () => ({
+    show: (post: any) => {
+      console.log('Showing action modal');
+      setSelectedPost(post);
+      sheetModalRef.current?.setModalVisible(true);
+    },
+  }));
+
+  //VIEW_RENDERERS
+
+  const _renderContent = () => {
+    return (
+      <View style={styles.modalContainer}>
+        <View style={styles.modalHeader}>
+          <Text>{selectedPost.title}</Text>
+        </View>
+        <View style={styles.inputContainer}>
+          <TextInput
+            onChangeText={setCommentValue}
+            value={commentValue}
+            autoFocus
+            placeholder={intl.formatMessage({
+              id: 'quick_reply.placeholder',
+            })}
+            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}
+          />
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <ActionSheet
+      ref={sheetModalRef}
+      gestureEnabled={false}
+      hideUnderlay
+      containerStyle={styles.sheetContent}
+      indicatorColor={EStyleSheet.value('$primaryWhiteLightBackground')}
+    >
+      {selectedPost && _renderContent()}
+    </ActionSheet>
+  );
+};
+
+export default forwardRef(QuickReplyModal);

src/components/tabbedPosts/view/tabContent.tsx

@@ -10,6 +10,7 @@ import { AppState, NativeScrollEvent, NativeSyntheticEvent } from 'react-native'
 import { PostsListRef } from '../../postsList/container/postsListContainer';
 import ScrollTopPopup from './scrollTopPopup';
 import { debounce } from 'lodash';
+import { QuickReplyModal } from '../..';
 
 const DEFAULT_TAB_META = {
     startAuthor:'',
@@ -62,6 +63,7 @@ const TabContent = ({
   const appState = useRef(AppState.currentState);
   const postsRef = useRef(posts);
   const sessionUserRef = useRef(sessionUser);
+  const quickReplyModalRef = useRef(null)
 
   //init state refs;
   postsRef.current = posts;
@@ -313,6 +315,12 @@ const TabContent = ({
     }
   };
 
+  // show quick reply modal
+  const _showQuickReplyModal = (post:any) => {
+    console.log('post: ', post);
+    
+    quickReplyModalRef.current.show(post)
+  }
 
   return (
 
@@ -334,6 +342,7 @@ const TabContent = ({
       isLoading={tabMeta.isLoading}
       ListEmptyComponent={_renderEmptyContent}
       pageType={pageType}
+      showQuickReplyModal={_showQuickReplyModal}
     />
     <ScrollTopPopup 
       popupAvatars={latestPosts.map(post=>post.avatar || '')}
@@ -344,6 +353,7 @@ const TabContent = ({
         setEnableScrollTop(false);
       }}
     />
+    <QuickReplyModal ref={quickReplyModalRef} />
   </>
   );
 };

src/config/locales/en-US.json

@@ -707,5 +707,9 @@
     "day":"days",
     "month":"months",
     "year":"years"
+  },
+  "quick_reply":{
+    "placeholder":"Type your comment",
+    "comment": "Comment"
   }
 }