aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/assets/icons/down_icon.svg1
-rw-r--r--src/assets/icons/up_icon.svg1
-rw-r--r--src/components/moments/Moment.tsx39
-rw-r--r--src/components/profile/Content.tsx11
-rw-r--r--src/utils/common.ts16
5 files changed, 65 insertions, 3 deletions
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 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 792"><defs><style>.cls-1{fill:#6c8dc8;}.cls-2{fill:none;stroke:#6c8dc8;stroke-miterlimit:10;stroke-width:47.9px;}</style></defs><path class="cls-1" d="M522.4,416.32l-18.18-16.86a13.07,13.07,0,0,0-18.47.68l-62.59,67.45V248.64a22,22,0,0,0-22-22h-8.21a22,22,0,0,0-22,22V470.19l-65-70.05a13.11,13.11,0,0,0-18.5-.68l-18.18,16.86a13.1,13.1,0,0,0-.68,18.51l96.51,104,20.39,22,1.52,1.4a14,14,0,0,0,2.52,1.84,14.37,14.37,0,0,0,2.85,1.17,2.18,2.18,0,0,0,.88.2,6.27,6.27,0,0,0,1.2.2,11.3,11.3,0,0,0,1.16.08H396a11.3,11.3,0,0,0,1.16-.08,6.68,6.68,0,0,0,1.29-.2,4.48,4.48,0,0,0,.92-.24c.48-.12.92-.32,1.4-.48l1-.49a13.55,13.55,0,0,0,2.84-2l1.53-1.4,20.42-22,96.48-104A13.11,13.11,0,0,0,522.4,416.32Z"/><circle class="cls-2" cx="395.82" cy="396.18" r="369.73"/></svg> \ 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 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 792"><defs><style>.cls-1{fill:#6c8dc8;}.cls-2{fill:none;stroke:#718cc2;stroke-miterlimit:10;stroke-width:47.9px;}</style></defs><path class="cls-1" d="M522.58,375.86l-18.19,16.86a13.06,13.06,0,0,1-18.46-.68l-62.6-67.45v219a22,22,0,0,1-22,22H393.1a22,22,0,0,1-22-22V322l-65,70.05a13.11,13.11,0,0,1-18.5.68l-18.19-16.86a13.12,13.12,0,0,1-.68-18.51l96.52-104,20.39-22,1.52-1.4a13.6,13.6,0,0,1,2.52-1.85,14.44,14.44,0,0,1,2.85-1.16,2.18,2.18,0,0,1,.88-.2,6.27,6.27,0,0,1,1.2-.2,11.3,11.3,0,0,1,1.16-.08h.44a11.3,11.3,0,0,1,1.16.08,6.58,6.58,0,0,1,1.28.2,4.48,4.48,0,0,1,.92.24c.48.12.93.32,1.41.48l1,.48a13.24,13.24,0,0,1,2.84,2l1.52,1.4,20.43,22,96.48,104A13.12,13.12,0,0,1,522.58,375.86Z"/><circle class="cls-2" cx="396" cy="396" r="369.73"/></svg> \ 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<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}
/>
),
)}
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') {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 15:40:10 +0000