recursive filter data

src/pages/Character/index.js

@@ -1,72 +1,80 @@
 import "./styles.css";
 
+import { useEffect, useState } from "react";
+
 import Container from "../../layouts/Container/index.js";
-import data from "../../data/data.js";
+import allData from "../../data/data.js";
 
 const Character = () => {
-  var arrayToDelete = [];
-  const setToDelete = (id) => {
-    arrayToDelete.push(id);
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    const filterDataByFolder = (folderId) => {
+      const filteredData = allData.filter((item) => item.folder === folderId);
+
+      return filteredData.map((item) => {
+        const subItems = filterDataByFolder(item._id);
+        return {
+          ...item,
+          subItems,
         };
-  const makeItComeBack = (id) => {
-    arrayToDelete = arrayToDelete.filter((item) => item !== id);
+      });
     };
 
-  const submitJSON = () => {
-    console.log(arrayToDelete);
-    console.log(data);
-    console.log(
-      JSON.stringify(data.filter((item) => !arrayToDelete.includes(item._id)))
-    );
+    const mainFolders = allData.filter((item) => item.folder === null);
+    const filteredData = mainFolders.map((item) => {
+      const subItems = filterDataByFolder(item._id);
+      return {
+        ...item,
+        subItems,
       };
-  //console.log(data.filter((item) => item.folder == null));
-  var mainFolders = data.filter((item) => item.folder == null);
-  for (let i = 0; i < mainFolders.length; i++) {
-    console.log(mainFolders[i].name);
-    var subFolders = data.filter((item) => item.folder == mainFolders[i]._id);
-    console.log(subFolders);
+    });
+
+    setData(filteredData);
+  }, [setData]);
+
+  const renderSubItems = (subItems) => {
+    if (subItems?.length === 0) {
+      return subItems?.length !== 0 ? (
+        <h4>
+          {subItems?._id} - {subItems?.name}
+        </h4>
+      ) : (
+        <></>
+      );
+    } else {
+      return subItems?.map((subItem, subId) => {
+        return (
+          <div key={`subItem-${subId}`} style={{ color: "green" }}>
+            {subItems?.length !== 0 ? (
+              <h5
+                className={
+                  subItem?._key === `!folders!${subItem?._id}` ? "selected" : ""
                 }
-  //console.log(data.sort((item) => item.folder));
+              >
+                {subItem?._id} - {subItem?.name} - {subItem?.folder}
+              </h5>
+            ) : (
+              <></>
+            )}
+            {renderSubItems(subItem?.subItems)}
+          </div>
+        );
+      });
+    }
+  };
 
   return (
     <div className="character">
       <Container>
-        {data
-          .sort((item) => item.folder)
-          // .filter((item) => item.folder == "VsGby7ZZXOXbXFGN") -- TS globales
-          .map((item, id) => {
-            return (
-              <div
-                style={{ display: "flex", justifyContent: "space-between" }}
-                key={id + 1}
-              >
-                <img src={item.img} alt={item.name} />
-                <h4>{item.name}</h4>
-                <div>
-                  <button
-                    onClick={(e) => {
-                      e.target.parentNode.parentNode.style.backgroundColor =
-                        "white";
-                      makeItComeBack(item._id);
-                    }}
-                  >
-                    Give it Back
-                  </button>
-                  <button
-                    onClick={(e) => {
-                      e.target.parentNode.parentNode.style.backgroundColor =
-                        "green";
-                      setToDelete(item._id);
-                    }}
-                  >
-                    X
-                  </button>
+        {data?.map((item, id) => (
+          <div key={`top-${id}`}>
+            <h3>
+              {item?._id} - {item?.name}
+            </h3>
+            {renderSubItems(item?.subItems)}
           </div>
-              </div>
-            );
-          })}
-
-        <button onClick={submitJSON}>Valider</button>
+        ))}
       </Container>
     </div>
   );

src/pages/Character/styles.css

@@ -1 +1,5 @@
 .character {}
+
+.selected {
+  color: blue;
+}