Creating the forms-pages

Event Selector

To be able to book a ticket the user must first select an event if the webpage is not determined to be for one specific event. If the page were to be determined for one specific event, you can skip this step and simply hard code it further down the line.
On this page we will make an event selector which allows someone to select any event from a given organizer. We will get the events by an API-Call and adequately display them for the user to select them. This form can take any form and shape, but the important part is that we are able to store “eventId” for further usage.

As we are using “axios” to execute our API-calls, we request you to install axios. You can also use the inbuilt JavaScript-HttpCall method if you prefer to use those.
Since we are using React in our example, we can simply use the Node-Package-Manager and install axios.

Developer PowerShell Code:
C:Path\Developer-Site-Example-Bookingform> npm install axios

In the react code below we are first getting all the events of a hard-coded organizer and afterwards we are displaying the corresponding events and their information. Thanks to the usage of react we can simply update the state, which holds the event-details, and the display part of the code gets automatically updated to the new information.

import React, { useEffect, useState } from "react";
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

//Here we display all possible events and select the wanted one
function Home() {

//Variables

//Hard Coded
    const organizerId = "2859515"; //swap with wanted organizerId
    const baseUrl = "api.ticketino.com";

//Mutatatable
    const [fullEventObjects, setFullEventObjects] = useState([]);
    let navigate = useNavigate();

//Methodes

//fires on page completed load, compareable to "window.onload"
    useEffect(() => {

//reset variables on refresh
        setFullEventObjects([]);
        //request bearerToken on our local controller
        axios.get("/token/get").then((result) => {
            //Callback function
            //token will be added to every header
            axios.defaults.headers.common['Authorization'] = "Bearer " + result.data;

//store token to access it from anywhere
            localStorage.setItem("token", result.data);

//Getting all events from organizer after having added header
            axios.get(`${baseUrl}/Events?organizerId=${organizerId}`).then((result) => {

//Now we loop through all Events and get their Details and store them in an array
                result.data.events?.map((event) => {
                    axios.get(baseUrl + `/Event/${event.id}/Infos`).then((result) => {

let fullEventObject = {
                            "event": event,
                            "eventDetails": result.data.eventInfos[0],
                        };

//store newly created object
                        setFullEventObjects((current) => [...current, fullEventObject]);

}).catch((error) => {

});
                });

}).catch(() => {

});

}).catch((error) => {
            //Callback function in case of an error return on original-call

});

}, []);

function ButtonHandlerUserSelectEvent(eventId) {
        //Executes when user has selected Event and will re-route

console.log(eventId);

let orderId;

//Route to next page with eventId in Url
        navigate(`/ticket/${eventId}/${orderId}`);
    }

//Display - HTML Code
    //Uses Bootstrap CSS

return (
        <div className="page-container">
            <section className="section" id="sectionHome">
                <div className="box-main row">
                    <div className="firsthalf">
                        <div className="introductionDiv">
                            <h1 className="text titleStyle text-start text-center ">Event Selector</h1>
                            <p className="text mt-4 text text-light text-center ">
                                Please select the event you wish to book a ticket for!
                            </p>
                        </div>
                        <div className="container">
                            {                      
                                //Sort Objects to make a reasonable display order --> can be swapped for a different order if wished
                                [...fullEventObjects].sort((a, b) => new Date(a.event.openDoor) - new Date(b.event.openDoor)).map((fullEventObject, key) => {
                                    //map and display every wanted part of fullEventObject
                                    //and check that event isnt already over
                                    if (new Date() < new Date(fullEventObject.event.end) ) {

//can be extended for any kind of information
                                        return (
                                            <div className="eventObjectDiv mb-3 p-3 border border-white" key={key}>
                                                <h3 className="mb-4 text text-light text-center ">{fullEventObject.eventDetails.name}</h3>
                                                <div className="mb-4 text text-light text-center">
                                                    {fullEventObject.eventDetails.shortDescription}
                                                </div>
                                                <div className="mb-4 text text-light text-center">
                                                    {fullEventObject.event.openDoor.substring(11, 16)} - {fullEventObject.event.end.substring(11, 16)}
                                                </div>
                                                <div className="mb-4 text text-light text-center">
                                                    {fullEventObject.event.openDoor.substring(0, 10)}
                                                </div>
                                                <div className="mb-5 text-center">
                                                    <button className="btn button btn-light" onClick={() => { ButtonHandlerUserSelectEvent(fullEventObject.event.id) }} >
                                                        Buy Ticket
                                                    </button>
                                                </div>
                                            </div>
                                        )
                                    }
                                })                                
                            }
                        </div>
                    </div>
                </div>
            </section>
        </div>
    )

}

