fix: filters and performance (#903)

th3cyb3rhub · Sep 15, 2024 · f1fe372 · f1fe372
1 parent 16f2ac7
commit f1fe372
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 28 deletions.
diff --git a/src/components/CaptureTheFlag/CTF.jsx b/src/components/CaptureTheFlag/CTF.jsx
@@ -32,8 +32,8 @@ const CTF = () => {
     const [setFilteredCTFs] = useState(ctfs);
 
     useEffect(() => {
-        const filteredCTFs = Array.isArray(ctfs)
-            ? ctfs.filter((challenge) => {
+        const filteredCTFs = Array?.isArray(ctfs)
+            ? ctfs?.filter((challenge) => {
                   const nameMatches = challenge?.challengeName?.toLowerCase().includes(searchTerm?.toLowerCase());
                   const difficultyMatches =
                       selectedDifficulty === "all" || challenge?.difficulty === selectedDifficulty;

diff --git a/src/components/WebSecurity/CodeReviews/RoomCard.jsx b/src/components/WebSecurity/CodeReviews/RoomCard.jsx
@@ -59,7 +59,7 @@ export default function CodeReviewCard(props) {
                         background: "#090909",
                     }}
                 >
-                    {props.tags.map((data) => {
+                    {props.tags?.map((data) => {
                         return <RoomTags key={data}>{data}</RoomTags>;
                     })}
                 </div>

diff --git a/src/components/WebSecurity/Common/Labs/Labs.jsx b/src/components/WebSecurity/Common/Labs/Labs.jsx
@@ -20,7 +20,7 @@ const Labs = ({ LabData, heading }) => {
     };
 
     const renderLevelButtons = (levels) => {
-        return levels.map((level, index) => (
+        return levels?.map((level, index) => (
             <LevelButton
                 key={index}
                 style={{
@@ -37,16 +37,17 @@ const Labs = ({ LabData, heading }) => {
     const levels = ["All", "Beginner", "Intermediate", "Advance"];
 
     // Filtered LabData based on search input
-    const filteredLabData =
-        LabData?.filter(
-            (data) =>
-                (data?.level === levelActive || levelActive === "All") &&
-                (data?.category === categoryActive || categoryActive === "All") &&
-                (data?.title.toLowerCase().includes(searchInput.toLowerCase()) ||
-                    data?.description.toLowerCase().includes(searchInput.toLowerCase()) ||
-                    data?.level.toLowerCase().includes(searchInput.toLowerCase()) ||
-                    data?.tags.some((tag) => tag.toLowerCase().includes(searchInput.toLowerCase()))),
-        ) || [];
+    const filteredLabData = LabData
+        ? LabData?.filter(
+              (data) =>
+                  (data?.level === levelActive || levelActive === "All") &&
+                  (data?.category === categoryActive || categoryActive === "All") &&
+                  (data?.title.toLowerCase().includes(searchInput.toLowerCase()) ||
+                      data?.description.toLowerCase().includes(searchInput.toLowerCase()) ||
+                      data?.level.toLowerCase().includes(searchInput.toLowerCase()) ||
+                      data?.tags.some((tag) => tag.toLowerCase().includes(searchInput.toLowerCase()))),
+          ) || []
+        : [];
 
     return (
         <>
@@ -66,7 +67,7 @@ const Labs = ({ LabData, heading }) => {
                             <Input placeholder="Search" value={searchInput} onChange={handleSearchInputChange} />
                         </div>
                         <div className="room-cards-container">
-                            {filteredLabData.map((data, index) => (
+                            {filteredLabData?.map((data, index) => (
                                 <RoomCard
                                     key={index}
                                     title={data?.title}

diff --git a/src/components/WebSecurity/Sidebar.jsx b/src/components/WebSecurity/Sidebar.jsx
@@ -105,7 +105,7 @@ const Sidebar = ({ heading, topic, topics, onSelectSubtopic, setCategoryActive,
 
     // get unique and sorted categories
 
-    const categories = [...new Set(topics.map((topic) => topic.category))].sort();
+    const categories = [...new Set(topics?.map((topic) => topic.category))].sort();
 
     const sidebarHeader = heading || topic?.category;
 
@@ -151,7 +151,7 @@ const Sidebar = ({ heading, topic, topics, onSelectSubtopic, setCategoryActive,
                     }}
                 >
                     {onlyCat &&
-                        categories.map((category, index) => (
+                        categories?.map((category, index) => (
                             <MainTitle
                                 key={index}
                                 onClick={() => setCategoryActive(category)}
@@ -177,7 +177,7 @@ const Sidebar = ({ heading, topic, topics, onSelectSubtopic, setCategoryActive,
                         ))}
                 </div>
 
-                {topics.map((topic, index) =>
+                {topics?.map((topic, index) =>
                     !onlyCat ? (
                         <div key={index} style={{ width: "100%" }}>
                             <MainTitle

diff --git a/src/components/WebSecurity/WebSecurityTopics/Topics.jsx b/src/components/WebSecurity/WebSecurityTopics/Topics.jsx
@@ -54,7 +54,7 @@ const Topics = () => {
     };
 
     const renderLevelButtons = (levels) => {
-        return levels.map((level, index) => (
+        return levels?.map((level, index) => (
             <LevelButton
                 key={index}
                 style={{
@@ -70,14 +70,15 @@ const Topics = () => {
 
     const levels = ["All", "Beginner", "Intermediate", "Advance"];
 
-    const filteredTopics =
-        topics.filter(
-            (topic) =>
-                (topic.level === levelActive || levelActive === "All") &&
-                (topic.category === categoryActive || categoryActive === "All") &&
-                (topic.title.toLowerCase().includes(searchInput.toLowerCase()) ||
-                    topic.tags.some((tag) => tag.toLowerCase().includes(searchInput.toLowerCase()))),
-        ) || [];
+    const filteredTopics = topics
+        ? topics?.filter(
+              (topic) =>
+                  (topic.level === levelActive || levelActive === "All") &&
+                  (topic.category === categoryActive || categoryActive === "All") &&
+                  (topic.title.toLowerCase().includes(searchInput.toLowerCase()) ||
+                      topic.tags.some((tag) => tag.toLowerCase().includes(searchInput.toLowerCase()))),
+          ) || []
+        : [];
 
     if (loading) return <p>Loading...</p>;
     if (error) return <p>Error: {error}</p>;
@@ -98,7 +99,7 @@ const Topics = () => {
                     <Input placeholder="Search" value={searchInput} onChange={handleSearchInputChange} />
                 </div>
                 <TopicCards className={"room-cards-container"}>
-                    {filteredTopics.map((topic) => (
+                    {filteredTopics?.map((topic) => (
                         <RouterLink
                             to={`/websecurity/topic/${topic._id}`}
                             style={{ textDecoration: "none", width: "100%" }}