Commit 8097fafe authored by Milan DiGiuseppe's avatar Milan DiGiuseppe

Create flow buttons moved to nav header

parent bd40e6b4
......@@ -4,7 +4,7 @@ import { Avatar } from 'react-native-elements';
import { useSelector } from 'react-redux';
import theme from '../theme';
import GeoText from './GeoText';
import { getUserAvatarUri } from '../store/user/UserSelectors';
import { getUserAvatarUri, getUserName } from '../store/user/UserSelectors';
const styles = StyleSheet.create({
container: {
......@@ -16,38 +16,40 @@ const styles = StyleSheet.create({
interface Props {
me?: boolean;
initials?: string;
name: string;
name?: string;
size?: 'small' | 'medium';
style?: ViewStyle;
}
const ProfileCard: React.FC<Props> = ({
me = false,
me = true,
initials,
name,
size = 'small',
style,
}) => {
const userImageUrl = useSelector(getUserAvatarUri);
const myImageUrl = useSelector(getUserAvatarUri);
const myName = useSelector(getUserName);
return (
<View style={[style, styles.container]}>
{me ? (
<Avatar
rounded
size={size}
source={{ uri: userImageUrl }}
source={{ uri: myImageUrl }}
/>
) : (
<Avatar
rounded
title={initials.toLocaleUpperCase()}
title={initials!.toLocaleUpperCase()}
containerStyle={{ backgroundColor: theme.colors.mediumgray }}
size={size}
/>
)}
<GeoText
variant={'formHeader'}
text={name}
text={me ? myName : name!}
style={{
marginLeft: theme.spacing.medium,
fontSize: size === 'small' ? 20 : 28,
......
......@@ -61,7 +61,7 @@ const CreateCacheNavigator = () => (
<Stack.Screen
name={'CacheSubmit'}
component={CacheSubmitScreen}
options={{ title: 'Submit' }}
options={{ title: 'New Cache' }}
/>
</Stack.Navigator>
);
......
import React, {
useState, useCallback, useEffect, useMemo,
useState, useCallback, useEffect, useMemo, useLayoutEffect,
} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
......@@ -19,7 +19,6 @@ import IconButton from '../../components/IconButton';
import { getPendingCacheImage, getPendingCacheTag } from '../../store/pendingNewCache/PendingCacheSelectors';
import Tag, { AddTagButton } from '../../components/Tag';
import ProfileCard from '../../components/ProfileCard';
import { getUserName } from '../../store/user/UserSelectors';
const CHAR_MAX = 100;
......@@ -50,11 +49,10 @@ const styles = StyleSheet.create({
});
const CacheMessageScreen: React.FC = () => {
const { navigate } = useNavigation();
const navigation = useNavigation();
const dispatch = useDispatch();
const [text, setText] = useState('');
const image = useSelector(getPendingCacheImage);
const displayName = useSelector(getUserName);
const setImage = useCallback((img: ImageInfo) => {
dispatch(setPendingCacheImage(img));
}, [dispatch]);
......@@ -91,71 +89,79 @@ const CacheMessageScreen: React.FC = () => {
const onNext = useCallback(() => {
dispatch(setPendingCacheContent(text));
navigate('CacheDuration');
}, [dispatch, navigate, text]);
navigation.navigate('CacheSubmit');
}, [dispatch, navigation, text]);
const tag = useSelector(getPendingCacheTag);
const onAddTag = useCallback(() => navigate('TagScreen'), [navigate]);
const onAddTag = useCallback(() => navigation.navigate('TagScreen'), [navigation]);
const onRemoveTag = useCallback(() => dispatch(setPendingCacheTag(undefined)), [dispatch]);
return (
<ScreenContainer>
<View style={styles.container}>
<ScrollView
keyboardShouldPersistTaps={'handled'}
showsVerticalScrollIndicator={false}
onLayout={onScrollViewLayout}
>
<ProfileCard me name={displayName} style={{ marginTop: theme.spacing.medium }} />
<View style={{ marginTop: theme.spacing.medium }}>
{tag ? (
<Tag tag={tag} onRemove={onRemoveTag} />
) : (
<AddTagButton onAdd={onAddTag} />
)}
</View>
<TextInput
value={text}
onChangeText={setText}
multiline
maxLength={CHAR_MAX}
style={styles.textArea}
placeholder={'My cache...'}
/>
<View style={styles.textAreaFooter}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<IconButton icon={'image'} onPress={onPickImage} />
<IconButton
icon={'camera'}
onPress={() => navigate('CameraModal')}
style={{ marginLeft: theme.spacing.medium }}
/>
</View>
<GeoText
text={`${CHAR_MAX - text.length}`}
variant={'textBold'}
color={'mediumgray'}
style={{ fontSize: 20 }}
/>
</View>
{image && (
<Image
source={image}
style={{
width: '100%',
height: imageHeight,
}}
resizeMode={'contain'}
/>
)}
</ScrollView>
useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => (
<GeoButton
title={'Next'}
onPress={onNext}
title={'Next'}
titleStyle={{ color: theme.colors.white }}
disabled={text.length === 0}
style={{ marginVertical: theme.spacing.medium }}
type={'clear'}
/>
</View>
),
});
}, [navigation, onNext, image]);
return (
<ScreenContainer>
<ScrollView
keyboardShouldPersistTaps={'handled'}
showsVerticalScrollIndicator={false}
onLayout={onScrollViewLayout}
contentContainerStyle={styles.container}
>
<ProfileCard me style={{ marginTop: theme.spacing.medium }} />
<View style={{ marginTop: theme.spacing.medium }}>
{tag ? (
<Tag tag={tag} onRemove={onRemoveTag} />
) : (
<AddTagButton onAdd={onAddTag} />
)}
</View>
<TextInput
value={text}
onChangeText={setText}
multiline
maxLength={CHAR_MAX}
style={styles.textArea}
placeholder={'My cache...'}
/>
<View style={styles.textAreaFooter}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<IconButton icon={'image'} onPress={onPickImage} />
<IconButton
icon={'camera'}
onPress={() => navigation.navigate('CameraModal')}
style={{ marginLeft: theme.spacing.medium }}
/>
</View>
<GeoText
text={`${CHAR_MAX - text.length}`}
variant={'textBold'}
color={'mediumgray'}
style={{ fontSize: 20 }}
/>
</View>
{image && (
<Image
source={image}
style={{
width: '100%',
height: imageHeight,
}}
resizeMode={'contain'}
/>
)}
</ScrollView>
</ScreenContainer>
);
};
......
import React, { useCallback } from 'react';
import React, { useCallback, useLayoutEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { StyleSheet, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
......@@ -12,31 +12,22 @@ import { getCurrentPosition } from '../../store/location/LocationActions';
import { GeoMapFollow, UserLocationProvider } from '../../components/GeoMap';
import UserLocationMarker from '../../components/UserLocationMarker';
import { clearPendingCache } from '../../store/pendingNewCache/PendingCacheActions';
const { colors, spacing } = theme;
import ProfileCard from '../../components/ProfileCard';
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: spacing.medium,
paddingHorizontal: spacing.screenPadding,
paddingVertical: theme.spacing.medium,
paddingHorizontal: theme.spacing.screenPadding,
},
mapContainer: {
width: '100%',
height: '80%',
borderColor: colors.lightgray,
borderStyle: 'solid',
borderWidth: 1,
borderRadius: 4,
flex: 1,
overflow: 'hidden',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
const CacheSubmitScreen = () => {
const { navigate } = useNavigation();
const navigation = useNavigation();
const dispatch = useDispatch();
const cacheContent = useSelector(getPendingCacheContent);
const cacheDuration = useSelector(getPendingCacheDuration);
......@@ -44,8 +35,8 @@ const CacheSubmitScreen = () => {
const userName = useSelector(getUserName);
const idToken = useSelector(getAuthToken);
const onCreate = useCallback(async () => {
navigate('Discover');
const onShare = useCallback(async () => {
navigation.navigate('Discover');
dispatch(clearPendingCache());
const userLocation = await getCurrentPosition();
dispatch(createCache({
......@@ -59,10 +50,24 @@ const CacheSubmitScreen = () => {
},
idToken));
dispatch(geoSearch(userLocation, '1', idToken));
}, [navigate]);
}, [navigation]);
useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => (
<GeoButton
onPress={onShare}
title={'Share'}
titleStyle={{ color: theme.colors.white }}
type={'clear'}
/>
),
});
}, [navigation, onShare]);
return (
<View style={styles.container}>
<ProfileCard me style={{ marginBottom: theme.spacing.medium }} />
<View style={styles.mapContainer}>
<UserLocationProvider>
<GeoMapFollow>
......@@ -70,11 +75,6 @@ const CacheSubmitScreen = () => {
</GeoMapFollow>
</UserLocationProvider>
</View>
<GeoButton
title={'Submit cache here'}
onPress={onCreate}
style={{ marginVertical: spacing.large }}
/>
</View>
);
};
......
import React, { useState, useCallback } from 'react';
import React, { useState, useCallback, useLayoutEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import theme from '../../theme';
......@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
});
const GamesScreen: React.FC = () => {
const { navigate } = useNavigation();
const navigation = useNavigation();
const [moveMade, setMoveMade] = useState<boolean>(false);
const [ticTacToeState, setTicTacToeState] = useState<TicTacToeBoardState>(
......@@ -42,18 +42,32 @@ const GamesScreen: React.FC = () => {
setTicTacToeState(temp);
}, [setTicTacToeState, setMoveMade]);
const onNext = useCallback(() => navigation.navigate('CacheSubmit'), [navigation]);
useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => (
<GeoButton
onPress={onNext}
title={'Next'}
titleStyle={{ color: theme.colors.white }}
disabled={!moveMade}
type={'clear'}
/>
),
});
}, [navigation, onNext, moveMade]);
return (
<ScreenContainer>
<ProfileCard
me
style={{
marginVertical: theme.spacing.medium,
paddingHorizontal: theme.spacing.screenPadding,
}}
/>
<View style={styles.container}>
<ProfileCard
me
name={'Milan DiGiuseppe'}
style={{
marginVertical: theme.spacing.medium,
alignSelf: 'flex-start',
paddingHorizontal: theme.spacing.screenPadding,
}}
/>
<GeoText
text={'Make the first move'}
color={'blue'}
......@@ -68,12 +82,6 @@ const GamesScreen: React.FC = () => {
style={{ marginTop: theme.spacing.large }}
/>
</View>
<GeoButton
title={'Next'}
onPress={() => navigate('CacheSubmit')}
disabled={!moveMade}
style={{ marginVertical: theme.spacing.large, marginHorizontal: theme.spacing.screenPadding }}
/>
</ScreenContainer>
);
};
......
import React, {
useState, useCallback, useEffect, useMemo,
useState, useCallback, useEffect, useMemo, useLayoutEffect,
} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
......@@ -17,7 +17,6 @@ import GeoButton from '../../components/GeoButton';
import ScreenContainer from './ScreenContainer';
import { getPendingCacheImage } from '../../store/pendingNewCache/PendingCacheSelectors';
import ProfileCard from '../../components/ProfileCard';
import { getUserName } from '../../store/user/UserSelectors';
const styles = StyleSheet.create({
container: {
......@@ -53,10 +52,9 @@ const styles = StyleSheet.create({
});
const PhotographyScreen: React.FC = () => {
const { navigate } = useNavigation();
const navigation = useNavigation();
const dispatch = useDispatch();
const image = useSelector(getPendingCacheImage);
const displayName = useSelector(getUserName);
const setImage = useCallback((img: ImageInfo) => {
dispatch(setPendingCacheImage(img));
}, [dispatch]);
......@@ -81,48 +79,55 @@ const PhotographyScreen: React.FC = () => {
const imageHeight = useMemo(() => (image ? (scrollWidth * image.height) / image.width : 0), [image, scrollWidth]);
const onNext = useCallback(() => {
navigate('CacheSubmit');
}, [dispatch, navigate]);
navigation.navigate('CacheSubmit');
}, [dispatch, navigation]);
return (
<ScreenContainer>
<View style={styles.container}>
<ScrollView
keyboardShouldPersistTaps={'handled'}
showsVerticalScrollIndicator={false}
onLayout={onScrollViewLayout}
>
<ProfileCard me name={displayName!} style={{ marginVertical: theme.spacing.medium }} />
{!image && (
<View style={styles.photoUploadZone}>
<Icon
name={'camera'}
type={'font-awesome-5'}
color={theme.colors.black}
size={30}
onPress={() => navigate('CameraModal')}
/>
</View>
)}
{image && (
<Image
source={image}
style={{
width: '100%',
height: imageHeight,
}}
resizeMode={'contain'}
/>
)}
</ScrollView>
useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => (
<GeoButton
title={'Next'}
onPress={onNext}
title={'Next'}
titleStyle={{ color: theme.colors.white }}
disabled={!image}
style={{ marginVertical: theme.spacing.medium }}
type={'clear'}
/>
</View>
),
});
}, [navigation, onNext, image]);
return (
<ScreenContainer>
<ScrollView
keyboardShouldPersistTaps={'handled'}
showsVerticalScrollIndicator={false}
onLayout={onScrollViewLayout}
contentContainerStyle={{ marginHorizontal: theme.spacing.screenPadding }}
>
<ProfileCard me style={{ marginVertical: theme.spacing.medium }} />
{!image && (
<View style={styles.photoUploadZone}>
<Icon
name={'camera'}
type={'font-awesome-5'}
color={theme.colors.black}
size={30}
onPress={() => navigation.navigate('CameraModal')}
/>
</View>
)}
{image && (
<Image
source={image}
style={{
width: '100%',
height: imageHeight,
}}
resizeMode={'contain'}
/>
)}
</ScrollView>
</ScreenContainer>
);
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment