From 43f494078ea541af9ec416d731bf52f67dbba2e9 Mon Sep 17 00:00:00 2001
From: seanquiambao <slquiambao03@gmail.com>
Date: Mon, 19 Aug 2024 16:15:48 -0700
Subject: [PATCH 1/2] finished styling for comment

---
 assets/icons/Send.svg            |  3 +++
 components/dashboard/comment.tsx | 30 ++++++++++++++++++++++++++++++
 components/dashboard/index.tsx   | 11 ++++++++---
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 assets/icons/Send.svg
 create mode 100644 components/dashboard/comment.tsx

diff --git a/assets/icons/Send.svg b/assets/icons/Send.svg
new file mode 100644
index 0000000..5e7e2e3
--- /dev/null
+++ b/assets/icons/Send.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.30776 11.1923L14.1539 6.34619M19.1113 3.38867L15.0207 16.6833C14.6541 17.8747 14.4706 18.4707 14.1544 18.6683C13.8802 18.8396 13.5406 18.8683 13.2419 18.7443C12.8975 18.6014 12.618 18.0433 12.0603 16.928L9.46938 11.7461C9.38089 11.5691 9.3366 11.481 9.27749 11.4043C9.22504 11.3363 9.1645 11.2749 9.09645 11.2225C9.02151 11.1647 8.93486 11.1214 8.76577 11.0369L3.57192 8.43994C2.45662 7.88229 1.89892 7.60321 1.75601 7.25879C1.63207 6.9601 1.66033 6.62023 1.83169 6.34597C2.02928 6.02974 2.62523 5.84603 3.81704 5.47932L17.1116 1.38867C18.0486 1.10038 18.5173 0.956345 18.8337 1.07253C19.1094 1.17373 19.3267 1.39084 19.4279 1.66651C19.544 1.98283 19.3999 2.45126 19.1119 3.38729L19.1113 3.38867Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/components/dashboard/comment.tsx b/components/dashboard/comment.tsx
new file mode 100644
index 0000000..5736e56
--- /dev/null
+++ b/components/dashboard/comment.tsx
@@ -0,0 +1,30 @@
+import { View, Pressable, TextInput, InputAccessoryView } from "react-native";
+import { Image, ImageSource } from "expo-image";
+import Send from "@/assets/icons/Send.svg";
+interface props {
+  photo: ImageSource;
+}
+
+const Comment = ({ photo }: props) => {
+  return (
+    <InputAccessoryView backgroundColor="white">
+      <View className="bg-white p-2 border-t border-beatdrop-border/50 flex-row items-center justify-between">
+        <View className="w-full flex flex-row items-center justify-between">
+          <Image
+            source={photo}
+            style={{ height: 35, width: 35, borderRadius: 999, marginLeft: 4 }}
+          />
+          <TextInput
+            className="placeholder:text-beatdrop-placeholder w-9/12 pl-2"
+            placeholder="Write a comment"
+          />
+          <Pressable className="flex flex-col bg-beatdrop-primary rounded-full items-center justify-center w-12 h-12 pr-0.5">
+            <Image source={Send} style={{ height: 20, width: 20 }} />
+          </Pressable>
+        </View>
+      </View>
+    </InputAccessoryView>
+  );
+};
+
+export default Comment;
diff --git a/components/dashboard/index.tsx b/components/dashboard/index.tsx
index 24c149e..ce9c8b3 100644
--- a/components/dashboard/index.tsx
+++ b/components/dashboard/index.tsx
@@ -6,7 +6,7 @@ import BottomSheet, {
 } from "@gorhom/bottom-sheet";
 import { Image } from "expo-image";
 import Like from "@/assets/icons/Like.svg";
-import Comment from "@/assets/icons/Comment.svg";
+import CommentIcon from "@/assets/icons/Comment.svg";
 import Beat from "@/components/global/beat";
 import moment from "moment";
 import MapView from "react-native-maps";
@@ -15,6 +15,7 @@ import Entypo from "@expo/vector-icons/Entypo";
 import { comment, drop, beat } from "@/types";
 import Toolbar from "./toolbar";
 import Toaster from "@/utils/toast";
