User: this pr enables user to logout from one's session

docker-compose.yml

@@ -1,26 +1,21 @@
 version: '3.1'
 
 services:
-  web:
-    build:
-      context: .
-      dockerfile: Dockerfile
-    container_name: eagle-ec-fe-container
-    image: mugemanebertin/eagle-ec-fe
-    ports:
-      - "5173:5173"
-    env_file:
-      - .env
-
+  # Backend Service
   backend:
     image: mugemanebertin/eagle_ec_be:latest
-    container_name: eagle-ec-be-container
+    container_name: express-server-container
     ports:
-      - "499:499"
-    command: sh -c "npm run migrate && (npm run seed || true) && npm run dev"
+      - "${PORT}:${PORT}"
+    volumes:
+      - ./backend:/usr/src/app
+      - /usr/src/app/node_modules
+    command: sh -c "npm run migrate && npm run seed || true && npm run dev"
     depends_on:
-      - db
+      - postgres_db
       - redis
+    env_file:
+      - ./.env   
     environment:
       - DB_CONNECTION=${DOCKER_DB_CONNECTION}
       - JWT_SECRET=${JWT_SECRET}
@@ -35,12 +30,14 @@ services:
       - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
       - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET}
       - GOOGLE_CALLBACK_URL=${GOOGLE_CALLBACK_URL}
-      - REDIS_HOST=redis
-      - REDIS_PORT=6379
+      - FE_URL=${FE_URL}
+    networks:
+      - eagle-ec
 
-  db:
+  # PostgreSQL Database Service
+  postgres_db:
     image: postgres:latest
-    container_name: eagle-ec-db-container
+    container_name: postgres-db-container
     ports:
       - "5433:5432"
     environment:
@@ -49,11 +46,41 @@ services:
       - POSTGRES_DB=${POSTGRES_DB}
     volumes:
       - postgres_data:/var/lib/postgresql/data
+    networks:
+      - eagle-ec
 
+  # Redis Service
   redis:
     image: redis:latest
+    container_name: redis-container
     ports:
       - "6379:6379"
+    networks:
+      - eagle-ec
+
+  # Web Frontend Service
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: eagle-ec-fe-container
+    image: mugemanebertin/eagle-ec-fe
+    ports:
+      - "5173:5173"
+    env_file:
+      - ./.env
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+    networks:
+      - eagle-ec
+    command: npm run dev -- --host
+    depends_on:
+      - backend
 
 volumes:
-  postgres_data:
+  postgres_data:
+
+networks:
+  eagle-ec:
+    driver: bridge

src/__test__/addProducts.test.tsx

@@ -16,6 +16,7 @@ import TextInput from "../components/common/TextInput";
 import AddProduct from "../dashboard/sellers/AddProduct";
 import FileUpload from "../components/dashboard/FileUpload";
 import { fetchCategories } from "../redux/reducers/categoriesSlice";
