Merge pull request #12 from SETeam59/feature-data

Merging the complete components features to main branch

frontend/src/components/Header.js

@@ -0,0 +1,153 @@
+import { shuffle } from "lodash";
+import React, { useState } from "react";
+import Logo from "../assets/srj.png";
+import iconDown from "../assets/icon-chevron-down.svg";
+import iconUp from "../assets/icon-chevron-up.svg";
+import elipsis from "../assets/icon-vertical-ellipsis.svg";
+import HeaderDropDown from "./HeaderDropDown";
+import ElipsisMenu from "./ElipsisMenu";
+import AddEditTaskModal from "../modals/AddEditTaskModal";
+import AddEditBoardModal from "../modals/AddEditBoardModal";
+import { useDispatch, useSelector } from "react-redux";
+import DeleteModal from "../modals/DeleteModal";
+import boardsSlice from "../redux/boardsSlice";
+
+function Header({ setIsBoardModalOpen, isBoardModalOpen, logout }) {
+  const [openDropdown, setOpenDropdown] = useState(false);
+  const [isElipsisMenuOpen, setIsElipsisMenuOpen] = useState(false);
+  const [boardType, setBoardType] = useState("add");
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
+
+  const dispatch = useDispatch();
+
+  const boards = useSelector((state) => state.boards);
+  const board = boards.find((board) => board.isActive);
+
+  const handleDropdownClick = () => {
+    setOpenDropdown((isOpen) => !isOpen);
+    setIsElipsisMenuOpen(false);
+    setBoardType("add");
+  };
+
+  const handleOpenEditModal = () => {
+    setIsBoardModalOpen(true);
+    setIsElipsisMenuOpen(false);
+  };
+
+  const handleOpenDeleteModal = () => {
+    setIsDeleteModalOpen(true);
+    setIsElipsisMenuOpen(false);
+  };
+
+  const handleDeleteButtonClick = (e) => {
+    if (e.target.textContent === "Delete") {
+      dispatch(boardsSlice.actions.deleteBoard());
+      dispatch(boardsSlice.actions.setBoardActive({ index: 0 }));
+      setIsDeleteModalOpen(false);
+    } else {
+      setIsDeleteModalOpen(false);
+    }
+  };
+
+  return (
+    <div className=" p-4 fixed left-0 bg-white dark:bg-[#2b2c37] z-50 right-0">
+      <header className="flex justify-between dark:text-white items-center">
+        {/* Left Side */}
+        <div className="flex items-center space-x-2 md:space-x-4">
+          <h3 className="md:text-4xl hidden md:inline-block font-bold font-sans">
+            CareerPulse Tracker
+          </h3>
+          <div className="flex items-center">
+            <h3 className="truncate max-w-[200px] md:text-2xl text-xl font-bold md:ml-20 font-sans">
+              {board.name}
+            </h3>
+            <img
+              src={openDropdown ? iconUp : iconDown}
+              alt="dropdown icon"
+              className="w-3 ml-2 md:hidden"
+              onClick={handleDropdownClick}
+            />
+          </div>
+        </div>
+
+        {/* Right Side */}
+        <div className="flex space-x-4 items-center md:space-x-6">
+          <button
+            className="button hidden md:block"
+            onClick={() => {
+              setIsTaskModalOpen((prevState) => !prevState);
+            }}
+          >
+            + Add New Update
+          </button>
+          <button
+            onClick={() => {
+              setIsTaskModalOpen((prevState) => !prevState);
+            }}
+            className="button py-1 px-3 md:hidden"
+          >
+            +
+          </button>
+          <button
+            className="button md:block"
+            onClick={() => {
+              logout();
+            }}
+          >
+            Logout
+          </button>
+          <img
+            onClick={() => {
+              setBoardType("edit");
+              setOpenDropdown(false);
+              setIsElipsisMenuOpen((prevState) => !prevState);
+            }}
+            src={elipsis}
+            alt="elipsis"
+            className="cursor-pointer h-6"
+          />
+          {isElipsisMenuOpen && (
+            <ElipsisMenu
+              type="Boards"
+              setOpenEditModal={handleOpenEditModal}
+              setOpenDeleteModal={handleOpenDeleteModal}
+            />
+          )}
+        </div>
+
+        {openDropdown && (
+          <HeaderDropDown
+            setOpenDropdown={setOpenDropdown}
+            setIsBoardModalOpen={setIsBoardModalOpen}
+          />
+        )}
+      </header>
+      {isTaskModalOpen && (
+        <AddEditTaskModal
+          setIsAddTaskModalOpen={setIsTaskModalOpen}
+          type="add"
+          device="mobile"
+        />
+      )}
+
+      {isBoardModalOpen && (
+        <AddEditBoardModal
+          setBoardType={setBoardType}
+          type={boardType}
+          setIsBoardModalOpen={setIsBoardModalOpen}
+        />
+      )}
+      {isDeleteModalOpen && (
+        <DeleteModal
+          setIsDeleteModalOpen={setIsDeleteModalOpen}
+          type="board"
+          title={board.name}
+          onDeleteBtnClick={handleDeleteButtonClick}
+        />
+      )}
+    </div>
+  );
+}
+
+export default Header;