export default Home

Now that we have completed the first page, we can insert our next page. On this page we will ask the user to insert the quantity of tickets he wants from each type of available tickets. But before we can create the page itself, we first need to handle the routing-part of the application. These changes will have to be made inside of AppRouter.js. The code changes will be shown again, from this example onwards, we will only display the snipped code that needs to be inserted at the same place.

We will also transport the “eventId” within the URL, therefore we will store that in the designated params sections of the path. The eventId is needed to get the needed ticketType information.

Display TicketType information and add tickets to the basket

Since we also want to inform the user of what types of tickets there are and their prices and other corresponding information. Therefore, we need to first retrieve the information. But to get the detail-information of a specific TicketType we need the ticketTypeId.

To get all the TicketType-Ids of an event, we can simply call an API-Call which holds all the information. But for that said API-call we need the eventId, that is the reason we stored the eventId within the URL. From there we can retrieve the information and insert it into the call and make a successful. With the Array of TicketType we can loop through them and thereafter get the TicketTypeInfos.

In the example we have afterwards added the two types of ticketType objects to one object and inserted them into an array to make the display of the page easier. This also allows the page to be dynamic for the number of tickets.

The ShopBasket will be created when the user presses the button to go the next page and as soon as a succesfull callback has been made the API-Call to add the tickets will be executed and if this one also returns as a 200, the user will be moved to the forms page.

import { useEffect, useState } from "react";
import { useParams } from 'react-router-dom'
import { useNavigate } from 'react-router-dom';
import axios from 'axios'

