TIDO v5: show panels wrapper which contains text and switch between different types of text content

jsconfig.json

@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  }
+  "compilerOptions": {}
 }

src/App.tsx

@@ -1,9 +1,37 @@
+import { FC, useEffect, useState } from "react";
+import defaultConfig from "./config";
+import "primeicons/primeicons.css";
+import { ConfigContext } from "./contexts/ConfigContext";
+import Panel from "@/components/panel/Panel";
+
+import { readApi } from "@/utils/http";
+import PanelsWrapper from "./components/PanelsWrapper";
+
 function App() {
+  const [config, setConfig] = useState(defaultConfig);
+  const [openedPanels, setOpenedPanels] = useState(defaultConfig.panels);
+
+  function initOpenedPanels(panels) {
+    setOpenedPanels((prevValue) => panels);
+  }
+  useEffect(() => {
+    initOpenedPanels(config.panels);
+  }, []);
+
   return (
-    <>
-      <h1>Hi!</h1>
-    </>
-  )
+    <div className="tido">
+      <ConfigContext.Provider
+        value={{
+          config,
+          setConfig,
+          openedPanels,
+        }}
+      >
+        <span> Welcome to TIDO</span>
+        <PanelsWrapper />
+      </ConfigContext.Provider>
+    </div>
+  );
 }
 
-export default App
+export default App;

src/components/CustomHTML.tsx

@@ -0,0 +1,11 @@
+import React, { useEffect } from "react";
+const CustomHTML = ({ textHtml }) => {
+  const ref = React.useRef();
+
+  useEffect(() => {
+    ref.current.innerHTML = textHtml;
+  }, [textHtml]);
+
+  return <div ref={ref} />;
+};
+export default CustomHTML;

src/components/PanelsWrapper.tsx

@@ -0,0 +1,22 @@
+import { FC, useState, useEffect, useContext } from "react";
+import { ConfigContext } from "@/contexts/ConfigContext";
+import Panel from "@/components/panel/Panel";
+
+import { getPanelUrl } from "@/utils/panel";
+
+const PanelsWrapper: FC = ({}) => {
+  const { config, setConfig, openedPanels } = useContext(ConfigContext);
+
+  const panels =
+    openedPanels.length > 0 &&
+    openedPanels.map((panel, i) => (
+      <div key={i} className="t-mr-[25px]">
+        <Panel url={getPanelUrl(panel)} />
+      </div>
+    ));
+  useEffect(() => {}, []);
+
+  return <div className="t-flex t-flex-row">{panels}</div>;
+};
+
+export default PanelsWrapper;

src/components/panel/Panel.tsx

@@ -0,0 +1,97 @@
+import { FC, useState, useEffect, useContext } from "react";
+import { Button } from "primereact/button";
+
+import { ConfigContext } from "@/contexts/ConfigContext";
+import CustomHTML from "@/components/CustomHTML";
+import TextTypes from "@/components/panel/TextTypes";
+
+import { readApi } from "@/utils/http";
+
+// TODO: add a Typescript interface for the props types
+// prop: url - should be the url of collection or manifest
+const Panel: FC = ({ url }) => {
+  const { config, setConfig } = useContext(ConfigContext);
+  const [data, setData] = useState();
+  const [itemUrl, setItemUrl] = useState("");
+  const [text, setText] = useState<React.ReactNode | undefined>();
+  const [textTypes, setTextTypes] = useState([]);
+  const [activeText, setActiveText] = useState("");
+
+  async function getItemUrl(documentData): string {
+    // if collection - then we should read the api data from the manifest and get its first sequence item id
+    // if manifest - we retrieve the first sequence item id
+    if ("title" in documentData) {
+      // 'title' in document -> document is collection
+      const manifestData = await readApi(documentData.sequence[0].id);
+      return manifestData.sequence[0].id;
+    }
+
+    if ("label" in documentData) {
+      return documentData.sequence[0].id;
+    }
+  }
+
+  function assignTextTypes(itemData: Item) {
+    let types: string[] = [];
+    if (!itemData.hasOwnProperty("content")) return;
+    if (itemData["content"].length === 0) return;
+
+    const content = itemData["content"];
+    for (let i = 0; i < content.length; i++) {
+      types.push(getContentType(content[i].type));
+    }
+    setTextTypes(() => types);
+  }
+
+  function getContentType(value): string {
+    if (!value) return "";
+    return value.split("type=")[1];
+  }
+
+  async function readData(url: string) {
+    const documentData = await readApi(url);
+    const itemUrl = await getItemUrl(documentData);
+    const itemData = await readApi(itemUrl);
+    assignTextTypes(itemData);
+    const itemHtmlUrl = getUrlActiveText(itemData["content"]);
+
+    const textInHtml = await readHtml(itemHtmlUrl);
+    setText(<CustomHTML textHtml={textInHtml} />);
+    //setData(documentData);
+  }
+
+  async function readHtml(url: string): Promise<string> {
+    // url: the url of html file of the item
+    const data = await fetch(url);
+    const text = await data.text();
+
+    return text;
+  }
+
+  function getUrlActiveText(content) {
+    const activeItemUrl = content.find((item) =>
+      item.type.includes(activeText)
+    ).url;
+    return activeItemUrl;
+  }
+
+  useEffect(() => {
+    // read Api data from url
+    readData(url);
+  }, [url, activeText]);
+
+  return (
+    <div className="panel t-flex t-flex-col t-w-[600px] t-ml-[6%] t-border-solid t-border-2 t-border-slate-200 t-rounded-lg t-mt-[15px] t-px-[10px] t-pt-[150px] t-pb-[25px]">
+      <div className="t-flex t-flex-col t-items-center t-mb-[25px]">
+        <TextTypes
+          textTypes={textTypes}
+          activeText={activeText}
+          setActiveText={setActiveText}
+        />
+      </div>
+      {text}
+    </div>
+  );
+};
+
+export default Panel;

