Log rest API to test things on the fly

src/utils/helpers.js

@@ -13,51 +13,54 @@ export const useType = () => {
 export const useRest = (type) => {
   const { apiSun, apiTemp, apiAir, apiEnergy } = useAuth0();
   const [{ resource, rest }, setRestApi] = useState({});
-  const typeMapper = useCallback((resourceType) => {
-    const apiTypes = {
-      sunshine: {
-        resource: apiSun,
-        rest: 'sunshine',
-      },
-      snow: {
-        resource: apiSun,
-        rest: 'snow',
-      },
-      precipitation: {
-        resource: apiSun,
-        rest: 'precipitation',
-      },
-      speed: {
-        resource: apiAir,
-        rest: 'wind-speed',
-      },
-      pressure: {
-        resource: apiAir,
-        rest: 'air-pressure',
-      },
-      moist: {
-        resource: apiAir,
-        rest: 'air-moist',
-      },
-      'temp-avg': {
-        resource: apiTemp,
-        rest: 'temp-avg',
-      },
-      'temp-min': {
-        resource: apiTemp,
-        rest: 'temp-min',
-      },
-      'temp-max': {
-        resource: apiTemp,
-        rest: 'temp-max',
-      },
-      energy: {
-        resource: apiEnergy,
-        rest: 'price-per-country',
-      },
-    };
-    return apiTypes[resourceType] || apiTypes.sunshine;
-  }, []);
+  const typeMapper = useCallback(
+    (resourceType) => {
+      const apiTypes = {
+        sunshine: {
+          resource: apiSun,
+          rest: 'sunshine',
+        },
+        snow: {
+          resource: apiSun,
+          rest: 'snow',
+        },
+        precipitation: {
+          resource: apiSun,
+          rest: 'precipitation',
+        },
+        speed: {
+          resource: apiAir,
+          rest: 'wind-speed',
+        },
+        pressure: {
+          resource: apiAir,
+          rest: 'air-pressure',
+        },
+        moist: {
+          resource: apiAir,
+          rest: 'air-moist',
+        },
+        'temp-avg': {
+          resource: apiTemp,
+          rest: 'temp-avg',
+        },
+        'temp-min': {
+          resource: apiTemp,
+          rest: 'temp-min',
+        },
+        'temp-max': {
+          resource: apiTemp,
+          rest: 'temp-max',
+        },
+        energy: {
+          resource: apiEnergy,
+          rest: 'price-per-country',
+        },
+      };
+      return apiTypes[resourceType] || apiTypes.sunshine;
+    },
+    [type]
+  );
 
   useEffect(() => {
     setRestApi(typeMapper(type));

src/views/HomePage.js

@@ -315,6 +315,7 @@ const chartData = [
 const HomePage = () => {
   const type = useType();
   const [{ resource, rest }] = useRest(type);
+  const [{ resource: energy, rest: restEnergy }] = useRest('energy');
   console.log('==========');
   console.log('type ↓');
   console.log(type);
@@ -325,6 +326,9 @@ const HomePage = () => {
   console.log('rest ↓');
   console.log(rest);
   console.log('==========');
+  console.log(restEnergy, 'this is restEnergy');
+  console.log(energy, 'this is energy');
+  console.log(fetchData);
 
   const dispatch = useDispatch();
   const data = useSelector(({ exampleReducer }) => exampleReducer.data);
@@ -343,9 +347,10 @@ const HomePage = () => {
       // resource.get(`/rest/sunshine?${queryBuilder({ max: 10, filter: 2000 })}`).then((data) => {
       //   setMyData(data);
       // });
+      resource.get(`/rest/${rest}?${queryBuilder({ max: 1000, skip: 2000 })}`).then(console.log);
       dispatch(fetchData(resource, rest, max, skip));
     }
-  }, [resource, max, skip]);
+  }, [resource, max, skip, rest]);
 
   const chartData2 = (data || []).reduce(
     (acc, { _id, year, month, ...item }) => ({