Merge pull request #46 from cesarhenrq/4091-feat--filter-card-container

4091 feat  filter card container

.eslintrc.js

@@ -15,7 +15,7 @@ module.exports = {
     '@typescript-eslint/no-var-requires': 'off',
     'testing-library/no-render-in-setup': 'off',
     semi: ['error', 'always'],
-    indent: ['error', 2],
+    indent: ['error', 2, { SwitchCase: 1 }],
     quotes: ['error', 'single'],
     semi: ['error', 'always'],
     eqeqeq: 'error',

jest.config.ts

@@ -9,6 +9,8 @@ export default {
     '^@components/(.*)$': '<rootDir>/src/components/$1',
     '^@assets/(.*)$': '<rootDir>/src/assets/$1',
     '^@hooks/(.*)$': '<rootDir>/src/hooks/$1',
+    '^@services/(.*)$': '<rootDir>/src/services/$1',
+    axios: 'axios/dist/node/axios.cjs',
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 };

package.json

@@ -41,6 +41,7 @@
     "@typescript-eslint/eslint-plugin": "6.7.2",
     "@typescript-eslint/parser": "6.7.2",
     "@vitejs/plugin-react": "4.1.0",
+    "babel-plugin-transform-import-meta": "^2.2.1",
     "cypress": "13.2.0",
     "cypress-real-events": "^1.10.3",
     "eslint": "8.50.0",
@@ -63,6 +64,9 @@
     "typescript": "4.3.2",
     "vite": "4.1.4"
   },
