fix: build

Author: Angular2Guy

frontend/src/components/LocationModal.tsx

@@ -16,17 +16,8 @@ import {UserDataState} from "../GlobalState";
 import { useMemo,useEffect,useState,FormEvent,ChangeEvent,SyntheticEvent } from "react";
 import {Box,TextField,Button,Dialog,DialogContent, Autocomplete} from '@mui/material';
 import styles from './modal.module.scss';
-import { UserRequest, UserResponse } from "../service/dtos";
-
-interface PostCodeLocation {
-    Message: string;
-	Longitude:  number;
-	Latitude:  number;
-	Label:      string;
-	PostCode:   number
-	SquareKM:   number;
-    Population: number;
-}
+import { PostCodeLocation, UserRequest, UserResponse } from "../service/dtos";
+import { fetchLocation, postLocationRadius } from "../service/http-client";
 
 const LocationModal = () => {
     let controller: AbortController | null = null;
@@ -53,14 +44,10 @@ const LocationModal = () => {
         if(!!controller) {
             controller.abort();
         }
+        controller = new AbortController();
         //console.log("Submit: ",event);
-        const requestOptions = {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${globalJwtTokenState}`},
-            body: JSON.stringify({Username: globalUserNameState, Password: '', Latitude: latitude, Longitude: longitude, SearchRadius: searchRadius, PostCode: parseInt(postCode)} as UserRequest)             
-        };
-        const response = await fetch('/appuser/locationradius', requestOptions);
-        const userResponse = response.json() as UserResponse;
+        const requestString = JSON.stringify({Username: globalUserNameState, Password: '', Latitude: latitude, Longitude: longitude, SearchRadius: searchRadius, PostCode: parseInt(postCode)} as UserRequest);
+        const userResponse = await postLocationRadius(globalJwtTokenState, controller, requestString);
         controller = null;
         setGlobalUserDataState({Latitude: userResponse.Latitude, Longitude: userResponse.Longitude, SearchRadius: userResponse.SearchRadius, PostCode: postCode.toString() || 0,
             TargetDiesel: globalUserDataState.TargetDiesel, TargetE10: globalUserDataState.TargetE10, TargetE5: globalUserDataState.TargetE5} as UserDataState);
@@ -76,14 +63,14 @@ const LocationModal = () => {
         if(!event?.currentTarget?.value) {
             setOptions([]);
             return;
-        }
-        const requestOptions = {
-            method: 'GET',
-            headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${globalJwtTokenState}` }            
-        };
-        const response = await fetch(`/appuser/location?location=${event.currentTarget.value}`, requestOptions);
-        const locations = await response.json() as PostCodeLocation[];        
+        }       
+                if(!!controller) {
+            controller.abort();
+        } 
+        controller = new AbortController();
+        const locations = await fetchLocation(globalJwtTokenState, controller, event.currentTarget.value);
         setOptions(!locations ? [] : locations);
+        controller = null;
         //console.log(locations);
     }
 

frontend/src/components/LoginModal.tsx

@@ -80,11 +80,6 @@ const LoginModal = () => {
     if(!!controller) {
       controller.abort();
     }
-    const requestOptions = {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ Username: userName, Password: password1 } as UserRequest)
-    };
     setResponseMsg('');
     controller = new AbortController();
     const userResponse = activeTab === 0 ? await postLogin(userName, password1, controller) : await postSignin(userName, password1, controller);    

frontend/src/components/TargetPriceModal.tsx

@@ -14,7 +14,8 @@ import { useRecoilState, useRecoilValue } from "recoil";
 import GlobalState from "../GlobalState";
 import { Box, TextField, Button, Dialog, DialogContent } from '@mui/material';
 import { useState, useMemo, ChangeEventHandler, FormEvent } from "react";
-import { UserRequest, UserResponse } from "./LoginModal";
+import { UserRequest, UserResponse } from "../service/dtos";
+
 
 const TargetPriceModal = () => {
     let controller: AbortController | null = null;

frontend/src/service/dtos.ts

@@ -139,3 +139,13 @@ export interface UserResponse {
   TargetE5?: number;
   TargetE10?: number;
 }
+
+export interface PostCodeLocation {
+    Message: string;
+  Longitude:  number;
+  Latitude:  number;
+  Label:      string;
+  PostCode:   number
+  SquareKM:   number;
+    Population: number;
+}

frontend/src/service/http-client.ts

@@ -1,5 +1,5 @@
 import { UserDataState } from "../GlobalState";
-import { GasPriceAvgs, GasStation, Notification, TimeSlotResponse, UserRequest, UserResponse } from "./dtos";
+import { GasPriceAvgs, GasStation, Notification, PostCodeLocation, TimeSlotResponse, UserRequest, UserResponse } from "./dtos";
 
 const fetchGasStations = async function(jwtToken: string, controller: AbortController | null, globalUserDataState: UserDataState): Promise<GasStation[]> {
   const requestOptions2 = {
@@ -65,9 +65,34 @@ const loginSigninOptions = (userName: string, password1: string, controller: Abo
       };
 };
 
+const postLocationRadius = async function(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('/appuser/locationradius', requestOptions);
+        const userResponse = response.json() as UserResponse;
+        return userResponse;
+}
+
+const fetchLocation = async function(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(`/appuser/location?location=${location}`, requestOptions);
+          const locations = response.json() as Promise<PostCodeLocation[]>;
+          return locations;
+}
+
 export { fetchGasStations };
 export { fetchPriceAvgs };
 export { fetchUserNotifications };
 export { fetchTimeSlots };
 export { postLogin };
-export { postSignin };
+export { postSignin };
+export { postLocationRadius };
+export { fetchLocation };