feat(content): divide the buttons for displaying attributes and insight

Author: yoshinorin

__tests__/e2e/articles/article.test.ts

@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 
 test.beforeEach(async ({ page }) => {
   await page.goto("http://localhost:3000/articles/nested/standard/");
@@ -94,19 +94,38 @@ test.describe("Article", () => {
     // await expect(tags[1]).toHaveValue('Cats');
   });
 
-  test("should clickable `Attributes / Insight` button - with screenshot", async ({
+  test("should clickable `Attributes` button - with screenshot", async ({
     page
   }, testInfo) => {
-    const button = await page.locator("main>article>div>div>div>span");
-    await expect(button).toHaveText("Attributes / Insight ▼");
+    const buttons = await page.locator("main>article>div>div>div").all();
+    const button = await buttons[0].locator("span");
+    await expect(button).toHaveText("Attributes ▼");
 
     await button.click();
-    const content = await page.locator("main>article>div>div>div>pre");
+    const content = await page.locator("main>article>div>pre");
 
     // TODO: assert JSON
     await expect(content).toContainText("attributes");
     // NOTE: content id
     await expect(content).toContainText("01h81rme1cy11e3ffgagtym2xh");
+
+    const screenshot = await page.screenshot({ fullPage: true });
+    await testInfo.attach("screenshot", {
+      body: screenshot,
+      contentType: "image/png"
+    });
+  });
+
+  test("should clickable `Insight` button - with screenshot", async ({
+    page
+  }, testInfo) => {
+    const buttons = await page.locator("main>article>div>div>div").all();
+    const button = await buttons[1].locator("span");
+    await expect(button).toHaveText("Insight ▼");
+
+    await button.click();
+    const content = await page.locator("main>article>div>pre");
+
     // NOTE: commit hash
     await expect(content).toContainText("24af403");
 

src/components/accordion.tsx

@@ -0,0 +1,16 @@
+import styles from "../styles/actionbutton.module.scss";
+
+export const ActionButton: React.FunctionComponent<{
+  title: string;
+  onclick: () => void;
+}> = ({ title, onclick }) => {
+  return (
+    <div>
+      <span
+        className={`'unstyled' ${styles["action-button"]}`}
+        onClick={onclick}
+        dangerouslySetInnerHTML={{ __html: title }}
+      />
+    </div>
+  );
+};

src/components/actionbutton.tsx

@@ -1,4 +1,4 @@
-export * from "./accordion";
+export * from "./actionbutton";
 export * from "./archives";
 export * from "./articles";
 export * from "./backtotop";

src/components/components.ts

@@ -6,25 +6,21 @@ import { BackendMeta, Content, ContentMeta, Insight } from "../models/models";
 import containerStyles from "../styles/components/container.module.scss";
 import contentStyles from "../styles/components/content.module.scss";
 import { mergeBackendMeta } from "../utils/insight";
-import { Accordion } from "./accordion";
+import { ActionButton } from "./actionbutton";
+import { PreContent } from "./precontent";
 
 export const ContentComponent: React.FunctionComponent<{
   content: Content;
   insight: Insight | null;
 }> = ({ content, insight }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [isFetchedBackendMeta, setIsFetchedBackendMeta] = useState(false);
-  const [metaAndInsight, setData] = useState(null);
+  const [isAttributesOpen, setIsAttributesOpen] = useState(false);
+  const [attributes, setAttributes] = useState(null);
 
-  const fetchBackendMetaData = async () => {
-    const response: Response = await fetchSystemMetadata();
-    let ins = insight;
-    if (response.status === 200) {
-      const bm = (await response.json()) as BackendMeta;
-      ins = mergeBackendMeta(insight, bm);
-      setIsFetchedBackendMeta(true);
-    }
+  const [isMetadataOpen, setIsMetadataOpen] = useState(false);
+  const [isFetchedBackendMeta, setIsFetchedBackendMeta] = useState(false);
+  const [metadata, setMetaData] = useState(null);
 
+  const formatAttributes = () => {
     let actualRobotsMeta = "";
     let maybeRobotsMeta = document.querySelector('meta[name="robots"]');
     if (maybeRobotsMeta) {
@@ -57,37 +53,45 @@ export const ContentComponent: React.FunctionComponent<{
       updatedAt: content.updatedAt
     };
 
-    setData(
-      JSON.stringify(
-        {
-          attributes: meta,
-          insight: ins
-        },
-        null,
-        2
-      )
-    );
+    setAttributes(JSON.stringify({ attributes: meta }, null, 2));
+  };
+
+  const fetchBackendMetaData = async () => {
+    const response: Response = await fetchSystemMetadata();
+    let ins = insight;
+    if (response.status === 200) {
+      const bm = (await response.json()) as BackendMeta;
+      ins = mergeBackendMeta(insight, bm);
+      setIsFetchedBackendMeta(true);
+    }
+
+    setMetaData(JSON.stringify({ insight: ins }, null, 2));
+  };
+
+  const toggleAttributes = () => {
+    formatAttributes();
+    setIsMetadataOpen(false);
+    setIsAttributesOpen(!isAttributesOpen);
   };
 
-  const toggle = () => {
+  const toggleMetadata = () => {
     if (!isFetchedBackendMeta) {
       fetchBackendMetaData();
       setIsFetchedBackendMeta(true);
     }
-    setIsOpen(!isOpen);
+    setIsAttributesOpen(false);
+    setIsMetadataOpen(!isMetadataOpen);
   };
 
   return (
     <article className={contentStyles.content}>
       <div className={containerStyles.container}>
-        <div className={`${contentStyles["accordion-wrap"]}`}>
-          <Accordion
-            open={isOpen}
-            onclick={toggle}
-            title="Attributes / Insight ▼"
-            content={metaAndInsight}
-          />
+        <div className={`${contentStyles["actionbutton-wrap"]}`}>
+          <ActionButton onclick={toggleAttributes} title="Attributes ▼" />
+          <ActionButton onclick={toggleMetadata} title="Insight ▼" />
         </div>
+        {isAttributesOpen && <PreContent content={attributes} />}
+        {isMetadataOpen && <PreContent content={metadata} />}
         <div className={`${contentStyles["words"]}`}>
           {content.length.toLocaleString()} words
         </div>

src/components/content.tsx

@@ -1,8 +1,10 @@
 @use "sass:map";
 @use '_variables';
 
-.menu-button {
+.action-button {
   font-size:         1.45rem;
+  width:             90px;
+  text-align:        center;
   display:           inline-block;
   color:             map.get(variables.$basic-colors, 'base');
   background:        transparent;

src/styles/accordion.module.scss renamed to src/styles/actionbutton.module.scss

@@ -40,8 +40,12 @@
       }
     }
   }
-  .accordion-wrap {
+  .actionbutton-wrap {
     margin-top: 0.7em;
+    display:          flex;
+    flex-direction:   row;
+    gap:              1rem;
+    flex-wrap:        wrap;
   }
 }