💄 Feat: create new icons and new features home

CarolAgueraAguiar · Sep 21, 2023 · 546b425 · 546b425
1 parent 9b20fc6
commit 546b425
Show file tree

Hide file tree

Showing 14 changed files with 407 additions and 48 deletions.
diff --git a/App.tsx b/App.tsx
@@ -14,10 +14,17 @@ import {
   Roboto_900Black_Italic,
 } from "@expo-google-fonts/roboto";
 import AppLoading from "expo-app-loading";
-import UserContextProvider from "./src/context/UserContext";
+import UserContextProvider, { UserContext } from "./src/context/UserContext";
 import { Main } from "./src/Routes/routes";
+import { AppRegistry } from "react-native";
+import * as SecureStore from "expo-secure-store";
+import { useContext, useEffect } from "react";
+
+AppRegistry.registerComponent("YourAppName", () => App);
 
 export default function App() {
+  const context = useContext(UserContext);
+
   let [fontsLoaded] = useFonts({
     Roboto_100Thin,
     Roboto_100Thin_Italic,
@@ -33,12 +40,29 @@ export default function App() {
     Roboto_900Black_Italic,
   });
 
+  let isAuthenticated = false;
+
+  async function checkAuth() {
+    try {
+      const token = await SecureStore.getItemAsync("sessionToken");
+      if (token) {
+        isAuthenticated = true;
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  useEffect(() => {
+    checkAuth();
+  }, [context?.user.token]);
+
   if (!fontsLoaded) {
     return <AppLoading />;
   } else {
     return (
       <UserContextProvider>
-        <Main />
+        <Main isAuthenticated={isAuthenticated} />
       </UserContextProvider>
     );
   }

diff --git a/assets/svg/Bank.tsx b/assets/svg/Bank.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+export const BankIcon = () => {
+  return (
+    <Svg width={30} height={30} viewBox="0 0 20 20" fill="none">
+      <Path
+        d="M1.667 6.667V10H2.5V15h-.833v2.5h16.666V15H17.5v-5h.833V6.668l-8.333-5-8.333 5zM5 15v-5h1.667v5H5zm4.167 0v-5h1.666v5H9.167zM15 15h-1.667v-5H15v5zm-3.333-8.333A1.669 1.669 0 018.82 7.845a1.667 1.667 0 112.847-1.178z"
+        fill="#fff"
+      />
+    </Svg>
+  );
+};
diff --git a/assets/svg/Plants.tsx b/assets/svg/Plants.tsx
@@ -3,7 +3,7 @@ import Svg, { Path } from "react-native-svg";
 
 export const Plants = () => {
   return (
-    <Svg width={148} height={185} fill="none">
+    <Svg width={120} height={185} fill="none">
       <Path fill="#FFC727" d="M81 82c6-12 24-2 17 9-6 12-23 3-17-9z" />
       <Path
         fill="#000"

diff --git a/assets/svg/WalletIcon.tsx b/assets/svg/WalletIcon.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+export const WalletIcon = () => {
+  return (
+    <Svg width={30} height={30} viewBox="0 0 20 20" fill="none">
+      <Path d="M11.667 7.5h6.666v5h-6.666v-5z" fill="#fff" />
+      <Path
+        d="M16.667 2.5h-12.5a2.503 2.503 0 00-2.5 2.5v10c0 1.378 1.121 2.5 2.5 2.5h12.5c.919 0 1.666-.747 1.666-1.667v-1.666h-6.666c-.92 0-1.667-.748-1.667-1.667v-5c0-.92.748-1.667 1.667-1.667h6.666V4.167c0-.92-.747-1.667-1.666-1.667z"
+        fill="#fff"
+      />
+    </Svg>
+  );
+};
diff --git a/babel.config.js b/babel.config.js
@@ -1,6 +1,15 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ["babel-preset-expo"],
+    plugins: [
+      [
+        "module-resolver",
+        {
+          extensions: [".tsx", ".ts", ".js", ".json"],
+        },
+      ],
+      "react-native-reanimated/plugin",
+    ],
   };
 };
diff --git a/package.json b/package.json
@@ -3,28 +3,32 @@
   "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "expo start",
+    "start": "expo start --clear",
+    "doctor": "npx doctor --fix-dependencies",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web"
   },
   "dependencies": {
     "@expo-google-fonts/roboto": "^0.2.3",
     "@expo/webpack-config": "^19.0.0",
+    "@react-navigation/drawer": "^6.6.3",
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/stack": "^6.3.17",
     "axios": "^1.5.0",
     "expo": "~49.0.8",
     "expo-app-loading": "^2.1.1",
     "expo-font": "^11.4.0",
+    "expo-secure-store": "~12.3.1",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.46.1",
     "react-native": "0.72.4",
-    "react-native-gesture-handler": "^2.12.1",
-    "react-native-safe-area-context": "^4.7.2",
-    "react-native-screens": "^3.25.0",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
     "react-native-svg": "13.9.0",
     "react-native-vector-icons": "^10.0.0",
     "react-native-web": "~0.19.8"

diff --git a/src/Routes/routes.tsx b/src/Routes/routes.tsx
@@ -1,35 +1,38 @@
-import { useContext } from "react";
-import { UserContext } from "../context/UserContext";
+import { useContext, useEffect } from "react";
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import { theme } from "../../styles/theme";
 import Home from "../templates/Home/Home";
 import WelcomeScreen from "../templates/Welcome/Welcome";
 import { SignUp } from "../templates/SignUp/SignUp";
 import { Login } from "../templates/Login/Login";
+import { Wallet } from "../templates/Wallet/Wallet";
 
 const Stack = createStackNavigator();
 
-export const Main = () => {
-  const context = useContext(UserContext);
-  const isAuthenticated = context?.user.token ? true : false;
+export const Main = ({ isAuthenticated }: any) => {
   return (
-    <>
-      <NavigationContainer theme={theme}>
-        <Stack.Navigator>
-          {isAuthenticated ? (
-            <Stack.Group>
-              <Stack.Screen name="Inicio" component={Home} />
-            </Stack.Group>
+    <NavigationContainer theme={theme}>
+      <Stack.Navigator
+        screenOptions={{ headerShown: true }}
+        initialRouteName="Home"
+      >
+        <Stack.Group>
+          {/* {isAuthenticated ? (
+            <>
+              <Stack.Screen name="Home" component={Home} />
+            </>
           ) : (
-            <Stack.Group screenOptions={{ headerShown: false }}>
-              <Stack.Screen name="Home" component={WelcomeScreen} />
-              <Stack.Screen name="Cadastrar" component={SignUp} />
-              <Stack.Screen name="Login" component={Login} />
-            </Stack.Group>
-          )}
-        </Stack.Navigator>
-      </NavigationContainer>
-    </>
+          <> */}
+          <Stack.Screen name="Home" component={Home} />
+          <Stack.Screen name="Welcome" component={WelcomeScreen} />
+          <Stack.Screen name="Cadastrar" component={SignUp} />
+          <Stack.Screen name="Login" component={Login} />
+          <Stack.Screen name="Wallet" component={Wallet} />
+          {/* </>
+          )} */}
+        </Stack.Group>
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 };
diff --git a/src/components/ButtonCategory/ButtonCategory.tsx b/src/components/ButtonCategory/ButtonCategory.tsx
@@ -0,0 +1,90 @@
+import {
+  ColorValue,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { theme } from "../../../styles/theme";
+import { WalletIcon } from "../../../assets/svg/WalletIcon";
+
+export type ButtonCategoryProps = {
+  categoryName: string;
+  onClick: () => void;
+  icon: React.ReactNode;
+  color: ColorValue;
+};
+
+export const ButtonCategory = ({
+  categoryName,
+  onClick,
+  icon,
+  color,
+}: ButtonCategoryProps) => {
+  const styles = StyleSheet.create({
+    circle: {
+      width: 70,
+      height: 70,
+      borderRadius: 70 / 2,
+      backgroundColor: color,
+      aspectRatio: 1,
+    },
+    icon: {
+      width: 70,
+      height: 70,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    primaryButton: {
+      margin: 10,
+      backgroundColor: theme.colorsSecondary.green[400],
+      paddingVertical: 10,
+      paddingHorizontal: 20,
+      borderRadius: 5,
+    },
+    secondaryButton: {
+      margin: 10,
+      backgroundColor: theme.colorsSecondary.blue[400],
+      paddingVertical: 10,
+      paddingHorizontal: 20,
+      borderRadius: 5,
+    },
+    buttonText: {
+      color: "white",
+      fontSize: 16,
+      textAlign: "center",
+    },
+  });
+
+  return (
+    <View
+      style={{
+        display: "flex",
+        alignItems: "center",
+        flexDirection: "column",
+        justifyContent: "center",
+        width: "33.33%"
+      }}
+    >
+      <Text
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          fontWeight: "600",
+          marginBottom: 10,
+          fontSize: 16,
+          textAlign: "center",
+        }}
+      >
+        {categoryName}
+      </Text>
+      <TouchableOpacity onPress={onClick}>
+        <View style={styles.circle}>
+          <View style={styles.icon}>{icon}</View>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
diff --git a/src/services/users/users.ts b/src/services/users/users.ts
@@ -26,7 +26,7 @@ export const login = async ({
 }: LoginProps): Promise<LoginResponse> => {
   try {
     const { data } = await axios.post<LoginResponse>(
-      "http://localhost:3000/users/login",
+      "http://192.168.3.41:3000/users/login",
       {
         email,
         password,
@@ -45,7 +45,7 @@ export const storeUsers = async ({
   confirmPassword,
 }: StoreUsersProps) => {
   try {
-    const { data } = await axios.post("http://localhost:3000/users", {
+    const { data } = await axios.post("http://192.168.3.41:3000/users", {
       name,
       email,
       password,
@@ -55,15 +55,15 @@ export const storeUsers = async ({
     });
     return data;
   } catch (e: any) {
-    console.log(e.response.data);
+    return e;
   }
 };
 
 export const getUsers = async () => {
   try {
-    const { data } = await axios.get("http://localhost:3000/users");
+    const { data } = await axios.get("http://192.168.3.41:3000/users");
     return data;
   } catch (e: any) {
-    console.log(e);
+    return e;
   }
 };
diff --git a/src/templates/Home/Home.tsx b/src/templates/Home/Home.tsx
@@ -4,8 +4,11 @@ import { Wallet } from "../../../assets/svg/Wallet";
 import { useContext } from "react";
 import { UserContext } from "../../context/UserContext";
 import { theme } from "../../../styles/theme";
+import { ButtonCategory } from "../../components/ButtonCategory/ButtonCategory";
+import { WalletIcon } from "../../../assets/svg/WalletIcon";
+import { BankIcon } from "../../../assets/svg/Bank";
 
-function Home() {
+function Home({ navigation }: any) {
   const context = useContext(UserContext);
 
   return (
@@ -63,6 +66,34 @@ function Home() {
         <View>
           <Text style={styles.text}>Minha Carteira</Text>
         </View>
+        <View
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: "wrap",
+            padding: 24,
+            width: "100%",
+          }}
+        >
+          <ButtonCategory
+            onClick={() => navigation.navigate("Wallet")}
+            categoryName="Carteiras"
+            icon={<WalletIcon />}
+            color="#730fc3"
+          />
+          <ButtonCategory
+            onClick={() => navigation.navigate("Wallet")}
+            categoryName="Receita"
+            icon={<BankIcon />}
+            color={theme.colorsSecondary.green[400]}
+          />
+          <ButtonCategory
+            onClick={() => navigation.navigate("Wallet")}
+            categoryName="Despesa"
+            icon={<BankIcon />}
+            color="#d3465c"
+          />
+        </View>
       </View>
     </View>
   );
@@ -134,7 +165,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: "700",
     padding: 24,
-    margin: 12,
   },
 });
 export default Home;