feat: fixes and formatter
This commit is contained in:
@@ -1,78 +1,66 @@
|
||||
import { useState, useRef, useEffect, useGlobal, getGlobal } from "reactn";
|
||||
import {
|
||||
Pressable,
|
||||
TextInput,
|
||||
View,
|
||||
Image,
|
||||
Text,
|
||||
Keyboard,
|
||||
FlatList,
|
||||
} from "react-native";
|
||||
import { responsiveHeight } from "../actions/responsiveSizes.js";
|
||||
import { useDataFromRef } from "react-native-minuit/src/hooks";
|
||||
import { useKeyboard } from "@react-native-community/hooks";
|
||||
import moment from "moment";
|
||||
import { useState, useRef, useEffect, useGlobal, getGlobal } from 'reactn'
|
||||
import { Pressable, TextInput, View, Image, Text, Keyboard, FlatList } from 'react-native'
|
||||
import { responsiveHeight } from '../actions/responsiveSizes.js'
|
||||
import { useDataFromRef } from 'react-native-minuit/src/hooks'
|
||||
import { useKeyboard } from '@react-native-community/hooks'
|
||||
import moment from 'moment'
|
||||
|
||||
import { Fonts, gutters, Palette } from "../styles";
|
||||
import Style, { bubbleStyle } from "../styles/Style";
|
||||
import { Fonts, gutters, Palette } from '../styles'
|
||||
import Style, { bubbleStyle } from '../styles/Style'
|
||||
|
||||
import firebase, { chatsRef } from "../config/firebase";
|
||||
import firebase, { chatsRef } from '../config/firebase'
|
||||
|
||||
import { formatNameForConfidentiality } from "../helpers/index.js";
|
||||
import useLayoutType from "../hooks/useLayoutType.js";
|
||||
import { formatNameForConfidentiality } from '../helpers/index.js'
|
||||
import useLayoutType from '../hooks/useLayoutType.js'
|
||||
|
||||
import TypingLoader from "./TypingLoader";
|
||||
import Avatar from "./Avatar";
|
||||
import RenderChatFile from "./RenderChatFile.js";
|
||||
import HyperlinkContainer from "./HyperlinkContainer.js";
|
||||
import TypingLoader from './TypingLoader'
|
||||
import Avatar from './Avatar'
|
||||
import RenderChatFile from './RenderChatFile.js'
|
||||
import HyperlinkContainer from './HyperlinkContainer.js'
|
||||
|
||||
export default ({
|
||||
chatID = null,
|
||||
|
||||
layout = "default", // default | taskSideBar
|
||||
layout = 'default', // default | taskSideBar
|
||||
|
||||
containerStyle = {},
|
||||
messageListContainerStyle = {},
|
||||
}) => {
|
||||
const [currentUID] = useGlobal("currentUID");
|
||||
const [currentProjectData] = useGlobal("currentProjectData");
|
||||
const [currentUID] = useGlobal('currentUID')
|
||||
const [currentProjectData] = useGlobal('currentProjectData')
|
||||
|
||||
const [isTyping] = useState(false);
|
||||
const [isTyping] = useState(false)
|
||||
|
||||
const flatListRef = useRef();
|
||||
const flatListRef = useRef()
|
||||
|
||||
const { isNative } = useLayoutType();
|
||||
const { keyboardShown = false } = useKeyboard();
|
||||
const { isNative } = useLayoutType()
|
||||
const { keyboardShown = false } = useKeyboard()
|
||||
|
||||
const { data: messageList } = useDataFromRef({
|
||||
ref: chatID
|
||||
? chatsRef
|
||||
.doc(chatID)
|
||||
.collection("messages")
|
||||
.orderBy("createdAt", "desc")
|
||||
.limit(50)
|
||||
? chatsRef.doc(chatID).collection('messages').orderBy('createdAt', 'desc').limit(50)
|
||||
: null,
|
||||
simpleRef: false,
|
||||
listener: true,
|
||||
condition: chatID,
|
||||
refreshArray: [chatID],
|
||||
documentID: "messageID",
|
||||
});
|
||||
documentID: 'messageID',
|
||||
})
|
||||
|
||||
let conversation = [
|
||||
isTyping ? { senderID: "minuit.ai", userTyping: true } : null,
|
||||
isTyping ? { senderID: 'minuit.ai', userTyping: true } : null,
|
||||
...(messageList || []),
|
||||
].filter((item) => item);
|
||||
].filter((item) => item)
|
||||
|
||||
if (layout === "default") {
|
||||
conversation = conversation.reverse();
|
||||
if (layout === 'default') {
|
||||
conversation = conversation.reverse()
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (flatListRef?.current && isNative && keyboardShown) {
|
||||
flatListRef?.current?.scrollToEnd?.({ animated: true });
|
||||
flatListRef?.current?.scrollToEnd?.({ animated: true })
|
||||
}
|
||||
}, [keyboardShown, isNative]);
|
||||
}, [keyboardShown, isNative])
|
||||
|
||||
return (
|
||||
<View
|
||||
@@ -92,33 +80,30 @@ export default ({
|
||||
}}
|
||||
showsVerticalScrollIndicator={false}
|
||||
keyExtractor={(item, index) =>
|
||||
item?.messageID
|
||||
? `${item?.messageID?.toString()}-${index}`
|
||||
: `no-messageID-${index}`
|
||||
item?.messageID ? `${item?.messageID?.toString()}-${index}` : `no-messageID-${index}`
|
||||
}
|
||||
renderItem={({
|
||||
item: {
|
||||
createdAt = null,
|
||||
senderID,
|
||||
senderName = "",
|
||||
senderName = '',
|
||||
senderProfilePicture = null,
|
||||
text = "",
|
||||
text = '',
|
||||
userTyping = false,
|
||||
files = [],
|
||||
},
|
||||
index,
|
||||
}) => {
|
||||
const isCurrentUser = senderID === currentUID;
|
||||
const isChatbot = senderID === "minuit.ai";
|
||||
const isCurrentUser = senderID === currentUID
|
||||
const isChatbot = senderID === 'minuit.ai'
|
||||
|
||||
const senderData =
|
||||
currentProjectData?.teamMembers?.[senderID] || {};
|
||||
const senderData = currentProjectData?.teamMembers?.[senderID] || {}
|
||||
|
||||
const isDayChange =
|
||||
moment(createdAt?.toDate()).format("DD/MM/YYYY") !==
|
||||
moment(
|
||||
conversation[index - 1]?.createdAt?.toDate() || new Date()
|
||||
).format("DD/MM/YYYY") || !conversation[index - 1];
|
||||
moment(createdAt?.toDate()).format('DD/MM/YYYY') !==
|
||||
moment(conversation[index - 1]?.createdAt?.toDate() || new Date()).format(
|
||||
'DD/MM/YYYY'
|
||||
) || !conversation[index - 1]
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -132,21 +117,19 @@ export default ({
|
||||
<Text
|
||||
style={{
|
||||
...Fonts({
|
||||
type: "default",
|
||||
type: 'default',
|
||||
color: Palette.white,
|
||||
style: { textAlign: "center", opacity: 0.5 },
|
||||
style: { textAlign: 'center', opacity: 0.5 },
|
||||
}),
|
||||
}}
|
||||
>
|
||||
{moment(createdAt?.toDate()).format(
|
||||
"[Le] DD/MM/YYYY [à] HH:mm"
|
||||
)}
|
||||
{moment(createdAt?.toDate()).format('[Le] DD/MM/YYYY [à] HH:mm')}
|
||||
</Text>
|
||||
|
||||
<View
|
||||
style={{
|
||||
...Style.separatorHorizontal,
|
||||
width: "100%",
|
||||
width: '100%',
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
@@ -156,9 +139,9 @@ export default ({
|
||||
style={[
|
||||
Style.containerRow,
|
||||
{
|
||||
flexDirection: isCurrentUser ? "row-reverse" : "row",
|
||||
alignItems: "flex-end",
|
||||
width: "100%",
|
||||
flexDirection: isCurrentUser ? 'row-reverse' : 'row',
|
||||
alignItems: 'flex-end',
|
||||
width: '100%',
|
||||
marginBottom: gutters / 2,
|
||||
},
|
||||
]}
|
||||
@@ -175,21 +158,15 @@ export default ({
|
||||
}
|
||||
: {
|
||||
marginRight: gutters / 2,
|
||||
backgroundColor: "transparent",
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: Palette.primary,
|
||||
borderWidth: 1,
|
||||
}),
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
name={
|
||||
isChatbot ? "m" : senderData?.name || senderName || ""
|
||||
}
|
||||
url={
|
||||
senderData?.profilePictureURL ||
|
||||
senderProfilePicture ||
|
||||
null
|
||||
}
|
||||
name={isChatbot ? 'm' : senderData?.name || senderName || ''}
|
||||
url={senderData?.profilePictureURL || senderProfilePicture || null}
|
||||
size={35}
|
||||
/>
|
||||
</View>
|
||||
@@ -197,7 +174,7 @@ export default ({
|
||||
|
||||
<View
|
||||
style={{
|
||||
alignItems: isCurrentUser ? "flex-end" : "flex-start",
|
||||
alignItems: isCurrentUser ? 'flex-end' : 'flex-start',
|
||||
}}
|
||||
>
|
||||
{files?.map((props, index) => (
|
||||
@@ -209,8 +186,8 @@ export default ({
|
||||
index !== files?.length - 1
|
||||
? gutters / 2
|
||||
: text?.length > 0 || userTyping
|
||||
? gutters / 2
|
||||
: 0,
|
||||
? gutters / 2
|
||||
: 0,
|
||||
}}
|
||||
/>
|
||||
)) || null}
|
||||
@@ -232,11 +209,11 @@ export default ({
|
||||
<HyperlinkContainer>
|
||||
<Text
|
||||
style={Fonts({
|
||||
type: "default",
|
||||
type: 'default',
|
||||
style: {
|
||||
color: Palette.white,
|
||||
textAlign: isCurrentUser ? "right" : "left",
|
||||
width: "100%",
|
||||
textAlign: isCurrentUser ? 'right' : 'left',
|
||||
width: '100%',
|
||||
},
|
||||
})}
|
||||
>
|
||||
@@ -249,30 +226,29 @@ export default ({
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export const onSendMessage = async ({
|
||||
chatID = null,
|
||||
projectID = null,
|
||||
message = "",
|
||||
message = '',
|
||||
setMessage = () => {},
|
||||
setIsTyping = () => {},
|
||||
customPayload = {},
|
||||
}) => {
|
||||
try {
|
||||
const currentUID = getGlobal()?.currentUID || null;
|
||||
const { name = "", profilePictureURL = null } =
|
||||
getGlobal()?.currentUserData || {};
|
||||
const currentUID = getGlobal()?.currentUID || null
|
||||
const { name = '', profilePictureURL = null } = getGlobal()?.currentUserData || {}
|
||||
|
||||
if (message.length > 0 || customPayload?.files?.length > 0) {
|
||||
Keyboard.dismiss();
|
||||
setMessage("");
|
||||
Keyboard.dismiss()
|
||||
setMessage('')
|
||||
|
||||
const messageData = {
|
||||
projectID,
|
||||
@@ -282,13 +258,13 @@ export const onSendMessage = async ({
|
||||
senderProfilePicture: profilePictureURL || null,
|
||||
text: message,
|
||||
...customPayload,
|
||||
};
|
||||
}
|
||||
|
||||
await chatsRef.doc(chatID).collection("messages").add(messageData);
|
||||
await chatsRef.doc(chatID).collection('messages').add(messageData)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.log(error)
|
||||
} finally {
|
||||
setIsTyping(false);
|
||||
setIsTyping(false)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user