+import { LogoutProvider } from "../context/LogoutContext";
 
 beforeAll(() => {
   const mockPayload = {
@@ -64,7 +65,13 @@ describe("FileUpload component", () => {
   });
 
   it("should render the component with no files", () => {
-    render(<FileUpload onDrop={onDropMock} remove={removeMock} files={[]} />);
+    render(
+      <LogoutProvider>
+        {" "}
+        {/* Wrap with LogoutProvider */}
+        <FileUpload onDrop={onDropMock} remove={removeMock} files={[]} />
+      </LogoutProvider>,
+    );
 
     expect(screen.getByText("Browse Images...")).toBeInTheDocument();
     expect(screen.getByText(/Browse Images.../i)).toBeInTheDocument();
@@ -73,14 +80,22 @@ describe("FileUpload component", () => {
 
   it("should render the component with files", () => {
     render(
-      <FileUpload onDrop={onDropMock} remove={removeMock} files={filesMock} />,
+      <LogoutProvider>
+        {" "}
+        {/* Wrap with LogoutProvider */}
+        <FileUpload onDrop={onDropMock} remove={removeMock} files={filesMock} />
+      </LogoutProvider>,
     );
     expect(screen.getByRole("button", { name: /remove/i })).toBeInTheDocument();
   });
 
   it("should call remove when the remove button is clicked", () => {
     render(
-      <FileUpload onDrop={onDropMock} remove={removeMock} files={filesMock} />,
+      <LogoutProvider>
+        {" "}
+        {/* Wrap with LogoutProvider */}
+        <FileUpload onDrop={onDropMock} remove={removeMock} files={filesMock} />
+      </LogoutProvider>,
     );
 
     const removeButton = screen.getByRole("button", { name: /remove/i });
@@ -95,9 +110,13 @@ describe("test seller dashboard components", () => {
     render(
       <Provider store={store}>
         <Router>
-          <Layout>
-            <h1>Seller's dashboard</h1>
-          </Layout>
+          <LogoutProvider>
+            {" "}
+            {/* Wrap with LogoutProvider */}
+            <Layout>
+              <h1>Seller's dashboard</h1>
+            </Layout>
+          </LogoutProvider>
         </Router>
       </Provider>,
     );
@@ -110,7 +129,11 @@ describe("test seller dashboard components", () => {
     render(
       <Provider store={store}>
         <Router>
-          <AddCategory setCategoryModal={mockSetCategoryModal} />
+          <LogoutProvider>
+            {" "}
+            {/* Wrap with LogoutProvider */}
+            <AddCategory setCategoryModal={mockSetCategoryModal} />
+          </LogoutProvider>
         </Router>
       </Provider>,
     );
@@ -142,11 +165,15 @@ describe("test seller dashboard components", () => {
     render(
       <Provider store={store}>
         <Router>
-          <CustomSelect
-            options={options}
-            defaultValue="Select a category"
-            onSelect={mockOnSelect}
-          />
+          <LogoutProvider>
+            {" "}
+            {/* Wrap with LogoutProvider */}
+            <CustomSelect
+              options={options}
+              defaultValue="Select a category"
+              onSelect={mockOnSelect}
+            />
+          </LogoutProvider>
         </Router>
       </Provider>,
     );
@@ -169,12 +196,16 @@ describe("test seller dashboard components", () => {
     const Component = () => {
       const { register } = useForm();
       return (
-        <TextInput
-          label={label}
-          placeholder={placeholder}
-          register={register}
-          name="productName"
-        />
+        <LogoutProvider>
+          {" "}
+          {/* Wrap with LogoutProvider */}
+          <TextInput
+            label={label}
+            placeholder={placeholder}
+            register={register}
+            name="productName"
+          />
+        </LogoutProvider>
       );
     };
 
@@ -198,13 +229,17 @@ describe("test seller dashboard components", () => {
     const Component = () => {
       const { register } = useForm();
       return (
-        <TextInput
-          label={label}
-          placeholder={placeholder}
-          register={register}
-          name="productName"
-          error={errorMessage}
-        />
+        <LogoutProvider>
+          {" "}
+          {/* Wrap with LogoutProvider */}
+          <TextInput
+            label={label}
+            placeholder={placeholder}
+            register={register}
+            name="productName"
+            error={errorMessage}
+          />
+        </LogoutProvider>
       );
     };
 
@@ -225,7 +260,11 @@ describe("test seller dashboard components", () => {
     render(
       <Provider store={store}>
         <Router>
-          <AddProduct />
+          <LogoutProvider>
+            {" "}
+            {/* Wrap with LogoutProvider */}
+            <AddProduct />
+          </LogoutProvider>
         </Router>
       </Provider>,
     );
@@ -261,7 +300,11 @@ describe("test seller dashboard components", () => {
     render(
       <Provider store={store}>
         <Router>
-          <AddProduct />
+          <LogoutProvider>
+            {" "}
+            {/* Wrap with LogoutProvider */}
+            <AddProduct />
+          </LogoutProvider>
         </Router>
       </Provider>,
     );
@@ -278,7 +321,11 @@ it("should display error messages for invalid inputs", async () => {
   render(
     <Provider store={store}>
       <Router>
-        <AddProduct />
+        <LogoutProvider>
+          {" "}
+          {/* Wrap with LogoutProvider */}
+          <AddProduct />
+        </LogoutProvider>
       </Router>
     </Provider>,
   );
@@ -294,7 +341,11 @@ it("should open and close AddCategory modal", () => {
   render(
     <Provider store={store}>
       <Router>
-        <AddProduct />
+        <LogoutProvider>
+          {" "}
+          {/* Wrap with LogoutProvider */}
+          <AddProduct />
+        </LogoutProvider>
       </Router>
     </Provider>,
   );

src/components/dashboard/LogoutButton.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { FiLogOut } from "react-icons/fi";
+
+import { useLogout } from "./admin/LogoutContext";
+
+const LogoutButton: React.FC = () => {
+  const { openLogoutModal } = useLogout();
+
+  return (
+    <div
+      className="flex items-center justify-start gap-4 pl-16 text-gray-700 cursor-pointer lg:pl-20 xl:pl-16 2xl:pl-24"
+      onClick={openLogoutModal}
+    >
+      <FiLogOut className="text-xl" />
+      Log Out
+    </div>
+  );
+};
+
+export default LogoutButton;

src/components/dashboard/SideBar.tsx

@@ -3,10 +3,11 @@ import { RiHome3Line, RiAddBoxLine } from "react-icons/ri";
 import { IoBriefcaseOutline, IoSettingsOutline } from "react-icons/io5";
 import { AiFillProduct } from "react-icons/ai";
 import { MdInsertChartOutlined } from "react-icons/md";
-import { FiLogOut } from "react-icons/fi";
 import { Link, NavLink, useLocation } from "react-router-dom";
 import { FaCircle } from "react-icons/fa";
 
+import LogoutButton from "./LogoutButton";
+
 interface SidebarProps {
   isOpen: boolean;
 }
@@ -25,15 +26,15 @@ const SideBar: React.FC<SidebarProps> = ({ isOpen }) => {
          isOpen ? "translate-x-0" : "-translate-x-full"
        } lg:translate-x-0`}
     >
-      <div className="flex flex-col justify-between py-6 dark:bg-secondary-black min-h-screen">
-        <div className="flex flex-col justify-center items-center">
+      <div className="flex flex-col justify-between min-h-screen py-6 dark:bg-secondary-black">
+        <div className="flex flex-col items-center justify-center">
           <Link to="/">
-            <div className="text-black font-bold justify-center py-2 flex items-center gap-1">
+            <div className="flex items-center justify-center gap-1 py-2 font-bold text-black">
               <span className="font-[550] text-2xl"> eagles</span>
               <FaCircle className="text-[12px] text-[#DB4444] mt-1" />
             </div>
           </Link>
-          <nav className="mt-10 flex flex-col gap-2">
+          <nav className="flex flex-col gap-2 mt-10">
             <NavLink
               to="/dashboard"
               className={`py-2.5 px-4 flex items-center gap-2 text-lg rounded transition duration-200 ${getLinkClass(
@@ -93,10 +94,7 @@ const SideBar: React.FC<SidebarProps> = ({ isOpen }) => {
             </NavLink>
           </nav>
         </div>
-        <div className="flex pl-16 lg:pl-20 xl:pl-16 2xl:pl-24 items-center justify-start gap-4 cursor-pointer text-gray-700">
-          <FiLogOut className="text-xl" />
-          Log Out
-        </div>
+        <LogoutButton />
       </div>
     </div>
   );