function TicketSelect() {
//variables

//hard coded
    const baseUrl = "api.ticketino.com";
    let navigate = useNavigate();

//mutateable
    const { eventId, orderIdParameter } = useParams(); //retrives eventId from the URL parameter
    const [fullTicketObjects, setFullTicketObjects] = useState([]); //TicketInformation
    const [ticketObjectRemoval, setTicketObjecktRemoval] = useState([]);
    const [quantityObject, setQuantityObject] = useState([]); //Needed Information to Add ticket to basket

//Methodes

//Token exist check
    useEffect(() => {

//reset objects
        setFullTicketObjects([]);

let token = localStorage.getItem("token");

//checks if there is an existing token, if not gets a new one
        if (!localStorage.getItem("token") || localStorage.getItem("token") === "" || localStorage.getItem("token") === null) {
            axios.get("token/get").then((result) => {
                axios.defaults.headers.common['Authorization'] = "Bearer " + result.data;

getFullTicketTypeObject(eventId);

}).catch((error) => {

});
        } else {
            axios.defaults.headers.common['Authorization'] = "Bearer " + token;

getFullTicketTypeObject(eventId);

}

}, []);

//TicketType retrival
    function getFullTicketTypeObject(eventId) {

axios.get(`${baseUrl}/Event/${eventId}/TicketTypes`).then((result) => {

//loop to get TicketTypeInfo
            result.data.ticketTypes?.map((ticketType) => {
                axios.get(`${baseUrl}/TicketType/${ticketType.id}/Infos`).then((result) => {

let i = 0
                    let iArray = [];
                    while (i <= ticketType.maxNumberOfTicketsPerOrder) {
                        iArray.push(i);
                        i++;
                    }

let fullTicketTypeObject = {
                        "ticketType": ticketType,
                        "ticketTpyeInfo": result.data.ticketTypeInfos[0],
                        "maxAmount" : iArray,
                    };

let ticketRemovalObject = {
                        "ticketTypeId": ticketType.id,
                        "quantity" : 0,
                    }

setFullTicketObjects((current) => [...current, fullTicketTypeObject]);
                    setTicketObjecktRemoval((current) => [...current, ticketRemovalObject]);

}).catch((error) => {

});
            });
           
        }).catch((error) => {

});
    };

function changeAmountHandler(amount, ticketTypeIdGiven) {
        //copy current object array
        let objectArray = ticketObjectRemoval;

let changedTicketType = {
            "ticketTypeId": ticketTypeIdGiven,
            "quantity": amount,
        }
        //Get index of to be removed object
        const index = objectArray.map(object => object.ticketTypeId).indexOf(ticketTypeIdGiven);

//splice syntax : .splice(indexOfObject, amount, newItem);
        objectArray.splice(index, 1, changedTicketType);

setQuantityObject(objectArray);

}

//creates the basket
    function proceedNextPage() {

if (orderIdParameter !== undefined) {

addTicket(orderIdParameter);

} else {

let createBasketBody = {
                "currency": "CHF",
                "tenantId": 1,
                "pointOfSaleId": 6585,
            };

axios.post(`${baseUrl}/ShopBasket/Order/`, createBasketBody).then((result) => {
                //to have access from following pages
                //needed for checking idle time
                localStorage.setItem("lastInteraction", new Date());

addTicket(result.data.id);

}).catch((result) => {

});
        }
        
    }

function returnToPreviousPage() {
        navigate("/home");
    }

function addTicket(orderId) {

//loop through all objects and add Ticket with their corresponding amount to the ShopBasket
        quantityObject?.map((object) => {
            if (object.quantity > 0) {

let ticketToAddBody = {
                    ticketsToAdd: [
                        {
                            "ticketTypeId": object.ticketTypeId,
                            "quantity": object.quantity,
                        }
                    ]
                };

axios.post(`${baseUrl}/ShopBasket/Order/${orderId}/Tickets`, ticketToAddBody).then((result) => {

leavePage(orderId)

}).catch((error) => {

});
            }
        });

}

function leavePage(orderId) {
        //Add any needed actions here before user leaves page

navigate(`/form/${orderId}/${eventId}`);

}

//HTML Display
    return (
        <div className="page-container">
            <section className="section" id="sectionTicket">
                <div className="box-main row">
                    <div className="firsthalf">
                        <div className="introductionDiv">
                            <h1 className="text titleStyle text-start text-center">Ticket Selector</h1>
                            <p className="text mt-4 text text-light text-center">
                                Please select the tickets you wish to book!
                            </p>
                        </div>
                        <div className="container">
                            {
                                fullTicketObjects?.sort((a, b) => a.ticketTpyeInfo.name.localeCompare(b.ticketTpyeInfo.name)).map((fullTicketObject, key) => {
                                    //map and display, every wanted part of fullTicketTypeObject

//can be extended for any kind of information
                                    return (
                                        <div className="ticketObjectDiv mb-3 p-3 border border-white" key={key}>
                                            <h3 className="mb-4  text text-light text-center">{fullTicketObject.ticketTpyeInfo.name}</h3>
                                            <div className="mb-4  text text-light text-center">
                                                {fullTicketObject.ticketTpyeInfo.description}
                                            </div>
                                            <div className="mb-4  text text-light text-center">
                                                {fullTicketObject.ticketType.price } {fullTicketObject.ticketType.currency}
                                            </div>

<div className="col-2 "></div>
                                                <div className="col-8 ">
                                                    <select
                                                        className="selectNum form-select"
                                                        aria-label=""
                                                        placeholder="Select Amount"
                                                        onChange={(e) => { changeAmountHandler(e.currentTarget.value, fullTicketObject.ticketType.id) }}
                                                    >
                                                        <option defaultValue=""></option>
                                                        {fullTicketObject.maxAmount.map((value, key) => {
                                                            //map through allowed values for selection
                                                            return (
                                                                <option value={value} key={key}>{value}</option>
                                                            )
                                                        })

}
                                                    </select>
                                                </div>

<div className="col-2"></div>
                                            </div>
                                            <></>
                                        </div>
                                    )
                                })
                            }
                            <></>
                            <div className="mb-4 row">
                                <button className="btn button btn-light" onClick={() => { proceedNextPage() }}>Proceed</button>
                            </div>
                            <div className="mb-4 row">
                                <button className="btn button btn-light" onClick={() => { returnToPreviousPage() }}>Return</button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        
    )
}

