Converted renderCollapsibleContent to react component

atlasacademy · Nov 9, 2023 · ad50f0e · ad50f0e
1 parent be8f31a
commit ad50f0e
Show file tree

Hide file tree

Showing 17 changed files with 191 additions and 219 deletions.
diff --git a/packages/db/src/Component/CollapsibleContent.tsx b/packages/db/src/Component/CollapsibleContent.tsx
@@ -13,24 +13,23 @@ export function ArrowToggle({ eventKey }: { eventKey: string }) {
     return <FontAwesomeIcon className={`collapsible-header-collapse-actions ${rotateClass}`} icon={faChevronDown} />;
 }
 
-function renderCollapsibleContent(
-    {
-        title,
-        content,
-        subheader,
-        separator,
-        initialOpen,
-        accordionKey,
-    }: {
-        title: Renderable;
-        content: Renderable;
-        subheader: boolean;
-        separator?: boolean;
-        initialOpen?: boolean;
-        accordionKey?: string;
-    },
-    enableBottomMargin = true
-) {
+export default function CollapsibleContent({
+    title,
+    content,
+    subheader,
+    separator,
+    initialOpen,
+    accordionKey,
+    enableBottomMargin,
+}: {
+    title: Renderable;
+    content: Renderable;
+    subheader: boolean;
+    separator?: boolean;
+    initialOpen?: boolean;
+    accordionKey?: string;
+    enableBottomMargin?: boolean;
+}) {
     if (initialOpen === undefined) initialOpen = true;
     if (separator === undefined) separator = true;
     const eventKey = accordionKey ?? `${title}`;
@@ -50,7 +49,7 @@ function renderCollapsibleContent(
                 </Accordion.Toggle>
                 {/* 2 px to align the hr line with the start of content */}
                 <Accordion.Collapse eventKey={eventKey}>
-                    <div style={{ marginTop: "2px", marginBottom: enableBottomMargin ? "1em" : "unset" }}>
+                    <div style={{ marginTop: "2px", marginBottom: enableBottomMargin === false ? "unset" : "1em" }}>
                         {content}
                     </div>
                 </Accordion.Collapse>
@@ -59,8 +58,6 @@ function renderCollapsibleContent(
     );
 }
 
-export default renderCollapsibleContent;
-
 export const CollapsibleLight = ({
     title,
     content,

diff --git a/packages/db/src/Component/QuestAiNpc.tsx b/packages/db/src/Component/QuestAiNpc.tsx
@@ -6,7 +6,7 @@ import { Ai, Quest, QuestEnemy, Region } from "@atlasacademy/api-connector";
 
 import AiDescriptor from "../Descriptor/AiDescriptor";
 import EntityDescriptor from "../Descriptor/EntityDescriptor";
-import renderCollapsibleContent from "./CollapsibleContent";
+import CollapsibleContent from "./CollapsibleContent";
 import { QuestEnemyMainData, QuestEnemySubData } from "./QuestEnemy";
 
 const BasicAiNpcDescriptor = ({
@@ -63,18 +63,16 @@ const QuestAiNpc = ({ region, aiNpcs }: { region: Region; aiNpcs: Quest.QuestPha
         }
 
         return (
-            <>
-                {renderCollapsibleContent({
-                    title: (
-                        <>
-                            {t("AI NPC")}: <BasicAiNpcDescriptor region={region} aiNpc={aiNpc} iconHeight={40} />
-                        </>
-                    ),
-                    content: <AiNpcDetailTable region={region} enemy={aiNpc.detail} />,
-                    subheader: true,
-                    initialOpen: false,
-                })}
-            </>
+            <CollapsibleContent
+                title={
+                    <>
+                        {t("AI NPC")}: <BasicAiNpcDescriptor region={region} aiNpc={aiNpc} iconHeight={40} />
+                    </>
+                }
+                content={<AiNpcDetailTable region={region} enemy={aiNpc.detail} />}
+                subheader
+                initialOpen={false}
+            />
         );
     }
 
@@ -93,16 +91,7 @@ const QuestAiNpc = ({ region, aiNpcs }: { region: Region; aiNpcs: Quest.QuestPha
         </>
     );
 
-    return (
-        <>
-            {renderCollapsibleContent({
-                title: t("AI NPC"),
-                content: multiNpcContent,
-                subheader: true,
-                initialOpen: false,
-            })}
-        </>
-    );
+    return <CollapsibleContent title={t("AI NPC")} content={multiNpcContent} subheader initialOpen={false} />;
 };
 
 export default QuestAiNpc;
diff --git a/packages/db/src/Page/Ai/AiTable.tsx b/packages/db/src/Page/Ai/AiTable.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { Ai, Region, Trait } from "@atlasacademy/api-connector";
 import { toTitleCase } from "@atlasacademy/api-descriptor";
 
-import renderCollapsibleContent from "../../Component/CollapsibleContent";
+import CollapsibleContent from "../../Component/CollapsibleContent";
 import AiDescriptor from "../../Descriptor/AiDescriptor";
 import { BuffIdDescriptor } from "../../Descriptor/BuffDescription";
 import NoblePhantasmPopover from "../../Descriptor/NoblePhantasmPopover";
@@ -364,9 +364,5 @@ export default function AiTable(props: {
             </tbody>
         </Table>
     );
-    return renderCollapsibleContent({
-        title: `AI ${ais[0].id}`,
-        content: outputTable,
-        subheader: false,
-    });
+    return <CollapsibleContent title={`AI ${ais[0].id}`} content={outputTable} subheader={false} />;
 }
diff --git a/packages/db/src/Page/ChangelogPage.tsx b/packages/db/src/Page/ChangelogPage.tsx
@@ -7,7 +7,7 @@ import { Link } from "react-router-dom";
 import { Change, CraftEssence, Region, Servant } from "@atlasacademy/api-connector";
 
 import Api from "../Api";
-import renderCollapsibleContent from "../Component/CollapsibleContent";
+import CollapsibleContent from "../Component/CollapsibleContent";
 import ErrorStatus from "../Component/ErrorStatus";
 import Loading from "../Component/Loading";
 import { BasicCraftEssenceDescriptor } from "../Descriptor/CraftEssenceDescriptor";
@@ -220,17 +220,19 @@ class ChangelogPage extends React.Component<IProps, IState> {
                 }
 
                 let timestamp = new Date(+change.timestamp * 1000);
-                return renderCollapsibleContent({
-                    title: (
-                        <>
-                            <span style={{ fontFamily: "monospace" }}>{change.commit.slice(0, 6)}</span>
-                            &nbsp;- {localTime ? timestamp.toString() : timestamp.toUTCString()}
-                        </>
-                    ),
-                    content: <>{hasChanges ? renderedChanges : t("No visible changes found")}</>,
-                    subheader: true,
-                    initialOpen: initialOpen,
-                });
+                return (
+                    <CollapsibleContent
+                        title={
+                            <>
+                                <span style={{ fontFamily: "monospace" }}>{change.commit.slice(0, 6)}</span>
+                                &nbsp;- {localTime ? timestamp.toString() : timestamp.toUTCString()}
+                            </>
+                        }
+                        content={<>{hasChanges ? renderedChanges : t("No visible changes found")}</>}
+                        subheader
+                        initialOpen={initialOpen}
+                    />
+                );
             });
 
         if (visibleOnly) content = content.filter(Boolean);

diff --git a/packages/db/src/Page/Event/EventLottery.tsx b/packages/db/src/Page/Event/EventLottery.tsx
@@ -1,13 +1,12 @@
 import { faStar } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React from "react";
 import { Table } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 import { Event, Item, Region } from "@atlasacademy/api-connector";
 
-import renderCollapsibleContent from "../../Component/CollapsibleContent";
+import CollapsibleContent from "../../Component/CollapsibleContent";
 import ItemIcon from "../../Component/ItemIcon";
 import GiftDescriptor from "../../Descriptor/GiftDescriptor";
 import { mergeElements } from "../../Helper/OutputHelper";
@@ -99,14 +98,13 @@ const EventLottery = ({
                 }${t("EventLotteryBoxBehind")}`;
 
                 return (
-                    <React.Fragment key={boxIndex}>
-                        {renderCollapsibleContent({
-                            title: title,
-                            content: <EventLotteryBox region={region} boxes={boxes} itemMap={itemMap} />,
-                            subheader: true,
-                            initialOpen: false,
-                        })}
-                    </React.Fragment>
+                    <CollapsibleContent
+                        key={boxIndex}
+                        title={title}
+                        content={<EventLotteryBox region={region} boxes={boxes} itemMap={itemMap} />}
+                        subheader
+                        initialOpen={false}
+                    />
                 );
             })}
         </>

diff --git a/packages/db/src/Page/Event/EventVoices.tsx b/packages/db/src/Page/Event/EventVoices.tsx
@@ -1,10 +1,9 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
 
 import { Event, Profile, Region, Servant } from "@atlasacademy/api-connector";
 import { toTitleCase } from "@atlasacademy/api-descriptor";
 
-import renderCollapsibleContent from "../../Component/CollapsibleContent";
+import CollapsibleContent from "../../Component/CollapsibleContent";
 import { lang } from "../../Setting/Manager";
 import { VoiceLinesTable } from "../Servant/ServantVoiceLines";
 
@@ -52,15 +51,14 @@ const EventVoices = ({
                 const voiceGroupKey = `${voiceGroup.svtId}-${voiceGroup.voicePrefix}-${voiceGroup.type}`;
 
                 return (
-                    <React.Fragment key={voiceGroupKey}>
-                        {renderCollapsibleContent({
-                            title: <span lang={lang(region)}>{title}</span>,
-                            content: voiceLineTable,
-                            subheader: false,
-                            accordionKey: voiceGroupKey,
-                            separator: i !== 0,
-                        })}
-                    </React.Fragment>
+                    <CollapsibleContent
+                        key={voiceGroupKey}
+                        title={<span lang={lang(region)}>{title}</span>}
+                        content={voiceLineTable}
+                        subheader={false}
+                        accordionKey={voiceGroupKey}
+                        separator={i !== 0}
+                    />
                 );
             })}
         </>

diff --git a/packages/db/src/Page/MysticCode/MysticCodeAsset.tsx b/packages/db/src/Page/MysticCode/MysticCodeAsset.tsx
@@ -1,86 +1,90 @@
+import { useTranslation } from "react-i18next";
+
 import { MysticCode } from "@atlasacademy/api-connector";
 
-import renderCollapsibleContent from "../../Component/CollapsibleContent";
+import CollapsibleContent from "../../Component/CollapsibleContent";
 
 const Image = ({ url, alt, floatDir }: { url: string; alt?: string; floatDir?: string }) => (
     <a href={url} target="_blank" rel="noopener noreferrer">
-        <img alt={alt ?? ""} src={url} className={"mw-100" + floatDir ? `float-${floatDir} w-50` : ""} />
+        <img
+            alt={alt ?? ""}
+            src={url}
+            className={"mw-100" + (floatDir !== undefined ? `float-${floatDir} w-50` : "")}
+        />
     </a>
 );
 
 const MCImages = ({
     mcAssets,
     mcName,
     assetType,
-    float = undefined,
+    float,
 }: {
     mcAssets: { male: string; female: string };
     mcName: string;
     assetType: "Figure" | "Face" | "Item";
-    float?: true;
+    float?: boolean;
 }) => (
     <>
-        <Image url={mcAssets.male} alt={`Male ${mcName} ${assetType}`} floatDir={float && "start"} />
-        <Image url={mcAssets.female} alt={`Female ${mcName} ${assetType}`} floatDir={float && "end"} />
+        <Image url={mcAssets.male} alt={`Male ${mcName} ${assetType}`} floatDir={float ? "start" : undefined} />
+        <Image url={mcAssets.female} alt={`Female ${mcName} ${assetType}`} floatDir={float ? "end" : undefined} />
     </>
 );
 
 const MysticCodeAssets = ({ mysticCode }: { mysticCode: MysticCode.MysticCode }) => {
+    const { t } = useTranslation();
     const mcName = `${mysticCode.name} Mystic Code`;
     return (
         <>
-            {renderCollapsibleContent({
-                title: "Figures",
-                content: (
+            <CollapsibleContent
+                title={t("Figures")}
+                content={
                     <>
-                        {" "}
                         <MCImages
                             mcAssets={mysticCode.extraAssets.masterFigure}
                             mcName={mcName}
                             assetType="Face"
-                            float={true}
+                            float
                         />
                         {mysticCode.costumes.map((costume, idx) => (
                             <MCImages
                                 key={costume.id}
                                 mcAssets={costume.extraAssets.masterFigure}
                                 mcName={mcName}
                                 assetType="Face"
-                                float={true}
+                                float
                             />
-                        ))}{" "}
+                        ))}
                     </>
-                ),
-                subheader: false,
-            })}
-            {renderCollapsibleContent(
-                {
-                    title: "Faces",
-                    content: (
-                        <>
-                            <MCImages mcAssets={mysticCode.extraAssets.masterFace} mcName={mcName} assetType="Face" />
-                            {mysticCode.costumes.map((costume) => (
+                }
+                subheader={false}
+            />
+            <CollapsibleContent
+                title={t("Faces")}
+                content={
+                    <>
+                        <MCImages mcAssets={mysticCode.extraAssets.masterFace} mcName={mcName} assetType="Face" />
+                        {mysticCode.costumes.map((costume) => (
+                            <div>
                                 <MCImages
                                     key={costume.id}
                                     mcAssets={costume.extraAssets.masterFace}
                                     mcName={mcName}
                                     assetType="Face"
                                 />
-                            ))}
-                        </>
-                    ),
-                    subheader: false,
-                },
-                false
-            )}
-            {renderCollapsibleContent(
-                {
-                    title: "Items",
-                    content: <MCImages mcAssets={mysticCode.extraAssets.item} mcName={mcName} assetType="Item" />,
-                    subheader: true,
-                },
-                true
-            )}
+                            </div>
+                        ))}
+                    </>
+                }
+                subheader={false}
+                enableBottomMargin={false}
+            />
+            <CollapsibleContent
+                title={t("Items")}
+                content={<MCImages mcAssets={mysticCode.extraAssets.item} mcName={mcName} assetType="Item" />}
+                subheader
+                enableBottomMargin
+            />
         </>
     );
 };