fix(bug): fasma juara

src/components/TaskGame/components/Destructuring.js

@@ -11,10 +11,9 @@ function Destructuring(props) {
     color3: "green",
   };
 
-  // TODO: Find the Bugs
-  var color1 = colors.color1,
-    color2 = colors.color1,
-    color3 = colors.color1;
+  // TODO: Find the Bugs (Solved)
+  // Note: Split colors into vars for component style
+  var { color1, color2, color3 } = colors
 
   return (
     <div>

src/components/TaskGame/components/Fetching.js

@@ -14,12 +14,13 @@ function Fetching(props) {
     fetch(pokemonURL)
       .then((res) => res.json())
       .then((resJson) => {
-        // TODO: Find the Bugs
-        const pokemonList = resJson;
+        // TODO: Find the Bugs (Solved)
+        // Note: Need to get the results
+        const pokemonList = resJson.results;
 
-        // TODO: Find the Bugs
-        // setPokemonList will broken the page
-        // setPokemonList(pokemonList);
+        // TODO: Find the Bugs (Solved)
+        // Note: useState setter requires correct object which is list of names, not object
+        setPokemonList(pokemonList);
         console.log(pokemonList);
       });
   }, []);

src/components/TaskGame/components/Props.js

@@ -19,16 +19,19 @@ function Props(props) {
       <div>
         <Row justify="space-around">
           <Col span={4}>
-            {/* TODO: Find the Bugs */}
+            {/* TODO: Find the Bugs (Solved) */}
+            {/* Note: change prop using var */}
             <Square backgroundColor={color1} />
           </Col>
           <Col span={4}>
-            {/* TODO: Find the Bugs */}
-            <Square />
+            {/* TODO: Find the Bugs (Solved) */}
+            {/* Note: change prop using var */}
+            <Square backgroundColor={color2} />
           </Col>
           <Col span={4}>
-            {/* TODO: Find the Bugs */}
-            <Square />
+            {/* TODO: Find the Bugs (Solved) */}
+            {/* Note: change prop using var */}
+            <Square backgroundColor={color3} />
           </Col>
         </Row>
       </div>

src/components/TaskGame/components/UseEffect.js

@@ -8,10 +8,11 @@ function UseEffect(props) {
 
   const [count, setCount] = useState(0);
 
-  // TODO: Find the Bugs
+  // TODO: Find the Bugs (Solved)
+  // Note: without depedency, useEffect will triggered on every update (hence infinite loop)
   useEffect(() => {
     setCount(Math.random);
-  });
+  }, []);
 
   return (
     <div>

src/components/TaskGame/components/UseState.js

@@ -2,8 +2,9 @@ import { Button, Divider } from "antd";
 
 function UseState(props) {
   const handleNext = () => {
-    // TODO: Find the Bugs
-    props.setStep(1);
+    // TODO: Find the Bugs (Solved)
+    // Note: Next step of this page (index 2) is page index 3 not 1
+    props.setStep(3);
   };
 
   return (

src/components/TaskGame/components/UseStateClosure.js

@@ -11,8 +11,9 @@ function UseStateClosure(props) {
   const handleClickAsync = () => {
     console.log("handlernya sudah onclick");
     setTimeout(() => {
-      // TODO: Find the Bugs
-      setCount(count + 1);
+      // TODO: Find the Bugs (Solved)
+      // Note: without using functional way, setCount closures and update the previous same value
+      setCount(count => count + 1);
     }, 1000);
   };