Merge pull request #110 from kynhix/dev

Big refactor

Author: AbhiByreddy

src/components/StandardNav.jsx

@@ -19,12 +19,12 @@ export function DashboardHeader() {
 
   useEffect(() => {
     try {
-        request(`${process.env.NEXT_PUBLIC_API_URL}/account`, 'GET', null)
+      request(`${process.env.NEXT_PUBLIC_API_URL}/account`, 'GET', null)
         .then((data) => {
           setUsername(data.username);
           setLocation(data.location);
           localStorage.setItem("username", data.username)
-          
+
           setJoin(data.createdAt.substring(0, 10));
           if (data.githubUrl) {
             setGithub(`https://github.com/${data.githubUrl}`);
@@ -41,28 +41,28 @@ export function DashboardHeader() {
   }, []);
 
   // get user's profile picture
-    useEffect(() => {
-      if (!username) {
-        return;
-      }
-        const fetchData = async () => {
-            try {
-                const endPoint = process.env.NEXT_PUBLIC_API_URL + '/users/' + username + '/pfp';
-                const result = await request(endPoint, "GET", null);
-                console.log(result)
-                if (result) {
-                    setPfp(result)
-                    localStorage("pfp", result)
-                } else {
-                    setPfp(`https://robohash.org/${username}.png?set=set1&size=150x150`)
-                }
+  useEffect(() => {
+    if (!username) {
+      return;
+    }
+    const fetchData = async () => {
+      try {
+        const endPoint = process.env.NEXT_PUBLIC_API_URL + '/users/' + username + '/pfp';
+        const result = await request(endPoint, "GET", null);
+        console.log(result)
+        if (result) {
+          setPfp(result)
+          localStorage("pfp", result)
+        } else {
+          setPfp(`https://robohash.org/${username}.png?set=set1&size=150x150`)
+        }
 
-            } catch (err) {
-                console.log('failed to get profile picture')
-            }
-        };
-        fetchData();
-    }, [username]);
+      } catch (err) {
+        console.log('failed to get profile picture')
+      }
+    };
+    fetchData();
+  }, [username]);
 
   function createPopupWin(pageURL, pageTitle,
     popupWinWidth, popupWinHeight) {
@@ -114,7 +114,7 @@ export function DashboardHeader() {
                 )}
               </h1>
               <p className="text-white">
-                <i class="fas fa-map-marker-alt mt-2"></i>{' '}
+                <i className="fas fa-map-marker-alt mt-2"></i>{' '}
                 {location || (
                   <Skeleton baseColor="#262626" highlightColor="#262626" />
                 )}
@@ -144,19 +144,15 @@ export function DashboardHeader() {
                 )}
               </div>
 
-         
               <div
                 onClick={() => {
-
                   createPopupWin('../terminal',
                     'CTFGuide Terminal', 1200, 650);
-
-
                 }}
                 className="hidden cursor-pointer ml-2 mt-8 mb-0 rounded-lg px-10 py-1 flex items-center space-x-1 duration-4000 bg-neutral-800 transition ease-in-out hover:bg-neutral-800/40"
               >
 
-                <p className="mt-0 text-white"><i class="fas fa-terminal mr-1"></i> Terminal</p>
+                <p className="mt-0 text-white"><i className="fas fa-terminal mr-1"></i> Terminal</p>
               </div>
               <div
                 className="ml-4 mt-8 mb-0 rounded-lg px-10 py-1 hidden"

src/components/dashboard/DashboardHeader.jsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export function Suggest() {
   return (
     <>
@@ -10,62 +12,19 @@ export function Suggest() {
 
       <div className="mb-5 grid grid-cols-2 gap-x-4">
         <div className="">
-          <a href='../challenges/cypher_decoding'>
+          <Link href='/challenges/cypher_decoding'>
             <div className="  relative isolate overflow-hidden  rounded-md bg-black/10 bg-neutral-900 pb-4   ">
               <div className="relative mx-auto max-w-7xl  px-5">
-                <div
-                  className="absolute -bottom-8 -left-96 -z-10 transform-gpu blur-3xl sm:-bottom-64 sm:-left-40 lg:-bottom-32 lg:left-8 xl:-left-10"
-                  aria-hidden="true"
-                >
-                  <div
-                    className="aspect-[1266/975] w-[79.125rem] bg-gradient-to-tr from-[#081e75] to-[#0737f2] opacity-30"
-                    style={{
-                      clipPath:
-                        'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-                    }}
-                  />
-                </div>
-                <div className="mx-auto  lg:mx-0 lg:max-w-3xl">
+                <div className="mx-auto lg:mx-0 lg:max-w-3xl">
                   <div className="mt-4 text-lg leading-8 text-gray-300">
                     <h1 className=" text-xl text-white">Suggested for you </h1>
                     <h1 className="text-2xl font-semibold text-white">Cypher Decoding</h1>
                   </div>
                 </div>
               </div>
             </div>
-          </a>
-        </div>
-
-
-        <div className="">
-          <a href='../challenges/obedient_cat'>
-            <div className="  relative isolate overflow-hidden  rounded-md bg-black/10 bg-neutral-900 pb-4 ">
-              <div className="relative mx-auto max-w-7xl  px-5">
-                <div
-                  className="absolute -bottom-8 -left-96 -z-10 transform-gpu blur-3xl sm:-bottom-64 sm:-left-40 lg:-bottom-32 lg:left-8 xl:-left-10"
-                  aria-hidden="true"
-                >
-                  <div
-                    className="aspect-[1266/975] w-[79.125rem] bg-gradient-to-tr from-[#081e75] to-[#0737f2] opacity-30"
-                    style={{
-                      clipPath:
-                        'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-                    }}
-                  />
-                </div>
-                <div className="mx-auto  lg:mx-0 lg:max-w-3xl">
-                  <div className="mt-4 text-lg leading-8 text-gray-300">
-                    <h1 className=" text-xl text-white">Popular on CTFGuide </h1>
-                    <h1 className="text-2xl font-semibold text-white">Obedient Cat</h1>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </a>
+          </Link>
         </div>
-
-
-
       </div>
     </>
   );

src/components/dashboard/Suggest.jsx

@@ -0,0 +1,17 @@
+/**
+ * @param props {import("react").HTMLAttributes<HTMLDivElement> & {position?: 'top' | 'left'}}
+ */
+export function CardDecorator({ className = '', position = 'top', ...props }) {
+  const getCardStyle = (pos) => {
+    if (pos == 'top') {
+      return 'card-decorator-top';
+    } else if (pos == 'left') {
+      return 'card-decorator-left';
+    } else {
+      console.error('Invalid card position.')
+    }
+  }
+  return (
+    <div {...props} className={`card-decorator ${getCardStyle(position)} ${className}`}></div>
+  );
+}

src/components/design/CardDecorator.jsx

@@ -5,11 +5,11 @@ export function PracticeNav() {
   return (
     <>
       <div
-        className=" mt-8 flex-none text-white w-full list-none   mx-auto rounded-sm shadow-lg"
-       
+        className="w-[200px] mt-8 text-white list-none rounded-sm shadow-lg"
+
       >
         <hr className='border-none '></hr>
-     
+
         <ul className="list-none">
           <li className="py-1 px-2 hover:bg-neutral-800/60 rounded-sm border border-white/10 hover:border-white/30">
             <a
@@ -32,8 +32,8 @@ export function PracticeNav() {
               href="https://discord.gg/q3hgRBvgkX"
               className="text-lg font-medium text-white tracking-tight flex"
             >
-           Join our community!
-           <svg className="ml-2 mr-2 h-16 w-16 fill-current text-[#5865F2]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>
+              Join our community!
+              <svg className="ml-2 mr-2 h-16 w-16 fill-current text-[#5865F2]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z" /></svg>
             </a>
           </li>
           <li className="mb-4 py-1 hidden">

src/components/practice/PracticeNav.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import Challenge from '../challenge/ChallengeComponent';
+import ChallengeCard from '../profile/ChallengeCard';
 
 export function Community({ challenges }) {
   const [difficulty, setDifficulty] = useState('all');
@@ -38,12 +39,10 @@ export function Community({ challenges }) {
     setFilter(event.target.value);
   };
 
-
-
   return (
     <>
-      <div className="mt-10 flex max-w-6xl">
-        <div className="w-full max-w-xs flex-row-reverse">
+      <div className="flex flex-col md:flex-row max-w-7xl gap-4">
+        <div className="w-full flex-row-reverse">
           <label
             htmlFor="difficulty"
             className="block text-sm font-medium leading-5 text-gray-200"
@@ -53,7 +52,7 @@ export function Community({ challenges }) {
           <select
             style={{ backgroundColor: '#212121' }}
             id="difficulty"
-            className="mt-1 block w-full rounded  border-none py-2 pr-40 pl-3 pr-10 text-base leading-6 text-white focus:outline-none sm:text-sm sm:leading-5"
+            className="mt-1 block w-full rounded border-none text-base leading-6 text-white focus:outline-none sm:text-sm sm:leading-5"
             onChange={(e) => {
               setDifficulty(e.target.value);
             }}
@@ -69,7 +68,7 @@ export function Community({ challenges }) {
           </select>
         </div>
 
-        <div className="ml-4 w-full">
+        <div className="w-full">
           <label
             htmlFor="sort-category"
             className="block text-sm font-medium leading-5 text-gray-200"
@@ -79,7 +78,7 @@ export function Community({ challenges }) {
           <select
             style={{ backgroundColor: '#212121' }}
             id="sort-category"
-            className="mt-1 block w-full rounded  border-none py-2 pr-40 pl-3 pr-10 text-base leading-6 text-white focus:outline-none sm:text-sm sm:leading-5"
+            className="mt-1 block w-full rounded  border-none text-base leading-6 text-white focus:outline-none sm:text-sm sm:leading-5"
             onChange={(e) => {
               setResults(
                 [...challenges].sort((a, b) => {
@@ -110,7 +109,7 @@ export function Community({ challenges }) {
             <option value="basic">basic</option>
           </select>
         </div>
-        <div className="w-full ml-4">
+        <div className="w-full">
           <label
             htmlFor="search"
             className="block text-sm font-medium border-none leading-5 text-gray-200"
@@ -122,78 +121,46 @@ export function Community({ challenges }) {
             style={{ backgroundColor: '#212121' }}
             onChange={search}
             placeholder="Search for a Challenge"
-            className="mt-1 block w-full rounded py-2 pr-40 pl-3 pr-10  leading-6  border-none text-white focus:outline-none sm:text-sm sm:leading-5"
+            className="mt-1 block w-full rounded py-2 leading-6 border-none text-white focus:outline-none sm:text-sm sm:leading-5"
           ></input>
         </div>
       </div>
-      <div className="mt-6 max-w-6xl text-left">
-        <h1 className="text-3xl font-semibold text-white"> Community Challenges </h1>
-        <div className="mt-4 grid grid-cols-1 gap-4 gap-y-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-          {results.length > 0
-            ? results
-              .filter((challenge) => {
-                if (
-                  difficulty.toLowerCase() !== 'all' &&
-                  challenge.difficulty.toLowerCase() !== difficulty.toLowerCase()
-                ) {
-                  return false;
-                }
-                if (
-                  filter !== '' &&
-                  challenge.category.includes(filter.toLowerCase())
-                ) {
-                  return true;
-                }
-                if (
-                  filter !== '' &&
-                  !(
-                    challenge.title
-                      .toLowerCase()
-                      .includes(filter.toLowerCase()) ||
-                    challenge.content
-                      .toLowerCase()
-                      .includes(filter.toLowerCase())
-                  )
-                ) {
-                  return false;
-                }
-                return true;
-              })
-              .map((challenge, index) => (
-                <Challenge data={challenge} key={index} />
-              ))
-            : challenges
-              .filter((challenge) => {
-                if (
-                  difficulty.toLowerCase() !== 'all' &&
-                  challenge.difficulty.toLowerCase() !== difficulty.toLowerCase()
-                ) {
-                  return false;
-                }
-                if (
-                  filter !== '' &&
-                  challenge.category.includes(filter.toLowerCase())
-                ) {
-                  return true;
-                }
-                if (
-                  filter !== '' &&
-                  !(
-                    challenge.title
-                      .toLowerCase()
-                      .includes(filter.toLowerCase()) ||
-                    challenge.content
-                      .toLowerCase()
-                      .includes(filter.toLowerCase())
-                  )
-                ) {
-                  return false;
-                }
+      <div className="mt-6 max-w-7xl text-left">
+        <h1 className="text-3xl font-semibold text-white mb-4"> Community Challenges </h1>
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {challenges && (results.length > 0 ? results : challenges)
+            .filter((challenge) => {
+              if (
+                difficulty.toLowerCase() !== 'all' &&
+                challenge.difficulty.toLowerCase() !== difficulty.toLowerCase()
+              ) {
+                return false;
+              }
+              if (
+                filter !== '' &&
+                challenge.category.includes(filter.toLowerCase())
+              ) {
                 return true;
-              })
-              .map((challenge, index) => (
-                <Challenge data={challenge} key={index} />
-              ))}
+              }
+              if (
+                filter !== '' &&
+                !(
+                  challenge.title
+                    .toLowerCase()
+                    .includes(filter.toLowerCase()) ||
+                  challenge.content
+                    .toLowerCase()
+                    .includes(filter.toLowerCase())
+                )
+              ) {
+                return false;
+              }
+              return true;
+            })
+            .map((challenge) => (
+              <ChallengeCard challenge={challenge} key={challenge.challengeId} />
+            ))
+          }
         </div>
       </div>
     </>