Commit b438eb50 authored by Milan DiGiuseppe's avatar Milan DiGiuseppe

cleaning up

parent 61ff4cb4
...@@ -4,7 +4,6 @@ import { Icon } from 'react-native-elements'; ...@@ -4,7 +4,6 @@ import { Icon } from 'react-native-elements';
import theme, { Color } from '../theme'; import theme, { Color } from '../theme';
export const MARKER_ICONS = [ export const MARKER_ICONS = [
'ghost',
'cat', 'cat',
'crow', 'crow',
'dog', 'dog',
...@@ -12,6 +11,7 @@ export const MARKER_ICONS = [ ...@@ -12,6 +11,7 @@ export const MARKER_ICONS = [
'dragon', 'dragon',
'fish', 'fish',
'frog', 'frog',
'ghost',
'hippo', 'hippo',
'horse', 'horse',
'kiwi-bird', 'kiwi-bird',
...@@ -24,34 +24,36 @@ export type MarkerIcon = typeof MARKER_ICONS[number]; ...@@ -24,34 +24,36 @@ export type MarkerIcon = typeof MARKER_ICONS[number];
const ICON_SIZE = 24; const ICON_SIZE = 24;
const BUBBLE_SIZE = 60; const BUBBLE_SIZE = 60;
const BORDER_COLOR = theme.colors.black; const BORDER_COLOR = theme.colors.black;
const BACK_COLOR = '#FF5A5F';
const BORDER_WIDTH = 2; const BORDER_WIDTH = 2;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
bubble: { bubble: {
// padding: theme.spacing.small,
height: BUBBLE_SIZE, height: BUBBLE_SIZE,
width: BUBBLE_SIZE, width: BUBBLE_SIZE,
borderRadius: BUBBLE_SIZE,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
borderRadius: BUBBLE_SIZE,
borderColor: BORDER_COLOR, borderColor: BORDER_COLOR,
borderWidth: BORDER_WIDTH, borderWidth: BORDER_WIDTH,
}, },
pin: { pin: {
width: 4, alignSelf: 'center',
width: BORDER_WIDTH,
height: 20, height: 20,
backgroundColor: BORDER_COLOR, backgroundColor: BORDER_COLOR,
alignSelf: 'center',
}, },
}); });
// TODO: make props required, save icon/color in cache or randomize
interface Props { interface Props {
icon: MarkerIcon; icon?: MarkerIcon;
backgroundColor: Color; backgroundColor?: Color;
} }
const CustomMarker: React.FC<Props> = ({ icon, backgroundColor }) => ( const CustomMarker: React.FC<Props> = ({
icon = 'cat',
backgroundColor = theme.colors.pink,
}) => (
<View> <View>
<View style={[styles.bubble, { backgroundColor }]}> <View style={[styles.bubble, { backgroundColor }]}>
<Icon <Icon
......
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import MapView, { Circle } from 'react-native-maps'; import MapView from 'react-native-maps';
import { StyleSheet, Keyboard } from 'react-native'; import { StyleSheet, Keyboard } from 'react-native';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { getUserLatLng } from '../store/location/LocationSelectors'; import { getUserLatLng } from '../store/location/LocationSelectors';
import { geoSearch } from '../store/caches/CachesActions'; import { geoSearch } from '../store/caches/CachesActions';
import customMapStyle from '../CustomMapStyle.json'; import customMapStyle from '../CustomMapStyle.json';
import theme from '../theme';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
map: { map: {
...@@ -24,8 +23,6 @@ const DiscoverMap: React.FC = ({ children }) => { ...@@ -24,8 +23,6 @@ const DiscoverMap: React.FC = ({ children }) => {
dispatch(geoSearch(userLocation, '1')); dispatch(geoSearch(userLocation, '1'));
}, []); // TODO: update deps }, []); // TODO: update deps
console.log(userLocation);
return ( return (
<MapView <MapView
provider={'google'} provider={'google'}
...@@ -42,24 +39,14 @@ const DiscoverMap: React.FC = ({ children }) => { ...@@ -42,24 +39,14 @@ const DiscoverMap: React.FC = ({ children }) => {
zoom: 18, zoom: 18,
}} }}
showsPointsOfInterest={false} showsPointsOfInterest={false}
// mapType={'mutedStandard'}
customMapStyle={customMapStyle} customMapStyle={customMapStyle}
// followsUserLocation loadingEnabled // TODO: test
loadingEnabled
pitchEnabled={false} pitchEnabled={false}
zoomEnabled={false} zoomEnabled={false}
scrollEnabled={false} scrollEnabled={false}
onPress={() => Keyboard.dismiss()} onPress={() => Keyboard.dismiss()}
> >
{children} {children}
<Circle
center={userLocation}
radius={70}
fillColor={'transparent'}
strokeColor={theme.colors.red}
zIndex={2}
strokeWidth={5}
/>
</MapView> </MapView>
); );
}; };
......
import React from 'react'; import React, { useCallback } from 'react';
import { View, ViewStyle, StyleSheet } from 'react-native'; import { View, ViewStyle } from 'react-native';
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
import MenuButton from './MenuButton'; import MenuButton from './MenuButton';
import theme from '../theme'; import theme from '../theme';
const styles = StyleSheet.create({
container: {
display: 'flex',
},
});
interface Props { interface Props {
style?: ViewStyle; style?: ViewStyle;
} }
const DiscoverMenu: React.FC<Props> = ({ style }) => { const DiscoverMenu: React.FC<Props> = ({ style }) => {
const { navigate } = useNavigation(); const { navigate } = useNavigation();
const onSavedPress = useCallback(() => navigate('Saved'), [navigate]);
const onCreatePress = useCallback(() => navigate('Create'), [navigate]);
return ( return (
<View style={style}> <View style={style}>
<MenuButton <MenuButton
onPress={() => navigate('Saved')} onPress={onSavedPress}
icon={'book'} icon={'book'}
backgroundColor={'blue'} backgroundColor={'blue'}
style={{ marginBottom: theme.spacing.medium }} style={{ marginBottom: theme.spacing.medium }}
/> />
<MenuButton <MenuButton
onPress={() => navigate('Create')} onPress={onCreatePress}
icon={'feather-alt'} icon={'feather-alt'}
/> />
</View> </View>
......
...@@ -8,8 +8,8 @@ interface Props { ...@@ -8,8 +8,8 @@ interface Props {
lat: number; lat: number;
lng: number; lng: number;
message?: string; message?: string;
icon: MarkerIcon; icon?: MarkerIcon;
color: Color; color?: Color;
onPress?: () => void; onPress?: () => void;
} }
...@@ -21,10 +21,7 @@ const GeoMarker: React.FC<Props> = ({ ...@@ -21,10 +21,7 @@ const GeoMarker: React.FC<Props> = ({
color, color,
onPress, onPress,
}) => ( }) => (
<Marker <Marker coordinate={{ latitude: lat, longitude: lng }}>
coordinate={{ latitude: lat, longitude: lng }}
pinColor={theme.colors.black}
>
<CustomMarker icon={icon} backgroundColor={color} /> <CustomMarker icon={icon} backgroundColor={color} />
{ message && onPress && ( { message && onPress && (
<Callout <Callout
......
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import { Input, Icon } from 'react-native-elements'; import { Icon } from 'react-native-elements';
import { import {
Text, View, StyleSheet, ViewStyle, TextInput, Text, View, StyleSheet, ViewStyle, TextInput,
} from 'react-native'; } from 'react-native';
import theme from '../theme'; import theme from '../theme';
// Google Place Autocomplete types: https://developers.google.com/places/web-service/autocomplete
interface Prediction {
description: string;
place_id: string;
}
interface AutocompleteResponse {
status: string;
predictions: Prediction[];
}
const HEIGHT = 40; const HEIGHT = 40;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
backgroundColor: theme.colors.white,
padding: theme.spacing.small,
borderRadius: HEIGHT / 2,
height: HEIGHT,
width: '70%', width: '70%',
flexDirection: 'row', },
alignItems: 'center', shadow: {
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { shadowOffset: {
width: 0, width: 0,
...@@ -26,30 +31,92 @@ const styles = StyleSheet.create({ ...@@ -26,30 +31,92 @@ const styles = StyleSheet.create({
shadowRadius: 3.84, shadowRadius: 3.84,
elevation: 5, elevation: 5,
}, },
searchBar: {
backgroundColor: theme.colors.white,
padding: theme.spacing.small,
borderRadius: HEIGHT / 2,
height: HEIGHT,
flexDirection: 'row',
alignItems: 'center',
},
dropdown: {
backgroundColor: theme.colors.white,
marginTop: theme.spacing.small,
borderRadius: 6,
padding: theme.spacing.small,
fontSize: 20,
},
searchResult: {
padding: theme.spacing.small,
},
}); });
interface Props { interface Props {
style?: ViewStyle; style?: ViewStyle;
} }
const GOOGLE_API_KEY = 'AIzaSyB7ueZ5fnM1SwpWwoUi88H5k3_tkLIoz5I';
const GeoSearchBar: React.FC<Props> = ({ style }) => { const GeoSearchBar: React.FC<Props> = ({ style }) => {
const [text, setText] = useState<string>(); const [text, setText] = useState<string>('');
const [predictions, setPredictions] = useState<Prediction[]>([]);
useEffect(() => {
const fetchPredictions = async () => {
const response = await fetch('https://maps.googleapis.com/maps/api/place/autocomplete/'
+ 'json?'
+ `input=${encodeURIComponent(text)}`
+ `&key=${encodeURIComponent(GOOGLE_API_KEY)}`,
{
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
});
const result: AutocompleteResponse = await response.json();
if (result.status === 'OK') {
console.log(result);
setPredictions(result.predictions);
} else {
console.warn(`fetch predictions failed: ${result}`);
}
};
if (text.length >= 1) {
fetchPredictions();
} else {
setPredictions([]);
}
}, [text]);
return ( return (
<View style={[style, { display: 'flex', alignItems: 'center' }]}> <View style={[style, { display: 'flex', alignItems: 'center' }]}>
<View style={styles.container}> <View style={styles.container}>
<Icon <View style={[styles.searchBar, styles.shadow]}>
color={theme.colors.mediumgray} <Icon
name={'search'} color={theme.colors.mediumgray}
type={'font-awesome-5'} name={'search'}
size={20} type={'font-awesome-5'}
style={{ marginHorizontal: 4 }} size={20}
/> style={{ marginLeft: 4 }}
<TextInput />
value={text} <TextInput
onChangeText={setText} value={text}
placeholder={'Search ...'} onChangeText={setText}
style={{ fontSize: 20 }} placeholder={'Search ...'}
/> style={{ marginLeft: theme.spacing.small, fontSize: 20, flex: 1 }}
/>
</View>
{predictions.length > 0 && (
<View style={[styles.dropdown, styles.shadow]}>
{predictions.map((prediction) => (
<View style={styles.searchResult} key={prediction.place_id}>
<Text>{prediction.description}</Text>
</View>
))}
</View>
)}
</View> </View>
</View> </View>
); );
......
import React from 'react'; import React from 'react';
import { createStackNavigator } from '@react-navigation/stack'; import { createStackNavigator } from '@react-navigation/stack';
import HomeNavigator from './HomeNavigator';
import CreateCacheNavigator from './CreateCacheNavigator'; import CreateCacheNavigator from './CreateCacheNavigator';
import CameraModal from '../screens/create/CameraModal'; import CameraModal from '../screens/create/CameraModal';
import SavedMessagesScreen from '../screens/SavedMessagesScreen'; import SavedMessagesScreen from '../screens/SavedMessagesScreen';
......
...@@ -14,6 +14,11 @@ const TabIcon: React.FC<{ name: string}> = ({ name }) => ( ...@@ -14,6 +14,11 @@ const TabIcon: React.FC<{ name: string}> = ({ name }) => (
/> />
); );
// NOTE
// this bottomo tab navigator for the home screen is not currently
// being used but i'm keeping it in the repo for now in case the
// navigation needs to change back
// - milan
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
const HomeNavigator = () => ( const HomeNavigator = () => (
<Tab.Navigator <Tab.Navigator
......
import React, { useState, useCallback, useEffect } from 'react'; import React, { useState, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { StyleSheet, View } from 'react-native'; import { StyleSheet, View } from 'react-native';
import { LatLng } from 'react-native-maps';
import CacheFoundModal from '../components/CacheFoundModal'; import CacheFoundModal from '../components/CacheFoundModal';
import { Cache } from '../store/caches/CachesState'; import { Cache } from '../store/caches/CachesState';
import { getDiscoveredCaches } from '../store/caches/CachesSelectors'; import { getDiscoveredCaches } from '../store/caches/CachesSelectors';
import { saveCache, reportCache, geoSearch } from '../store/caches/CachesActions'; import { saveCache, reportCache } from '../store/caches/CachesActions';
import ScreenHeader from '../components/ScreenHeader'; import ScreenHeader from '../components/ScreenHeader';
import GeoMarker from '../components/GeoMarker'; import GeoMarker from '../components/GeoMarker';
import { sampleCaches } from '../SampleCaches'; import { sampleCaches } from '../SampleCaches';
import DiscoverMap from '../components/DiscoverMap'; import DiscoverMap from '../components/DiscoverMap';
import DiscoverMenu from '../components/DiscoverMenu'; import DiscoverMenu from '../components/DiscoverMenu';
import { getUserLatLng } from '../store/location/LocationSelectors';
import theme from '../theme'; import theme from '../theme';
import GeoSearchBar from '../components/GeoSearchBar'; import GeoSearchBar from '../components/GeoSearchBar';
...@@ -26,22 +26,21 @@ const styles = StyleSheet.create({ ...@@ -26,22 +26,21 @@ const styles = StyleSheet.create({
}, },
}); });
// utils to generate caches for quick testing
const delta = () => (Math.random() - 0.5) * 0.0022; const delta = () => (Math.random() - 0.5) * 0.0022;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const generateCaches = (location: LatLng): Cache[] => sampleCaches.slice(0, 3).map((c) => ({
...c,
lat: location.latitude + delta(),
lng: location.longitude + delta(),
}));
const DiscoverScreen: React.FC = () => { const DiscoverScreen: React.FC = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
// const discoveredCaches: Cache[] = useSelector(getDiscoveredCaches); const discoveredCaches: Cache[] = useSelector(getDiscoveredCaches);
const [isCacheModalOpen, setCacheModalOpen] = useState(false); const [isCacheModalOpen, setCacheModalOpen] = useState(false);
const [openCache, setOpenCache] = useState<Cache | null>(sampleCaches[0]); const [openCache, setOpenCache] = useState<Cache | null>(sampleCaches[0]);
const userLocation = useSelector(getUserLatLng);
const discoveredCaches: Cache[] = sampleCaches.slice(0, 3).map((c) => ({
...c,
lat: userLocation.latitude + delta(),
lng: userLocation.longitude + delta(),
}));
const onClose = useCallback(() => { const onClose = useCallback(() => {
setCacheModalOpen(false); setCacheModalOpen(false);
setOpenCache(null); setOpenCache(null);
...@@ -77,8 +76,6 @@ const DiscoverScreen: React.FC = () => { ...@@ -77,8 +76,6 @@ const DiscoverScreen: React.FC = () => {
key={cache.id} key={cache.id}
lat={cache.lat} lat={cache.lat}
lng={cache.lng} lng={cache.lng}
icon={cache.id === '0' ? 'otter' : cache.id === '1' ? 'spider' : 'dragon'}
color={'pink'}
message={cache.message} message={cache.message}
onPress={() => onCalloutPress(cache)} onPress={() => onCalloutPress(cache)}
/> />
......
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