Adding Explore section (#46)

Wadie-ess · Oct 15, 2023 · 277f350 · 277f350
2 parents ecc8f20 + 14d27a3
commit 277f350
Show file tree

Hide file tree

Showing 14 changed files with 1,577 additions and 214 deletions.
diff --git a/frontend/code/package-lock.json b/frontend/code/package-lock.json
diff --git a/frontend/code/package.json b/frontend/code/package.json
@@ -7,8 +7,8 @@
     "@chakra-ui/react": "^2.8.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mantine/core": "^7.1.2",
-    "@mantine/hooks": "^7.1.2",
+    "@mantine/core": "^7.1.3",
+    "@mantine/hooks": "^7.1.3",
     "@react-spring/web": "^9.7.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

diff --git a/frontend/code/src/Components/Chat/Components/Conversation.tsx b/frontend/code/src/Components/Chat/Components/Conversation.tsx
@@ -9,12 +9,7 @@ import users, {
 } from "./tools/Assets";
 import { ChatType, useChatStore } from "../Controllers/ChatControllers";
 
-import {
-  ConfirmationModal,
-
-  NullPlaceHolder,
-
-} from "./RoomChatHelpers";
+import { ConfirmationModal, NullPlaceHolder } from "./RoomChatHelpers";
 import { KeyboardEvent } from "react";
 
 export interface ChatPaceHolderProps {
@@ -181,14 +176,19 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
             >
               {/* check if current user is admin or owner to show the settings toast */}
               {currentRoom?.isAdmin || currentRoom?.isOwner ? (
-                <div className="icons-row flex flex-row  ">
+                <div className="icons-row flex flex-col  ">
                   <a href="#my_modal_9" className="">
                     <li>
                       <span className="hover:bg-[#7940CF]">
                         Edit Room Settings
                       </span>
                     </li>
                   </a>
+                  <a href="#my_modal_6" className="">
+                    <li>
+                      <span className="hover:bg-[#7940CF]">Add Users</span>
+                    </li>
+                  </a>
                 </div>
               ) : (
                 <></>
@@ -202,13 +202,17 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
                   Show Room Info
                 </span>
               </li>
-              <div>
-                <li>
-                  <span onClick={openModal} className="hover:bg-[#7940CF]">
-                    leave The Room
-                  </span>
-                </li>
-              </div>
+              {currentRoom?.isOwner === false ? (
+                <div>
+                  <li>
+                    <span onClick={openModal} className="hover:bg-[#7940CF]">
+                      leave The Room
+                    </span>
+                  </li>
+                </div>
+              ) : (
+                <></>
+              )}
             </ul>
             <ConfirmationModal
               isOpen={isModalOpen}
@@ -272,7 +276,7 @@ export const Conversation: React.FC<ConversationProps> = ({
     // do stuff
   };
 
-  return (selectedMessages?.length as number) > 0 ? (
+  return (
     <div className="flex flex-col h-[99%] ">
       <ConversationHeader onRemoveUserPreview={onRemoveUserPreview} />
       <div
@@ -328,7 +332,5 @@ export const Conversation: React.FC<ConversationProps> = ({
         </div>
       </div>
     </div>
-  ) : (
-    <NullPlaceHolder message="No Conversation Yet!, Be The First " />
   );
 };
diff --git a/frontend/code/src/Components/Chat/Components/RecentChat.tsx b/frontend/code/src/Components/Chat/Components/RecentChat.tsx
@@ -3,21 +3,23 @@ import { ChatType, useChatStore } from "../Controllers/ChatControllers";
 import { ChatPaceHolderProps } from "./Conversation";
 import users, {
   ChatIcon,
+  Explore,
   GroupChat,
   RoomsIcon,
-
   check,
-
 } from "./tools/Assets";
 
 import {
+  AddUsersModal,
   CreateNewRoomModal,
-
+  ExploreRoomsModal,
   NullPlaceHolder,
   RoomChatPlaceHolder,
   RoomSettingsModal,
 } from "./RoomChatHelpers";
 
+
+
 export const RecentConversations = () => {
   const [MyUsers] = useState(users);
   const selectedChatType = useChatStore((state) => state.selectedChatType);
@@ -112,6 +114,7 @@ export const ChatPlaceHolder = ({
 };
 
 export const OnlineNowUsers = () => {
+
   const selectedChatType = useChatStore((state) => state.selectedChatType);
   const changeChatType = useChatStore((state) => state.changeChatType);
   const [Users] = useState(users);
@@ -125,13 +128,17 @@ export const OnlineNowUsers = () => {
           <p className="text-purple-500 font-poppins text-sm md:text-lg font-medium leading-normal ">
             Messages
           </p>
-          <div className="icons-row flex flex-row items-center ">
+          <div className="icons-row flex flex-row items-center  ">
+            <a href="#my_modal_5" className="pr-3">
+              <img className="w-[100%]" alt="" src={Explore} />
+            </a>
             <a href="#my_modal_8" className="">
               <img className="w-[80%]" alt="" src={GroupChat} />
             </a>
             <div>
+              <ExploreRoomsModal/>
               <RoomSettingsModal />
-
+              <AddUsersModal />
               <CreateNewRoomModal />
             </div>
           </div>