Inclusão da base do app

Precisa rodar o npm install para as novas dependências
Encapsulamento dos diretórios do app em mobile/src
Configuração do Redux para a aplicação
Em mobile/src/actions, adicionados esqueletos básicos de requisições de API
Em mobile/src/reducers, adicionados esqueletos básicos do estado da aplicação
O componente principal em mobile/App.js foi reescrito para suportar as alterações

mobile/App.js

@@ -2,10 +2,16 @@ import { AppLoading } from 'expo';
 import { Asset } from 'expo-asset';
 import * as Font from 'expo-font';
 import React, { useState } from 'react';
+import { createStore, applyMiddleware } from 'redux';
+import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
 import { Platform, StatusBar, StyleSheet, View } from 'react-native';
+
 import { Ionicons } from '@expo/vector-icons';
+import reducers from './src/reducers';
+import AppNavigator from './src/navigation/AppNavigator';
 
-import AppNavigator from './navigation/AppNavigator';
+const store = createStore(reducers, applyMiddleware(thunk));
 
 export default function App(props) {
   const [isLoadingComplete, setLoadingComplete] = useState(false);
@@ -22,7 +28,9 @@ export default function App(props) {
     return (
       <View style={styles.container}>
         {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
-        <AppNavigator />
+        <Provider store={store}>
+          <AppNavigator />
+        </Provider>
       </View>
     );
   }
@@ -31,16 +39,12 @@ export default function App(props) {
 async function loadResourcesAsync() {
   await Promise.all([
     Asset.loadAsync([
-      require('./assets/images/robot-dev.png'),
-      require('./assets/images/robot-prod.png'),
+      require('assets/images/robot-dev.png'),
+      require('assets/images/robot-prod.png'),
     ]),
     Font.loadAsync({
-      // This is the font that we are using for our tab bar
-      ...Ionicons.font,
-      // We include SpaceMono because we use it in HomeScreen.js. Feel free to
-      // remove this if you are not using it in your app
-      'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
-    }),
+      ...Ionicons.font
+    })
   ]);
 }
 

mobile/app.json

@@ -3,17 +3,17 @@
     "name": "Flowit CRM App",
     "slug": "flowit-crm-app",
     "privacy": "public",
-    "sdkVersion": "34.0.0",
+    "sdkVersion": "35.0.0",
     "platforms": [
       "ios",
       "android",
       "web"
     ],
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/images/icon.png",
+    "icon": "./src/assets/images/icon.png",
     "splash": {
-      "image": "./assets/images/splash.png",
+      "image": "./src/assets/images/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
@@ -27,4 +27,4 @@
       "supportsTablet": true
     }
   }
-}
+}

mobile/babel.config.js

@@ -1,6 +1,23 @@
+// https://github.com/tleunen/babel-plugin-module-resolver/issues/341
 module.exports = function(api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
-  };
+    presets: ['babel-preset-expo', 'module:metro-react-native-babel-preset', 'module:react-native-dotenv'],
+    plugins: [
+      [
+        'module-resolver', {
+          root: ['./src'],
+          alias: {
+            '~actions': './actions',
+            '~assets': './assets',
+            '~components': './components',
+            '~constants': './constants',
+            '~navigation': './navigation',
+            '~reducers': './reducers',
+            '~screens': './screens'
+          }
+        }
+      ]
+    ]
+  }
 };

mobile/package.json

@@ -13,23 +13,33 @@
   },
   "dependencies": {
     "@expo/samples": "~3.0.3",
-    "@expo/vector-icons": "^10.0.3",
+    "@expo/vector-icons": "^10.0.0",
     "@react-navigation/web": "^1.0.0-alpha.9",
-    "expo": "^34.0.1",
-    "expo-asset": "^6.0.0",
-    "expo-constants": "6.0.0",
-    "expo-font": "~6.0.0",
-    "expo-web-browser": "6.0.0",
+    "axios": "^0.19.0",
+    "expo": "^35.0.0",
+    "expo-asset": "~7.0.0",
+    "expo-constants": "~7.0.0",
+    "expo-font": "~7.0.0",
+    "expo-store-review": "~1.0.0",
+    "expo-secure-store": "~7.0.0",
+    "expo-web-browser": "~7.0.1",
+    "formik": "^2.0.4",
     "react": "16.8.3",
-    "react-dom": "^16.8.6",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
+    "react-dom": "16.8.3",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
+    "react-native-dotenv": "^0.2.0",
+    "react-native-elements": "^1.2.7",
     "react-native-gesture-handler": "~1.3.0",
-    "react-native-web": "^0.11.4",
-    "react-navigation": "^3.11.0"
+    "react-native-web": "^0.11.7",
+    "react-navigation": "^3.11.0",
+    "react-redux": "^7.1.3",
+    "redux": "^4.0.4",
+    "redux-thunk": "^2.3.0",
+    "yup": "^0.27.0"
   },
   "devDependencies": {
-    "babel-preset-expo": "^6.0.0",
-    "jest-expo": "^34.0.0"
+    "babel-preset-expo": "^7.0.0",
+    "jest-expo": "^35.0.0"
   },
   "private": true
 }

