feat: add useFilters, useUser or useQuery

cesarhenrq · Oct 19, 2023 · 9b3de8f · 9b3de8f
1 parent 23aff07
commit 9b3de8f
Show file tree

Hide file tree

Showing 15 changed files with 225 additions and 226 deletions.
diff --git a/src/components/CityTechTrendsChart/CityTechTrendsChart.tsx b/src/components/CityTechTrendsChart/CityTechTrendsChart.tsx
@@ -1,14 +1,11 @@
-import { useContext } from 'react';
-
 import Chart from '@components/Chart';
 
 import useResource from '@hooks/useResource';
 import useFetchResource from '@hooks/useFetchResource';
-
-import { filtersContext } from '@contexts/filters';
+import useFilters from '@hooks/useFilters';
 
 const CityTechTrendsChart = () => {
-  const { filters } = useContext(filtersContext);
+  const { filters } = useFilters();
 
   const url = filters.technologies[0]
     ? `vacancies?technologies=${filters.technologies[0]}`
@@ -23,7 +20,7 @@ const CityTechTrendsChart = () => {
 
   const [vacancies, vacanciesService] = useResource<Vacancy>(`${url}&limit=0`);
 
-  useFetchResource(vacanciesService, [url]);
+  const isLoaded = useFetchResource(vacanciesService, [url]);
 
   const cityCounts = vacancies.reduce<{ [key: string]: number }>(
     (acc, vacancy) => {
@@ -43,7 +40,7 @@ const CityTechTrendsChart = () => {
 
   cityData.splice(5);
 
-  return <Chart label={label} data={cityData} />;
+  return <Chart label={label} data={cityData} isLoaded={isLoaded} />;
 };
 
 export default CityTechTrendsChart;
diff --git a/src/components/CountryTechTrends/CountryTechTrends.tsx b/src/components/CountryTechTrends/CountryTechTrends.tsx
@@ -7,7 +7,7 @@ const CountryTechTrends = () => {
   const [vacancies, vacanciesService] =
     useResource<Vacancy>('vacancies?limit=0');
 
-  useFetchResource(vacanciesService);
+  const isLoaded = useFetchResource(vacanciesService);
 
   const label = (
     <span>
@@ -39,7 +39,7 @@ const CountryTechTrends = () => {
 
   const top5Technologies = mostUsedTechnologies.slice(0, 5);
 
-  return <Chart label={label} data={top5Technologies} />;
+  return <Chart label={label} data={top5Technologies} isLoaded={isLoaded} />;
 };
 
 export default CountryTechTrends;