tethysfaceid/components/LogInCarousel/logInCarousel.js

import { Col, Row, Carousel, Card, Divider, Alert, Button, Modal, message } from 'antd';
import { handleError } from 'common/utils';
import LogInComponent from 'components/LogInForm/logInComponent'
import { logInUser } from 'components/LogInForm/loginServices';
import UserStatus from 'components/Status/userStatus';
import TermsAndConditions from 'components/TermsAndConditionsForm/TermsAndConditions';
import Image from 'next/image';
import { useEffect, useRef, useState } from 'react';

const LogInCarousel = (props) => {

    const [loading, setLoading] = useState(false);
    const [data, setData] = useState(null);
    const [userStatus, setUserStatus] = useState(false);
    const carousel = useRef(null);
    const onClickNext = () => {
        carousel.current.next();
    }
    const onClickPrev = () => {
        carousel.current.prev();
    }

    const onSubmitLogIn = (values) => {
        setLoading(true);
        logInUser({ ...values })
            .then(({ data }) => {
                const { statusCodeValue, body } = data;
                setData(body);
                console.log(body);
                if (statusCodeValue === 202) {
                    message.success('Authentication Successfull');
                    onClickNext();
                } else {
                    Modal.error({
                        content: body,
                    });
                }
            })
            .catch(handleError)
            .finally(() => setLoading(false));
    };
    useEffect(() => {
        if (userStatus === 'Matched') {
            onClickNext();
        }
        else if (userStatus === 'NotMatched') {
            onClickNext();
        }
    }, [userStatus]);
    return (
        <Row
            style={{ minHeight: '100vh' }}
            className="padding-left-2x-mobile padding-right-2x-mobile secondary-bg light primary"
        >
            <Col xxl={8} xl={8} md={14} sm={24} xs={24} className="mx-auto margin-top-5x">
                <Card>
                    <div className="center ">
                        <Image src="/logo.jpg" alt="Tethys" width="150" height="50" />
                    </div>
                </Card>
                <Carousel dotPosition='bottom' ref={carousel} dots={false} touchMove={false} swipeToSlide={false}>
                    <LogInComponent onLogIn={onSubmitLogIn} loading={loading} />
                    {data && <TermsAndConditions data={data} onContinue={setUserStatus} />}
                    <UserStatus data={data} status={userStatus} />
                </Carousel>
            </Col>
        </Row>
    )
}


export default LogInCarousel;