package.json

@@ -24,20 +24,17 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@types/react-router-dom": "^5.3.3",
-    "axios": "^1.1.3",
     "babel-loader": "^8.2.5",
     "css-loader": "^6.7.1",
     "dayjs": "^1.11.6",
     "final-form": "^4.20.7",
     "html-webpack-plugin": "^5.5.0",
-    "ignore-loader": "^0.1.2",
     "markdown-to-jsx": "^7.1.7",
     "mini-css-extract-plugin": "^2.6.1",
     "react": "^18.2.0",
     "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

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

src/api/fetchCustomerInfo.ts

@@ -1,37 +0,0 @@
-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/getCustomerInfo.ts

@@ -1,32 +0,0 @@
-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;
-}

src/api/index.ts

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

src/api/isTokenValid.ts

@@ -1,35 +0,0 @@
-import { axiosInstance } from "./axiosInstance";
-import { ApiToken } from "./types";
-
-
-const API_INVALID_SHOP_ID_CODE = 608;
-
-/**
- * Check whether the token of the user is valid.
- * 
- * @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)
- */
-export async function isTokenValid(token: ApiToken): Promise<boolean>{
-    // 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 
-    // with shopId of -1 so that the DB wouldn't be queried.
-    // If the answer is "Invalid field 'shopId'", then the token is valid.
-    // If it isn't, it will be picked up before checking the shopId and
-    // the answer will contain a certain variation of the message "Token is not 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", { params: {
-        token,
-        shopId: -1
-    }})
-
-    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!");
-
-    const errorCode: number = res.data.retrieveOrders.errorCode;
-
-    return errorCode == API_INVALID_SHOP_ID_CODE;
-    // return false;
-}

src/api/login.ts

@@ -1,22 +0,0 @@
-import { axiosInstance } from "./axiosInstance";
-import { ApiToken, LoginResponse, FailedLoginError } from "./types";
-
-/**
- * 
- * @param user the name of user logging in (if it's a customer, then it's his email)
- * @param password  the password of the user
- * @returns 
- */
-export async function login(user: string, password: string): Promise<LoginResponse>{
-    const res =  await axiosInstance.get("/login", { params: { user, password } });
-    if (res.data.login.result == "ERROR") {
-        const errCode: number = res.data.login.errorCode;
-        const errMsg: string = res.data.login.message;
-        throw new FailedLoginError(errMsg, errCode);
-    }
-    const token: ApiToken = res.data.login.customerProperties.token;
-    const id: number = res.data.login.customerProperties.id;
-    return { token, id };
-}
-
-export { FailedLoginError };

src/api/types/ApiToken.d.ts

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

src/api/types/CustomerInfo.d.ts

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

src/api/types/FailedLoginError.ts

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

src/api/types/LoginResponse.d.ts

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

src/api/types/index.ts

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

src/components/ErrorPage.tsx

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

src/components/ForgotPassword.tsx

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

src/components/Login.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext } from "react";
 import { Card, Button, TextField } from "@mui/material";
 import "@scss/login.scss";
 import { Link, useNavigate } from "react-router-dom";
@@ -7,9 +7,6 @@ import * as yup from "yup";
 import { useForm } from "react-hook-form";
 import userContext from "@ts/userContext"
 import Typography from "@theme/modules/components/Typography";
-import { FailedLoginError } from "@api/types/FailedLoginError";
-import { LoginResponse } from "@api/types";
-import { login } from "@api";
 
 type Inputs = {
     email: string;
@@ -27,15 +24,9 @@ const schema = yup
     })
     .required();
 
