reviewnew.js

import React from 'react';
import NavBar from '../Shared/NavBar';
const { useState, useEffect } = React;
import useToken from '../useToken';
import reqwest from "reqwest";
import { useHistory, useParams } from 'react-router-dom';
import { Col, Layout, Row, Button, Form, Input, Modal, Rate, notification, Image, Divider, Alert, Space } from 'antd';
import LoadingSpinner from './../Shared/LoadingSpinner/LoadingSpinner';
import reviewNewStyles from './ReviewNew.module.css';
import { reviewStore } from '../../context/Store';

const { Header, Content } = Layout;
const { TextArea } = Input;

export default function ReviewNew({ rankPlacementId, companyId, seoName, companyLogo }) {
    console.log('ReviewNew', rankPlacementId, companyId, seoName);
    let history = useHistory();
    const [company, setCompany] = useState({});
    const [componentDisabled, setComponentDisabled] = useState(true);
    const [review, setReview] = useState({});
    const [showNotLoggedIn, setShowNotLoggedIn] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const { token, setToken } = useToken();
    const [form] = Form.useForm();
    const [modalRankPlacementId, setModalRankPlacementId] = useState(rankPlacementId);
    const [modalCompanyId, setModalCompanyId] = useState(companyId);
    const [modalSeoName, setModalSeoName] = useState(seoName);
    const [modalCompanyLogo, setModalCompanyLogo] = useState(companyLogo);

    const layout = {
        wrapperCol: {
            span: 16,
        },
    };
    const tailLayout = {
        wrapperCol: {
            span: 20,
        },
    };


    const visible = reviewStore(state => state.toggled);
    const showReview = reviewStore(state => state.toggle);


    // Verify if user is logged in, hide modal and display error notification.
    const checkLogin = () => {
        console.log(token);
        if (!token || token.access_token === null) {
            console.log('not logged in');
            showReview();
            setComponentDisabled(true);
            notification.error({
                message: 'Error',
                description: 'Please login to continue!'
            });
            return false
        } else {
            console.log('logged in');
            setComponentDisabled(false);
            return true;
        }
    }
    const createReview = async (params = {}) => {
        params = { company_id: modalCompanyId, ...params };
        setIsLoading(true);
        try {
            const response = await reqwest({
                url: `${process.env.REACT_APP_API_URL}/api/v1/companies/${modalSeoName}/reviews`,
                method: 'post',
                headers: {
                    "Content-Type": "application/json",
                    "access-token": token.access_token,
                    "content-type": "application/json",
                    "client": token.client,
                    "uid": token.uid
                },
                data: JSON.stringify({ 'review': params }),
                type: 'json'
            });
            setIsLoading(false);
            notification.success({
                message: 'Success',
                description: 'Review created successfully!'
            });
            showReview
            history.push(`/car-warranty-reviews/${seoName}`);
        } catch (error) {
            setIsLoading(false);
            setReview(JSON.parse(error.response).review);
            notification.error({
                message: 'Error',
                description: JSON.parse(error.response).review.error_message
            });
            showReview
        }
    }

    const customFetch = async (params = {}) => {
        setIsLoading(true);
        if (!token || token.access_token === null) {
            setComponentDisabled(true);
            setShowNotLoggedIn(true);
        }
        // const response = await reqwest({
        //     url: `${process.env.REACT_APP_API_URL}/api/v1/companies/${seoName}`,
        //     method: "get",
        //     headers: {
        //         "Accept": "application/json",
        //         "Content-Type": "application/json; charset=utf-8"
        //     },
        //     type: "json"
        // });

        // setCompany(response.company)

        setIsLoading(false);
    };

    useEffect(() => {
        customFetch({});
    }, []);

    const onFinish = (values) => {
        checkLogin() && createReview(values);
    };

    const onFinishFailed = (values) => {
        notification.error({
            message: 'Error',
            description: 'Something went wrong'
        });
    };

    return (
        <div id={companyId}>
            <Button onClick={() => showReview()} className={reviewNewStyles.compareButton} >Write a Review {companyId} {modalSeoName}</Button>
            <Modal
                id={companyId}
                open={visible}
                centered
                className='flex justify-center items-center'
                disabled={componentDisabled}
                closable={false}
                destroyOnClose={true}
                footer={[
                    <Button key="back" onClick={() => showReview()}>
                        Close
                    </Button>
                ]}
            >
                <Header className={reviewNewStyles.header}>
                    <Row justify="center" align="middle">
                        <Col>
                            <Image preview={false} src={modalCompanyLogo} alt="company logo" />
                        </Col>
                    </Row>
                </Header>
                <Content align="center" className={reviewNewStyles.contentWrapper}>
                    <span id='review-form-wrapper'>
                        <Row id='review-form' className=''>
                            <Col span={24} className='flex justify-center items-center'>
                                <Form
                                    {...layout}
                                    colon={false}
                                    labelAlign="right"
                                    form={form}
                                    labelCol={{
                                        span: 4,
                                    }}
                                    wrapperCol={{
                                        span: 16,
                                    }}
                                    onFinish={onFinish}
                                    onFinishFailed={onFinishFailed}
                                    requiredMark="true"
                                    initialValues={review}
                                >
                                    <Row className='flex'>
                                        <Col span={24}>
                                            <h4 className='text-2xl font-bold text-center mb-0'>Write A Review {modalCompanyId}  {modalSeoName}</h4>
                                        </Col>
                                    </Row>
                                    <div className='flex flex-col items-left justify-items-center'>
                                        <Form.Item>
                                            <Form.Item
                                                name="rating"
                                                required
                                                hasFeedback
                                                rules={[
                                                    {
                                                        required: true,
                                                        message: 'Please choose a rating!',
                                                    },
                                                ]}
                                            >
                                                <Rate allowHalf style={{ color: '#EE9924', fontSize: 25 }} />

                                            </Form.Item>
                                            <label>Rating</label>
                                        </Form.Item>
                                        <Form.Item>
                                            <Form.Item
                                                name="content"
                                                required
                                                hasFeedback
                                                rules={[
                                                    {
                                                        required: true,
                                                        message: 'Please write a review!',
                                                    }
                                                ]}
                                            >
                                                <TextArea
                                                    rows={4}
                                                />
                                            </Form.Item>
                                            <label>Write your Review</label>
                                        </Form.Item>
                                        {(showNotLoggedIn && <Row justify="center" align="middle">
                                            <Col span={24}>
                                                <Space direction="vertical" size="large">
                                                    <Alert message="Please login to continue!" type="error" showIcon />
                                                </Space>
                                            </Col>
                                        </Row>)}
                                        <Row className='flex item-center justify-center'>
                                            <Form.Item {...tailLayout}>
                                                <Button
                                                    type="primary"
                                                    htmlType="submit"
                                                    className={reviewNewStyles.compareButton}
                                                >
                                                    Submit
                                                </Button>
                                            </Form.Item>
                                        </Row>
                                    </div>
                                </Form>
                            </Col>
                        </Row>
                    </span>

                </Content>
            </Modal >
        </div>
    )
}