feat: implemented improved filter Github Issues by label (#374)

dax4y · web-flow · commit 29f531f588c9 · 2024-10-10T06:51:07.000+03:00
* feature #319: implemented filter option by clicking on the label, the possibility of adding new label in filter * feature #319: implemented filtered labels resistance from refreshing page * implemented test for GhFinder components * added remove svg for selected labels * selected label which is not in filter-list is added automatically
diff --git a/__tests__/gh-finder/page.test.jsx b/__tests__/gh-finder/page.test.jsx
@@ -0,0 +1,103 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import LabelButton from "@/app/gh-finder/label";
+import Pagination from "@/app/gh-finder/pagination";
+import BasicModal from "@/app/gh-finder/modal";
+
+describe("Label component", () => {
+  test("Check Label name", () => {
+    render(
+      <LabelButton
+        key={1}
+        labelId={1}
+        name={"Test github label"}
+        bgColor={"blue"}
+        isDarkColor={() => {}}
+        handleSelectedLabel={() => {}}
+      />,
+    );
+
+    const findText = screen.getByText("Test github label");
+    expect(findText).toBeInTheDocument();
+  });
+
+  test("Check Label with random color", () => {
+    const randomColor = "#123456";
+    render(
+      <LabelButton
+        key={2}
+        labelId={2}
+        name={"Random Color Label"}
+        bgColor={"123456"}
+        isDarkColor={() => {}}
+        handleSelectedLabel={() => {}}
+      />,
+    );
+
+    const findText = screen.getByText("Random Color Label");
+
+    expect(findText).toBeInTheDocument();
+    expect(findText).toHaveStyle(`background-color: ${randomColor}`);
+  });
+});
+
+describe("Pagination component", () => {
+  test("Check if Pagination exist", () => {
+    render(
+      <Pagination
+        currentPage={1}
+        setCurrentPage={() => {}}
+        resultsPerPage={10}
+        totalResults={50}
+      />,
+    );
+
+    const pagination = screen.getByRole("navigation");
+    expect(pagination).toBeInTheDocument();
+  });
+
+  test("Check if Pagination have 5 tabs", () => {
+    render(
+      <Pagination
+        currentPage={1}
+        setCurrentPage={() => {}}
+        resultsPerPage={10}
+        totalResults={50}
+      />,
+    );
+    const paginationTabs = screen.getAllByRole("button");
+    expect(paginationTabs).toHaveLength(5);
+  });
+});
+
+describe("Modal component", () => {
+  test("Check if Modal pops up and the correct checkboxes are checked", () => {
+    const selectedLabels = ["enhancement", "Feature"];
+
+    render(
+      <BasicModal
+        isDarkMode={false}
+        selectedLabels={selectedLabels}
+        setSelectedLabels={() => {}}
+        handleParametersURL={() => {}}
+      />,
+    );
+
+    // simulate clicking the button that opens the modal
+    const openModalButton = screen.getByRole("button", { name: /filter/i });
+    fireEvent.click(openModalButton);
+
+    waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+
+    // check the boxes
+    const enhancementCheckbox = screen.getByRole("checkbox", {
+      name: /enhancement/i,
+    });
+    const featureCheckbox = screen.getByRole("checkbox", { name: /feature/i });
+
+    expect(enhancementCheckbox).toBeChecked();
+    expect(featureCheckbox).toBeChecked();
+  });
+});
diff --git a/src/app/gh-finder/label.jsx b/src/app/gh-finder/label.jsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+export default function LabelButton(props) {
+  return (
+    <React.Fragment>
+      <button
+        onClick={() =>
+          props.handleSelectedLabel({
+            id: props.labelId,
+            name: props.name,
+            color: props.bgColor,
+          })
+        }
+        className="inline-block px-2 py-1 text-xs p-9 font-semibold text-white rounded-full truncate
+                   hover:scale-105 hover:shadow-lg"
+        style={{
+          backgroundColor: `#${props.bgColor}`,
+          color: props.isDarkColor(`#${props.bgColor}`) ? "white" : "black",
+        }}
+      >
+        {props.name}
+        {props.isRemovable && (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth="2"
+            stroke="currentColor"
+            className="h-4 w-4 text-black font-bold ml-1 cursor-pointer inline-flex rounded-full"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="3"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        )}
+      </button>
+    </React.Fragment>
+  );
+}
diff --git a/src/app/gh-finder/modal.jsx b/src/app/gh-finder/modal.jsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React, { useState, useEffect } from "react";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Modal from "@mui/material/Modal";
@@ -20,14 +20,15 @@ const style = {
 };
 
 export default function BasicModal({
+  isDarkMode,
   selectedLabels,
   setSelectedLabels,
-  isDarkMode,
+  handleParametersURL,
 }) {
   const handleClose = () => setOpen(false);
-  const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
-  const [labelsList, setLabelsList] = React.useState([
+  const [open, setOpen] = useState(false);
+  const [labelsList, setLabelsList] = useState([
     "bug",
     "documentation",
     "Eddiehub:good-first-issue",
@@ -36,26 +37,50 @@ export default function BasicModal({
     "good first issue",
     "help wanted",
   ]);
+  const [filterInput, setFilterInput] = useState("");
 
-  const handleChange = (label, event) => {
-    const newSelectedLabels = [...selectedLabels];
-    const index = newSelectedLabels.indexOf(label);
-    if (index === -1) {
-      newSelectedLabels.push(label);
+  useEffect(() => {
+    setLabelsList([...new Set([...labelsList, ...selectedLabels])]);
+  }, [open]);
+
+  const handleChange = (inputLabel, event) => {
+    if (!selectedLabels.includes(inputLabel)) {
+      setSelectedLabels((prevSelectedLabels) => {
+        const newSelectedLabels = [...prevSelectedLabels, inputLabel];
+        handleParametersURL(newSelectedLabels, true);
+        return newSelectedLabels;
+      });
     } else {
-      newSelectedLabels.splice(index, 1);
+      setSelectedLabels((prevSelectedLabels) => {
+        const newSelectedLabels = prevSelectedLabels.filter(
+          (label) => label !== inputLabel,
+        );
+        handleParametersURL(newSelectedLabels, false);
+        return newSelectedLabels;
+      });
     }
-    setSelectedLabels(newSelectedLabels);
   };
 
   const handleClear = () => {
     setSelectedLabels([]);
     setOpen(false);
+    handleParametersURL([], false);
+  };
+
+  const handleFilterInput = () => {
+    if (filterInput.length <= 1 || labelsList.includes(filterInput)) {
+      setFilterInput("");
+    } else {
+      const newLabelsList = [...labelsList, filterInput];
+      setLabelsList(newLabelsList);
+
+      setFilterInput("");
+    }
   };
 
   return (
     <div>
-      <Button className="p-2rounded-full">
+      <Button className="p-2rounded-full space-x-1" onClick={handleOpen}>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
@@ -70,23 +95,45 @@ export default function BasicModal({
             d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L14 12.414V18a1 1 0 01-.553.894l-4 2A1 1 0 018 20v-7.586L3.293 6.707A1 1 0 013 6V4z"
           />
         </svg>
-        <Button onClick={handleOpen} className="sm:!text-sm !text-[12px]">
-          Filter
-        </Button>
+        <span className="sm:!text-sm !text-[12px]">Filter</span>
       </Button>
       <Modal
         open={open}
         onClose={handleClose}
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
+        role="dialog"
       >
         <Box
           sx={style}
-          className={`sm:!h-[300px] ${
+          className={`sm:!h-[300px] !overflow-y-auto ${
             isDarkMode ? "bg-slate-800 text-white" : "bg-slate-200 text-black"
           }`}
         >
           <FormGroup className="!grid sm:grid-cols-2">
+            <input
+              type="text"
+              className={`
+                w-full md:col-span-2
+                p-1
+                rounded-lg 
+                border border-gray-300 
+                focus:ring-2 focus:ring-blue-500 
+                focus:outline-none 
+                transition duration-200 ease-in-out 
+                text-gray-700 
+                placeholder-gray-400 
+                shadow-sm 
+                hover:shadow-md
+                ${
+                  isDarkMode
+                    ? "bg-gray-800 text-gray-400"
+                    : "bg-gray-200 text-gray-500"
+                } `}
+              placeholder="Search issues"
+              value={filterInput}
+              onChange={(e) => setFilterInput(e.target.value)}
+            />
             {labelsList.map((label, idx) => (
               <FormControlLabel
                 key={idx}
@@ -100,6 +147,14 @@ export default function BasicModal({
                 label={label}
               />
             ))}
+            <button
+              className="inline-block px-2 py-2 h-10 w-32 text-l font-medium text-white bg-green-500 rounded-full
+                         truncate hover:scale-105 hover:shadow-lg"
+              style={{ backgroundColor: "#164a6e" }}
+              onClick={() => handleFilterInput()}
+            >
+              Submit
+            </button>
           </FormGroup>
           <Button
             onClick={handleClear}
diff --git a/src/app/gh-finder/page.jsx b/src/app/gh-finder/page.jsx
