Commit be87ea86 authored by Milan DiGiuseppe's avatar Milan DiGiuseppe

Map lowered, header refactor, nav refactor

parent c8d643fa
......@@ -4,12 +4,24 @@ import React, {
import MapView, { LatLng } from 'react-native-maps';
import { useDispatch, useSelector } from 'react-redux';
import { watchPositionAsync } from 'expo-location';
import { StyleSheet } from 'react-native';
import { StyleSheet, ViewStyle } from 'react-native';
import mapStyleDay from '../../map-styles/MapStyleDay.json';
import { geoSearch } from '../store/caches/CachesActions';
import { distanceBetweenCoordinates } from '../utils/Geography';
import { getAuthToken } from '../store/auth/AuthSelectors';
const styles = StyleSheet.create({
hideGoogleLogo: {
...StyleSheet.absoluteFillObject,
bottom: -28,
},
lowCenter: {
...StyleSheet.absoluteFillObject,
bottom: -100,
},
});
interface UserLocationContext {
userLocation: LatLng;
}
......@@ -79,7 +91,7 @@ export const GeoMapSearch: React.FC = ({ children }) => {
}, [userLocation, lastGeosearch, setLastGeosearch]);
return (
<GeoMap location={userLocation}>
<GeoMap location={userLocation} style={styles.lowCenter}>
{children}
</GeoMap>
);
......@@ -101,6 +113,7 @@ interface GeoMapProps {
location: LatLng;
children?: any;
rotationEnabled?: boolean;
style?: ViewStyle;
}
/**
......@@ -112,6 +125,7 @@ const GeoMap = React.forwardRef<MapView, GeoMapProps>(({
children,
location,
rotationEnabled = true,
style,
}, ref?) => {
const mapRef = useRef<MapView>(null);
......@@ -125,7 +139,7 @@ const GeoMap = React.forwardRef<MapView, GeoMapProps>(({
<MapView
ref={ref ?? mapRef}
provider={'google'}
style={StyleSheet.absoluteFillObject}
style={style ?? styles.hideGoogleLogo}
customMapStyle={mapStyleDay}
showsBuildings={false}
showsIndoors={false}
......
import React, { useCallback } from 'react';
import { Header } from 'react-native-elements';
import { useNavigation } from '@react-navigation/native';
import theme from '../theme';
import IconButton from './IconButton';
const { colors, spacing } = theme;
const RightComponent = () => {
const { navigate } = useNavigation();
const onSettingsPress = useCallback(() => navigate('Settings'), [navigate]);
return (
<IconButton icon={'cog'} size={20} color={'white'} onPress={onSettingsPress} />
);
};
interface Props {
title: string;
}
const ScreenHeader: React.FC<Props> = ({ title }) => (
<Header
leftContainerStyle={{ display: 'none' }}
centerComponent={{
text: title,
style: {
fontSize: 32,
color: colors.white,
width: '100%',
},
}}
rightComponent={<RightComponent />}
containerStyle={{
paddingHorizontal: spacing.screenPadding,
backgroundColor: colors.green,
}}
/>
);
export default ScreenHeader;
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import CreateCacheNavigator, { BackButton } from './CreateCacheNavigator';
import CreateCacheNavigator from './CreateCacheNavigator';
import CameraModal from '../screens/create/CameraModal';
import DevScreen from '../screens/DevScreen';
import TagScreen from '../screens/TagScreen';
import HomeNavigator from './HomeNavigator';
import HeaderLeftButton from './HeaderLeftButton';
import theme from '../theme';
const Stack = createStackNavigator();
const AppNavigator = () => (
<Stack.Navigator
mode={'modal'}
screenOptions={({ route, navigation }) => ({
headerShown: ['Settings', 'TagScreen'].includes(route.name),
headerLeft: () => (
<BackButton
isX
onPress={() => navigation.goBack()}
/>
),
headerTitleStyle: { fontSize: 24 },
})}
screenOptions={{headerShown: false}}
>
<Stack.Screen
name={'Home'}
......@@ -36,11 +28,14 @@ const AppNavigator = () => (
<Stack.Screen
name={'TagScreen'}
component={TagScreen}
options={{ title: 'Tag' }}
/>
<Stack.Screen
name={'DevScreen'}
component={DevScreen}
options={({ navigation }) => ({
headerShown: true,
headerLeft: () => <HeaderLeftButton type='close' onPress={() => navigation.goBack()} />,
headerStyle: {
backgroundColor: theme.colors.green,
},
headerTitleStyle: { fontSize: 24, color: theme.colors.white },
})}
/>
</Stack.Navigator>
);
......
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { Icon } from 'react-native-elements';
import { TouchableOpacity } from 'react-native-gesture-handler';
import CacheMessageScreen from '../screens/create/CacheMessageScreen';
import CacheDurationScreen from '../screens/create/CacheDurationScreen';
import CacheSubmitScreen from '../screens/create/CacheSubmitScreen';
......@@ -9,36 +7,23 @@ import theme from '../theme';
import CacheTypeScreen from '../screens/create/CacheTypeScreen';
import GamesScreen from '../screens/create/GamesScreen';
import OutdoorsScreen from '../screens/create/OutdoorsScreen';
interface BackButtonProps {
isX: boolean;
onPress: () => void;
}
export const BackButton: React.FC<BackButtonProps> = ({ isX, onPress }) => (
<TouchableOpacity
onPress={onPress}
style={{ marginLeft: theme.spacing.screenPadding }}
>
<Icon
name={isX ? 'times' : 'chevron-left'}
type={'font-awesome-5'}
/>
</TouchableOpacity>
);
import HeaderLeftButton from './HeaderLeftButton';
const Stack = createStackNavigator();
const CreateCacheNavigator = () => (
<Stack.Navigator
screenOptions={
({ navigation, route }) => ({
headerStyle: {
backgroundColor: theme.colors.green,
},
headerTitleStyle: { fontSize: 24, color: theme.colors.white },
headerLeft: () => (
<BackButton
isX={route.name === 'CacheType'}
<HeaderLeftButton
type={route.name === 'CacheType' ? 'close' : 'back'}
onPress={() => navigation.goBack()}
/>
),
headerTitleStyle: { fontSize: 24 },
})
}
>
......
import React from 'react';
import { Icon } from 'react-native-elements';
import theme from '../theme';
interface Props {
type?: 'back' | 'close';
onPress: () => void;
}
const HeaderLeftButton: React.FC<Props> = ({ type = 'back', onPress }) => (
<Icon
name={type === 'back' ? 'chevron-left' : 'times'}
type={'font-awesome-5'}
color={theme.colors.white}
onPress={onPress}
style={{ paddingHorizontal: theme.spacing.screenPadding }}
/>
);
export default HeaderLeftButton;
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import DiscoverScreen from '../screens/DiscoverScreen';
import SavedNavigator from './SavedNavigator';
import SettingsScreen from '../screens/SettingsScreen';
import HeaderLeftButton from './HeaderLeftButton';
import theme from '../theme';
import SavedListScreen from '../screens/SavedListScreen';
import CacheDetailScreen, { NavParams } from '../screens/CacheDetailScreen';
import RevisitCacheScreen from '../screens/RevisitCacheScreen';
import DevScreen from '../screens/DevScreen';
const Stack = createStackNavigator();
const HomeNavigator = () => (
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Navigator
screenOptions={({ navigation }) => ({
headerLeft: () => <HeaderLeftButton onPress={() => navigation.goBack()} />,
headerStyle: {
backgroundColor: theme.colors.green,
},
headerTitleStyle: { fontSize: 24, color: theme.colors.white },
})}
>
<Stack.Screen
name={'Discover'}
component={DiscoverScreen}
options={{headerShown: false}}
/>
<Stack.Screen
name={'Saved'}
component={SavedNavigator}
options={{ title: 'Settings' }}
name={'SavedList'}
component={SavedListScreen}
options={{ title: 'Saved' }}
/>
<Stack.Screen
name={'CacheDetail'}
component={CacheDetailScreen}
options={({ route }) => ({ title: (route.params as NavParams).title })}
/>
<Stack.Screen
name={'RevisitCache'}
component={RevisitCacheScreen}
options={({ route }) => ({ title: (route.params as NavParams).title })}
/>
<Stack.Screen
name={'Settings'}
component={SettingsScreen}
options={{ title: 'Settings' }}
/>
<Stack.Screen
name={'Dev'}
component={DevScreen}
/>
</Stack.Navigator>
);
......
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import SavedListScreen from '../screens/SavedListScreen';
import { BackButton } from './CreateCacheNavigator';
import CacheDetailScreen, { NavParams } from '../screens/CacheDetailScreen';
import RevisitCacheScreen from '../screens/RevisitCacheScreen';
const Stack = createStackNavigator();
const SavedNavigator = () => (
<Stack.Navigator
screenOptions={({ navigation }) => ({
headerLeft: () => (
<BackButton
isX={false}
onPress={() => navigation.goBack()}
/>
),
headerTitleStyle: { fontSize: 24 },
})}
>
<Stack.Screen
name={'SavedList'}
component={SavedListScreen}
options={{ title: 'Saved Caches' }}
/>
<Stack.Screen
name={'CacheDetail'}
component={CacheDetailScreen}
options={({ route }) => ({ title: (route.params as NavParams).title })}
/>
<Stack.Screen
name={'RevisitCache'}
component={RevisitCacheScreen}
options={({ route }) => ({ title: (route.params as NavParams).title })}
/>
</Stack.Navigator>
);
export default SavedNavigator;
import React, { useCallback } from 'react';
import { StyleSheet, View } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { getAuthToken } from '../store/auth/AuthSelectors'
import { reverseGeocodeAsync } from 'expo-location';
import { useNavigation } from '@react-navigation/native';
import { getAuthToken } from '../store/auth/AuthSelectors';
import { geoSearch } from '../store/caches/CachesActions';
import { signOutAsync } from '../store/auth/AuthActions';
import GeoButton from '../components/GeoButton';
import theme from '../theme';
import { setUserLatLng, getCurrentPosition } from '../store/location/LocationActions';
import { getCurrentPosition } from '../store/location/LocationActions';
const styles = StyleSheet.create({
fullscreen: {
......@@ -26,22 +25,12 @@ const DevScreen: React.FC = () => {
const dispatch = useDispatch();
const idToken = useSelector(getAuthToken);
const onClose = useCallback(() => navigation.goBack(), [navigation]);
const onGeosearch = useCallback(async () => {
const userLocation = await getCurrentPosition();
dispatch(geoSearch(userLocation, '1', idToken));
navigation.navigate('Discover');
}, [dispatch, navigation]);
const onTokyo = useCallback(() => {
dispatch(setUserLatLng({
latitude: 35.6679191,
longitude: 139.4606805,
}));
navigation.navigate('Discover');
}, [dispatch, navigation]);
const onReverseGeocode = useCallback(async () => {
const userLocation = await getCurrentPosition();
const results = await reverseGeocodeAsync(userLocation);
......@@ -55,10 +44,6 @@ const DevScreen: React.FC = () => {
alert(`${name} ${street} ${city} ${region} ${country}`); // eslint-disable-line no-alert
}, []);
const onSignout = useCallback(() => {
dispatch(signOutAsync());
}, [dispatch, onClose]);
return (
<View style={styles.fullscreen}>
<GeoButton
......@@ -66,26 +51,11 @@ const DevScreen: React.FC = () => {
onPress={onGeosearch}
style={styles.button}
/>
<GeoButton
title={'Tokyo'}
onPress={onTokyo}
style={styles.button}
/>
<GeoButton
title={'Reverse Geocode'}
onPress={onReverseGeocode}
style={styles.button}
/>
<GeoButton
title={'Sign Out'}
onPress={onSignout}
style={styles.button}
/>
<GeoButton
title={'Close'}
onPress={onClose}
style={styles.button}
/>
</View>
);
};
......
......@@ -22,6 +22,15 @@ const styles = StyleSheet.create({
width: '100%',
height: '100%',
},
buttonContainer: {
width: '100%',
paddingHorizontal: theme.spacing.screenPadding,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
position: 'absolute',
bottom: theme.spacing.large,
},
iconButton: {
shadowColor: theme.colors.black,
shadowOffset: {
......@@ -32,21 +41,6 @@ const styles = StyleSheet.create({
shadowRadius: 3.84,
elevation: 5,
},
avatarButton: {
position: 'absolute',
left: theme.spacing.large,
top: theme.spacing.xlarge,
},
createButton: {
position: 'absolute',
alignSelf: 'center',
bottom: theme.spacing.large,
},
savedButton: {
position: 'absolute',
right: theme.spacing.large,
bottom: theme.spacing.large,
},
});
// utils to generate caches for quick testing
......@@ -72,7 +66,7 @@ const DiscoverScreen: React.FC = () => {
const onCreatePress = useCallback(() => navigate('Create'), [navigate]);
const onSavedPress = useCallback(() => navigate('Saved'), [navigate]);
const onSavedPress = useCallback(() => navigate('SavedList'), [navigate]);
const onSave = useCallback((cache: Cache) => {
dispatch(saveCache({ ...cache, found: new Date().valueOf() }));
......@@ -85,7 +79,6 @@ const DiscoverScreen: React.FC = () => {
navigate('CacheDetail', { id: cache.id, title: 'Cache' } as NavParams);
}, [navigate]);
// const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
const drawerRef = useRef(null);
const onDrawerOpen = useCallback(() => drawerRef.current!.open(), [drawerRef]);
const onDrawerClose = useCallback(() => drawerRef.current!.close(), [drawerRef]);
......@@ -116,36 +109,38 @@ const DiscoverScreen: React.FC = () => {
<UserLocationMarker />
</GeoMapSearch>
</UserLocationProvider>
<View style={[styles.avatarButton, styles.iconButton]}>
<Avatar
rounded
size={'medium'}
source={{ uri: userImageUrl }}
onPress={onDrawerOpen}
/>
</View>
<View style={[styles.createButton, styles.iconButton]}>
<Icon
name={'feather-alt'}
type={'font-awesome-5'}
reverse
raised
onPress={onCreatePress}
color={theme.colors.green}
size={30}
containerStyle={{ margin: 0 }}
/>
</View>
<View style={[styles.savedButton, styles.iconButton]}>
<Icon
name={'book'}
type={'font-awesome-5'}
raised
onPress={onSavedPress}
color={theme.colors.green}
size={30}
containerStyle={{ margin: 0 }}
/>
<View style={styles.buttonContainer}>
<View style={styles.iconButton}>
<Avatar
rounded
size={64}
source={{ uri: userImageUrl }}
onPress={onDrawerOpen}
/>
</View>
<View style={styles.iconButton}>
<Icon
name={'feather-alt'}
type={'font-awesome-5'}
reverse
raised
onPress={onCreatePress}
color={theme.colors.green}
size={36}
containerStyle={{ margin: 0 }}
/>
</View>
<View style={styles.iconButton}>
<Icon
name={'book'}
type={'font-awesome-5'}
raised
onPress={onSavedPress}
color={theme.colors.green}
size={30}
containerStyle={{ margin: 0 }}
/>
</View>
</View>
</View>
</Drawer>
......
......@@ -46,6 +46,11 @@ const MainDrawer: React.FC<Props> = ({ onClose }) => {
navigate('Settings');
}, [onClose, navigate]);
const onDevPress = useCallback(() => {
onClose();
navigate('Dev');
}, [onClose, navigate]);
const onSignout = useCallback(() => {
dispatch(signOutAsync());
}, [dispatch, onClose]);
......@@ -64,9 +69,9 @@ const MainDrawer: React.FC<Props> = ({ onClose }) => {
{
icon: 'wrench',
title: 'Developer',
onPress: onSettingsPress,
onPress: onDevPress,
},
]), [onSettingsPress]);
]), [onSettingsPress, onDevPress]);
return (
<View style={styles.drawer}>
......
import React, { useCallback } from 'react';
import React from 'react';
import { useSelector } from 'react-redux';
import { View, StyleSheet } from 'react-native';
import { Avatar } from 'react-native-elements';
import { useNavigation } from '@react-navigation/native';
import GeoText from '../components/GeoText';
import theme from '../theme';
import GeoButton from '../components/GeoButton';
import {
getUserName,
......@@ -20,11 +19,8 @@ const styles = StyleSheet.create({
});
const SettingsScreen = () => {
const { navigate } = useNavigation();
const onDevPress = useCallback(() => navigate('DevScreen'), [navigate]);
const userName: string = useSelector(getUserName);
const userImageUrl: string = useSelector(getUserImageUrl);
const userName = useSelector(getUserName);
const userImageUrl = useSelector(getUserImageUrl);
return (
<View style={{ flex: 1, justifyContent: 'space-between' }}>
......@@ -36,16 +32,11 @@ const SettingsScreen = () => {
size={'xlarge'}
/>
<GeoText
text={userName}
text={userName!}
variant={'formHeader'}
style={{ marginTop: theme.spacing.small }}
/>
</View>
<GeoButton
title={'Dev Screen'}
onPress={onDevPress}
style={{ marginBottom: theme.spacing.medium }}
/>
</View>
);
};
......
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