Add jutsu data, level datas & clean Character page

Add html-react-parser to the project, should npm install at boot

.gitignore

@@ -19,7 +19,7 @@ packages/react-devtools-timeline/dist# See https://help.github.com/articles/igno
 /coverage
 
 # production
-/src/data
+# /src/data # to uncomment
 /build
 temp
 dist

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "fs-extra": "^11.2.0",
+    "html-react-parser": "^5.1.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",

src/data/levels.js

@@ -0,0 +1,96 @@
+import { type } from "@testing-library/user-event/dist/type";
+
+const levels = [
+  {
+    _id: "1",
+    name: "1",
+    unlocks: [
+      {
+        name: "Archetype",
+        type: "choice",
+        options: [
+          {
+            folder_id: "xdVnM5YTVFEewTje",
+            name: "Maitre des lames",
+            description: "assassin",
+          },
+          {
+            folder_id: "A0uWlUA0R29NFyzt", //Mauvaise organisation des dossiers => liste des Taïjutsu et non liste des tech. de MDT
+            name: "Maitre du Taîjutsu",
+            description: "combattant",
+          },
+          {
+            folder_id: "iu3QsWHoalitMfaF",
+            name: "Maitre du chakra",
+            description: "mage",
+          },
+          {
+            folder_id: "6ugsJPZf1DtuJKcF",
+            name: "Maitre des 1000 objets",
+            description: "Bricoleur",
+          },
+        ],
+      },
+      {
+        name: "Jutsus",
+        type: "mandatory",
+        options: [
+          {
+            folder_id: "kQxG5RFU69FLBPr1",
+            name: "Feu (Katon)",
+          },
+          {
+            folder_id: "YIUe7c9tlVNf0QOl",
+            name: "Eau (Suiton)",
+          },
+          {
+            folder_id: "SYYVLYXoq7K9DW6r",
+            name: "Vent (Fuuton)",
+          },
+          {
+            folder_id: "Dw3zZbKivXfgPtZv",
+            name: "Terre (Doton)",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    _id: "2",
+    name: "2",
+  },
+  {
+    _id: "3",
+    name: "3",
+  },
+  {
+    _id: "4",
+    name: "4",
+  },
+  {
+    _id: "5",
+    name: "5",
+  },
+  {
+    _id: "6",
+    name: "6",
+  },
+  {
+    _id: "7",
+    name: "7",
+  },
+  {
+    _id: "8",
+    name: "8",
+  },
+  {
+    _id: "9",
+    name: "9",
+  },
+  {
+    _id: "10",
+    name: "10",
+  },
+];
+
+export default levels;

src/pages/Character/index.js

@@ -3,7 +3,8 @@ import "./styles.css";
 import { useEffect, useState } from "react";
 
 import Container from "../../layouts/Container/index.js";
-import allData from "../../data/data.js";
+import allData from "../../data/dataFiltered.js";
+import levels from "../../data/levels.js";
 
 const Character = () => {
   const [data, setData] = useState();
@@ -36,9 +37,11 @@ const Character = () => {
   const renderSubItems = (subItems) => {
     if (subItems?.length === 0) {
       return subItems?.length !== 0 ? (
+        <div>
           <h4>
             {subItems?._id} - {subItems?.name}
           </h4>
+        </div>
       ) : (
         <></>
       );
@@ -47,13 +50,17 @@ const Character = () => {
         return (
           <div key={`subItem-${subId}`} style={{ color: "green" }}>
             {subItems?.length !== 0 ? (
+              <div>
                 <h5
                   className={
-                  subItem?._key === `!folders!${subItem?._id}` ? "selected" : ""
+                    subItem?._key === `!folders!${subItem?._id}`
+                      ? "selected"
+                      : ""
                   }
                 >
                   {subItem?._id} - {subItem?.name} - {subItem?.folder}
                 </h5>
+              </div>
             ) : (
               <></>
             )}
@@ -67,14 +74,29 @@ const Character = () => {
   return (
     <div className="character">
       <Container>
-        {data?.map((item, id) => (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-around",
+            flexDirection: "row",
+          }}
+        >
+          {levels.map((item, id) => (
+            <div key={`level-${id}`}>
+              <h2>{item?.name}</h2>
+            </div>
+          ))}
+        </div>
+        {/* {data?.map((item, id) => (
           <div key={`top-${id}`}>
+            <div>
               <h3>
                 {item?._id} - {item?.name}
               </h3>
+            </div>
             {renderSubItems(item?.subItems)}
           </div>
-        ))}
+        ))} */}
       </Container>
     </div>
   );