fix: changed position of sort dropdown

PolarExpress · Jun 12, 2024 · 5c3cfbe · 5c3cfbe
1 parent 3d389e8
commit 5c3cfbe
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 66 deletions.
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -8,33 +8,83 @@
 
 import SearchBar from "./searchBar";
 import GpLogo from "../../assets/gp-logo.svg";
+import { SortOptions } from "@polarexpress/types/sorting";
+
+import DownArrowIcon from "../../assets/down-arrow.svg";
+import {
+  RootState,
+  updateSelectedSort,
+  useAppDispatch,
+  useAppSelector
+} from "@polarexpress/dataAccess/store";
 
 /**
  * Renders the main header area of the application, including a search bar.
  */
-const Header = () => (
-  <nav
-    className="relative flex items-center justify-between border-b bg-gray-50 px-6 py-3 shadow-black hover:z-50 hover:shadow-md"
-    data-testid="header">
-    <div className="flex items-center">
-      <a href="/">
-        {/* It is probably better to just do a reload, instead of manyally resetting everything. */}
-        <img className="h-8" src={GpLogo} />
-      </a>
-    </div>
-    <div className="mx-6 grow">
-      <SearchBar />
-    </div>
-    <div className="flex items-center">
-      <a
-        className="rounded-md border-2 border-orange-400 px-4 py-2 font-medium text-black hover:bg-orange-400 hover:text-white"
-        href={import.meta.env.VITE_GP_URL}
-        rel="noopener noreferrer"
-        target="_blank">
-        Visit Main Site
-      </a>
-    </div>
-  </nav>
-);
+const Header = () => {
+  const dispatch = useAppDispatch();
+  const { searchTerm, selectedSort } = useAppSelector(
+    (state: RootState) => state.addons
+  );
+
+  /**
+   * Updates the selected sorting option in the redux state.
+   *
+   * @param event Event containing the selected sorting option.
+   */
+  const handleSortChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    dispatch(updateSelectedSort(event.target.value as SortOptions));
+  };
+
+  return (
+    <nav
+      className="relative flex items-center justify-between border-b bg-gray-50 px-6 py-3 shadow-black hover:z-50 hover:shadow-md"
+      data-testid="header">
+      <div className="flex items-center">
+        <a href="/">
+          {/* It is probably better to just do a reload, instead of manyally resetting everything. */}
+          <img className="h-8" src={GpLogo} />
+        </a>
+      </div>
+      <div className="mx-6 grow">
+        <SearchBar />
+      </div>
+      <div className="mx-6 grow">
+        <label className="font-medium text-gray-700" htmlFor="sort-select">
+          Sort By:
+        </label>
+        <div className="relative mx-2 inline-block">
+          <select
+            className="appearance-none rounded border border-gray-300 bg-white py-2 pl-3 pr-8 leading-tight text-gray-700 focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-400"
+            data-testid="sort-select"
+            id="sort-select"
+            onChange={handleSortChange}
+            value={selectedSort}>
+            {Object.values(SortOptions).map(option => (
+              <option
+                disabled={option === SortOptions.RELEVANCE && !searchTerm}
+                key={option}
+                value={option}>
+                {option}
+              </option>
+            ))}
+          </select>
+          <div className="pointer-events-none absolute inset-y-0 right-2 flex items-center px-2 text-gray-700">
+            <img className="size-3" src={DownArrowIcon} />
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center">
+        <a
+          className="rounded-md border-2 border-orange-400 px-4 py-2 font-medium text-black hover:bg-orange-400 hover:text-white"
+          href={import.meta.env.VITE_GP_URL}
+          rel="noopener noreferrer"
+          target="_blank">
+          Visit Main Site
+        </a>
+      </div>
+    </nav>
+  );
+};
 
 export default Header;
diff --git a/src/pages/addonPage/addonList/addonList.test.tsx b/src/pages/addonPage/addonList/addonList.test.tsx
@@ -274,7 +274,10 @@ describe("AddonList component sorting", () => {
 
   it("sorts add-ons alphabetically when 'Alphabetical' sorting option is selected", async () => {
     const { findAllByTestId, findByTestId, user } = renderWithProviders(
-      <AddonList />
+      <>
+        <Header />
+        <AddonList />
+      </>
     );
 
     const sortSelect = await findByTestId("sort-select");
@@ -296,7 +299,10 @@ describe("AddonList component sorting", () => {
     addInstalled(testAddon);
 
     const { findAllByTestId, findByTestId, user } = renderWithProviders(
-      <AddonList />
+      <>
+        <Header />
+        <AddonList />
+      </>
     );
 
     const sortSelect = await findByTestId("sort-select");

diff --git a/src/pages/addonPage/addonList/addonList.tsx b/src/pages/addonPage/addonList/addonList.tsx
@@ -12,17 +12,13 @@ import {
   type RootState,
   updateCurrentPage,
   updateSelectedCategory,
-  updateSelectedSort,
   useAppDispatch,
   useAppSelector
 } from "@polarexpress/dataAccess/store";
 import { type Addon, AddonCategory } from "@polarexpress/types/addon";
 import AddonCard from "./addonCard";
 import { useLazyGetAddonsQuery } from "./addonApi";
 import { useEffect } from "react";
-import { SortOptions } from "@polarexpress/types/sorting";
-
-import DownArrowIcon from "../../../../assets/down-arrow.svg";
 
 /**
  * Component that renders a grid of add-on cards with pagination.
@@ -58,15 +54,6 @@ const AddonList = () => {
     dispatch(updateCurrentPage(0));
   };
 
-  /**
-   * Updates the selected sorting option in the redux state.
-   *
-   * @param event Event containing the selected sorting option.
-   */
-  const handleSortChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    dispatch(updateSelectedSort(event.target.value as SortOptions));
-  };
-
   useEffect(() => {
     trigger({
       category: selectedCategory,
@@ -101,37 +88,12 @@ const AddonList = () => {
     }
 
     return (
-      <div className="flex w-full flex-col items-center">
+      <div className="my-5 flex w-full flex-col items-center">
         <AddonTabs
           onCategoryChange={handleCategoryChange}
           selectedCategory={selectedCategory}
         />
-        <div className="my-5 flex items-center space-x-2">
-          <label className="font-medium text-gray-700" htmlFor="sort-select">
-            Sort By:
-          </label>
-          <div className="relative inline-block">
-            <select
-              className="appearance-none rounded border border-gray-300 bg-white py-2 pl-3 pr-8 leading-tight text-gray-700 focus:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-400"
-              data-testid="sort-select"
-              id="sort-select"
-              onChange={handleSortChange}
-              value={selectedSort}>
-              {Object.values(SortOptions).map(option => (
-                <option
-                  disabled={option === SortOptions.RELEVANCE && !searchTerm}
-                  key={option}
-                  value={option}>
-                  {option}
-                </option>
-              ))}
-            </select>
-            <div className="pointer-events-none absolute inset-y-0 right-2 flex items-center px-2 text-gray-700">
-              <img className="size-3" src={DownArrowIcon} />
-            </div>
-          </div>
-        </div>
-        <div className="flex flex-wrap justify-center gap-4">
+        <div className="my-5 flex flex-wrap justify-center gap-4">
           {addOnsToRender.addons.map((addOn: Addon) => (
             <AddonCard addOn={addOn} key={addOn._id} />
           ))}