hooksAndUpdateProfile

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",

src/components/header/index.jsx

@@ -1,20 +1,25 @@
-import { Container,Profile,Logout} from "./style";
-import {RiShutDownLine} from'react-icons/ri'
-
-export function Header(){
-    return(
-
-        <Container>
-            <Profile to="/profile">
-                <img src="https://github.com/rickccastro.png" alt="foto do usuario" />
-                <div>
-                    <span>bem vindo</span>
-                    <strong>Ricardo Castro</strong>
-                </div>
-            </Profile>
-            <Logout>
-                <RiShutDownLine />
-            </Logout>
-        </Container>
-    )
-}
+import { Container,Profile,Logout} from "./style";
+import {RiShutDownLine} from'react-icons/ri'
+import { api } from "../../services/api";
+import { useAuth } from "../../hooks/auth";
+
+export function Header(){
+    const {signOut,user}=useAuth()
+
+    const avatarUrl=user.avatar ? `${api.defaults.baseURL}/files/${user.avatar}` : avatarPlacehoalder
+
+    return(
+        <Container>
+            <Profile to="/profile">
+                <img src={avatarUrl} alt={user.name} />
+                <div>
+                    <span>bem vindo</span>
+                    <strong>{user.name}</strong>
+                </div>
+            </Profile>
+            <Logout onClick={signOut}>
+                <RiShutDownLine />
+            </Logout>
+        </Container>
+    )
+}

src/components/input/style.js

@@ -1,32 +1,32 @@
-import styled from "styled-components";
-
-
-export const Container = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-
-  background-color: ${({ theme }) => theme.COLORS.BACKGROUND_900} ;
-  color: ${({ theme }) => theme.COLORS.GRAY_300};
-  
-  margin-bottom: 8px;
-  border-radius: 10px;
-
-  > input {
-    height: 56px;
-    width: 100%;
-
-    padding: 12px;
-    color: ${({ theme }) => theme.COLORS.WHITE};
-    background: transparent;
-    border: 0;
-
-    &:placeholder {
-      color: ${({ theme }) => theme.COLORS.GRAY_300} 
-    }
-  }
-
-  > svg {
-    margin-left: 16px;
-  }
+import styled from "styled-components";
+
+
+export const Container = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+
+  background-color: ${({ theme }) => theme.COLORS.BACKGROUND_900} ;
+  color: ${({ theme }) => theme.COLORS.GRAY_300};
+  
+  margin-bottom: 8px;
+  border-radius: 10px;
+
+  > input {
+    height: 56px;
+    width: 100%;
+
+    padding: 12px;
+    color: ${({ theme }) => theme.COLORS.WHITE};
+    background: transparent;
+    border: 0;
+
+    &::placeholder {
+      color: ${({ theme }) => theme.COLORS.GRAY_300} 
+    }
+  }
+
+  > svg {
+    margin-left: 16px;
+  }
 `

src/hooks/auth.jsx

@@ -0,0 +1,101 @@
+import { createContext,useContext,useState,useEffect } from "react";
+
+import { api } from "../services/api";
+
+export const AuthContext=createContext({})
+
+function AuthProvider({children}){
+    const[data,setData]=useState({})
+
+    async function signIn({email,password}){
+        try{
+            const response=await api.post("/sessions",{email,password})
+            const {user,token}=response.data
+
+            localStorage.setItem("@rocketnotes:user",JSON.stringify(user));
+            localStorage.setItem("@rocketnotes:token",token);
+
+            api.defaults.headers.common['Authorization']=`Bearer ${token}`;
+
+            setData({user,token})
+        }
+        catch(error){
+            if(error.response){
+                alert(error.response.data.message)
+            }else{
+                alert("não foi possivel entrar")
+            }
+        }
+     }
+
+     function signOut(){
+        const token =localStorage.removeItem("@rocketnotes:token");
+        const user = localStorage.removeItem("@rocketnotes:user");
+
+        setData({});
+     }
+
+     async function updateProfile({user,avatarFile}){
+        try{
+            if(avatarFile){
+                const fileUpdloadForm=new FormData();
+
+                fileUpdloadForm.append("avatar",avatarFile)
+
+                const response =await api.patch("/users/avatar",fileUpdloadForm)
+
+                user.avatar =response.data.avatar
+            }
+
+
+            await api.put("/users",user);
+            localStorage.setItem("@rocketnotes:user",JSON.stringify(user))
+
+           setData({user, token: data.token})
+           alert("perfil atualizado")
+
+        }
+        catch(error){
+            if(error.response){
+                console.log(data.token)
+                console.error(error);
+                alert(error.response.data.message)
+            }else{
+                alert("não foi possivel entrar")
+            }
+        }
+
+     }
+
+     useEffect(()=>{
+            const token =localStorage.getItem("@rocketnotes:token");
+            const user = localStorage.getItem("@rocketnotes:user");
+
+            if(token && user){
+                api.defaults.headers.common['Authorization']=`Bearer ${token}`;
+                setData({
+                    token,
+                    user:JSON.parse(user)
+                })
+            }
+
+     },[])
+    return(
+        <AuthContext.Provider value={
+            {signIn,
+            signOut,
+            updateProfile,
+            user:data.user,
+            }}>
+        {children}
+
+        </AuthContext.Provider>
+    )
+}
+
+function useAuth(){
+   const context= useContext(AuthContext)
+   return context
+}
+
+export {AuthProvider,useAuth}