Added loading icon when data is getting fetch for the username

package.json

@@ -37,6 +37,7 @@
     "react-dom": "^18.2.0",
     "react-final-form": "^6.5.9",
     "react-hook-form": "^7.38.0",
+    "react-loading-icons": "^1.1.0",
     "react-router-dom": "^6.4.2",
     "sass": "^1.55.0",
     "sass-loader": "^13.1.0",

src/api/axiosInstance.ts

@@ -2,7 +2,7 @@ import axios from "axios";
 
 export const axiosInstance = axios.create({
     baseURL: "http://localhost:5276",
-    timeout: 1000,
+    timeout: 5000,
     params : {
         shopId: 10,
     }

src/api/fetchCustomerInfo.ts

@@ -0,0 +1,37 @@
+import { axiosInstance } from "./axiosInstance";
+import { ApiToken, CustomerInfo } from "./types";
+
+const API_TOKEN_NOT_FOUND_ERROR_CODE = 16;
+
+/**
+ * Get the data of customer
+ * 
+ * @param token The token, given from WOnD, of the customer
+ * @returns the data of the customer
+ */
+export async function fetchCustomerInfo(token: ApiToken, id: number): Promise<CustomerInfo> {
+
+    function timeout(ms: number) {
+        return new Promise(resolve => setTimeout(resolve, ms))
+    }
+
+    await timeout(3000);
+
+    const res = await axiosInstance.get("/getCustomer", {
+        params: { token, id }
+    })
+
+    if (res.data.getCustomer.result == "ERROR"){
+        const code: number = res.data.getCustomer.errorCode;
+        // if (code == API_TOKEN_NOT_FOUND_ERROR_CODE)
+            // navigate('/')
+        const msg: string = res.data.getCustomer.message;
+        throw new Error(`Couldn't get user info\nError code: ${code}\nError message: ${msg}`);
+    }
+
+    const customerInfo: CustomerInfo = {
+        name: res.data.getCustomer.customer.description, // yes i know...
+        balance: res.data.getCustomer.customer.prepayBalanceCash
+    }
+    return customerInfo;
+}

src/api/index.ts

@@ -1,3 +1,3 @@
 export * from "./isTokenValid";
 export * from "./login";
-export * from "./getCustomerInfo";
+export * from "./fetchCustomerInfo";

src/components/Transactions.tsx

@@ -1,11 +1,12 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState, MouseEvent } from "react";
 import "@scss/transactions.scss";
+import { ThreeDots as LoadingIcon } from "react-loading-icons";
 import Table from "@components/Transactions/Table"
 import userContext from "@ts/userContext"
 import AppBar from "@theme/modules/components/AppBar";
 import Toolbar from "@theme/modules/components/Toolbar";
 import Typography from "@theme/modules/components/Typography";
-import { Box, Link, TextFieldProps, TextField } from "@mui/material";
+import { Box, Link, TextFieldProps, TextField, Button } from "@mui/material";
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
 import { useForm } from "react-hook-form";
@@ -16,7 +17,7 @@ import dayjs, { Dayjs } from 'dayjs';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { getValue } from "@mui/system";
 import { CustomerInfo } from "@api/types";
-import { getCustomerInfo } from "@api";
+import { useGetCustomerInfo } from "src/hooks/useGetCustomerInfo";
 
 
 
@@ -43,17 +44,11 @@ const schema = yup
 
 export function Transactions() {
     const user = useContext(userContext);
-    const [customerInfo, setCustomerInfo] = useState<CustomerInfo>({name: "John Smith", balance: -1});
+    const { customerInfo, isLoading, getCustomerInfo } = useGetCustomerInfo();
-
-    async function fetchData() {
-        if (!user.token)
-            return;
-        const info = await getCustomerInfo(user.token, user.id);
-        setCustomerInfo(info);
-    };
 
     useEffect(() => {
-        fetchData();
+        if (user.token)
+            getCustomerInfo(user.token, user.id);
     }, [user.token])
 
     const {
@@ -80,7 +75,7 @@ export function Transactions() {
         inputFormat: "DD/MM/YYYY",
         renderInput: (params: TextFieldProps) => <TextField {...params} />
     }
-    
+
     const { ref: endDateRef, ...endDateRegisterProps } = register("endDate");
 
     const endDatePickerProps = {
@@ -120,6 +115,10 @@ export function Transactions() {
         helperText: errors?.maxAmount?.message,
     }
 
+    function handleRefreshButton(event: MouseEvent<HTMLElement>): void {
+        getCustomerInfo(user.token, user.id);
+    }
+
     return (
         <div id="tablePage">
             <AppBar position="fixed" sx={{ background: "#28282a" }}>
@@ -128,9 +127,13 @@ export function Transactions() {
                     <Typography variant="h3" >
                         Transactions
                     </Typography>
+                        <Button sx={{marginLeft: 5}} variant="contained" onClick={handleRefreshButton}>
+                            Refresh
+                        </Button>
                     <Box className="box right">
-                        <Link variant="h6" className="link" href="/">
+                        <Link variant="h6" className="link userName" href="/">
-                        {customerInfo.name} (CHF {customerInfo.balance})
+                            {isLoading ? <LoadingIcon height=".5em"/> : customerInfo.name}
+                            {/* {customerInfo.name} (CHF {customerInfo.balancE}) */}
                         </Link>
                         <AccountCircleIcon className="icon" />
                     </Box>
@@ -141,18 +144,26 @@ export function Transactions() {
                     <Typography variant="h5">
                         Filters
                     </Typography>
-                    <Typography variant="h6">
+                    <Box className="box">
-                        Dates
+                        <Typography variant="h6">
-                    </Typography>
+                            Dates
-                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                        </Typography>
-                        <DesktopDatePicker {...startDatePickerProps} />
+                        <Box className="inputs-box dates">
-                        <DesktopDatePicker {...endDatePickerProps} />
+                            <LocalizationProvider dateAdapter={AdapterDayjs}>
-                    </LocalizationProvider>
+                                <DesktopDatePicker {...startDatePickerProps} />
-                    <Typography variant="h6">
+                                <DesktopDatePicker {...endDatePickerProps} />
-                        Transactions
+                            </LocalizationProvider>
-                    </Typography>
+                        </Box>
-                    <TextField {...minAmountProps}></TextField>
+                    </Box>
-                    <TextField {...maxAmountProps}></TextField>
+                    <Box className="box">
+                        <Typography variant="h6">
+                            Transactions
+                        </Typography>
+                        <Box className="inputs-box transactions">
+                            <TextField {...minAmountProps}></TextField>
+                            <TextField {...maxAmountProps}></TextField>
+                        </Box>
+                    </Box>
                 </form>
             </aside>
             <main>

src/hooks/useGetCustomerInfo.ts

@@ -0,0 +1,17 @@
+import { fetchCustomerInfo } from "@api";
+import { ApiToken, CustomerInfo } from "@api/types";
+import { useState } from "react";
+
+export function useGetCustomerInfo() {
+    const [customerInfo, setCustomerInfo] = useState<CustomerInfo>({ name: "John Smith", balance: -1 });
+    const [isLoading, setIsLoading] = useState<boolean>(true); // this should be false, but at least the "Loading..." text appears when the page is loading
+
+    const getCustomerInfo = (token: ApiToken, id: number) => {
+        setIsLoading(true);
+        fetchCustomerInfo(token, id)
+        .then(setCustomerInfo)
+        .then(() => setIsLoading(false));
+    }
+
+    return { isLoading, customerInfo, getCustomerInfo };
+}

src/scss/transactions.scss

@@ -40,6 +40,7 @@ body.transactions {
                     align-items: center;
 
                     .link {
+                        text-align: right;
                         color: inherit;
                         text-decoration: none;
                         margin-right: .5em;
@@ -73,7 +74,9 @@ body.transactions {
                 white-space: nowrap;
                 // overflow: hidden;
             }
-            .amount, .total{ 
+
+            .amount,
+            .total {
                 min-width: 6em;
             }
 
@@ -122,6 +125,7 @@ body.transactions {
             header {
                 grid-row: 1;
                 position: sticky;
+
                 .box.left {
                     display: none;
                 }
@@ -131,6 +135,7 @@ body.transactions {
                 grid-row: 2;
 
                 min-width: 0;
+
                 form {
                     flex-direction: row;
 
@@ -142,16 +147,19 @@ body.transactions {
                         text-align: center;
                     }
 
-                    .inputs-box {
+                    .box {
-                        // background: red;
+                        flex-grow: 1;
-                        width: 50vw;
-                        display: flex;
-                        flex-direction: row;
-                        justify-content: space-evenly;
 
-                        .input {
+                        .inputs-box {
-                            // background: blue;
+                            // background: red;
-                            width: 10em;
+                            display: flex;
+                            flex-direction: row;
+                            justify-content: space-evenly;
+
+                            .input {
+                                // background: blue;
+                                width: 10em;
+                            }
                         }
                     }
                 }