From 06cea95ec9463f1c010187973f401a68cce7b68d Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 13 Jan 2021 02:59:52 -0500 Subject: [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 Co-authored-by: Ashm Walia Co-authored-by: Ashm Walia <40498934+ashmgarv@users.noreply.github.com> --- src/assets/icons/down_icon.svg | 1 + src/assets/icons/up_icon.svg | 1 + src/components/moments/Moment.tsx | 39 ++++++++++++++++++++++++++++++++++++-- src/components/profile/Content.tsx | 11 ++++++++++- src/utils/common.ts | 16 ++++++++++++++++ 5 files changed, 65 insertions(+), 3 deletions(-) create mode 100644 src/assets/icons/down_icon.svg create mode 100644 src/assets/icons/up_icon.svg (limited to 'src') diff --git a/src/assets/icons/down_icon.svg b/src/assets/icons/down_icon.svg new file mode 100644 index 00000000..1c3ed71a --- /dev/null +++ b/src/assets/icons/down_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/up_icon.svg b/src/assets/icons/up_icon.svg new file mode 100644 index 00000000..20773a8a --- /dev/null +++ b/src/assets/icons/up_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file 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>; } @@ -37,9 +43,13 @@ const Moment: React.FC = ({ 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 = ({ } }); }; + return ( {title} + {!userXId ? ( <> = ({ color={TAGG_TEXT_LIGHT_BLUE} style={{marginRight: 10}} /> + {showUpButton && move && ( + move('up', title)} + color={TAGG_TEXT_LIGHT_BLUE} + style={{marginRight: 10}} + /> + )} + {showDownButton && move && ( + move('down', title)} + color={TAGG_TEXT_LIGHT_BLUE} + style={{marginRight: 10}} + /> + )} {shouldAllowDeletion && ( 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 = ({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 = ({y, userXId, screenType}) => { screenType={screenType} handleMomentCategoryDelete={handleCategoryDeletion} shouldAllowDeletion={momentCategories.length > 1} + showUpButton={index !== 0} + showDownButton={index !== momentCategories.length - 1} + move={move} /> ), )} diff --git a/src/utils/common.ts b/src/utils/common.ts index f13181c1..dbe8f270 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -48,6 +48,22 @@ export const getDateAge: ( } }; +export const moveCategory: ( + categories: string[], + category: string, + moveUp: boolean, +) => string[] = (categories, category, moveUp) => { + const i = categories.indexOf(category); + const swapTarget = moveUp ? i - 1 : i + 1; + if ((moveUp && i === 0) || (!moveUp && i > categories.length)) { + return categories; + } + const tmp = categories[i]; + categories[i] = categories[swapTarget]; + categories[swapTarget] = tmp; + return categories; +}; + export const checkImageUploadStatus = (statusMap: object) => { for (let [key, value] of Object.entries(statusMap)) { if (value != 'Success') { -- cgit v1.2.3-70-g09d2