Commit 61ff4cb4 authored by Milan DiGiuseppe's avatar Milan DiGiuseppe

big messy WIP

parent e666b2ee
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#ebe3cd"
}
]
},
{
"elementType": "geometry.stroke",
"stylers": [
{
"saturation": 35
},
{
"weight": 2.5
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#523735"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f1e6"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#c9b2a6"
}
]
},
{
"featureType": "administrative.land_parcel",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#dcd2be"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ae9e90"
}
]
},
{
"featureType": "administrative.neighborhood",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape.natural",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "poi",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#93817c"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#a5b076"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#447530"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f1e6"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#fdfcf8"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#f8c967"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#e9bc62"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [
{
"color": "#e98d58"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#db8555"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#806b63"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "transit.line",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#8f7d77"
}
]
},
{
"featureType": "transit.line",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ebe3cd"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#b9d3c2"
}
]
},
{
"featureType": "water",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#92998d"
}
]
}
]
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Icon } from 'react-native-elements';
import theme, { Color } from '../theme';
export const MARKER_ICONS = [
'ghost',
'cat',
'crow',
'dog',
'dove',
'dragon',
'fish',
'frog',
'hippo',
'horse',
'kiwi-bird',
'otter',
'paw',
'spider',
] as const;
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',
borderColor: BORDER_COLOR,
borderWidth: BORDER_WIDTH,
},
pin: {
width: 4,
height: 20,
backgroundColor: BORDER_COLOR,
alignSelf: 'center',
},
});
interface Props {
icon: MarkerIcon;
backgroundColor: Color;
}
const CustomMarker: React.FC<Props> = ({ icon, backgroundColor }) => (
<View>
<View style={[styles.bubble, { backgroundColor }]}>
<Icon
color={theme.colors.white}
name={icon}
type={'font-awesome-5'}
size={ICON_SIZE}
/>
</View>
<View style={styles.pin} />
</View>
);
export default CustomMarker;
......@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
import { StyleSheet, View } from 'react-native';
import { Overlay } from 'react-native-elements';
import { useDispatch, useSelector } from 'react-redux';
import { reverseGeocodeAsync } from 'expo-location';
import { geoSearch } from '../store/caches/CachesActions';
import { getUserLatLng } from '../store/location/LocationSelectors';
import { signOutAsync } from '../store/auth/AuthActions';
......@@ -23,10 +24,24 @@ interface Props {
const DevModal: React.FC<Props> = ({ isOpen, onClose }) => {
const dispatch = useDispatch();
const userLocation = useSelector(getUserLatLng);
const geosearch = useCallback(() => {
dispatch(geoSearch(userLocation, '1'));
onClose();
}, [onClose, dispatch, userLocation]);
const geocode = useCallback(async () => {
const results = await reverseGeocodeAsync(userLocation);
const {
country,
region,
city,
street,
name,
} = results[0];
alert(`${name} ${street} ${city} ${region} ${country}`); // eslint-disable-line no-alert
}, []);
const signout = useCallback(() => {
dispatch(signOutAsync());
onClose();
......@@ -39,6 +54,10 @@ const DevModal: React.FC<Props> = ({ isOpen, onClose }) => {
title={'geosearch'}
onPress={geosearch}
/>
<GeoButton
title={'geo code'}
onPress={geocode}
/>
<GeoButton
title={'sign out'}
onPress={signout}
......
import React, { useEffect } from 'react';
import MapView, { Circle } 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: {
...StyleSheet.absoluteFillObject,
},
});
const DiscoverMap: React.FC = ({ children }) => {
const dispatch = useDispatch();
const userLocation = useSelector(getUserLatLng);
// const onUserLocationChange = useCallback((e: EventUserLocation) => {
// const { latitude, longitude } = e.nativeEvent.coordinate;
// setUserLocation({ latitude, longitude });
// }, [setUserLocation]);
useEffect(() => {
dispatch(geoSearch(userLocation, '1'));
}, []); // TODO: update deps
console.log(userLocation);
return (
<MapView
provider={'google'}
style={styles.map}
showsUserLocation
camera={{
center: {
latitude: userLocation.latitude,
longitude: userLocation.longitude,
},
pitch: 80,
heading: 0,
altitude: 0, // not used for Google Maps
zoom: 18,
}}
showsPointsOfInterest={false}
// mapType={'mutedStandard'}
customMapStyle={customMapStyle}
// followsUserLocation
loadingEnabled
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>
);
};
export default DiscoverMap;
import React from 'react';
import { View, ViewStyle, StyleSheet } 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();
return (
<View style={style}>
<MenuButton
onPress={() => navigate('Saved')}
icon={'book'}
backgroundColor={'blue'}
style={{ marginBottom: theme.spacing.medium }}
/>
<MenuButton
onPress={() => navigate('Create')}
icon={'feather-alt'}
/>
</View>
);
};
export default DiscoverMenu;
import React from 'react';
import { Callout, Marker } from 'react-native-maps';
import GeoText from './GeoText';
import theme from '../theme';
import theme, { Color } from '../theme';
import CustomMarker, { MarkerIcon } from './CustomMarker';
interface Props {
lat: number;
lng: number;
message?: string;
icon: MarkerIcon;
color: Color;
onPress?: () => void;
}
const GeoMarker: React.FC<Props> = ({
lat, lng, message, onPress,
lat,
lng,
message,
icon,
color,
onPress,
}) => (
<Marker
coordinate={{ latitude: lat, longitude: lng }}
pinColor={theme.colors.black}
>
<CustomMarker icon={icon} backgroundColor={color} />
{ message && onPress && (
<Callout
onPress={onPress}
......
import React, { useState } from 'react';
import { Input, Icon } from 'react-native-elements';
import {
Text, View, StyleSheet, ViewStyle, TextInput,
} from 'react-native';
import theme from '../theme';
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',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
});
interface Props {
style?: ViewStyle;
}
const GeoSearchBar: React.FC<Props> = ({ style }) => {
const [text, setText] = useState<string>();
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>
</View>
);
};
export default GeoSearchBar;
import React from 'react';
import { View, StyleSheet, ViewStyle } from 'react-native';
import { View, ViewStyle } from 'react-native';
import { Icon } from 'react-native-elements';
import { TouchableOpacity } from 'react-native-gesture-handler';
import theme from '../theme';
import theme, { Color, COLOR_MAP } from '../theme';
const SIZE = 34;
const styles = StyleSheet.create({
background: {
backgroundColor: theme.colors.green,
borderRadius: SIZE,
},
icon: {
padding: SIZE / 2,
},
});
const DEFAULT_SIZE = 34;
interface Props {
onPress: () => void;
icon: string;
size?: number;
backgroundColor?: Color;
style?: ViewStyle;
}
const NewCacheButton: React.FC<Props> = ({ onPress, style }) => (
<View style={[styles.background, style]}>
const MenuButton: React.FC<Props> = ({
onPress,
icon,
size = DEFAULT_SIZE,
backgroundColor = 'green',
style,
}) => (
<View
style={[
{
backgroundColor: COLOR_MAP[backgroundColor],
borderRadius: size,
},
style,
]}
>
<TouchableOpacity onPress={onPress} style={{ flex: 1 }}>
<Icon
name={'feather-alt'}
name={icon}
type={'font-awesome-5'}
color={theme.colors.white}
style={styles.icon}
size={SIZE}
style={{ padding: DEFAULT_SIZE / 2 }}
size={DEFAULT_SIZE}
/>
</TouchableOpacity>
</View>
);
export default NewCacheButton;
export default MenuButton;
......@@ -3,18 +3,24 @@ 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';
import DiscoverScreen from '../screens/DiscoverScreen';