Merge pull request #51 from SILFRICA/develop

Develop
SILFRICA · Oct 23, 2024 · efb0f3d · efb0f3d
2 parents d29e878 + 34dbac5
commit efb0f3d
Show file tree

Hide file tree

Showing 17 changed files with 655 additions and 330 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,36 +2,48 @@ import {
   BrowserRouter as Router,
   Route,
   Routes,
-  Navigate,
+  // Navigate,
 } from "react-router-dom";
 import "./App.css";
-import { AuthProvider } from "./context/AuthContext";
+// import { useContext } from 'react';
+import { AuthProvider} from "./context/AuthContext";
 import PrivateRoute from "./context/PrivateRoute";
 import PageLayout from './components/pages/PageLayout';
 import LoginSection from "./components/pages/auth/LoginSection";
-import LandingPage from "./components/pages/dashboard/LandingPage";
 import HomePage from "./components/pages/dashboard/home/HomePage";
 import InsightsPage from "./components/pages/dashboard/insights/Page";
 import AlertsPage from "./components/pages/dashboard/alerts/Page";
+import NewChannel from "./components/pages/dashboard/channels/NewPage";
+import NotFoundPage from "./components/pages/dashboard/channels/NotFoundPage";
+
+// ProtectedRoute to protect non-dashboard routes (if needed)
+// const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
+//   const { isAuthenticated } = useContext(AuthContext);
+//   return isAuthenticated ? children : <Navigate to="/login" />;
+// };
 
 function App() {
   return (
     <AuthProvider>
       <Router>
         <Routes>
-          <Route path="/" element={<LandingPage />} />
+          {/* Login Routes */}
+          <Route path="/" element={<LoginSection />} />
           <Route path="/login" element={<LoginSection />} />
+
+          {/* Protected Dashboard Routes */}
           <Route path="/dashboard" element={<PrivateRoute><PageLayout/></PrivateRoute>}>
             <Route index element={<HomePage/>}/>
             <Route path="home" element={<HomePage/>}/>
             <Route path="insights" element={<InsightsPage />}/>
             <Route path="alerts" element={<AlertsPage />}/>
+            <Route path="channels" element={<NewChannel />} />
           </Route>
-          <Route path="*" element={<Navigate to="/login" replace />} />
+          <Route path="*" element={<NotFoundPage />} />
         </Routes>
       </Router>
     </AuthProvider>
   );
 }
 
