From 4c12099d9491b6d836f036401ae855ffc2a4a2f9 Mon Sep 17 00:00:00 2001
From: Matt Yoder <mjyoder@psc.edu>
Date: Wed, 21 Aug 2024 14:59:22 -0400
Subject: [PATCH] feat(resource-group-discussion): add discussion topics
 component

---
 public/api/resource-groups/1/discussion.json | 25 +++++++++++
 src/resource-group-affinity-group.jsx        |  6 +--
 src/resource-group-detail.jsx                |  5 +++
 src/resource-group-discussion.jsx            | 46 ++++++++++++++++++++
 src/section.jsx                              |  2 +-
 5 files changed, 80 insertions(+), 4 deletions(-)
 create mode 100644 public/api/resource-groups/1/discussion.json
 create mode 100644 src/resource-group-discussion.jsx

diff --git a/public/api/resource-groups/1/discussion.json b/public/api/resource-groups/1/discussion.json
new file mode 100644
index 0000000..59637f5
--- /dev/null
+++ b/public/api/resource-groups/1/discussion.json
@@ -0,0 +1,25 @@
+{
+  "categoryUri": "https://ask.cyberinfrastructure.org/c/access-forums/access-bridges/78",
+  "topics": [
+    {
+      "topic": "Bridges-2 suitability for computational chemistry workloads (mainly Gaussian)?",
+      "updateDate": "2023-07-26",
+      "topicUri": "https://ask.cyberinfrastructure.org/t/bridges-2-suitability-for-computational-chemistry-workloads-mainly-gaussian/2886"
+    },
+    {
+      "topic": "How do access Bridges2 globus endpoint",
+      "updateDate": "2023-05-26",
+      "topicUri": "https://ask.cyberinfrastructure.org/t/how-do-access-bridges2-globus-endpoint/2769"
+    },
+    {
+      "topic": "AlphaFold 2 Bridges",
+      "updateDate": "2022-09-14",
+      "topicUri": "https://ask.cyberinfrastructure.org/t/alphafold-2-bridges/2493"
+    },
+    {
+      "topic": "About the ACCESS-Bridges category",
+      "updateDate": "2022-08-29",
+      "topicUri": "https://ask.cyberinfrastructure.org/t/about-the-access-bridges-category/2474"
+    }
+  ]
+}
diff --git a/src/resource-group-affinity-group.jsx b/src/resource-group-affinity-group.jsx
index 7d3e9d0..17fed2b 100644
--- a/src/resource-group-affinity-group.jsx
+++ b/src/resource-group-affinity-group.jsx
@@ -10,13 +10,13 @@ export default function ResourceGroupAffinityGroup({
         Join the community! Members get update about announcements, events, and
         outages.
       </p>
-      <a href="#" class="btn">
+      <a href="#" class="btn secondary">
         Join
       </a>
-      <a href="#" class="btn secondary">
+      <a href="#" class="btn">
         Slack
       </a>
-      <a href="#" class="btn secondary">
+      <a href="#" class="btn">
         Q&A
       </a>
     </Section>
diff --git a/src/resource-group-detail.jsx b/src/resource-group-detail.jsx
index 62e2c7f..e44daac 100644
--- a/src/resource-group-detail.jsx
+++ b/src/resource-group-detail.jsx
@@ -1,5 +1,6 @@
 import ResourceGroupAffinityGroup from "./resource-group-affinity-group";
 import ResourceGroupDescription from "./resource-group-description";
+import ResourceGroupDiscussion from "./resource-group-discussion";
 import ResourceGroupDocumentation from "./resource-group-documentation";
 import ResourceGroupEvents from "./resource-group-events";
 import ResourceGroupProjects from "./resource-group-projects";
@@ -44,6 +45,10 @@ export default function ResourceGroupDetail({ baseUri, resourceGroupId }) {
         baseUri={baseUri}
         resourceGroupId={resourceGroupId}
       />
+      <ResourceGroupDiscussion
+        baseUri={baseUri}
+        resourceGroupId={resourceGroupId}
+      />
     </div>
   );
 }
diff --git a/src/resource-group-discussion.jsx b/src/resource-group-discussion.jsx
new file mode 100644
index 0000000..c842ed1
--- /dev/null
+++ b/src/resource-group-discussion.jsx
@@ -0,0 +1,46 @@
+import { useJSON } from "./utils";
+
+import Grid from "./grid";
+import Section from "./section";
+
+export default function ResourceGroupDiscussion({ baseUri, resourceGroupId }) {
+  const data = useJSON(
+    `${baseUri}/api/resource-groups/${resourceGroupId}/discussion.json`,
+    null
+  );
+
+  if (!data || data.error) return;
+
+  const columns = [
+    {
+      key: "topic",
+      name: "Topic",
+      format: (value, row) => <a href={row.topicUri}>{value}</a>,
+    },
+    {
+      key: "updateDate",
+      name: "Last Update",
+      format: (value) =>
+        new Date(value).toLocaleString("en-US", { dateStyle: "medium" }),
+    },
+  ];
+
+  const headerComponents = [
+    <a href={data.categoryUri} class="btn secondary">
+      Ask a Question
+    </a>,
+    <a href={data.categoryUri} class="btn">
+      View All Topics
+    </a>,
+  ];
+
+  return (
+    <Section
+      title="Ask.CI Topics"
+      icon="chat-fill"
+      headerComponents={headerComponents}
+    >
+      <Grid columns={columns} rows={data.topics} />
+    </Section>
+  );
+}
diff --git a/src/section.jsx b/src/section.jsx
index fb08f3c..d762ce3 100644
--- a/src/section.jsx
+++ b/src/section.jsx
@@ -26,7 +26,7 @@ export default function Section({
           {icon ? <Icon name={icon} /> : null}
           {title}
         </h2>
-        {headerComponents}
+        <div>{headerComponents}</div>
       </div>
       {children}
     </section>