feature/IO-3255-simplified-parts-management - Add Dark mode

client/src/components/simplified-parts-jobs-list/simplified-parts-jobs-list.component.jsx

@@ -3,7 +3,7 @@ import { Button, Card, Input, Space, Table, Typography } from "antd";
 import axios from "axios";
 import _ from "lodash";
 import queryString from "query-string";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -16,16 +16,32 @@ import useLocalStorage from "../../utils/useLocalStorage";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
-import { selectIsPartsEntry } from "../../redux/application/application.selectors";
+import { selectDarkMode, selectIsPartsEntry } from "../../redux/application/application.selectors";
 import * as Sentry from "@sentry/react";
 import getPartsBasePath from "../../utils/getPartsBasePath.js";
+import { toggleDarkMode } from "../../redux/application/application.actions.js";
+import { FaMoon, FaSun } from "react-icons/fa";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
-  isPartsEntry: selectIsPartsEntry
+  isPartsEntry: selectIsPartsEntry,
+  darkMode: selectDarkMode
 });
 
-export function SimplifiedPartsJobsListComponent({ bodyshop, refetch, loading, jobs, total, isPartsEntry }) {
+const mapDispatchToProps = (dispatch) => ({
+  toggleDarkMode: () => dispatch(toggleDarkMode())
+});
+
+export function SimplifiedPartsJobsListComponent({
+  bodyshop,
+  refetch,
+  loading,
+  jobs,
+  total,
+  isPartsEntry,
+  darkMode,
+  toggleDarkMode
+}) {
   const search = queryString.parse(useLocation().search);
   const [openSearchResults, setOpenSearchResults] = useState([]);
   const [searchLoading, setSearchLoading] = useState(false);
@@ -36,6 +52,10 @@ export function SimplifiedPartsJobsListComponent({ bodyshop, refetch, loading, j
 
   const { t } = useTranslation();
 
+  const handleDarkModeToggle = useCallback(() => {
+    toggleDarkMode();
+  }, [toggleDarkMode]);
+
   const columns = [
     {
       title: t("jobs.fields.ro_number"),
@@ -206,6 +226,11 @@ export function SimplifiedPartsJobsListComponent({ bodyshop, refetch, loading, j
               {t("general.labels.settings")}
             </Button>
           </RbacWrapper>
+          <Button
+            icon={darkMode ? <FaSun /> : <FaMoon />}
+            onClick={handleDarkModeToggle}
+            title={darkMode ? t("user.actions.light_theme") : t("user.actions.dark_theme")}
+          />
           {search.search && (
             <>
               <Typography.Title level={4}>
@@ -262,4 +287,4 @@ export function SimplifiedPartsJobsListComponent({ bodyshop, refetch, loading, j
   );
 }
 
-export default connect(mapStateToProps)(SimplifiedPartsJobsListComponent);
+export default connect(mapStateToProps, mapDispatchToProps)(SimplifiedPartsJobsListComponent);