fix(charts): Add error handling

Relates #81
tech-for-better · Sep 1, 2020 · 10f44ac · 10f44ac
1 parent bac4fb6
commit 10f44ac
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/src/components/careerPath/charts/charts/Abilities.tsx b/src/components/careerPath/charts/charts/Abilities.tsx
@@ -5,7 +5,7 @@ import correctVowelGrammar from '../../../../utils/correctVowelGrammar';
 
 const Abilities: React.FC<ONETChart> = ({ onetCode, name, color }) => {
   const [skills, setSkills] = useState(``);
-  const [, setError] = useState(false);
+  const [error, setError] = useState(false);
   const data = skills?.data?.scales[0]?.abilities;
   useONET({ onetCode, endpoint: `/abilities`, setter: setSkills, setError });
 
@@ -14,6 +14,10 @@ const Abilities: React.FC<ONETChart> = ({ onetCode, name, color }) => {
   }, 0);
 
   const upperBound = Math.round(highestValue) + 1;
+
+  if (error) {
+    return <></>;
+  }
   return (
     <>
       <h3>Average abilities of {correctVowelGrammar(name)}</h3>

diff --git a/src/components/careerPath/charts/charts/EstimatedPay.tsx b/src/components/careerPath/charts/charts/EstimatedPay.tsx
@@ -5,11 +5,14 @@ import correctVowelGrammar from '../../../../utils/correctVowelGrammar';
 
 const EstimatedPay: React.FC<SOCChart> = ({ soc, name, color }) => {
   const [estimatedPay, setEstimatedPay] = useState(``);
-  const [, setError] = useState(``);
+  const [error, setError] = useState(``);
 
   useSOC({ soc, endpoint: `/ashe/estimatePay`, setter: setEstimatedPay, setError });
 
   const data = estimatedPay?.data?.series;
+  if (error) {
+    return <></>;
+  }
   return (
     <>
       <h3>Average weekly pay for {correctVowelGrammar(name)}</h3>

diff --git a/src/components/careerPath/charts/charts/WorkingFuturesPrediction.tsx b/src/components/careerPath/charts/charts/WorkingFuturesPrediction.tsx
@@ -5,14 +5,16 @@ import correctVowelGrammar from '../../../../utils/correctVowelGrammar';
 
 const WorkingFuturesPrediction: React.FC<SOCChart> = ({ soc, name, color }) => {
   const [wfData, setWfData] = useState(``);
-  const [, setError] = useState(false);
+  const [error, setError] = useState(false);
   useSOC({ soc, endpoint: `/wf/predict`, setter: setWfData, setError });
   const data = wfData?.data?.predictedEmployment;
   const highestValue = data?.reduce((acc, el) => {
     return Math.max(acc, el.employment);
   }, 0);
   const upperBound = Math.round(highestValue / 10000) * 10000;
-
+  if (error) {
+    return <></>;
+  }
   return (
     <div>
       <h3>Predicted number of people working as {correctVowelGrammar(name)}</h3>

diff --git a/src/components/careerPath/charts/charts/WorkingFuturesReplacementDemand.tsx b/src/components/careerPath/charts/charts/WorkingFuturesReplacementDemand.tsx
@@ -4,12 +4,17 @@ import correctVowelGrammar from '../../../../utils/correctVowelGrammar';
 
 const WorkingFuturesReplacementDemand: React.FC<SOCChart> = ({ soc, name }) => {
   const [wfData, setWfData] = useState(``);
-  const [, setError] = useState(false);
+  const [error, setError] = useState(false);
 
   useSOC({ soc, endpoint: `/wf/replacement_demand`, setter: setWfData, setError });
 
+  if (error) {
+    return <></>;
+  }
+
   if (wfData) {
     const { start_year, end_year, rate } = wfData?.data;
+
     return (
       <p>
         Between {start_year} and {end_year} the rate of replacement for {correctVowelGrammar(name)}