diff --git a/src/components/Explore/Explore.jsx b/src/components/Explore/Explore.jsx index a3bb1781..a782d41b 100644 --- a/src/components/Explore/Explore.jsx +++ b/src/components/Explore/Explore.jsx @@ -22,6 +22,7 @@ import Sidebar from "../Feeds/SocialSidebar/Sidebar"; import { FilterButton } from "../Feeds/FeedsElements"; import { HintIcon } from "../WebSecurity/Common/HintElements"; import { FaAngleDown, FaAngleUp } from "react-icons/fa"; +import NotFound from "../../NotFound"; const FilterContainer = styled.div``; @@ -210,6 +211,29 @@ const Explore = () => { { value: followers, label: "Followers" }, ]; + const renderNotFoundComponents = () => { + const dataTypes = ["Users", "Feeds", "Blogs", "Ctfs"]; + const filteredData = { + Users: filteredUsers, + Feeds: filteredFeeds, + Blogs: filteredBlogs, + Ctfs: filteredCtf, + }; + const missingDataTypes = dataTypes.filter((type) => !filteredData[type].length); + + if (missingDataTypes.length === dataTypes.length) { + return ; + } else if (missingDataTypes.length) { + const lastType = missingDataTypes.pop(); + const missingDataTypesString = missingDataTypes.length + ? `${missingDataTypes.join(", ")} and ${lastType}` + : lastType; + return ; + } + + return null; + }; + if (isApiLoading || isCtfLoading) return ; if (!isApiWorking) return ; @@ -235,45 +259,81 @@ const Explore = () => { - {selectedType === "all" || selectedType === "users" ? ( - - ) : null} - - {selectedType === "all" || selectedType === "feeds" ? ( - - ) : null} - - {selectedType === "all" || selectedType === "blogs" ? ( - - ) : null} - - {/* {selectedType === "all" || selectedType === "forum" ? ( */} - {/* */} - {/* ) : null} */} - - {selectedType === "all" || selectedType === "ctf" ? ( - - ) : null} + {selectedType === "all" ? ( + <> + {filteredUsers.length ? ( + + ) : null} + {filteredFeeds.length ? ( + + ) : null} + {filteredBlogs.length ? ( + + ) : null} + {filteredCtf.length ? ( + + ) : null} + {renderNotFoundComponents()} + + ) : ( + <> + {selectedType === "users" ? ( + + ) : null} + + {selectedType === "feeds" ? ( + + ) : null} + + {selectedType === "blogs" ? ( + + ) : null} + + {selectedType === "ctf" ? ( + + ) : null} + + )}