Merge pull request #28 from core-curriculum/feature/load-from-data_in…

…_json

Feature/load from data in json

.vscode/settings.json

@@ -2,7 +2,7 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "[javascript]": {
     "editor.tabSize": 2,

src/components/ContextMenu.tsx

@@ -60,7 +60,9 @@ const ContextMenu = <T extends readonly { name: string; label?: string }[]>({
               </li>
             );
             return name in links && links[name] ? (
-              <Link href={links[name]}>{content}</Link>
+              <Link key={name} href={links[name]}>
+                {content}
+              </Link>
             ) : (
               content
             );

src/components/Outcomes.tsx

@@ -6,14 +6,14 @@ import { applyMappedInfo } from "@libs/textMapper";
 import type { MappedInfo } from "@libs/textMapper";
 import type { Tree } from "@libs/treeUtils";
 import { reduceTree } from "@libs/treeUtils";
+import { AttrInfo } from "@services/attrInfo";
 import type {
   OutcomeInfo,
   Outcomel1 as L1,
   Outcomel2 as L2,
   Outcomel3 as L3,
   Outcomel4 as L4,
 } from "@services/outcomes";
-import { AttrInfo } from "@services/replaceMap";
 
 type PropType<T extends OutcomeInfo> = {
   item: T;

src/components/OutcomesTOC.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { ReactNode, useCallback, useState } from "react";
 import { useScrollObserver } from "@hooks/IntersecterObserver";
 import type { Tree } from "@libs/treeUtils";
@@ -43,7 +44,7 @@ const OutcomesTOC = ({ outcomesTree }: OutcomesTreeProps) => {
           case "l3":
             return <ItemList key={item.id} item={item} {...props} />;
         }
-        return <></>;
+        return <span key={item.id}></span>;
       })}
     </ul>
   );
@@ -63,8 +64,30 @@ const ChildList = ({ active, childnodes }: { active: boolean; childnodes: ReactN
   );
 };
 
-const ItemText = ({ children }: { targeted: boolean; children: ReactNode }) => {
-  return <span>{children}</span>;
+type MenuItemProps = {
+  children: ReactNode;
+  padding?: string;
+  size?: string;
+  href: string;
+  targeted?: boolean;
+};
+const MenuItem = ({ children, padding, size, href, targeted }: MenuItemProps) => {
+  padding ??= "pl-2";
+  size ??= "";
+  const linkProps = {
+    className: `block w-full truncate border-l-4 py-3 ${padding} ${size}
+    hover:bg-info/20 hover:underline ${targeted ? " border-info " : "border-transparent"}`,
+    href,
+  };
+  return (
+    <div className="z-10 bg-base-100 hover:text-info">
+      {href.startsWith("#") ? (
+        <a {...linkProps}>{children}</a>
+      ) : (
+        <Link {...linkProps}>{children}</Link>
+      )}
+    </div>
+  );
 };
 
 const ItemList = <L extends OutcomeInfo>({ item, childnodes, active, targeted }: PropType<L>) => {
@@ -80,28 +103,26 @@ const ItemList = <L extends OutcomeInfo>({ item, childnodes, active, targeted }:
     l2: "text-sm",
     l3: "text-sm",
   }[item.layer];
+  const menuItemProps = {
+    padding,
+    size,
+    href: id,
+    targeted,
+  };
   return (
     <li
       title={item.text}
       className={`${
         targeted ? "text-info" : "text-base-content"
       } transition-all duration-500 ease-in-out`}
     >
-      <div className="z-10 bg-base-100 hover:text-info">
-        <a
-          className={`block w-full truncate border-l-4 py-3 ${padding} ${size}
-          hover:bg-info/20 hover:underline ${targeted ? " border-info " : "border-transparent"}`}
-          href={id}
-        >
-          <ItemText targeted={targeted}>
-            <span className={`pr-1 font-thin`}>{item.index.slice(-2)}</span>
-            {item.text}
-          </ItemText>
-        </a>
-      </div>
+      <MenuItem {...menuItemProps}>
+        <span className={`pr-1 font-thin`}>{item.index.slice(-2)}</span>
+        {item.text}
+      </MenuItem>
       {item.layer !== "l3" ? <ChildList active={active} childnodes={childnodes} /> : ""}
     </li>
   );
 };
 
-export { OutcomesTOC };
+export { OutcomesTOC, MenuItem };

src/components/StyledText.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { applyMappedInfo, MappedInfo } from "@libs/textMapper";
-import { AttrInfo } from "@services/replaceMap";
+import { AttrInfo } from "@services/attrInfo";
 
 const StyledText = ({ text, map }: { text: string; map: MappedInfo<AttrInfo>[] }) => {
   if (map.length === 0) return <>{text}</>;
@@ -20,11 +20,19 @@ const StyledText = ({ text, map }: { text: string; map: MappedInfo<AttrInfo>[] }
               </Link>
             );
           case "sub":
-            return <span className="align-super text-[20%]">{text}</span>;
+            return (
+              <span key={key} className="align-super text-[20%]">
+                {text}
+              </span>
+            );
           case "italic":
-            return <span className="italic">{text}</span>;
+            return (
+              <span key={key} className="italic">
+                {text}
+              </span>
+            );
         }
-        return <>{"unknown:" + text + ":" + attr.type}</>;
+        return <span key={key}>{"unknown:" + text + ":" + attr.type}</span>;
       })}
     </>
   );

src/components/Table.tsx

@@ -27,8 +27,8 @@ const Table = ({
       <tbody>
         {rowList.map((row, i) => (
           <tr key={i}>
-            {header.map(key => (
-              <td className="max-w-sm overflow-visible whitespace-normal" key={row.id}>
+            {header.map((key, i) => (
+              <td className="max-w-sm overflow-visible whitespace-normal" key={row.id + `${i}`}>
                 {row.id in attrInfo && key in attrInfo[row.id] ? (
                   <StyledText text={row[key]} map={attrInfo[row.id][key]} />
                 ) : (

src/components/buttons/BackButton.tsx

@@ -1,11 +1,18 @@
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { MdArrowBack } from "react-icons/md";
 import { useLocaleText } from "@services/i18n/i18n";
 
-const BackButton = () => {
+type BackButtonProps = {
+  href?: string;
+};
+
+const BackButton = ({ href }: BackButtonProps) => {
   const { t } = useLocaleText("@components/buttons/BackButton");
+  const router = useRouter();
+  href = href || (router.query.referer as string) || "/";
   return (
-    <Link href="/">
+    <Link href={href}>
       <MdArrowBack
         size="2rem"
         title={t("target")}

src/libs/textMapper.ts

@@ -16,6 +16,7 @@ type MappedText<T> = {
 };
 type TextMapper<T> = (res: RegExpExecArray) => MapperResult<T>;
 type ReplaceMap<T> = { reg: RegExp; mapper: TextMapper<T> }[];
+
 const mapText = <T>(text: string, replaceMap: ReplaceMap<T>): MappedText<T> => {
   const seek: (str: string) => (string | MapperResultWithPos<T> | null)[] = (str: string) => {
     const res = replaceMap.reduce(

src/libs/treeUtils.ts

@@ -125,6 +125,7 @@ const searchMap = <T, R>(tree: Tree<T>, searchMapper: TreeSearchMapper<T, R>) =>
 };
 
 type TreeMapper<T, R> = (item: T, parents: T[], hasChildren: boolean) => R;
+
 const mapTree = <T, R>(tree: Tree<T>, mapper: TreeMapper<T, R>) => {
   const walkTree: (currTree: Tree<T>, currParents?: T[]) => Tree<R> = (
     currTree: Tree<T>,