Infinite FETCH_STTS (#2720)

* - Updated request to execute 5 times before throwing error

* - Adding error modal when stt list is empty

* - Not defaulting to show error modal

* - Updated to use redux state instead of component state for request counting

* - Simplifying if block

* - Updated to use our pre-built modal instead of re-inventing the wheel

tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx

@@ -1,8 +1,10 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { useDispatch, useSelector } from 'react-redux'
 import { fetchSttList } from '../../actions/sttList'
 import ComboBox from '../ComboBox'
+import Button from '../Button'
+import Modal from '../Modal'
 
 /**
  * @param {function} selectStt - Function to reference and change the
@@ -12,36 +14,72 @@ import ComboBox from '../ComboBox'
  * @param {function} handleBlur - Runs on blur of combo box element.
  * @param {function} error - Reference to stt errors object.
  */
+
 function STTComboBox({ selectStt, selectedStt, handleBlur, error }) {
-  const sttList = useSelector((state) => state?.stts?.sttList)
+  const sttListRequest = useSelector((state) => state?.stts)
   const dispatch = useDispatch()
+  const [numTries, setNumTries] = useState(0)
+  const [reachedMaxTries, setReachedMaxTries] = useState(false)
 
   useEffect(() => {
-    if (sttList.length === 0) {
+    if (
+      sttListRequest.sttList.length === 0 &&
+      numTries <= 3 &&
+      !sttListRequest.loading
+    ) {
       dispatch(fetchSttList())
+      setNumTries(numTries + 1)
+    } else if (
+      sttListRequest.sttList.length === 0 &&
+      numTries > 3 &&
+      !reachedMaxTries
+    ) {
+      setReachedMaxTries(true)
     }
-  }, [dispatch, sttList])
+  }, [dispatch, sttListRequest.sttList, numTries, reachedMaxTries])
+
+  const modalRef = useRef()
+  const headerRef = useRef()
+  const onSignOut = () => {
+    window.location.href = `${process.env.REACT_APP_BACKEND_URL}/logout/oidc`
+  }
 
   return (
-    <ComboBox
-      name="stt"
-      label="Associated State, Tribe, or Territory*"
-      error={error ? 'A state, tribe, or territory is required' : undefined}
-      handleSelect={selectStt}
-      selected={selectedStt}
-      handleBlur={handleBlur}
-      placeholder="- Select or Search -"
-      aria-required="true"
-    >
-      <option value="" disabled hidden>
-        - Select or Search -
-      </option>
-      {sttList.map((stt) => (
-        <option className="sttOption" key={stt.id} value={stt.name}>
-          {stt.name}
+    <>
+      <ComboBox
+        name="stt"
+        label="Associated State, Tribe, or Territory*"
+        error={error ? 'A state, tribe, or territory is required' : undefined}
+        handleSelect={selectStt}
+        selected={selectedStt}
+        handleBlur={handleBlur}
+        placeholder="- Select or Search -"
+        aria-required="true"
+      >
+        <option value="" disabled hidden>
+          - Select or Search -
         </option>
-      ))}
-    </ComboBox>
+        {sttListRequest.sttList.map((stt) => (
+          <option className="sttOption" key={stt.id} value={stt.name}>
+            {stt.name}
+          </option>
+        ))}
+      </ComboBox>
+      <Modal
+        title="TDP systems are currently experiencing technical difficulties."
+        message="Please sign out and try signing in again. If the issue persists contact support at [email protected]."
+        isVisible={reachedMaxTries}
+        buttons={[
+          {
+            key: '1',
+            text: 'Sign Out Now',
+            onClick: () => {
+              onSignOut()
+            },
+          },
+        ]}
+      />
+    </>
   )
 }