accept/reject liane member from chat

oxymore-tech · Oct 11, 2024 · 0dbb5f4 · 0dbb5f4
1 parent 1994d56
commit 0dbb5f4
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 3 deletions.
diff --git a/app/src/components/trip/MemberRequestedButton.tsx b/app/src/components/trip/MemberRequestedButton.tsx
@@ -0,0 +1,43 @@
+import { AppText } from "@/components/base/AppText.tsx";
+import { AppColors } from "@/theme/colors.ts";
+import { CoLiane, LianeMessage, MemberRequested } from "@liane/common";
+import React, { useCallback, useContext } from "react";
+import { Row } from "@/components/base/AppLayout.tsx";
+import { AppIcon } from "@/components/base/AppIcon.tsx";
+import { AppPressableOverlay } from "@/components/base/AppPressable.tsx";
+import { AppContext } from "@/components/context/ContextProvider.tsx";
+
+export const MemberRequestedButton = ({ message, coLiane }: { message: LianeMessage<MemberRequested>; coLiane: CoLiane }) => {
+  const { services } = useContext(AppContext);
+
+  const handleAccept = useCallback(async () => {
+    await services.community.accept(message.content.lianeRequest, coLiane.id!);
+  }, [coLiane.id, message.content.lianeRequest, services.community]);
+
+  const handleReject = useCallback(async () => {
+    await services.community.reject(message.content.lianeRequest, coLiane.id!);
+  }, [coLiane.id, message.content.lianeRequest, services.community]);
+
+  return (
+    <Row>
+      <AppPressableOverlay
+        backgroundStyle={{ backgroundColor: AppColors.primaryColor, borderRadius: 8 }}
+        style={{ paddingHorizontal: 12, paddingVertical: 6 }}
+        onPress={handleAccept}>
+        <Row style={{ alignItems: "center" }} spacing={6}>
+          <AppIcon name={"thumb-up"} color={AppColors.white} size={28} />
+          <AppText style={{ color: AppColors.white, fontWeight: "bold", fontSize: 18 }}>Accepter</AppText>
+        </Row>
+      </AppPressableOverlay>
+      <AppPressableOverlay
+        backgroundStyle={{ backgroundColor: AppColors.primaryColor, borderRadius: 8 }}
+        style={{ paddingHorizontal: 12, paddingVertical: 6 }}
+        onPress={handleReject}>
+        <Row style={{ alignItems: "center" }} spacing={6}>
+          <AppIcon name={"thumb-up"} color={AppColors.white} size={28} />
+          <AppText style={{ color: AppColors.white, fontWeight: "bold", fontSize: 18 }}>Décliner</AppText>
+        </Row>
+      </AppPressableOverlay>
+    </Row>
+  );
+};
diff --git a/app/src/screens/communities/MessageBubble.tsx b/app/src/screens/communities/MessageBubble.tsx
@@ -1,11 +1,12 @@
-import { capitalize, CoLiane, LianeMessage, Ref, User } from "@liane/common";
+import { capitalize, CoLiane, LianeMessage, MemberRequested, Ref, User } from "@liane/common";
 import React from "react";
 import { View } from "react-native";
 import { AppColorPalettes, AppColors } from "@/theme/colors";
 import { Column, Row } from "@/components/base/AppLayout";
 import { AppText } from "@/components/base/AppText";
 import { AppLocalization } from "@/api/i18n.ts";
 import { UserPicture } from "@/components/UserPicture.tsx";
+import { MemberRequestedButton } from "@/components/trip/MemberRequestedButton.tsx";
 
 export const MessageBubble = ({
   coLiane,
@@ -54,18 +55,22 @@ export const MessageBubble = ({
             marginLeft: isSender ? 56 : 0
           }}
           spacing={4}>
-          {message.content.type === "Text" ? (
+          {message.content.type === "Text" && (
             <>
               <AppText numberOfLines={-1} style={{ fontSize: 15, color }}>
                 {message.content.value}
               </AppText>
               <AppText style={{ fontSize: 12, alignSelf: isSender ? "flex-end" : "flex-start", color }}>{date}</AppText>
             </>
-          ) : (
+          )}
+          {message.content.type !== "Text" && (
             <>
               <AppText numberOfLines={-1} style={{ fontSize: 12 }}>
                 {message.content.value}
               </AppText>
+              {message.content.type === "MemberRequested" && (
+                <MemberRequestedButton message={message as LianeMessage<MemberRequested>} coLiane={coLiane} />
+              )}
               <AppText style={{ fontSize: 12, alignSelf: isSender ? "flex-end" : "flex-start", color }}>{date}</AppText>
             </>
           )}