From 2c2921af0fc075482aa1a7d2064d24c4999497ca Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 8 Jul 2021 16:23:49 -0400 Subject: Remove moment post button, Update to use square button --- src/components/common/TaggSquareButton.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) (limited to 'src/components/common/TaggSquareButton.tsx') diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx index 1a1c33b3..2447276d 100644 --- a/src/components/common/TaggSquareButton.tsx +++ b/src/components/common/TaggSquareButton.tsx @@ -1,11 +1,12 @@ import React from 'react'; import { GestureResponderEvent, + StyleProp, StyleSheet, Text, TextStyle, TouchableOpacity, - ViewProps, + TouchableOpacityProps, ViewStyle, } from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; @@ -15,14 +16,15 @@ import { TAGG_PURPLE, } from '../../constants'; import {normalize, SCREEN_WIDTH} from '../../utils'; -interface TaggSquareButtonProps extends ViewProps { + +interface TaggSquareButtonProps extends TouchableOpacityProps { onPress: (event: GestureResponderEvent) => void; title: string; buttonStyle: 'normal' | 'large' | 'gradient'; buttonColor: 'purple' | 'white' | 'blue'; labelColor: 'white' | 'blue'; - style?: ViewStyle; - labelStyle?: TextStyle; + style?: StyleProp; + labelStyle?: StyleProp; } const TaggSquareButton: React.FC = (props) => { @@ -50,6 +52,7 @@ const TaggSquareButton: React.FC = (props) => { case 'large': return ( @@ -59,7 +62,10 @@ const TaggSquareButton: React.FC = (props) => { ); case 'gradient': return ( - + = (props) => { default: return ( -- cgit v1.2.3-70-g09d2 From f78bb9fea2128825d9c9cf4a64a7b78a288250b1 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 8 Jul 2021 17:42:47 -0400 Subject: Add logic to create custom category action --- src/components/common/TaggSquareButton.tsx | 9 ++++- src/components/moments/Moment.tsx | 1 - src/routes/main/MainStackNavigator.tsx | 2 +- src/screens/profile/CaptionScreen.tsx | 1 - src/screens/profile/CategorySelection.tsx | 2 +- src/screens/profile/ChoosingCategoryScreen.tsx | 56 ++++++++++++++++++++++++-- 6 files changed, 63 insertions(+), 8 deletions(-) (limited to 'src/components/common/TaggSquareButton.tsx') diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx index 2447276d..b1e65ba6 100644 --- a/src/components/common/TaggSquareButton.tsx +++ b/src/components/common/TaggSquareButton.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {FC} from 'react'; import { GestureResponderEvent, StyleProp, @@ -25,6 +25,7 @@ interface TaggSquareButtonProps extends TouchableOpacityProps { labelColor: 'white' | 'blue'; style?: StyleProp; labelStyle?: StyleProp; + icon?: Element; } const TaggSquareButton: React.FC = (props) => { @@ -55,6 +56,7 @@ const TaggSquareButton: React.FC = (props) => { {...props} onPress={props.onPress} style={[styles.largeButton, buttonColor, props.style]}> + {props.icon} {props.title} @@ -71,6 +73,7 @@ const TaggSquareButton: React.FC = (props) => { colors={BACKGROUND_GRADIENT_MAP[0]} useAngle angle={90}> + {props.icon} {props.title} @@ -84,6 +87,7 @@ const TaggSquareButton: React.FC = (props) => { {...props} onPress={props.onPress} style={[styles.normalButton, buttonColor, props.style]}> + {props.icon} {props.title} @@ -94,6 +98,7 @@ const TaggSquareButton: React.FC = (props) => { const styles = StyleSheet.create({ largeButton: { + flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: '70%', @@ -106,6 +111,7 @@ const styles = StyleSheet.create({ color: '#eee', }, normalButton: { + flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: SCREEN_WIDTH * 0.45, @@ -118,6 +124,7 @@ const styles = StyleSheet.create({ fontWeight: '500', }, gradientButton: { + flexDirection: 'row', marginTop: '8%', borderRadius: 5, paddingVertical: '5%', diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx index ca736b92..12c1fda4 100644 --- a/src/components/moments/Moment.tsx +++ b/src/components/moments/Moment.tsx @@ -1,4 +1,3 @@ -import {useNavigation} from '@react-navigation/native'; import React from 'react'; import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'; import {Text} from 'react-native-animatable'; diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 05f5138f..2dac1777 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -50,7 +50,7 @@ export type MainStackParams = { moment?: MomentType; }; ChoosingCategoryScreen: { - newCustomCategory: string; + newCustomCategory?: string; }; TagFriendsScreen: { media: { diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 86e30bdc..15566555 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -431,7 +431,6 @@ const styles = StyleSheet.create({ postButton: { width: SCREEN_WIDTH * 0.8, height: normalize(37), - backgroundColor: TAGG_LIGHT_BLUE, justifyContent: 'center', alignItems: 'center', borderRadius: 6, diff --git a/src/screens/profile/CategorySelection.tsx b/src/screens/profile/CategorySelection.tsx index 9b8672ea..2f364e59 100644 --- a/src/screens/profile/CategorySelection.tsx +++ b/src/screens/profile/CategorySelection.tsx @@ -170,7 +170,7 @@ const CategorySelection: React.FC = ({ onPress={() => { navigation.push('CreateCustomCategory', { existingCategories: momentCategories.concat(selectedCategories), - fromScreen: 'CategorySelection', + fromScreen: route.name, }); }}> diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx index 24db015e..cdc941db 100644 --- a/src/screens/profile/ChoosingCategoryScreen.tsx +++ b/src/screens/profile/ChoosingCategoryScreen.tsx @@ -1,6 +1,6 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {RouteProp, useNavigation} from '@react-navigation/native'; -import React, {FC} from 'react'; +import React, {FC, useEffect} from 'react'; import { Image, ScrollView, @@ -11,16 +11,19 @@ import { } from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; import {useSafeAreaInsets} from 'react-native-safe-area-context'; -import {useSelector} from 'react-redux'; +import {useDispatch, useSelector} from 'react-redux'; import FrontArrow from '../../assets/icons/front-arrow.svg'; -import {SearchBackground} from '../../components'; +import PlusIcon from '../../assets/icons/plus-icon.svg'; +import {SearchBackground, TaggSquareButton} from '../../components'; import {TAGGS_GRADIENT, TAGG_DARK_PURPLEISH_BLUE} from '../../constants'; import {MainStackParams} from '../../routes'; +import {updateMomentCategories} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import { getMomentCategoryIconInfo, normalize, SCREEN_HEIGHT, + SCREEN_WIDTH, StatusBarHeight, } from '../../utils'; @@ -39,10 +42,22 @@ const ChoosingCategoryScreen: React.FC = ({ const {momentCategories} = useSelector( (state: RootState) => state.momentCategories, ); + const dispatch = useDispatch(); const navigation = useNavigation(); const tabBarHeight = useBottomTabBarHeight(); const insetTop = useSafeAreaInsets().top; + useEffect(() => { + if (route.params.newCustomCategory) { + dispatch( + updateMomentCategories( + momentCategories.concat([route.params.newCustomCategory]), + false, + ), + ); + } + }, [route.params.newCustomCategory]); + const ListItem: FC<{ title: string; onPress: () => void; @@ -90,6 +105,21 @@ const ChoosingCategoryScreen: React.FC = ({ } /> ))} + + navigation.navigate('CreateCustomCategory', { + existingCategories: momentCategories, + fromScreen: route.name, + }) + } + title={'Create a new category'} + buttonStyle={'large'} + buttonColor={'blue'} + labelColor={'white'} + style={styles.button} + labelStyle={styles.buttonText} + icon={} + /> @@ -138,6 +168,26 @@ const styles = StyleSheet.create({ row: { flexDirection: 'row', }, + button: { + width: SCREEN_WIDTH * 0.9, + height: normalize(67), + justifyContent: 'center', + alignItems: 'center', + borderRadius: 8, + alignSelf: 'center', + marginTop: 40, + }, + buttonText: { + color: 'white', + fontSize: normalize(15), + lineHeight: 18, + }, + plusIcon: { + color: 'white', + marginRight: normalize(25), + width: 30, + height: 30, + }, }); export default ChoosingCategoryScreen; -- cgit v1.2.3-70-g09d2