aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/onboarding/MomentCategory.tsx89
-rw-r--r--src/utils/moments.ts84
2 files changed, 90 insertions, 83 deletions
diff --git a/src/components/onboarding/MomentCategory.tsx b/src/components/onboarding/MomentCategory.tsx
index 97099b9e..eb9d5bcc 100644
--- a/src/components/onboarding/MomentCategory.tsx
+++ b/src/components/onboarding/MomentCategory.tsx
@@ -3,11 +3,12 @@ import {StyleSheet} from 'react-native';
import {Image, Text} from 'react-native-animatable';
import {TouchableOpacity} from 'react-native-gesture-handler';
import LinearGradient from 'react-native-linear-gradient';
+import {BACKGROUND_GRADIENT_MAP} from '../../constants';
import {
- BACKGROUND_GRADIENT_MAP,
- MOMENT_CATEGORY_BG_COLORS,
-} from '../../constants';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+ getMomentCategoryIconInfo,
+ SCREEN_HEIGHT,
+ SCREEN_WIDTH,
+} from '../../utils';
type MomentCategoryProps = {
categoryType: string;
@@ -22,85 +23,7 @@ const MomentCategory: React.FC<MomentCategoryProps> = ({
isAdded,
onSelect,
}) => {
- var icon, bgColor;
-
- /**
- * Choose icon and color based on category type
- */
- switch (categoryType) {
- case 'Friends':
- icon = require('../../assets/moment-categories/friends-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[0];
- break;
- case 'Adventure':
- icon = require('../../assets/moment-categories/adventure-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[1];
- break;
- case 'Photo Dump':
- icon = require('../../assets/moment-categories/photo-dump-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[2];
- break;
- case 'Food':
- icon = require('../../assets/moment-categories/food-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[3];
- break;
- case 'Music':
- icon = require('../../assets/moment-categories/music-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[4];
- break;
- case 'Art':
- icon = require('../../assets/moment-categories/art-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[5];
- break;
- case 'Sports':
- icon = require('../../assets/moment-categories/sports-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[6];
- break;
- case 'Fashion':
- icon = require('../../assets/moment-categories/fashion-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[7];
- break;
- case 'Travel':
- icon = require('../../assets/moment-categories/travel-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[8];
- break;
- case 'Pets':
- icon = require('../../assets/moment-categories/pets-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[9];
- break;
- case 'Fitness':
- icon = require('../../assets/moment-categories/fitness-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[10];
- break;
- case 'DIY':
- icon = require('../../assets/moment-categories/diy-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[11];
- break;
- case 'Nature':
- icon = require('../../assets/moment-categories/nature-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[12];
- break;
- case 'Early Life':
- icon = require('../../assets/moment-categories/early-life-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[13];
- break;
- case 'Beauty':
- icon = require('../../assets/moment-categories/beauty-icon.png');
- bgColor = MOMENT_CATEGORY_BG_COLORS[14];
- break;
- default:
- // All custom categories
- icon = require('../../assets/moment-categories/custom-icon.png');
- // A quick deterministic "random" color picker by summing up ascii char codees
- const charCodeSum = categoryType
- .split('')
- .reduce((acc: number, x: string) => acc + x.charCodeAt(0), 0);
- bgColor =
- MOMENT_CATEGORY_BG_COLORS[
- charCodeSum % MOMENT_CATEGORY_BG_COLORS.length
- ];
- break;
- }
+ const {icon, bgColor} = getMomentCategoryIconInfo(categoryType);
/**
* The Linear Gradient helps us add a gradient border when the category is already added /selected by user
diff --git a/src/utils/moments.ts b/src/utils/moments.ts
index 9e8cc332..2b924b1b 100644
--- a/src/utils/moments.ts
+++ b/src/utils/moments.ts
@@ -1,4 +1,6 @@
import moment from 'moment';
+import {ImageSourcePropType} from 'react-native';
+import {MOMENT_CATEGORY_BG_COLORS} from '../constants';
/**
* Formats elapsed time from a given time.
@@ -71,3 +73,85 @@ export const getTimeInShorthand = (date_time: string) => {
}
return time;
};
+
+export const getMomentCategoryIconInfo = (category: string) => {
+ let icon: ImageSourcePropType, bgColor: string;
+ switch (category) {
+ case 'Friends':
+ icon = require('../../assets/moment-categories/friends-icon.png');
+ bgColor = MOMENT_CATEGORY_BG_COLORS[0];
+ break;
+ case 'Adventure':
+ icon = require('../../assets/moment-categories/adventure-icon.png');
+ bgColor = MOMENT_CATEGORY_BG_COLORS[1];
+ break;
+ case 'Photo Dump':
+ icon = require('../../assets/moment-categories/photo-dump-icon.png');
+ bgColor = MOMENT_CATEGORY_BG_COLORS[2];
+ break;
+ case 'Food':
+ icon = require('../../assets/moment-categories/food-icon.png');
+ bgColor = MOMENT_CATEGORY_BG_COLORS[3];
+ break;
+ case 'Music':
+ icon = require('../../assets/moment-categories/music-icon.png');
+ bgColor = MOMENT_CATEGORY_BG_COLORS[4];
+ break;
+ case 'Art':
+ icon = require('../../assets/moment-categories/art-icon.png');
+ bgColor = MOMENT_CATEGORY_BG_COLORS[5];
+ break;
+ case 'Sports':
+ icon = require('../../assets/moment-categories/sports-icon.png');
+ bgColor = MOMENT_CATEGORY_BG_COLORS[6];
+ break;
+ case 'Fashion':
+ icon = require('../../assets/moment-categories/fashion-icon.png');
+ bgColor = MOMENT_CATEGORY_BG_COLORS[7];
+ break;
+ case 'Travel':
+ icon = require('../../assets/moment-categories/travel-icon.png');
+ bgColor = MOMENT_CATEGORY_BG_COLORS[8];
+ break;
+ case 'Pets':
+ icon = require('../../assets/moment-categories/pets-icon.png');
+ bgColor = MOMENT_CATEGORY_BG_COLORS[9];
+ break;
+ case 'Fitness':
+ icon = require('../../assets/moment-categories/fitness-icon.png');
+ bgColor = MOMENT_CATEGORY_BG_COLORS[10];
+ break;
+ case 'DIY':
+ icon = require('../../assets/moment-categories/diy-icon.png');
+ bgColor = MOMENT_CATEGORY_BG_COLORS[11];
+ break;
+ case 'Nature':
+ icon = require('../../assets/moment-categories/nature-icon.png');
+ bgColor = MOMENT_CATEGORY_BG_COLORS[12];
+ break;
+ case 'Early Life':
+ icon = require('../../assets/moment-categories/early-life-icon.png');
+ bgColor = MOMENT_CATEGORY_BG_COLORS[13];
+ break;
+ case 'Beauty':
+ icon = require('../../assets/moment-categories/beauty-icon.png');
+ bgColor = MOMENT_CATEGORY_BG_COLORS[14];
+ break;
+ default:
+ // All custom categories
+ icon = require('../../assets/moment-categories/custom-icon.png');
+ // A quick deterministic "random" color picker by summing up ascii char codees
+ const charCodeSum = category
+ .split('')
+ .reduce((acc: number, x: string) => acc + x.charCodeAt(0), 0);
+ bgColor =
+ MOMENT_CATEGORY_BG_COLORS[
+ charCodeSum % MOMENT_CATEGORY_BG_COLORS.length
+ ];
+ break;
+ }
+ return {
+ icon,
+ bgColor,
+ };
+};
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 12:21:05 +0000