diff --git a/package.json b/package.json index f776279..d51b85f 100644 --- a/package.json +++ b/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", diff --git a/src/api/axiosInstance.ts b/src/api/axiosInstance.ts index d279021..a317023 100644 --- a/src/api/axiosInstance.ts +++ b/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, } diff --git a/src/api/fetchCustomerInfo.ts b/src/api/fetchCustomerInfo.ts new file mode 100644 index 0000000..17d3121 --- /dev/null +++ b/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 { + + 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; +} \ No newline at end of file diff --git a/src/api/index.ts b/src/api/index.ts index be6db69..71f9fa4 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -1,3 +1,3 @@ export * from "./isTokenValid"; export * from "./login"; -export * from "./getCustomerInfo"; \ No newline at end of file +export * from "./fetchCustomerInfo"; \ No newline at end of file diff --git a/src/components/Transactions.tsx b/src/components/Transactions.tsx index 8e90187..7fc759f 100644 --- a/src/components/Transactions.tsx +++ b/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({name: "John Smith", balance: -1}); - - async function fetchData() { - if (!user.token) - return; - const info = await getCustomerInfo(user.token, user.id); - setCustomerInfo(info); - }; + const { customerInfo, isLoading, getCustomerInfo } = useGetCustomerInfo(); 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) => } - + const { ref: endDateRef, ...endDateRegisterProps } = register("endDate"); const endDatePickerProps = { @@ -120,6 +115,10 @@ export function Transactions() { helperText: errors?.maxAmount?.message, } + function handleRefreshButton(event: MouseEvent): void { + getCustomerInfo(user.token, user.id); + } + return (
@@ -128,9 +127,13 @@ export function Transactions() { Transactions + - - {customerInfo.name} (CHF {customerInfo.balance}) + + {isLoading ? : customerInfo.name} + {/* {customerInfo.name} (CHF {customerInfo.balancE}) */} @@ -141,18 +144,26 @@ export function Transactions() { Filters - - Dates - - - - - - - Transactions - - - + + + Dates + + + + + + + + + + + Transactions + + + + + +
diff --git a/src/hooks/useGetCustomerInfo.ts b/src/hooks/useGetCustomerInfo.ts new file mode 100644 index 0000000..82644de --- /dev/null +++ b/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({ name: "John Smith", balance: -1 }); + const [isLoading, setIsLoading] = useState(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 }; +} \ No newline at end of file diff --git a/src/scss/transactions.scss b/src/scss/transactions.scss index b8d720e..994c625 100644 --- a/src/scss/transactions.scss +++ b/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 { - // background: red; - width: 50vw; - display: flex; - flex-direction: row; - justify-content: space-evenly; + .box { + flex-grow: 1; - .input { - // background: blue; - width: 10em; + .inputs-box { + // background: red; + display: flex; + flex-direction: row; + justify-content: space-evenly; + + .input { + // background: blue; + width: 10em; + } } } }