Merge branch 'development' into 1121-save-searches

cesarhenrq · Oct 17, 2023 · 25eb8af · 25eb8af
2 parents ed25fd1 + 2ae3c35
commit 25eb8af
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 28 deletions.
diff --git a/src/components/CityTechTrendsChart/CityTechTrendsChart.tsx b/src/components/CityTechTrendsChart/CityTechTrendsChart.tsx
@@ -21,7 +21,7 @@ const CityTechTrendsChart = () => {
     </span>
   );
 
-  const [vacancies, vacanciesService] = useResource<Vacancy>(url);
+  const [vacancies, vacanciesService] = useResource<Vacancy>(`${url}&limit=0`);
 
   useFetchResource(vacanciesService, [url]);
 
@@ -35,12 +35,14 @@ const CityTechTrendsChart = () => {
   );
 
   const cityData = Object.entries(cityCounts).map(([city, count]) => ({
-    name: city,
+    name: city.split(',')[0],
     qty: count,
   }));
 
   cityData.sort((a, b) => b.qty - a.qty);
 
+  cityData.splice(5);
+
   return <Chart label={label} data={cityData} />;
 };
 

diff --git a/src/components/CountryTechTrends/CountryTechTrends.tsx b/src/components/CountryTechTrends/CountryTechTrends.tsx
@@ -4,7 +4,8 @@ import useResource from '@hooks/useResource';
 import useFetchResource from '@hooks/useFetchResource';
 
 const CountryTechTrends = () => {
-  const [vacancies, vacanciesService] = useResource<Vacancy>('vacancies');
+  const [vacancies, vacanciesService] =
+    useResource<Vacancy>('vacancies?limit=0');
 
   useFetchResource(vacanciesService);
 

diff --git a/src/components/VacancyInfoCard/VacancyInfoCard.tsx b/src/components/VacancyInfoCard/VacancyInfoCard.tsx
@@ -32,27 +32,28 @@ const VacancyInfoCard = ({
   const { user } = useContext(userContext);
   const [expanded, setExpanded] = useState(false);
 
+  const today = new Date();
+
   const createdDate = new Date(createdAt);
   const day = createdDate.getDate();
   const month = createdDate
     .toLocaleDateString('pt-BR', { month: 'long' })
     .slice(0, 3);
 
+  const isNew = today.getDate() - createdDate.getDate() <= 1;
+
   const toggleExpansion = () => {
     setExpanded(!expanded);
   };
 
   return (
-    <BaseCard onClick={toggleExpansion}>
+    <BaseCard
+      onClick={toggleExpansion}
+      borderColor={isNew ? 'purple-dark-secondary' : undefined}
+    >
       <S.Card isLogged={Boolean(user)}>
-        <section className="text-date-container">
-          <Text
-            label={`${vacancyRole}`}
-            fontColor="purple-dark"
-            fontSize="medium"
-            fontWeight="500"
-          />
-
+        <div className="header">
+          <S.NewTag isNew={isNew}>Novo</S.NewTag>
           <div className="date-container">
             <Text
               label={`${advertiser}`}
@@ -67,6 +68,14 @@ const VacancyInfoCard = ({
               fontSize="small"
             />
           </div>
+        </div>
+        <section className="text-date-container">
+          <Text
+            label={`${vacancyRole}`}
+            fontColor="purple-dark"
+            fontSize="medium"
+            fontWeight="500"
+          />
         </section>
         <Text
           label={`Empresa: ${company}`}

diff --git a/src/components/VacancyInfoCard/styles.ts b/src/components/VacancyInfoCard/styles.ts
@@ -1,7 +1,9 @@
 import styled from 'styled-components';
+
 type CardProps = {
   isLogged: boolean;
 };
+
 export const Card = styled.div<CardProps>`
   display: flex;
   flex-direction: column;
@@ -43,6 +45,13 @@ export const Card = styled.div<CardProps>`
   b {
     font-weight: bold;
   }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+  }
 `;
 
 export const CardTech = styled.div`
@@ -57,3 +66,20 @@ export const CardTech = styled.div`
     padding: 0.313rem 1.5rem;
   }
 `;
+
+type NewTagProps = {
+  isNew: boolean;
+};
+
+export const NewTag = styled.div<NewTagProps>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--purple-dark-secondary);
+  color: var(--white);
+  font-weight: bold;
+  font-size: var(--font-size-small);
+  padding: 0.5rem 1.5rem;
+  border-radius: 0.5rem;
+  visibility: ${({ isNew }) => (isNew ? 'visible' : 'hidden')};
+`;
diff --git a/src/contexts/filters/actions.ts b/src/contexts/filters/actions.ts
@@ -115,17 +115,17 @@ export const addMaxWage = (maxWage: string) => {
   };
 };
 
-export const addGeralQuery = (geralQuery: string) => {
+export const addDescription = (description: string) => {
   return {
-    type: 'ADD_GERAL_QUERY',
-    payload: geralQuery,
+    type: 'ADD_DESCRIPTION',
+    payload: description,
   };
 };
 
-export const removeGeralQuery = (geralQuery: string) => {
+export const removeDescription = (description: string) => {
   return {
-    type: 'REMOVE_GERAL_QUERY',
-    payload: geralQuery,
+    type: 'REMOVE_DESCRIPTION',
+    payload: description,
   };
 };
 

diff --git a/src/contexts/filters/dispatcher.ts b/src/contexts/filters/dispatcher.ts
@@ -10,7 +10,7 @@ export type Filters = {
   maxWage: string;
   levels: string[];
   role: string;
-  geralQuery: string;
+  description: string;
 };
 
 export const initialState: Filters = {
@@ -23,7 +23,7 @@ export const initialState: Filters = {
   maxWage: '',
   levels: [],
   role: '',
-  geralQuery: '',
+  description: '',
 };
 
 export const filtersDispatcher = (
@@ -119,15 +119,15 @@ export const filtersDispatcher = (
         ...state,
         maxWage: action.payload,
       };
-    case 'ADD_GERAL_QUERY':
+    case 'ADD_DESCRIPTION':
       return {
         ...state,
-        geralQuery: action.payload,
+        description: action.payload,
       };
-    case 'REMOVE_GERAL_QUERY':
+    case 'REMOVE_DESCRIPTION':
       return {
         ...state,
-        geralQuery: '',
+        description: '',
       };
     case 'RESET_FILTERS':
       return initialState;

diff --git a/src/hooks/useSearchHandling.ts b/src/hooks/useSearchHandling.ts
@@ -39,7 +39,7 @@ const useSearchHandling = (
     } else if (roles.includes(positionOrTech)) {
       filtersDispatch(actions.addRole(positionOrTech));
     } else {
-      filtersDispatch(actions.addGeralQuery(positionOrTech));
+      filtersDispatch(actions.addDescription(positionOrTech));
     }
 
     queryDispatch(queryActions.setQuery(buildQueryString(filters)));

diff --git a/src/pages/VacanciesPage/VacanciesPage.tsx b/src/pages/VacanciesPage/VacanciesPage.tsx
@@ -19,8 +19,6 @@ const VacanciesPage = () => {
 
   const url = `vacancies${query && '?' + query}`;
 
-  console.log(url);
-
   const [vacancies, vacancyService] = useResource<Vacancy>(url);
 
   useFetchResource(vacancyService, [query]);

diff --git a/src/pages/VacanciesPage/styles.ts b/src/pages/VacanciesPage/styles.ts
@@ -18,7 +18,7 @@ export const VacanciesPage = styled.div`
 export const Charts = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 30px;
+  gap: 32px;
   width: 100%;
 `;