Finish Fetching The current RoomMembers & joing public rooms (#67)

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

@@ -18,6 +18,7 @@ import { SelectedUserTile } from "..";
 import {
  createNewRoomCall,
  fetchRoomsCall,
+ joinRoomCall,
  updateRoomCall,
 } from "../Services/ChatServices";
 import toast from "react-hot-toast";
@@ -37,7 +38,7 @@ export const RoomChatPlaceHolder = () => {
  const fetch = async () => {
  setIsLoading(true);
  // to make it dynamic later
- await fetchRoomsCall(0, 5, false).then((res) => {
+ await fetchRoomsCall(0, 100, true).then((res) => {
  if (res?.status !== 200 && res?.status !== 201) {
  toast.error("something went wrong, try again");
  } else {
@@ -63,7 +64,7 @@ export const RoomChatPlaceHolder = () => {
 
  fetch();
  // eslint-disable-next-line
- }, []);
+ }, [ChatRoomsState.selectedChatID]);
 
  return ChatRoomsState.recentRooms.length > 0 ? (
  <div>
@@ -115,7 +116,7 @@ export const RoomChatPlaceHolder = () => {
  {isLoading === true ? (
  <span className="loading loading-spinner loading-lg"></span>
  ) : (
- <NullPlaceHolder message="You have No Rooms Yet!" />
+ <NullPlaceHolder message="You have No Rooms Yet!, Create One" />
  )}
  </div>
  );
@@ -138,7 +139,7 @@ export const CreateNewRoomModal = () => {
 
  const createNewRoom = useChatStore((state) => state.createNewRoom);
 
- const [selectedOption, setSelectedOption] = useState(RoomType.public); // Initialize with a default value
+ const [selectedOption, setSelectedOption] = useState(RoomType.public);
 
  const setIsLoading = useChatStore((state) => state.setIsLoading);
 
@@ -242,7 +243,7 @@ export const CreateNewRoomModal = () => {
  : undefined
  ).then((res) => {
  if (res?.status !== 200 && res?.status !== 201) {
- toast.error("something went wrong, try again");
+ // toast.error("something went wrong, try again");
  resetModalState();
  } else {
  createNewRoom(RoomName, selectedOption, res.data.id);
@@ -340,6 +341,7 @@ export const RoomSettingsModal = () => {
  }, [currentRoom?.type, currentRoom?.name]);
 
  const resetModalState = () => {
+ setPassword("");
  setSelectedOption(currentRoom?.type as RoomType);
  setName(currentRoom?.name as string);
  };
@@ -406,7 +408,7 @@ export const RoomSettingsModal = () => {
  {selectedOption === RoomType.protected && (
  <div className="flex flex-row p-3">
  <div className="flex flex-row w-full justify-center pt-2">
- <p>Group Password</p>
+ <p> new Password</p>
  <input
  value={RoomPassword}
  onChange={handlePasswordChange}
@@ -495,10 +497,12 @@ export const RoomSettingsModal = () => {
  await updateRoomCall(
  RoomName,
  RoomType[selectedOption],
- currentRoom?.id!
+ currentRoom?.id!,
+ selectedOption === RoomType.protected
+ ? RoomPassword
+ : undefined
  ).then((res) => {
  if (res?.status !== 200 && res?.status !== 201) {
- toast.error("something went wrong, try again");
  resetModalState();
  } else {
  editRoom(RoomName, selectedOption, currentRoom?.id!);
@@ -527,6 +531,7 @@ export const ExploreRoomsModal = () => {
  const [selectedOption, setSelectedOption] = useState(RoomType.public);
  const [SelectedRoomID, setSelectedRoomID] = useState("0");
  const [isLoading, setIsLoading] = useState(false);
+ const recentRooms = useChatStore((state) => state);
 
  const modalState = useModalStore((state) => state);
  const resetModalState = () => {
@@ -537,24 +542,31 @@ export const ExploreRoomsModal = () => {
  useEffect(() => {
  const fetch = async () => {
  setIsLoading(true);
- // to make it dynamic later
  await fetchRoomsCall(0, 30, false).then((res) => {
  if (res?.status !== 200 && res?.status !== 201) {
  toast.error("something went wrong, try again");
  resetModalState();
  } else {
+ console.log("my recent");
+ console.log(recentRooms);
  const rooms: ChatRoom[] = [];
  res.data.forEach(
  (room: { id: string; name: string; type: string }) => {
- rooms.push({
- id: room.id,
- name: room.name,
- type: RoomType[room.type as keyof typeof RoomType],
- messages: [],
- usersId: [],
- isOwner: true,
- isAdmin: true,
- });
+ if (
+ recentRooms.recentRooms.find(
+ (recentRoom) => recentRoom.id === room.id
+ ) === undefined
+ ) {
+ rooms.push({
+ id: room.id,
+ name: room.name,
+ type: RoomType[room.type as keyof typeof RoomType],
+ messages: [],
+ usersId: [],
+ isOwner: true,
+ isAdmin: true,
+ });
+ }
  }
  );
  setIsLoading(false);
@@ -564,6 +576,7 @@ export const ExploreRoomsModal = () => {
  };
 
  fetch();
+ // eslint-disable-next-line
  }, [modalState]);
 
  return (
@@ -617,7 +630,7 @@ export const ExploreRoomsModal = () => {
  ))}
  </>
  ) : (
- <NullPlaceHolder message="No Rooms Yet!, Create the First" />
+ <NullPlaceHolder message="No Rooms For You Yet!" />
  )}
  </div>
  )}
@@ -645,27 +658,20 @@ export const ExploreRoomsModal = () => {
  >
  {"Close "}
  </a>
- {ChatRooms.length > 0 && (
+ {ChatRooms.length > 0 && SelectedRoomID !== "0" && (
  <a
  href="#/"
  onClick={async () => {
- // await fetchRoomsCall(0, 5, false).then((res) => {
- // if (res?.status !== 200 && res?.status !== 201) {
- // toast.error("something went wrong, try again");
- // resetModalState();
- // } else {
- // res.data.forEach(
- // (room: { id: string; name: string; type: string }) => {
- // chatState.createNewRoom(
- // room.name,
- // RoomType["public"],
- // room.id
- // );
- // }
- // );
- // resetModalState();
- // }
- // });
+ await joinRoomCall(SelectedRoomID, undefined).then((res) => {
+ if (res?.status !== 200 && res?.status !== 201) {
+ // toast.error("something went wrong, try again");
+
+ resetModalState();
+ } else {
+ recentRooms.selectNewChatID(SelectedRoomID);
+ resetModalState();
+ }
+ });
  }}
  className="btn hover:bg-purple-500"
  >

frontend/code/src/Components/Chat/Components/tools/Assets.tsx

@@ -60,6 +60,13 @@ export interface Message {
  isRead: boolean;
 }
 
+export interface RoomMember {
+ userId : string;
+ firstName : string;
+ lastName : string;
+ avatar : string;
+}
+
 export interface ChatRoom {
  id: string;
  name: string;
@@ -70,10 +77,14 @@ export interface ChatRoom {
  type: RoomType;
 }
 
+
 export interface User {
+ firstName? : string;
+ lastName? : string
  id: string;
  name: string;
  image: string;
+ imageLInk?: string;
  messages: Message[];
 }
 

frontend/code/src/Components/Chat/Services/ChatServices.ts

@@ -1,4 +1,4 @@
-import { api } from "../../../Api/base";
+import api from "../../../Api/base";
 
 export const createNewRoomCall = async (
  name: string,
@@ -25,14 +25,16 @@ export const createNewRoomCall = async (
  name: string,
  type: string,
  roomId: string,
+ password? : string,
 
  ) => {
  try {
 
  const response = await api.post("/rooms/update", {
  name: name,
  type: type,
- roomId : roomId
+ roomId : roomId, 
+ password : password,
  });
  console.log(response.data);
  console.log(response.status);
@@ -54,8 +56,9 @@ export const createNewRoomCall = async (
  try {
  const response = await api.get(`/rooms`,
  { params: { offset: offset, limit : limit, joined : joined } });
- console.log(response.data);
+ joined === true ? console.log("resent :") : console.log("Public :");
  console.log(response.status);
+ console.log(response.data);
  return response;
  } catch (e) {
  console.log(e);
@@ -66,4 +69,45 @@ export const createNewRoomCall = async (
 
 
 
+ }
+
+
+
+ export const getRoomMembersCall = async (
+ id : string,
+ offset: number,
+ limit : number,
+ ) => {
+ try {
+ const response = await api.get(`/rooms/${id}/members`,
+ { params: {offset: offset, limit : limit } });
+ console.log("room members :");
+ console.log(response.status);
+ console.log(response.data);
+ return response;
+ } catch (e) {
+ console.log(e);
+ }
+
+ }
+
+
+ export const joinRoomCall = async (
+ roomId : string,
+ password? : string,
+
+ ) => {
+ try {
+
+ const response = await api.post("/rooms/join", {
+ roomId : roomId,
+ password : password,
+ });
+ console.log("join room")
+ console.log(response.status);
+ console.log(response.data);
+ return response;
+ } catch (e : any) {
+ console.log(e.response.data.message);
+ }
  }