Cache detail screen

parent 18325cf4
......@@ -15,8 +15,8 @@ export const sampleCaches: Cache[] = [
name: 'will.brown',
message: 'Check out my cute ass dogs. Follow my on ig. I post epic dogs',
found: new Date(2019, 9, 20, 0, 0, 0, 0).valueOf(),
lat: 43.40,
lng: -80.56,
lat: 40.7464687,
lng: -73.9844323,
isUserCreated: false,
},
{
......@@ -24,8 +24,8 @@ export const sampleCaches: Cache[] = [
name: 'jayson',
message: 'My first cache, and also a cry for help. Please help me I\'m stuck in a cache writing factory',
found: new Date(2020, 1, 14, 0, 0, 0, 0).valueOf(),
lat: 43.40,
lng: -80.56,
lat: 40.7464687,
lng: -73.9844323,
isUserCreated: false,
},
{
......@@ -33,8 +33,8 @@ export const sampleCaches: Cache[] = [
name: 'krisztian',
message: 'Someone please give us $1 million for this app. We are starving students',
found: new Date(2020, 1, 8, 0, 0, 0, 0).valueOf(),
lat: 43.40,
lng: -80.56,
lat: 40.7464687,
lng: -73.9844323,
isUserCreated: false,
},
];
......@@ -12,20 +12,10 @@ interface Props {
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}>
<Icon
name={'book'}
type={'font-awesome-5'}
reverse
raised
onPress={onSavedPress}
color={theme.colors.blue}
size={BUTTON_SIZE}
/>
<Icon
name={'feather-alt'}
type={'font-awesome-5'}
......
import React from 'react';
import { StyleSheet, View, ViewStyle } from 'react-native';
import { Avatar } from 'react-native-elements';
import theme from '../theme';
import GeoText from './GeoText';
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
},
});
interface Props {
initials: string;
name: string;
style?: ViewStyle;
}
const ProfileCard: React.FC<Props> = ({ initials, name, style }) => (
<View style={[style, styles.container]}>
<Avatar
rounded
title={initials.toLocaleUpperCase()}
containerStyle={{ backgroundColor: theme.colors.mediumgray }}
size={'small'}
/>
<GeoText
variant={'formHeader'}
text={name}
style={{ marginLeft: theme.spacing.medium }}
/>
</View>
);
export default ProfileCard;
import React from 'react';
import React, { useCallback } from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
import moment from 'moment';
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
import { useNavigation } from '@react-navigation/native';
import theme from '../theme';
import GeoText from './GeoText';
import { NavParams } from '../screens/CacheDetailScreen';
const { colors, spacing } = theme;
interface Props {
found: number;
name: string;
id: string;
message: string;
name: string;
}
const styles = StyleSheet.create({
......@@ -26,16 +30,20 @@ const styles = StyleSheet.create({
const SavedMessage: React.FC<Props> = ({
found,
name,
id,
message,
}) => (
<View style={styles.container}>
<Text>
<GeoText variant={'textBold'} text={`${name} `} />
<GeoText variant={'text'} text={`${message} `} />
<GeoText variant={'textWeak'} text={moment(found).fromNow()} />
</Text>
</View>
);
name,
}) => {
const { navigate } = useNavigation();
const onPress = useCallback(() => navigate('CacheDetail', { id, title: `${name}'s Cache` } as NavParams), [navigate, id]);
return (
<TouchableWithoutFeedback style={styles.container} onPress={onPress}>
<Text>
<GeoText variant={'textBold'} text={`${name} `} />
<GeoText variant={'text'} text={`${message} `} />
<GeoText variant={'textWeak'} text={moment(found).fromNow()} />
</Text>
</TouchableWithoutFeedback>
);
};
export default SavedMessage;
......@@ -2,10 +2,9 @@ import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import CreateCacheNavigator, { BackButton } from './CreateCacheNavigator';
import CameraModal from '../screens/create/CameraModal';
import SavedMessagesScreen from '../screens/SavedMessagesScreen';
import DiscoverScreen from '../screens/DiscoverScreen';
import SettingsScreen from '../screens/SettingsScreen';
import DevScreen from '../screens/DevScreen';
import HomeNavigator from './HomeNavigator';
import FlairScreen from '../screens/FlairScreen';
const Stack = createStackNavigator();
......@@ -24,8 +23,8 @@ const AppNavigator = () => (
})}
>
<Stack.Screen
name={'Discover'}
component={DiscoverScreen}
name={'Home'}
component={HomeNavigator}
/>
<Stack.Screen
name={'Settings'}
......@@ -36,10 +35,6 @@ const AppNavigator = () => (
name={'Create'}
component={CreateCacheNavigator}
/>
<Stack.Screen
name={'Saved'}
component={SavedMessagesScreen}
/>
<Stack.Screen
name={'CameraModal'}
component={CameraModal}
......
......@@ -2,8 +2,7 @@ import React from 'react';
import { Icon } from 'react-native-elements';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import DiscoverScreen from '../screens/DiscoverScreen';
import ActivityScreen from '../screens/ActivityScreen';
import SavedMessagesScreen from '../screens/SavedMessagesScreen';
import SavedNavigator from './SavedNavigator';
import theme from '../theme';
const TabIcon: React.FC<{ name: string}> = ({ name }) => (
......@@ -14,11 +13,6 @@ 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
......@@ -34,16 +28,9 @@ const HomeNavigator = () => (
tabBarIcon: () => <TabIcon name={'compass'} />,
}}
/>
<Tab.Screen
name={'Activity'}
component={ActivityScreen}
options={{
tabBarIcon: () => <TabIcon name={'heart'} />,
}}
/>
<Tab.Screen
name={'Saved'}
component={SavedMessagesScreen}
component={SavedNavigator}
options={{
tabBarIcon: () => <TabIcon name={'bookmark'} />,
}}
......
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import SavedMessagesScreen from '../screens/SavedMessagesScreen';
import { BackButton } from './CreateCacheNavigator';
import CacheDetailScreen, { NavParams } from '../screens/CacheDetailScreen';
const Stack = createStackNavigator();
const SavedNavigator = () => (
<Stack.Navigator
screenOptions={({ route, navigation }) => ({
headerShown: ['CacheDetail'].includes(route.name),
headerLeft: () => (
<BackButton
isX={false}
onPress={() => navigation.goBack()}
/>
),
headerTitleStyle: { fontSize: 24 },
})}
>
<Stack.Screen
name={'SavedHome'}
component={SavedMessagesScreen}
/>
<Stack.Screen
name={'CacheDetail'}
component={CacheDetailScreen}
options={({ route }) => ({ title: (route.params as NavParams).title })}
/>
</Stack.Navigator>
);
export default SavedNavigator;
import React, { useMemo } from 'react';
import { View, StyleSheet } from 'react-native';
import { useRoute } from '@react-navigation/native';
import { useSelector } from 'react-redux';
import MapView, { LatLng } from 'react-native-maps';
import { ScrollView } from 'react-native-gesture-handler';
import { makeGetSavedCache } from '../store/caches/CachesSelectors';
import customMapStyle from '../CustomMapStyle.json';
import theme from '../theme';
import GeoText from '../components/GeoText';
import Flair from '../components/Flair';
import ProfileCard from '../components/ProfileCard';
import GeoMarker from '../components/GeoMarker';
const { colors, spacing } = theme;
const styles = StyleSheet.create({
container: {
paddingHorizontal: spacing.screenPadding,
},
mapContainer: {
width: '100%',
height: 200,
borderColor: colors.lightgray,
borderStyle: 'solid',
borderWidth: 1,
borderRadius: 4,
overflow: 'hidden',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
export interface NavParams {
id: string;
title: string;
}
const CacheDetailScreen = () => {
const { params } = useRoute();
const getSavedCache = makeGetSavedCache((params as NavParams).id);
const cache = useSelector(getSavedCache);
const cacheLocation: LatLng = useMemo(() => ({ latitude: cache.lat, longitude: cache.lng }), [cache]);
return (
<View style={{ flex: 1, justifyContent: 'space-between' }}>
<ScrollView contentContainerStyle={styles.container}>
<ProfileCard initials={cache.name[0]} name={cache.name} style={{ marginTop: theme.spacing.medium }} />
<Flair flair={'epic'} style={{ marginTop: theme.spacing.large }} />
<GeoText text={cache.message} style={{ marginTop: theme.spacing.small }} />
</ScrollView>
<View style={styles.mapContainer}>
<MapView
provider={'google'}
style={styles.map}
customMapStyle={customMapStyle}
initialCamera={{
center: cacheLocation,
heading: 0,
pitch: 80,
zoom: 18,
altitude: 0, // not used for Google Maps
}}
showsPointsOfInterest={false}
loadingEnabled // TODO: test
pitchEnabled={false}
zoomEnabled={false}
scrollEnabled={false}
>
<GeoMarker
lat={cacheLocation.latitude}
lng={cacheLocation.longitude}
/>
</MapView>
</View>
</View>
);
};
export default CacheDetailScreen;
......@@ -73,8 +73,8 @@ const SavedMessagesScreen: React.FC = () => {
);
const renderSavedMessage = useCallback(({
found, name, message, isUserCreated,
}: Cache) => <SavedMessage found={found} name={isUserCreated ? 'me' : name} message={message} />, []);
id, found, name, message, isUserCreated,
}: Cache) => <SavedMessage id={id} found={found} name={isUserCreated ? 'me' : name} message={message} />, []);
const renderSectionHeader = useCallback((section) => <SectionHeader title={section.title} />, []);
......
......@@ -3,14 +3,13 @@ import React, {
} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
StyleSheet, TextInput, View, Image, LayoutChangeEvent, Text,
StyleSheet, TextInput, View, Image, LayoutChangeEvent,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
import { ScrollView } from 'react-native-gesture-handler';
import { ImageInfo } from 'expo-image-picker/build/ImagePicker.types';
import { Avatar } from 'react-native-elements';
import theme from '../../theme';
import GeoText from '../../components/GeoText';
import { setPendingCacheContent, setPendingCacheImage, setPendingCacheFlair } from '../../store/pendingNewCache/PendingCacheSlice';
......@@ -19,6 +18,7 @@ import ScreenContainer from './ScreenContainer';
import IconButton from '../../components/IconButton';
import { getPendingCacheImage, getPendingCacheFlair } from '../../store/pendingNewCache/PendingCacheSelectors';
import Flair, { AddFlairButton } from '../../components/Flair';
import ProfileCard from '../../components/ProfileCard';
const CHAR_MAX = 100;
......@@ -104,19 +104,7 @@ const CacheMessageScreen: React.FC = () => {
showsVerticalScrollIndicator={false}
onLayout={onScrollViewLayout}
>
<View style={styles.profileRow}>
<Avatar
rounded
title={'MD'}
containerStyle={{ backgroundColor: theme.colors.mediumgray }}
size={'small'}
/>
<GeoText
variant={'formHeader'}
text={'milan.digiuseppe'}
style={{ marginLeft: theme.spacing.medium }}
/>
</View>
<ProfileCard initials={'MD'} name={'milan.digiuseppe'} style={{ marginTop: theme.spacing.medium }} />
<View style={{ marginTop: theme.spacing.medium }}>
{flair ? (
<Flair flair={flair} onRemove={onRemoveFlair} />
......
......@@ -9,4 +9,9 @@ export const getUserCreatedCaches = createSelector([getSavedCaches],
export const getFoundCaches = createSelector([getSavedCaches],
(saved) => saved.filter((c) => !c.isUserCreated));
export const makeGetSavedCache = (id: string) => createSelector(
[(state: RootState) => state.caches.saved],
(saved) => saved[id],
);
export const getDiscoveredCaches = (state: RootState) => Object.values(state.caches.discovered);
......@@ -5,9 +5,7 @@ import { CachesState } from './CachesState';
const cachesSlice = createSlice({
name: 'caches',
initialState: {
discovered: {
0: sampleCaches[0],
},
discovered: {},
saved: {
0: sampleCaches[0],
1: sampleCaches[1],
......
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