More consistent handling of errors and invalid/expired sessions

src/components/forms/AccountForm.js

@@ -49,20 +49,19 @@ const AccountForm = props => {
   const [ accountSid, setAccountSid ] = useState('');
   const [ serviceProviderSid, setServiceProviderSid ] = useState('');
 
-  useEffect(() => {
-    if (!localStorage.getItem('token')) {
-      history.push('/');
-      dispatch({
-        type: 'ADD',
-        level: 'error',
-        message: 'You must log in to view that page.',
-      });
-    }
-  }, [history, dispatch]);
-
   useEffect(() => {
     const getAccounts = async () => {
       try {
+        if (!localStorage.getItem('token')) {
+          history.push('/');
+          dispatch({
+            type: 'ADD',
+            level: 'error',
+            message: 'You must log in to view that page.',
+          });
+          return;
+        }
+
         const accountsResponse = await axios({
           method: 'get',
           baseURL: process.env.REACT_APP_API_BASE_URL,
@@ -120,12 +119,29 @@ const AccountForm = props => {
         setShowLoader(false);
 
       } catch (err) {
-        setErrorMessage((err.response && err.response.data && err.response.data.msg) || 'Something went wrong, please try again');
-        console.log(err.response || err);
+        if (err.response && err.response.status === 401) {
+          localStorage.removeItem('token');
+          sessionStorage.clear();
+          history.push('/');
+          dispatch({
+            type: 'ADD',
+            level: 'error',
+            message: 'Your session has expired. Please log in and try again.',
+          });
+        } else {
+          dispatch({
+            type: 'ADD',
+            level: 'error',
+            message: (err.response && err.response.data && err.response.data.msg) || 'Something went wrong, please try again.',
+          });
+          console.log(err.response || err);
+        }
+        setShowLoader(false);
       }
     };
     getAccounts();
-  }, [props.account_sid, props.type, dispatch, history]);
+    // eslint-disable-next-line
+  }, []);
 
   useEffect(() => {
     if (props.type === 'add') {
@@ -141,13 +157,29 @@ const AccountForm = props => {
           });
           setServiceProviderSid(serviceProviders.data[0].service_provider_sid);
         } catch (err) {
-          setErrorMessage((err.response && err.response.data && err.response.data.msg) || 'Something went wrong, please try again');
-          console.log(err.response || err);
+          if (err.response && err.response.status === 401) {
+            localStorage.removeItem('token');
+            sessionStorage.clear();
+            history.push('/');
+            dispatch({
+              type: 'ADD',
+              level: 'error',
+              message: 'Your session has expired. Please log in and try again.',
+            });
+          } else {
+            dispatch({
+              type: 'ADD',
+              level: 'error',
+              message: (err.response && err.response.data && err.response.data.msg) || 'Something went wrong, please try again.',
+            });
+            console.log(err.response || err);
+          }
         }
       };
       getServiceProviders();
     }
-  }, [props.type]);
+    // eslint-disable-next-line
+  }, []);
 
   const handleSumit = async (e) => {
     try {
@@ -277,7 +309,7 @@ const AccountForm = props => {
           message: 'Your session has expired. Please log in and try again.',
         });
       } else {
-        setErrorMessage((err.response && err.response.data && err.response.data.msg) || 'Something went wrong, please try again');
+        setErrorMessage((err.response && err.response.data && err.response.data.msg) || 'Something went wrong, please try again.');
         console.log(err.response || err);
       }
     }

src/components/forms/ApplicationForm.js

