From 7b3f41b265f54a443bfccc4b9a711e9423b5775f Mon Sep 17 00:00:00 2001 From: NCanggoro Date: Thu, 21 Sep 2023 15:53:14 +0700 Subject: [PATCH] location details UI --- src/pages/LocationDetail/index.css | 18 ++ src/pages/LocationDetail/index.tsx | 434 ++++++++++++++++++++++++++++- src/utils/index.ts | 5 + src/utils/useAutosizeTextArea.ts | 21 ++ 4 files changed, 464 insertions(+), 14 deletions(-) create mode 100644 src/utils/useAutosizeTextArea.ts diff --git a/src/pages/LocationDetail/index.css b/src/pages/LocationDetail/index.css index 31bbf61..d0d80c5 100644 --- a/src/pages/LocationDetail/index.css +++ b/src/pages/LocationDetail/index.css @@ -63,6 +63,24 @@ img { border-bottom: 1px solid white; } +.ratingInput div input { + outline: none; +} + +.criticSortFilter { + float: right; +} + +.criticSortFilter .dropdownLabel { + cursor: pointer; +} + +.review-more-button a:hover { + background-color: #38444d; + color: white; + cursor: pointer; +} + @media screen and (max-width: 380px) { .header-link { white-space: nowrap; diff --git a/src/pages/LocationDetail/index.tsx b/src/pages/LocationDetail/index.tsx index 6d2cc0b..1cbede2 100644 --- a/src/pages/LocationDetail/index.tsx +++ b/src/pages/LocationDetail/index.tsx @@ -1,21 +1,44 @@ import { useLocation, useParams } from 'react-router-dom'; -import { getImagesByLocationService, getLocationService } from "../../services"; -import { useEffect, useState } from 'preact/hooks'; +import { ChangeEvent, TargetedEvent } from 'preact/compat'; +import { useEffect, useRef, useState } from 'preact/hooks'; import './index.css'; import Lightbox from 'yet-another-react-lightbox'; import useCallbackState from '../../types/state-callback'; import { EmptyLocationDetailResponse, LocationDetailResponse, LocationResponse, emptyLocationResponse } from './types'; +import { useAutosizeTextArea } from '../../utils'; +import { getImagesByLocationService, getLocationService } from "../../services"; +import { DefaultSeparator, SeparatorWithAnchor } from '../../components'; function LocationDetail() { const [locationDetail, setLocationDetail] = useCallbackState(EmptyLocationDetailResponse) const [locationImages, setLocationImages] = useState(emptyLocationResponse()) const [lightboxOpen, setLightboxOpen] = useState(false) + const [pageState, setPageState] = useState({ + critic_filter_name: 'highest rated', + critic_filter_type: 0, + show_sort: false + }) + const [reviewValue, setReviewValue] = useState({ + review_textArea: '', + score_input: '', + }) const [isLoading, setIsLoading] = useState(true) + + const textAreaRef = useRef(null); + useAutosizeTextArea(textAreaRef.current, reviewValue.review_textArea); + const { state } = useLocation(); const { id } = useParams() - async function getLocationDetail() { + const SORT_TYPE = [ + 'highest rated', + 'lowest rated', + 'newest', + 'oldest' + ] + + async function getLocationDetail(): Promise { try { const res = await getLocationService(Number(id)) setLocationDetail(res.data, (val) => { @@ -26,7 +49,7 @@ function LocationDetail() { } } - async function getImage(thumbnail?: String) { + async function getImage(thumbnail?: String): Promise { try { const res = await getImagesByLocationService({ page: 1, page_size: 15, location_id: Number(id) }) res.data.images.push({ src: thumbnail }) @@ -37,6 +60,28 @@ function LocationDetail() { setIsLoading(false) } + function handleTextAreaChange(e: ChangeEvent): void { + const val = e.target as HTMLTextAreaElement; + + setReviewValue({ + ...reviewValue, + review_textArea: val.value + }) + } + + function handleScoreInputChange(e: ChangeEvent): void { + const val = e.target as HTMLInputElement; + + setReviewValue({ + ...reviewValue, + score_input: val.value + }) + } + + function onChangeCriticsSort(e: TargetedEvent, sort_name: string, sort_type: number): void { + e.preventDefault() + setPageState({ show_sort: false, critic_filter_name: sort_name, critic_filter_type: sort_type }) + } useEffect(() => { getLocationDetail() @@ -55,7 +100,7 @@ function LocationDetail() {
-
+

{locationDetail?.detail.name}

@@ -164,13 +209,15 @@ function LocationDetail() {
-
-
+
+
-
+ + {/*
SIGN IN TO REVIEW
*/} +
-
+
@@ -180,22 +227,31 @@ function LocationDetail() { user
-
+
+
/ score
- +