export default TicketSelect;

Customer information form

After having added the tickets to the order/ShopBasket we can now add the user information to the order, this we simply do with a form. The two only note worthy action within the form are the API-Call for the updating the Basket/Order with the Address details of the user. As well as the idleTimeHandler, the idleTimeHandler checks if the user has made any interactions with the Order. This is needed since we clear any hanging ShopBasket from our database, if there haven’t been any interactions within for 10min the basket will get deleted and the ticket will be bookable for everyone again, but if the ticket is in a basket, it cannot be booked by anyone else.

For the address information we are also getting any array of all the country in the requested language. Within the array will be country and its corresponding coutnryId will be retrievable and therefore insertable into the “http-body” for the API-Call which adds the information to the basket.

import { useEffect, useState } from "react";
import { useParams } from "react-router";
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

function Form() {
//Variables

//hard coded
    const baseUrl = "api.ticketino.com";
    const maxIdleTime = 10;
    const { orderId, eventId } = useParams();
    let navigate = useNavigate();

//mutateable

//address var
    const [userGender, setUserGender] = useState("");
    const [userFirstname, setUserFirstname] = useState("");
    const [userFamilyname, setUserFamilyname] = useState("");
    const [userEmail, setUserEmail] = useState("");
    const [userStreet, setUserStreet] = useState("");
    const [userPlace, setUserPlace] = useState("");
    const [userPLZ, setUserPLZ] = useState("");
    const [userCountryId, setUserCountryId] = useState();
    const [userAcceptAGB, setUserAcceptAGB] = useState(false);
        //country var
    const [countryArray, setCountryArray] = useState([]);
    const [showDropdown, setShowDropDown] = useState(false);

//validates variables and needed accepted clauses
    const isInvalid =
        userGender !== "" &&
        /^([a-z A-Zöéàäèü -]{1,70})$/.test(userFirstname) &&
        /^([a-z A-Zöéàäèü -]{1,70})$/.test(userFamilyname) &&
        userEmail.includes("@") && 
        /^([a-z A-Z0-9öéàäèü -]{1,70})$/.test(userStreet) &&
        /^([a-z A-Z0-9öéàäèü]{1,70})$/.test(userPLZ) &&
        /^([a-z A-Zöéàäèü -]{1,70})$/.test(userPlace) &&
        userCountryId !== "" &&
        userAcceptAGB !== false;

//Methodes
    useEffect(() => {
        //Check Token existance
        let token = localStorage.getItem("token");

if (!localStorage.getItem("token") || localStorage.getItem("token") === "" || localStorage.getItem("token") === null) {
            axios.get("token/get").then((result) => {

axios.defaults.headers.common['Authorization'] = "Bearer " + result.data;

getLanguages();

//checks if order still exist, incase of entering page via url entry
                axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => { }).catch((error) => { navigate("/home") });

}).catch((error) => {

});
        } else {

axios.defaults.headers.common['Authorization'] = "Bearer " + token;

getLanguages();

//checks if order still exist, incase of entering page via url entry
            axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => {  }).catch((error) => { navigate("/home") });

}

}, []);

