Commit b438eb50 authored by Milan DiGiuseppe's avatar Milan DiGiuseppe

cleaning up

parent 61ff4cb4
......@@ -4,7 +4,6 @@ import { Icon } from 'react-native-elements';
import theme, { Color } from '../theme';
export const MARKER_ICONS = [
'ghost',
'cat',
'crow',
'dog',
......@@ -12,6 +11,7 @@ export const MARKER_ICONS = [
'dragon',
'fish',
'frog',
'ghost',
'hippo',
'horse',
'kiwi-bird',
......@@ -24,34 +24,36 @@ export type MarkerIcon = typeof MARKER_ICONS[number];
const ICON_SIZE = 24;
const BUBBLE_SIZE = 60;
const BORDER_COLOR = theme.colors.black;
const BACK_COLOR = '#FF5A5F';
const BORDER_WIDTH = 2;
const styles = StyleSheet.create({
bubble: {
// padding: theme.spacing.small,
height: BUBBLE_SIZE,
width: BUBBLE_SIZE,
borderRadius: BUBBLE_SIZE,
justifyContent: 'center',
alignItems: 'center',
borderRadius: BUBBLE_SIZE,
borderColor: BORDER_COLOR,
borderWidth: BORDER_WIDTH,
},
pin: {
width: 4,
alignSelf: 'center',
width: BORDER_WIDTH,
height: 20,
backgroundColor: BORDER_COLOR,
alignSelf: 'center',
},
});
// TODO: make props required, save icon/color in cache or randomize
interface Props {
icon: MarkerIcon;
backgroundColor: Color;
icon?: MarkerIcon;
backgroundColor?: Color;
}
const CustomMarker: React.FC<Props> = ({ icon, backgroundColor }) => (
const CustomMarker: React.FC<Props> = ({
icon = 'cat',
backgroundColor = theme.colors.pink,
}) => (
<View>
<View style={[styles.bubble, { backgroundColor }]}>
<Icon
......
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 { useSelector, useDispatch } from 'react-redux';
import { getUserLatLng } from '../store/location/LocationSelectors';
import { geoSearch } from '../store/caches/CachesActions';
import customMapStyle from '../CustomMapStyle.json';
import theme from '../theme';
const styles = StyleSheet.create({
map: {
......@@ -24,8 +23,6 @@ const DiscoverMap: React.FC = ({ children }) => {
dispatch(geoSearch(userLocation, '1'));
}, []); // TODO: update deps
console.log(userLocation);
return (
<MapView
provider={'google'}
......@@ -42,24 +39,14 @@ const DiscoverMap: React.FC = ({ children }) => {
zoom: 18,
}}
showsPointsOfInterest={false}
// mapType={'mutedStandard'}
customMapStyle={customMapStyle}
// followsUserLocation
loadingEnabled
loadingEnabled // TODO: test
pitchEnabled={false}
zoomEnabled={false}
scrollEnabled={false}
onPress={() => Keyboard.dismiss()}
>
{children}
<Circle
center={userLocation}
radius={70}
fillColor={'transparent'}
strokeColor={theme.colors.red}
zIndex={2}
strokeWidth={5}
/>
</MapView>
);
};
......
import React from 'react';
import { View, ViewStyle, StyleSheet } from 'react-native';
import React, { useCallback } from 'react';
import { View, ViewStyle } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import MenuButton from './MenuButton';
import theme from '../theme';
const styles = StyleSheet.create({
container: {
display: 'flex',
},
});
interface Props {
style?: ViewStyle;
}
const DiscoverMenu: React.FC<Props> = ({ style }) => {
const { navigate } = useNavigation();
const onSavedPress = useCallback(() => navigate('Saved'), [navigate]);
const onCreatePress = useCallback(() => navigate('Create'), [navigate]);
return (
<View style={style}>
<MenuButton
onPress={() => navigate('Saved')}
onPress={onSavedPress}
icon={'book'}
backgroundColor={'blue'}
style={{ marginBottom: theme.spacing.medium }}
/>
<MenuButton
onPress={() => navigate('Create')}
onPress={onCreatePress}
icon={'feather-alt'}
/>
</View>
......
......@@ -8,8 +8,8 @@ interface Props {
lat: number;
lng: number;
message?: string;
icon: MarkerIcon;
color: Color;
icon?: MarkerIcon;
color?: Color;
onPress?: () => void;
}
......@@ -21,10 +21,7 @@ const GeoMarker: React.FC<Props> = ({
color,
onPress,
}) => (
<Marker
coordinate={{ latitude: lat, longitude: lng }}
pinColor={theme.colors.black}
>
<Marker coordinate={{ latitude: lat, longitude: lng }}>
<CustomMarker icon={icon} backgroundColor={color} />
{ message && onPress && (
<Callout
......
import React, { useState } from 'react';
import { Input, Icon } from 'react-native-elements';
import React, { useState, useEffect } from 'react';
import { Icon } from 'react-native-elements';
import {
Text, View, StyleSheet, ViewStyle, TextInput,
} from 'react-native';
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 styles = StyleSheet.create({
container: {
backgroundColor: theme.colors.white,
padding: theme.spacing.small,
borderRadius: HEIGHT / 2,
height: HEIGHT,
width: '70%',
flexDirection: 'row',
alignItems: 'center',
},
shadow: {
shadowColor: '#000',
shadowOffset: {
width: 0,
......@@ -26,30 +31,92 @@ const styles = StyleSheet.create({
shadowRadius: 3.84,
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 {
style?: ViewStyle;
}
const GOOGLE_API_KEY = 'AIzaSyB7ueZ5fnM1SwpWwoUi88H5k3_tkLIoz5I';
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 (
<View style={[style, { display: 'flex', alignItems: 'center' }]}>
<View style={styles.container}>
<Icon
color={theme.colors.mediumgray}
name={'search'}
type={'font-awesome-5'}
size={20}
style={{ marginHorizontal: 4 }}
/>
<TextInput
value={text}
onChangeText={setText}
placeholder={'Search ...'}
style={{ fontSize: 20 }}
/>
<View style={[styles.searchBar, styles.shadow]}>
<Icon
color={theme.colors.mediumgray}
name={'search'}
type={'font-awesome-5'}
size={20}
style={{ marginLeft: 4 }}
/>
<TextInput
value={text}
onChangeText={setText}
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>
);
......
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import HomeNavigator from './HomeNavigator';
import CreateCacheNavigator from './CreateCacheNavigator';
import CameraModal from '../screens/create/CameraModal';
import SavedMessagesScreen from '../screens/SavedMessagesScreen';
......
......@@ -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 HomeNavigator = () => (
<Tab.Navigator
......
import React, { useState, useCallback, useEffect } from 'react';
import React, { useState, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { StyleSheet, View } from 'react-native';
import { LatLng } from 'react-native-maps';
import CacheFoundModal from '../components/CacheFoundModal';
import { Cache } from '../store/caches/CachesState';
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 GeoMarker from '../components/GeoMarker';
import { sampleCaches } from '../SampleCaches';
import DiscoverMap from '../components/DiscoverMap';
import DiscoverMenu from '../components/DiscoverMenu';
import { getUserLatLng } from '../store/location/LocationSelectors';
import theme from '../theme';
import GeoSearchBar from '../components/GeoSearchBar';
......@@ -26,22 +26,21 @@ const styles = StyleSheet.create({
},
});
// utils to generate caches for quick testing
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 dispatch = useDispatch();
// const discoveredCaches: Cache[] = useSelector(getDiscoveredCaches);
const discoveredCaches: Cache[] = useSelector(getDiscoveredCaches);
const [isCacheModalOpen, setCacheModalOpen] = useState(false);
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(() => {
setCacheModalOpen(false);
setOpenCache(null);
......@@ -77,8 +76,6 @@ const DiscoverScreen: React.FC = () => {
key={cache.id}
lat={cache.lat}
lng={cache.lng}
icon={cache.id === '0' ? 'otter' : cache.id === '1' ? 'spider' : 'dragon'}
color={'pink'}
message={cache.message}
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