124 lines
3.1 KiB
JavaScript
124 lines
3.1 KiB
JavaScript
import React, { useMemo, useRef, useEffect } from "react";
|
|
import { View } from "react-native";
|
|
import { useIsFocused } from "@react-navigation/native";
|
|
import ChatInput from "~/containers/ChatInput";
|
|
import { createStyles, useTheme } from "~/theme";
|
|
import MessagesFetcher from "~/containers/MessagesFetcher";
|
|
import Text from "~/components/Text";
|
|
import { useAlertState, navActions } from "~/stores";
|
|
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
|
|
|
import withConnectivity from "~/hoc/withConnectivity";
|
|
|
|
function Chat() {
|
|
const styles = useStyles();
|
|
const { navAlertCur } = useAlertState(["navAlertCur"]);
|
|
const { alert } = navAlertCur;
|
|
const { id: alertId } = alert;
|
|
const data = useMemo(() => ({ alertId }), [alertId]);
|
|
const scrollViewRef = useRef(null);
|
|
const isFocused = useIsFocused();
|
|
|
|
const { state } = alert;
|
|
|
|
// Track when this view is focused/unfocused
|
|
useEffect(() => {
|
|
navActions.setMessageViewFocus(isFocused, alertId);
|
|
|
|
// Cleanup when component unmounts
|
|
return () => {
|
|
if (isFocused) {
|
|
navActions.setMessageViewFocus(false, null);
|
|
}
|
|
};
|
|
}, [isFocused, alertId]);
|
|
const isClosed = state === "closed";
|
|
const isArchived = state === "archived";
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.chatMessages}>
|
|
<MessagesFetcher
|
|
data={data}
|
|
scrollViewRef={scrollViewRef}
|
|
isArchived={isArchived}
|
|
/>
|
|
</View>
|
|
{isClosed && (
|
|
<View key="closed" style={styles.resolvedLabel}>
|
|
<MaterialCommunityIcons
|
|
name="information-outline"
|
|
style={styles.resolvedLabelImage}
|
|
/>
|
|
<Text style={styles.resolvedLabelText}>
|
|
Cette alerte est terminée
|
|
</Text>
|
|
</View>
|
|
)}
|
|
{isArchived && (
|
|
<View key="archived" style={styles.archivedLabel}>
|
|
<MaterialCommunityIcons
|
|
name="information-outline"
|
|
style={styles.archivedLabelImage}
|
|
/>
|
|
<Text style={styles.archivedLabelText}>
|
|
Cette alerte est archivée
|
|
</Text>
|
|
</View>
|
|
)}
|
|
{!isArchived && (
|
|
<View key="input" style={styles.chatInput}>
|
|
<ChatInput data={data} scrollViewRef={scrollViewRef} />
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const useStyles = createStyles(({ wp, hp, scaleText, theme: { colors } }) => ({
|
|
container: {
|
|
flex: 1,
|
|
flexDirection: "column",
|
|
width: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
},
|
|
chatMessages: {
|
|
display: "flex",
|
|
flex: 1,
|
|
},
|
|
chatInput: {
|
|
display: "flex",
|
|
height: 55,
|
|
marginTop: 2,
|
|
marginLeft: 2,
|
|
marginRight: 2,
|
|
marginBottom: 4,
|
|
},
|
|
resolvedLabel: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
},
|
|
resolvedLabelText: {
|
|
fontSize: 15,
|
|
},
|
|
resolvedLabelImage: {
|
|
paddingHorizontal: 5,
|
|
fontSize: 15,
|
|
},
|
|
archivedLabel: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
},
|
|
archivedLabelText: {
|
|
fontSize: 15,
|
|
},
|
|
archivedLabelImage: {
|
|
paddingHorizontal: 5,
|
|
fontSize: 15,
|
|
},
|
|
}));
|
|
|
|
export default withConnectivity(Chat, {
|
|
keepVisible: true,
|
|
});
|