Customer can now login and the context get's updated in the correct way. Modularized the types in @api

This commit is contained in:
Arnaud Fauconnet 2022-11-03 22:33:46 +01:00
parent aa444c4e33
commit c7f388f786
24 changed files with 162 additions and 78 deletions

View File

@ -30,6 +30,7 @@
"dayjs": "^1.11.6", "dayjs": "^1.11.6",
"final-form": "^4.20.7", "final-form": "^4.20.7",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"ignore-loader": "^0.1.2",
"markdown-to-jsx": "^7.1.7", "markdown-to-jsx": "^7.1.7",
"mini-css-extract-plugin": "^2.6.1", "mini-css-extract-plugin": "^2.6.1",
"react": "^18.2.0", "react": "^18.2.0",

View File

@ -1,6 +1,6 @@
import axios from "axios"; import axios from "axios";
export default axios.create({ export const axiosInstance = axios.create({
baseURL: "http://localhost:5276", baseURL: "http://localhost:5276",
timeout: 1000, timeout: 1000,
params : { params : {

View File

@ -1 +0,0 @@
declare type ApiToken = string; // QUESTION: does this make sense, to have this declaration here since we use is in multiple files?

View File

@ -0,0 +1,32 @@
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 getCustomerInfo(token: ApiToken, id: number): Promise<CustomerInfo> {
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;
}

3
src/api/index.ts Normal file
View File

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

View File

@ -1,4 +1,5 @@
import axiosInstance from "./axiosInstance"; import { axiosInstance } from "./axiosInstance";
import { ApiToken } from "./types";
const API_INVALID_SHOP_ID_CODE = 608; const API_INVALID_SHOP_ID_CODE = 608;
@ -9,7 +10,7 @@ const API_INVALID_SHOP_ID_CODE = 608;
* @param token the token of the logged in customer * @param token the token of the logged in customer
* @returns whether the user's token is still valid for the backend (aka if he is still logged in) * @returns whether the user's token is still valid for the backend (aka if he is still logged in)
*/ */
export default async function isTokenValid(token: ApiToken): Promise<boolean> { export async function isTokenValid(token: ApiToken): Promise<boolean>{
// There is no official way to check if the token is still valid or not, // There is no official way to check if the token is still valid or not,
// so after asking Daniele Comes, he said to make a call to retrieveOrders // so after asking Daniele Comes, he said to make a call to retrieveOrders
// with shopId of -1 so that the DB wouldn't be queried. // with shopId of -1 so that the DB wouldn't be queried.
@ -19,12 +20,10 @@ export default async function isTokenValid(token: ApiToken): Promise<boolean> {
// Daniele Comes said he asked the WOnD team to make an endpoint to ask if the token is valid. // Daniele Comes said he asked the WOnD team to make an endpoint to ask if the token is valid.
let res = await axiosInstance.get("/retrieveOrders", { let res = await axiosInstance.get("/retrieveOrders", { params: {
params: {
token, token,
shopId: -1 shopId: -1
} }})
})
if (res.data.retrieveOrders.result != "ERROR") if (res.data.retrieveOrders.result != "ERROR")
throw new Error("The API somehow didn't answer ERROR when asking to retrieve orders from shop with id=-1... This is not normal!"); throw new Error("The API somehow didn't answer ERROR when asking to retrieve orders from shop with id=-1... This is not normal!");

View File

@ -1,20 +1,5 @@
import axiosInstance from "./axiosInstance"; import { axiosInstance } from "./axiosInstance";
import { ApiToken, LoginResponse, FailedLoginError } from "./types";
interface LoginResponse {
isLogged: boolean;
nextAction(): void;
}
class FailedLoginError extends Error{
code: number;
constructor (msg: string, code: number){
super(msg);
this.code = code;
Object.setPrototypeOf(this, FailedLoginError.prototype)
}
}
// type ApiToken = string;
/** /**
* *
@ -22,15 +7,16 @@ class FailedLoginError extends Error{
* @param password the password of the user * @param password the password of the user
* @returns * @returns
*/ */
export default async function login(user: string, password: string): Promise<ApiToken>{ export async function login(user: string, password: string): Promise<LoginResponse>{
// const user = useContext(userContext);
const res = await axiosInstance.get("/login", { params: { user, password } }); const res = await axiosInstance.get("/login", { params: { user, password } });
if (res.data.login.result == "ERROR") { if (res.data.login.result == "ERROR") {
const errCode: number = res.data.login.errorCode; const errCode: number = res.data.login.errorCode;
const errMsg: string = res.data.login.message; const errMsg: string = res.data.login.message;
throw new FailedLoginError(errMsg, errCode); throw new FailedLoginError(errMsg, errCode);
} }
return res.data.login.customerProperties.token; const token: ApiToken = res.data.login.customerProperties.token;
const id: number = res.data.login.customerProperties.id;
return { token, id };
} }
export { FailedLoginError }; export { FailedLoginError };

1
src/api/types/ApiToken.d.ts vendored Normal file
View File

@ -0,0 +1 @@
export type ApiToken = string;

4
src/api/types/CustomerInfo.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
export type CustomerInfo = {
name: string;
balance: number;
};

View File

@ -0,0 +1,8 @@
export class FailedLoginError extends Error {
code: number;
constructor(msg: string, code: number) {
super(msg);
this.code = code;
Object.setPrototypeOf(this, FailedLoginError.prototype);
}
}

6
src/api/types/LoginResponse.d.ts vendored Normal file
View File

@ -0,0 +1,6 @@
import { ApiToken } from "./ApiToken";
export type LoginResponse = {
token: ApiToken;
id: number;
};

4
src/api/types/index.ts Normal file
View File

@ -0,0 +1,4 @@
export * from "./ApiToken.d"
export * from "./CustomerInfo.d"
export * from "./LoginResponse.d"
export * from "./FailedLoginError"

View File

@ -6,7 +6,7 @@ type ErrorProps = {
err?: Error err?: Error
} }
export default function ErrorPage({err} : ErrorProps) { export function ErrorPage({err} : ErrorProps) {
const error: any = err || useRouteError(); const error: any = err || useRouteError();
console.error(error); console.error(error);

View File

@ -22,7 +22,7 @@ const schema = yup
}) })
.required(); .required();
export default function ForgotPassword() { export function ForgotPassword() {
const navigate = useNavigate(); const navigate = useNavigate();
const { const {
register, register,

View File

@ -1,4 +1,4 @@
import React, { useContext } from "react"; import React, { useContext, useEffect } from "react";
import { Card, Button, TextField } from "@mui/material"; import { Card, Button, TextField } from "@mui/material";
import "@scss/login.scss"; import "@scss/login.scss";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
@ -7,7 +7,9 @@ import * as yup from "yup";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import userContext from "@ts/userContext" import userContext from "@ts/userContext"
import Typography from "@theme/modules/components/Typography"; import Typography from "@theme/modules/components/Typography";
import login , { FailedLoginError } from "@api/login"; import { FailedLoginError } from "@api/types/FailedLoginError";
import { LoginResponse } from "@api/types";
import { login } from "@api";
type Inputs = { type Inputs = {
email: string; email: string;
@ -25,7 +27,7 @@ const schema = yup
}) })
.required(); .required();
export default function Login() { export function Login() {
const user = useContext(userContext); const user = useContext(userContext);
const navigate = useNavigate(); const navigate = useNavigate();
const { const {
@ -58,6 +60,7 @@ export default function Login() {
name: "password", name: "password",
id: "password", id: "password",
label: "Password", label: "Password",
type: "password",
error: !!errors.password, error: !!errors.password,
helperText: errors?.password?.message, helperText: errors?.password?.message,
}; };
@ -66,18 +69,27 @@ export default function Login() {
console.warn("There will be an API call now with the following data"); console.warn("There will be an API call now with the following data");
console.table(data); console.table(data);
try { try {
const token: ApiToken = await login(data.email, data.password); const res: LoginResponse = await login(data.email, data.password);
user.setToken(token); console.log("Response of login:", res);
window.localStorage.setItem("token", token); // this could be done with a hook (right?) user.setToken(res.token);
navigate("/"); user.setId(res.id);
console.log("User context after login:", user)
window.localStorage.setItem("token", res.token); // this could be done with a hook (right?)
window.localStorage.setItem("customerId", res.id.toString()); // this could be done with a hook (right?)
}catch(err){ }catch(err){
if (err instanceof FailedLoginError) if (err instanceof FailedLoginError)
alert(`Failed to login user.\nError code: '${err.code}', error message: '${err.message}'`) alert(`Failed to login user.\nError code: '${err.code}', error message: '${err.message}'\n\nYes, I know I should handle it with something else than an alert, but for now I'm making the thing work When it fully works, I'll make it prettier :)`)
else else
alert('Failed to make api call'); alert(`Failed to make api call\nError message: ${err.message}`);
} }
} }
useEffect(() => {
if (user.token)
navigate("/");
}, [user.token])
return ( return (
<main className="cardContainer"> <main className="cardContainer">
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>

View File

@ -22,7 +22,7 @@ const schema = yup
}) })
.required(); .required();
export default function Reset() { export function Reset() {
const navigate = useNavigate(); const navigate = useNavigate();
const { const {

View File

@ -1,4 +1,4 @@
import React, { useContext, useEffect } from "react"; import React, { useContext, useEffect, useState } from "react";
import "@scss/transactions.scss"; import "@scss/transactions.scss";
import Table from "@components/Transactions/Table" import Table from "@components/Transactions/Table"
import userContext from "@ts/userContext" import userContext from "@ts/userContext"
@ -15,6 +15,8 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider/L
import dayjs, { Dayjs } from 'dayjs'; import dayjs, { Dayjs } from 'dayjs';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { getValue } from "@mui/system"; import { getValue } from "@mui/system";
import { CustomerInfo } from "@api/types";
import { getCustomerInfo } from "@api";
@ -30,7 +32,7 @@ type Inputs = {
const schema = yup const schema = yup
.object() .object()
.shape({ .shape({
startDate: yup.date().nullable().default(() => {return null}).typeError("Invalid date"), startDate: yup.date().nullable().typeError("Invalid date"),
endDate: yup.date().nullable().typeError("Invalid date"), endDate: yup.date().nullable().typeError("Invalid date"),
minAmount: yup.number().positive(), minAmount: yup.number().positive(),
maxAmount: yup.number().positive(), maxAmount: yup.number().positive(),
@ -39,8 +41,20 @@ const schema = yup
.required(); .required();
export default function Transactions() { export function Transactions() {
const user = useContext(userContext) const user = useContext(userContext);
const [customerInfo, setCustomerInfo] = useState<CustomerInfo>({name: "John Smith", balance: -1});
async function fetchData() {
if (!user.token)
return;
const info = await getCustomerInfo(user.token, user.id);
setCustomerInfo(info);
};
useEffect(() => {
fetchData();
}, [user.token])
const { const {
register, register,
@ -53,7 +67,7 @@ export default function Transactions() {
const { ref: startDateRef, ...startDateRegisterProps } = register("startDate"); const { ref: startDateRef, ...startDateRegisterProps } = register("startDate");
console.log(startDateRegisterProps) // console.log(startDateRegisterProps)
const startDatePickerProps = { const startDatePickerProps = {
...startDateRegisterProps, ...startDateRegisterProps,
@ -116,7 +130,7 @@ export default function Transactions() {
</Typography> </Typography>
<Box className="box right"> <Box className="box right">
<Link variant="h6" className="link" href="/"> <Link variant="h6" className="link" href="/">
John Smith {customerInfo.name} (CHF {customerInfo.balance})
</Link> </Link>
<AccountCircleIcon className="icon" /> <AccountCircleIcon className="icon" />
</Box> </Box>

View File

@ -1,9 +1,7 @@
import Login from "@components/Login"; export * from "@components/Login";
import ForgotPassword from "@components/ForgotPassword"; export * from "@components/ForgotPassword";
import Reset from "@components/Reset"; export * from "@components/Reset";
import ErrorPage from "@components/ErrorPage"; export * from "@components/ErrorPage";
import Transactions from "@components/Transactions"; export * from "@components/Transactions";
import MetadataSetter from "@components/lib/MetadataSetter"; export * from "@components/lib/MetadataSetter";
import AuthComponent from "@components/lib/AuthComponent"; export * from "@components/lib/AuthComponent";
export { Login, ForgotPassword, Reset, ErrorPage, Transactions, MetadataSetter, AuthComponent };

View File

@ -1,23 +1,28 @@
import isTokenValid from "@api/isTokenValid"; import { isTokenValid } from "@api";
import ErrorPage from "@components/ErrorPage"; import { ApiToken } from "@api/types";
import React, { useEffect } from "react"; import userContext from "@ts/userContext";
import React, { useContext, useEffect } from "react";
import { useNavigate, useSearchParams } from "react-router-dom"; import { useNavigate, useSearchParams } from "react-router-dom";
type AuthProps = { type AuthProps = {
children: React.ReactNode, children: React.ReactNode,
} }
export default function AuthComponent({ children }: AuthProps) { export function AuthComponent({ children }: AuthProps) {
const navigate = useNavigate(); const navigate = useNavigate();
const user = useContext(userContext);
async function checkIfCustomerLogged(token: ApiToken){
const isLogged: boolean = token != null && await isTokenValid(user.token);
if (!isLogged){
navigate("/login", { replace: true });
}
}
useEffect(() => { useEffect(() => {
// navigate needs to be wrapped in a useEffect so that it gets executed after the component is mounted. Otherwise it doesn't redirect // navigate needs to be wrapped in a useEffect so that it gets executed after the component is mounted. Otherwise it doesn't redirect
(async () => { checkIfCustomerLogged(user.token);
const token: ApiToken = window.localStorage.getItem("token"); }, [user.token])
const isLogged: boolean = token != null && await isTokenValid(token);
if (!isLogged)
navigate("/login", { replace: true });
})()
}, [])
// by default return the children, the effect will check if the user needs to be redirected // by default return the children, the effect will check if the user needs to be redirected
return <>{children}</>; return <>{children}</>;

View File

@ -1,16 +1,17 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import {AuthComponent} from "@components"; import { AuthComponent } from "@components";
type MetadataProps = { type MetadataProps = {
children: JSX.Element | JSX.Element[], children: JSX.Element | JSX.Element[],
title: string, title: string,
bodyClass: string, bodyClass: string,
needsAuth? : boolean needsAuth?: boolean
} }
export default function MetadataSetter({children, title, bodyClass, needsAuth = false}: MetadataProps){ export function MetadataSetter({ children, title, bodyClass, needsAuth = false }: MetadataProps) {
useEffect(() => { useEffect(() => {
document.title= title; document.title = title;
document.body.classList.add(bodyClass); document.body.classList.add(bodyClass);
}, [title]) }, [title])

View File

@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom"; import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { MetadataSetter, ErrorPage, Login, ForgotPassword, Reset, Transactions } from "@components"; import { MetadataSetter, ErrorPage, Login, ForgotPassword, Reset, Transactions } from "@components";
import UserContext from '@ts/userContext' import UserContext from '@ts/userContext'
import { ApiToken } from "@api/types";
const router = createBrowserRouter([ const router = createBrowserRouter([
{ {
@ -41,8 +42,11 @@ const router = createBrowserRouter([
const App = function () { const App = function () {
const [token, setToken] = useState<string>()
const userContextValue = { token, setToken } const [token, setToken] = useState<ApiToken>(window.localStorage.getItem("token"));
const [id, setId] = useState<number>(Number.parseInt(window.localStorage.getItem("customerId")));
const userContextValue = { token, setToken, id, setId }
return ( return (
<UserContext.Provider value={userContextValue}> <UserContext.Provider value={userContextValue}>
<RouterProvider router={router} /> <RouterProvider router={router} />

View File

@ -2,5 +2,7 @@ import { createContext } from 'react'
export default createContext({ export default createContext({
token : "Unknown", token : "Unknown",
setToken: (newToken: string) => {} setToken: (newToken: string) => {},
id : -1,
setId: (newId: number) => {},
}) })

View File

@ -14,6 +14,7 @@
"@components/*": ["src/components/*"], "@components/*": ["src/components/*"],
"@scss/*": ["src/scss/*"], "@scss/*": ["src/scss/*"],
"@ts/*": ["src/ts/*"], "@ts/*": ["src/ts/*"],
"@api": ["src/api"],
"@api/*": ["src/api/*"], "@api/*": ["src/api/*"],
"@theme/*": ["themes/onepirate/*"], "@theme/*": ["themes/onepirate/*"],
} }

View File

@ -25,9 +25,13 @@ module.exports = (env, argv) => {
module: { module: {
rules: [ rules: [
{ {
test: /\.tsx?/, test: /\.tsx?$/,
use: 'ts-loader', loader: 'ts-loader',
exclude: /node_modules/ exclude: /node_modules|\.d\.ts$/
},
{
test: /\.d\.ts$/,
loader: 'ignore-loader'
}, },
{ {
test: /\.jsx?$/, test: /\.jsx?$/,