Anthony/feature-reorder-warning-trackers

src/actions/warnings.js

@@ -9,6 +9,7 @@ import {
   postNewWarning as postNewWarningAction,
   deleteWarningDescription as deleteWarningDescriptionAction,
   updateWarningDescription as updateWarningDescriptionAction,
+  reorderWarningDescriptions as reorderWarningDescriptionsAction,
   editWarningDescription as editWarningDescriptionAction,
 } from '../constants/warning';
 
@@ -163,3 +164,18 @@ export const updateWarningDescription = warningDescriptionId => {
     }
   };
 };
+
+export const reorderWarningDescriptions = warningDescriptions => {
+  const url = ENDPOINTS.REORDER_WARNING_DESCRIPTIONS(warningDescriptions);
+
+  return async dispatch => {
+    try {
+      const res = await axios.put(url, { warningDescriptions });
+      const response = await dispatch(reorderWarningDescriptionsAction(res.data));
+
+      return response.payload;
+    } catch (error) {
+      return { error: error.message };
+    }
+  };
+};

src/components/Warnings/WarningIcon.jsx

@@ -8,12 +8,8 @@ import moment from 'moment';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
 import styles from './Warnings.module.css';
+import { useSelector } from 'react-redux';
 
-const colors = {
-  blue: 'blue',
-  red: 'red',
-  yellow: '#ffc107',
-};
 function WarningIcon({
   userProfileModal,
   id,
@@ -34,7 +30,7 @@ function WarningIcon({
   //   numberOfWarnings,
   // } = props;
 
-  const btnColor = color ? colors[color] : 'white';
+  const darkMode = useSelector(state => state.theme.darkMode);
 
   // eslint-disable-next-line no-shadow
   const handleIssueWarning = id => {
@@ -60,23 +56,29 @@ function WarningIcon({
   };
 
   const popover = (
-    <Popover id="popover-basic">
+    <Popover id="popover-basic" className={darkMode ? styles.popoverDarkMode : ''}>
       <Popover.Title as="h4">Date Assigned</Popover.Title>
-      <Popover.Content>{dateAssigned}</Popover.Content>
+      <Popover.Content className={styles['popover-body']}>{dateAssigned}</Popover.Content>
     </Popover>
   );
 
+  const warningColor = () => {
+    if (color === 'red') {
+      return styles.warningColorRed;
+    } else if (color === 'blue') {
+      return styles.warningColorBlue;
+    } else if (color === 'yellow') {
+      return styles.warningColorYellow;
+    }
+    return '';
+  };
+
   const renderIcon = (
     <FontAwesomeIcon
       style={{
-        color: btnColor,
-        border: '1px solid black',
-        borderRadius: '50%',
-        width: '10px',
-        height: '10px',
-        margin: '0em 0.175em',
         cursor: userProfileModal ? 'not-allowed' : 'pointer',
       }}
+      className={`${styles.icon} ${warningColor()}`}
       id={id}
       onClick={userProfileModal ? null : () => handleIssueWarning(id)}
       icon={faCircle}

src/components/Warnings/Warnings.jsx

@@ -150,20 +150,22 @@ export default function Warning({ personId, username, userRole, displayUser }) {
 
   const warnings = !toggle
     ? null
-    : usersWarnings.map(warning => (
-        <div className={`${styles['warning-item-container']}`} key={warning.title}>
-          <div className={`${styles['warning-wrapper']}`}>
-            <p className={`${styles['warning-text']}`}> {warning.title}</p>
-            <WarningIcons
-              warnings={warning.warnings}
-              warningText={warning.title}
-              handleWarningIconClicked={handlePostWarningDetails}
-              handleShowWarningModal={handleShowWarningModal}
-              numberOfWarnings={warning.warnings.length}
-            />
+    : usersWarnings
+        .map(warning => (
+          <div className={`${styles['warning-item-container']}`} key={warning.title}>
+            <div className={`${styles['warning-wrapper']}`}>
+              <p className={`${styles['warning-text']}`}> {warning.title}</p>
+              <WarningIcons
+                warnings={warning.warnings}
+                warningText={warning.title}
+                handleWarningIconClicked={handlePostWarningDetails}
+                handleShowWarningModal={handleShowWarningModal}
+                numberOfWarnings={warning.warnings.length}
+              />
+            </div>
           </div>
-        </div>
-      ));
+        ))
+        .sort((warn1, warn2) => warn1.order - warn2.order);
 
   return (
     <div className={`${styles['warnings-container']}`}>

src/components/Warnings/Warnings.module.css

@@ -201,6 +201,10 @@
   margin: 0.5em 0;
 }
 
+.popover .modal__information.darkMode {
+  color: black !important;
+}
+
 .alert__container {
   margin-top: 0.5em;
   text-align: center;
@@ -241,6 +245,39 @@ input[type='text'] {
   z-index: 1100 !important;
 }
 
+.warning__tracker__modal_save__changes__btns {
+  width: 20%;
+}
+
+.icon {
+  border: 1px solid black;
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  margin: 0 0.175em;
+  color: white;
+}
+
+.icon.warningColorRed {
+  color: red !important;
+}
+
+.icon.warningColorBlue {
+  color: blue !important;
+}
+
+.icon.warningColorYellow {
+  color: #ffc107 !important;
+}
+
+.icon path {
+  color: inherit !important;
+}
+
+.popoverDarkMode h4 {
+  background-color: rgb(109 109 109) !important;
+}
+
 /* Media query for screens smaller than 767px */
 @media (width <= 767px) {
   .warnings-container {

src/components/Warnings/__test__/Warnings.test.jsx

@@ -1,18 +1,28 @@
 // eslint-disable-next-line no-unused-vars
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { Provider } from 'react-redux';
+import { Provider, useSelector } from 'react-redux';
 import { configureStore } from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import Warning from '../Warnings';
 import * as warningActions from '../../../actions/warnings';
+// need to add handling for darkmode
 
 vi.mock('../../../actions/warnings', () => ({
   getWarningsByUserId: vi.fn(() => () => Promise.resolve([])),
   postWarningByUserId: vi.fn(() => () => Promise.resolve([])),
   deleteWarningsById: vi.fn(() => () => Promise.resolve([])),
 }));
 
+vi.mock('react-redux', async () => {
+  const actual = await vi.importActual('react-redux');
+  return {
+    __esModule: true,
+    ...actual,
+    useSelector: vi.fn(),
+  };
+});
+
 const mockStore = configureStore([thunk]);
 
 describe('Warning Component', () => {
@@ -60,6 +70,12 @@ describe('Warning Component', () => {
       Promise.resolve([{ title: 'Warning 1', warnings: [] }]),
     );
 
+    useSelector.mockImplementation(selector =>
+      selector({
+        theme: { darkMode: false },
+      }),
+    );
+
     render(
       <Provider store={store}>
         <Warning personId={mockPersonId} username={mockUsername} userRole="Administrator" />