From d379f7df587f963683a4d0564b2381c83280e1be Mon Sep 17 00:00:00 2001
From: Kirill Ivlev <kirill@ngweb.io>
Date: Fri, 13 Dec 2024 21:20:03 +0400
Subject: [PATCH] add auth component & required components

---
 src/App.tsx                     |  8 +++++++-
 src/components/PrivateRoute.tsx |  8 ++++++++
 src/context/AuthContext.tsx     | 22 ++++++++++++++++++++++
 src/main.tsx                    | 10 +++++++---
 src/routes/LoginPage.tsx        |  3 +++
 src/routes/NotFound.tsx         |  3 +++
 6 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 src/components/PrivateRoute.tsx
 create mode 100644 src/context/AuthContext.tsx
 create mode 100644 src/routes/LoginPage.tsx
 create mode 100644 src/routes/NotFound.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 7d54fae..e36b229 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,15 +1,21 @@
 import './App.css'
 import {Route, Routes} from "react-router-dom";
 import Home from "./routes/Home.tsx";
+import {LoginPage} from "./routes/LoginPage.tsx";
+import {PrivateRoute} from "./components/PrivateRoute.tsx";
+import {NotFound} from "./routes/NotFound.tsx";
 
 function App() {
   return (
     <>
       <Routes>
-        <Route path="/" element={<Home/>}></Route>
+        <Route path="/" element={<PrivateRoute><Home/></PrivateRoute>} />
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="*" element={<NotFound />} />
       </Routes>
 
       <h1 className="underline">test</h1>
+
     </>
   )
 }
diff --git a/src/components/PrivateRoute.tsx b/src/components/PrivateRoute.tsx
new file mode 100644
index 0000000..f5df4ae
--- /dev/null
+++ b/src/components/PrivateRoute.tsx
@@ -0,0 +1,8 @@
+import {useAuth} from "../context/AuthContext.tsx";
+import {Navigate} from "react-router-dom";
+import React from "react";
+
+export const PrivateRoute = ({ children} : {children: React.ReactNode}) => {
+  const {isAuthenticated } = useAuth();
+  return isAuthenticated ? <> {children}</>: <Navigate to="/login" replace={true} />;
+}
\ No newline at end of file
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
new file mode 100644
index 0000000..eb26d0c
--- /dev/null
+++ b/src/context/AuthContext.tsx
@@ -0,0 +1,22 @@
+import React, { createContext, useState, useContext } from 'react';
+
+const AuthContext = createContext({
+  isAuthenticated: false,
+  login: () => {},
+  logout: () => {}
+});
+
+export const AuthProvider= ({ children }: { children: React.ReactNode }) => {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+  const login = () => setIsAuthenticated(true);
+  const logout = () => setIsAuthenticated(false);
+
+  return (
+    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => useContext(AuthContext);
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 814e5c3..1c644b5 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,11 +3,15 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 import {BrowserRouter} from "react-router-dom";
+import {AuthProvider} from "./context/AuthContext.tsx";
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <AuthProvider>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </AuthProvider>
+
   </StrictMode>,
 )
diff --git a/src/routes/LoginPage.tsx b/src/routes/LoginPage.tsx
new file mode 100644
index 0000000..6c1552f
--- /dev/null
+++ b/src/routes/LoginPage.tsx
@@ -0,0 +1,3 @@
+export function LoginPage() {
+  return <>Login page</>
+}
\ No newline at end of file
diff --git a/src/routes/NotFound.tsx b/src/routes/NotFound.tsx
new file mode 100644
index 0000000..1f61b5a
--- /dev/null
+++ b/src/routes/NotFound.tsx
@@ -0,0 +1,3 @@
+export function NotFound() {
+  return <h1>Page not found</h1>
+}
\ No newline at end of file