[TMA-556] Temporary Fix for Re-ordering Categories (#178)

* done

* moved icon placement and added correct asset

* new icons

* moved things around resolved a bug

* Deleting existing predefined moment categories

* Revert "Deleting existing predefined moment categories"

This reverts commit f5f4464b5392902208ec548de1c189f4639261a5.

* Hit backend

Co-authored-by: Shravya Ramesh <shravs1208@gmail.com>
Co-authored-by: Ashm Walia <ashmwalia@outlook.com>
Co-authored-by: Ashm Walia <40498934+ashmgarv@users.noreply.github.com>

2 files changed, 47 insertions, 3 deletions

diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 446bc07b..623e328d 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -12,6 +12,8 @@ import {Text} from 'react-native-animatable';
 import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
 import PlusIcon from '../../assets/icons/plus_icon-01.svg';
+import UpIcon from '../../assets/icons/up_icon.svg';
+import DownIcon from '../../assets/icons/down_icon.svg';
 import DeleteIcon from '../../assets/icons/delete-logo.svg';
 import BigPlusIcon from '../../assets/icons/plus_icon-02.svg';
 import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
@@ -19,6 +21,7 @@ import {SCREEN_WIDTH} from '../../utils';
 import ImagePicker from 'react-native-image-crop-picker';
 import MomentTile from './MomentTile';
 import {MomentType, ScreenType} from 'src/types';
+import {useDispatch} from 'react-redux';
 
 interface MomentProps {
   title: string;
@@ -27,6 +30,9 @@ interface MomentProps {
   screenType: ScreenType;
   handleMomentCategoryDelete: (_: string) => void;
   shouldAllowDeletion: boolean;
+  showUpButton: boolean;
+  showDownButton: boolean;
+  move?: (direction: 'up' | 'down', title: string) => void;
   externalStyles?: Record<string, StyleProp<ViewStyle>>;
 }
 
@@ -37,9 +43,13 @@ const Moment: React.FC<MomentProps> = ({
   screenType,
   handleMomentCategoryDelete,
   shouldAllowDeletion,
+  showUpButton,
+  showDownButton,
+  move,
   externalStyles,
 }) => {
   const navigation = useNavigation();
+  const dispatch = useDispatch();
 
   const navigateToImagePicker = () => {
     ImagePicker.openPicker({
@@ -71,12 +81,14 @@ const Moment: React.FC<MomentProps> = ({
         }
       });
   };
+
   return (
     <View style={[styles.container, externalStyles?.container]}>
       <View style={[styles.header, externalStyles?.header]}>
         <Text style={[styles.titleText, externalStyles?.titleText]}>
           {title}
         </Text>
+        <View style={styles.flexer} />
         {!userXId ? (
           <>
             <PlusIcon
@@ -86,6 +98,24 @@ const Moment: React.FC<MomentProps> = ({
               color={TAGG_TEXT_LIGHT_BLUE}
               style={{marginRight: 10}}
             />
+            {showUpButton && move && (
+              <UpIcon
+                width={19}
+                height={19}
+                onPress={() => move('up', title)}
+                color={TAGG_TEXT_LIGHT_BLUE}
+                style={{marginRight: 10}}
+              />
+            )}
+            {showDownButton && move && (
+              <DownIcon
+                width={19}
+                height={19}
+                onPress={() => move('down', title)}
+                color={TAGG_TEXT_LIGHT_BLUE}
+                style={{marginRight: 10}}
+              />
+            )}
             {shouldAllowDeletion && (
               <DeleteIcon
                 onPress={() => handleMomentCategoryDelete(title)}
@@ -146,9 +176,14 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: 'bold',
     color: TAGG_TEXT_LIGHT_BLUE,
+  },
+  // titleContainer: {
+  //   flex: 1,
+  //   flexDirection: 'row',
+  //   justifyContent: 'flex-end',
+  // },
+  flexer: {
     flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
   },
   scrollContainer: {
     height: SCREEN_WIDTH / 3.25,
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 227e6783..61a08d49 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -19,7 +19,7 @@ import {
   UserType,
 } from '../../types';
 import {COVER_HEIGHT, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
-import {fetchUserX, SCREEN_HEIGHT, userLogin} from '../../utils';
+import {fetchUserX, moveCategory, SCREEN_HEIGHT, userLogin} from '../../utils';
 import TaggsBar from '../taggs/TaggsBar';
 import {Moment} from '../moments';
 import ProfileBody from './ProfileBody';
@@ -142,6 +142,12 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
     createImagesMap();
   }, [createImagesMap]);
 
+  const move = (direction: 'up' | 'down', title: string) => {
+    let categories = [...momentCategories];
+    categories = moveCategory(categories, title, direction === 'up');
+    dispatch(updateMomentCategories(categories));
+  };
+
   /**
    * Prompt user to perform an activity based on their profile completion stage
    * To fire 2 seconds after the screen comes in focus
@@ -379,6 +385,9 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
                 screenType={screenType}
                 handleMomentCategoryDelete={handleCategoryDeletion}
                 shouldAllowDeletion={momentCategories.length > 1}
+                showUpButton={index !== 0}
+                showDownButton={index !== momentCategories.length - 1}
+                move={move}
               />
             ),
         )}