-export function Login() {
+export default function Login() {
     const user = useContext(userContext);
     const navigate = useNavigate();
-
-    useEffect(() => {
-        if (user.token)
-            navigate("/");
-    }, [user.token])
-
     const {
         register,
         formState: { errors },
@@ -44,6 +35,10 @@ export function Login() {
         resolver: yupResolver(schema),
     });
 
+    function hash(s: string) {
+        return `hash of '${s}' to be definied`;
+    }
+
     const { ref: emailRef, ...emailRegisterProps } = register("email");
 
     const emailProps = {
@@ -66,29 +61,16 @@ export function Login() {
         name: "password",
         id: "password",
         label: "Password",
-        type: "password",
         error: !!errors.password,
         helperText: errors?.password?.message,
     };
 
-    async function onSubmit(data: Inputs) {
+    function onSubmit(data: Inputs) {
         console.warn("There will be an API call now with the following data");
+        data = { ...data, password: hash(data.password) };
+        user.setName(data.email);
         console.table(data);
-        try {
-            const res: LoginResponse = await login(data.email, data.password);
-            console.log("Response of login:", res);
-            user.setToken(res.token);
-            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){
-           
-            if (err instanceof FailedLoginError)
-                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
-                alert(`Failed to make api call\nError message: ${err.message}`);
-        }
+        setTimeout(() => navigate("/?logged"), 3000);
     }
 
     return (

src/components/Reset.tsx

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

src/components/Transactions.tsx

@@ -1,12 +1,11 @@
-import React, { useContext, useEffect, useState, MouseEvent } from "react";
+import React, { useContext, useEffect } 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, Button } from "@mui/material";
+import { Box, Link, TextFieldProps, TextField } 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,8 +15,6 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider/L
 import dayjs, { Dayjs } from 'dayjs';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { getValue } from "@mui/system";
-import { CustomerInfo } from "@api/types";
-import { useGetCustomerInfo } from "src/hooks/useGetCustomerInfo";
 
 
 
@@ -33,7 +30,7 @@ type Inputs = {
 const schema = yup
     .object()
     .shape({
-        startDate: yup.date().nullable().typeError("Invalid date"),
+        startDate: yup.date().nullable().default(() => {return null}).typeError("Invalid date"),
         endDate: yup.date().nullable().typeError("Invalid date"),
         minAmount: yup.number().positive(),
         maxAmount: yup.number().positive(),
@@ -42,14 +39,8 @@ const schema = yup
     .required();
 
 
-export function Transactions() {
-    const user = useContext(userContext);
-    const { customerInfo, isLoading, getCustomerInfo } = useGetCustomerInfo();
-
-    useEffect(() => {
-        if (user.token)
-            getCustomerInfo(user.token, user.id);
-    }, [user.token])
+export default function Transactions() {
+    const user = useContext(userContext)
 
     const {
         register,
@@ -62,7 +53,7 @@ export function Transactions() {
 
 
     const { ref: startDateRef, ...startDateRegisterProps } = register("startDate");
-    // console.log(startDateRegisterProps)
+    console.log(startDateRegisterProps)
 
     const startDatePickerProps = {
         ...startDateRegisterProps,
@@ -75,7 +66,7 @@ export function Transactions() {
         inputFormat: "DD/MM/YYYY",
         renderInput: (params: TextFieldProps) => <TextField {...params} />
     }
-
+    
     const { ref: endDateRef, ...endDateRegisterProps } = register("endDate");
 
     const endDatePickerProps = {
@@ -115,10 +106,6 @@ 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" }}>
@@ -127,13 +114,9 @@ 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 userName" href="/">
-                            {isLoading ? <LoadingIcon height=".5em"/> : customerInfo.name}
-                            {/* {customerInfo.name} (CHF {customerInfo.balancE}) */}
+                        <Link variant="h6" className="link" href="/">
+                            {user.name}
                         </Link>
                         <AccountCircleIcon className="icon" />
                     </Box>
@@ -144,26 +127,18 @@ export function Transactions() {
                     <Typography variant="h5">
                         Filters
                     </Typography>
-                    <Box className="box">
-                        <Typography variant="h6">
-                            Dates
-                        </Typography>
-                        <Box className="inputs-box dates">
-                            <LocalizationProvider dateAdapter={AdapterDayjs}>
-                                <DesktopDatePicker {...startDatePickerProps} />
-                                <DesktopDatePicker {...endDatePickerProps} />
-                            </LocalizationProvider>
-                        </Box>
-                    </Box>
-                    <Box className="box">
-                        <Typography variant="h6">
-                            Transactions
-                        </Typography>
-                        <Box className="inputs-box transactions">
-                            <TextField {...minAmountProps}></TextField>
-                            <TextField {...maxAmountProps}></TextField>
-                        </Box>
-                    </Box>
+                    <Typography variant="h6">
+                        Dates
+                    </Typography>
+                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                        <DesktopDatePicker {...startDatePickerProps} />
+                        <DesktopDatePicker {...endDatePickerProps} />
+                    </LocalizationProvider>
+                    <Typography variant="h6">
+                        Transactions
+                    </Typography>
+                    <TextField {...minAmountProps}></TextField>
+                    <TextField {...maxAmountProps}></TextField>
                 </form>
             </aside>
             <main>

src/components/Transactions/Table.tsx

@@ -49,9 +49,9 @@ export default () => {
                             <TableCell component="th" scope="row">
                                 {row.date.toLocaleDateString()}
                             </TableCell>
-                            <TableCell className="description">{row.description}</TableCell>
+                            <TableCell>{row.description}</TableCell>
                             <TableCell align="right" className={"amount " + (row.amount < 0 ? "negative" : "positive")}>{CHF_currency(row.amount)}</TableCell>
-                            <TableCell align="right" className="total">{CHF_currency(row.total)}</TableCell>
+                            <TableCell align="right">{CHF_currency(row.total)}</TableCell>
                         </TableRow>
                     ))}
                 </TableBody>

src/components/index.tsx

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

src/components/lib/AuthComponent.tsx

@@ -1,34 +1,23 @@
-import { isTokenValid } from "@api";
-import { ApiToken } from "@api/types";
-import userContext from "@ts/userContext";
-import React, { useContext, useEffect } from "react";
+import ErrorPage from "@components/ErrorPage";
+import React, { useEffect } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
 type AuthProps = {
     children: React.ReactNode,
 }
-export function AuthComponent({ children }: AuthProps) {
+export default function AuthComponent({ children }: AuthProps) {
     const navigate = useNavigate();
-    const user = useContext(userContext);
-
-    async function checkIfCustomerLogged(token: ApiToken) {
-        const isLogged: boolean = await isTokenValid(user.token);
-
-        if (!isLogged) {
-            user.setToken(null);
-            user.setId(null);
-            window.localStorage.removeItem("token");
-            window.localStorage.removeItem("customerId");
-        }
-    }
+    const searchParams = useSearchParams()[0];
+    const isLogged = searchParams.has("logged");
 
     useEffect(() => {
-        if (!user.token)
-            navigate("/login", { replace: true });
         // navigate needs to be wrapped in a useEffect so that it gets executed after the component is mounted. Otherwise it doesn't redirect
-        checkIfCustomerLogged(user.token);
-    }, [user.token])
+        if (!isLogged)
+            navigate("/login", { replace: true });
+    }, [isLogged])
 
-    // by default return the children, the effect will check if the user needs to be redirected
-    return <>{children}</>;
+    if (isLogged)
+        return <>{children}</>;
+    // else
+    // return <ErrorPage err={new Error("You are not logged in and you should have been redirected to the login page. Something went wrong.")}/>;
 }

src/components/lib/MetadataSetter.tsx

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

src/hooks/useGetCustomerInfo.ts

@@ -1,17 +0,0 @@
-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/index.tsx

@@ -3,7 +3,6 @@ import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { MetadataSetter, ErrorPage, Login, ForgotPassword, Reset, Transactions } from "@components";
 import UserContext from '@ts/userContext'
-import { ApiToken } from "@api/types";
 
 const router = createBrowserRouter([
   {
@@ -42,11 +41,8 @@ const router = createBrowserRouter([
 
 
 const App = function () {
-
-  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 }
-
+  const [name, setName] = useState("John Smith")
+  const userContextValue = { name, setName }
   return (
     <UserContext.Provider value={userContextValue}>
       <RouterProvider router={router} />

src/scss/transactions.scss

@@ -1,7 +1,6 @@
 @use "style.scss";
 @import "variables.module.scss";
 
-
 body.transactions {
     background-image: url("/public/backgroundCurvyLines.png");
 
@@ -40,7 +39,6 @@ body.transactions {
                     align-items: center;
 
                     .link {
-                        text-align: right;
                         color: inherit;
                         text-decoration: none;
                         margin-right: .5em;
@@ -69,17 +67,6 @@ body.transactions {
             // justify-content: center;
             align-items: center;
 
-            .description {
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                // overflow: hidden;
-            }
-
-            .amount,
-            .total {
-                min-width: 6em;
-            }
-
             .amount.positive {
                 color: $fg-green;
             }
@@ -92,14 +79,13 @@ body.transactions {
         aside {
             grid-column: 1;
             grid-row: 2;
-            min-width: 173px;
 
             form {
                 display: flex;
                 padding: 7px;
                 justify-content: space-evenly;
                 flex-direction: column;
-                padding-top: 1em;
+                padding-top:1em;
 
                 .input {
                     margin: .4em 0;
@@ -109,69 +95,4 @@ body.transactions {
             }
         }
     }
-
-    @media only screen and (max-width: 1044px) {
-        div#tablePage {
-            grid-template-columns: 1fr;
-            grid-template-rows: 1fr 1fr 10fr 1fr;
-
-            header,
-            main,
-            aside,
-            footer {
-                grid-column: 1;
-            }
-
-            header {
-                grid-row: 1;
-                position: sticky;
-
-                .box.left {
-                    display: none;
-                }
-            }
-
-            aside {
-                grid-row: 2;
-
-                min-width: 0;
-
-                form {
-                    flex-direction: row;
-
-                    h3 {
-                        display: none;
-                    }
-
-                    h2 {
-                        text-align: center;
-                    }
-
-                    .box {
-                        flex-grow: 1;
-
-                        .inputs-box {
-                            // background: red;
-                            display: flex;
-                            flex-direction: row;
-                            justify-content: space-evenly;
-
-                            .input {
-                                // background: blue;
-                                width: 10em;
-                            }
-                        }
-                    }
-                }
-            }
-
-            main {
-                grid-row: 3;
-            }
-
-            footer {
-                grid-row: 4;
-            }
-        }
-    }
 }

src/ts/userContext.ts

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

tsconfig.json

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

webpack.config.js

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