nochill/hilingriviw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

handling erorr response and empty reviews

Browse Source
This commit is contained in:
NCanggoro 2023-09-28 10:29:31 +07:00
parent 96185ab95a
commit 788610292e
4 changed files with 84 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
src/pages/LocationDetail/index.tsx
View File

@ -86,7 +86,12 @@ function LocationDetail() {
setCurrentUserReview(res.data) setCurrentUserReview(res.data)
setPageState({ ...pageState, enable_post: false}) setPageState({ ...pageState, enable_post: false})
} catch (error) { } catch (error) {
alert(error) console.log(error)
let err = error as IHttpResponse;
if(err.status == 404) {
return
}
alert(err.error.response.data.message)
} }
} }
@ -390,67 +395,77 @@ function LocationDetail() {
} }
<div name={'CRTICITS REVIEW'} style={{ margin: '50px 0', textAlign: 'left' }}> <div name={'CRTICITS REVIEW'} style={{ margin: '50px 0', textAlign: 'left' }}>
<SeparatorWithAnchor pageName={"critic's review"} pageLink='#' /> <SeparatorWithAnchor pageName={"critic's review"} pageLink='#' />
<div className={'criticSortFilter'}> {locationDetail.critics_review.length > 0 ?
<div className={'inline-block text-sm'}>Sort by: </div> <>
<a className={'dropdownLabel'} onClick={() => setPageState({ ...pageState, show_sort: !pageState.show_sort })}> <div className={'criticSortFilter'}>
<p className={'ml-2 inline-block capitalize text-sm'}>{pageState.critic_filter_name}</p> <div className={'inline-block text-sm'}>Sort by: </div>
<svg style={{ display: 'inline-block' }} fill={"currentColor"} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" /></svg> <a className={'dropdownLabel'} onClick={() => setPageState({ ...pageState, show_sort: !pageState.show_sort })}>
</a> <p className={'ml-2 inline-block capitalize text-sm'}>{pageState.critic_filter_name}</p>
<div className={'dropdown-content text-sm bg-secondary'} style={pageState.show_sort ? { display: 'block' } : ''}> <svg style={{ display: 'inline-block' }} fill={"currentColor"} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" /></svg>
{SORT_TYPE.map((x, index) => (
<a onClick={(e) => onChangeCriticsSort(e, x, index)} className={'block pt-1 capitalize'}>{x}</a>
))}
</div>
</div>
<div style={{ clear: 'both' }} />
{locationDetail.critics_review.map(x => (
<div className={''} style={{ padding: '15px 0' }}>
<div style={{ float: 'left' }}>
<div style={{ fontSize: 20, marginRight: 20, textAlign: 'center', width: 55, marginBottom: 3 }}>
{x.score}
</div>
<div style={{ height: 4, width: 55, position: 'relative', backgroundColor: '#d8d8d8' }}>
<div style={{ height: 4, backgroundColor: '#85ce73', width: `${x.score}%` }} />
</div>
</div>
<div className={'mr-3'} style={{ display: 'inline-block', width: 40 }}>
<a href="#">
<img
loading={'lazy'}
style={{ width: '100%' }}
src={x.user_avatar.Valid ? x.user_avatar.String.toString() : 'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
/>
</a> </a>
</div> <div className={'dropdown-content text-sm bg-secondary'} style={pageState.show_sort ? { display: 'block' } : ''}>
<div style={{ display: 'inline-block', verticalAlign: 'top' }}> {SORT_TYPE.map((x, index) => (
<div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}> <a onClick={(e) => onChangeCriticsSort(e, x, index)} className={'block pt-1 capitalize'}>{x}</a>
<a> ))}
<span>{x.username}</span>
</a>
</div> </div>
</div> </div>
<div style={{ fontSize: 15, lineHeight: '24px', margin: '5px 75px 1px' }}> <div style={{ clear: 'both' }} />
<CustomInterweave
content={x.comments} {locationDetail.critics_review.map(x => (
/> <div className={''} style={{ padding: '15px 0' }}>
</div> <div style={{ float: 'left' }}>
<div className={'reviewLinks'} style={{ marginLeft: 72 }}> <div style={{ fontSize: 20, marginRight: 20, textAlign: 'center', width: 55, marginBottom: 3 }}>
<div className={'mr-2'} style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}> {x.score}
<a className={'text-sm'} href={'#'}> </div>
<svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg> <div style={{ height: 4, width: 55, position: 'relative', backgroundColor: '#d8d8d8' }}>
<div className={'inline-block'}>Video</div> <div style={{ height: 4, backgroundColor: '#85ce73', width: `${x.score}%` }} />
</a> </div>
</div>
<div className={'mr-3'} style={{ display: 'inline-block', width: 40 }}>
<a href="#">
<img
loading={'lazy'}
style={{ width: '100%' }}
src={x.user_avatar.Valid ? x.user_avatar.String.toString() : 'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
/>
</a>
</div>
<div style={{ display: 'inline-block', verticalAlign: 'top' }}>
<div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}>
<a>
<span>{x.username}</span>
</a>
</div>
</div>
<div style={{ fontSize: 15, lineHeight: '24px', margin: '5px 75px 1px' }}>
<CustomInterweave
content={x.comments}
/>
</div>
<div className={'reviewLinks'} style={{ marginLeft: 72 }}>
<div className={'mr-2'} style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
<a className={'text-sm'} href={'#'}>
<svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
<div className={'inline-block'}>Video</div>
</a>
</div>
<div style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
<a className={'text-sm'} href={'#'}>
<svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
<div className={'inline-block'}>Instagram</div>
</a>
</div>
</div>
</div> </div>
<div style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}> ))}
<a className={'text-sm'} href={'#'}> </>
<svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
<div className={'inline-block'}>Instagram</div> :
</a> <>
</div> <span className={'text-sm italic'}>No Critics review to display</span>
</div> </>
</div>
))} }
</div> </div>
<div name={'USERS REVIEW'} style={{ margin: '50px 0', textAlign: 'left' }}> <div name={'USERS REVIEW'} style={{ margin: '50px 0', textAlign: 'left' }}>

