Merge pull request #35 from apuc/authentication

redirect to auth

src/components/Candidate/Candidate.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { useHistory, useParams, Link } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
-import { currentCandidate, selectCurrentCandidate } from '../../redux/outstaffingSlice';
+import { currentCandidate, selectCurrentCandidate, auth } from '../../redux/outstaffingSlice';
 import arrow from '../../images/right-arrow.png';
 import rectangle from '../../images/rectangle_secondPage.png';
 import Sidebar from '../Sidebar/Sidebar';
@@ -26,7 +26,7 @@ const Candidate = () => {
   }, [])
 
   useEffect(() => {
-    fetchItemsForId({ link: `${process.env.REACT_APP_API_URL}/api/profile/`, index:Number(candidateId), history, role }).then((el) =>
+    fetchItemsForId({ link: `${process.env.REACT_APP_API_URL}/api/profile/`, index:Number(candidateId), history, role, logout: dispatch(auth(false)) }).then((el) =>
       dispatch(currentCandidate(el))
     );
   }, [dispatch, candidateId]);

src/components/Description/Description.js

@@ -4,13 +4,14 @@ import male from '../../images/medium_male.png';
 import rectangle from '../../images/rectangle_secondPage.png';
 import { Link, useHistory } from 'react-router-dom';
 import { LEVELS, SKILLS } from '../constants/constants';
-import { selectProfiles, selectFilteredCandidates, selectItems } from '../../redux/outstaffingSlice';
+import { selectProfiles, selectFilteredCandidates, selectItems, auth } from '../../redux/outstaffingSlice';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { fetchProfile } from '../../server/server';
 import { Loader } from '../Loader/Loader';
 import { getRole } from '../../redux/roleSlice';
 
 const Description = ({ onLoadMore, isLoadingMore }) => {
+  const dispatch = useDispatch();
   const [isLoaded, setIsLoaded] = useState(false);
   const history = useHistory();
   const role = useSelector(getRole)
@@ -20,7 +21,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
   const [allCandidates, getAllCandidates] = useState([]);
 
   useEffect(() => {
-    fetchProfile({ link: `${process.env.REACT_APP_API_URL}/api/profile?limit=`, index: 1000, history, role }).then((p) => {
+    fetchProfile({ link: `${process.env.REACT_APP_API_URL}/api/profile?limit=`, index: 1000, history, role, logout: dispatch(auth(false)) }).then((p) => {
       getAllCandidates(p);
       setIsLoaded(true);
     });
@@ -32,7 +33,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
         <div className="container">
           <div className={style.description__wrapper}>
           {
-            candidatesListArr.length > 0 ? candidatesListArr.map((el) => (
+            candidatesListArr && candidatesListArr.length > 0 ? candidatesListArr.map((el) => (
               <div className="row" key={el.id}>
                 <div className="col-2">
                   <img className={style.description__img} src={el.photo} alt="" />

src/components/Form/Form.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import style from './Form.module.css';
 import { fetchForm } from '../../server/server';
+import { auth } from '../../redux/outstaffingSlice';
 import { useHistory, useParams, Redirect } from 'react-router-dom';
 import PhoneInput from 'react-phone-input-2'
 import 'react-phone-input-2/lib/style.css'
@@ -8,12 +9,13 @@ import './form.css';
 
 import { withSwalInstance } from 'sweetalert2-react';
 import swal from 'sweetalert2';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { getRole } from '../../redux/roleSlice';
  
 const SweetAlert = withSwalInstance(swal);
 
 const Form = () => {
+  const dispatch = useDispatch();
   const history = useHistory();
   const role = useSelector(getRole);
   const urlParams = useParams();
@@ -45,7 +47,7 @@ const Form = () => {
     fetchForm({ link: `${process.env.REACT_APP_API_URL}/api/profile/add-to-interview`, index: {
       profile_id: urlParams.id,
       ...data,
-    }, history, role }).then( (res)=>  res.json()
+    }, history, role, logout: dispatch(auth(false))  }).then( (res)=>  res.json()
       .then( resJSON => setStatus(resJSON))
     )
   };

src/components/Home/Home.js

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import Outstaffing from '../Outstaffing/Outstaffing';
 import Description from '../Description/Description';
 import { fetchProfile, fetchSkills } from '../../server/server';
-import { profiles, tags } from '../../redux/outstaffingSlice';
+import { profiles, tags, auth } from '../../redux/outstaffingSlice';
 import { getRole } from '../../redux/roleSlice';
 import { Footer } from '../Footer/Footer';
 import { useHistory } from 'react-router-dom';
@@ -18,12 +18,13 @@ const Home = () => {
 
   useEffect(() => {
     setIsLoadingMore(true);
-    fetchProfile({ link:`${process.env.REACT_APP_API_URL}/api/profile?limit=`, index, history, role}).then((profileArr) => {
+    fetchProfile({ link:`${process.env.REACT_APP_API_URL}/api/profile?limit=`, index, history, role, logout: dispatch(auth(false)) }).then((profileArr) => {
       dispatch(profiles(profileArr));
       setIsLoadingMore(false);
     });
 
-    fetchSkills({ link: `${process.env.REACT_APP_API_URL}/api/skills/skills-on-main-page`, history, role}).then((skills) => {
+    fetchSkills({ link: `${process.env.REACT_APP_API_URL}/api/skills/skills-on-main-page`, history, role, logout: dispatch(auth(false)) }).then((skills) => {
+      if(!skills) { return [] }
       const keys = Object.keys(skills);
       const values = Object.values(skills);
 

src/components/Outstaffing/OutstaffingBlock.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import OutsideClickHandler from 'react-outside-click-handler';
 import { useDispatch, useSelector } from 'react-redux';
-import { selectItems, selectedItems, filteredCandidates } from '../../redux/outstaffingSlice';
+import { selectItems, selectedItems, filteredCandidates, auth } from '../../redux/outstaffingSlice';
 import { fetchItemsForId } from '../../server/server';
 import style from './Outstaffing.module.css';
 
@@ -11,14 +11,14 @@ import { getRole } from '../../redux/roleSlice';
 
 const handlePositionClick = ({dispatch, positionId, isSelected, onSelect, history, role}) => {
   if(isSelected) {
-    fetchProfile({ link: `${process.env.REACT_APP_API_URL}/api/profile?limit=`, index: 4, history, role }).then((profileArr) => {
+    fetchProfile({ link: `${process.env.REACT_APP_API_URL}/api/profile?limit=`, index: 4, history, role, logout: dispatch(auth(false))  }).then((profileArr) => {
       dispatch(filteredCandidates(profileArr));
       dispatch(selectedItems([]));
       onSelect(positionId);
     }
     );
   } else {
-    fetchItemsForId({ link: `${process.env.REACT_APP_API_URL}/api/profile?position_id=`, index: positionId, history, role, }).then((el) => {
+    fetchItemsForId({ link: `${process.env.REACT_APP_API_URL}/api/profile?position_id=`, index: positionId, history, role, logout: dispatch(auth(false))  }).then((el) => {
       dispatch(filteredCandidates(el));
       dispatch(selectedItems([]));
       onSelect(positionId);

src/components/Select/TagSelect.js

@@ -3,7 +3,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import Select from 'react-select';
 import { Loader } from '../Loader/Loader';
 import style from './TagSelect.module.css';
-import { selectedItems, selectItems, selectTags, filteredCandidates, setPositionId } from '../../redux/outstaffingSlice';
+import { selectedItems, selectItems, selectTags, filteredCandidates, setPositionId, auth } from '../../redux/outstaffingSlice';
 import { fetchItemsForId } from '../../server/server';
 import { useHistory } from 'react-router-dom';
 import { getRole } from '../../redux/roleSlice';
@@ -24,7 +24,7 @@ const TagSelect = () => {
     dispatch(setPositionId(null));
     const filterItemsId = itemsArr.map((item) => item.id).join();
 
-    fetchItemsForId({ link: `${process.env.REACT_APP_API_URL}/api/profile?skills=`, index: filterItemsId, history, role, }).then((el) => {
+    fetchItemsForId({ link: `${process.env.REACT_APP_API_URL}/api/profile?skills=`, index: filterItemsId, history, role, logout: dispatch(auth(false))  }).then((el) => {
       dispatch(filteredCandidates(el))
       setSearchLoading(false)
     });

src/pages/FormPage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useParams, Link } from 'react-router-dom';
-import { currentCandidate, selectCurrentCandidate } from '../redux/outstaffingSlice';
+import { currentCandidate, selectCurrentCandidate, auth } from '../redux/outstaffingSlice';
 import SVG from 'react-inlinesvg';
 import { WithLogout } from '../hoc/withLogout';
 import Form from '../components/Form/Form';
@@ -28,7 +28,7 @@ const FormPage = () => {
     const role = useSelector(getRole);
 
     if(!candidate.id) {
-        fetchItemsForId({ link: `${process.env.REACT_APP_API_URL}/api/profile/`, index: Number(params.id), history, role, }).then((el) =>
+        fetchItemsForId({ link: `${process.env.REACT_APP_API_URL}/api/profile/`, index: Number(params.id), history, role, logout: dispatch(auth(false))  }).then((el) =>
             dispatch(currentCandidate(el))
         );
     }

src/server/authRedirect.js

@@ -1,15 +1,17 @@
-export const withAuthRedirect = actionCall => ({link, index, history, role}) => {
+export const withAuthRedirect = actionCall => ({link, index, history, role, logout}) => {
     return actionCall(link, index)
         .then(res => {
             if(res.status && res.status == 401) {
                 localStorage.clear();
-                history.push(role === 'ROLE_DEV' ? '/authdev' : '/auth') 
+                logout();
+                history.push(role === 'ROLE_DEV' ? '/authdev' : '/auth') ;
             }
 
             return res;
         })
         .catch(err => { 
             localStorage.clear();
+            logout();
             history.push(role === 'ROLE_DEV' ? '/authdev' : '/auth');
         })
 }

src/server/server.js

@@ -13,7 +13,9 @@ export const fetchProfile = withAuthRedirect(async (link, index) => {
     let data = await response.json()
 
     return data
-  } catch (error) {}
+  } catch (error) {
+    console.log('Query error', error)
+  }
 })
 
 export const fetchSkills = withAuthRedirect(async (link) => {
@@ -29,7 +31,9 @@ export const fetchSkills = withAuthRedirect(async (link) => {
     let data = await response.json()
 
     return data
-  } catch (error) {}
+  } catch (error) {
+    console.log('Query error', error)
+  }
 })
 
 export const fetchItemsForId = withAuthRedirect(async (link, id) => {
@@ -46,7 +50,9 @@ export const fetchItemsForId = withAuthRedirect(async (link, id) => {
     let data = await response.json()
 
     return data
-  } catch (error) {}
+  } catch (error) {
+    console.log('Query error', error)
+  }
 })
 
 export const fetchForm = withAuthRedirect(async (link, info) => {
@@ -63,7 +69,9 @@ export const fetchForm = withAuthRedirect(async (link, info) => {
     })
 
     return response
-  } catch (error) {}
+  } catch (error) {
+    console.log('Query error', error)
+  }
 })
 
 export const fetchAuth = async ({ username, password, dispatch, catchError }) => {