86 lines
2.1 KiB
JavaScript
86 lines
2.1 KiB
JavaScript
import "./styles.css";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import Container from "../../layouts/Container/index.js";
|
|
import allData from "../../data/data.js";
|
|
|
|
const Character = () => {
|
|
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 mainFolders = allData.filter((item) => item.folder === null);
|
|
const filteredData = mainFolders.map((item) => {
|
|
const subItems = filterDataByFolder(item._id);
|
|
return {
|
|
...item,
|
|
subItems,
|
|
};
|
|
});
|
|
|
|
setData(filteredData);
|
|
}, [setData]);
|
|
|
|
const renderSubItems = (subItems) => {
|
|
if (subItems?.length === 0) {
|
|
return subItems?.length !== 0 ? (
|
|
<h4>
|
|
<img src={subItems?.img} alt={subItems?.name} />
|
|
{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" : ""
|
|
}
|
|
>
|
|
<img src={subItem?.img} alt={subItem?.name} />
|
|
{subItem?._id} - {subItem?.name} - {subItem?.folder}
|
|
</h5>
|
|
) : (
|
|
<></>
|
|
)}
|
|
{renderSubItems(subItem?.subItems)}
|
|
</div>
|
|
);
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="character">
|
|
<Container>
|
|
{data?.map((item, id) => (
|
|
<div key={`top-${id}`}>
|
|
<h3>
|
|
{item?._id} - {item?.name}
|
|
</h3>
|
|
{renderSubItems(item?.subItems)}
|
|
</div>
|
|
))}
|
|
</Container>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Character;
|