Modified CPHeader.jsx, BellNotification.js, Header.jsx, Member.jsx, Timelog.jsx, SlideToggle.jsx

Author: SreePujitha01

src/components/CommunityPortal/CPHeader/CPHeader.jsx

@@ -338,9 +338,9 @@ export function Header(props) {
                         {UPDATE_PASSWORD}
                       </DropdownItem>
                     )}
-                    <DropdownItem className={darkMode ? 'text-light' : ''}>
+                    <div style={{ padding: '0 1rem' }}>
                       <DarkModeButton />
-                    </DropdownItem>
+                    </div>
                     <DropdownItem divider />
                     <DropdownItem onClick={openModal} className={darkMode ? 'text-light' : ''}>
                       {LOGOUT}

src/components/Header/BellNotification.jsx

@@ -101,6 +101,7 @@ export default function BellNotification({ userId }) {
   };
 
   useEffect(() => {
+    if (!userId) return;
     const fetchDbNotifications = async () => {
       try {
         const { data } = await axios.get(`${ENDPOINTS.NOTIFICATIONS}/unread/user/${userId}`);

src/components/Header/Header.jsx

@@ -201,10 +201,10 @@ export function Header(props) {
       props.getAllRoles();
     }
     // Fetch unread notification
-    if (isAuthenticated && userId) {
-      dispatch(getUnreadUserNotifications(userId));
+    if (isAuthenticated && displayUserId) {
+      dispatch(getUnreadUserNotifications(displayUserId));
     }
-  }, []);
+  }, [isAuthenticated, displayUserId, roles.length]);
 
   useEffect(() => {
     if (props.notification?.error) {

src/components/Projects/Members/Member/Member.jsx

@@ -11,7 +11,7 @@ import { boxStyle } from '~/styles';
 import PropTypes from 'prop-types';
 
 
-const Member = props => {
+const Member = ({ index = 0, ...props }) => {
   const { darkMode } = props;
   const canGetProjectMembers = hasPermission('getProjectMembers');
   const canUnassignUserInProject = hasPermission('unassignUserInProject');
@@ -21,7 +21,7 @@ const Member = props => {
     <React.Fragment>
       <tr className={`members__tr ${darkMode ? 'bg-space-cadet' : ''}`}>
         <th scope="row">
-          <div>{typeof props.index === 'number' ? props.index + 1 : null}</div>
+          <div>{typeof index === 'number' ? index + 1 : null}</div>
         </th>
         <td className="members__name">
           {canGetProjectMembers ? (
@@ -53,10 +53,7 @@ const Member = props => {
   );
 };
 
-// Define default props
-Member.defaultProps = {
-  index: 0
-};
+// ...existing code...
 
 // Define prop types
 Member.propTypes = {

src/components/Timelog/Timelog.jsx

@@ -1208,9 +1208,7 @@ Timelog.prototype = {
   userId: PropTypes.string,
 };
 
-Timelog.defaultProps = {
-  userId: null,
-};
+// ...existing code...
 
 const mapStateToProps = state => ({
   authUser: state.auth.user,

src/components/WeeklySummariesReport/components/SlideToggle.jsx

@@ -5,7 +5,7 @@ import cn from 'classnames';
 import styles from './SlideToggle.module.scss';
 
 // eslint-disable-next-line react/function-component-definition
-const SlideToggle = ({ color = 'default', onChange, className }) => {
+const SlideToggle = ({ color = 'default', className = '', onChange }) => {
   const [checked, setChecked] = useState(false);
 
   return (
@@ -24,10 +24,7 @@ const SlideToggle = ({ color = 'default', onChange, className }) => {
   );
 };
 
-SlideToggle.defaultProps = {
-  color: 'default',
-  className: '',
-};
+// ...existing code...
 
 SlideToggle.propTypes = {
   color: PropTypes.oneOf(['default', 'purple', 'green', 'navy']),