Merge pull request #42 from Platzi-Master-C8/develop

version 1.1.0
Platzi-Master-C8 · Mar 11, 2022 · fbb158b · fbb158b
2 parents 2d5472c + 1e04460
commit fbb158b
Show file tree

Hide file tree

Showing 36 changed files with 1,150 additions and 170 deletions.
diff --git a/.env.example b/.env.example
@@ -1,3 +1,4 @@
-CURRENCY_API_URL =
-SALARIES_API_URL =
-COMPANIES_API_URL =
+CURRENCY_API_URL=
+SALARIES_API_URL=
+COMPANIES_API_URL=
+ENTERPRISES_URL=
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "gethired-base",
-    "version": "1.0.3",
+    "version": "1.1.0",
     "main": "index.js",
     "license": "MIT",
     "scripts": {
@@ -20,7 +20,7 @@
     "dependencies": {
         "@emotion/react": "11.6.0",
         "@emotion/styled": "11.6.0",
-        "@master-c8/commons": "^0.1.8",
+        "@master-c8/commons": "^0.1.10",
         "@master-c8/icons": "^0.1.3",
         "@master-c8/theme": "^0.1.9",
         "@mui/icons-material": "5.1.1",
@@ -34,10 +34,12 @@
         "@mui/utils": "^5.3.0",
         "@reduxjs/toolkit": "^1.7.0",
         "chart.js": "^3.6.2",
+        "date-fns": "^2.28.0",
         "prop-types": "^15.7.2",
         "react": "17.0.2",
         "react-chartjs-2": "^4.0.0",
         "react-dom": "17.0.2",
+        "react-hook-form": "^7.27.1",
         "react-redux": "^7.2.6",
         "react-router-dom": "6.0.2",
         "redux-persist": "^6.0.0",
@@ -54,11 +56,13 @@
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^0.26.0",
         "babel-eslint": "10.1.0",
         "babel-jest": "^27.4.2",
         "babel-loader": "8.2.3",
         "clean-webpack-plugin": "4.0.0",
         "css-loader": "6.5.1",
+        "dotenv": "^16.0.0",
         "dotenv-webpack": "^7.0.3",
         "eslint": "8.3.0",
         "eslint-config-airbnb": "19.0.0",

diff --git a/public/calculate.gif b/public/calculate.gif
diff --git a/public/comparate.gif b/public/comparate.gif
diff --git a/public/favicon-144.png b/public/favicon-144.png
diff --git a/public/favicon-64.png b/public/favicon-64.png
diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,8 @@
         <meta charset="UTF-8" />
         <title>GETHIRED | Find your dream job</title>
         <meta http-equiv="Content-Security-Policy" content="connect-src * 'unsafe-inline'" />
-
+        <link rel="icon" type="image/png" href="favicon-64.png" sizes="144x144" />
+        <link rel="icon" type="image/png" href="favicon-144.png" sizes="144x144" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
     </head>
     <body>

diff --git a/readme.md b/readme.md
@@ -1,12 +1,41 @@
-# React template platzi master [c8]
+# Job Placement | Salaries [C8] 💸💸💸
 
-This project is a template for a React app.
+In salaries you can calculate your salary, compare your salary range with other profiles and when searching for your job you can negotiate your salary. 💚 💰
 
-This project is configured with webpack, [Material react](https://mui.com), Prettier and eslint.
+## Demo Salaries 🚀
 
-This project already have a theme file configuration (`src/constants/theme.constant.js`) following the design system from Platzi master C8 in [figma](https://www.figma.com/file/JbToDZz42lRNoZFCdDxya5/Standards?node-id=0%3A1)
+[View Demo](https://salaries.get-hired.work/)
 
-## Setup and test
+## Demo Job Placement Cell 🚀
+
+[View Demo](https://get-hired.work/)
+
+## Overview 🔖
+
+![Img overview project](public/calculate.gif)
+
+![Img overview project](public/comparate.gif)
+
+## About Project 📈
+
+This project is part of the Job Placement cell. He also belongs to cohort 8 of Platzi Master 💚
+
+## Technologies 🔧
+
+-   [React.js](https://reactjs.org/)
+-   [Redux](https://redux.js.org/)
+-   [Mui](https://mui.com/)
+-   [@master-c8/commons](https://www.npmjs.com/package/@master-c8/commons)
+-   [@master-c8/icons](https://www.npmjs.com/package/@master-c8/icons)
+-   [@master-c8/theme](https://www.npmjs.com/package/@master-c8/theme)
+-   [Vercel](https://vercel.com/)
+-   [Webpack](https://webpack.js.org/)
+
+## Design System 🪄
+
+You can design system [here](https://www.figma.com/file/JbToDZz42lRNoZFCdDxya5/Standards?node-id=0%3A1)
+
+## Setup and test ⚙️
 
 First, clone the repository and install the dependencies
 
@@ -16,16 +45,20 @@ Run the project with the script start
 
 `yarn start`
 
-the page will be loaded on `http://localhost:3000`
+The page will be loaded on `http://localhost:3000`
 
-<img width="1395" alt="Screen Shot 2021-11-21 at 11 41 08 PM" src="https://user-images.githubusercontent.com/6579616/142802252-b5b6a6dc-4263-42ed-91e7-7b648ecae9fa.png">
+## Contributors 📧
 
+-   [Yadu Lopez](https://www.linkedin.com/in/yadu-lopez/)
+-   [Johan Perez](https://www.linkedin.com/in/johannpereze/)
+-   [Kevin Farid](https://www.linkedin.com/in/kevfarid/)
+-   [Emilio Sanchez](https://www.linkedin.com/in/emlez/)
 
 ## How to contribute
 
 Thank you for being here, we're really happy you decided to contribute to the project.
 
 Before you contribute to the project please make sure to read all items below.
 
-* [Code of Conduct](/CODE_OF_CONDUCT.md)
-* [Contributing Guide](/CONTRIBUTING.md)
+-   [Code of Conduct](/CODE_OF_CONDUCT.md)
+-   [Contributing Guide](/CONTRIBUTING.md)
diff --git a/src/app/CalculateSalary/selectors.js b/src/app/CalculateSalary/selectors.js
@@ -39,3 +39,8 @@ export const selectLoadingFormComparison = createSelector(
     (state) => state.Calculate.loadingButtonsState.formCompare,
     (loading) => loading,
 );
+
+export const selectVacancies = createSelector(
+    (state) => state.Calculate.vacancies,
+    (vacancies) => vacancies,
+);
diff --git a/src/app/CalculateSalary/slice.js b/src/app/CalculateSalary/slice.js
@@ -3,23 +3,23 @@ import { getSalaryProfile } from 'Services/salaries';
 
 const initialState = {
     formMain: {
-        title_id: '',
+        title_name: '',
         technologies: [],
-        seniority: '',
+        seniority: null,
         english_level: '',
-        is_remote: false,
+        is_remote: true,
         location: '',
     },
     formComparison: {
-        title_id: '',
+        title_name: '',
         technologies: [],
-        seniority: '',
+        seniority: null,
         english_level: '',
-        is_remote: false,
+        is_remote: true,
         location: '',
     },
     chartData: [],
-    currency: '',
+    currency: 'USD',
     comparisonChartData: [],
     snackbarShow: false,
     loadingButtonsState: {
@@ -67,6 +67,9 @@ const calculateSalary = createSlice({
         },
         clearFormMain(state) {
             state.formMain = initialState.formMain;
+            state.formComparison = initialState.formComparison;
+            state.chartData = initialState.chartData;
+            state.comparisonChartData = initialState.comparisonChartData;
         },
         deleteChip: (state, action) => {
             state.formMain.technologies = state.formMain.technologies.filter((chip) => chip !== action.payload);
@@ -104,7 +107,14 @@ const calculateSalary = createSlice({
     },
 });
 
-export const { changesForm, changesFormComparison, clearFormMain, deleteChip, changeCurrency, closeSnackbar } =
-    calculateSalary.actions;
+export const {
+    changesForm,
+    changesFormComparison,
+    clearFormMain,
+    deleteChip,
+    changeCurrency,
+    closeSnackbar,
+    changeFilter,
+} = calculateSalary.actions;
 
 export default calculateSalary.reducer;
diff --git a/src/app/Filters/selectors.js b/src/app/Filters/selectors.js
@@ -0,0 +1,6 @@
+import { createSelector } from '@reduxjs/toolkit';
+
+export const selectFilters = createSelector(
+    (state) => state.Filters.filters,
+    (filters) => filters,
+);
diff --git a/src/app/Filters/slice.js b/src/app/Filters/slice.js
@@ -0,0 +1,31 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+    filters: {
+        typeWork: null ?? '',
+        'company[]': null,
+        job_location: null,
+        min_salary: null,
+        max_salary: null,
+    },
+};
+
+const filters = createSlice({
+    name: 'Filters',
+    initialState,
+    reducers: {
+        changeFilter(state, action) {
+            state.filters = {
+                ...state.filters,
+                ...action.payload,
+            };
+        },
+        resetFilters(state) {
+            state.filters = initialState.filters;
+        },
+    },
+});
+
+export const { changeFilter, resetFilters } = filters.actions;
+
+export default filters.reducer;
diff --git a/src/app/ListData/selectors.js b/src/app/ListData/selectors.js
@@ -24,3 +24,18 @@ export const selectListCurrencies = createSelector(
     (state) => state.ListData.list.Currencies,
     (currencies) => currencies.map(({ currency }) => currency),
 );
+
+export const selectAllList = createSelector(
+    (state) => state.ListData.list,
+    (all) => all,
+);
+
+export const selectLoading = createSelector(
+    (state) => state.ListData.loading,
+    (load) => load,
+);
+
+export const selectError = createSelector(
+    (state) => state.ListData.error,
+    (error) => error,
+);
diff --git a/src/app/ListData/slice.js b/src/app/ListData/slice.js
@@ -2,13 +2,18 @@ import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 
 import { getListByName } from 'Services/salaries';
 import { getListCurrencies } from 'Services/currency';
+import { getListCompanies } from 'Services/filters';
+import { getListLocations, getListTypeWork } from '../../services/filters';
 
 export const fetchListData = createAsyncThunk('post/fetchListData', async () => ({
     Technologies: await getListByName('technologies'),
     Jobs: await getListByName('titles'),
     English: await getListByName('english'),
     Seniority: await getListByName('seniority'),
     Currencies: await getListCurrencies(),
+    Companies: await getListCompanies(),
+    TypeWork: await getListTypeWork(),
+    Locations: await getListLocations(),
 }));
 
 const dataSlice = createSlice({
@@ -20,11 +25,26 @@ const dataSlice = createSlice({
             English: { level: '', texts: [], description: '' },
             Seniority: { level: '', texts: [], description: '' },
             Currencies: [],
+            Companies: [],
+            TypeWork: [],
+            Locations: [],
         },
+        loading: false,
+        error: null,
     },
     extraReducers: {
         [fetchListData.fulfilled]: (state, action) => {
             state.list = action.payload;
+            state.loading = false;
+            state.error = null;
+        },
+        [fetchListData.pending]: (state) => {
+            state.loading = true;
+            state.error = null;
+        },
+        [fetchListData.rejected]: (state) => {
+            state.loading = false;
+            state.error = 'Ups! There is an error';
         },
     },
 });

diff --git a/src/app/rootReducer.js b/src/app/rootReducer.js
@@ -2,10 +2,12 @@ import { combineReducers } from '@reduxjs/toolkit';
 
 import dataReducer from './ListData/slice';
 import calculateReducer from './CalculateSalary/slice';
+import filtersReducer from './Filters/slice';
 
 const rootReducer = combineReducers({
     ListData: dataReducer,
     Calculate: calculateReducer,
+    Filters: filtersReducer,
 });
 
 export default rootReducer;
diff --git a/src/components/Commons/Select/Select.jsx b/src/components/Commons/Select/Select.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
 import MenuItem from '@mui/material/MenuItem';
@@ -7,7 +7,7 @@ import FormHelperText from '@mui/material/FormHelperText';
 import InputLabel from '@mui/material/InputLabel';
 import SelectMUI from '@mui/material/Select';
 
-const Select = (props) => {
+const Select = forwardRef((props, ref) => {
     const {
         helperText,
         options,
@@ -20,22 +20,32 @@ const Select = (props) => {
         name,
         fullWidth,
         width,
+        children,
         ...otherProps
     } = props;
     return (
         <FormControl variant="filled" sx={{ my: 1, width }} fullWidth={fullWidth} disabled={disabled}>
             <InputLabel id={id}>{label}</InputLabel>
-            <SelectMUI labelId={id} value={value} onChange={onChange} multiple={multiple} name={name} {...otherProps}>
-                {options?.map((option) => (
-                    <MenuItem key={option} value={option}>
-                        {option}
-                    </MenuItem>
-                ))}
+            <SelectMUI
+                labelId={id}
+                value={value}
+                onChange={onChange}
+                multiple={multiple}
+                name={name}
+                {...otherProps}
+                ref={ref}
+            >
+                {children ||
+                    options?.map((option) => (
+                        <MenuItem key={option} value={option}>
+                            {option}
+                        </MenuItem>
+                    ))}
             </SelectMUI>
             {!!helperText && <FormHelperText>{helperText}</FormHelperText>}
         </FormControl>
     );
-};
+});
 
 Select.propTypes = {
     onChange: PropTypes.func.isRequired,
@@ -44,11 +54,12 @@ Select.propTypes = {
     disabled: PropTypes.bool,
     id: PropTypes.string.isRequired,
     helperText: PropTypes.string,
-    options: PropTypes.arrayOf(PropTypes.string).isRequired,
+    options: PropTypes.arrayOf(PropTypes.string),
     label: PropTypes.string.isRequired,
     fullWidth: PropTypes.bool,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), PropTypes.number]),
     width: PropTypes.number,
+    children: PropTypes.node,
 };
 
 Select.defaultProps = {
@@ -58,6 +69,8 @@ Select.defaultProps = {
     value: '',
     fullWidth: true,
     width: null,
+    children: null,
+    options: [],
 };
 
 export default Select;