Projeto Shop App, utilizando firebase finalizado

Author: davizardb

shop-app/App.js

@@ -7,16 +7,21 @@ import * as Font from "expo-font";
 import ReduxThunk from "redux-thunk";
 // import { composeWithDevTools } from "redux-devtools-extension";
 
+import { LogBox } from "react-native";
+LogBox.ignoreLogs(["Setting a timer for a long period of time, i.e."]);
+
 import productsReducer from "./store/reducers/productsReducer";
 import cartReducer from "./store/reducers/cartReducer";
 import ordersReducer from "./store/reducers/ordersReducer";
-import ShopNavigator from "./navigation/ShopNavigator";
+import authReducer from "./store/reducers/authReducer";
+import NavigationContainer from "./navigation/NavigationContainer";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 const rootReducer = combineReducers({
   products: productsReducer,
   cart: cartReducer,
   orders: ordersReducer,
+  auth: authReducer,
 });
 
 const store = createStore(rootReducer, applyMiddleware(ReduxThunk));
@@ -44,7 +49,7 @@ export default function App() {
   return (
     <Provider store={store}>
       <SafeAreaView style={{ flex: 1 }}>
-        <ShopNavigator />
+        <NavigationContainer />
       </SafeAreaView>
     </Provider>
   );

shop-app/README.md

@@ -0,0 +1,20 @@
+# Shop App
+
+<p align="center">
+  <img src="screen01.jpeg" width="25%"  alt="tela da aplicação">
+  <img src="screen02.jpeg" width="25%"  alt="tela da aplicação">
+  <img src="screen03.jpeg" width="25%"  alt="tela da aplicação">
+  <img src="screen04.jpeg" width="25%"  alt="tela da aplicação">
+  <img src="screen05.jpeg" width="25%"  alt="tela da aplicação">
+  <img src="screen06.jpeg" width="25%"  alt="tela da aplicação">
+  <img src="screen07.jpeg" width="25%"  alt="tela da aplicação">
+  <img src="screen08.jpeg" width="25%"  alt="tela da aplicação">
+  <img src="screen09.jpeg" width="25%"  alt="tela da aplicação">
+  <img src="screen10.jpeg" width="25%"  alt="tela da aplicação">
+  <img src="screen11.jpeg" width="25%"  alt="tela da aplicação">
+  <img src="screen12.jpeg" width="25%"  alt="tela da aplicação">
+  <img src="screen13.jpeg" width="25%"  alt="tela da aplicação">
+  <img src="screen14.jpeg" width="25%"  alt="tela da aplicação">
+</p>
+
+> Projeto mais robusto usando Expo, de um aplicativo com dados hospedados no servidor e base de dados do Firebase, sendo necessário realizar o Log in ou Sign up, com token de autenticação armazenado localmente pelo AsyncStorage, podendo adicionar produtos, editar, deletar, adicioná-los ao carrinho, fechar o pedido, os produtos são relacionados com a autenticação do usuário pelo Firebase, com gerenciamento de estados usando Redux, validação de Inputs, react navigation, stack, drawer, switch, projeto feito por Maximilian Schwarzmüller.

shop-app/navigation/NavigationContainer.js

@@ -0,0 +1,22 @@
+import React, { useEffect, useRef } from "react";
+import { useSelector } from "react-redux";
+import { NavigationActions } from "react-navigation";
+
+import ShopNavigator from "./ShopNavigator";
+
+const NavigationContainer = () => {
+  const navRef = useRef();
+  const isAuth = useSelector((state) => !!state.auth.token);
+
+  useEffect(() => {
+    if (!isAuth) {
+      navRef.current.dispatch(
+        NavigationActions.navigate({ routeName: "Auth" })
+      );
+    }
+  }, [isAuth]);
+
+  return <ShopNavigator ref={navRef} />;
+};
+
+export default NavigationContainer;

shop-app/navigation/ShopNavigator.js

@@ -1,18 +1,25 @@
 import React from "react";
 import { createStackNavigator } from "react-navigation-stack";
-import { createDrawerNavigator } from "react-navigation-drawer";
-import { createAppContainer } from "react-navigation";
-import { Platform } from "react-native";
+import { createDrawerNavigator, DrawerItems } from "react-navigation-drawer";
+// import { createSwitchNavigator } from "react-navigation-switch";
+import { createAppContainer, createSwitchNavigator } from "react-navigation";
+import { Platform, SafeAreaView, Button, View } from "react-native";
 
 import ProductsOverviewScreen from "../screens/shop/ProductsOverviewScreen";
 import ProductDetailScreen from "../screens/shop/ProductDetailScreen";
 import CartScreen from "../screens/shop/CartScreen";
 import OrdersScreen from "../screens/shop/OrdersScreen";
 import UserProductsScreen from "../screens/user/UserProductsScreen";
 import EditProductScreen from "../screens/user/EditProductScreen";
+import StartupScreen from "../screens/user/StartupScreen";
+import AuthScreen from "../screens/user/AuthScreen";
+
 import Colors from "../constants/Colors";
 import { Ionicons } from "@expo/vector-icons";
 
+import { useDispatch } from "react-redux";
+import * as authActions from "../store/actions/actionsAuth";
+
 const defaultNavOptions = {
   headerTitleAlign: "center",
   headerStyle: {
@@ -94,7 +101,39 @@ const ShopNavigator = createDrawerNavigator(
     contentOptions: {
       activeTintColor: Colors.primary,
     },
+    contentComponent: (props) => {
+      const dispatch = useDispatch();
+      return (
+        <View style={{ flex: 1 }}>
+          <SafeAreaView forceInset={{ top: "always", horizontal: "never" }}>
+            <DrawerItems {...props} />
+            <Button
+              title="Logout"
+              color={Colors.primary}
+              onPress={() => {
+                dispatch(authActions.logout());
+              }}
+            />
+          </SafeAreaView>
+        </View>
+      );
+    },
   }
 );
 
-export default createAppContainer(ShopNavigator);
+const AuthNavigator = createStackNavigator(
+  {
+    Auth: AuthScreen,
+  },
+  {
+    defaultNavigationOptions: defaultNavOptions,
+  }
+);
+
+const MainNavigator = createSwitchNavigator({
+  Startup: StartupScreen,
+  Auth: AuthNavigator,
+  Shop: ShopNavigator,
+});
+
+export default createAppContainer(MainNavigator);

shop-app/package-lock.json

@@ -11,11 +11,13 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^12.0.5",
+    "@react-native-async-storage/async-storage": "~1.15.0",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-navigation/native": "^6.0.8",
     "expo": "~44.0.0",
     "expo-app-loading": "~1.3.0",
     "expo-font": "^10.0.5",
+    "expo-linear-gradient": "^11.0.3",
     "expo-status-bar": "~1.2.0",
     "moment": "^2.29.1",
     "react": "17.0.1",
@@ -31,6 +33,7 @@
     "react-navigation-drawer": "^2.7.2",
     "react-navigation-header-buttons": "^9.0.1",
     "react-navigation-stack": "^2.10.4",
+    "react-navigation-switch": "^1.0.1",
     "react-redux": "^7.2.6",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1"