feature/IO-3499-React-19 Checkpoint

client/src/components/chat-popup/chat-popup.component.jsx

@@ -15,17 +15,19 @@ import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
 import "./chat-popup.styles.scss";
 import { useSocket } from "../../contexts/SocketIO/useSocket.js";
+import { selectDarkMode } from "../../redux/application/application.selectors.js";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
-  chatVisible: selectChatVisible
+  chatVisible: selectChatVisible,
+  isDarkMode: selectDarkMode
 });
 
 const mapDispatchToProps = (dispatch) => ({
   toggleChatVisible: () => dispatch(toggleChatVisible())
 });
 
-export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible }) {
+export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible, isDarkMode }) {
   const { t } = useTranslation();
   const { socket } = useSocket();
   const client = useApolloClient();
@@ -113,7 +115,7 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
   const handleManualRefresh = async () => {
     try {
       if (called && typeof refetch === "function") {
-        await refetch({ variables: { offset: 0 } });
+        await refetch({ offset: 0 });
       } else {
         await getConversations({ variables: { offset: 0 } });
       }
@@ -154,7 +156,7 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
     <Badge count={unreadCount}>
       <Card size="small">
         {chatVisible ? (
-          <div className="chat-popup">
+          <div className={`chat-popup ${isDarkMode ? "chat-popup--dark" : "chat-popup--light"}`}>
             <Space align="center">
               <Typography.Title level={4}>{t("messaging.labels.messaging")}</Typography.Title>
               <ChatNewConversation />

client/src/components/chat-popup/chat-popup.styles.scss

@@ -26,3 +26,11 @@
     flex-direction: column;
   }
 }
+
+.chat-popup--dark {
+  color-scheme: dark;
+}
+
+.chat-popup--light {
+  color-scheme: light;
+}

client/src/graphql/conversations.queries.js

@@ -45,6 +45,9 @@ export const CONVERSATION_LIST_QUERY = gql`
         }
       }
       job_conversations {
+        jobid
+        conversationid
+        id
         job {
           id
           ro_number
@@ -87,6 +90,7 @@ export const GET_CONVERSATION_DETAILS = gql`
       job_conversations {
         jobid
         conversationid
+        id
         job {
           id
           ownr_fn
@@ -122,6 +126,7 @@ export const CONVERSATION_ID_BY_PHONE = gql`
       unreadcnt
       created_at
       job_conversations {
+        id
         jobid
         conversationid
         job {
@@ -151,6 +156,7 @@ export const CREATE_CONVERSATION = gql`
         label
         unreadcnt
         job_conversations {
+          id
           jobid
           conversationid
           job {

client/src/utils/GraphQLClient.js

@@ -175,9 +175,6 @@ const cache = new InMemoryCache({
     masterdata: {
       keyFields: ["key"]
     },
-    job_conversations: {
-      keyFields: ["conversationid", "jobid"]
-    },
     Query: {
       fields: {
         job_watchers: {