987897978978

Yadzzz · Jan 7, 2024 · d0c808a · d0c808a
1 parent 5a34c61
commit d0c808a
Show file tree

Hide file tree

Showing 12 changed files with 829 additions and 156 deletions.
diff --git a/template_web.client/.hintrc b/template_web.client/.hintrc
@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "no-inline-styles": "off"
+  }
+}
diff --git a/template_web.client/index.html b/template_web.client/index.html
@@ -1,12 +1,13 @@
 <!doctype html>
 <html lang="en">
-  <head>
+  <head class="h-full bg-gray-100">
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Bus Service</title>
   </head>
-  <body>
+  <body class="h-full">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/template_web.client/src/App.tsx b/template_web.client/src/App.tsx
@@ -6,21 +6,19 @@ import {
   Routes,
   Navigate,
 } from "react-router-dom";
-import "./App.css";
 import Home from "./Pages/Home";
+import ClientHome from "./Pages/Client/Home";
 import JQueryComponents from "./Components/Shared/JQueryComponents";
 import Login from "./Pages/Login";
 import ApiClient from "./Infrastructure/API/apiClient";
 import Logout from "./Pages/Logout";
 import AuthService from "./Services/authService";
 import { CurrentUserProvider } from "./Infrastructure/Domain/CurrentUserContext";
 import { useCurrentUser } from "./Infrastructure/Domain/CurrentUserContext";
-interface Forecast {
-  date: string;
-  temperatureC: number;
-  temperatureF: number;
-  summary: string;
-}
+import Header from "./Components/Shared/Header";
+import Features from "./Pages/Features";
+import Pricing from "./Pages/Pricing";
+import Contact from "./Pages/Contact";
 
 function App() {
   const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
@@ -68,22 +66,32 @@ function App() {
     }
   }
 
-  if (isAuthenticated === null) {
+  /*if (isAuthenticated === null) {
     return <div className="container">Loading...</div>;
-  }
+  }*/
 
   return (
     <Router>
       <Suspense fallback={<div className="container">Loading...</div>}>
-        <Routes>
-          <Route path="/" element={<ProtectedRoute element={<Home />} />} />
-          <Route
-            path="/login"
-            element={<Login setIsAuthenticated={setIsAuthenticated} />}
-          />
-          <Route path="/logout" element={<Logout />} />
-          <Route path="*" element={<Navigate to="/" />} />
-        </Routes>
+        <div className="bg-white">
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/features" element={<Features />} />
+            <Route path="/pricing" element={<Pricing />} />
+            <Route path="/contact" element={<Contact />} />
+
+            <Route
+              path="/client"
+              element={<ProtectedRoute element={<ClientHome />} />}
+            />
+            <Route
+              path="/login"
+              element={<Login setIsAuthenticated={setIsAuthenticated} />}
+            />
+            <Route path="/logout" element={<Logout />} />
+            <Route path="*" element={<Navigate to="/" />} />
+          </Routes>
+        </div>
         <JQueryComponents />
       </Suspense>
     </Router>

diff --git a/template_web.client/src/Components/Shared/Header.tsx b/template_web.client/src/Components/Shared/Header.tsx
@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+
+const Header = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  return (
+    <header className="absolute inset-x-0 top-0 z-50">
+      <nav className="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
+        {/* Logo */}
+        <div className="flex lg:flex-1">
+          <a href="#" className="-m-1.5 p-1.5">
+            <span className="sr-only">Your Company</span>
+            <img
+              className="h-8 w-auto"
+              src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
+              alt="Company Logo"
+            />
+          </a>
+        </div>
+
+        {/* Hamburger Menu Icon for Mobile */}
+        <div className="flex lg:hidden">
+          <button
+            type="button"
+            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+          >
+            <span className="sr-only">Open main menu</span>
+            {/* Hamburger Icon SVG */}
+            <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Desktop Menu */}
+        <div className="hidden lg:flex lg:gap-x-12">
+          <a href="/" className="text-sm font-semibold leading-6 text-gray-900">Dashboard</a>
+          <a href="/features" className="text-sm font-semibold leading-6 text-gray-900">Features</a>
+          <a href="/pricing" className="text-sm font-semibold leading-6 text-gray-900">Pricing</a>
+          <a href="/contact" className="text-sm font-semibold leading-6 text-gray-900">Contact Us</a>
+        </div>
+
+        {/* Login for Desktop */}
+        <div className="hidden lg:flex lg:flex-1 lg:justify-end">
+          <a href="/login" className="text-sm font-semibold leading-6 text-gray-900">
+            Log in <span aria-hidden="true">→</span>
+          </a>
+        </div>
+      </nav>
+
+      {/* Mobile Menu */}
+      <div className={`${isMenuOpen ? 'block' : 'hidden'} lg:hidden`} role="dialog" aria-modal="true">
+        <div className="fixed inset-0 z-50 bg-gray-600 bg-opacity-50" />
+        <div className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+          <div className="flex items-center justify-between">
+            <a href="#" className="-m-1.5 p-1.5">
+              <span className="sr-only">Your Company</span>
+              <img
+                className="h-8 w-auto"
+                src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
+                alt="Company Logo"
+              />
+            </a>
+            <button
+              type="button"
+              className="-m-2.5 rounded-md p-2.5 text-gray-700"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              <span className="sr-only">Close menu</span>
+              {/* Close Icon SVG */}
+              <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div className="mt-6 flow-root">
+            <div className="-my-6 divide-y divide-gray-500/10">
+              <div className="space-y-2 py-6">
+                <a href="/" className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Dashboard</a>
+                <a href="/features" className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Features</a>
+                <a href="/pricing" className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Pricing</a>
+                <a href="/contact" className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Contact Us</a>
+              </div>
+              <div className="py-6">
+                <a href="/login" className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Log in</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/template_web.client/src/Pages/Client/Home.tsx b/template_web.client/src/Pages/Client/Home.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import ReactIntro from "../../Components/Shared/ReactIntro";
+import ApiClient from "../../Infrastructure/API/apiClient";
+import { useCurrentUser } from "../../Infrastructure/Domain/CurrentUserContext";
+
+const Home = () => {
+  const { user } = useCurrentUser();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const fetchData = async () => {
+      try {
+        const api = new ApiClient();
+        const response = await api.get("api/Users/UserContext");
+
+        if (isMounted) {
+          console.log(response);
+          setLoading(false);
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+
+    return () => {
+      // Cleanup function to handle component unmounting
+      isMounted = false;
+    };
+  }, [user]);  // Include user in the dependency array if you want the effect to run when user changes
+
+  if (loading) {
+    return <p>Loading...</p>;
+  }
+
+  return (
+    <>
+      <ReactIntro />
+    </>
+  );
+};
+
+export default Home;