-export default App;
+export default App;
diff --git a/src/assets/Arrow-downChannel.svg b/src/assets/Arrow-downChannel.svg
diff --git a/src/assets/Filter.svg b/src/assets/Filter.svg
diff --git a/src/assets/logoAnimate.svg b/src/assets/logoAnimate.svg
diff --git a/src/components/Greeting.tsx b/src/components/Greeting.tsx
@@ -5,7 +5,7 @@ const Greeting: React.FC = () => {
   const { userData } = useContext(AuthContext);
   return (
     <h4 className="w-[189px] h-[29px] font-semibold text-xl text-[#03CF79]">
-      Hello {userData.user.lastname}
+      {userData && <span>Hello {userData.user.lastname}</span>}
     </h4>
   );
 };

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -56,7 +56,7 @@ const NavBar: React.FC<NavBarProps> = ({ sidebarToggle }) => {
       await axios.post(
         `${API_URL}/api/logout`,
         {},
-        { headers: { Authorization: `Bearer ${userData.token}` } },
+        { headers: { Authorization: `Bearer ${userData!.token}` } },
       );
 
       setTimeout(() => {
@@ -82,7 +82,7 @@ const NavBar: React.FC<NavBarProps> = ({ sidebarToggle }) => {
       </button>
 
       <span className="ml-3 text-xs md:text-xl font-semibold text-black">
-        {userData.institution.name ?? "Silfrica..."}
+        {userData?.institution?.name ?? "Silfrica..."}
       </span>
 
       <ul className="ml-auto flex items-center">

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
@@ -1,24 +1,39 @@
-import React, { forwardRef, useContext, useState } from "react";
-// import { useNavigate } from "react-router-dom";
+import React, { forwardRef, useContext } from "react";
 import { AuthContext } from "../context/AuthContext";
 import LogoWithText from "../assets/logo_with_text.png";
 import SideBarData from "../data/sidebar.json";
-import { Link } from "react-router-dom";
-// import { truncateString } from "../helpers/TruncateString";
+import { NavLink } from "react-router-dom";
 
-const SideBar = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->((props, ref) => {
-//   const navigate = useNavigate();
+interface SideBarProps {
+  isOpen: boolean;
+  ref?: React.RefObject<HTMLDivElement>;
+}
+
+interface User {
+  firstname: string;
+  lastname: string;
+  user_type: string;
+}
+
+const SideBar = forwardRef<HTMLDivElement, SideBarProps & React.HTMLAttributes<HTMLDivElement>>((props, ref) => {
   const { userData } = useContext(AuthContext);
-  const [activeTab, setActiveTab] = useState<string>("Home");
 
+  // If userData is not available, show the loading animation
+  if (!userData) {
+    return (
+      <div className="flex justify-center items-center w-full h-screen">
+        <img
+          src={LogoWithText}
+          alt="logo"
+          className="animate-breathing w-[120px]"
+        />
+      </div>
 
-  const handleActiveTab = (tab: string) => {
-    setActiveTab(tab);
+    );
   }
 
+  const user = userData.user as unknown as User;
+
   return (
     <div
       className="fixed left-0 top-0 w-64 h-full bg-white p-4 z-50 sidebar-menu transition-transform border-r border-black flex flex-col items-center"
@@ -28,46 +43,57 @@ const SideBar = forwardRef<
         <img src={LogoWithText} alt="logo-alt" />
       </a>
       <div className="h-[85vh] relative flex flex-col items-center w-full">
-      <ul className="mt-4 w-[163px] h-[416px] flex flex-col items-start">
-
-        {SideBarData &&
-          SideBarData.name.map((nav, index) => (
+        <ul className="mt-4 w-[163px] h-[416px] flex flex-col items-start">
+          {SideBarData.name.map((nav, index) => (
             <li className="mb-1 group h-[56px] text-center" key={index}>
-              <Link
-                to={nav.url}
-                className={`${activeTab === nav.title ? 'text-[#03CF79]': 'text-black'}`}
-                onClick={() => handleActiveTab(nav.title)}
-              >
-                <span className="text-xl font-semibold">{nav.title}</span>
-              </Link>
+              {nav.title === "Content" || nav.title === "Settings" ? (
+                <div
+                  className="text-black hover:opacity-50 cursor-not-allowed"
+                  onClick={(e) => e.preventDefault()}
+                  title="Coming Soon"
+                >
+                  <span className="text-xl font-semibold">{nav.title}</span>
+                </div>
+              ) : (
+                <NavLink
+                  to={nav.url}
+                  className={({ isActive }) =>
+                    isActive ? 'text-[#03CF79]' : 'text-black'
+                  }
+                >
+                  <span className="text-xl font-semibold">{nav.title}</span>
+                </NavLink>
+              )}
             </li>
           ))}
-      </ul>
-      {props && <ul>{props.children}</ul>}
+        </ul>
 
-      <a
-      className="w-[199px] h-[56px] bg-[#03CF79] text-white flex justify-center items-center text-xl font-semibold"
-      href="#">
-        Find channel
-      </a>
+        {props.children && <ul>{props.children}</ul>}
+
+        <a
+          className="w-[199px] h-[56px] bg-[#03CF79] text-white flex justify-center items-center text-xl font-semibold"
+          href="#"
+        >
+          Find channel
+        </a>
 
-      <br />
-      <div className="flex  w-[201px] h-12 gap-4 justify-evenly">
-        <div className="w-12 bg-[#D9D9D9] rounded-full focus:outline-none focus:ring">
+        <br />
+        <div className="flex w-[201px] h-12 gap-4 justify-evenly">
+          <div className="w-12 bg-[#D9D9D9] rounded-full focus:outline-none focus:ring">
             <img
-                className="w-12 h-12 rounded-full object-cover"
-                src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/9.jpg"
-                alt=""
+              className="w-12 h-12 rounded-full object-cover"
+              src="https://laravelui.spruko.com/tailwind/ynex/build/assets/images/faces/9.jpg"
+              alt=""
             />
+          </div>
+          <div className="text-left w-full">
+            <p className="font-semibold text-base text-black">{user.firstname} {user.lastname}</p>
+            <p className="font-normal text-base text-black">{user.user_type}</p>
+          </div>
         </div>
-        <div className="text-left w-full">
-            <p className="font-semibold text-base text-black">{userData.user.firstname}{" "}{userData.user.lastname}</p>
-            <p className="font-normal text-base text-black">{userData.user.user_type}</p>
-        </div>
-      </div>
       </div>
     </div>
   );
 });
 
-export default SideBar;
+export default SideBar;