refactor: refactored code

openedx · Mar 14, 2024 · 202a4d4 · 202a4d4
1 parent 6cef2c1
commit 202a4d4
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 45 deletions.
diff --git a/src/index.scss b/src/index.scss
@@ -107,6 +107,14 @@ $fa-font-path: "~font-awesome/fonts";
   margin-left: -7px !important;
 }
 
+.margin-left-2px{
+  margin-left: 2px !important;
+}
+
+.padding-left-1px{
+  padding-left: 1px !important;
+}
+
 .preference-row div:last-child {
   margin-bottom: 0 !important;
 }

diff --git a/src/notification-preferences/NotificationPreferenceApp.jsx b/src/notification-preferences/NotificationPreferenceApp.jsx
@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Collapsible, NavItem } from '@openedx/paragon';
-import classNames from 'classnames';
 import messages from './messages';
 import ToggleSwitch from './ToggleSwitch';
 import {
@@ -18,7 +17,7 @@ import {
 import NotificationPreferenceRow from './NotificationPreferenceRow';
 import { updateAppPreferenceToggle, updateChannelPreferenceToggle } from './data/thunks';
 import { LOADING_STATUS } from '../constants';
-import NOTIFICATION_CHANNELS from './data/constants';
+import { NOTIFICATION_CHANNELS } from './data/constants';
 
 const NotificationPreferenceApp = ({ appId }) => {
   const dispatch = useDispatch();
@@ -29,11 +28,13 @@ const NotificationPreferenceApp = ({ appId }) => {
   const updatePreferencesStatus = useSelector(selectUpdatePreferencesStatus());
   const nonEditable = useSelector(selectNonEditablePreferences(appId));
   const verticalLinesRef = useRef(null);
+
   useEffect(() => {
     const verticalLines = verticalLinesRef.current.querySelectorAll('.vertical-line');
     let margin = verticalLinesRef.current.offsetWidth / 4.35;
 
     verticalLines.forEach(line => {
+      // eslint-disable-next-line no-param-reassign
       line.style.marginLeft = `${margin}px`;
       margin += margin;
     });
@@ -94,11 +95,7 @@ const NotificationPreferenceApp = ({ appId }) => {
                 <NavItem
                   id={channel}
                   key={channel}
-                  className={classNames(
-                    'd-flex px-4.5',
-                    { '': channel === 'email' },
-                  // { 'ml-4 ': channel === 'push' },
-                  )}
+                  className="d-flex px-4.5"
                   role="button"
                   onClick={onChannelToggle}
                 >

diff --git a/src/notification-preferences/NotificationPreferenceRow.jsx b/src/notification-preferences/NotificationPreferenceRow.jsx
@@ -15,7 +15,7 @@ import {
   selectSelectedCourseId,
   selectUpdatePreferencesStatus,
 } from './data/selectors';
-import NOTIFICATION_CHANNELS from './data/constants';
+import { NOTIFICATION_CHANNELS, EMAIL_CADENCE } from './data/constants';
 import { updatePreferenceToggle } from './data/thunks';
 import { LOADING_STATUS } from '../constants';
 
@@ -30,16 +30,20 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {
   const [target, setTarget] = useState(null);
 
   const onToggle = useCallback((event) => {
-    const {
-      checked,
-      name: notificationChannel,
-    } = event.target;
+    const { name: notificationChannel } = event.target;
+    let value;
+    if (notificationChannel !== 'email_cadence') {
+      value = event.target.checked;
+    } else {
+      value = event.target.innerText;
+    }
+
     dispatch(updatePreferenceToggle(
       courseId,
       appId,
       preferenceName,
       notificationChannel,
-      checked,
+      value,
     ));
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [appId, preferenceName]);
@@ -66,8 +70,8 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {
           </OverlayTrigger>
         )}
       </div>
-      <div className="d-flex flex-row  align-items-center">
-        {NOTIFICATION_CHANNELS.map((channel) => (
+      <div className="d-flex flex-row  align-items-center padding-left-1px">
+        {Object.values(NOTIFICATION_CHANNELS).map((channel) => (
           <div
             id={`${preferenceName}-${channel}`}
             className={classNames(
@@ -90,10 +94,10 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {
               <>
                 <div className="ml-3.5">
                   <Button
-                  // alt={intl.formatMessage(messages.actionsAlt)}
                     ref={setTarget}
                     variant="outline-primary"
                     onClick={open}
+                    disabled={preference.email}
                     size="sm"
                     iconAfter={isOpen ? ExpandLess : ExpandMore}
                     className="border-light-300 text-primary-500 font-weight-500 justify-content-between "
@@ -115,33 +119,18 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {
                       className="bg-white p-1 shadow d-flex flex-column"
                       data-testid="comment-sort-dropdown-modal-popup"
                     >
-                      <Dropdown.Item
-                        className="d-flex justify-content-start py-1.5 mb-1"
-                        as={Button}
-                        variant="tertiary"
-                        size="inline"
-                        onClick={() => console.log('click')}
-                      >
-                        daily
-                      </Dropdown.Item>
-                      <Dropdown.Item
-                        className="d-flex justify-content-start py-1.5"
-                        as={Button}
-                        variant="tertiary"
-                        size="inline"
-                        onClick={() => console.log('click')}
-                      >
-                        weekly
-                      </Dropdown.Item>
-                      <Dropdown.Item
-                        className="d-flex justify-content-start py-1.5"
-                        as={Button}
-                        variant="tertiary"
-                        size="inline"
-                        onClick={() => console.log('click')}
-                      >
-                        Imidiately
-                      </Dropdown.Item>
+                      {Object.values(EMAIL_CADENCE).map((cadence) => (
+                        <Dropdown.Item
+                          name="email_cadence"
+                          className="d-flex justify-content-start py-1.5 mb-1 margin-left-2px"
+                          as={Button}
+                          variant="tertiary"
+                          size="inline"
+                          onClick={onToggle}
+                        >
+                          {intl.formatMessage(messages.emailCadence, { text: cadence })}
+                        </Dropdown.Item>
+                      ))}
                     </div>
                   </ModalPopup>
                 </div>

diff --git a/src/notification-preferences/data/constants.js b/src/notification-preferences/data/constants.js
@@ -1,3 +1,11 @@
-const NOTIFICATION_CHANNELS = ['web', 'push', 'email'];
+export const NOTIFICATION_CHANNELS = {
+  WEB: 'web',
+  PUSH: 'push',
+  EMAIL: 'email',
+};
 
-export default NOTIFICATION_CHANNELS;
+export const EMAIL_CADENCE = {
+  DAILY: 'daily',
+  WEEKLY: 'weekly',
+  IMMEDIATELY: 'immediately',
+};
diff --git a/src/notification-preferences/messages.js b/src/notification-preferences/messages.js
@@ -41,6 +41,17 @@ const messages = defineMessages({
     }`,
     description: 'Display text for Notification Channel',
   },
+  emailCadence: {
+    id: 'notification.preference.emailCadence',
+    defaultMessage: `{
+      text, select,
+      daily {Daily}
+      weekly {Weekly}
+      immediately {Immediately}
+      other {{text}}
+    }`,
+    description: 'Display text for Email Cadence',
+  },
   typeLabel: {
     id: 'notification.preference.type.label',
     defaultMessage: 'Type',