src/components/panel/TextTypes.tsx

@@ -0,0 +1,33 @@
+import { FC, useState, useEffect, useContext } from "react";
+import { ConfigContext } from "@/contexts/ConfigContext";
+import { Button } from "primereact/button";
+
+const TextTypes: FC = ({ textTypes, activeText, setActiveText }) => {
+  const { config, setConfig, openedPanels } = useContext(ConfigContext);
+
+  function handleTextTabClick(e) {
+    e.preventDefault();
+    setActiveText(() => e.target.innerHTML);
+  }
+
+  const buttons =
+    textTypes.length > 0 &&
+    textTypes.map((type, i) => (
+      <Button
+        className="t-p-[5px] t-rounded-[6px]"
+        style={{ backgroundColor: activeText === type ? "#FFFFFF" : "" }}
+        key={i}
+        label={type}
+        onClick={(e) => handleTextTabClick(e)}
+      />
+    ));
+  useEffect(() => {}, []);
+
+  return (
+    <div className="buttons-text-views t-bg-gray-400 t-p-[3px] t-rounded-[6px] t-h-[35px]">
+      {buttons}
+    </div>
+  );
+};
+
+export default TextTypes;

src/config.tsx

@@ -0,0 +1,31 @@
+const defaultConfig = {
+  globalTree: true,
+  urlConfig: {},
+  labels: {
+    item: "Sheet",
+    manifest: "Manuscript",
+  },
+  colors: {
+    forceMode: "light",
+    primary: "#1a3771",
+  },
+  panels: [
+    {
+      index: 0,
+      collection:
+        "https://api.ahiqar.sub.uni-goettingen.de/textapi/ahiqar/syriac/collection.json",
+    },
+    {
+      index: 1,
+      manifest:
+        "https://goethes-farbenlehre-berlin.sub.uni-goettingen.de/textapi/Z_1822-02-20_k/manifest.json",
+    },
+    {
+      index: 2,
+      manifest:
+        "https://goethes-farbenlehre-berlin.sub.uni-goettingen.de/textapi/ Z_1829-06-28_k/manifest.json",
+    },
+  ],
+};
+
+export default defaultConfig;

src/contexts/ConfigContext.tsx

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const ConfigContext = createContext({});

src/main.tsx

@@ -1,9 +1,9 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
 
-createRoot(document.getElementById('app')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+import "./css/preflight.scss";
+import "./css/style.css";
+import "./css/style.scss";
+
+createRoot(document.getElementById("app")!).render(<App />);

src/utils/http.tsx

@@ -0,0 +1,6 @@
+export async function readApi(url) {
+  const apiData = await fetch(url);
+  const data = await apiData.json();
+
+  return data;
+}

src/utils/panel.tsx

@@ -0,0 +1,7 @@
+// get the url of the document (collection or manifest) which will be shown in the panel
+export function getPanelUrl(panel) {
+  if (!("collection" in panel) && !("manifest" in panel))
+    console.error("manifest or collection not defined in panel");
+  if ("collection" in panel) return panel.collection;
+  if ("manifest" in panel) return panel.manifest;
+}

tsconfig.json

@@ -6,7 +6,6 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "Bundler",
     "allowImportingTsExtensions": true,
@@ -15,12 +14,17 @@
     "noEmit": true,
     "jsx": "react-jsx",
 
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src"]
+  "include": ["./"]
 }