Dev 619 implement heart feature for question panel

frontend/components/question/QuestionPanel.tsx

@@ -1,5 +1,8 @@
-import { Button, Heading, Pane, Paragraph, Text } from 'evergreen-ui';
+import { useState } from 'react';
 
+import { Button, Heading, Pane, Paragraph, Text, HeartIcon } from 'evergreen-ui';
+
+import { heartQuestion } from '../../api/heartService';
 import { formatTimePassed } from '../utils';
 
 import styles from './QuestionPanel.module.css';
@@ -11,6 +14,9 @@ interface QuestionPanelProps {
 	details: string;
 	create_time: Date;
 	user_is_anonymous: boolean;
+	initialHearts: number;
+	initialIsHearted: boolean;
+	questionId: string;
 	onBack: () => void;
 }
 
@@ -34,9 +40,22 @@ const QuestionPanel = ({
 	details,
 	create_time,
 	user_is_anonymous,
+	initialHearts,
+	initialIsHearted,
+	questionId,
 	onBack,
 }: QuestionPanelProps) => {
 	const displayInformation = formatMetadata(user, tags, create_time, user_is_anonymous);
+	const [hearts, setHearts] = useState(initialHearts);
+	const [isHearted, setIsHearted] = useState(initialIsHearted);
+
+	async function handleHeart() {
+		const response = await heartQuestion(questionId);
+		if (response) {
+			setHearts(response.hearts);
+			setIsHearted(response.is_hearted);
+		}
+	}
 
 	return (
 		<Pane className={styles.container}>
@@ -49,6 +68,22 @@ const QuestionPanel = ({
 				</Pane>
 				<Text className={styles.metadata}>{displayInformation}</Text>
 				<Paragraph className={styles.details}>{details}</Paragraph>
+
+				<Pane className={styles.footer}>
+					<Pane display='flex' flexDirection='column' alignItems='center'>
+						<Button
+							icon={HeartIcon}
+							appearance='minimal'
+							height={24}
+							iconSize={14}
+							color={isHearted ? 'red500' : 'gray400'}
+							onClick={handleHeart}
+						/>
+						<Text size={300} color='muted'>
+							{hearts}
+						</Text>
+					</Pane>
+				</Pane>
 			</Pane>
 		</Pane>
 	);