Merge pull request #75 from IncognitaDev/reduce-request

fix many request

Author: ramos-ph

frontend/.env

@@ -1 +1 @@
-REACT_APP_API_URL=http://localhost:3333
+REACT_APP_DEVCHALLENGE_API=http://localhost:3333

frontend/src/components/ChallengeCard/index.js

@@ -39,7 +39,10 @@ function ChallengeCard({ challenge, progress, redirect, buttonText }) {
                 <S.CardImage>
                     <S.CardTechs>
                         {techs.map((item) => (
-                            <p className="tech" key={item}>
+                            <p
+                                className="tech"
+                                key={`${item}-${challenge._id}`}
+                            >
                                 {item}
                             </p>
                         ))}

frontend/src/pages/Challenges/index.js

@@ -21,6 +21,7 @@ const types = [
 
 export default function Challenges({ location }) {
     const [challenges, setChallenges] = useState([]);
+    const [filteredChallenges, setFilteredChallenges] = useState([]);
     const [loading, setLoading] = useState(true);
     const [languageFilter, setLanguageFilter] = useState('');
     const [typeFilter, setTypeFilter] = useState(location.search.split('=')[1]);
@@ -32,20 +33,38 @@ export default function Challenges({ location }) {
     useEffect(() => {
         window.scrollTo(0, 0);
         async function loadChallenges() {
-            let response = [];
-            if (typeFilter) {
-                const type = capitalize(typeFilter);
-                response = await api.get(`/challenges/?type=${type}`);
-            } else {
-                response = await api.get('/challenges');
-            }
+            const response = await api.get('/challenges');
+
             setChallenges(response.data);
+            setFilteredChallenges(response.data);
 
             setLoading(false);
         }
 
         loadChallenges();
-    }, [location, typeFilter, languageFilter]);
+    }, [location]);
+
+    useEffect(() => {
+        let filtered = challenges;
+        if (typeFilter) {
+            filtered = filtered.filter(
+                (challenge) =>
+                    challenge.type.toLowerCase() === typeFilter.toLowerCase()
+            );
+        }
+        if (languageFilter) {
+            filtered = filtered.filter((challenge) => {
+                const [ techs ] = challenge.techs;
+                const serializedTechs = techs.split(', ');
+                const hasSelectedTech =
+                    serializedTechs.includes(languageFilter) ||
+                    serializedTechs.includes('Free Choice');
+
+                return hasSelectedTech;
+            });
+        }
+        setFilteredChallenges(filtered);
+    }, [typeFilter, languageFilter, challenges]);
 
     return (
         <>
@@ -97,7 +116,7 @@ export default function Challenges({ location }) {
             {loading && <ChallengesSkeleton />}
             {!loading && (
                 <S.Section>
-                    {challenges.map((challenge) => {
+                    {filteredChallenges.map((challenge) => {
                         return (
                             <ChallengeCard
                                 challenge={challenge}