MM-41890 Gekidou Long press post option - Reaction (#5978)

* added reaction option

* restructure files & folders

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>

app/screens/post_options/options/copy_permalink_option/index.tsx

@@ -4,7 +4,7 @@
 import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
 import withObservables from '@nozbe/with-observables';
 import {combineLatest, of as of$} from 'rxjs';
-import {switchMap} from 'rxjs/dist/types/operators';
+import {switchMap} from 'rxjs/operators';
 
 import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database';
 

app/screens/post_options/post_options.tsx

@@ -9,16 +9,16 @@ import {Screens} from '@constants';
 import BottomSheet from '@screens/bottom_sheet';
 import {isSystemMessage} from '@utils/post';
 
-import CopyLinkOption from './components/options/copy_permalink_option';
-import CopyTextOption from './components/options/copy_text_option';
-import DeletePostOption from './components/options/delete_post_option';
-import EditOption from './components/options/edit_option';
-import FollowThreadOption from './components/options/follow_option';
-import MarkAsUnreadOption from './components/options/mark_unread_option';
-import PinChannelOption from './components/options/pin_channel_option';
-import ReplyOption from './components/options/reply_option';
-import SaveOption from './components/options/save_option';
-import ReactionBar from './components/reaction_bar';
+import CopyLinkOption from './options/copy_permalink_option';
+import CopyTextOption from './options/copy_text_option';
+import DeletePostOption from './options/delete_post_option';
+import EditOption from './options/edit_option';
+import FollowThreadOption from './options/follow_option';
+import MarkAsUnreadOption from './options/mark_unread_option';
+import PinChannelOption from './options/pin_channel_option';
+import ReplyOption from './options/reply_option';
+import SaveOption from './options/save_option';
+import ReactionBar from './reaction_bar';
 
 import type PostModel from '@typings/database/models/servers/post';
 
@@ -66,7 +66,7 @@ const PostOptions = ({
     const renderContent = () => {
         return (
             <>
-                {canAddReaction && <ReactionBar/>}
+                {canAddReaction && <ReactionBar postId={post.id}/>}
                 {canReply && <ReplyOption/>}
                 {shouldRenderFollow &&
                     <FollowThreadOption

app/screens/post_options/reaction_bar/reaction_bar.tsx

@@ -5,6 +5,7 @@ import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
 import {useWindowDimensions, View} from 'react-native';
 
+import {addReaction} from '@actions/remote/reactions';
 import CompassIcon from '@components/compass_icon';
 import {Screens} from '@constants';
 import {
@@ -15,15 +16,17 @@ import {
     SMALL_ICON_BREAKPOINT,
     SMALL_ICON_SIZE,
 } from '@constants/reaction_picker';
+import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
 import {dismissBottomSheet, showModal} from '@screens/navigation';
 import {makeStyleSheetFromTheme} from '@utils/theme';
 
-import PickReaction from './components/pick_reaction';
-import Reaction from './components/reaction';
+import PickReaction from './pick_reaction';
+import Reaction from './reaction';
 
 type QuickReactionProps = {
     recentEmojis: string[];
+    postId: string;
 };
 
 const getStyleSheet = makeStyleSheetFromTheme((theme) => {
@@ -38,17 +41,18 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
     };
 });
 
-const ReactionBar = ({recentEmojis = []}: QuickReactionProps) => {
+const ReactionBar = ({recentEmojis = [], postId}: QuickReactionProps) => {
     const theme = useTheme();
     const intl = useIntl();
     const {width} = useWindowDimensions();
+    const serverUrl = useServerUrl();
     const isSmallDevice = width < SMALL_ICON_BREAKPOINT;
     const styles = getStyleSheet(theme);
 
     const handleEmojiPress = useCallback((emoji: string) => {
-        // eslint-disable-next-line no-console
-        console.log('>>>  selected this emoji', emoji);
-    }, []);
+        addReaction(serverUrl, postId, emoji);
+        dismissBottomSheet(Screens.POST_OPTIONS);
+    }, [postId, serverUrl]);
 
     const openEmojiPicker = useCallback(async () => {
         await dismissBottomSheet(Screens.POST_OPTIONS);