uploading finished project

CarlosAlbertoTI · Jan 29, 2024 · e2bcdf7 · e2bcdf7
1 parent 8dbeae6
commit e2bcdf7
Show file tree

Hide file tree

Showing 25 changed files with 1,076 additions and 257 deletions.
diff --git a/App.tsx b/App.tsx
@@ -5,10 +5,10 @@ import { useFonts, Roboto_400Regular, Roboto_700Bold } from '@expo-google-fonts/
 import { THEME } from './src/theme';
 
 import { Loading } from '@components/Loading';
-import { SignIn } from '@screens/Signin';
 
 import { Routes } from '@routes/index';
 
+import { AuthContextProvider } from '@contexts/AuthContext';
 
 export default function App() {
   const [fontsLoaded] = useFonts({
@@ -22,7 +22,9 @@ export default function App() {
         backgroundColor='transparent'
         translucent
       />
-      {fontsLoaded ? <Routes /> : <Loading />}
+      <AuthContextProvider>
+        {fontsLoaded ? <Routes /> : <Loading />}
+      </AuthContextProvider>
     </NativeBaseProvider>
   );
 }
diff --git a/package.json b/package.json
@@ -29,7 +29,8 @@
     "react-native-screens": "~3.18.0",
     "react-native-svg": "13.4.0",
     "react-native-web": "~0.18.9",
-    "yup": "^1.0.0"
+    "yup": "^1.0.0",
+    "@react-native-async-storage/async-storage": "~1.17.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

diff --git a/src/components/ExerciseCard.tsx b/src/components/ExerciseCard.tsx
@@ -2,16 +2,21 @@ import { Heading, HStack, Icon, Image, Text, VStack } from "native-base";
 import { Entypo } from '@expo/vector-icons'
 import { TouchableOpacity, TouchableOpacityProps } from "react-native";
 
-interface ExerciseCardProps extends TouchableOpacityProps { }
+import { ExerciseDTO } from "@dtos/ExerciseDTO";
+import { api } from "@services/http.service";
 
-export function ExerciseCard({ ...rest }: ExerciseCardProps) {
+interface ExerciseCardProps extends TouchableOpacityProps {
+    data: ExerciseDTO
+ }
+
+export function ExerciseCard({data, ...rest }: ExerciseCardProps) {
     return (
         <TouchableOpacity
             {...rest}
         >
             <HStack bg="gray.500" alignItems="center" p={2} pr={4} rounded="md" mb={3}>
                 <Image
-                    source={{ uri: 'http://conteudo.imguol.com.br/c/entretenimento/0c/2019/12/03/remada-unilateral-com-halteres-1575402100538_v2_600x600.jpg' }}
+                    source={{ uri: `${api.defaults.baseURL}/exercise/thumb/${data.thumb}` }}
                     alt="Imagem do exercício"
                     w={16}
                     h={16}
@@ -21,10 +26,10 @@ export function ExerciseCard({ ...rest }: ExerciseCardProps) {
                 />
                 <VStack flex={1}>
                     <Heading fontSize="lg" color="white">
-                        Remada Alternada
+                        {data.name}
                     </Heading>
                     <Text fontSize="sm" color="gray.200" mt={1} numberOfLines={2}>
-                        2 séries x 12 repetições
+                        {data.series} séries x {data.repetitions} repetições
                     </Text>
                 </VStack>
 

diff --git a/src/components/HistoryCard.tsx b/src/components/HistoryCard.tsx
@@ -1,20 +1,25 @@
+import { HistoryDTO } from "@dtos/historyDTO";
 import { Heading, HStack, Text, VStack } from "native-base";
 
-export function HistoryCard() {
+interface HistoryCardProps {
+    data: HistoryDTO
+}
+
+export function HistoryCard({ data }: HistoryCardProps) {
     return (
         <HStack w={"full"} px={5} py={4} mb={3} bg="gray.600" rounded={"md"} alignItems="center" justifyContent={"space-between"}>
             <VStack mr={5} flex={1}>
                 <Heading color={"white"} fontSize="md" textTransform={"capitalize"} numberOfLines={1} fontFamily="heading">
-                    Costas
+                    {data.group}
                 </Heading>
 
                 <Text color={"gray.100"} fontSize="lg" numberOfLines={1}>
-                    Puxada frontal
+                    {data.name}
                 </Text>
             </VStack>
 
             <Text color={"gray.300"} fontSize="md">
-                08:56
+                {data.hour}
             </Text>
         </HStack>
     )

diff --git a/src/components/HomeHeader.tsx b/src/components/HomeHeader.tsx
@@ -1,13 +1,27 @@
 import { Heading, HStack, Icon, Text, VStack } from "native-base";
 import { MaterialIcons } from '@expo/vector-icons'
 import { TouchableOpacity } from "react-native";
+
+import { api } from "@services/http.service";
+
+import { useAuth } from "@hooks/useAuth";
+
+import defaulUserPhotoImg from '@assets/userPhotoDefault.png'; 
+
 import { UserPhoto } from "./UserPhoto";
 
 export function HomeHeader() {
+
+    const { user, signOut } = useAuth()
+
+    console.info(`${api.defaults.baseURL}/avatar/${user.avatar}`)
+
     return (
         <HStack bg="gray.600" pt={8} pb={5} px={6} alignItems="center">
             <UserPhoto
-                source={{ uri: 'https://github.com/CarlosAlbertoTI.png' }}
+                source={ user.avatar  
+                    ? { uri: `${api.defaults.baseURL}/avatar/${user.avatar}` } 
+                    : defaulUserPhotoImg }
                 size={16}
                 alt="Imagem do Usuário"
                 mr={4}
@@ -17,10 +31,10 @@ export function HomeHeader() {
                     Olá,
                 </Text>
                 <Heading color="gray.100" fontSize="md" fontFamily="heading">
-                    Carlos
+                    {user.name}
                 </Heading>
             </VStack>
-            <TouchableOpacity>
+            <TouchableOpacity onPress={signOut}>
                 <Icon
                     as={MaterialIcons}
                     name="logout"

diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
@@ -0,0 +1,143 @@
+import { createContext, ReactNode, useEffect, useState } from "react";
+
+import {
+  storageAuthTokenSave,
+  storageAuthTokenGet,
+  storageAuthTokenRemove,
+} from "@storage/storageAuthToken";
+import {
+  storageUserGet,
+  storageUserRemove,
+  storageUserSave,
+} from "@storage/storageUser";
+
+import { api } from "@services/http.service";
+import { UserDTO } from "@dtos/UserDTO";
+
+export type AuthContextDataProps = {
+  user: UserDTO;
+  singIn: (email: string, password: string) => Promise<void>;
+  updateUserProfile: (userUpdated: UserDTO) => Promise<void>;
+  signOut: () => Promise<void>;
+  isLoadingUserStorageData: boolean;
+};
+
+type AuthContextProviderProps = {
+  children: ReactNode;
+};
+
+export const AuthContext = createContext<AuthContextDataProps>(
+  {} as AuthContextDataProps
+);
+
+export function AuthContextProvider({ children }: AuthContextProviderProps) {
+  const [user, setUser] = useState<UserDTO>({} as UserDTO);
+  const [isLoadingUserStorageData, setIsLoadingUserStorageData] =
+    useState(true);
+
+  async function userAndTokenUpdate(userData: UserDTO, token: string) {
+    api.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+
+    setUser(userData);
+  }
+
+  async function storageUserAndTokenSave(
+    userData: UserDTO,
+    token: string,
+    refresh_token: string
+  ) {
+    try {
+      setIsLoadingUserStorageData(true);
+      await storageUserSave(userData);
+      await storageAuthTokenSave({ token, refresh_token });
+    } catch (error) {
+      throw error;
+    } finally {
+      setIsLoadingUserStorageData(false);
+    }
+  }
+
+  async function singIn(email: string, password: string) {
+    try {
+      const { data } = await api.post("/sessions", { email, password });
+
+      if (data.user && data.token && data.refresh_token) {
+        await storageUserAndTokenSave(
+          data.user,
+          data.token,
+          data.refresh_token
+        );
+        userAndTokenUpdate(data.user, data.token);
+      }
+    } catch (error) {
+      throw error;
+    } finally {
+      setIsLoadingUserStorageData(false);
+    }
+  }
+
+  async function signOut() {
+    try {
+      setIsLoadingUserStorageData(true);
+      setUser({} as UserDTO);
+      await storageUserRemove();
+      await storageAuthTokenRemove();
+    } catch (error) {
+      throw error;
+    } finally {
+      setIsLoadingUserStorageData(false);
+    }
+  }
+
+  async function updateUserProfile(userUpdated: UserDTO) {
+    try {
+      setUser(userUpdated);
+      await storageUserSave(userUpdated);
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async function loadUserData() {
+    try {
+      setIsLoadingUserStorageData(true);
+
+      const userLogged = await storageUserGet();
+      const { token } = await storageAuthTokenGet();
+
+      if (token && userLogged) {
+        userAndTokenUpdate(userLogged, token);
+      }
+    } catch (error) {
+      throw error;
+    } finally {
+      setIsLoadingUserStorageData(false);
+    }
+  }
+
+  useEffect(() => {
+    loadUserData();
+  }, []);
+
+  useEffect(() => {
+    const subscribe = api.registerInterceptTokenManager(signOut);
+
+    return () => {
+      subscribe();
+    };
+  }, [signOut]);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        singIn,
+        signOut,
+        isLoadingUserStorageData,
+        updateUserProfile,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
diff --git a/src/dtos/ExerciseDTO.ts b/src/dtos/ExerciseDTO.ts
@@ -0,0 +1,10 @@
+export interface ExerciseDTO {
+    id: string,
+    demo: string,
+    group: string,
+    name: string,
+    repetitions: string,
+    series: number,
+    thumb: string,
+    updated_at: string,
+}
diff --git a/src/dtos/HistoryByDayDTO.ts b/src/dtos/HistoryByDayDTO.ts
@@ -0,0 +1,5 @@
+import { HistoryDTO } from '@dtos/historyDTO';
+export interface HistoryByDayDTO{
+    title: string,
+    data: HistoryDTO[]
+}
diff --git a/src/dtos/HistoryDTO.ts b/src/dtos/HistoryDTO.ts
@@ -0,0 +1,7 @@
+export interface HistoryDTO {
+    id: string,
+    name: string,
+    group: string,
+    hour: string,
+    created_at: string
+}
diff --git a/src/dtos/UserDTO.ts b/src/dtos/UserDTO.ts
@@ -0,0 +1,6 @@
+export interface UserDTO {
+  id: string;
+  name: string;
+  email: string;
+  avatar: string;
+}
diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx
@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import { AuthContext } from "@contexts/AuthContext";
+
+export function useAuth() {
+    const context = useContext(AuthContext)
+    return context
+}
diff --git a/src/routes/app.routes.tsx b/src/routes/app.routes.tsx
@@ -13,7 +13,7 @@ import { Profile } from '@screens/Profile';
 
 type AppRoutes = {
   home: undefined;
-  exercise: undefined;
+  exercise: { exerciseId: string};
   profile: undefined;
   history: undefined;
 }

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -1,21 +1,32 @@
+
 import { DefaultTheme, NavigationContainer } from "@react-navigation/native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useTheme } from "native-base";
 
+import { useAuth } from '@hooks/useAuth'
 
 import { AuthRoutes } from "./auth.routes";
 import { AppRoutes } from "./app.routes";
 
+import { Loading } from "@components/Loading";
+
 export function Routes() {
     const { colors } = useTheme()
+    const { user, isLoadingUserStorageData } = useAuth()
 
     const theme = DefaultTheme
     theme.colors.background = colors.gray[700]
 
+    if (isLoadingUserStorageData) {
+        return (
+            <Loading></Loading>
+        )
+    }
+
     return (
         <SafeAreaView style={{ flex: 1, backgroundColor: colors.gray[700] }}>
             <NavigationContainer >
-                <AuthRoutes />
+                {user.id ? <AppRoutes /> : <AuthRoutes />}
             </NavigationContainer>
         </SafeAreaView>
     )