feat: add generic title/content notice type

politics-rewired · Dec 10, 2023 · 0c04d7b · 0c04d7b
1 parent ede6e36
commit 0c04d7b
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 53 deletions.
diff --git a/libs/gql-schema/notice.ts b/libs/gql-schema/notice.ts
@@ -30,7 +30,15 @@ export const schema = `
     id: ID!
   }
 
-  union Notice = Register10DlcBrandNotice | Register10DlcCampaignNotice | Pending10DlcCampaignNotice | Pricing10DlcNotice | PricingTollFreeNotice
+  type TitleContentNotice {
+    id: ID!
+    title: String!
+    avatarIcon: String!
+    avatarColor: String!
+    markdownContent: String!
+  }
+
+  union Notice = Register10DlcBrandNotice | Register10DlcCampaignNotice | Pending10DlcCampaignNotice | Pricing10DlcNotice | PricingTollFreeNotice | TitleContentNotice
 
   type NoticeEdge {
     cursor: Cursor!

diff --git a/libs/spoke-codegen/src/graphql/notifications.graphql b/libs/spoke-codegen/src/graphql/notifications.graphql
@@ -5,6 +5,13 @@ query getOrganizationNotifications($organizationId: String!) {
     }
     edges {
       node {
+        ... on TitleContentNotice {
+          id
+          title
+          avatarIcon
+          avatarColor
+          markdownContent
+        }
         ... on Register10DlcBrandNotice {
           id
           tcrRegistrationUrl
@@ -25,4 +32,4 @@ query getOrganizationNotifications($organizationId: String!) {
       }
     }
   }
-}
+}
diff --git a/src/api/notice.ts b/src/api/notice.ts
@@ -4,10 +4,18 @@ import type {
   Pricing10DlcNotice,
   PricingTollFreeNotice,
   Register10DlcBrandNotice,
-  Register10DlcCampaignNotice
+  Register10DlcCampaignNotice,
+  TitleContentNotice
 } from "@spoke/spoke-codegen";
 import type { GraphQLType } from "graphql";
 
+export function isTitleContentNotice(obj: Notice): obj is TitleContentNotice {
+  return (
+    (obj as TitleContentNotice & GraphQLType).__typename ===
+    "TitleContentNotice"
+  );
+}
+
 export function isRegister10DlcBrandNotice(
   obj: Notice
 ): obj is Register10DlcBrandNotice {

diff --git a/src/containers/AdminDashboard/components/NotificationCard.tsx b/src/containers/AdminDashboard/components/NotificationCard.tsx
@@ -1,64 +1,79 @@
-// import Card from "@material-ui/core/Card";
-// import CardContent from "@material-ui/core/CardContent";
-// import Divider from "@material-ui/core/Divider";
-// import { useGetOrganizationNotificationsQuery } from "@spoke/spoke-codegen";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import Divider from "@material-ui/core/Divider";
+import { useGetOrganizationNotificationsQuery } from "@spoke/spoke-codegen";
 import React from "react";
 
-// import {
-//   isPending10DlcCampaignNotice,
-//   isPricing10DlcNotice,
-//   isPricingTollFreeNotice,
-//   isRegister10DlcBrandNotice,
-//   isRegister10DlcCampaignNotice
-// } from "../../../api/notice";
-// import Pending10DlcCampaignNoticeCard from "./Pending10DlcCampaignNoticeCard";
-// import PricingNoticeCard from "./PricingNoticeCard";
-// import Register10DlcNoticeCard from "./Register10DlcNoticeCard";
+import {
+  isPending10DlcCampaignNotice,
+  isPricing10DlcNotice,
+  isPricingTollFreeNotice,
+  isRegister10DlcBrandNotice,
+  isRegister10DlcCampaignNotice,
+  isTitleContentNotice
+} from "../../../api/notice";
+import Pending10DlcCampaignNoticeCard from "./Pending10DlcCampaignNoticeCard";
+import PricingNoticeCard from "./PricingNoticeCard";
+import Register10DlcNoticeCard from "./Register10DlcNoticeCard";
 import ShutdownNoticeCard from "./ShutdownNoticeCard";
+import TitleContentNoticeCard from "./TitleContentNoticeCard";
 
 interface NotificationCardProps {
   organizationId: string;
 }
 
-export const NotificationCard: React.FC<NotificationCardProps> = () => {
+export const NotificationCard: React.FC<NotificationCardProps> = ({
+  organizationId
+}) => {
   return <ShutdownNoticeCard />;
 
-  // const { data, loading, error } = useGetOrganizationNotificationsQuery({
-  //   variables: { organizationId }
-  // });
+  const { data, loading, error } = useGetOrganizationNotificationsQuery({
+    variables: { organizationId }
+  });
 
-  // if (loading) return null;
+  if (loading) return null;
 
-  // if (error || !data?.notices) {
-  //   return (
-  //     <Card style={{ marginBottom: "2em" }}>
-  //       <CardContent>There was an error fetching notifications.</CardContent>
-  //     </Card>
-  //   );
-  // }
+  if (error || !data?.notices) {
+    return (
+      <Card style={{ marginBottom: "2em" }}>
+        <CardContent>There was an error fetching notifications.</CardContent>
+      </Card>
+    );
+  }
 
-  // return (
-  //   <div>
-  //     {data?.notices.edges.map(({ node }) => {
-  //       if (window.SHOW_10DLC_REGISTRATION_NOTICES) {
-  //         if (
-  //           isRegister10DlcBrandNotice(node) ||
-  //           isRegister10DlcCampaignNotice(node)
-  //         ) {
-  //           return <Register10DlcNoticeCard key={node.id} {...node} />;
-  //         }
-  //         if (isPending10DlcCampaignNotice(node)) {
-  //           return <Pending10DlcCampaignNoticeCard key={node.id} {...node} />;
-  //         }
-  //         if (isPricing10DlcNotice(node) || isPricingTollFreeNotice(node)) {
-  //           return <PricingNoticeCard key={node.id} {...node} />;
-  //         }
-  //       }
-  //       return null;
-  //     })}
-  //     {data?.notices.pageInfo.totalCount > 0 && <Divider />}
-  //   </div>
-  // );
+  return (
+    <div>
+      {data?.notices.edges.map(({ node }) => {
+        if (isTitleContentNotice(node)) {
+          return (
+            <TitleContentNoticeCard
+              key={node.id}
+              title={node.title}
+              avatarIcon={node.avatarIcon}
+              avatarColor={node.avatarColor as any}
+              markdownContent={node.markdownContent}
+            />
+          );
+        }
+        if (window.SHOW_10DLC_REGISTRATION_NOTICES) {
+          if (
+            isRegister10DlcBrandNotice(node) ||
+            isRegister10DlcCampaignNotice(node)
+          ) {
+            return <Register10DlcNoticeCard key={node.id} {...node} />;
+          }
+          if (isPending10DlcCampaignNotice(node)) {
+            return <Pending10DlcCampaignNoticeCard key={node.id} {...node} />;
+          }
+          if (isPricing10DlcNotice(node) || isPricingTollFreeNotice(node)) {
+            return <PricingNoticeCard key={node.id} {...node} />;
+          }
+        }
+        return null;
+      })}
+      {data?.notices.pageInfo.totalCount > 0 && <Divider />}
+    </div>
+  );
 };
 
 export default NotificationCard;
diff --git a/src/containers/AdminDashboard/components/TitleContentNoticeCard.tsx b/src/containers/AdminDashboard/components/TitleContentNoticeCard.tsx
@@ -0,0 +1,52 @@
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import CardHeader from "@material-ui/core/CardHeader";
+import Announcement from "@material-ui/icons/Announcement";
+import React from "react";
+import type { Components } from "react-markdown";
+import ReactMarkdown from "react-markdown";
+
+type TitleContentNoticeCardProps = {
+  title: string;
+  avatarIcon: string;
+  avatarColor:
+    | "error"
+    | "inherit"
+    | "disabled"
+    | "action"
+    | "primary"
+    | "secondary"
+    | undefined;
+  markdownContent: string;
+};
+
+// Force links to open in a new window/tab
+const components: Components = {
+  a: ({ node: _node, children, href, title, ...props }) => (
+    <a href={href} title={title} rel="noreferrer" target="_blank" {...props}>
+      {children}
+    </a>
+  )
+};
+
+const TitleContentNoticeCard: React.FC<TitleContentNoticeCardProps> = (
+  props
+) => {
+  const avatar =
+    props.avatarIcon === "announcement" ? (
+      <Announcement color={props.avatarColor} />
+    ) : null;
+
+  return (
+    <Card variant="outlined" style={{ marginBottom: "2em" }}>
+      <CardHeader title={props.title} avatar={avatar} />
+      <CardContent>
+        <ReactMarkdown components={components}>
+          {props.markdownContent}
+        </ReactMarkdown>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default TitleContentNoticeCard;
diff --git a/src/schema.graphql b/src/schema.graphql
@@ -889,7 +889,15 @@ type PricingTollFreeNotice implements PricingNotice {
   id: ID!
 }
 
-union Notice = Register10DlcBrandNotice | Register10DlcCampaignNotice | Pending10DlcCampaignNotice | Pricing10DlcNotice | PricingTollFreeNotice
+type TitleContentNotice {
+  id: ID!
+  title: String!
+  avatarIcon: String!
+  avatarColor: String!
+  markdownContent: String!
+}
+
+union Notice = Register10DlcBrandNotice | Register10DlcCampaignNotice | Pending10DlcCampaignNotice | Pricing10DlcNotice | PricingTollFreeNotice | TitleContentNotice
 
 type NoticeEdge {
   cursor: Cursor!

diff --git a/src/server/api/notice.ts b/src/server/api/notice.ts
@@ -6,13 +6,17 @@ import {
   isPricing10DlcNotice,
   isPricingTollFreeNotice,
   isRegister10DlcBrandNotice,
-  isRegister10DlcCampaignNotice
+  isRegister10DlcCampaignNotice,
+  isTitleContentNotice
 } from "../../api/notice";
 
 // explicitly setting typename
 export const resolvers = {
   Notice: {
     __resolveType(obj: Notice) {
+      if (isTitleContentNotice(obj)) {
+        return "TitleContentNotice";
+      }
       if (isRegister10DlcBrandNotice(obj)) {
         return "Register10DlcBrandNotice";
       }