Merge pull request #87 from cesarhenrq/qa

Qa

src/App.tsx

@@ -4,16 +4,19 @@ import Router from '@routes/Router';
 
 import FiltersProvider from '@contexts/filters';
 import UserProvider from '@contexts/user';
+import QueryProvider from '@contexts/query';
 
 export default function App() {
   return (
     <div className="App">
       <GlobalStyle />
-      <FiltersProvider>
-        <UserProvider>
-          <Router />
-        </UserProvider>
-      </FiltersProvider>
+      <QueryProvider>
+        <FiltersProvider>
+          <UserProvider>
+            <Router />
+          </UserProvider>
+        </FiltersProvider>
+      </QueryProvider>
     </div>
   );
 }

src/components/Chart/Chart.tsx

@@ -1,10 +1,55 @@
 /* eslint-disable indent */
+import { useContext } from 'react';
+
 import { BarChart, Bar, ResponsiveContainer, XAxis, YAxis } from 'recharts';
 
 import Text from '@components/Text';
+import Button from '@components/Button';
+
+import { userContext } from '@contexts/user';
 
 import * as S from './styles';
 
+type Data = {
+  name: string;
+  qty: number;
+};
+
+type ChartProps = {
+  data: Data[];
+  label: React.ReactElement;
+};
+
+const Chart = ({ data, label }: ChartProps) => {
+  const { user } = useContext(userContext);
+
+  return (
+    <S.ChartWrapper>
+      <S.Chart isLogged={Boolean(user)}>
+        <Text label={label} />
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={data} margin={{ top: 24 }}>
+            <XAxis
+              dataKey="name"
+              axisLine={false}
+              tickLine={false}
+              allowDataOverflow
+            />
+            <YAxis axisLine={false} tickLine={false} allowDataOverflow />
+            <Bar
+              dataKey="qty"
+              fill="#6950A1"
+              barSize={20}
+              shape={<RoundedTopBar />}
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </S.Chart>
+      {!user && <Button label="Cadastre-se para visualizar" />}
+    </S.ChartWrapper>
+  );
+};
+
 type RoundedTopBarProps = {
   fill?: string;
   x?: number;
@@ -36,39 +81,4 @@ const RoundedTopBar = (props: RoundedTopBarProps) => {
   );
 };
 
-type Data = {
-  name: string;
-  qtd: number;
-};
-
-type ChartProps = {
-  data: Data[];
-  label: React.ReactElement;
-};
-
-const Chart = ({ data, label }: ChartProps) => {
-  return (
-    <S.Chart>
-      <Text label={label} />
-      <ResponsiveContainer width="100%" height="100%">
-        <BarChart width={150} height={40} data={data} margin={{ top: 24 }}>
-          <XAxis
-            dataKey="name"
-            axisLine={false}
-            tickLine={false}
-            allowDataOverflow
-          />
-          <YAxis axisLine={false} tickLine={false} allowDataOverflow />
-          <Bar
-            dataKey="qtd"
-            fill="#6950A1"
-            barSize={20}
-            shape={<RoundedTopBar />}
-          />
-        </BarChart>
-      </ResponsiveContainer>
-    </S.Chart>
-  );
-};
-
 export default Chart;

src/components/Chart/styles.ts

@@ -1,14 +1,19 @@
 import styled from 'styled-components';
 
-export const Chart = styled.div`
+type ChartProps = {
+  isLogged: boolean;
+};
+
+export const Chart = styled.div<ChartProps>`
   display: flex;
   flex-direction: column;
   padding: 1.5rem 0rem;
-  width: 50%;
+  width: 100%;
   height: 269px;
   background: #f3f3f3;
   border-radius: 16px;
   border: 1px #ecf1f4 solid;
