finish mobile responsive chat

frontend/code/src/Components/Chat/Components/Conversation.tsx

@@ -1,29 +1,19 @@
 import { useEffect, useRef, useState } from "react";
-import { ConversationProps, SelectedUserTile } from "..";
+import { ConversationProps } from "..";
 import users, {
- UserImage,
- yas1,
- yas2,
- yas3,
- yas4,
- GroupChat,
- check,
  Message,
- RoomsIcon,
- ChatIcon,
  groupIcon,
  chatRooms,
  More,
- NullImage,
  Send,
 } from "./tools/Assets";
 import { ChatType, useChatStore } from "../Controllers/ChatControllers";
-import { group } from "console";
+
 import {
  ConfirmationModal,
- DialogAlertConfirmation,
+
  NullPlaceHolder,
- RoomSettingsModal,
+
 } from "./RoomChatHelpers";
 import { KeyboardEvent } from "react";
 
@@ -267,7 +257,7 @@ export const Conversation: React.FC<ConversationProps> = ({
  };
 
  const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
- if (e.key == "Enter") {
+ if (e.key === "Enter") {
  // validation check
  if (inputValue.length > 0) {
  pushMessage({

frontend/code/src/Components/Chat/Components/RecentChat.tsx

@@ -5,17 +5,14 @@ import users, {
  ChatIcon,
  GroupChat,
  RoomsIcon,
- UserImage,
+
  check,
- yas1,
- yas2,
- yas3,
- yas4,
+
 } from "./tools/Assets";
-import { SelectedUserTile } from "..";
+
 import {
  CreateNewRoomModal,
- DialogAlertConfirmation,
+
  NullPlaceHolder,
  RoomChatPlaceHolder,
  RoomSettingsModal,
@@ -150,7 +147,7 @@ export const OnlineNowUsers = () => {
  <p className="text-gray-300 font-poppins text-base font-medium leading-normal pr-3 hidden md:block ">
  Chat
  </p>
- <img src={ChatIcon}></img>
+ <img alt="chat" src={ChatIcon}></img>
  </div>
  </button>
  <button
@@ -163,7 +160,7 @@ export const OnlineNowUsers = () => {
  <p className="text-gray-300 font-poppins text-base font-medium leading-normal pr-3 hidden md:block">
  Rooms
  </p>
- <img src={RoomsIcon}></img>
+ <img alt="chat" src={RoomsIcon}></img>
  </div>
  </button>
  </div>

frontend/code/src/Components/Chat/Components/RoomChatHelpers.tsx

@@ -1,21 +1,16 @@
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { useChatStore } from "../Controllers/ChatControllers";
 import users, {
  GroupChat,
  More,
  NullImage,
- Send,
  chatRooms,
  check,
  groupIcon,
 } from "./tools/Assets";
-import { ConversationProps, SelectedUserTile } from "..";
-import { ConversationHeader, CurrentUserMessage } from "./Conversation";
-import { Message } from "../../Layout/Assets/Message";
+import { SelectedUserTile } from "..";
+
 
-interface DialogAlertConfirmationProps {
- onYesClick: () => void;
-}
 interface NullComponentProps {
  message: string;
 }
@@ -55,11 +50,11 @@ export const RoomChatPlaceHolder = () => {
  {room.messages[room.messages.length - 1].message}
  </p>
  {room.messages[room.messages.length - 1].isRead === false ? (
- <div className="messages-dot relative inline-flex pt-1 hidden md:block ">
+ <div className="messages-dot relative pt-1 hidden  md:block ">
  <div className="w-3 h-3 bg-red-500 rounded-full text-white flex items-baseline justify-self-end"></div>
  </div>
  ) : (
- <img className="hidden md:block" src={check}></img>
+ <img alt="check" className="hidden md:block" src={check}></img>
  )}
  </div>
  </div>
@@ -165,13 +160,11 @@ export const CreateNewRoomModal = () => {
  </div>
 
  <div className="modal-action ">
- {
- // eslint-disable-next-line
- }
- <a href="#" className="btn hover:bg-purple-500">
+
+ <a href="#/" className="btn hover:bg-purple-500">
  {"Close "}
  </a>
- <a href="#" className="btn hover:bg-purple-500">
+ <a href="#/" className="btn hover:bg-purple-500">
  {"Create "}
  </a>
  </div>
@@ -182,8 +175,6 @@ export const CreateNewRoomModal = () => {
 };
 
 export const RoomSettingsModal = () => {
- const [MyUsers] = useState(users);
-
  const selectedChatID = useChatStore((state) => state.selectedChatID);
  const currentRoom = chatRooms.find((room) => room.id === selectedChatID);
  const currentRoomUsers = users.filter(
@@ -320,10 +311,10 @@ export const RoomSettingsModal = () => {
  {
  // eslint-disable-next-line
  }
- <a href="#" className="btn hover:bg-purple-500">
+ <a href="#/" className="btn hover:bg-purple-500">
  {"Close "}
  </a>
- <a href="#" className="btn hover:bg-purple-500">
+ <a href="#/" className="btn hover:bg-purple-500">
  {"Save "}
  </a>
  </div>
@@ -333,39 +324,6 @@ export const RoomSettingsModal = () => {
  );
 };
 
-export const DialogAlertConfirmation: React.FC<
- DialogAlertConfirmationProps
-> = ({ onYesClick }) => {
- return (
- <div className="modal" id="my_modal_10">
- <div className="modal-box bg-[#1A1C26] no-scrollbar w-[85%] md:w-[50%] ">
- <div className="flex flex-col">
- <div className="flex flex-row justify-center">
- <p className="text-purple-500 font-poppins text-lg font-medium leading-normal">
- Are You Sure
- </p>
- </div>
- <div className="modal-action">
- {
- // eslint-disable-next-line
- }
- <a href="#" className="btn hover:bg-purple-500">
- {"No "}
- </a>
- <a
- href="#"
- onClick={onYesClick}
- className="btn hover:bg-purple-500"
- >
- {"Yes "}
- </a>
- </div>
- </div>
- </div>
- </div>
- );
-};
-
 interface ConfirmationModalProps {
  isOpen: boolean;
  onConfirm: () => void;

frontend/code/src/Components/Chat/Components/UserToUserChat.tsx

@@ -85,114 +85,3 @@ export const UserToUserChat = () => {
 </div>
 
 
-
-
-
-
-
-
-
-
-
-
-
-// <div className="max-h-[300px] no-scrollbar overflow-visible ">
-// {currentRoomUsers.map((user) => (
-// <div className="flex flex-row justify-between bg-[#1A1C26] p-3 border-gray-600 ">
-// <div className="flex flex-row items-center space-x-3">
-// <div className="pr-1">
-// <img
-// className="w-12 rounded-full "
-// alt=""
-// src={user.image}
-// />
-// </div>
-
-// <p className="text-white font-poppins text-base font-medium leading-normal">
-// {user.name}
-// </p>
-// </div>
-
-// <div className="dropdown">
-// <label tabIndex={0} className="">
-// <summary className="list-none p-3 cursor-pointer ">
-// <img src={More} alt="More" />
-// </summary>
-// </label>
-// <ul
-// tabIndex={0}
-// className="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-40 absolute right-full "
-// >
-// <li>
-// <span className="hover:bg-[#7940CF]">Block</span>
-// </li>
-// <li>
-// <span className="hover:bg-[#7940CF]">
-// invite for a Pong Game
-// </span>
-// </li>
-// <li>
-// <span
-// // onClick={onRemoveUserPreview}
-// className="hover:bg-[#7940CF]"
-// >
-// Show User Info
-// </span>
-// </li>
-// </ul>
-// </div>
-// </div>
-// ))}
-// </div>
-
-
-
-
-
-{/* <div className="flex flex-row justify-between bg-[#1A1C26] p-3 border-b-2 border-black ">
- <div className="flex flex-row ">
- <div className="pr-1">
- <img
- className="w-12 rounded-full "
- alt=""
- // src={user.image}
- />
- </div>
- 
- <p className="text-white font-poppins text-base font-medium leading-normal">
- {user.name}
- </p>
- 
- </div>
- 
- <div className="dropdown">
- <label tabIndex={0} className="">
- <summary className="list-none p-3 cursor-pointer ">
- <img src={More} alt="More" />
- </summary>
- </label>
- <ul
- tabIndex={0}
- className="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52 absolute right-full "
- >
- <li>
- <span className="hover:bg-[#7940CF]">Block</span>
- </li>
- <li>
- <span className="hover:bg-[#7940CF]">
- invite for a Pong Game
- </span>
- </li>
- <li>
- <span
- onClick={onRemoveUserPreview}
- className="hover:bg-[#7940CF]"
- >
- Show User Info
- </span>
- </li>
- </ul>
- </div>
- 
- </div> */}
-

frontend/code/src/Components/Chat/Controllers/ChatControllers.tsx

@@ -1,6 +1,5 @@
 import { create } from "zustand";
 import users, { Message, chatRooms } from "../Components/tools/Assets";
-import { get } from "http";
 
 export enum ChatType {
  Chat,
@@ -20,9 +19,7 @@ export interface ChatState {
 export const useChatStore = create<ChatState>()((set) => ({
  selectedChatID: 1,
  selectedChatType: ChatType.Chat,
- // //
- // currentMessages: [] as Message[],
- // currentRoomMessages: [] as Message[],
+
  currentMessages: users.find((user) => user.id === 1)?.messages as Message[],
  currentRoomMessages: chatRooms.find((room) => room.id === 1)
  ?.messages as Message[],

frontend/code/src/Components/Chat/index.tsx

@@ -1,29 +1,28 @@
 import {
- More,
- Send,
+
  Close,
  Bio,
- NullImage,
+
  groupIcon,
  chatRooms,
  RoomsIcon,
 } from "./Components/tools/Assets";
 import { useState } from "react";
-import { Conversation, CurrentUserMessage } from "./Components/Conversation";
+import { Conversation} from "./Components/Conversation";
 import { ChatPaceHolderProps } from "./Components/Conversation";
 import users from "./Components/tools/Assets";
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import { ChatType, useChatStore } from "./Controllers/ChatControllers";
-import { RoomChatPlaceHolder } from "./Components/RoomChatHelpers";
-import { ChatPlaceHolder, RecentConversations } from "./Components/RecentChat";
+
+import {RecentConversations } from "./Components/RecentChat";
 
 export interface ConversationProps {
  onRemoveUserPreview: () => void;
 }
 
 export const Chat = () => {
  const [showUserPreview, setShowUserPreview] = useState(false);
- const selectedChatType = useChatStore((state) => state.selectedChatType);
+
 
  const handleRemoveUserPreview = () => {
  setShowUserPreview(!showUserPreview);