From 0f91452a6cf18683f0b50fea6e78b83b1c8f4031 Mon Sep 17 00:00:00 2001
From: Dipit Vasdev <dipitvasdevdv@gmail.com>
Date: Mon, 26 Aug 2024 22:40:17 -0400
Subject: [PATCH] Added custom component UniversalSelect using new library
 react-select to ensure consistent dropdown across platforms

---
 .../src/components/Admin/RuleViewContainer.js |  37 ++++--
 .../RuleStrategy/RuleStrategy.js              |  26 ++--
 .../src/components/Projects/FilterDrawer.js   |  70 +++++++---
 .../src/components/Projects/ProjectsPage.js   |  54 ++++----
 client/src/components/UI/UniversalSelect.jsx  | 121 ++++++++++++++++++
 5 files changed, 233 insertions(+), 75 deletions(-)
 create mode 100644 client/src/components/UI/UniversalSelect.jsx

diff --git a/client/src/components/Admin/RuleViewContainer.js b/client/src/components/Admin/RuleViewContainer.js
index ab60539e..3af8cf97 100644
--- a/client/src/components/Admin/RuleViewContainer.js
+++ b/client/src/components/Admin/RuleViewContainer.js
@@ -1,26 +1,34 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import RuleView from "./RuleView";
+import UniversalSelect from "../UI/UniversalSelect";
+import { createUseStyles } from "react-jss";
+
+const useStyles = createUseStyles({
+  select: {
+    width: "275px"
+  }
+});
 
 const RuleViewContainer = props => {
   const { rules } = props;
   const [ruleId, setRuleId] = useState(rules[0].id);
   const rule = rules.filter(rule => rule.id === ruleId)[0];
-
+  const classes = useStyles();
   return (
     <React.Fragment>
-      <select
-        value={ruleId}
-        onChange={e => setRuleId(parseInt(e.target.value))}
-      >
-        {rules && rules.length > 0
-          ? rules.map(rule => (
-              <option key={rule.id} value={rule.id}>
-                {rule.code}
-              </option>
-            ))
-          : null}
-      </select>
+      <UniversalSelect
+        className={classes.select}
+        options={rules.map(rule => ({
+          value: rule.id,
+          label: rule.code
+        }))}
+        defaultValue={
+          rules.length > 0 ? { value: rules[0].id, label: rules[0].code } : null
+        }
+        onChange={selectedOption => setRuleId(selectedOption.value)}
+      />
+
       <RuleView rule={rule} rules={rules} setRuleId={setRuleId} />
     </React.Fragment>
   );
@@ -30,7 +38,8 @@ RuleViewContainer.propTypes = {
     PropTypes.shape({
       id: PropTypes.number,
       filter: PropTypes.string.isRequired,
-      length: PropTypes.number.isRequired
+      length: PropTypes.number.isRequired,
+      code: PropTypes.string.isRequired
     })
   )
 };
diff --git a/client/src/components/ProjectWizard/RuleStrategy/RuleStrategy.js b/client/src/components/ProjectWizard/RuleStrategy/RuleStrategy.js
index fb2da52a..ac6ff03f 100644
--- a/client/src/components/ProjectWizard/RuleStrategy/RuleStrategy.js
+++ b/client/src/components/ProjectWizard/RuleStrategy/RuleStrategy.js
@@ -5,6 +5,7 @@ import { createUseStyles, useTheme } from "react-jss";
 import clsx from "clsx";
 import AccordionToolTip from "../../ToolTip/AccordionToolTip";
 import RuleStrategyLabel from "./RuleStrategyLabel";
