Merge pull request #216 from ctfguide-tech/dev

Author: Laphatize

package.json

@@ -63,6 +63,7 @@
     "react-firebase-hooks": "^5.1.1",
     "react-google-charts": "^4.0.1",
     "react-image-crop": "^11.0.5",
+    "react-intersection-observer": "^9.13.1",
     "react-joyride": "^2.7.2",
     "react-loading-skeleton": "^3.2.0",
     "react-markdown": "^9.0.1",

src/components/onboarding/DataAsk.jsx

@@ -262,6 +262,7 @@ export function DataAsk(props) {
                     </p>
                   </div>
 
+
                   <div className="mx-auto mx-auto text-center mt-4">
                     <button
                       onClick={() => {

src/components/practice/community.jsx

@@ -5,6 +5,7 @@ import { Listbox, Transition } from '@headlessui/react';
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/24/solid';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFolderOpen } from '@fortawesome/free-solid-svg-icons';
+import { useInView } from 'react-intersection-observer';
 
 function getCategoryIcon(category) {
   switch (category.toLowerCase()) {
@@ -136,6 +137,13 @@ export function Community({ challenges }) {
   const [results, setResults] = useState([]);
   const [filter, setFilter] = useState('');
   const [solvedFilter, setSolvedFilter] = useState('all');
+  const [displayedResults, setDisplayedResults] = useState([]);
+  const [page, setPage] = useState(1);
+  const itemsPerPage = 12;
+
+  const { ref, inView } = useInView({
+    threshold: 0,
+  });
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
@@ -197,8 +205,20 @@ export function Community({ challenges }) {
       });
 
     setResults(filteredChallenges);
+    setPage(1);
+    setDisplayedResults(filteredChallenges.slice(0, itemsPerPage));
   }, [difficulty, category, challenges, solvedFilter]);
 
+  useEffect(() => {
+    if (inView && page * itemsPerPage < results.length) {
+      const startIndex = page * itemsPerPage;
+      const endIndex = startIndex + itemsPerPage;
+      const nextBatch = results.slice(0, endIndex);
+      setDisplayedResults(nextBatch);
+      setPage((prev) => prev + 1);
+    }
+  }, [inView, results, page]);
+
   const search = (event) => {
     setFilter(event.target.value);
   };
@@ -317,39 +337,42 @@ export function Community({ challenges }) {
           </div>
         </div>
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6">
-          {results.length > 0 ? (
-            results
-              .filter((challenge) => {
-                if (
-                  difficulty.toLowerCase() !== 'all' &&
-                  challenge.difficulty.toLowerCase() !== difficulty.toLowerCase()
-                ) {
-                  return false;
-                }
-                if (
-                  filter !== '' &&
-                  challenge.category.includes(filter.toLowerCase())
-                ) {
+          {displayedResults.length > 0 ? (
+            <>
+              {displayedResults
+                .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;
-                }
-                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} />
-              ))
+                })
+                .map((challenge) => (
+                  <ChallengeCard challenge={challenge} key={challenge.challengeId} />
+                ))}
+              <div ref={ref} className="h-10 w-full col-span-full" />
+            </>
           ) : (
             // kinda hacky but it works
             challenges.length != 0 && (

src/pages/users/[user].jsx

@@ -995,12 +995,7 @@ export default function Create() {
                       </h1>
                       <p className="text-white">
 
-                        {user && points && (
-                          <span className="mr-2 font-bold rounded-sm bg-gradient-to-br from-green-400 to-blue-600 px-2 py-1 text-sm text-white">
-                            <i className=""></i> Points: {points}
-                          </span>
-                        )}
-                       
+                    
                         <i className="fas fa-map-marker-alt mt-2"></i>{' '}
                         {(user && user.location) || (
                           <Skeleton

yarn.lock

@@ -7885,6 +7885,11 @@ react-innertext@^1.1.5:
   resolved "https://registry.yarnpkg.com/react-innertext/-/react-innertext-1.1.5.tgz#8147ac54db3f7067d95f49e2d2c05a720d27d8d0"
   integrity sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==
 
+react-intersection-observer@^9.13.1:
+  version "9.13.1"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.13.1.tgz#6c61a75801162491c6348bad09967f2caf445584"
+  integrity sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==
+
 react-is@^16.10.2, react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"