feat: use http service

Author: Angular2Guy

frontend/src/components/LocationModal.tsx

@@ -15,8 +15,8 @@ import GlobalState from "../GlobalState";
 import {UserDataState} from "../GlobalState";
 import { useMemo,useEffect,useState,FormEvent,ChangeEvent,SyntheticEvent } from "react";
 import {Box,TextField,Button,Dialog,DialogContent, Autocomplete} from '@mui/material';
-import {UserRequest, UserResponse} from "./LoginModal";
 import styles from './modal.module.scss';
+import { UserRequest, UserResponse } from "../service/dtos";
 
 interface PostCodeLocation {
     Message: string;

frontend/src/components/LoginModal.tsx

@@ -17,32 +17,8 @@ import { UserDataState } from "../GlobalState";
 import { useState, ChangeEventHandler, FormEvent, BaseSyntheticEvent } from "react";
 import { Box, TextField, Button, Tab, Tabs, Dialog, DialogContent } from '@mui/material';
 import { useNavigate } from "react-router";
-//import { Token } from "@mui/icons-material";
-
-export interface UserRequest {
-  Username: string;
-  Password: string;
-  Latitude?: number;
-  Longitude?: number;
-  SearchRadius?: number;
-  PostCode?: number;
-  TargetDiesel?: string;
-  TargetE10?: string;
-  TargetE5?: string;
-}
-
-export interface UserResponse {
-  Token?: string;
-  Message?: string;
-  PostCode?: number;
-  Uuid?: string;
-  Longitude?: number;
-  Latitude?: number;
-  SearchRadius?: number;
-  TargetDiesel?: number;
-  TargetE5?: number;
-  TargetE10?: number;
-}
+import { UserRequest, UserResponse } from "../service/dtos";
+import { postLogin, postSignin } from "../service/http-client";
 
 interface MsgData {
   jwtToken?: string;
@@ -111,8 +87,7 @@ const LoginModal = () => {
     };
     setResponseMsg('');
     controller = new AbortController();
-    const httpResponse = activeTab === 0 ? await fetch('/appuser/login', requestOptions) : await fetch('/appuser/signin', requestOptions);
-    const userResponse = await httpResponse.json() as UserResponse;
+    const userResponse = activeTab === 0 ? await postLogin(userName, password1, controller) : await postSignin(userName, password1, controller);    
     controller = null;
     //console.log(userResponse);
     if (!userResponse?.Message && !!userResponse?.Token && userResponse.Token?.length > 10 && !!userResponse?.Uuid && userResponse.Uuid?.length > 10) {

frontend/src/service/dtos.ts

@@ -114,3 +114,28 @@ export interface TimeSlot {
   e10: number;
   diesel: number;
 }
+
+export interface UserRequest {
+  Username: string;
+  Password: string;
+  Latitude?: number;
+  Longitude?: number;
+  SearchRadius?: number;
+  PostCode?: number;
+  TargetDiesel?: string;
+  TargetE10?: string;
+  TargetE5?: string;
+}
+
+export interface UserResponse {
+  Token?: string;
+  Message?: string;
+  PostCode?: number;
+  Uuid?: string;
+  Longitude?: number;
+  Latitude?: number;
+  SearchRadius?: number;
+  TargetDiesel?: number;
+  TargetE5?: number;
+  TargetE10?: number;
+}

frontend/src/service/http-client.ts

@@ -1,5 +1,5 @@
 import { UserDataState } from "../GlobalState";
-import { GasPriceAvgs, GasStation, Notification, TimeSlotResponse } from "./dtos";
+import { GasPriceAvgs, GasStation, Notification, TimeSlotResponse, UserRequest, UserResponse } from "./dtos";
 
 const fetchGasStations = async function(jwtToken: string, controller: AbortController | null, globalUserDataState: UserDataState): Promise<GasStation[]> {
   const requestOptions2 = {
@@ -44,7 +44,30 @@ const requestOptions2 = {
       return myResult;
     }
 
+const postLogin = async function(userName: string, password1: string, controller: AbortController | null): Promise<UserResponse> {
+  const requestOptions = loginSigninOptions(userName, password1, controller);    
+      const result = await fetch('/appuser/login', requestOptions);
+      return result.json() as Promise<UserResponse>;
+}
+
+const postSignin = async function(userName: string, password1: string, controller: AbortController | null): Promise<UserResponse> {
+      const requestOptions = loginSigninOptions(userName, password1, controller);      
+      const result = await fetch('/appuser/signin', requestOptions);
+      return result.json() as Promise<UserResponse>;
+}
+
+const loginSigninOptions = (userName: string, password1: string, controller: AbortController | null) => {
+      return {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ Username: userName, Password: password1 } as UserRequest),
+        signal: controller?.signal
+      };
+};
+
 export { fetchGasStations };
 export { fetchPriceAvgs };
 export { fetchUserNotifications };
-export { fetchTimeSlots };
+export { fetchTimeSlots };
+export { postLogin };
+export { postSignin };