+import UniversalSelect from "../../UI/UniversalSelect";
 
 const useStyles = createUseStyles(theme => ({
   rowContainer: {
@@ -49,7 +50,10 @@ const useStyles = createUseStyles(theme => ({
     marginBottom: "0.1em"
   },
   select: {
-    width: "200px"
+    width: "200px",
+    textAlign: "left",
+    padding: 0,
+    maring: 0
   },
   stringInput: {
     flexBasis: "50%",
@@ -230,21 +234,23 @@ const RuleStrategy = ({
             setShowDescription={setShowDescription}
           />
           <div className={classes.choiceSelectContainer}>
-            <select
+            <UniversalSelect
               autoFocus={autoFocus}
               className={classes.select}
-              value={value || ""}
+              defaultValue={
+                choices.length > 0
+                  ? { value: choices[0].id, label: choices[0].name }
+                  : null
+              }
               onChange={onInputChange}
               name={code}
               id={code}
               disabled={!display || !!readOnly}
-            >
-              {choices.map(choice => (
-                <option key={choice.id} value={choice.id}>
-                  {choice.name}
-                </option>
-              ))}
-            </select>
+              options={choices.map(choice => ({
+                value: choice.id,
+                label: choice.name
+              }))}
+            />
           </div>
           {possibleAndEarnedPointsContainers()}
         </div>
diff --git a/client/src/components/Projects/FilterDrawer.js b/client/src/components/Projects/FilterDrawer.js
index c5227ff1..d2011c3e 100644
--- a/client/src/components/Projects/FilterDrawer.js
+++ b/client/src/components/Projects/FilterDrawer.js
@@ -6,6 +6,7 @@ import "react-datepicker/dist/react-datepicker.css";
 import DateRangePicker from "../UI/DateRangePicker";
 import { MdChevronRight } from "react-icons/md";
 import { createUseStyles } from "react-jss";
+import UniversalSelect from "../UI/UniversalSelect";
 
 const useStyles = createUseStyles({
   container: {
@@ -35,6 +36,12 @@ const useStyles = createUseStyles({
     flexBasis: "50%",
     display: "flex",
     flexDirection: "column"
+  },
+  dropdown: {
+    width: "100%",
+    textAlign: "left",
+    padding: 0,
+    maring: 0
   }
 });
 
@@ -77,6 +84,24 @@ const FilterPopup = ({
     setCriteria({ ...criteria, [property]: date });
   };
 
+  const projectTypeoptions = [
+    { value: "draft", label: "Draft" },
+    { value: "snapshot", label: "Snapshot" },
+    { value: "all", label: "Draft and Snapshot" }
+  ];
+
+  const statusOptions = [
+    { value: "active", label: "Active" },
+    { value: "deleted", label: "Deleted" },
+    { value: "all", label: "Active and Deleted" }
+  ];
+
+  const visibilityOptions = [
+    { value: "visible", label: "Visible" },
+    { value: "hidden", label: "Hidden" },
+    { value: "all", label: "Visible and Hidden" }
+  ];
+
   return (
     <div className={classes.container}>
       <button
@@ -98,31 +123,38 @@ const FilterPopup = ({
           {/* <pre>{JSON.stringify(criteria, null, 2)}</pre> */}
           <h4 className={classes.minorHeading}>Project Type</h4>
         </div>
-        <select onChange={e => handleChange(e, "type")} value={criteria.type}>
-          <option value="draft">Draft</option>
-          <option value="snapshot">Snapshot</option>
-          <option value="all">Draft and Snapshot</option>
-        </select>
+
+        <UniversalSelect
+          defaultValue={projectTypeoptions.find(
+            option => option.value === criteria.type
+          )}
+          options={projectTypeoptions}
+          onChange={e => handleChange(e, "type")}
+          name="type"
+          className={classes.dropdown}
+        />
 
         <h4 className={classes.minorHeading}>Status</h4>
-        <select
+        <UniversalSelect
+          defaultValue={statusOptions.find(
+            option => option.value === criteria.status
+          )}
+          options={statusOptions}
           onChange={e => handleChange(e, "status")}
-          value={criteria.status}
-        >
-          <option value="active">Active</option>
-          <option value="deleted">Deleted</option>
-          <option value="all">Active and Deleted</option>
-        </select>
+          name="status"
+          className={classes.dropdown}
+        />
 
         <h4 className={classes.minorHeading}>Visibility</h4>
-        <select
+        <UniversalSelect
+          defaultValue={visibilityOptions.find(
+            option => option.value === criteria.visibility
+          )}
+          options={visibilityOptions}
           onChange={e => handleChange(e, "visibility")}
-          value={criteria.visibility}
-        >
-          <option value="visible">Visible</option>
-          <option value="hidden">Hidden</option>
-          <option value="all">Visible and Hidden</option>
-        </select>
+          name="visibility"
+          className={classes.dropdown}
+        />
 
         <h4 className={classes.minorHeading}>Project Name</h4>
         <input
diff --git a/client/src/components/Projects/ProjectsPage.js b/client/src/components/Projects/ProjectsPage.js
index 5cc9038f..7eed532f 100644
--- a/client/src/components/Projects/ProjectsPage.js
+++ b/client/src/components/Projects/ProjectsPage.js
@@ -21,6 +21,7 @@ import ProjectTableRow from "./ProjectTableRow";
 import FilterDrawer from "./FilterDrawer.js";
 import MultiProjectToolbarMenu from "./MultiProjectToolbarMenu.js";
 import fetchEngineRules from "./fetchEngineRules.js";
+import UniversalSelect from "../UI/UniversalSelect.jsx";
 
 const useStyles = createUseStyles({
   outerDiv: {
@@ -125,9 +126,9 @@ const useStyles = createUseStyles({
     justifyContent: "center"
   },
   dropContent: {
-    padding: "5px",
-    borderColor: "silver",
-    borderRadius: "4px"
+    borderRadius: "4px",
+    width: "60px",
+    textAlign: "center"
   },
   optionItems: {
     backgroundColor: "white",
@@ -164,6 +165,14 @@ const ProjectsPage = ({ contentContainerRef }) => {
   const [perPage, setPerPage] = useState(10);
   const projectsPerPage = perPage;
 
+  const perPageOptions = [
+    { value: projects.length, label: "All" },
+    { value: 100, label: "100" },
+    { value: 50, label: "50" },
+    { value: 25, label: "25" },
+    { value: 10, label: "10" }
+  ];
+
   const handlePerPageChange = newPerPage => {
     setPerPage(newPerPage);
     const newHighestPage = Math.ceil(sortedProjects.length / newPerPage);
@@ -593,7 +602,6 @@ const ProjectsPage = ({ contentContainerRef }) => {
     { id: "firstName", label: "Created By" },
     { id: "dateCreated", label: "Created On" },
     { id: "dateModified", label: "Last Modified" },
-    { id: "dateSubmitted", label: "Submitted" },
     {
       id: "contextMenu",
       label: ""
@@ -770,34 +778,16 @@ const ProjectsPage = ({ contentContainerRef }) => {
                   currentPage={currentPage}
                   maxNumOfVisiblePages={5}
                 />
-                <label>
-                  <select
-                    className={classes.dropContent}
-                    // defaultValue={10}
-                    value={perPage}
-                    onChange={e => handlePerPageChange(e.target.value)}
-                  >
-                    <option
-                      className={classes.optionItems}
-                      value={projects.length}
-                    >
-                      All
-                    </option>
-                    <option className={classes.optionItems} value={100}>
-                      100
-                    </option>
-                    <option className={classes.optionItems} value={50}>
-                      50
-                    </option>
-                    <option className={classes.optionItems} value={25}>
-                      25
-                    </option>
-                    <option className={classes.optionItems} value={10}>
-                      10
-                    </option>
-                  </select>
-                  <span className={classes.itemsPerPage}>Items per page</span>
-                </label>
+                <UniversalSelect
+                  defaultValue={perPageOptions.find(
+                    option => option.value === perPage
+                  )}
+                  options={perPageOptions}
+                  onChange={e => handlePerPageChange(e.target.value)}
+                  name="perPage"
+                  className={classes.dropContent}
+                />
+                <span className={classes.itemsPerPage}>Items per page</span>
               </div>
 
               {(selectedProject || checkedProjectsStatusData) && (
diff --git a/client/src/components/UI/UniversalSelect.jsx b/client/src/components/UI/UniversalSelect.jsx
new file mode 100644
index 00000000..60d4fdf4
--- /dev/null
+++ b/client/src/components/UI/UniversalSelect.jsx
@@ -0,0 +1,121 @@
+import React from "react";
+import Select from "react-select";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+UniversalSelect.propTypes = {
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired
+    })
+  ).isRequired,
+  onChange: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  disabled: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string
+};
+
+export default function UniversalSelect({
+  defaultValue,
+  options,
+  onChange,
+  name,
+  id,
+  disabled,
+  autoFocus,
+  className
+}) {
+  const handleSelectChange = selectedOption => {
+    onChange({
+      target: {
+        value: selectedOption ? selectedOption.value : "",
+        name: name
+      }
+    });
+  };
+  console.log(defaultValue);
+  return (
+    <Select
+      className={classNames(className)}
+      autoFocus={autoFocus}
+      onChange={handleSelectChange}
+      defaultValue={defaultValue}
+      name={name}
+      inputId={id}
+      isDisabled={disabled}
+      options={options}
+      styles={{
+        container: (provided, state) => ({
+          ...provided,
+          border:
+            state.isFocused || state.menuIsOpen
+              ? "1px solid black"
+              : "1px solid gray",
+          boxShadow:
+            state.isFocused || state.menuIsOpen ? "none" : provided.boxShadow,
+          outline: "none",
+          borderRadius: "3px",
+          padding: 0
+        }),
+        option: (provided, state) => ({
+          ...provided,
+          fontSize: "15px", // Set your desired font size for options
+          padding: "2px", // Set padding to 0 for options
+          backgroundColor: state.isSelected
+            ? "#1967D2ff"
+            : state.isFocused
+            ? "#e5e7eb"
+            : "white", // Change background color based on state
+          color: state.isSelected ? "white" : "black", // Ensure text is readable on dark background,
+          boxShadow: "10px"
+        }),
+        singleValue: provided => ({
+          ...provided,
+          fontSize: "15px",
+          color: "black"
+        }),
+        menu: provided => ({
+          ...provided,
+          padding: "0", // Set padding of the dropdown menu to 0
+          border: "1px solid black",
+          boxShadow: "none",
+          marginTop: "1px",
+          borderRadius: "0"
+        }),
+        menuList: provided => ({
+          ...provided,
+          padding: 0
+        }),
+        control: provided => ({
+          ...provided,
+          padding: "0",
+          minHeight: "auto",
+          border: "none",
+          boxShadow: "none",
+          outline: "none"
+        }),
+        dropdownIndicator: provided => ({
+          ...provided,
+          padding: "2px"
+        }),
+        clearIndicator: provided => ({
+          ...provided,
+          padding: "2px"
+        }),
+        valueContainer: provided => ({
+          ...provided,
+          paddingLeft: "4px",
+          padding: "0"
+        }),
+        indicatorSeparator: provided => ({
+          ...provided,
+          display: "none"
+        })
+      }}
+    />
+  );
+}