Last active
June 21, 2023 23:04
-
-
Save thehashrocket/39b9564e93aa3cf7cb11de382ecca1cb to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment