Merge pull request #80 from cesarhenrq/qa

1120 feat  chart

package.json

@@ -28,6 +28,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.47.0",
     "react-router-dom": "^6.16.0",
+    "recharts": "^2.8.0",
     "styled-components": "^6.0.8",
     "yup": "^1.3.2"
   },

src/assets/db.icons.tsx

@@ -345,6 +345,20 @@ function SideArrow({ fill, width, height }: IconProps) {
   );
 }
 
+function Circle({ fill, width, height }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      fill={fill}
+      viewBox="0 0 4 4"
+    >
+      <circle cx="2" cy="2" r="2" fill="#8C8CA1"></circle>
+    </svg>
+  );
+}
+
 export {
   Magnifier,
   Location,
@@ -360,4 +374,5 @@ export {
   Arrow,
   DownArrow,
   SideArrow,
+  Circle,
 };

src/components/BaseCard/BaseCard.tsx

@@ -1,8 +1,13 @@
 import * as S from './styles';
 
-const BaseCard = ({ children, ...styleProps }: BaseCardProps) => {
+const BaseCard = ({ onClick, children, ...styleProps }: BaseCardProps) => {
   return (
-    <S.BaseCard {...styleProps} className="base-card" data-cy="base-card">
+    <S.BaseCard
+      {...styleProps}
+      className="base-card"
+      onClick={onClick}
+      data-cy="base-card"
+    >
       {children}
     </S.BaseCard>
   );

src/components/Chart/Chart.tsx

@@ -0,0 +1,74 @@
+/* eslint-disable indent */
+import { BarChart, Bar, ResponsiveContainer, XAxis, YAxis } from 'recharts';
+
+import Text from '@components/Text';
+
+import * as S from './styles';
+
+type RoundedTopBarProps = {
+  fill?: string;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+};
+
+const RoundedTopBar = (props: RoundedTopBarProps) => {
+  const { fill, x, y, width, height } = props;
+  const borderRadius = 5;
+
+  return (
+    <path
+      d={`M${x},${(y as number) + (height as number)}
+         L${x},${(y as number) + borderRadius} 
+         Q${x},${y} ${(x as number) + borderRadius},${y} 
+         L${(x as number) + (width as number) - borderRadius},${y} 
+         Q${(x as number as number) + (width as number)},${y} ${
+        (x as number) + (width as number)
+      },${(y as number) + borderRadius} 
+         L${(x as number) + (width as number)},${
+        (y as number) + (height as number)
+      } 
+         Z`}
+      stroke="none"
+      fill={fill}
+    />
+  );
+};
+
+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/index.ts

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

src/components/Chart/styles.ts

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+export const Chart = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 0rem;
+  width: 50%;
+  height: 269px;
+  background: #f3f3f3;
+  border-radius: 16px;
+  border: 1px #ecf1f4 solid;
+
+  .text {
+    justify-content: flex-start;
+    margin-left: 2rem;
+
+    span {
+      span {
+        color: var(--purple-dark-secondary);
+      }
+    }
+  }
+
+  tspan {
+    font-size: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;

src/components/RecentVacancies/RecentVacancies.tsx

@@ -6,9 +6,12 @@ import useResource from '@hooks/useResource';
 import useFetchResource from '@hooks/useFetchResource';
 import VacancyCard from '@components/VacancyCard';
 import { useNavigate } from 'react-router-dom';
+import { userContext } from '@contexts/user';
+import { useContext } from 'react';
 
 const RecentVacancies = () => {
   const [vacancies, vacancyService] = useResource<Vacancy>('vacancies');
+  const { user } = useContext(userContext);
 
   const vacanciesToRender = vacancies
     .sort(function (a: Vacancy, b: Vacancy) {
@@ -26,7 +29,7 @@ const RecentVacancies = () => {
   };
 
   return (
-    <S.Container>
+    <S.Container buttonVisible={Boolean(!user)}>
       <div className="text-container">
         <Text
           label="Vagas mais recentes"
@@ -39,7 +42,7 @@ const RecentVacancies = () => {
         {vacanciesToRender.map(data => (
           <VacancyCard
             location={data.location}
-            technology={data.technology}
+            technologies={data.technology}
             vacancyRole={data.vacancyRole}
           />
         ))}

src/components/RecentVacancies/styles.ts

@@ -1,6 +1,11 @@
+/* eslint-disable indent */
 import styled from 'styled-components';
 
-export const Container = styled.section`
+type props = {
+  buttonVisible: boolean;
+};
+
+export const Container = styled.section<props>`
   margin: 134px;
 
   .vacancy-container {
@@ -15,6 +20,8 @@ export const Container = styled.section`
   }
 
   .button-container {
+    visibility: ${({ buttonVisible }) =>
+      buttonVisible ? 'visible' : 'hidden'};
     display: flex;
     justify-content: center;
     margin-top: 48px;

src/components/Text/index.tsx

@@ -1,8 +1,8 @@
 import * as S from './styles';
 
-const Text = (props: TextProps) => {
+const Text = ({ className, ...props }: TextProps) => {
   return (
-    <S.Text {...props} className="text" data-cy="text">
+    <S.Text {...props} className={`text ${className}`} data-cy="text">
       {props.label}
     </S.Text>
   );

src/components/VacancyCard/VacancyCard.test.tsx

@@ -9,7 +9,7 @@ describe('VancancyCard component', () => {
     container = render(
       <VacancyCard
         location={'Betim-MG'}
-        technology={'React'}
+        technologies={'React'}
         vacancyRole={'Desenvolvedor de sistemas pleno'}
       />,
     ).container;

src/components/VacancyCard/VacancyCard.tsx

@@ -6,11 +6,11 @@ import * as I from '@assets/db.icons';
 
 type props = {
   location: string;
-  technology: string;
+  technologies: string;
   vacancyRole: string;
 };
 
-const VacancyCard = ({ location, technology, vacancyRole }: props) => {
+const VacancyCard = ({ location, technologies, vacancyRole }: props) => {
   return (
     <BaseCard>
       <S.Card data-cy="vancacy-card">
@@ -23,17 +23,17 @@ const VacancyCard = ({ location, technology, vacancyRole }: props) => {
         <S.Container>
           <div className="text-container">
             <I.Location fill="yellow" width={16} />
-            <Text label={`Localização: ${location}`} fontColor="dark-grey" />
+            <Text label={`Localização: ${location}`} fontColor="dark-gray" />
           </div>
           <div className="text-container">
             <I.Computer fill="yellow" width={16} />
             <Text
               label={
                 <p>
-                  Tecnologia: <b>{technology}</b>
+                  Tecnologia: <b>{technologies}</b>
                 </p>
               }
-              fontColor="dark-grey"
+              fontColor="dark-gray"
             />
           </div>
           <S.Link href="/register" data-cy="link">

src/components/VacancyCard/VecancyCard.cy.tsx

@@ -6,7 +6,7 @@ describe('', () => {
     cy.mount(
       <>
         <GlobalStyle />
-        <VacacyCard location={''} technology={''} vacancyRole={''} />
+        <VacacyCard location={''} technologies={''} vacancyRole={''} />
       </>,
     );
 
@@ -17,7 +17,7 @@ describe('', () => {
     cy.mount(
       <>
         <GlobalStyle />
-        <VacacyCard location={''} technology={''} vacancyRole={''} />
+        <VacacyCard location={''} technologies={''} vacancyRole={''} />
       </>,
     );
 

src/components/VacancyInfoCard/VacancyInfoCard.test.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { render, screen } from '@testing-library/react';
+import { expect } from '@jest/globals';
+import VacancyInfoCard from './VacancyInfoCard';
+
+describe('VancancyCard component', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = render(
+      <VacancyInfoCard
+        location={'Betim-MG'}
+        company={'Izap'}
+        vacancyDescription={'Lorem Ipsum is simply a dummy text'}
+        vacancyRole={'Desenvolvedor Front-end'}
+        vacancyType={'Home Office'}
+        wage={'4000'}
+        technologies={['React', 'PHP', 'Java']}
+        advertiser={'Marcos'}
+        createdAt={'12/10/2023'}
+      />,
+    ).container;
+  });
+
+  it('should be defined', () => {
+    expect(container).toBeDefined();
+  });
+  it('to be render location', () => {
+    const location = screen.getByText('Betim-MG');
+    (expect as any)(location).toBeInTheDocument();
+  });
+  it('to be render vacancyRole', () => {
+    const vacancyRole = screen.getByText('Desenvolvedor Front-end');
+    (expect as any)(vacancyRole).toBeInTheDocument();
+  });
+  it('to be render vacancyType', () => {
+    const vacancyType = screen.getByText('Home Office');
+    (expect as any)(vacancyType).toBeInTheDocument();
+  });
+  it('to be render advertiser', () => {
+    const advertiser = screen.getByText('Marcos');
+    (expect as any)(advertiser).toBeInTheDocument();
+  });
+});