Collaboration
Add: - Collaboration/GroupChatSection.tsx : fitur room chat Fix: - Clear code: Hapus console pada beberapa file ### No Issue
This commit is contained in:
222
screens/Collaboration/GroupChatSection.back
Normal file
222
screens/Collaboration/GroupChatSection.back
Normal file
@@ -0,0 +1,222 @@
|
||||
// ChatScreen.tsx
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
Dimensions,
|
||||
Keyboard,
|
||||
Platform,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import {
|
||||
SafeAreaView
|
||||
} from "react-native-safe-area-context";
|
||||
|
||||
type Message = {
|
||||
id: string;
|
||||
text: string;
|
||||
sender: "me" | "other";
|
||||
timestamp: Date;
|
||||
};
|
||||
|
||||
const { height: SCREEN_HEIGHT } = Dimensions.get("window");
|
||||
|
||||
const ChatScreen: React.FC = () => {
|
||||
const [messages, setMessages] = useState<Message[]>([
|
||||
{
|
||||
id: "1",
|
||||
text: "Hai!",
|
||||
sender: "other",
|
||||
timestamp: new Date(Date.now() - 300000),
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
text: "Halo juga!",
|
||||
sender: "me",
|
||||
timestamp: new Date(Date.now() - 240000),
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
text: "Apa kabar?",
|
||||
sender: "other",
|
||||
timestamp: new Date(Date.now() - 180000),
|
||||
},
|
||||
]);
|
||||
const [inputText, setInputText] = useState<string>("");
|
||||
const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
|
||||
const scrollViewRef = useRef<ScrollView>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const show = Keyboard.addListener("keyboardDidShow", (e) => {
|
||||
let kbHeight = e.endCoordinates.height;
|
||||
// Di Android dengan edge-to-edge, kadang tinggi termasuk navigation bar
|
||||
if (Platform.OS === "android") {
|
||||
// Batasi maksimal 60% layar
|
||||
kbHeight = Math.min(kbHeight, SCREEN_HEIGHT * 2);
|
||||
}
|
||||
setKeyboardHeight(kbHeight);
|
||||
});
|
||||
|
||||
const hide = Keyboard.addListener("keyboardDidHide", () => {
|
||||
setKeyboardHeight(0);
|
||||
});
|
||||
|
||||
return () => {
|
||||
show.remove();
|
||||
hide.remove();
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Scroll ke bawah setelah pesan baru atau keyboard muncul
|
||||
const timer = setTimeout(() => {
|
||||
scrollViewRef.current?.scrollToEnd({ animated: true });
|
||||
}, 100); // delay kecil untuk pastikan layout stabil
|
||||
return () => clearTimeout(timer);
|
||||
}, [messages, keyboardHeight]);
|
||||
|
||||
const handleSend = () => {
|
||||
if (!inputText.trim()) return;
|
||||
setMessages((prev) => [
|
||||
...prev,
|
||||
{
|
||||
id: Date.now().toString(),
|
||||
text: inputText.trim(),
|
||||
sender: "me",
|
||||
timestamp: new Date(),
|
||||
},
|
||||
]);
|
||||
setInputText("");
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.safeArea}>
|
||||
{/* Kontainer utama dengan padding bottom = tinggi keyboard */}
|
||||
<View style={[styles.container, { paddingBottom: keyboardHeight }]}>
|
||||
<ScrollView
|
||||
ref={scrollViewRef}
|
||||
style={styles.messagesContainer}
|
||||
contentContainerStyle={styles.messagesContent}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
{messages.map((msg) => (
|
||||
<View
|
||||
key={msg.id}
|
||||
style={[
|
||||
styles.messageBubble,
|
||||
msg.sender === "me" ? styles.myMessage : styles.otherMessage,
|
||||
]}
|
||||
>
|
||||
<Text style={styles.messageText}>{msg.text}</Text>
|
||||
<Text style={styles.timestamp}>
|
||||
{msg.timestamp.toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
|
||||
<View style={[styles.inputContainer, { paddingBottom: 10 }]}>
|
||||
<TextInput
|
||||
value={inputText}
|
||||
onChangeText={setInputText}
|
||||
placeholder="Ketik pesan..."
|
||||
style={styles.textInput}
|
||||
multiline
|
||||
blurOnSubmit={false}
|
||||
scrollEnabled={Platform.OS === "ios"} // ✅ Aktifkan scroll hanya di iOS
|
||||
textAlignVertical="top"
|
||||
/>
|
||||
<TouchableOpacity
|
||||
style={styles.sendButton}
|
||||
onPress={handleSend}
|
||||
disabled={!inputText.trim()}
|
||||
>
|
||||
<Text style={styles.sendButtonText}>Kirim</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
safeArea: {
|
||||
flex: 1,
|
||||
backgroundColor: "#e5ddd5",
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#e5ddd5",
|
||||
},
|
||||
messagesContainer: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
messagesContent: {
|
||||
paddingBottom: 10,
|
||||
},
|
||||
messageBubble: {
|
||||
maxWidth: "80%",
|
||||
padding: 10,
|
||||
marginVertical: 4,
|
||||
borderRadius: 12,
|
||||
},
|
||||
myMessage: {
|
||||
alignSelf: "flex-end",
|
||||
backgroundColor: "#dcf8c6",
|
||||
},
|
||||
otherMessage: {
|
||||
alignSelf: "flex-start",
|
||||
backgroundColor: "#ffffff",
|
||||
},
|
||||
messageText: {
|
||||
fontSize: 16,
|
||||
color: "#000",
|
||||
},
|
||||
timestamp: {
|
||||
fontSize: 10,
|
||||
color: "#666",
|
||||
textAlign: "right",
|
||||
marginTop: 4,
|
||||
},
|
||||
inputContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-end",
|
||||
paddingHorizontal: 10,
|
||||
paddingTop: 8,
|
||||
backgroundColor: "#f0f0f0",
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: "#ddd",
|
||||
},
|
||||
textInput: {
|
||||
flex: 1,
|
||||
borderWidth: 1,
|
||||
borderColor: "#ccc",
|
||||
borderRadius: 20,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 8,
|
||||
fontSize: 16,
|
||||
backgroundColor: "#fff",
|
||||
maxHeight: 100,
|
||||
},
|
||||
sendButton: {
|
||||
marginLeft: 10,
|
||||
backgroundColor: "#34b7f1",
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 20,
|
||||
},
|
||||
sendButtonText: {
|
||||
color: "#fff",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
});
|
||||
|
||||
export default ChatScreen;
|
||||
292
screens/Collaboration/GroupChatSection.tsx
Normal file
292
screens/Collaboration/GroupChatSection.tsx
Normal file
@@ -0,0 +1,292 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
// ChatScreen.tsx
|
||||
import { LoaderCustom } from "@/components";
|
||||
import { AccentColor } from "@/constants/color-palet";
|
||||
import { ICON_SIZE_SMALL } from "@/constants/constans-value";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import {
|
||||
apiCollaborationGroupMessage,
|
||||
apiCollaborationGroupMessageCreate,
|
||||
} from "@/service/api-client/api-collaboration";
|
||||
import { formatChatTime } from "@/utils/formatChatTime";
|
||||
import { AntDesign } from "@expo/vector-icons";
|
||||
import dayjs from "dayjs";
|
||||
import { useFocusEffect } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
Dimensions,
|
||||
Keyboard,
|
||||
Platform,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { ActivityIndicator } from "react-native-paper";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
|
||||
type IMessage = {
|
||||
id: string;
|
||||
createdAt: Date;
|
||||
isActive: boolean;
|
||||
message: string;
|
||||
isFile: boolean;
|
||||
userId: string;
|
||||
User: {
|
||||
select: {
|
||||
id: true;
|
||||
username: true;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
const { height: SCREEN_HEIGHT } = Dimensions.get("window");
|
||||
|
||||
const ChatScreen: React.FC<{ id: string }> = ({ id }) => {
|
||||
const { user } = useAuth();
|
||||
const [messages, setMessages] = useState<IMessage[] | null>(null);
|
||||
const [loadingMessage, setLoadingMessage] = useState<boolean>(false);
|
||||
const [inputText, setInputText] = useState<string>("");
|
||||
const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
|
||||
const scrollViewRef = useRef<ScrollView>(null);
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
onLoadMessage();
|
||||
}, [id])
|
||||
);
|
||||
|
||||
const onLoadMessage = async () => {
|
||||
try {
|
||||
setLoadingMessage(true);
|
||||
const response = await apiCollaborationGroupMessage({ id: id as string });
|
||||
if (response.success) {
|
||||
setMessages(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("[ERROR]", error);
|
||||
} finally {
|
||||
setLoadingMessage(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const show = Keyboard.addListener("keyboardDidShow", (e) => {
|
||||
let kbHeight = e.endCoordinates.height;
|
||||
// Di Android dengan edge-to-edge, kadang tinggi termasuk navigation bar
|
||||
if (Platform.OS === "android") {
|
||||
// Batasi maksimal 60% layar
|
||||
kbHeight = Math.min(kbHeight, SCREEN_HEIGHT * 0.6);
|
||||
}
|
||||
setKeyboardHeight(kbHeight);
|
||||
});
|
||||
|
||||
const hide = Keyboard.addListener("keyboardDidHide", () => {
|
||||
setKeyboardHeight(0);
|
||||
});
|
||||
|
||||
return () => {
|
||||
show.remove();
|
||||
hide.remove();
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Scroll ke bawah setelah pesan baru atau keyboard muncul
|
||||
const timer = setTimeout(() => {
|
||||
scrollViewRef.current?.scrollToEnd({ animated: true });
|
||||
}, 100); // delay kecil untuk pastikan layout stabil
|
||||
return () => clearTimeout(timer);
|
||||
}, [messages, keyboardHeight]);
|
||||
|
||||
const handleSend = async () => {
|
||||
if (!inputText.trim()) return;
|
||||
|
||||
const newData = {
|
||||
userId: user?.id,
|
||||
message: inputText.trim(),
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await apiCollaborationGroupMessageCreate({
|
||||
id: id as string,
|
||||
data: newData,
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
setMessages((prev: IMessage | any) => [
|
||||
...prev,
|
||||
{
|
||||
id: Date.now().toString(),
|
||||
createdAt: new Date(),
|
||||
isActive: true,
|
||||
message: inputText.trim(),
|
||||
isFile: false,
|
||||
userId: user?.id,
|
||||
User: {
|
||||
username: user?.username,
|
||||
},
|
||||
},
|
||||
]);
|
||||
setInputText("");
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("[ERROR]", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.safeArea} edges={["bottom"]}>
|
||||
{/* Kontainer utama dengan padding bottom = tinggi keyboard */}
|
||||
<View style={[styles.container, { paddingBottom: keyboardHeight }]}>
|
||||
<ScrollView
|
||||
ref={scrollViewRef}
|
||||
style={styles.messagesContainer}
|
||||
contentContainerStyle={styles.messagesContent}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
{loadingMessage ? (
|
||||
<ActivityIndicator color="black" size={"large"} />
|
||||
) : _.isEmpty(messages) ? (
|
||||
<Text style={styles.isEmptyMessage}>
|
||||
Belum ada pesan
|
||||
</Text>
|
||||
) : (
|
||||
messages?.map((item: any) => (
|
||||
<View
|
||||
key={item.id}
|
||||
style={[
|
||||
styles.messageBubble,
|
||||
item.userId === user?.id
|
||||
? styles.myMessage
|
||||
: styles.otherMessage,
|
||||
]}
|
||||
>
|
||||
<Text style={styles.name}>{item?.User?.username}</Text>
|
||||
<Text style={styles.messageText}>{item.message}</Text>
|
||||
<Text style={styles.timestamp}>
|
||||
{formatChatTime(item.createdAt)}
|
||||
</Text>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</ScrollView>
|
||||
|
||||
<View style={[styles.inputContainer, { paddingBottom: 10 }]}>
|
||||
<TextInput
|
||||
value={inputText}
|
||||
onChangeText={setInputText}
|
||||
placeholder="Ketik pesan..."
|
||||
style={styles.textInput}
|
||||
multiline
|
||||
blurOnSubmit={false}
|
||||
scrollEnabled={Platform.OS === "ios"} // ✅ Aktifkan scroll hanya di iOS
|
||||
textAlignVertical="top"
|
||||
/>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.7}
|
||||
style={styles.sendButton}
|
||||
onPress={handleSend}
|
||||
disabled={!inputText.trim()}
|
||||
>
|
||||
<AntDesign name="send" size={ICON_SIZE_SMALL} color="white"/>
|
||||
{/* <Text style={styles.sendButtonText}>Kirim</Text> */}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
safeArea: {
|
||||
flex: 1,
|
||||
backgroundColor: "#e5ddd5",
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#e5ddd5",
|
||||
},
|
||||
isEmptyMessage: {
|
||||
alignSelf: "center",
|
||||
color: "#666",
|
||||
marginTop: 20,
|
||||
},
|
||||
messagesContainer: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
messagesContent: {
|
||||
paddingBottom: 10,
|
||||
},
|
||||
messageBubble: {
|
||||
maxWidth: "80%",
|
||||
padding: 10,
|
||||
marginVertical: 4,
|
||||
borderRadius: 12,
|
||||
},
|
||||
name: {
|
||||
fontSize: 12,
|
||||
color: "#666",
|
||||
marginBottom: 4,
|
||||
},
|
||||
myMessage: {
|
||||
alignSelf: "flex-end",
|
||||
backgroundColor: "#dcf8c6",
|
||||
},
|
||||
otherMessage: {
|
||||
alignSelf: "flex-start",
|
||||
backgroundColor: "#ffffff",
|
||||
},
|
||||
messageText: {
|
||||
fontSize: 16,
|
||||
color: "#000",
|
||||
},
|
||||
timestamp: {
|
||||
fontSize: 10,
|
||||
color: "#666",
|
||||
textAlign: "right",
|
||||
marginTop: 4,
|
||||
},
|
||||
inputContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-end",
|
||||
paddingHorizontal: 10,
|
||||
paddingTop: 8,
|
||||
backgroundColor: "#f0f0f0",
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: "#ddd",
|
||||
},
|
||||
textInput: {
|
||||
flex: 1,
|
||||
borderWidth: 1,
|
||||
borderColor: "#ccc",
|
||||
borderRadius: 20,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 8,
|
||||
fontSize: 16,
|
||||
backgroundColor: "#fff",
|
||||
maxHeight: 100,
|
||||
},
|
||||
sendButton: {
|
||||
marginLeft: 10,
|
||||
backgroundColor: AccentColor.blue,
|
||||
// paddingHorizontal: 16,
|
||||
// paddingVertical: 10,
|
||||
borderRadius: "100%",
|
||||
width: 40,
|
||||
height: 40,
|
||||
justifyContent: "center",
|
||||
alignContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
sendButtonText: {
|
||||
color: "#fff",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
});
|
||||
|
||||
export default ChatScreen;
|
||||
Reference in New Issue
Block a user