From 1bae2751d08f01e70dce60f9ca6889f987ff3777 Mon Sep 17 00:00:00 2001
From: ganning127 <ganningxu@gmail.com>
Date: Sun, 22 Sep 2024 20:11:00 -0400
Subject: [PATCH 1/2] frontend UI for liking projects

---
 src/components/projectGallery/ProjectCard.tsx | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/projectGallery/ProjectCard.tsx b/src/components/projectGallery/ProjectCard.tsx
index 93e4414..d3b7d80 100644
--- a/src/components/projectGallery/ProjectCard.tsx
+++ b/src/components/projectGallery/ProjectCard.tsx
@@ -4,8 +4,9 @@ import { Card, Tag, Button } from "antd";
 import { Project } from "../../types/Project";
 import { User } from "../../types/User";
 import { TableGroup } from "../../types/TableGroup";
-import { HStack, Stack, Tooltip } from "@chakra-ui/react";
+import { HStack, Icon, Stack, Tooltip } from "@chakra-ui/react";
 import { InfoIcon } from "@chakra-ui/icons";
+import { LikeFilled, LikeOutlined } from "@ant-design/icons";
 
 interface Props {
   key: number;
@@ -17,6 +18,7 @@ interface Props {
 }
 
 const ProjectCard: React.FC<Props> = props => {
+  const [liked, setLiked] = React.useState(false);
   const colors = {
     FIRST: "gold",
     SECOND: "#C0C0C0",
@@ -77,7 +79,25 @@ const ProjectCard: React.FC<Props> = props => {
         )
       }
       headStyle={props.isWinner ? { backgroundColor: "#ebb521" } : {}}
-      extra={props.user && props.user.roles.admin && <Button onClick={props.onClick}>Edit</Button>}
+      extra={
+        <HStack gap={2}>
+
+          <Icon as={
+            liked ? LikeFilled : LikeOutlined
+          } color="black"  onClick={() => {
+            setLiked(!liked);
+
+            if (liked) {
+              // API call to unlike the project
+            } else {
+              // API call to like the project
+            }
+          }} />
+
+          {props.user && props.user.roles.admin && <Button onClick={props.onClick}>Edit</Button>}
+
+        </HStack>
+      }
       size="small"
     >
       <strong>Expo</strong>

From 228cafe017dc5104658e714e967fc5b81ee27dea Mon Sep 17 00:00:00 2001
From: ganning127 <ganningxu@gmail.com>
Date: Sun, 22 Sep 2024 20:21:51 -0400
Subject: [PATCH 2/2] added like count

---
 src/components/projectGallery/ProjectCard.tsx | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/projectGallery/ProjectCard.tsx b/src/components/projectGallery/ProjectCard.tsx
index d3b7d80..1f05ae2 100644
--- a/src/components/projectGallery/ProjectCard.tsx
+++ b/src/components/projectGallery/ProjectCard.tsx
@@ -19,6 +19,7 @@ interface Props {
 
 const ProjectCard: React.FC<Props> = props => {
   const [liked, setLiked] = React.useState(false);
+  const [numLikes, setNumLikes] = React.useState(0);
   const colors = {
     FIRST: "gold",
     SECOND: "#C0C0C0",
@@ -82,17 +83,22 @@ const ProjectCard: React.FC<Props> = props => {
       extra={
         <HStack gap={2}>
 
-          <Icon as={
-            liked ? LikeFilled : LikeOutlined
-          } color="black"  onClick={() => {
-            setLiked(!liked);
+          <HStack align='center'>
+            <Icon as={
+              liked ? LikeFilled : LikeOutlined
+            } color="black"  onClick={() => {
+              setLiked(!liked);
 
-            if (liked) {
-              // API call to unlike the project
-            } else {
-              // API call to like the project
-            }
-          }} />
+              if (liked) {
+                // API call to unlike the project
+                setNumLikes(numLikes - 1);
+              } else {
+                // API call to like the project
+                setNumLikes(numLikes + 1);
+              }
+            }} />
+            <span>{numLikes}</span>
+          </HStack>
 
           {props.user && props.user.roles.admin && <Button onClick={props.onClick}>Edit</Button>}