+import Comment from "@/components/dashboard/comment";
 
 const comments: comment[] = [
   {
@@ -173,7 +174,7 @@ const DashboardScreen = () => {
           </View>
           <View className="flex flex-row gap-2">
             <Image source={Like} style={{ width: 22, height: 22 }} />
-            <Image source={Comment} style={{ width: 22, height: 22 }} />
+            <Image source={CommentIcon} style={{ width: 22, height: 22 }} />
           </View>
         </View>
         <Beat
@@ -244,7 +245,10 @@ const DashboardScreen = () => {
                 </View>
                 <View className="flex flex-row gap-2">
                   <Image source={Like} style={{ width: 22, height: 22 }} />
-                  <Image source={Comment} style={{ width: 22, height: 22 }} />
+                  <Image
+                    source={CommentIcon}
+                    style={{ width: 22, height: 22 }}
+                  />
                 </View>
               </View>
               <Beat
@@ -291,6 +295,7 @@ const DashboardScreen = () => {
                 )}
               </View>
             </View>
+            <Comment photo={comments[2].photo} />
           </BottomSheetScrollView>
         )}
       </BottomSheet>

From 0e40073f1d4b816907655bf4aa8d452c896d55c2 Mon Sep 17 00:00:00 2001
From: seanquiambao <slquiambao03@gmail.com>
Date: Mon, 19 Aug 2024 17:04:15 -0700
Subject: [PATCH 2/2] finished functionality

---
 components/dashboard/comment.tsx | 32 ++++++++++++++++++++++++++++++--
 components/dashboard/index.tsx   |  4 ++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/comment.tsx b/components/dashboard/comment.tsx
index 5736e56..418bc4a 100644
--- a/components/dashboard/comment.tsx
+++ b/components/dashboard/comment.tsx
@@ -1,11 +1,35 @@
 import { View, Pressable, TextInput, InputAccessoryView } from "react-native";
 import { Image, ImageSource } from "expo-image";
 import Send from "@/assets/icons/Send.svg";
+import { beat, drop, comment } from "@/types";
+import { useState } from "react";
 interface props {
   photo: ImageSource;
+  beat: Record<string, never> | (beat & drop);
+  setBeat: any;
 }
 
-const Comment = ({ photo }: props) => {
+const Comment = ({ photo, beat, setBeat }: props) => {
+  const [message, setMessage] = useState("");
+
+  const handlePress = () => {
+    if (message.length === 0) return;
+    console.log(message);
+    const NEWCOMMENT: comment = {
+      timestamp: new Date(),
+      username: "bobby",
+      likes: 150,
+      comment: message,
+      photo: {
+        uri: "https://media.licdn.com/dms/image/C5603AQFRF-WuzzVSPw/profile-displayphoto-shrink_200_200/0/1648079904789?e=2147483647&v=beta&t=iQ5MB_agi9aY0JUDxSXlAEa3icdQWn8l9twByRP5ItQ",
+      },
+    };
+
+    setBeat({
+      ...beat,
+      comments: [NEWCOMMENT, ...(beat.comments ? beat.comments : [])],
+    });
+  };
   return (
     <InputAccessoryView backgroundColor="white">
       <View className="bg-white p-2 border-t border-beatdrop-border/50 flex-row items-center justify-between">
@@ -17,8 +41,12 @@ const Comment = ({ photo }: props) => {
           <TextInput
             className="placeholder:text-beatdrop-placeholder w-9/12 pl-2"
             placeholder="Write a comment"
+            onChangeText={setMessage}
           />
-          <Pressable className="flex flex-col bg-beatdrop-primary rounded-full items-center justify-center w-12 h-12 pr-0.5">
+          <Pressable
+            className="flex flex-col bg-beatdrop-primary rounded-full items-center justify-center p-3"
+            onPress={handlePress}
+          >
             <Image source={Send} style={{ height: 20, width: 20 }} />
           </Pressable>
         </View>
diff --git a/components/dashboard/index.tsx b/components/dashboard/index.tsx
index ce9c8b3..17b2a15 100644
--- a/components/dashboard/index.tsx
+++ b/components/dashboard/index.tsx
@@ -92,7 +92,7 @@ const beats: (drop & beat)[] = [
     artist: "G(I)-DLE",
     description:
       "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
-    comments: comments.slice(0, 1),
+    comments: [],
   },
   {
     uid: "1",
@@ -295,7 +295,7 @@ const DashboardScreen = () => {
                 )}
               </View>
             </View>
-            <Comment photo={comments[2].photo} />
+            <Comment photo={comments[2].photo} beat={beat} setBeat={setBeat} />
           </BottomSheetScrollView>
         )}
       </BottomSheet>