@truedat/core 7.8.1 → 7.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "7.8.1",
+  "version": "7.8.3",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "module": "src/index.js",
@@ -48,7 +48,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "7.7.2",
+    "@truedat/test": "7.8.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -85,5 +85,5 @@
     "slate-react": "^0.22.10",
     "swr": "^2.3.3"
   },
-  "gitHead": "c5687bea50fd81f4899bdadb4a25e459dacd58ec"
+  "gitHead": "b1f7af3f2c1b6969817a27f1fa44d31b264f4a55"
 }

package/src/components/Alert.js

@@ -38,6 +38,9 @@ const formatMessages = ({ id, defaultMessage, fields = {} }, formatMessage) => {
   return formatMessage({ id, defaultMessage: defaultMessage || id }, fields);
 };
 
+/**
+ * Ideal to use AlertMessage instead as we are moving away from redux to use context.
+ */
 export const Alert = ({
   message: {
     error,
@@ -70,9 +73,9 @@ export const Alert = ({
   const message_content =
     content && !existingList(errors) && !existingList(formattedMessages)
       ? formatMessage(
-          { id: content, defaultMessage: content },
-          { text, ...fields }
-        )
+        { id: content, defaultMessage: content },
+        { text, ...fields }
+      )
       : undefined;
   return content || header ? (
     <>

package/src/components/AlertMessage.js

@@ -0,0 +1,35 @@
+import _ from "lodash/fp";
+import { Message } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { useWebContext } from "../webContext";
+
+/**
+ * This component is meant to replace ../Alert.js as we are moving away from redux.
+ */
+export const AlertMessage = () => {
+    const { formatMessage } = useIntl();
+    const { alertMessage, setAlertMessage } = useWebContext();
+
+    if (_.isEmpty(alertMessage)) {
+        return null;
+    }
+
+    const { error, header, icon, color, content, anchor } = alertMessage;
+
+    return <Message
+        error={error}
+        header={header && formatMessage({ id: header, defaultMessage: header })}
+        icon={icon}
+        color={color}
+        content={
+            <>
+                {content && formatMessage({ id: content, defaultMessage: content })}
+                {anchor && <a href={anchor.reference}>{formatMessage({ id: anchor.label, defaultMessage: anchor.label })}</a>}
+            </>
+        }
+        visible
+        onDismiss={() => setAlertMessage({})}
+    />;
+};
+
+export default AlertMessage;

package/src/components/index.js

@@ -1,6 +1,7 @@
 import ActiveRoute from "./ActiveRoute";
 import AdminMenu from "./AdminMenu";
 import Alert from "./Alert";
+import AlertMessage from "./AlertMessage";
 import Authorized from "./Authorized";
 import AvailableFilters from "./AvailableFilters";
 import CardGroupsAccordion from "./CardGroupsAccordion";
@@ -61,6 +62,7 @@ export {
   ActiveRoute,
   AdminMenu,
   Alert,
+  AlertMessage,
   Authorized,
   AvailableFilters,
   CardGroupsAccordion,

package/src/webContext.js

@@ -1,10 +1,12 @@
-import { use, createContext } from "react";
+import { use, createContext, useState } from "react";
 
 const defaultContext = { disable_td_ai: false };
 export const WebContext = createContext(defaultContext);
 export const WebContextProvider = ({ children, value = {} }) => {
+  const [alertMessage, setAlertMessage] = useState({});
+
   return (
-    <WebContext.Provider value={{ ...defaultContext, ...value }}>
+    <WebContext.Provider value={{ ...defaultContext, ...value, alertMessage, setAlertMessage }}>
       {children}
     </WebContext.Provider>
   );