+  filter: ${props => (props.isLogged ? 'blur(0px)' : 'blur(3.5px)')};
 
   .text {
     justify-content: flex-start;
@@ -28,3 +33,16 @@ export const Chart = styled.div`
     text-overflow: ellipsis;
   }
 `;
+
+export const ChartWrapper = styled.div`
+  position: relative;
+
+  button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 300px;
+    z-index: 1;
+  }
+`;

src/components/CityTechTrendsChart/CityTechTrendsChart.tsx

@@ -0,0 +1,47 @@
+import { useContext } from 'react';
+
+import Chart from '@components/Chart';
+
+import useResource from '@hooks/useResource';
+import useFetchResource from '@hooks/useFetchResource';
+
+import { filtersContext } from '@contexts/filters';
+
+const CityTechTrendsChart = () => {
+  const { filters } = useContext(filtersContext);
+
+  const url = filters.technologies[0]
+    ? `vacancies?technologies=${filters.technologies[0]}`
+    : 'vacancies?technologies=React';
+
+  const label = (
+    <span>
+      Cidades quem mais procuram por{' '}
+      <span>{filters.technologies[0] ? filters.technologies[0] : 'React'}</span>
+    </span>
+  );
+
+  const [vacancies, vacanciesService] = useResource<Vacancy>(url);
+
+  useFetchResource(vacanciesService, [url]);
+
+  const cityCounts = vacancies.reduce<{ [key: string]: number }>(
+    (acc, vacancy) => {
+      const city = vacancy.location;
+      acc[city] = (acc[city] || 0) + 1;
+      return acc;
+    },
+    {},
+  );
+
+  const cityData = Object.entries(cityCounts).map(([city, count]) => ({
+    name: city,
+    qty: count,
+  }));
+
+  cityData.sort((a, b) => b.qty - a.qty);
+
+  return <Chart label={label} data={cityData} />;
+};
+
+export default CityTechTrendsChart;

src/components/CityTechTrendsChart/index.tsx

@@ -0,0 +1 @@
+export { default } from './CityTechTrendsChart';

src/components/CountryTechTrends/CountryTechTrends.tsx

@@ -0,0 +1,44 @@
+import Chart from '@components/Chart';
+
+import useResource from '@hooks/useResource';
+import useFetchResource from '@hooks/useFetchResource';
+
+const CountryTechTrends = () => {
+  const [vacancies, vacanciesService] = useResource<Vacancy>('vacancies');
+
+  useFetchResource(vacanciesService);
+
+  const label = (
+    <span>
+      Tecnologias mais procuradas em <span>Brasil</span>
+    </span>
+  );
+
+  const allTechnologies = vacancies.reduce<string[]>((acc, vacancy) => {
+    vacancy.technologies.forEach(tech => {
+      acc.push(tech.tecName);
+    });
+    return acc;
+  }, []);
+
+  const technologyCount = allTechnologies.reduce<{ [key: string]: number }>(
+    (acc, techName) => {
+      acc[techName] = (acc[techName] || 0) + 1;
+      return acc;
+    },
+    {},
+  );
+
+  const mostUsedTechnologies = Object.keys(technologyCount).map(techName => ({
+    name: techName,
+    qty: technologyCount[techName],
+  }));
+
+  mostUsedTechnologies.sort((a, b) => b.qty - a.qty);
+
+  const top5Technologies = mostUsedTechnologies.slice(0, 5);
+
+  return <Chart label={label} data={top5Technologies} />;
+};
+
+export default CountryTechTrends;

src/components/CountryTechTrends/index.ts

@@ -0,0 +1 @@
+export { default } from './CountryTechTrends';

src/components/Filter/Filter.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 
 import Filter from './Filter';
 
@@ -61,16 +60,4 @@ describe('<Filter />', () => {
   it('should render <Button /> with text "Filtar"', () => {
     screen.getByText('Filtrar');
   });
-
-  it('should render text "Ver mais..." by default', () => {
-    screen.getByText('Ver mais...');
-  });
-
-  it('should render text "Ver menos..." when click on "Ver mais..."', async () => {
-    const button = screen.getByText('Ver mais...');
-
-    await userEvent.click(button);
-
-    screen.getByText('Ver menos...');
-  });
 });