2
src/services/auth.ts
View File

@ -2,7 +2,7 @@ import { AxiosError } from "axios";
import { LOGIN_URI, SIGNUP_URI } from "../constants/api"; import { LOGIN_URI, SIGNUP_URI } from "../constants/api";
import { client } from "./config"; import { client } from "./config";
const initialState: IEmptyResponseState = { const initialState: IHttpResponse = {
data: null, data: null,
error: AxiosError error: AxiosError
} }

12
src/services/review.ts
View File

@ -2,9 +2,10 @@ import { AxiosError } from "axios"
import { client } from "./config"; import { client } from "./config";
import { GET_CURRENT_USER_REVIEW_LOCATION_URI, POST_REVIEW_LOCATION_URI } from "../constants/api"; import { GET_CURRENT_USER_REVIEW_LOCATION_URI, POST_REVIEW_LOCATION_URI } from "../constants/api";
const initialState: IEmptyResponseState = { const initialState: IHttpResponse = {
data: null, data: null,
error: AxiosError error: AxiosError,
status: 0,
} }
interface postReviewLocationReq { interface postReviewLocationReq {
@ -29,7 +30,7 @@ async function postReviewLocation(req: postReviewLocationReq) {
} }
} }
async function getCurrentUserLocationReviewService(location_id: number) { async function getCurrentUserLocationReviewService(location_id: number): Promise<IHttpResponse> {
const newState = { ...initialState }; const newState = { ...initialState };
try { try {
const response = await client({ method: 'GET', url: `${GET_CURRENT_USER_REVIEW_LOCATION_URI}/${location_id}`, withCredentials: true}) const response = await client({ method: 'GET', url: `${GET_CURRENT_USER_REVIEW_LOCATION_URI}/${location_id}`, withCredentials: true})
@ -37,7 +38,10 @@ async function getCurrentUserLocationReviewService(location_id: number) {
newState.error = null newState.error = null
return newState return newState
} catch (err) { } catch (err) {
throw err; let error = err as AxiosError;
newState.error = error
newState.status = error.response?.status;
throw(newState)
} }
} }

3
src/types/common.ts
View File

@ -7,7 +7,8 @@ interface GetRequestPagination {
} }
interface IEmptyResponseState { interface IHttpResponse {
data: any, data: any,
error: any, error: any,
status?: number,
}; };