Skip to content

Commit

Permalink
fix: CTF
Browse files Browse the repository at this point in the history
  • Loading branch information
@0xk4b1r
0xk4b1r committed Sep 15, 2024
1 parent 5fdafc5 commit 95f5842
Showing 1 changed file with 90 additions and 78 deletions.
168 changes: 90 additions & 78 deletions src/components/CaptureTheFlag/CTF.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,94 @@
import React, { useEffect, useState } from "react";
import React from // ,{useEffect, useState}
"react";
import { Wrapper } from "src/components/Dashboard/Profile/ProfileElements";
import { getAllCTFs } from "src/features/ctf/ctfSlice";
import { useDispatch, useSelector } from "react-redux";
// import {getAllCTFs} from "src/features/ctf/ctfSlice";
// import {useDispatch, useSelector} from "react-redux";
import { CTFContainer, CTFHeader, CTFHeading, Option, SearchContainer, SearchDifficulty, Select } from "./CTFElements";
import { getUserDetail } from "src/features/userDetail/userDetailSlice";
import UnderMaintenance from "src/components/Other/UnderMaintenance/UnderMaintenance";
import apiStatus from "src/features/apiStatus";
// import {getUserDetail} from "src/features/userDetail/userDetailSlice";
// import UnderMaintenance from "src/components/Other/UnderMaintenance/UnderMaintenance";
// import apiStatus from "src/features/apiStatus";
// import CtfChallenges from "./CTFCards/CtfChallenges";
import { RankTrophy } from "src/components/Header/Navbar/NavbarElements";
import { RouteLink } from "src/components/Common/GeneralDashboardSidebar/GeneralDashboardSidebarElements";
import LoadingSpinner from "src/components/Other/MixComponents/Spinner/LoadingSpinner";
// import LoadingSpinner from "src/components/Other/MixComponents/Spinner/LoadingSpinner";
import SearchInputBox from "src/components/Common/SearchInputBox";
// import {Link} from "react-router-dom";
// import {Heading2} from "src/components/Blogs/ManageBlogs/CreateBlog/CreateBlogElements.jsx";

