Handle api error json (#18)

* Handle api error json

* Fix get vehicles error handling
Update .env.template

.env.template

@@ -1,2 +1,3 @@
 REACT_APP_AUTH_SERVICE_URL = https://dev-auth.fiskerdps.com
-REACT_APP_UPLOAD_SERVICE_URL = https://gw-dev.fiskerdps.com
+REACT_APP_UPLOAD_SERVICE_URL = https://gw-dev.fiskerdps.com
+REACT_APP_AUTH_CALLBACK_URL = https://dev-ota-admin.fiskerdps.com/

src/components/Contexts/UserContext.jsx

@@ -20,10 +20,7 @@ export const UserProvider = ({ children }) => {
 
   useEffect(() => {
     if (!token) return;
-    const {
-      idToken: { jwtToken },
-    } = token;
-    verifyToken(jwtToken);
+    verifyToken();
     return () => {
       if (timer) timer.terminate();
     };
@@ -57,15 +54,14 @@ export const UserProvider = ({ children }) => {
     timer.start(duration);
   };
 
-  const verifyToken = async (idToken) => {
+  const verifyToken = async () => {
     try {
+      const {
+        idToken: { jwtToken: idToken },
+      } = token;
       const result = await auth.verify(idToken);
 
-      if (
-        (!result.valid && !result.authenticated) ||
-        !token.idToken.payload ||
-        !token.idToken.payload.exp
-      ) {
+      if (!result && !result.valid) {
         const t = await refreshTokens();
         if (!isError(t)) return;
         signOut();
@@ -74,7 +70,8 @@ export const UserProvider = ({ children }) => {
 
       startSessionTimer();
     } catch (e) {
-      setError(e.message);
+      signOut();
+      setError(`Verify error. ${e.message}`);
     }
   };
 
@@ -126,7 +123,6 @@ export const UserProvider = ({ children }) => {
       setFetching(true);
       setError(null);
 
-      // eslint-disable-next-line
       result = await auth.refresh(value);
 
       if (result.message) {

src/components/Contexts/VehicleContext.jsx

@@ -24,10 +24,13 @@ export const VehicleProvider = ({ children }) => {
   const getVehicles = async (search, token) => {
     try {
       setBusy(true);
-      const {
-        data: { data },
-      } = await api.getVehicles(search, token);
-      setVehicles(data);
+      const result = await api.getVehicles(search, token);
+      if (result.error) {
+        setVehicles([]);
+        throw new Error(`Get vehicles error. ${result.message}`);
+      } else {
+        setVehicles(result.data);
+      }
     } finally {
       setBusy(false);
     }
@@ -37,7 +40,9 @@ export const VehicleProvider = ({ children }) => {
     try {
       setBusy(true);
       validateAdd(vehicle);
-      await api.addVehicle(vehicle, token);
+      const result = await api.addVehicle(vehicle, token);
+      if (result.error) throw new Error(`Add vehicle error. ${result.message}`);
+      return result;
     } finally {
       setBusy(false);
     }

src/components/Contexts/VehicleContext.test.jsx

@@ -131,12 +131,14 @@ describe("VehicleContext", () => {
   });
 });
 
-const expectedVehicleData = [
-  { vin: "3C4PDCBG0ET127145" },
-  { vin: "1G1FP87S3GN100062" },
-  { vin: "1HGCG325XYA062256" },
-  { vin: "1J4GZ78YXWC160024" },
-  { vin: "2C3CCAAG8CH222800" },
-  { vin: "KNADM4A39C6028108" },
-  { vin: "1G11C5SL9FF153507" },
-];
+const expectedVehicleData = {
+  data: [
+    { vin: "3C4PDCBG0ET127145" },
+    { vin: "1G1FP87S3GN100062" },
+    { vin: "1HGCG325XYA062256" },
+    { vin: "1J4GZ78YXWC160024" },
+    { vin: "2C3CCAAG8CH222800" },
+    { vin: "KNADM4A39C6028108" },
+    { vin: "1G11C5SL9FF153507" },
+  ],
+};

src/components/FileUploadForm/index.jsx

@@ -43,7 +43,6 @@ const FileUploadZone = ({ classes, token }) => {
         onChange={(files) => setFiles(files)}
         onDelete={(files) => setFiles(files)}
         onDropRejected={(files) => {
-          console.log("Rejected files", files);
           setMessage(`Rejected ${files[0].name} too large`);
         }}
       />

src/components/VehicleAddForm/index.jsx

@@ -24,9 +24,9 @@ const MainForm = () => {
         vin: vinEl.current.value,
       };
 
-      await addVehicle(formData, authToken);
+      const result = await addVehicle(formData, authToken);
 
-      setMessage(`Added ${vinEl.current.value}`);
+      setMessage(`Added ${result.vin}`);
       vinEl.current.value = "";
     } catch (e) {
       setMessage(e.message);

src/services/__mocks__/vehicles.js

@@ -11,7 +11,10 @@ const data = [
 
 const vehiclesAPI = {
   getVehicles: async (search, token) => { return { data: { data } }; },
-  addVehicle: async (vehicle, token) => { data.push(vehicle); },
+  addVehicle: async (vehicle, token) => { 
+    data.push(vehicle);
+    return vehicle;
+  },
 };
 
 export default vehiclesAPI;

src/services/auth.js

@@ -1,3 +1,5 @@
+import { fetchRespHandler } from "../utils/http";
+
 const AUTH_URL = process.env.REACT_APP_AUTH_SERVICE_URL || "https://gw-dev.fiskerdps.com/compute_auth";
 const CALLBACK_URL = process.env.REACT_APP_AUTH_CALLBACK_URL || "https://dev-ota-admin.fiskerdps.com";
 
@@ -13,7 +15,7 @@ const auth = {
       code,
       redirect: CALLBACK_URL,
     })
-  }).then((response) => response.json()),
+  }).then(fetchRespHandler),
 
   verify: (idToken) => fetch(`${AUTH_URL}/verify`, {
     method: "POST",
@@ -21,7 +23,7 @@ const auth = {
       "Content-Type": "application/json"
     },
     body: JSON.stringify({ token: idToken })
-  }).then((response) => response.json()),
+  }).then(fetchRespHandler),
 
   refresh: (refreshToken) => fetch(`${AUTH_URL}/refresh`, {
     method: "POST",
@@ -29,7 +31,7 @@ const auth = {
       "Content-Type": "application/json"
     },
     body: JSON.stringify({ refresh_token: refreshToken })
-  }).then((response) => response.json()),
+  }).then(fetchRespHandler),
 };
 
 export default auth;

src/services/vehicles.js

@@ -1,20 +1,20 @@
-import axios from 'axios';
+import { getAuthHeaderOptions, fetchRespHandler } from "../utils/http"
 
 const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL || "https://gw-dev.fiskerdps.com/ota_update";
 
-const getOptions = (token) => ({
-  headers: {
-    "Authorization": `Bearer ${token}`,
-  },
-});
-
 const vehiclesAPI = {
-  getVehicles: async (search, token) => {
-    return axios.get(`${API_ENDPOINT}/vehicles`, getOptions(token));
-  },
-  addVehicle: async (vehicle, token) => {
-    return axios.post(`${API_ENDPOINT}/vehicle`, vehicle, getOptions(token));
-  } 
+  addVehicle: async (vehicle, token) => fetch(`${API_ENDPOINT}/vehicle`, {
+    method: "POST",
+    headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
+    body: JSON.stringify(vehicle),
+  })
+    .then(fetchRespHandler),
+  getVehicles: async (search, token) => fetch(`${API_ENDPOINT}/vehicles`, {
+    method: "GET",
+    headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
+
+  })
+    .then(fetchRespHandler)
 };
 
 export default vehiclesAPI;

src/utils/http.js

@@ -0,0 +1,14 @@
+export const getAuthHeaderOptions = (token) => ({
+    "Authorization": `Bearer ${token}`,
+  });
+
+export const fetchRespHandler = (response) => {
+  if (response.ok) return response.json();
+
+  return response.text()
+    .then((text) => JSON.parse(text))
+    .catch((e) => ({
+      error: response.statusText,
+      message: `${response.status} ${response.statusText}`,
+    }))
+}