Commit 4f3425e1 authored by Milan DiGiuseppe's avatar Milan DiGiuseppe

react navigation 5, cleaned up TabNavigator, eslint bug hunt

parent d98b6944
......@@ -23,7 +23,9 @@
},
"plugins": ["react", "@typescript-eslint", "prettier"],
"rules": {
"func-names": "off",
"max-len": "error",
"no-console": "off",
"no-param-reassign": "off",
"react/proptypes": [0, {}],
"react/jsx-filename-extension": [
......@@ -37,6 +39,7 @@
"react/destructuring-assignment": "off",
"react/prop-types": "off",
"react/jsx-curly-brace-presence": ["error", { "props": "always" }],
"react/display-name": "off",
// "react-hooks/exhaustive-deps": "error",
"@typescript-eslint/indent": [2, 2],
"@typescript-eslint/explicit-function-return-type": "off",
......
{
"printWidth": 80
}
/* eslint-disable react/jsx-filename-extension */
import React from 'react';
import { Provider } from 'react-redux';
import { Icon } from 'react-native-elements';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { configureStore } from '@reduxjs/toolkit';
import DiscoverScreen from './src/screens/DiscoverScreen';
import MessageCreateScreen from './src/screens/MessageCreateScreen';
import SavedMessagesScreen from './src/screens/SavedMessagesScreen';
import theme from './src/theme';
import { NavigationContainer } from '@react-navigation/native';
import { getCurrentPosition } from './src/store/location/LocationActions';
import RootReducer from './src/store/RootReducer';
const TabNavigator = createBottomTabNavigator(
{
Discover: DiscoverScreen,
Saved: SavedMessagesScreen,
Create: MessageCreateScreen,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, color }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Saved') {
iconName = 'bookmark';
} else if (routeName === 'Discover') {
iconName = 'compass';
} else if (routeName === 'Create') {
iconName = 'pencil';
}
return (
<Icon
name={iconName}
type="font-awesome"
color={theme.colors.green}
/>
);
},
}),
},
);
const Nav = createAppContainer(TabNavigator);
import TabNavigator from './src/TabNavigator';
const store = configureStore({
reducer: RootReducer,
......@@ -52,7 +15,9 @@ store.dispatch(getCurrentPosition());
const App = () => (
<Provider store={store}>
<Nav />
<NavigationContainer>
<TabNavigator />
</NavigationContainer>
</Provider>
);
......
module.exports = function(api) {
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
......
This diff is collapsed.
import React from 'react';
import { Icon } from 'react-native-elements';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import DiscoverScreen from './screens/DiscoverScreen';
import MessageCreateScreen from './screens/MessageCreateScreen';
import SavedMessagesScreen from './screens/SavedMessagesScreen';
import theme from './theme';
const TabIcon: React.FC<{ name: string}> = ({ name }) => (
<Icon
name={name}
type={'font-awesome'}
color={theme.colors.green}
/>
);
const Tab = createBottomTabNavigator();
const TabNavigator = () => (
<Tab.Navigator
initialRouteName={'Saved'}
tabBarOptions={{
activeTintColor: theme.colors.green,
}}
>
<Tab.Screen
name={'Discover'}
component={DiscoverScreen}
options={{
tabBarIcon: () => <TabIcon name={'compass'} />,
}}
/>
<Tab.Screen
name={'Saved'}
component={SavedMessagesScreen}
options={{
tabBarIcon: () => <TabIcon name={'bookmark'} />,
}}
/>
<Tab.Screen
name={'Create'}
component={MessageCreateScreen}
options={{
tabBarIcon: () => <TabIcon name={'pencil'} />,
}}
/>
</Tab.Navigator>
);
export default TabNavigator;
export const getCurrentPosition = (callback) => {
navigator.geolocation.getCurrentPosition(
position => {
(position) => {
const lat = parseFloat(JSON.stringify(position.coords.latitude));
const long = parseFloat(JSON.stringify(position.coords.longitude));
callback(lat, long);
},
error => console.log(error.message),
(error) => {
console.log(error.message);
},
// { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
)
}
);
};
import React, { useState, useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { useNavigation } from 'react-navigation-hooks';
import { useNavigation } from '@react-navigation/native';
import {
Picker,
StyleSheet,
......
......@@ -64,7 +64,7 @@ const SavedMessagesScreen: React.FC = () => {
const handleDelete = useCallback(
(cache: Cache) => {
if (cache.isUserCreated) {
dispatch(deleteCache(cache.id, ''));
dispatch(deleteCache(cache.id));
} else {
dispatch(removeSaved(cache.id));
}
......
......@@ -9,4 +9,4 @@ const rootReducer = combineReducers({
export type RootState = ReturnType<typeof rootReducer>;
export default rootReducer;
\ No newline at end of file
export default rootReducer;
......@@ -31,9 +31,9 @@ export const createCache = (cache: Cache) => async (dispatch: Dispatch) => {
}));
};
export const deleteCache = (id: string, uuid: string) => async (dispatch: Dispatch) => {
export const deleteCache = (id: string) => async (dispatch: Dispatch) => {
dispatch(removeSaved(id));
const result = fetch(`${backendURL}/message`,
fetch(`${backendURL}/message`,
{
method: 'DELETE',
headers: {
......@@ -60,7 +60,11 @@ export const geoSearch = (location: LatLng, uuid: string) => async (dispatch: Di
caches.forEach((c: Cache) => dispatch(addDiscovered(c)));
};
export const reportCache = (id: string, uuid: string, reason: string) => async (dispatch: Dispatch) => {
export const reportCache = (
id: string,
uuid: string,
reason: string,
) => async (dispatch: Dispatch) => {
dispatch(removeDiscovered(id));
const result = await fetch(`${backendURL}/report`,
{
......
import locationSlice from './LocationSlice';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';
import { Dispatch } from '@reduxjs/toolkit';
import locationSlice from './LocationSlice';
export const {
setUserLatLng,
} = locationSlice.actions;
export const getCurrentPosition = () =>
async (dispatch) => {
const { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== 'granted') {
console.warn('Location permissions not granted');
}
const location = await Location.getCurrentPositionAsync({});
dispatch(setUserLatLng({
latitude: location.coords.latitude,
longitude: location.coords.longitude,
}))
};
export const getCurrentPosition = () => async (dispatch: Dispatch) => {
const { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== 'granted') {
console.warn('Location permissions not granted');
}
const location = await Location.getCurrentPositionAsync({});
dispatch(setUserLatLng({
latitude: location.coords.latitude,
longitude: location.coords.longitude,
}));
};
......@@ -7,12 +7,12 @@ const locationSlice = createSlice({
userLatLng: {
latitude: 0,
longitude: 0,
}
},
} as LocationState,
reducers: {
setUserLatLng(state, action) {
state.userLatLng = action.payload;
}
},
},
});
......
import { LatLng } from "react-native-maps";
import { LatLng } from 'react-native-maps';
export default interface LocationState {
userLatLng: LatLng;
}
\ No newline at end of file
// weird ass semicolon lint error below
// eslint-disable-next-line semi
}
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