From 10f44acc9b4cda1dcc1b624f683ddda8b503606b Mon Sep 17 00:00:00 2001
From: Ivo Evans <ievans.storrie@gmail.com>
Date: Tue, 1 Sep 2020 18:14:58 +0100
Subject: [PATCH] fix(charts): Add error handling Relates #81

---
 src/components/careerPath/charts/charts/Abilities.tsx      | 6 +++++-
 src/components/careerPath/charts/charts/EstimatedPay.tsx   | 5 ++++-
 .../careerPath/charts/charts/WorkingFuturesPrediction.tsx  | 6 ++++--
 .../charts/charts/WorkingFuturesReplacementDemand.tsx      | 7 ++++++-
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/careerPath/charts/charts/Abilities.tsx b/src/components/careerPath/charts/charts/Abilities.tsx
index d5f981e..1c6081d 100644
--- 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
index 8aa11be..ea554cf 100644
--- 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
index dfc5ef6..6b2f7e2 100644
--- 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
index 2f17483..7b249db 100644
--- 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)}