dev: fixes on migration

Signed-off-by: Vinyl-Davyl <okononfuadavid@gmail.com>
accordproject · Jun 2, 2024 · be431f4 · be431f4
1 parent 66c2386
commit be431f4
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 71 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,15 +1,16 @@
 import { useEffect, useState } from "react";
 import {
   Container,
-  Header,
   Grid,
   Segment,
   Accordion,
   AccordionTitleProps,
 } from "semantic-ui-react";
 
+import Navbar from "./Navbar";
 import AgreementData from "./AgreementData";
 import AgreementHtml from "./AgreementHtml";
+import "./App.css";
 import Errors from "./Errors";
 import TemplateMarkdown from "./TemplateMarkdown";
 import TemplateModel from "./TemplateModel";
@@ -18,13 +19,32 @@ import SampleDropdown from "./SampleDropdown";
 
 const App = () => {
   const init = useAppStore((state) => state.init);
-  const [activeIndex, setActiveIndex] = useState<number>(-1);
+  const [activeIndex, setActiveIndex] = useState<number[]>([]);
 
-  const handleAccordionClick = (titleProps: AccordionTitleProps) => {
+  const scrollToExplore = () => {
+    const exploreContent = document.getElementById("explore");
+    if (exploreContent) {
+      exploreContent.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
+  const handleAccordionClick = (
+    _event: React.MouseEvent,
+    titleProps: AccordionTitleProps
+  ) => {
     const { index } = titleProps;
     if (typeof index === "number") {
-      const newIndex = activeIndex === index ? -1 : index;
-      setActiveIndex(newIndex);
+      const currentIndex = activeIndex.indexOf(index);
+      let newIndexes: number[];
+      if (currentIndex === -1) {
+        newIndexes = [...activeIndex, index];
+      } else {
+        newIndexes = [
+          ...activeIndex.slice(0, currentIndex),
+          ...activeIndex.slice(currentIndex + 1),
+        ];
+      }
+      setActiveIndex(newIndexes);
     }
   };
 
@@ -36,63 +56,66 @@ const App = () => {
     {
       key: "templateMark",
       label: "TemplateMark",
-      content: { content: <TemplateMarkdown />, key: "templateMark" },
+      content: <TemplateMarkdown />,
     },
     {
       key: "model",
       label: "Concerto Model",
-      content: { content: <TemplateModel />, key: "model" },
+      content: <TemplateModel />,
     },
     {
       key: "data",
       label: "Preview Data",
-      content: { content: <AgreementData />, key: "data" },
+      content: <AgreementData />,
     },
   ];
 
   return (
     <Container>
-      <Segment>
-        <Header as="h2" textAlign="center">
-          Template Playground{" "}
-          <span style={{ fontSize: "80%", color: "#87CEEB" }}>(BETA)</span>
-        </Header>
-      </Segment>
-      <Segment>
-        <Grid>
-          <Grid.Row>
-            <Grid.Column width={4}>
-              <SampleDropdown />
-            </Grid.Column>
-            <Grid.Column width={8}>
-              <Errors />
-            </Grid.Column>
-          </Grid.Row>
-          <Grid.Row>
-            <Grid.Column width={10}>
-              <Accordion fluid styled>
-                {panels.map((panel, index) => (
-                  <div key={panel.key}>
-                    <Accordion.Title
-                      active={activeIndex === index}
-                      index={index}
-                      onClick={handleAccordionClick}
-                    >
-                      {panel.label}
-                    </Accordion.Title>
-                    <Accordion.Content active={activeIndex === index}>
-                      {panel.content.content}
-                    </Accordion.Content>
-                  </div>
-                ))}
-              </Accordion>
-            </Grid.Column>
-            <Grid.Column width={6}>
-              <AgreementHtml />
-            </Grid.Column>
-          </Grid.Row>
-        </Grid>
-      </Segment>
+      <Navbar scrollToExplore={scrollToExplore} />
+      <Container
+        style={{
+          marginTop: 60,
+          padding: 24,
+          minHeight: 360,
+        }}
+      >
+        <Segment>
+          <Grid>
+            <Grid.Row id="explore">
+              <Grid.Column width={4}>
+                <SampleDropdown />
+              </Grid.Column>
+              <Grid.Column width={8}>
+                <Errors />
+              </Grid.Column>
+            </Grid.Row>
+            <Grid.Row>
+              <Grid.Column width={10}>
+                <Accordion fluid styled>
+                  {panels.map((panel, index) => (
+                    <div key={panel.key}>
+                      <Accordion.Title
+                        active={activeIndex.includes(index)}
+                        index={index}
+                        onClick={handleAccordionClick}
+                      >
+                        {panel.label}
+                      </Accordion.Title>
+                      <Accordion.Content active={activeIndex.includes(index)}>
+                        {panel.content}
+                      </Accordion.Content>
+                    </div>
+                  ))}
+                </Accordion>
+              </Grid.Column>
+              <Grid.Column width={6}>
+                <AgreementHtml />
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Segment>
+      </Container>
     </Container>
   );
 };

diff --git a/src/SampleDropdown.tsx b/src/SampleDropdown.tsx
@@ -1,6 +1,5 @@
 import { useState } from "react";
-import { Dropdown, DropdownProps } from "semantic-ui-react";
-
+import { Dropdown, DropdownProps, Loader } from "semantic-ui-react";
 import useAppStore from "./store";
 
 function SampleDropdown() {
@@ -12,36 +11,40 @@ function SampleDropdown() {
   const items = samples.map((s) => ({
     text: s.NAME,
     value: s.NAME,
+    key: s.NAME,
   }));
 
-  const handleMenuClick = async (data: DropdownProps) => {
+  const handleDropdownChange = async (
+    _event: React.SyntheticEvent<HTMLElement>,
+    data: DropdownProps
+  ) => {
     const { value } = data;
-    setLoading(true);
-    try {
-      if (typeof value === "string") {
+    if (typeof value === "string") {
+      setLoading(true);
+      try {
         await loadSample(value);
         alert(`Loaded ${value} sample`);
-      } else {
-        throw new Error("Invalid sample value");
+      } catch (error) {
+        alert("Failed to load sample");
+      } finally {
+        setLoading(false);
       }
-    } catch (error) {
-      alert("Failed to load sample");
-    } finally {
-      setLoading(false);
     }
   };
 
   return (
-    <Dropdown
-      placeholder="Select Sample"
-      options={items}
-      loading={loading}
-      onChange={handleMenuClick}
-      button
-      className="icon"
-      search
-      selection
-    />
+    <div>
+      <Dropdown
+        placeholder="Select Sample"
+        fluid
+        selection
+        search
+        options={items}
+        onChange={handleDropdownChange}
+        disabled={loading}
+      />
+      {loading && <Loader active inline="centered" />}
+    </div>
   );
 }