frontend/src/components/HeaderDropDown.js

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Switch } from "@headlessui/react";
+import boardIcon from "../assets/icon-board.svg";
+import useDarkMode from "../hooks/useDarkMode";
+import darkIcon from "../assets/icon-dark-theme.svg";
+import lightIcon from "../assets/icon-light-theme.svg";
+import boardsSlice from "../redux/boardsSlice";
+
+function HeaderDropDown({ setOpenDropdown, setIsBoardModalOpen }) {
+  const dispatch = useDispatch();
+  const [currentTheme, setTheme] = useDarkMode();
+  const [isDarkModeEnabled, setDarkModeEnabled] = useState(
+    currentTheme === "light" ? true : false
+  );
+
+  const toggleDarkMode = (checked) => {
+    setTheme(currentTheme);
+    setDarkModeEnabled(checked);
+  };
+
+  const boards = useSelector((state) => state.boards);
+
+  return (
+    <div
+      className="py-10 px-6 absolute left-0 right-0 bottom-[-100vh] top-16 dropdown"
+      onClick={(e) => {
+        if (e.target !== e.currentTarget) {
+          return;
+        }
+        setOpenDropdown(false);
+      }}
+    >
+      {/* DropDown Modal */}
+
+      <div className="bg-white dark:bg-[#2b2c37] shadow-md shadow-[#364e7e1a] w-full py-4 rounded-xl">
+        <h3 className="dark:text-gray-300 text-gray-600 font-semibold mx-4 mb-8">
+          ALL BOARDS ({boards?.length})
+        </h3>
+
+        <div className="dropdown-board">
+          {boards.map((board, index) => (
+            <div
+              className={`flex items-baseline space-x-2 px-5 py-4 ${
+                board.isActive && "bg-[#635fc7] rounded-r-full text-white mr-8"
+              }`}
+              key={index}
+              onClick={() => {
+                dispatch(boardsSlice.actions.setBoardActive({ index }));
+              }}
+            >
+              <img src={boardIcon} className="filter-white h-4" />{" "}
+              <p className="text-lg font-bold">{board.name}</p>
+            </div>
+          ))}
+
+          <div
+            onClick={() => {
+              setIsBoardModalOpen(true);
+              setOpenDropdown(false);
+            }}
+            className="flex items-baseline space-x-2 text-[#635fc7] px-5 py-4"
+          >
+            <img src={boardIcon} className="filter-white h-4" />
+            <p className="text-lg font-bold">Create New Board</p>
+          </div>
+
+          <div className="mx-2 p-4 space-x-2 bg-slate-100 dark:bg-[#20212c] flex justify-center items-center rounded-lg">
+            <img src={lightIcon} alt="sun indicating light mode" />
+
+            <Switch
+              checked={isDarkModeEnabled}
+              onChange={toggleDarkMode}
+              className={`${
+                isDarkModeEnabled ? "bg-[#635fc7]" : "bg-gray-200"
+              } relative inline-flex h-6 w-11 items-center rounded-full`}
+            >
+              <span className="sr-only">Enable notifications</span>
+              <span
+                className={`${
+                  isDarkModeEnabled ? "translate-x-6" : "translate-x-1"
+                } inline-block h-4 w-4 transform rounded-full bg-white transition`}
+              />
+            </Switch>
+
+            <img src={darkIcon} alt="moon indicating dark mode" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default HeaderDropDown;

frontend/src/components/Home.js

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import AddEditBoardModal from "../modals/AddEditBoardModal";
+import Column from "./Column";
+import EmptyBoard from "./EmptyBoard";
+import Sidebar from "./Sidebar";
+
+function Home() {
+  const [windowSize, setWindowSize] = useState([
+    window.innerWidth,
+    window.innerHeight,
+  ]);
+
+  useEffect(() => {
+    const handleWindowResize = () => {
+      setWindowSize([window.innerWidth, window.innerHeight]);
+    };
+
+    window.addEventListener("resize", handleWindowResize);
+
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  });
+
+  const [isBoardModalOpen, setIsBoardModalOpen] = useState(false);
+
+  const boards = useSelector((state) => state.boards);
+  const board = boards.find((board) => board.isActive === true);
+  const columns = board.columns;
+
+  const [isSideBarOpen, setIsSideBarOpen] = useState(true);
+
+  return (
+    <div
+      className={
+        windowSize[0] >= 768 && isSideBarOpen
+          ? " bg-[#f4f7fd]  scrollbar-hide h-screen flex dark:bg-[#20212c]  overflow-x-scroll gap-6  ml-[261px]"
+          : "bg-[#f4f7fd]  scrollbar-hide h-screen flex    dark:bg-[#20212c] overflow-x-scroll gap-6 "
+      }
+    >
+      {windowSize[0] >= 768 && (
+        <Sidebar
+          setIsBoardModalOpen={setIsBoardModalOpen}
+          isBoardModalOpen={isBoardModalOpen}
+          isSideBarOpen={isSideBarOpen}
+          setIsSideBarOpen={setIsSideBarOpen}
+        />
+      )}
+
+      {/* Columns Section */}
+
+      {columns.length > 0 ? (
+        <>
+          {columns.map((col, index) => (
+            <Column key={index} colIndex={index} />
+          ))}
+          <div
+            onClick={() => {
+              setIsBoardModalOpen(true);
+            }}
+            className=" h-screen dark:bg-[#2b2c3740] flex justify-center items-center font-bold text-2xl hover:text-[#635FC7] transition duration-300 cursor-pointer bg-[#E9EFFA] scrollbar-hide mb-2   mx-5 pt-[90px] min-w-[280px] text-[#828FA3] mt-[135px] rounded-lg "
+          >
+            + New Column
+          </div>
+        </>
+      ) : (
+        <>
+          <EmptyBoard type="edit" />
+        </>
+      )}
+      {isBoardModalOpen && (
+        <AddEditBoardModal
+          type="edit"
+          setIsBoardModalOpen={setIsBoardModalOpen}
+        />
+      )}
+    </div>
+  );
+}
+
+export default Home;