const CTF = () => {
const { isApiLoading, isApiWorking } = apiStatus();
const dispatch = useDispatch();
const { user } = useSelector((state) => state.auth);
const { ctfs, isCtfLoading } = useSelector((state) => state.ctfs);
const { isUserDetailLoading } = useSelector((state) => state.userDetail);

useEffect(() => {
dispatch(getAllCTFs());
if (user) {
dispatch(getUserDetail(user?.username));
}
}, [dispatch]);

const [searchTerm, setSearchTerm] = useState("");
const [selectedDifficulty, setSelectedDifficulty] = useState("all");
const [selectedType, setSelectedType] = useState("all");
const [setFilteredCTFs] = useState(ctfs);

useEffect(() => {
const filteredCTFs = Array?.isArray(ctfs)
? ctfs?.filter((challenge) => {
const nameMatches = challenge?.challengeName?.toLowerCase().includes(searchTerm?.toLowerCase());
const difficultyMatches =
selectedDifficulty === "all" || challenge?.difficulty === selectedDifficulty;
const typeMatches = selectedType === "all" || challenge?.type === selectedType;
return nameMatches && difficultyMatches && typeMatches;
})
: [];
setFilteredCTFs(filteredCTFs);
}, [ctfs, searchTerm, selectedDifficulty, selectedType]);

const handleSearchTermChange = (event) => {
setSearchTerm(event.target.value);
};

const handleTypeSelect = (event) => {
setSelectedType(event.target.value);
};

const handleDifficultySelect = (event) => {
setSelectedDifficulty(event.target.value);
};

if (isApiLoading || isUserDetailLoading || isCtfLoading) return <LoadingSpinner />;

if (!isApiWorking) return <UnderMaintenance />;
// const {isApiLoading, isApiWorking} = apiStatus();
// const dispatch = useDispatch();
// const {user} = useSelector((state) => state.auth);
// const {ctfs, isCtfLoading} = useSelector((state) => state.ctfs);
// const {userDetail, isUserDetailLoading} = useSelector((state) => state.userDetail);

// useEffect(() => {
// dispatch(getAllCTFs());
// if (user) {
// dispatch(getUserDetail(user?.username));
// }
// }, [dispatch]);

// const [searchTerm, setSearchTerm] = useState("");
// const [selectedDifficulty, setSelectedDifficulty] = useState("all");
// const [selectedType, setSelectedType] = useState("all");
// const [filteredCTFs, setFilteredCTFs] = useState(ctfs);

// useEffect(() => {
// const filteredCTFs = Array?.isArray(ctfs)
// ? ctfs?.filter((challenge) => {
// const nameMatches = challenge?.challengeName?.toLowerCase().includes(searchTerm?.toLowerCase());
// const difficultyMatches =
// selectedDifficulty === "all" || challenge?.difficulty === selectedDifficulty;
// const typeMatches = selectedType === "all" || challenge?.type === selectedType;
// return nameMatches && difficultyMatches && typeMatches;
// })
// : [];
// setFilteredCTFs(filteredCTFs);
// }, [ctfs, searchTerm, selectedDifficulty, selectedType]);

// const handleSearchTermChange = (event) => {
// setSearchTerm(event.target.value);
// };

// const handleTypeSelect = (event) => {
// setSelectedType(event.target.value);
// };

// const handleDifficultySelect = (event) => {
// setSelectedDifficulty(event.target.value);
// };

// if (isApiLoading || isUserDetailLoading || isCtfLoading) return <LoadingSpinner/>;

// if (!isApiWorking) return <UnderMaintenance/>;

return (
<Wrapper>
<CTFContainer>
<CTFHeader>
<CTFHeading> Capture The Flag</CTFHeading>
</CTFHeader>
{/* <Link to={`create`}> */}
{/* <Heading2>Create</Heading2> */}
{/* </Link> */}

{/* {user && user.role === 'admin' || user.role === 'team' ? ( */}
{/* <Link to={`create`}> */}
{/* <Heading2>Create</Heading2> */}
{/* </Link> */}
{/* ) : null} */}

<SearchContainer>
<SearchInputBox
placeholder="Search by name"
value={searchTerm}
onChange={handleSearchTermChange}
setValue={setSearchTerm}
// value={searchTerm}
// onChange={handleSearchTermChange}
// setValue={setSearchTerm}
/>
<SearchDifficulty>
Type
<Select value={selectedType} onChange={handleTypeSelect}>
<Select
// value={selectedType}
// onChange={handleTypeSelect}
>
<Option value="all"> All </Option>
<Option value="challenge"> Challenge </Option>
<Option value="walkthrough"> Walkthrough </Option>
Expand All @@ -89,7 +98,10 @@ const CTF = () => {

<SearchDifficulty>
Difficulty
<Select value={selectedDifficulty} onChange={handleDifficultySelect}>
<Select
// value={selectedDifficulty}
// onChange={handleDifficultySelect}
>
<Option value="all"> All </Option>
<Option value="info"> info </Option>
<Option value="easy"> easy </Option>
Expand All @@ -99,22 +111,22 @@ const CTF = () => {
</Select>
</SearchDifficulty>

{/* <RouteLink to="teams"> */}
{/* <SearchDifficulty */}
{/* style={{ */}
{/* display: "flex", */}
{/* justifyContent: "center", */}
{/* textDecoration: "none", */}
{/* gap: "5px", */}
{/* padding: "6px 15px 6px 10px", */}
{/* borderRadius: "5px", */}
{/* backgroundColor: "#252525", */}
{/* }} */}
{/* > */}
{/* <RankTrophy style={{ fontSize: "1rem" }} /> */}
{/* <span> Teams </span> */}
{/* </SearchDifficulty> */}
{/* </RouteLink> */}
<RouteLink to="teams">
<SearchDifficulty
style={{
display: "flex",
justifyContent: "center",
textDecoration: "none",
gap: "5px",
padding: "6px 15px 6px 10px",
borderRadius: "5px",
backgroundColor: "#252525",
}}
>
<RankTrophy style={{ fontSize: "1rem" }} />
<span> Teams </span>
</SearchDifficulty>
</RouteLink>

<RouteLink to="/leaderboard">
<SearchDifficulty
Expand All @@ -138,7 +150,7 @@ const CTF = () => {
<CTFHeading> Coming Soon </CTFHeading>
</CTFHeader>

{/* <CtfChallenges ctfs={filteredCTFs} userDetail={userDetail} user={user} /> */}
{/* <CtfChallenges ctfs={filteredCTFs} userDetail={userDetail} user={user}/> */}
</CTFContainer>
</Wrapper>
);
Expand Down

0 comments on commit 95f5842

Please sign in to comment.