Render component of logged client type using React Hooks

I am new to react and react hooks. I am currently working on a coupon project with a back end using spring boot.

I am able to be using a login form using react hooks which successfully logs in with credentials.

My issue is how do I redirect to the specific component once logged in depending on the client type.

e.g if I log in as a CUSTOMER. react will redirect me to Customer component.

In my project I have 3 different client types. ADMINISTRATOR COMPANY CUSTOMER

I am not entirely sure on what approach I should use for this method

Login form:

import { Button } from "../Button/Button";
import "./Login.scss";
import loginImage from "../Assets/login.png";
import { NavLink, useHistory } from "react-router-dom";
import { useForm } from "react-hook-form";
import Select from 'react-select';
import CredentialsModel from "../../Models/CredentialsModel";
import axios from "axios";
import globals from "../../Services/Globals";
import notify, { SccMsg } from "../../Services/Notifications";
import CompanyModel from "../../Models/CouponModel";
import { loginAction } from "../../Redux/AuthState";
import store from "../../Redux/Store";
import UserModel from "../../Models/UserModel";
import Customer from "../CustomerArea/Customer/Customer";

const colourStyles = {
    control: (styles: any) => ({
        ...styles,
        backgroundColor: 'white', borderColor: 'black'
    }),
}

function Login(): JSX.Element {

    const history = useHistory(); 
    const { register, handleSubmit, formState: { errors } } = useForm<CredentialsModel>();

    const options = [
        { value: 'Select Type', label: 'Select Type', isDisabled: true },
        { value: 'Administrator', label: 'Administrator' },
        { value: 'Client', label: 'Client' },
        { value: 'Customer', label: 'Customer' }
    ]

    const SelectBox = () => (
        <Select styles={colourStyles} placeholder={'Select Type'} options={options} />
    )

    async function send(credentials: CredentialsModel) {
        console.log(credentials);
        try {
            const response = await axios.post<UserModel>(globals.urls.client + "login", credentials);
            console.log(response.data);
            store.dispatch(loginAction(response.data));
            notify.success(SccMsg.LOGIN_SUCCESS);

            history.push("/customer"); // Redirect to customer if success
        }
        catch (err) {
            notify.error(err);
        }
    }

    return (
        <div className="base-container " >
            <form onSubmit={handleSubmit(send)}>
                <div className="header" ></div>
                <div className="content">
                    <div className="image">
                        <img src={loginImage} />
                    </div>

                    <div className="form">
                        <div className="form-group">
                            <label htmlFor="username">Email</label>
                            <input type="email" placeholder="📧 email"
                                {...register("email", { required: true, pattern: /^\S+@\S+$/i })}
                            />
                            {errors.email?.type === 'required' && <span>Enter a valid email address</span>}
                        </div>

                        <div className="form-group">
                            <label htmlFor="username">Password</label>
                            <input type="password" placeholder="🔑 password"
                                {...register("password", {
                                    required: true,
                                    minLength: 4,
                                    maxLength: 12,
                                })}
                            />
                            {errors.password?.type === 'required' && <span>You must enter a password</span>}
                            {errors.password?.type === 'minLength' && <span>Password too short</span>}
                            {errors.password?.type === 'maxLength' && <span>Password too long</span>}

                        </div>
                        <div className="form-group">
                            <div className="loginas">Login as:</div>
                            <div className="">
                                {/* <SelectBox  /> */}
                                <select  name="ClientType" >
                                <option  value="ADMIN">ADMIN</option>
                                <option   value="Customer">Customer</option>
                                <option value="COMPANY">COMPANY</option>

                                </select>

                                
                            </div>
                        </div>
                    </div>
                </div>
                
                <div className="footer">
                    <Button type="submit" className=".btn" buttonStyle='btn--outline'>Login</Button>
                </div>
                <div className="register">
                    <p >
                        Don't have an account?
                        <br />
                        Please click here to <NavLink to="/Register"> REGISTER</NavLink>
                    </p>
                </div>
            </form>
        </div>

    );
}


export default Login;

As you can see I have an example of a send function for customer only. I would like to know the best approach for if I have 3 different client types and upon submit I will be redirected accordingly.

Customer Component

import axios from "axios";
import { Component } from "react";
import CouponModel from "../../../Models/CouponModel";
import CustomerModel from "../../../Models/CustomerModel";
import { couponsAction } from "../../../Redux/CouponState";
import store from "../../../Redux/Store";
import Card2 from "../../Card/Card2";
import "./Customer.css";

interface CustomerState {

    
    coupons: CouponModel[];
 
 }

class Customer extends Component <{}, CustomerState, CouponModel> {

    public constructor (props: {}) {
        super(props);
        this.state = {
            coupons: store.getState().couponState.coupons,
        };
    }


    public async componentDidMount () {

        try {
            const response = await axios.get<CouponModel[]>('http://localhost:8080/api/customer/my/coupons');
    
            store.dispatch(couponsAction(response.data)); // Updating global state
    
            this.setState({coupons: response.data});
        } catch (err) {
            alert(err.message);
        }

    }

    public render(): JSX.Element {
        return (
            <div className="Customer">

                <h1>This is customer page as logged</h1>

    
            {this.state.coupons.map(c => <Card2 key={c.id} coupon={c} />)}
                
            </div>
        );
    }
}

export default Customer;

Hope I am clear. I could add anymore information if needed.

from Recent Questions - Stack Overflow https://ift.tt/3zA4OSk
https://ift.tt/eA8V8J