feat: make component shop detail

gdsc-ssu · Aug 24, 2023 · d725a9e · d725a9e
1 parent 4e72d14
commit d725a9e
Showing 1 changed file with 81 additions and 19 deletions.
diff --git a/source/component/ShopDetail.js b/source/component/ShopDetail.js
@@ -25,7 +25,7 @@ import theme from '../Theme.js';
  * }
  */
 const ShopDetail = ({Id, setId}) => {
-	const data = {
+	const initialData = {
 		id: '1',
 		title: 'The 5th Wave',
 		location: '서울시 동작구 상도로 369',
@@ -39,22 +39,28 @@ const ShopDetail = ({Id, setId}) => {
 			},
 		],
 		starRate: 4.5,
-		reviews: [],
+		reviews: [
+			{writer: 'hoyeon', content: 'good', starRate: 5},
+			{writer: 'hoyeon', content: '맛있네요', starRate: 3},
+		],
 	};
 
-	const starRateRounded = Math.round(data.starRate);
-
-	const starRateString = '⭐'.repeat(starRateRounded);
+	const [data, setData] = useState(initialData);
 
 	const [command, setCommand] = useState('');
 
+	const [isAddReview, setIsAddReview] = useState(false);
+	const [currentReview, setCurrentReview] = useState('');
+	const [currentRate, setCurrentRate] = useState(1);
+
 	const onCommandSubmit = () => {
 		if (command === ':q') {
 			setId(0);
 		}
 		if (command === ':ar') {
 			// TODO : add review
 			setCommand('');
+			setIsAddReview(true);
 		}
 		if (command === ':lm') {
 			// TODO : load more reviews
@@ -64,6 +70,74 @@ const ShopDetail = ({Id, setId}) => {
 		setCommand('');
 	};
 
+	useInput((input, key) => {
+		if (isAddReview) {
+			if (key.upArrow && currentRate < 5) {
+				setCurrentRate(prevRate => prevRate + 1);
+			} else if (key.downArrow && currentRate > 1) {
+				setCurrentRate(prevRate => prevRate - 1);
+			}
+		}
+	});
+
+	const onReivewSubmit = () => {
+		// TODO : add review
+		setIsAddReview(false);
+		const updatedReviews = [
+			...data.reviews,
+			{
+				writer: 'hoyeon',
+				content: currentReview,
+				starRate: currentRate,
+			},
+		];
+
+		setData({...data, reviews: updatedReviews});
+		setCurrentReview('');
+		setCurrentRate(1);
+	};
+
+	return (
+		<>
+			<ShopView data={data} />
+			{!isAddReview ? (
+				<>
+					<Text color={'red'}>Commands</Text>
+					<Box>
+						<Text color={theme.commandFirst}>:q - quit</Text>
+						<Spacer />
+						<Text color={theme.commandSecond}>:lm - load more reviews </Text>
+						<Spacer />
+						<Text color={theme.commandThird}>:ar - add review</Text>
+					</Box>
+					<TextInput
+						value={command}
+						onChange={setCommand}
+						onSubmit={onCommandSubmit}
+					/>
+				</>
+			) : (
+				<>
+					<TextInput
+						value={currentReview}
+						onChange={setCurrentReview}
+						onSubmit={onReivewSubmit}
+					/>
+
+					<Box>
+						<Text>{currentRate}</Text>
+						<Spacer />
+						<Text>⬆️ / ⬇️ to set rating</Text>
+					</Box>
+				</>
+			)}
+		</>
+	);
+};
+
+const ShopView = ({data}) => {
+	const starRateString = '⭐'.repeat(Math.round(data.starRate));
+
 	return (
 		<>
 			<Text>{'{'}</Text>
@@ -109,7 +183,7 @@ const ShopDetail = ({Id, setId}) => {
 					</Text>
 					<Text>
 						"reviews" : {'['}
-						{data.reviews.length == !0 ? <Newline /> : <></>}
+						{data.reviews.length ? <Newline /> : <></>}
 						{data.reviews.map((item, index, array) => (
 							<Text key={item.id}>
 								{' '}
@@ -123,20 +197,8 @@ const ShopDetail = ({Id, setId}) => {
 				</Text>
 			</Box>
 			<Text>{'}'}</Text>
-			<Text color={'red'}>Commands</Text>
-			<Box>
-				<Text color={theme.commandFirst}>:q - quit</Text>
-				<Spacer />
-				<Text color={theme.commandSecond}>:lm - load more reviews </Text>
-				<Spacer />
-				<Text color={theme.commandThird}>:ar - add review</Text>
-			</Box>
-			<TextInput
-				value={command}
-				onChange={setCommand}
-				onSubmit={onCommandSubmit}
-			/>
 		</>
 	);
 };
+
 export default ShopDetail;