Merge pull request #941 from dm3-org/develop

Fix query param

Author: AlexNi245

LICENSE

@@ -1,7 +1,9 @@
 BSD 2-Clause License
 
-Copyright (c) 2022,2023, corpus.ventures GmbH
-Copyright (c) 2023, dm3.org GmbH
+Copyright (c) 2022,2023 corpus.ventures GmbH
+Copyright (c) 2023 dm3.org GmbH
+Copyright (c) 2024 dm3.org gGmbH
+
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without

docker/prod/docker-compose.yml

@@ -107,6 +107,7 @@ services:
       REACT_APP_RESOLVER_BACKEND: ${REACT_APP_RESOLVER_BACKEND}
       REACT_APP_USER_ENS_SUBDOMAIN: ${REACT_APP_USER_ENS_SUBDOMAIN}
       REACT_APP_WALLET_CONNECT_PROJECT_ID: ${REACT_APP_WALLET_CONNECT_PROJECT_ID}
+      REACT_APP_GENOME_REGISTRY_ADDRESS: ${REACT_APP_GENOME_REGISTRY_ADDRESS}
       RESOLVER_ADDR: ${RESOLVER_ADDR}
 
   certbot:

packages/messenger-web/src/Dm3Widget.tsx

@@ -21,7 +21,7 @@ const Dm3Widget: React.FC = () => {
 
     // Define the configuration props for the DM3 component
     const props: DM3Configuration = {
-        defaultContact: isMessageToSet() ? messageTo! : 'contact.dm3.eth', // If messageTo is set, use it as the default contact
+        defaultContact: isMessageToSet ? messageTo! : 'contact.dm3.eth', // If messageTo is set, use it as the default contact
         userEnsSubdomain: process.env.REACT_APP_USER_ENS_SUBDOMAIN as string,
         addressEnsSubdomain: process.env.REACT_APP_ADDR_ENS_SUBDOMAIN as string,
         resolverBackendUrl: process.env.REACT_APP_RESOLVER_BACKEND as string,
@@ -38,7 +38,7 @@ const Dm3Widget: React.FC = () => {
         genomeRegistryAddress: process.env
             .REACT_APP_GENOME_REGISTRY_ADDRESS as string,
         showAlways: true,
-        showContacts: !isMessageToSet(), // Show all contacts or only the default based on the message destination
+        showContacts: !isMessageToSet, // Show all contacts or only the default based on the message destination
         signInImage: signInImagePath, // Dynamic image path based on the current week
     };
 

packages/messenger-web/src/Header.tsx

@@ -20,7 +20,7 @@ const Header: React.FC = () => {
             </a>
 
             {/* Conditionally render the message tag if the messageTo parameter is set */}
-            {isMessageToSet() && (
+            {isMessageToSet && (
                 <div className="message-tag">
                     <span>Send message to:</span>
                     <strong>{messageTo}</strong>

packages/messenger-web/src/parameter/messageto/MessageToContext.tsx

@@ -3,7 +3,7 @@ import { createContext, useContext } from 'react';
 // Define a type for the context value
 interface MessageToContextType {
     messageTo: string | null;
-    isMessageToSet: () => boolean;
+    isMessageToSet: boolean;
 }
 
 // Create the context with an initial undefined value. The actual value is provided by the provider.

packages/messenger-web/src/parameter/messageto/useMessageTo.ts

@@ -1,10 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 
 /**
  * A custom hook for retrieving the 'messageTo' URL parameter value.
  * It returns the value of 'messageTo' and a function to check if it's set.
  */
-export const useMessageTo = (): [string | null, () => boolean] => {
+export const useMessageTo = (): [string | null, boolean] => {
     // State to store the value of 'messageTo'
     const [messageTo, setMessageTo] = useState<string | null>(null);
 
@@ -19,10 +19,10 @@ export const useMessageTo = (): [string | null, () => boolean] => {
         setMessageTo(paramValue);
     }, []); // Empty dependency array means this effect runs once on mount
 
-    // Function to check if 'messageTo' is set (not null and not an empty string)
-    const isMessageToSet = (): boolean => {
+    // useMemo keeps track of the 'messageTo' value and returns a boolean indicating if it's set
+    const isMessageToSet = useMemo(() => {
         return messageTo !== null && messageTo.trim() !== '';
-    };
+    }, [messageTo]);
 
     // Return the 'messageTo' value and the 'isMessageToSet' function
     return [messageTo, isMessageToSet];

packages/messenger-widget/src/components/DM3/DM3.tsx

@@ -33,7 +33,7 @@ function DM3(props: Dm3Props) {
 
         // sets the DM3 confguration provided from props
         setDm3Configuration(props.config);
-    }, []);
+    }, [props]);
 
     // This handles the responsive check of widget
     useEffect(() => {