feat: add error routing

Author: Angular2Guy

frontend/app/main/main.tsx

@@ -71,15 +71,15 @@ export default function Main() {
   }
 
   const fetchSearchLocation = async (jwtToken: string) => {
-    const result = await fetchGasStations(jwtToken, controller, globalUserDataState);
+    const result = await fetchGasStations(navigate, jwtToken, controller, globalUserDataState);
     const myResult = result.filter(value => value?.GasPrices?.length > 0).map(value => {
       return value;
     }).map(value => ({
       location: value.Place + ' ' + value.Brand + ' ' + value.Street + ' ' + value.HouseNumber, e5: value.GasPrices[0].E5,
       e10: value.GasPrices[0].E10, diesel: value.GasPrices[0].Diesel, date: new Date(Date.parse(value.GasPrices[0].Date)), longitude: value.Longitude, latitude: value.Latitude
     } as TableDataRow));
     const myPostcode = formatPostCode(globalUserDataState.PostCode);
-    const myJson = await fetchPriceAvgs(jwtToken, controller, myPostcode);
+    const myJson = await fetchPriceAvgs(navigate, jwtToken, controller, myPostcode);
     const rowCounty = ({
       location: myJson.County, e5: Math.round(myJson.CountyAvgE5), e10: Math.round(myJson.CountyAvgE10), diesel: Math.round(myJson.CountyAvgDiesel), date: new Date(), longitude: 0, latitude: 0
     } as TableDataRow);
@@ -93,7 +93,7 @@ export default function Main() {
   }
 
   const fetchLastMatches = async (jwtToken: string) => {
-    const myResult = await fetchUserNotifications(jwtToken, controller, globalUserUuidState);    
+    const myResult = await fetchUserNotifications(navigate, jwtToken, controller, globalUserUuidState);
     //console.log(myJson);
     const result2 = myResult?.map(value => {
       //console.log(JSON.parse(value?.DataJson));
@@ -108,7 +108,7 @@ export default function Main() {
     setRows(result2);
     //const result     
     const myPostcode = formatPostCode(globalUserDataState.PostCode);
-    const myJson1 = await fetchTimeSlots(jwtToken, controller, myPostcode);
+    const myJson1 = await fetchTimeSlots(navigate, jwtToken, controller, myPostcode);
     const timeSlots = [] as TimeSlot[];
     timeSlots.push(...myJson1.filter(myValue => myValue.AvgDiesel > 10).map(myValue => {
       const dieselTimeSlot = { x: '00.00', diesel: 0, e10: 0, e5: 0 } as TimeSlot;

frontend/app/service/http-client.ts

@@ -17,62 +17,70 @@ import { type PostCodeLocation } from "../model/location";
 import { type TimeSlotResponse } from "../model/time-slot-response";
 import { type UserRequest, type UserResponse } from "../model/user";
 import { type Notification } from "../model/notification";
+import type { NavigateFunction } from "react-router";
 
 const apiPrefix = '/api';
 
-const fetchGasStations = async function (jwtToken: string, controller: AbortController | null, globalUserDataState: UserDataState): Promise<GasStation[]> {
+async function handleResponse<T>(response: Response,navigate: NavigateFunction): Promise<T> {
+  if (!response.ok) {
+    const error = await response.text();
+    if(navigate) navigate('/');
+    throw new Error(error || `HTTP error! status: ${response.status}`);
+  }
+  return response.json();
+}
+
+const fetchGasStations = async function (navigate: NavigateFunction, jwtToken: string, controller: AbortController | null, globalUserDataState: UserDataState): Promise<GasStation[]> {
   const requestOptions2 = {
     method: 'POST',
     headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${jwtToken}` },
     body: JSON.stringify({ Longitude: globalUserDataState.Longitude, Latitude: globalUserDataState.Latitude, Radius: globalUserDataState.SearchRadius }),
     signal: controller?.signal
   }
   const result = await fetch(`${apiPrefix}/gasstation/search/location`, requestOptions2);
-  const myResult = result.json() as Promise<GasStation[]>;
-  return myResult;
+  return handleResponse<GasStation[]>(result,navigate);
 };
 
-const fetchPriceAvgs = async function (jwtToken: string, controller: AbortController | null, myPostcode: string): Promise<GasPriceAvgs> {
+const fetchPriceAvgs = async function (navigate: NavigateFunction, jwtToken: string, controller: AbortController | null, myPostcode: string): Promise<GasPriceAvgs> {
   const requestOptions3 = {
     method: 'GET',
     headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${jwtToken}` },
     signal: controller?.signal
   }
   const result = await fetch(`${apiPrefix}/gasprice/avgs/${myPostcode}`, requestOptions3);
-  return result.json() as Promise<GasPriceAvgs>;
+  return handleResponse<GasPriceAvgs>(result,navigate);
 }
 
-const fetchUserNotifications = async function (jwtToken: string, controller: AbortController | null, globalUserUuidState: string): Promise<Notification[]> {
+const fetchUserNotifications = async function (navigate: NavigateFunction, jwtToken: string, controller: AbortController | null, globalUserUuidState: string): Promise<Notification[]> {
   const requestOptions1 = {
     method: 'GET',
     headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${jwtToken}` },
     signal: controller?.signal
   }
   const result = await fetch(`${apiPrefix}/usernotification/current/${globalUserUuidState}`, requestOptions1);
-  return result.json() as Promise<Notification[]>;
+  return handleResponse<Notification[]>(result,navigate);
 }
 
-const fetchTimeSlots = async function (jwtToken: string, controller: AbortController | null, myPostcode: string): Promise<TimeSlotResponse[]> {
+const fetchTimeSlots = async function (navigate: NavigateFunction, jwtToken: string, controller: AbortController | null, myPostcode: string): Promise<TimeSlotResponse[]> {
   const requestOptions2 = {
     method: 'GET',
     headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${jwtToken}` },
     signal: controller?.signal
   }
   const result = await fetch(`${apiPrefix}/postcode/countytimeslots/${myPostcode}`, requestOptions2);
-  const myResult = result.json() as Promise<TimeSlotResponse[]>;
-  return myResult;
+  return handleResponse<TimeSlotResponse[]>(result,navigate);
 }
 
 const postLogin = async function (userName: string, password1: string, controller: AbortController | null): Promise<UserResponse> {
   const requestOptions = loginSigninOptions(userName, password1, controller);
   const result = await fetch(`${apiPrefix}/appuser/login`, requestOptions);
-  return result.json() as Promise<UserResponse>;
+  return handleResponse<UserResponse>(result, null as unknown as NavigateFunction);
 }
 
 const postSignin = async function (userName: string, password1: string, controller: AbortController | null): Promise<UserResponse> {
   const requestOptions = loginSigninOptions(userName, password1, controller);
   const result = await fetch(`${apiPrefix}/appuser/signin`, requestOptions);
-  return result.json() as Promise<UserResponse>;
+  return handleResponse<UserResponse>(result, null as unknown as NavigateFunction);
 }
 
 const loginSigninOptions = (userName: string, password1: string, controller: AbortController | null) => {
@@ -84,39 +92,36 @@ const loginSigninOptions = (userName: string, password1: string, controller: Abo
   };
 };
 
-const postLocationRadius = async function (jwtToken: string, controller: AbortController | null, requestString: string): Promise<UserResponse> {
+const postLocationRadius = async function (navigate: NavigateFunction, jwtToken: string, controller: AbortController | null, requestString: string): Promise<UserResponse> {
   const requestOptions = {
     method: 'POST',
     headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${jwtToken}` },
     body: requestString,
     signal: controller?.signal
   };
   const response = await fetch(`${apiPrefix}/appuser/locationradius`, requestOptions);
-  const userResponse = response.json() as UserResponse;
-  return userResponse;
+  return handleResponse<UserResponse>(response,navigate);
 }
 
-const fetchLocation = async function (jwtToken: string, controller: AbortController | null, location: string): Promise<PostCodeLocation[]> {
+const fetchLocation = async function (navigate: NavigateFunction, jwtToken: string, controller: AbortController | null, location: string): Promise<PostCodeLocation[]> {
   const requestOptions = {
     method: 'GET',
     headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${jwtToken}` },
     signal: controller?.signal
   };
   const response = await fetch(`${apiPrefix}/appuser/location?location=${location}`, requestOptions);
-  const locations = response.json() as Promise<PostCodeLocation[]>;
-  return locations;
+  return handleResponse<PostCodeLocation[]>(response,navigate);
 }
 
-const postTargetPrices = async function (jwtToken: string, controller: AbortController | null, requestString: string): Promise<UserResponse> {
+const postTargetPrices = async function (navigate: NavigateFunction, jwtToken: string, controller: AbortController | null, requestString: string): Promise<UserResponse> {
   const requestOptions = {
     method: 'POST',
     headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${jwtToken}` },
     body: requestString,
     signal: controller?.signal
   };
   const response = await fetch(`${apiPrefix}/appuser/targetprices`, requestOptions);
-  const result = response.json() as Promise<UserResponse>;
-  return result;
+  return handleResponse<UserResponse>(response,navigate);
 }
 
 export { fetchGasStations };

frontend/app/target-price-modal/target-price-modal.tsx

@@ -18,11 +18,13 @@ import { postTargetPrices } from "../service/http-client";
 import { type UserRequest } from "../model/user";
 import { useAtom } from 'jotai';
 import { useTranslation } from 'node_modules/react-i18next';
+import { useNavigate } from 'react-router';
 
 
 const TargetPriceModal = () => {
     let controller: AbortController | null = null;
     const { t } = useTranslation();
+    const navigate = useNavigate();
     const [targetDiesel, setTargetDiesel] = useState('0');
     const [targetE5, setTargetE5] = useState('0');
     const [targetE10, setTargetE10] = useState('0');
@@ -71,7 +73,7 @@ const TargetPriceModal = () => {
         const myE10 = updatePrice(targetE10);
         controller = new AbortController();
         const requestString = JSON.stringify({ Username: globalUserNameState, Password: '', TargetDiesel: myDiesel, TargetE10: myE10, TargetE5: myE5 } as UserRequest);
-        const result = await postTargetPrices(globalJwtTokenState, controller, requestString);
+        const result = await postTargetPrices(navigate, globalJwtTokenState, controller, requestString);
         controller = null;
         setGlobalUserDataState({
             Latitude: globalUserDataState.Latitude, Longitude: globalUserDataState.Longitude, SearchRadius: globalUserDataState.SearchRadius, PostCode: globalUserDataState.PostCode,