Merge branch 'develop' of github.com:Platzi-Master-C8/gethired-jobpla…

…cement-salaries-frontend into develop

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)

src/app/CalculateSalary/slice.js

@@ -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);

src/app/ListData/selectors.js

@@ -29,3 +29,13 @@ 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,
+);

src/app/ListData/slice.js

@@ -29,10 +29,22 @@ const dataSlice = createSlice({
             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';
         },
     },
 });

src/components/Commons/Select/Select.jsx

@@ -57,7 +57,7 @@ Select.propTypes = {
     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,
 };

src/components/Currencies/Currencies.jsx

@@ -1,38 +1,53 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import { Autocomplete, TextField } from '@mui/material';
+import Skeleton from '@mui/material/Skeleton';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
 
 import { changeCurrency } from 'App/CalculateSalary/slice';
 import { selectCurrency } from 'App/CalculateSalary/selectors';
 
-import { selectListCurrencies } from 'App/ListData/selectors';
+import { selectListCurrencies, selectLoading, selectError } from 'App/ListData/selectors';
 
-const Currencies = ({ handleCurrency, currency, listCurrencies }) => {
+const Currencies = ({ handleCurrency, currency, listCurrencies, error, loading }) => {
     const handleCurrencies = (_, values) => handleCurrency(values);
-
+    if (error) return null;
     return (
-        <Autocomplete
-            value={currency}
-            disableClearable
-            options={listCurrencies}
-            onChange={handleCurrencies}
-            isOptionEqualToValue={(option, value) => option === value}
-            renderInput={(params) => <TextField {...params} variant="filled" label="Selected currency" />}
-        />
+        <Fragment>
+            {loading && !error && <Skeleton variant="rectangular" height={56} />}
+            {!loading && (
+                <Autocomplete
+                    value={currency}
+                    disableClearable
+                    options={listCurrencies}
+                    onChange={handleCurrencies}
+                    isOptionEqualToValue={(option, value) => option === value}
+                    renderInput={(params) => <TextField {...params} variant="filled" label="Selected currency" />}
+                />
+            )}
+        </Fragment>
     );
 };
 
+Currencies.defaultProps = {
+    error: null,
+};
+
 Currencies.propTypes = {
     handleCurrency: PropTypes.func.isRequired,
     currency: PropTypes.string.isRequired,
     listCurrencies: PropTypes.arrayOf(PropTypes.string).isRequired,
+    error: PropTypes.string,
+    loading: PropTypes.bool.isRequired,
 };
 
 const mapStateToProps = (state) => ({
     currency: selectCurrency(state),
     listCurrencies: selectListCurrencies(state),
+    loading: selectLoading(state),
+    error: selectError(state),
 });
 
 const mapDispatchToProps = (dispatch) => ({