Feat/dynamic banner updates (#628)

Co-authored-by: yuliferna <[email protected]>
XLabs · Dec 22, 2023 · 69dde9b · 69dde9b
1 parent 05a36c8
commit 69dde9b
Show file tree

Hide file tree

Showing 8 changed files with 236 additions and 69 deletions.
diff --git a/apps/connect/README.md b/apps/connect/README.md
@@ -25,3 +25,45 @@ If you are developing a production application, we recommend updating the config
 - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
 - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
 - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+
+
+## Create a new banner
+
+Go to `apps/connect/public/data/banners.json` and add a new item with this format:
+
+```
+[
+    {
+        "id": "string",
+        "background": "red",
+        "content": {
+            "text": "Lorem ipsum",
+            "color": "papayawhip",
+            "size": "30px"
+        },
+        "button": {
+            "label": "Click here!",
+            "background": "red",
+            "href": "https://portalbridge.com"
+        },
+        "since": "2023-12-22T01:06:52.211Z",
+        "until": "2023-12-25T01:06:52.211Z"
+    },
+    {
+        "id": "string",
+        "background": "yellow",
+        "content": {
+            "text": "Lorem ipsum",
+            "color": "white",
+            "size": "15px"
+        },
+        "button": {
+            "label": "Click here!",
+            "background": "green",
+            "href": "https://portalbridge.com"
+        },
+        "since": "2023-12-22T01:06:52.211Z",
+        "until": "2023-12-25T01:06:52.211Z"
+    }
+]
+```
diff --git a/apps/connect/package-lock.json b/apps/connect/package-lock.json
diff --git a/apps/connect/package.json b/apps/connect/package.json
@@ -20,11 +20,14 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.11",
     "@mui/material": "^5.12.1",
+    "dompurify": "^3.0.6",
+    "@tanstack/react-query": "^5.14.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vite-plugin-static-copy": "^0.17.0"
   },
   "devDependencies": {
+    "@types/dompurify": "^3.0.5",
     "@types/node": "^20.7.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

diff --git a/apps/connect/public/data/banners.json b/apps/connect/public/data/banners.json
@@ -0,0 +1,3 @@
+[
+
+]
diff --git a/apps/connect/src/components/atoms/Bar.tsx b/apps/connect/src/components/atoms/Bar.tsx
@@ -2,11 +2,13 @@ import styled from "@mui/material/styles/styled";
 
 export type BarProps = {
   background: string;
-  children: JSX.Element | JSX.Element[] | null;
+  color?: string;
+  size?: string;
+  children: string[] | JSX.Element | JSX.Element[] | null;
 };
 
-const Container = styled("div")<Pick<BarProps, "background">>(
-  ({ theme, background }) => ({
+const Container = styled("div")<BarProps>(
+  ({ theme, background, color, size }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -21,12 +23,18 @@ const Container = styled("div")<Pick<BarProps, "background">>(
     },
     textAlign: "center",
     fontWeight: 500,
-    fontSize: "16px",
+    color: color || theme.palette.text.primary,
+    fontSize: size || "16px",
     letterSpacing: "0.02em",
     background,
+    marginBottom: theme.spacing(0.5),
   })
 );
 
-export default function Bar({ background, children }: BarProps) {
-  return <Container background={background}>{children}</Container>;
+export default function Bar({ background, color, size, children }: BarProps) {
+  return (
+    <Container background={background} color={color} size={size}>
+      {children}
+    </Container>
+  );
 }
diff --git a/apps/connect/src/components/atoms/NewsBar.tsx b/apps/connect/src/components/atoms/NewsBar.tsx
@@ -1,5 +1,6 @@
 import NewBarButton from "./NewsBarButton";
 import useBannerMessageConfig, {
+  useMessages,
   type Message,
 } from "../../hooks/useBannerMessage";
 import Bar from "./Bar";
@@ -10,14 +11,30 @@ export type NewsBarProps = {
 
 export default function NewsBar({ messages }: NewsBarProps) {
   const message = useBannerMessageConfig(messages);
+  const banners = useMessages();
   return (
-    message && (
-      <Bar background={message.background}>
-        <>
-          {message.content}
-          {message.button ? <NewBarButton button={message.button} /> : null}
-        </>
-      </Bar>
-    )
+    <>
+      {message && (
+        <Bar background={message.background}>
+          <>
+            {message.content}
+            {message.button ? <NewBarButton button={message.button} /> : null}
+          </>
+        </Bar>
+      )}
+      {banners &&
+        banners.map((banner) => (
+          <Bar
+            background={banner.background}
+            color={banner.content.color || ""}
+            size={banner.content.size || ""}
+          >
+            <>
+              {banner.content.text}
+              {banner.button ? <NewBarButton button={banner.button} /> : null}
+            </>
+          </Bar>
+        ))}
+    </>
   );
 }