function needsPayment() {
        axios.get(`${baseUrl}/Order/${orderId}`).then((result) => {

if (result.data.total > 0) {
                nextPage(true);
            } else {
                nextPage(false);
            }
        }).catch(() => {

});
    }

function getLanguages() {

//retrives the language of the user, can be made URl dependent if wanted
        var language = window.navigator.userLanguage || window.navigator.language;

//gets countries in corresponding language
        axios.get(`${baseUrl}/Countries?languageCode= + ${language.slice(0, 2)}`).then((result) => {

let countries = result.data;

//first add switzerland, germany and austria
            const indexCH = countries.findIndex(c => c.id === 176);
            const ch = countries[indexCH];
            countries.splice(indexCH, 1);

var indexDE = result.data.findIndex(c => c.id === 229);
            const de = countries[indexDE];
            countries.splice(indexDE, 1);

var indexAU = result.data.findIndex(c => c.id === 228);
            const au = countries[indexAU];
            countries.splice(indexAU, 1);

countries.unshift({ id: 0, name: "---------" });
            countries.unshift(au);
            countries.unshift(de);
            countries.unshift(ch);

setCountryArray(result.data);

setShowDropDown(true);

}).catch(() => {

})

}

function checkIdleTime() {
        //Checks the idle time since the last API interaction with the Order/ShopBasket
        const maxDate = new Date(new Date(localStorage.getItem("lastInteraction")).getTime() + maxIdleTime * 60000);
        const currentDate = new Date();
        //return value 
        if (maxDate > currentDate) {
            return true;
        } else {
            return false;
        }

}

function updateAGBAccept() {
        //if accepted to disabled and the opposite
        // true => false, false => true
        if (userAcceptAGB) {
            setUserAcceptAGB(false);
        } else {
            setUserAcceptAGB(true);
        }
    }

function setAddressAndProceed() {

if (checkIdleTime) {

let addAddressBody = {
                "salutation": userGender,
                "firstName": userFirstname,
                "name": userFamilyname,
                "street": userStreet,
                "postCode": userPLZ,
                "city": userPlace,
                "email": userEmail,
                "countryId": userCountryId,
            };

axios.put(`${baseUrl}/Order/${orderId}/Address`, addAddressBody).then((res) => {
                
                localStorage.setItem("lastInteraction", new Date());

needsPayment();

});

} else {
            //move userback to event Select
            alert("The max idle time has been reached, your order has been cancelled");
            navigate("/home");
            
        }
    }

function nextPage(needsPayment) {

if (needsPayment) {
            //for payment needed tickets
            navigate(`/details/${orderId}/${eventId}`);

} else {
            //for free Tickets
            navigate(`/detail/${orderId}/${eventId}`);

}
    }

function previousPage() {
        navigate(`/ticket/${orderId}/${eventId}`)
    }

