Criação do Fluxo de Autenticação #9

src/App.tsx

@@ -1,27 +1,22 @@
 import React from "react";
-// import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
-
-// Pages Imports
-// import { Home } from "./pages/Home";
 
 // Components Imports
 import { Header } from "./components/Header";
 import { Footer } from "./components/Footer";
 
+import { Router } from "./routes";
+import { AuthProvider } from "./hooks/useAuth";
+
 // Styles Imports
 import "./styles/global.css";
 
 function App() {
   return (
-    <div className="App">
+    <AuthProvider>
       <Header />
-      {/* <Router>
-        <Switch>
-          <Route exact path="/" component={Home} />
-        </Switch>
-      </Router> */}
+      <Router />
       <Footer />
-    </div>
+    </AuthProvider>
   );
 }
 

src/hooks/useAuth.tsx

@@ -0,0 +1,64 @@
+import React, { createContext, useState, useEffect, useContext } from "react";
+
+type User = {
+  name: string;
+  email: string;
+};
+
+interface AuthContextProps {
+  signedIn: boolean;
+  user: User | null;
+  signIn: (email: string, name: string) => void;
+  signOut: () => void;
+}
+
+const AuthContext = createContext({
+  signedIn: false,
+} as AuthContextProps);
+
+export const AuthProvider: React.FC = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    async function getStoredData() {
+      const _user = localStorage.getItem("@PetStop:user");
+
+      if (_user) setUser(JSON.parse(_user));
+    }
+
+    getStoredData();
+  }, []);
+
+  async function signIn(email: string, password: string): Promise<void> {
+    setUser({
+      name: "Nome de Teste",
+      email: "[email protected]",
+    });
+
+    localStorage.setItem("@PetStop:user", JSON.stringify(user));
+  }
+
+  async function signOut() {
+    setUser(null);
+    localStorage.removeItem("@PetStop:user");
+  }
+
+  return (
+    <AuthContext.Provider
+      value={{
+        signedIn: !!user,
+        user,
+        signIn,
+        signOut,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+
+  return context;
+}

src/routes.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { BrowserRouter, Switch, Route } from "react-router-dom";
+
+// Pages Imports
+import { Home } from "./pages/Home";
+
+// Utils Imports
+// import { useAuth } from "./hooks/useAuth";
+
+export function Router() {
+  //   const { signedIn } = useAuth();
+
+  return (
+    <BrowserRouter>
+      <Switch>
+        <Route path="/" exact component={Home} />
+      </Switch>
+    </BrowserRouter>
+  );
+}