mobile/src/actions/utils.js

@@ -0,0 +1,24 @@
+import axios from "axios";
+import { LOCAL_IP } from 'react-native-dotenv'
+
+export const apiClient = token => {
+  const headers = token ? { Authorization: `Token ${token}` } : null;
+  // https://www.freecodecamp.org/news/how-to-gracefully-use-environment-variables-in-a-react-native-app/
+  const baseURL = `http://${LOCAL_IP}:8000/api`;
+  if (headers) {
+    return axios.create({ baseURL, headers });
+  }
+  return axios.create({ baseURL });
+};
+
+export const apiTypes = base => ({
+  request: `${base.toUpperCase()}_REQUEST`,
+  success: `${base.toUpperCase()}_SUCCESS`,
+  failure: `${base.toUpperCase()}_FAILURE`
+});
+
+export const apiActionCreators = (dispatch, types) => ({
+  request: () => dispatch({ type: types.request }),
+  success: payload => dispatch({ type: types.success, payload }),
+  failure: payload => dispatch({ type: types.failure, payload })
+});

mobile/components/StyledText.js → mobile/src/components/StyledText.js

@@ -3,6 +3,6 @@ import { Text } from 'react-native';
 
 export function MonoText(props) {
   return (
-    <Text {...props} style={[props.style, { fontFamily: 'space-mono' }]} />
+    <Text {...props} style={props.style} />
   );
 }

mobile/components/TabBarIcon.js → mobile/src/components/TabBarIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Ionicons } from '@expo/vector-icons';
 
-import Colors from '../constants/Colors';
+import Colors from 'constants/Colors';
 
 export default function TabBarIcon(props) {
   return (

mobile/navigation/MainTabNavigator.js → mobile/src/navigation/MainTabNavigator.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { Platform } from 'react-native';
 import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
 
-import TabBarIcon from '../components/TabBarIcon';
-import HomeScreen from '../screens/HomeScreen';
-import LinksScreen from '../screens/LinksScreen';
-import SettingsScreen from '../screens/SettingsScreen';
+import TabBarIcon from 'components/TabBarIcon';
+import HomeScreen from 'screens/HomeScreen';
+import LinksScreen from 'screens/LinksScreen';
+import SettingsScreen from 'screens/SettingsScreen';
 
 const config = Platform.select({
   web: { headerMode: 'screen' },

mobile/src/reducers/index.js

@@ -0,0 +1,5 @@
+import { combineReducers } from 'redux';
+
+export default combineReducers({
+  user: (state = {}, action) => state
+});

mobile/screens/HomeScreen.js → mobile/src/screens/HomeScreen.js

@@ -10,7 +10,8 @@ import {
   View
 } from 'react-native';
 
-import { MonoText } from '../components/StyledText';
+import { MonoText } from 'components/StyledText';
+import { LOCAL_IP } from 'react-native-dotenv';
 
 export default function HomeScreen() {
   return (
@@ -23,12 +24,12 @@ export default function HomeScreen() {
           <Image
             source={
               __DEV__
-                ? require('../assets/images/robot-dev.png')
-                : require('../assets/images/robot-prod.png')
+                ? require('assets/images/robot-dev.png')
+                : require('assets/images/robot-prod.png')
             }
             style={styles.welcomeImage}
           />
-          <Text>Opaaaaa agora vai!</Text>
+          <Text>{LOCAL_IP}</Text>
         </View>
 
         <View style={styles.getStartedContainer}>