//HTML Display
    return (
        <div className="page-container">
            <section className="section" id="section">
                <div className="box-main row">
                    <div className="firstHalf">
                        <div>
                            <h1 className="text titleStyle text-start text-center">Customer Form</h1>
                            <p className="text mt-4 text text-light text-center">
                               Please enter your information!
                            </p>
                        </div>
                    </div>
                    <div className="container">
                        <div className="mb-4 row">
                            <label className="col-sm-3 col-md-2 col-12 text text-light">
                                Gender*
                            </label>
                            <div className="col-md-8 col-sm-8 col-8 ms-2 row">
                                <div className="form-check col-4">
                                    <input
                                        className="form-check-input"
                                        type="checkbox"
                                        value="male"
                                        id="flexCheckDefault"
                                        onChange={(event) => {
                                            setUserGender(event.currentTarget.value);
                                        }}
                                    />
                                    <label className="form-check-label " htmlFor="flexCheckDefault">
                                        Male
                                    </label>
                                </div>
                                <div className="form-check col-4 ms-4">
                                    <input
                                        className="form-check-input"
                                        type="checkbox"
                                        value="female"
                                        id="flexCheckDefault"
                                        onChange={(event) => {
                                            setUserGender(event.currentTarget.value);

}}
                                    />
                                    <label className="form-check-label" htmlFor="flexCheckDefault">
                                        Female
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            Firstname*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="firstname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                onChange={(event) => {
                                    setUserFirstname(event.currentTarget.value);

}}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            Familyname*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="lastname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                onChange={(event) => {
                                    setUserFamilyname(event.currentTarget.value);

}}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            E-Mail*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="lastname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                placeholder="Example@gmail.com"
                                onChange={(event) => {
                                    setUserEmail(event.currentTarget.value);

}}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            Street*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="lastname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                onChange={(event) => {
                                    setUserStreet(event.currentTarget.value);

}}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            Place*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="lastname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                onChange={(event) => {
                                    setUserPlace(event.currentTarget.value);
                                }}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">
                            PLZ*
                        </label>
                        <div className="col-sm-8 col-md-8 col-16">
                            <input
                                type="text"
                                name="lastname"
                                className="form-control inputCode vorname"
                                id="inputCode"
                                onChange={(event) => {
                                    setUserPLZ(event.currentTarget.value);
                                }}
                            />
                        </div>
                    </div>
                    <div className="mb-4 row">
                        <label className="col-sm-3 col-md-2 col-12 me-2 text text-lightp-2">Land*</label>
                        <div className="col-sm-8 me-3">
                            {showDropdown && countryArray ?
                                <div>
                                    <select
                                        className="selectNum form-select col-sm-8 col-md-8 col-16"
                                        aria-label="Default select example"
                                        onChange={(event) => setUserCountryId(event.target.value)}
                                    >
                                        <option defaultValue="null" ></option>
                                        {countryArray.map((value, key) => {
                                            return (
                                                <option key={key} value={value.id}>{value.name}</option>
                                            )
                                        })}
                                    </select>
                                </div>
                                : null}
                        </div>
                    </div>
                    <div className="form-check mb-4">
                        <input onChange={() => updateAGBAccept()}
                            className="cb3 form-check-input"
                            name="AcceptAGB"
                            type="checkbox"
                            id="AGBcheckbox"
                        />
                        <label className="form-check-label text text-light" htmlFor="flexCheckDefault">
                           Accept AGB*
                        </label>
                    </div>
                    <div className="flex-end">
                        <button className="btn button btn-light" disabled={!isInvalid } onClick={() => { setAddressAndProceed()}} >
                            Procced
                        </button>
                        <button className="btn mx-2 button btn-light" onClick={() => { previousPage()}} >
                            Previous
                        </button>
                    </div>
                </div>
            </section>
        </div>

)

}

export default Form;

Since the next step for the user would be to make his decision regarding his paymentmethod, deliverymethod as well as in what currency he wants to pay, it is advisable to check the order for the totalPrice attribute. In case that its 0 it means the tickets were free and therefore the user should be re-routed to a different page if he were needed to pay.

AppRouter.js adding the formspage

And last but not least, lets add our CSS to make the page look acceptable to the eye.

Removing a ticket

If a user were to want to remove a ticket he would need to remove them one by one. For the delete API-call the user needs to add the ticketType that he want to remove in the body, besides that you can simply refresh the page-information and give the option to go back to the recap or add another again by going back to the orginial ticketAdd page.

Code for ticket removal

import { useEffect, useState } from "react";
import { useParams } from "react-router";
import axios from "../../../../node_modules/axios/index";
import { useNavigate } from 'react-router-dom';

