aboutsummaryrefslogtreecommitdiff
path: root/src/screens/onboarding
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens/onboarding')
-rw-r--r--src/screens/onboarding/CategorySelection.tsx348
-rw-r--r--src/screens/onboarding/CreateCustomCategory.tsx123
2 files changed, 0 insertions, 471 deletions
diff --git a/src/screens/onboarding/CategorySelection.tsx b/src/screens/onboarding/CategorySelection.tsx
deleted file mode 100644
index ab5ff3be..00000000
--- a/src/screens/onboarding/CategorySelection.tsx
+++ /dev/null
@@ -1,348 +0,0 @@
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useContext, useEffect, useState} from 'react';
-import {
- Alert,
- Platform,
- StatusBar,
- StyleSheet,
- Text,
- TouchableOpacity,
- View,
-} from 'react-native';
-import {ScrollView} from 'react-native-gesture-handler';
-import {useDispatch, useSelector} from 'react-redux';
-import {ChatContext} from '../../App';
-import PlusIcon from '../../assets/icons/plus_icon-01.svg';
-import {Background, MomentCategory} from '../../components';
-import {MOMENT_CATEGORIES} from '../../constants';
-import {ERROR_SOMETHING_WENT_WRONG} from '../../constants/strings';
-import {OnboardingStackParams} from '../../routes';
-import {postMomentCategories} from '../../services';
-import {
- updateIsOnboardedUser,
- updateMomentCategories,
-} from '../../store/actions/';
-import {RootState} from '../../store/rootReducer';
-import {BackgroundGradientType, CategorySelectionScreenType} from '../../types';
-import {getTokenOrLogout, SCREEN_WIDTH, userLogin} from '../../utils';
-
-type CategorySelectionRouteProps = RouteProp<
- OnboardingStackParams,
- 'CategorySelection'
->;
-
-type CategorySelectionNavigationProps = StackNavigationProp<
- OnboardingStackParams,
- 'CategorySelection'
->;
-
-interface CategorySelectionProps {
- route: CategorySelectionRouteProps;
- navigation: CategorySelectionNavigationProps;
-}
-
-const CategorySelection: React.FC<CategorySelectionProps> = ({
- route,
- navigation,
-}) => {
- /**
- * Same component to be used for category selection while onboarding and while on profile
- */
- const {screenType, user} = route.params;
- const {chatClient} = useContext(ChatContext);
- const isOnBoarding: boolean =
- screenType === CategorySelectionScreenType.Onboarding;
- const {userId, username} = user;
-
- // During onboarding this will fail and default to []
- const {momentCategories = []} = useSelector(
- (state: RootState) => state.momentCategories,
- );
-
- // Stores all the categories that will be saved to the store
- const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
-
- /**
- * Stores all the custom categories for the UI, allow easier logic for
- * unchecking a custom category.
- *
- * Each uncommited custom category should also have a copy in selectedCategories
- * since that's the final value that will be stored in the store.
- */
- const [uncommitedCustomCategories, setUncommitedCustomCategories] = useState<
- string[]
- >([]);
-
- const customCategories = momentCategories.filter(
- (mc) => !MOMENT_CATEGORIES.includes(mc),
- );
-
- const dispatch = useDispatch();
-
- useEffect(() => {
- const newCustomCategory = route.params.newCustomCategory;
- if (newCustomCategory) {
- setUncommitedCustomCategories([
- ...uncommitedCustomCategories,
- newCustomCategory,
- ]);
- selectedCategories.push(newCustomCategory);
- }
- }, [route.params?.newCustomCategory]);
-
- /**
- * Show the tutorial if a new user is OnBoarding
- */
- useEffect(() => {
- if (isOnBoarding) {
- navigation.navigate('TaggPopup', {
- popupProps: {
- messageHeader: 'Category And Moments',
- messageBody:
- 'Use pictures and videos to share \ndifferent aspects of you',
- next: undefined,
- },
- });
- }
- }, [isOnBoarding]);
-
- /**
- * Handle selection of a new category
- * case isAdded:
- * Return without doing anything
- * case isSelected:
- * Add to the selected categories
- * case not isSelected:
- * Remove from the selected categories
- */
- const onSelect = (
- category: string,
- isSelected: boolean,
- isAdded: boolean,
- ) => {
- if (isAdded) {
- return;
- }
- if (isSelected) {
- setSelectedCategories((prev) => [...prev, category]);
- } else {
- setSelectedCategories(
- selectedCategories.filter((item) => item !== category),
- );
- }
- };
-
- /**
- * Handle deselection of custom category.
- *
- * Custom categories is "added" and "selected" by CreateCustomCategory screen.
- * User can only "deselect" an uncommited custom category.
- *
- * case isAdded || isSelected:
- * Return without doing anything
- * default:
- * Remove from selected categories AND uncommitedCustomCategories
- */
- const onDeselectCustomCategory = (
- category: string,
- isSelected: boolean,
- isAdded: boolean,
- ) => {
- if (isAdded || isSelected) {
- return;
- }
- setSelectedCategories(
- selectedCategories.filter((item) => item !== category),
- );
- setUncommitedCustomCategories(
- uncommitedCustomCategories.filter((item) => item !== category),
- );
- };
-
- const handleButtonPress = async () => {
- if (momentCategories.length + selectedCategories.length === 0) {
- Alert.alert('Please select at least 1 category');
- return;
- }
- try {
- if (isOnBoarding) {
- dispatch(updateIsOnboardedUser(true));
- const token = await getTokenOrLogout(dispatch);
- await postMomentCategories(selectedCategories, token);
- userLogin(dispatch, {userId: userId, username: username});
- } else {
- dispatch(
- updateMomentCategories(
- momentCategories.concat(selectedCategories),
- true,
- ),
- );
- navigation.goBack();
- }
- } catch (error) {
- console.log(error);
- Alert.alert(ERROR_SOMETHING_WENT_WRONG);
- }
- };
-
- /**
- * Using a scroll view to accomodate dynamic category creation later on
- */
- return (
- <ScrollView bounces={false}>
- <Background
- style={styles.container}
- gradientType={BackgroundGradientType.Dark}>
- <StatusBar barStyle="light-content" />
- <Text style={styles.subtext}>Create Categories</Text>
- <View style={styles.container}>
- {!isOnBoarding && (
- <TouchableOpacity
- style={styles.createCategory}
- onPress={() => {
- navigation.push('CreateCustomCategory', {
- screenType,
- user,
- existingCategories: momentCategories.concat(
- selectedCategories,
- ),
- });
- }}>
- <PlusIcon width={30} height={30} color="white" />
- <Text style={styles.createCategoryLabel}>
- Create your own category
- </Text>
- </TouchableOpacity>
- )}
- <View style={styles.linkerContainer}>
- {/* commited custom categories */}
- {customCategories.map((category, index) => (
- <MomentCategory
- key={index}
- categoryType={category}
- isSelected={false}
- isAdded={true}
- onSelect={onDeselectCustomCategory}
- />
- ))}
- {/* uncommited custom categroies */}
- {uncommitedCustomCategories.map((category, index) => (
- <MomentCategory
- key={index}
- categoryType={category}
- isSelected={selectedCategories.includes(category)}
- isAdded={false}
- onSelect={onDeselectCustomCategory}
- />
- ))}
- {customCategories.length + uncommitedCustomCategories.length !==
- 0 && <View style={styles.divider} />}
- {MOMENT_CATEGORIES.map((category, index) => (
- <MomentCategory
- key={index}
- categoryType={category}
- isSelected={selectedCategories.includes(category)}
- isAdded={momentCategories.includes(category)}
- onSelect={onSelect}
- />
- ))}
- </View>
- <TouchableOpacity
- onPress={handleButtonPress}
- style={styles.finalAction}>
- <Text style={styles.finalActionLabel}>
- {isOnBoarding ? 'Login' : 'Create'}
- </Text>
- </TouchableOpacity>
- </View>
- </Background>
- </ScrollView>
- );
-};
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'space-around',
- marginBottom: '10%',
- },
- wizard: {
- ...Platform.select({
- ios: {
- top: 50,
- },
- android: {
- bottom: 40,
- },
- }),
- },
- linkerContainer: {
- flex: 1,
- flexDirection: 'row',
- flexWrap: 'wrap',
- justifyContent: 'center',
- alignContent: 'center',
- marginBottom: '10%',
- },
- header: {
- color: '#fff',
- fontSize: 22,
- fontWeight: '600',
- textAlign: 'center',
- marginBottom: '4%',
- },
- subtext: {
- color: '#fff',
- fontSize: 20,
- fontWeight: '600',
- textAlign: 'center',
- marginVertical: '8%',
- marginHorizontal: '10%',
- marginTop: '15%',
- },
- finalAction: {
- backgroundColor: 'white',
- justifyContent: 'center',
- alignItems: 'center',
- width: 150,
- height: 40,
- borderRadius: 5,
- borderWidth: 1,
- borderColor: 'white',
- marginBottom: '25%',
- },
- finalActionLabel: {
- fontSize: 16,
- fontWeight: '500',
- color: 'black',
- },
- createCategory: {
- backgroundColor: '#53329B',
- width: SCREEN_WIDTH * 0.9,
- height: 70,
- alignItems: 'center',
- justifyContent: 'center',
- borderRadius: 10,
- flexDirection: 'row',
- marginBottom: '5%',
- },
- createCategoryLabel: {
- color: 'white',
- marginLeft: '3%',
- fontSize: 18,
- fontWeight: '500',
- },
- plusIcon: {
- color: 'white',
- },
- divider: {
- borderColor: 'white',
- borderBottomWidth: 1,
- width: SCREEN_WIDTH * 0.9,
- marginVertical: '2%',
- },
-});
-
-export default CategorySelection;
diff --git a/src/screens/onboarding/CreateCustomCategory.tsx b/src/screens/onboarding/CreateCustomCategory.tsx
deleted file mode 100644
index eab72c7d..00000000
--- a/src/screens/onboarding/CreateCustomCategory.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useState} from 'react';
-import {
- Alert,
- KeyboardAvoidingView,
- StatusBar,
- StyleSheet,
- Text,
- TextInput,
- TouchableOpacity,
-} from 'react-native';
-import {Background} from '../../components';
-import {OnboardingStackParams} from '../../routes';
-import {BackgroundGradientType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-
-type CreateCustomCategoryRouteProps = RouteProp<
- OnboardingStackParams,
- 'CreateCustomCategory'
->;
-
-type CreateCustomCategoryNavigationProps = StackNavigationProp<
- OnboardingStackParams,
- 'CreateCustomCategory'
->;
-
-interface CreateCustomCategoryProps {
- route: CreateCustomCategoryRouteProps;
- navigation: CreateCustomCategoryNavigationProps;
-}
-
-const CreateCustomCategory: React.FC<CreateCustomCategoryProps> = ({
- route,
- navigation,
-}) => {
- /**
- * Same component to be used for category selection while onboarding and while on profile
- */
- const {existingCategories} = route.params;
- const [newCategory, setNewCategory] = useState('');
-
- const handleButtonPress = () => {
- if (existingCategories.includes(newCategory)) {
- Alert.alert('Looks like you already have that one created!');
- } else {
- navigation.navigate('CategorySelection', {
- screenType: route.params.screenType,
- user: route.params.user,
- newCustomCategory: newCategory,
- });
- }
- };
-
- return (
- <>
- <StatusBar barStyle="light-content" />
- <Background
- style={styles.container}
- gradientType={BackgroundGradientType.Dark}>
- <KeyboardAvoidingView
- style={styles.innerContainer}
- behavior={'padding'}>
- <Text style={styles.title}>Give your category a name</Text>
- <TextInput
- style={styles.input}
- selectionColor={'white'}
- onChangeText={setNewCategory}
- autoFocus={true}
- />
- <TouchableOpacity
- onPress={handleButtonPress}
- style={styles.finalAction}>
- <Text style={styles.finalActionLabel}>{'Create'}</Text>
- </TouchableOpacity>
- </KeyboardAvoidingView>
- </Background>
- </>
- );
-};
-
-const styles = StyleSheet.create({
- container: {
- alignItems: 'center',
- minHeight: SCREEN_HEIGHT,
- },
- innerContainer: {
- height: '40%',
- top: '20%',
- justifyContent: 'space-around',
- alignItems: 'center',
- },
- title: {
- color: 'white',
- fontSize: 20,
- fontWeight: '600',
- },
- input: {
- width: SCREEN_WIDTH * 0.75,
- fontSize: 30,
- color: 'white',
- textAlign: 'center',
- borderBottomWidth: 1,
- borderBottomColor: 'white',
- },
- finalAction: {
- backgroundColor: 'white',
- justifyContent: 'center',
- alignItems: 'center',
- width: 150,
- height: 40,
- borderRadius: 5,
- borderWidth: 1,
- borderColor: '#8F01FF',
- },
- finalActionLabel: {
- fontSize: 16,
- fontWeight: '500',
- color: 'black',
- },
-});
-
-export default CreateCustomCategory;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-22 02:39:27 +0000