+  "plugins": [
+    "babel-plugin-transform-import-meta"
+  ],
   "husky": {
     "hooks": {
       "pre-commit": "yarn typecheck && yarn test --watchAll=false && lint-staged"

src/components/FilterCardContainer/FilterCardContainer.cy.tsx

@@ -0,0 +1,71 @@
+import FilterCardContainer from './FilterCardContainer';
+import GlobalStyle from '@styles/global';
+
+const Sut = () => (
+  <>
+    <GlobalStyle />
+    <FilterCardContainer />
+  </>
+);
+
+describe('<FilterCardContainer />', () => {
+  beforeEach(() => {
+    cy.mount(<Sut />);
+  });
+
+  it('should has background-color: var(--purple-dark)', () => {
+    cy.getByCy('filter-card-container').should(
+      'have.css',
+      'background-color',
+      'rgb(26, 16, 51)',
+    );
+  });
+
+  it('should has padding: 26px 135px 64px', () => {
+    cy.getByCy('filter-card-container').should(
+      'have.css',
+      'padding',
+      '26px 135px 64px',
+    );
+  });
+
+  it('should base-card has box-shadow: none', () => {
+    cy.getByCy('base-card').should('have.css', 'box-shadow', 'none');
+  });
+
+  it('should navigation and card wrapper has display: flex', () => {
+    cy.getByCy('navigation-and-card').should('have.css', 'display', 'flex');
+  });
+
+  it('should navigation and card wrapper has justify-content: space-between', () => {
+    cy.getByCy('navigation-and-card').should(
+      'have.css',
+      'justify-content',
+      'space-between',
+    );
+  });
+
+  it('should text "Vagas de emprego em todo Brasil" has justify-content: flex-start', () => {
+    cy.contains('Vagas de emprego em todo Brasil').should(
+      'have.css',
+      'justify-content',
+      'flex-start',
+    );
+  });
+
+  it('should filter cards wrapper has display: flex', () => {
+    cy.getByClassLike('filter-cards').should('have.css', 'display', 'flex');
+  });
+
+  it('should filter cards wrapper has gap: 1.5rem', () => {
+    cy.getByClassLike('filter-cards').should('have.css', 'gap', '24px');
+  });
+
+  it('should filter cards wrapper has flex-wrap: wrap', () => {
+    cy.getByClassLike('filter-cards').should('have.css', 'flex-wrap', 'wrap');
+  });
+
+  it('should filter cards wrapper has margin-top: 1.875rem', () => {
+    cy.getByClassLike('filter-cards').should('have.css', 'margin-top', '30px');
+  });
+});

src/components/FilterCardContainer/FilterCardContainer.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+
+import FilterCardContainer from './FilterCardContainer';
+
+describe('<FilterCardContainer />', () => {
+  beforeEach(() => {
+    render(<FilterCardContainer />);
+  });
+
+  it('should be defined', () => {
+    screen.getByTestId('filter-card-container');
+  });
+
+  it('should render navigation-and-card wrapper', () => {
+    screen.getByTestId('navigation-and-card');
+  });
+
+  it('should render text-and-navigation wrapper', () => {
+    screen.getByTestId('text-and-navigation');
+  });
+
+  it('should render filter navigation component', () => {
+    screen.getByTestId('filter-navigation');
+  });
+
+  it('should render register card component', () => {
+    screen.getByTestId('register-card');
+  });
+
+  it('should render filter card component', () => {
+    screen.getAllByTestId('filter-card');
+  });
+
+  it('should render text "Vagas de emprego em todo Brasil"', () => {
+    screen.getByText('Vagas de emprego em todo Brasil');
+  });
+});

src/components/FilterCardContainer/FilterCardContainer.tsx

@@ -0,0 +1,88 @@
+import { useState } from 'react';
+
+import Text from '@components/Text';
+import FilterNavigation from '@components/FilterNavigation';
+import RegisterCard from '@components/RegisterCard';
+import FilterCard from '@components/FilterCard';
+
+import useResource from '@hooks/useResource';
+import useFetchResource from '@hooks/useFetchResource';
+
+import * as S from './styles';
+
+const technologies = [
+  'JavaScript',
+  'Python',
+  'Java',
+  'C#',
+  'Ruby',
+  'PHP',
+  'TypeScript',
+  'Swift',
+  'Go',
+  'Kotlin',
+  'Rust',
+];
+
+const FilterCardContainer = () => {
+  const [activeTab, setActiveTab] = useState('technology');
+
+  const [vacancies, vacancyService] = useResource<Vacancy>('vacancies');
+  /* const [technologies, technologyService] =
+    useResource<Technology>('technologies'); */
+
+  const roles = [...new Set(vacancies?.map(vacancy => vacancy.vacancyRole))];
+  const locations = [...new Set(vacancies?.map(vacancy => vacancy.location))];
+
+  useFetchResource(vacancyService);
+  //useFetchResource(technologyService);
+
+  const handleCLick = (event: React.MouseEvent<HTMLDivElement>) => {
+    const { id } = event.currentTarget;
+    setActiveTab(id);
+  };
+
+  let dataToRender = [];
+
+  switch (activeTab) {
+    case 'technology':
+      dataToRender = technologies;
+      break;
+    case 'location':
+      dataToRender = locations;
+      break;
+    case 'roles':
+      dataToRender = roles;
+      break;
+    default:
+      dataToRender = technologies;
+  }
+
+  return (
+    <S.FilterCardContainer data-cy="filter-card-container">
+      <div className="navigation-and-card" data-cy="navigation-and-card">
+        <div className="text-and-navigation" data-cy="text-and-navigation">
+          <Text
+            label="Vagas de emprego em todo Brasil"
+            fontColor="yellow"
+            fontSize="large"
+            fontWeight="600"
+          />
+          <FilterNavigation activeTab={activeTab} onClick={handleCLick} />
+        </div>
+        <RegisterCard />
+      </div>
+      <div className="filter-cards" data-cy={`filter-cards-${activeTab}`}>
+        {dataToRender.map(data => (
+          <FilterCard
+            key={data}
+            filter={data}
+            onClick={() => console.log('clicked')}
+          />
+        ))}
+      </div>
+    </S.FilterCardContainer>
+  );
+};
+
+export default FilterCardContainer;

src/components/FilterCardContainer/index.ts

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

src/components/FilterCardContainer/styles.ts

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+export const FilterCardContainer = styled.div`
+  background-color: var(--purple-dark);
+  padding: 1.625rem 8.4375rem;
+  padding-bottom: 4rem;
+
+  .base-card {
+    box-shadow: none;
+  }
+
+  .navigation-and-card {
+    display: flex;
+    justify-content: space-between;
+
+    .text-and-navigation {
+      .text {
+        justify-content: flex-start;
+      }
+    }
+  }
+
+  .filter-cards {
+    display: flex;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+    margin-top: 1.875rem;
+
+    .filter-card {
+      width: 16.875rem;
+    }
+  }
+`;

src/components/FilterNavigation/FilterNavigation.cy.tsx

@@ -4,7 +4,7 @@ import FilterNavigation from './FilterNavigation';
 import GlobalStyle from '@styles/global';
 
 const Sut = () => {
-  const [activeTab, setActiveTab] = useState('tecnology');
+  const [activeTab, setActiveTab] = useState('technology');
 
   const handleTabClick = (event: React.MouseEvent<HTMLDivElement>) => {
     const { id } = event.currentTarget;

src/components/FilterNavigation/FilterNavigation.tsx

@@ -17,15 +17,15 @@ const FilterNavigation = ({ activeTab, onClick }: FilterNavigationProps) => {
       <S.FilterNavigationItem
         className="filter-navigation-item"
         data-cy="filter-navigation-tecnology"
-        id="tecnology"
+        id="technology"
         onClick={onClick}
-        active={activeTab === 'tecnology'}
+        active={activeTab === 'technology'}
       >
         <Computer
           fill="white"
           width={24}
           height={24}
-          active={activeTab === 'tecnology'}
+          active={activeTab === 'technology'}
         />
         <Text label="Tecnologia" fontColor="white" fontSize="medium" />
       </S.FilterNavigationItem>
@@ -47,15 +47,15 @@ const FilterNavigation = ({ activeTab, onClick }: FilterNavigationProps) => {
       <S.FilterNavigationItem
         className="filter-navigation-item"
         data-cy="filter-navigation-job"
-        id="job"
+        id="roles"
         onClick={onClick}
-        active={activeTab === 'job'}
+        active={activeTab === 'roles'}
       >
         <Suitcase
           fill="white"
           width={24}
           height={24}
-          active={activeTab === 'job'}
+          active={activeTab === 'roles'}
         />
         <Text label="Cargos" fontColor="white" fontSize="medium" />
       </S.FilterNavigationItem>

src/hooks/useFetchResouce.ts → src/hooks/useFetchResource.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 
-const useFetchResouce = (service: Service) => {
+const useFetchResource = (service: Service) => {
   useEffect(() => {
     service.get();
   }, []);
 };
 
-export default useFetchResouce;
+export default useFetchResource;

src/services/httpClient.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 const httpClient = axios.create({
-  baseURL: import.meta.env.VITE_BASE_URL,
+  baseURL: 'https://metavagasapi.onrender.com/',
 });
 
 export default httpClient;

src/types/Company.d.ts

@@ -0,0 +1,9 @@
+type Company = {
+  id: string;
+  name: string;
+  description: string;
+  foundedAt: Date;
+  adress: string;
+  city: string;
+  state: string;
+};

src/types/Technology.d.ts

@@ -0,0 +1,6 @@
+type Technology = {
+  id: string;
+  tecName: string;
+  creatorsName: string;
+  vacancies: Vacancy[];
+};

src/types/Vacancy.d.ts

@@ -0,0 +1,12 @@
+type Vacancy = {
+  id: string;
+  level: string;
+  location: string;
+  company: Company;
+  vacancyDescription: string;
+  vacancyRole: string;
+  vacancyType: string;
+  wage: number;
+  createdAt: Date;
+  updatedAt: Date;
+};