function Delete() {
//Variables

const { orderId, eventId } = useParams();
    const baseUrl = "api.ticketino.com";
    let navigate = useNavigate();
    const [ticketTypeInfo, setTicketTypeInfo] = useState([]);
     
//Methodes

useEffect(() => {
       
        setTicketTypeInfo([]);
        let token = localStorage.getItem("token");

if (!localStorage.getItem("token") || localStorage.getItem("token") === "" || localStorage.getItem("token") === null) {
            axios.get("token/get").then((result) => {
                axios.defaults.headers.common['Authorization'] = "Bearer " + result.data;

//checks if order still exist, incase of entering page via url entry
                axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => { }).catch((error) => { navigate("/home") });

//To be made calls for display
                getInformation();
            }).catch((error) => {

});
        } else {
            axios.defaults.headers.common['Authorization'] = "Bearer " + token;

//To be made calls for display

//checks if order still exist, incase of entering page via url entry
            axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => { }).catch((error) => { navigate("/home") });

getInformation();

}

}, []);

function addTicketPage() {
        navigate(`/ticket/${eventId}/${orderId}`)
    }

function backtoRecap() {

navigate(`/recap/${orderId}/${eventId}`);
    }

function getInformation() {
        axios.get(`${baseUrl}/ShopBasket/Order/${orderId}`).then((result) => {

let objectId = [];

result.data.tickets.map((object) => {

if (objectId.some(existingObject => {
                    if (existingObject.id === object.ticketTypeId) { return true }
                })) {

} else {
                    objectId.push(object.ticketTypeId)
                }

});

objectId.map((object) => {
                axios.get(`${baseUrl}/TicketType/${object}/Infos`).then((resultInfo) => {
                    axios.get(`${baseUrl}/Event/${eventId}/TicketTypes`).then((result) => {
                        console.log(result.data);
                        result.data.ticketTypes.map((ticketObject) => {
                            if (ticketObject.id === object) {
                                let fullTicketTypeObject = {
                                    ticketTypeInfo: resultInfo.data.ticketTypeInfos[0],
                                    ticketType : result.data
                                }
                                setTicketTypeInfo((current) => [...current, fullTicketTypeObject]);

}
                        });
                        
                    });

})
            })
        });
    }

function deleteTicketFromOrder(ticketTypeId) {
        let deleteTicktetBody = {
            "ticketsToRemove": [
                ticketTypeId
            ]
        };

axios.delete(`${baseUrl}/ShopBasket/Order/${orderId}/Tickets`, deleteTicktetBody).then((result) => {
            localStorage.setItem("lastInteraction", new Date());

getInformation();
        })
    }

//HTML Display
    console.log(ticketTypeInfo);
    return (
        <div className="page-container">
            <section className="section" id="sectionTicket">
                <div className="box-main row">
                    <div className="firsthalf">
                        <div className="introductionDiv">
                            <h1 className="text titleStyle text-start text-center">Ticket Delete</h1>
                            <p className="text mt-4 text text-light text-center">
                                Please select the tickets you wish to book!
                            </p>
                        </div>
                        <div className="container">
                            {                                
                                ticketTypeInfo?.map((fullTicketObject, key) => {
                                    //map and display, every wanted part of fullTicketTypeObject

//can be extended for any kind of information
                                    return (
                                        <div className="ticketObjectDiv mb-3 p-3 border border-white" key={key}>
                                            <h3 className="mb-4  text text-light text-center">{fullTicketObject.ticketTypeInfo.name}</h3>
                                            <div className="mb-4  text text-light text-center">
                                                {fullTicketObject.ticketTypeInfo.description}
                                            </div>
                                            <div className="mb-4  text text-light text-center">
                                                {fullTicketObject.ticketType.price} {fullTicketObject.ticketType.currency}
                                            </div>

<div className="mb-4 text-center ">
                                                <button className="btn button btn-light " onClick={() => { deleteTicketFromOrder(fullTicketObject.id) }}>Delete Ticket</button>

</div>
                                            <></>
                                        </div>
                                    )
                                })
                            }
                            <></>
                            <div className="mb-4 row">
                                <button className="btn button btn-light" onClick={() => { backtoRecap() }}>Back to Recap</button>
                            </div>
                            <div className="mb-4 row">
                                <button className="btn button btn-light" onClick={() => { addTicketPage() }}>Add Tickets</button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    )
}

export default Delete;

We are also not allowed to forget to define the routing the newly created page.