@@ -70,23 +70,19 @@ const ApplicationForm = props => {
   const [ applicationSid, setApplicationSid ] = useState([]);
 
   // See if user logged in
-  useEffect(() => {
-    if (!localStorage.getItem('token')) {
-      history.push('/');
-      dispatch({
-        type: 'ADD',
-        level: 'error',
-        message: 'You must log in to view that page.',
-      });
-    }
-  }, [history, dispatch]);
-
-  // Get Account info
-  // Account SID needed for setup/add (when creating a new application
-  // Account list needed add/edit
   useEffect(() => {
     const getAPIData = async () => {
       try {
+        if (!localStorage.getItem('token')) {
+          history.push('/');
+          dispatch({
+            type: 'ADD',
+            level: 'error',
+            message: 'You must log in to view that page.',
+          });
+          return;
+        }
+
         const accountsPromise = axios({
           method: 'get',
           baseURL: process.env.REACT_APP_API_BASE_URL,
@@ -194,13 +190,23 @@ const ApplicationForm = props => {
         }
         setShowLoader(false);
       } catch (err) {
-        setErrorMessage('Something went wrong, please try again');
-        dispatch({
-          type: 'ADD',
-          level: 'error',
-          message: (err.response && err.response.message) || 'Unable to get accounts',
-        });
-        console.log(err.response || err);
+        if (err.response && err.response.status === 401) {
+          localStorage.removeItem('token');
+          sessionStorage.clear();
+          history.push('/');
+          dispatch({
+            type: 'ADD',
+            level: 'error',
+            message: 'Your session has expired. Please log in and try again.',
+          });
+        } else {
+          dispatch({
+            type: 'ADD',
+            level: 'error',
+            message: (err.response && err.response.data && err.response.data.msg) || 'Unable to get accounts',
+          });
+          console.log(err.response || err);
+        }
         setShowLoader(false);
       }
     };
@@ -358,7 +364,7 @@ const ApplicationForm = props => {
       }
 
     } catch (err) {
-      if (err.response.status === 401) {
+      if (err.response && err.response.status === 401) {
         localStorage.removeItem('token');
         sessionStorage.clear();
         history.push('/');
@@ -368,7 +374,7 @@ const ApplicationForm = props => {
           message: 'Your session has expired. Please log in and try again.',
         });
       } else {
-        setErrorMessage((err.response && err.response.data && err.response.data.msg) || 'Something went wrong, please try again');
+        setErrorMessage((err.response && err.response.data && err.response.data.msg) || 'Something went wrong, please try again.');
         console.log(err.response || err);
       }
     }

src/components/forms/PhoneNumberForm.js

@@ -42,20 +42,19 @@ const PhoneNumberForm = props => {
   const [ errorMessage, setErrorMessage ] = useState('');
 
   // Check if user is logged in
-  useEffect(() => {
-    if (!localStorage.getItem('token')) {
-      history.push('/');
-      dispatch({
-        type: 'ADD',
-        level: 'error',
-        message: 'You must log in to view that page.',
-      });
-    }
-  }, [history, dispatch]);
-
   useEffect(() => {
     const getAPIData = async () => {
       try {
+        if (!localStorage.getItem('token')) {
+          history.push('/');
+          dispatch({
+            type: 'ADD',
+            level: 'error',
+            message: 'You must log in to view that page.',
+          });
+          return;
+        }
+
         const sipTrunksPromise = axios({
           method: 'get',
           baseURL: process.env.REACT_APP_API_BASE_URL,
@@ -160,12 +159,23 @@ const PhoneNumberForm = props => {
 
         setShowLoader(false);
       } catch (err) {
-        dispatch({
-          type: 'ADD',
-          level: 'error',
-          message: (err.response && err.response.data && err.response.data.msg) || 'Unable to get necessary data',
-        });
-        console.log(err.response || err);
+        if (err.response && err.response.status === 401) {
+          localStorage.removeItem('token');
+          sessionStorage.clear();
+          history.push('/');
+          dispatch({
+            type: 'ADD',
+            level: 'error',
+            message: 'Your session has expired. Please log in and try again.',
+          });
+        } else {
+          dispatch({
+            type: 'ADD',
+            level: 'error',
+            message: (err.response && err.response.data && err.response.data.msg) || 'Something went wrong, please try again.',
+          });
+          console.log(err.response || err);
+        }
         setShowLoader(false);
       }
     };
@@ -281,7 +291,7 @@ const PhoneNumberForm = props => {
     } catch (err) {
       setErrorMessage(
         (err.response && err.response.data && err.response.data.msg) ||
-        'Something went wrong, please try again'
+        'Something went wrong, please try again.'
       );
       console.log(err.response || err);
     }

src/components/forms/SipTrunkForm.js

@@ -48,91 +48,111 @@ const SipTrunkForm = props => {
   const [ showLoader,   setShowLoader   ] = useState(true);
   const [ errorMessage, setErrorMessage ] = useState('');
 
-  useEffect(() => {
-    if (!localStorage.getItem('token')) {
-      history.push('/');
-      dispatch({
-        type: 'ADD',
-        level: 'error',
-        message: 'You must log in to view that page.',
-      });
-    }
-  }, [history, dispatch]);
-
   useEffect(() => {
     const getAPIData = async () => {
-      const sipTrunksPromise = axios({
-        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
-        url: `/VoipCarriers`,
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem('token')}`,
-        },
-      });
-      const sipGatewaysPromise = axios({
-        method: 'get',
-        baseURL: process.env.REACT_APP_API_BASE_URL,
-        url: `/SipGateways`,
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem('token')}`,
-        },
-      });
-      const promiseAllValues = await Promise.all([
-        sipTrunksPromise,
-        sipGatewaysPromise,
-      ]);
-
-      const allSipTrunks   = promiseAllValues[0].data;
-      const allSipGateways = promiseAllValues[1].data;
-
-      setSipTrunks(allSipTrunks);
-
-      if (props.type === 'setup' && allSipTrunks.length > 1) {
-        history.push('/internal/sip-trunks');
+      if (!localStorage.getItem('token')) {
+        history.push('/');
         dispatch({
           type: 'ADD',
           level: 'error',
-          message: 'That page is only accessible during setup.',
+          message: 'You must log in to view that page.',
         });
+        return;
       }
+      try {
+        const sipTrunksPromise = axios({
+          method: 'get',
+          baseURL: process.env.REACT_APP_API_BASE_URL,
+          url: `/VoipCarriers`,
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('token')}`,
+          },
+        });
+        const sipGatewaysPromise = axios({
+          method: 'get',
+          baseURL: process.env.REACT_APP_API_BASE_URL,
+          url: `/SipGateways`,
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('token')}`,
+          },
+        });
+        const promiseAllValues = await Promise.all([
+          sipTrunksPromise,
+          sipGatewaysPromise,
+        ]);
 
-      if (props.type === 'edit' || props.type === 'setup') {
-        const currentSipTrunk = props.type === 'edit'
-          ? allSipTrunks.filter(s => s.voip_carrier_sid === props.voip_carrier_sid)
-          : allSipTrunks;
+        const allSipTrunks   = promiseAllValues[0].data;
+        const allSipGateways = promiseAllValues[1].data;
 
-        if (props.type === 'edit' && !currentSipTrunk.length) {
+        setSipTrunks(allSipTrunks);
+
+        if (props.type === 'setup' && allSipTrunks.length > 1) {
           history.push('/internal/sip-trunks');
           dispatch({
             type: 'ADD',
             level: 'error',
-            message: 'That SIP trunk does not exist.',
+            message: 'That page is only accessible during setup.',
           });
-          return;
         }
 
-        const currentSipGateways = allSipGateways.filter(s => {
-          return s.voip_carrier_sid === currentSipTrunk[0].voip_carrier_sid;
-        });
+        if (props.type === 'edit' || props.type === 'setup') {
+          const currentSipTrunk = props.type === 'edit'
+            ? allSipTrunks.filter(s => s.voip_carrier_sid === props.voip_carrier_sid)
+            : allSipTrunks;
 
-        if (currentSipTrunk.length) {
-          setName(currentSipTrunk[0].name);
-          setDescription(currentSipTrunk[0].description);
-          setSipGateways(currentSipGateways.map(s => ({
-            sip_gateway_sid: s.sip_gateway_sid,
-            ip: s.ipv4,
-            port: s.port,
-            inbound: s.inbound === 1,
-            outbound: s.outbound === 1,
-            invalidIp: false,
-            invalidPort: false,
-            invalidInbound: false,
-            invalidOutbound: false,
-          })));
-          setSipTrunkSid(currentSipTrunk[0].voip_carrier_sid);
+          if (props.type === 'edit' && !currentSipTrunk.length) {
+            history.push('/internal/sip-trunks');
+            dispatch({
+              type: 'ADD',
+              level: 'error',
+              message: 'That SIP trunk does not exist.',
+            });
+            return;
+          }
+
+          const currentSipGateways = allSipGateways.filter(s => {
+            return s.voip_carrier_sid === currentSipTrunk[0].voip_carrier_sid;
+          });
+
+          if (currentSipTrunk.length) {
+            setName(currentSipTrunk[0].name);
+            setDescription(currentSipTrunk[0].description);
+            setSipGateways(currentSipGateways.map(s => ({
+              sip_gateway_sid: s.sip_gateway_sid,
+              ip: s.ipv4,
+              port: s.port,
+              inbound: s.inbound === 1,
+              outbound: s.outbound === 1,
+              invalidIp: false,
+              invalidPort: false,
+              invalidInbound: false,
+              invalidOutbound: false,
+            })));
+            setSipTrunkSid(currentSipTrunk[0].voip_carrier_sid);
+          }
         }
+        setShowLoader(false);
+      } catch (err) {
+        if (err.response && err.response.status === 401) {
+          localStorage.removeItem('token');
+          sessionStorage.clear();
+          history.push('/');
+          dispatch({
+            type: 'ADD',
+            level: 'error',
+            message: 'Your session has expired. Please log in and try again.',
+          });
+        } else {
+          setErrorMessage('Something went wrong, please try again.');
+          dispatch({
+            type: 'ADD',
+            level: 'error',
+            message: (err.response && err.response.data && err.response.data.msg) || 'Unable to get accounts',
+          });
+          console.log(err.response || err);
+        }
+        setShowLoader(false);
       }
-      setShowLoader(false);
     };
     getAPIData();
     // eslint-disable-next-line
@@ -496,7 +516,7 @@ const SipTrunkForm = props => {
           message: 'Your session has expired. Please log in and try again.',
         });
       } else {
-        setErrorMessage((err.response && err.response.data && err.response.data.msg) || 'Something went wrong, please try again');
+        setErrorMessage((err.response && err.response.data && err.response.data.msg) || 'Something went wrong, please try again.');
         console.log(err.response || err);
       }
     }