Merge pull request #146 from AarshShah9/Aarsh/Updating

Create Comments PR + Small UI Edits
AarshShah9 · May 27, 2024 · b0f17a3 · b0f17a3
2 parents 009b137 + 1394044
commit b0f17a3
Show file tree

Hide file tree

Showing 7 changed files with 184 additions and 68 deletions.
diff --git a/backend/controllers/post.controller.ts b/backend/controllers/post.controller.ts
@@ -423,6 +423,9 @@ export const getPostCommentsById = async (
           include: {
             user: true,
           },
+          orderBy: {
+            createdAt: "desc",
+          },
         },
       },
     });

diff --git a/frontend/src/components/CommentsBar.tsx b/frontend/src/components/CommentsBar.tsx
@@ -1,38 +1,71 @@
-import { View, StyleSheet, Image } from "react-native";
+import { View, StyleSheet, Image, TouchableOpacity } from "react-native";
 import { Text } from "react-native-paper";
 import ReplyChip from "./ReplyChip";
 import { commentType } from "~/screens/LookingForCommentsScreen";
 import { generateImageURL } from "~/lib/CDNFunctions";
 import { convertUTCToTimeAndDate } from "~/lib/timeFunctions";
+import useNavigationContext from "~/hooks/useNavigationContext";
 
 export default function CommentsBar(props: commentType) {
+  // 6 different heights for comment card
+  let heightCommentCard = 0;
+  if (props.content.length < 50) {
+    heightCommentCard = 100;
+  } else if (props.content.length < 100) {
+    heightCommentCard = 120;
+  } else if (props.content.length < 150) {
+    heightCommentCard = 140;
+  } else if (props.content.length < 200) {
+    heightCommentCard = 160;
+  } else if (props.content.length < 250) {
+    heightCommentCard = 180;
+  } else {
+    heightCommentCard = 200;
+  }
+
+  const { navigateTo } = useNavigationContext();
+
+  const navigateToProfile = () => {
+    navigateTo({ page: "UserProfile", id: props.userId });
+  };
+
   return (
-    <View style={styles.mainContainer}>
+    <View
+      style={[
+        styles.mainContainer,
+        {
+          height: heightCommentCard,
+        },
+      ]}
+    >
       {/* Header Bar */}
       <View style={styles.dataContainer}>
         <View style={styles.headerContainer}>
-          <View style={styles.profileContainer}>
-            {/* Profile Pic */}
-            {props?.userImage && (
-              <Image
+          <TouchableOpacity onPress={navigateToProfile}>
+            <View style={styles.profileContainer}>
+              {/* Profile Pic */}
+              {props?.userImage && (
+                <Image
+                  style={{
+                    height: 30,
+                    width: 30,
+                    backgroundColor: "grey",
+                    borderRadius: 90,
+                    marginBottom: 5,
+                  }}
+                  source={{ uri: generateImageURL(props.userImage) }}
+                />
+              )}
+              <Text
                 style={{
-                  height: 30,
-                  width: 30,
-                  backgroundColor: "grey",
-                  borderRadius: 90,
-                  marginBottom: 5,
+                  marginLeft: 8,
+                  fontWeight: "500",
                 }}
-                source={{ uri: generateImageURL(props.userImage) }}
-              />
-            )}
-            <Text
-              style={{
-                marginLeft: 8,
-              }}
-            >
-              {props.userName}
-            </Text>
-          </View>
+              >
+                {props.userName}
+              </Text>
+            </View>
+          </TouchableOpacity>
           <Text>{convertUTCToTimeAndDate(props.createdAt)}</Text>
         </View>
         {/* Comment Section */}
@@ -41,17 +74,16 @@ export default function CommentsBar(props: commentType) {
         </View>
       </View>
       {/* Up Vote and DownVote Section */}
-      <View style={styles.chipStyleContainer}>
-        <ReplyChip />
-      </View>
+      {/*<View style={styles.chipStyleContainer}>*/}
+      {/*  <ReplyChip />*/}
+      {/*</View>*/}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   mainContainer: {
     width: "auto",
-    height: 200,
     paddingHorizontal: 16,
     flexDirection: "column",
     justifyContent: "space-between",

diff --git a/frontend/src/components/EventMainCard.tsx b/frontend/src/components/EventMainCard.tsx
@@ -1,4 +1,4 @@
-import { StyleSheet, TouchableOpacity } from "react-native";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
 import { Card, Text } from "react-native-paper";
 import LocationChip from "./LocationChip";
 import { limitTextToMax } from "~/lib/helperFunctions";
@@ -21,16 +21,19 @@ export default function EventMainCard(props: EventType) {
           source={{ uri: generateImageURL(props.image) }}
           resizeMode="cover"
         />
+        <View style={styles.locationChipContainer}>
+          <LocationChip location={props.location} />
+        </View>
         <Card.Content style={styles.cardContent}>
           <Card.Content style={styles.topCardContent}>
             <Text style={styles.cardTitle}>
-              {limitTextToMax(props.title, 16)}
+              {limitTextToMax(props.title, 24)}
             </Text>
-            <Text style={styles.hostText}>{props.clubName}</Text>
           </Card.Content>
+
           <Card.Content style={styles.bottomCardContent}>
+            <Text style={styles.hostText}>{props.clubName}</Text>
             <Text style={styles.eventDateText}>{props.date}</Text>
-            <LocationChip location={props.location}></LocationChip>
           </Card.Content>
         </Card.Content>
       </Card>
@@ -41,9 +44,12 @@ export default function EventMainCard(props: EventType) {
 // prettier-ignore
 const styles = StyleSheet.create({
     // need to talk about these card widths and height
+    cardCoverContainer: {
+            position: 'relative',
+        },
     card: {
         width: "100%",
-        height: 300,
+        height: 280,
         marginTop: 16,
     },
     cardCover: {
@@ -76,4 +82,10 @@ const styles = StyleSheet.create({
         fontFamily: "Nunito-Reg",
         marginBottom: 8
     },
+    locationChipContainer: {
+        position: 'absolute',
+        bottom: 95,
+        right: 16,
+        zIndex: 1,
+    },
 })
diff --git a/frontend/src/components/EventSearchCard.tsx b/frontend/src/components/EventSearchCard.tsx
@@ -10,7 +10,6 @@ type EventSearchCardProps = {
 };
 
 export default function EventSearchCard(props: EventSearchCardProps) {
-
   return (
     <StyledCard>
       <StyledCover
@@ -27,7 +26,6 @@ export default function EventSearchCard(props: EventSearchCardProps) {
         </Card.Content>
         <Card.Content>
           <HostText>{props.clubName}</HostText>
-          {/*<Card.Content></Card.Content>*/}
         </Card.Content>
       </Card.Content>
     </StyledCard>

diff --git a/frontend/src/lib/apiFunctions/LookingFor.ts b/frontend/src/lib/apiFunctions/LookingFor.ts
@@ -35,3 +35,10 @@ export const attendPost = async (id: string) => {
     params: { id },
   });
 };
+
+export const commentOnPost = async (id: string, comment: string) => {
+  return await CBRequest("POST", `/api/post/:id/comments/`, {
+    params: { id },
+    body: { content: comment },
+  });
+};
diff --git a/frontend/src/lib/requestHelpers.ts b/frontend/src/lib/requestHelpers.ts
@@ -157,6 +157,7 @@ const allowedEndpoints = [
   "/api/post/:id",
   "/api/post/:id/comments",
   "/api/post/:id/toggleAttendance",
+  "/api/post/:id/comments/",
 
   // profile related endpoints
   "/api/profile/saved",
@@ -208,7 +209,9 @@ export type IdRequiredEndPoints =
   | "/api/post/:id/toggleAttendance"
   | "/api/profile/items/:id";
 
-export type IdAndBodyRequiredEndPoints = "/api/orgs/:id";
+export type IdAndBodyRequiredEndPoints =
+  | "/api/orgs/:id"
+  | "/api/post/:id/comments/";
 
 export type IdRequiredEndpointOptions = Omit<RequestArgs, "body" | "params"> & {
   params: { id: string };