sfm-uikit-react-native
Version:
It is a react native component for SmartFloMeet users.
282 lines (251 loc) • 9.03 kB
JavaScript
import React, { PureComponent } from "react";
import { EnxSetting } from "..";
import {
View,
Text,
TouchableWithoutFeedback,
KeyboardAvoidingView,
Platform,
FlatList,
TextInput,
Keyboard,
Image,Alert,
TouchableOpacity,
} from "react-native";
import EnxSegmentView from "./EnxSegmentView";
import { styles } from "../style/EnxQnaStyle";
class EnxQnaScreen extends PureComponent {
constructor(props) {
super(props);
this.state = {
selectedSegment: 0, // Default to the first segment
optionalSelectedSegment: 0, // This is for the inside answer tab
inputMessage: "",
qnaList:this.props.qnaData,
isModerator:false
};
}
componentDidMount() {
// Add listener for notification
EnxSetting.addEventListener("QNAPageBack", this.handleBackEvent);
}
componentWillUnmount() {
EnxSetting.removeEventListener("QNAPageBack", this.handleBackEvent);
}
// Handle notification listener from EnxSetting class
handleBackEvent = (data) => {
this.props.onBack();
};
// Update selected segment
handleSegmentChange = (index) => {
this.setState({ selectedSegment: index });
};
// Handle optional Segment inside answer tab
handleOptionalSegmentChange = (index) => {
this.setState({ optionalSelectedSegment: index });
};
// Handle sending a message
handleSendMessage = () => {
const { inputMessage, qnaList } = this.state;
if (inputMessage.trim() === ""){
Alert.alert('Error', 'Please enter question.');
return;
}
const qnaData={
type:"new-question",
qna:{
id:Date.now().toString(),
timestamp:Date.now().toString(),
question:inputMessage,
status:'O',
isInitiator:true
}
}
this.props.onQnaAction(qnaData,"new-question")
this.setState({ inputMessage: "" });
};
scrollToEnd = () => {
this.flatListRef?.scrollToEnd({ animated: true });
};
dismissKeyboard = () => {
Keyboard.dismiss();
};
// Render each message
renderMessage = ({ item }) => {
console.log("filteredData", JSON.stringify(item));
let data=item.qna
const formatTimestampToTime = (timestamp) => {
const date = new Date(parseInt(timestamp, 10));
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
return `${hours}:${minutes}`;
};
return (
<View style={styles.card}>
{/* Header Section */}
<View style={styles.leftSection}>
<View style={styles.avatarContainer}>
<View style={styles.avatar}>
<Text style={styles.avatarText}>{data.username.charAt(0)}</Text>
</View>
<View>
<Text style={styles.username}>{data.username}</Text>
<Text style={styles.time}>{formatTimestampToTime(data.timestamp)}</Text>
</View>
</View>
{data.status!=='D'&&(<TouchableOpacity
onPress={() =>{ this.props.onQnaAction({type:"delete-question","qnaId":data.id},"delete-question")}}>
<Image source={require("../image_asset/delete.png")} style={styles.deleteButtonIcon} />
</TouchableOpacity>)}
</View>
{/* Message Section */}
<View style={styles.messageContainer}>
<Text style={styles.messageText}>{data.question}</Text>
</View>
{/* Nested Messages Section */}
{item.qna.answer && item.qna.answer.length > 0 && (
<View style={styles.nestedMessagesContainer}>
{item.qna.answer.map((nested, index) => (
<View key={index} style={styles.nestedMessageContainer}>
{/* Nested Header Section */}
<View style={styles.nestedHeader}>
<View style={styles.nestedAvatar}>
<Text style={styles.nestedAvatarText}>{nested.username.charAt(0)}</Text>
</View>
<View>
<Text style={styles.nestedUsername}>
{nested.username}
</Text>
<Text style={styles.nestedTime}>{formatTimestampToTime(nested.timestamp)}</Text>
</View>
</View>
{/* Nested Message Content Section */}
<View style={styles.nestedMessageContent}>
<Text style={styles.nestedMessageText}>{nested.ans}</Text>
</View>
</View>
))}
</View>
)}
{/* Actions Section */}
{data.status=='D'||!data.isInitiator&&(<View style={styles.actionsContainer}>
<TouchableOpacity style={styles.actionButton}
onPress={() =>this.handleAction("answered_live",data)}>
<Text style={styles.actionText}>Answer Live</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.actionButton}
onPress={() => this.handleAction('answered_typed',data)}>
<Text style={styles.actionText}>Type Answer</Text>
</TouchableOpacity>
{data.status=='O'&&(<TouchableOpacity style={styles.actionButton}
onPress={() =>this.handleAction('answer_declined',data) }>
<Text style={styles.actionText}>Dismiss</Text>
</TouchableOpacity>)}
</View>)}
</View>
);
};
handleAction=(type,data)=>{
this.props.onQnaAction(data,type)
}
updateAction(qnaData,moderator) {
this.setState({
isModerator:moderator
});
// Modify the qnaData to replace the note key with ans, and remove duplicate answers
const updatedQnaData = qnaData
.map(item => {
return {
...item,
qna: {
...item.qna,
answer: item.qna.answer
.map(answer => {
// Replace note with ans in the answer object
if (answer.note) {
return { ...answer, ans: answer.note, note: undefined }; // Replace note with ans
}
return answer;
})
// Remove duplicate answers based on the ans field
.filter((value, index, self) =>
index === self.findIndex((t) => t.ans === value.ans) // Only keep the first occurrence of each ans value
)
}
};
});
// Update state only if the data has changed
this.setState((prevState) => {
const isDifferent = JSON.stringify(prevState.qnaList) !== JSON.stringify(updatedQnaData);
if (isDifferent) {
return { qnaList: updatedQnaData };
}
return null;
});
}
render() {
const {selectedSegment,optionalSelectedSegment,inputMessage,qnaList,} = this.state;
// Filter the qnaList based on the selectedSegment
const filteredQnaList = qnaList.filter((data) => {
let item=data.qna
if (selectedSegment === 0) return item.status === "O"; // Open
if (selectedSegment === 1) return item.status === "A"; // Answered
if (selectedSegment === 2) return item.status === "D"; // Dismissed
return false;
});
return (
<KeyboardAvoidingView
style={styles.container}
behavior="padding"
keyboardVerticalOffset={Platform.OS === "ios" ? 80 : 0} // Adjust for iOS or Android
>
{/* Dismiss keyboard on touch outside */}
<TouchableWithoutFeedback onPress={this.dismissKeyboard}>
<View style={styles.container}>
<EnxSegmentView
items={["Open", "Answered", "Dismissed"]}
defaultSelectedIndex={selectedSegment}
onSegmentChange={this.handleSegmentChange}
style={styles.segmentView}
/>
{selectedSegment === 1 ? (
<EnxSegmentView
items={["All Questions", "My Questions"]}
defaultSelectedIndex={optionalSelectedSegment}
onSegmentChange={this.handleOptionalSegmentChange}
style={styles.segmentView}
/>
) : (
<View />
)}
{/* Chat List */}
<FlatList
ref={(ref) => (this.flatListRef = ref)}
style={styles.messageList}
data={filteredQnaList}
renderItem={this.renderMessage}
keyExtractor={(item) => item.qna.id.toString()}
onContentSizeChange={this.scrollToEnd} // Scroll to end on content size change
/>
{/* Message Input */}
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
value={inputMessage}
onChangeText={(text) => this.setState({ inputMessage: text })}
placeholder="Type your Question..."
/>
<TouchableOpacity
style={styles.sendButton}
onPress={this.handleSendMessage}
>
<Text style={styles.sendButtonText}>Send</Text>
</TouchableOpacity>
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
);
}
}
export default EnxQnaScreen;