admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/IO-3499-React-19 - Checkpoint

Browse Source
This commit is contained in:
Dave
2026-01-23 18:12:01 -05:00
parent 7f43ba33f6
commit 745ec57510
8 changed files with 127 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/components/notification-center/notification-center.component.jsx
View File

@@ -24,6 +24,7 @@ const NotificationCenterComponent = ({
onNotificationClick,
unreadCount,
isEmployee,
isDarkMode,
ref
}) => {
const { t } = useTranslation();
@@ -112,14 +113,16 @@ const NotificationCenterComponent = ({
<Alert title={t("notifications.labels.employee-notification")} type="warning" />
</div>
) : (
<Virtuoso
ref={virtuosoRef}
style={{ height: "400px", width: "100%" }}
data={notifications}
totalCount={notifications.length}
endReached={loadMore}
itemContent={renderNotification}
/>
<div className={isDarkMode ? "notification-center--dark" : "notification-center--light"} style={{ height: "400px", width: "100%" }}>
<Virtuoso
ref={virtuosoRef}
style={{ height: "100%", width: "100%" }}
data={notifications}
totalCount={notifications.length}
endReached={loadMore}
itemContent={renderNotification}
/>
</div>
)}
</div>
);

7
client/src/components/notification-center/notification-center.container.jsx
View File

@@ -5,6 +5,7 @@ import NotificationCenterComponent from "./notification-center.component";
import { GET_NOTIFICATIONS } from "../../graphql/notifications.queries";
import { createStructuredSelector } from "reselect";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
import { selectDarkMode } from "../../redux/application/application.selectors.js";
import day from "../../utils/day.js";
import { INITIAL_NOTIFICATIONS, useSocket } from "../../contexts/SocketIO/useSocket.js";
import { useIsEmployee } from "../../utils/useIsEmployee.js";
@@ -22,7 +23,7 @@ const NOTIFICATION_POLL_INTERVAL_SECONDS = 60;
* @returns {JSX.Element}
* @constructor
*/
const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount, currentUser }) => {
const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount, currentUser, isDarkMode }) => {
const [showUnreadOnly, setShowUnreadOnly] = useState(false);
const [notifications, setNotifications] = useState([]);
const [isLoading, setIsLoading] = useState(false);
@@ -213,13 +214,15 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount,
loadMore={loadMore}
onNotificationClick={handleNotificationClick}
unreadCount={unreadCount}
isDarkMode={isDarkMode}
/>
);
};
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
currentUser: selectCurrentUser
currentUser: selectCurrentUser,
isDarkMode: selectDarkMode
});
export default connect(mapStateToProps, null)(NotificationCenterContainer);

8
client/src/components/notification-center/notification-center.styles.scss
View File

@@ -173,3 +173,11 @@
}
}
}
.notification-center--dark {
color-scheme: dark;
}
.notification-center--light {
color-scheme: light;
}

35
client/src/components/task-center/task-center.component.jsx
View File

@@ -22,6 +22,7 @@ const TaskCenterComponent = ({
hasMore,
createNewTask,
incompleteTaskCount,
isDarkMode,
ref
}) => {
const { t } = useTranslation();
@@ -140,22 +141,24 @@ const TaskCenterComponent = ({
{tasks.length === 0 && !loading ? (
<div className="no-tasks-message">{t("tasks.labels.no_tasks")}</div>
) : (
<Virtuoso
ref={virtuosoRef}
style={{ height: "550px", width: "100%" }}
groupCounts={groupCounts}
groupContent={groupContent}
itemContent={itemContent}
endReached={hasMore && !loading ? onLoadMore : undefined}
components={{
Footer: () =>
loading ? (
<div className="loading-footer">
<Spin />
</div>
) : null
}}
/>
<div className={isDarkMode ? "task-center--dark" : "task-center--light"} style={{ height: "550px", width: "100%" }}>
<Virtuoso
ref={virtuosoRef}
style={{ height: "100%", width: "100%" }}
groupCounts={groupCounts}
groupContent={groupContent}
itemContent={itemContent}
endReached={hasMore && !loading ? onLoadMore : undefined}
components={{
Footer: () =>
loading ? (
<div className="loading-footer">
<Spin />
</div>
) : null
}}
/>
</div>
)}
</div>
);

8
client/src/components/task-center/task-center.container.jsx
View File

@@ -3,6 +3,7 @@ import { useQuery } from "@apollo/client/react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
import { selectDarkMode } from "../../redux/application/application.selectors.js";
import { INITIAL_TASKS, TASKS_CENTER_POLL_INTERVAL, useSocket } from "../../contexts/SocketIO/useSocket";
import { useIsEmployee } from "../../utils/useIsEmployee";
import TaskCenterComponent from "./task-center.component";
@@ -11,7 +12,8 @@ import { QUERY_TASKS_NO_DUE_DATE_PAGINATED, QUERY_TASKS_WITH_DUE_DATES } from ".
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
currentUser: selectCurrentUser
currentUser: selectCurrentUser,
isDarkMode: selectDarkMode
});
const mapDispatchToProps = (dispatch) => ({
@@ -24,7 +26,8 @@ const TaskCenterContainer = ({
bodyshop,
currentUser,
setTaskUpsertContext,
incompleteTaskCount
incompleteTaskCount,
isDarkMode
}) => {
const [tasks, setTasks] = useState([]);
const { isConnected } = useSocket();
@@ -128,6 +131,7 @@ const TaskCenterContainer = ({
hasMore={hasMore}
createNewTask={createNewTask}
incompleteTaskCount={incompleteTaskCount}
isDarkMode={isDarkMode}
/>
);
};

8
client/src/components/task-center/task-center.styles.scss
View File

@@ -141,3 +141,11 @@
text-align: center;
}
}
.task-center--dark {
color-scheme: dark;
}
.task-center--light {
color-scheme: light;
}