emoji alert

src/components/ChatItem.tsx

@@ -20,13 +20,13 @@ export const ChatItem = (props: Contact) => {
 
 	const { state, dispatch } = useContext(AppContext);
 	const [newMessagesCount, setNewMessagesCount] = useState(0);
-	const [previous, setPrevious] = useState<Message[]>([]);
-	const [lastMessage, setLastMessage] = useState<Message[]>([]);
+	const [previous, setPrevious] = useState<Message | null>(null);
+	const [lastMessage, setLastMessage] = useState<Message | null>(null);
 
 	useEffect(() => {
-		if (lastMessage[0] && previous[0]) {
-			if (lastMessage[0].id !== previous[0].id) {
-				if (lastMessage[0].sentBy !== state.user?.id) {
+		if (lastMessage && previous) {
+			if (lastMessage.id !== previous.id) {
+				if (lastMessage.sentBy !== state.user?.id) {
 					setNewMessagesCount(newMessagesCount + 1);
 				}
 			}
@@ -35,9 +35,6 @@ export const ChatItem = (props: Contact) => {
 	}, [lastMessage, previous]);
 
 	useIonViewDidEnter(async () => {
-		if (!previous.length && lastMessage.length) {
-			console.log("ssdssdsdsd");
-		}
 		if (state && state.user) {
 			const userA = state.user.id;
 			const userB = userId;
@@ -49,9 +46,7 @@ export const ChatItem = (props: Contact) => {
 				.limit(1)
 				.onSnapshot((snap) => {
 					if (!snap.empty) {
-						const newMessage = [];
-						const message = snap.docs[0].data() as Message;
-						newMessage.push(message);
+						const newMessage = snap.docs[0].data() as Message;
 						setPrevious(lastMessage || newMessage);
 						setLastMessage(newMessage);
 					}
@@ -78,7 +73,7 @@ export const ChatItem = (props: Contact) => {
 		history.push("/chat-page", state);
 	};
 
-	if (!previous.length && lastMessage.length) {
+	if (!previous && lastMessage) {
 		setPrevious(lastMessage);
 	}
 
@@ -95,7 +90,7 @@ export const ChatItem = (props: Contact) => {
 			</IonAvatar>
 			<IonLabel>
 				<h2>{name}</h2>
-				<p>{lastMessage[0] ? lastMessage[0].message : "..."}</p>
+				<p>{lastMessage ? lastMessage.message : "..."}</p>
 			</IonLabel>
 			{newMessagesCount > 0 && (
 				<IonBadge color="success" slot="end">

src/pages/ChatPage.tsx

@@ -1,4 +1,5 @@
 import {
+	IonAlert,
 	IonAvatar,
 	IonButton,
 	IonCol,
@@ -25,6 +26,7 @@ import { Plugins, CameraResultType } from "@capacitor/core";
 
 export const ChatPage = () => {
 	const { state, dispatch } = useContext(AppContext);
+	const [showAlert, setShowAlert] = useState(false);
 	const [message, setMessage] = useState<string | null>(null);
 	const [chatMessages, setChatMessages] = useState<Message[]>([]);
 
@@ -53,12 +55,14 @@ export const ChatPage = () => {
 
 	const sendMessage = async (type: MediaTypes, fileUrl?: string) => {
 		if ((message || type === "media") && state.user && state.chatWith) {
+			let messageTxt = message;
+			if (!message && type === "media") messageTxt = "View file";
 			Messages.sendMessage({
 				id: uniqueString(),
 				type,
 				time: Now(),
 				fileUrl: fileUrl || null,
-				message: message || "",
+				message: messageTxt || "...",
 				sentBy: state.user.id,
 				channel: `${state.user.id},${state.chatWith.userId}`,
 			});
@@ -84,6 +88,25 @@ export const ChatPage = () => {
 		);
 	};
 
+	const EmojiPicker = () => {
+		/**
+		 * TODO:
+		 * @see - https://ionicframework.com/docs/api/alert
+		 * @see - https://capacitorjs.com/docs/apis/keyboard
+		 */
+		return (
+			<IonAlert
+				isOpen={showAlert}
+				onDidDismiss={() => setShowAlert(false)}
+				cssClass="my-custom-class"
+				header={"Emoji Selector"}
+				subHeader={"Coming Soon!"}
+				message={"View comments for more info."}
+				buttons={["Cancel"]}
+			/>
+		);
+	};
+
 	return (
 		<IonPage>
 			<IonHeader>
@@ -110,6 +133,7 @@ export const ChatPage = () => {
 				{chatMessages.map((chat, i) => (
 					<ChatMessage key={i + chat.sentBy} {...chat} />
 				))}
+				<EmojiPicker />
 			</IonContent>
 			<IonFooter>
 				<IonToolbar>
@@ -119,7 +143,13 @@ export const ChatPage = () => {
 								<IonGrid>
 									<IonRow>
 										<IonCol size="2">
-											<IonIcon size="large" icon={happyOutline}></IonIcon>
+											<IonIcon
+												size="large"
+												icon={happyOutline}
+												onClick={() =>
+													!showAlert ? setShowAlert(true) : undefined
+												}
+											></IonIcon>
 										</IonCol>
 										<IonCol size="8">
 											<IonInput

types.d.ts

@@ -79,12 +79,6 @@ interface MessagesListener extends Channel {
 	set: React.Dispatch<React.SetStateAction<Message[]>>;
 }
 
-interface LastMessagesListener extends Channel {
-	setLastMessage: React.Dispatch<React.SetStateAction<Message[]>>;
-	setPrevious: React.Dispatch<React.SetStateAction<Message[]>>;
-	lastMessage: Message[];
-}
-
 interface IContextProps {
 	state: State;
 	dispatch: Dispatch;