Skip to content

Commit

Permalink
Merge pull request #33 from ismail-kharrobi/DEV-PingChat
Browse files Browse the repository at this point in the history 
Finish Create ChatRoom Layout
  • Loading branch information
@automerge-pingpong
automerge-pingpong[bot] authored Sep 17, 2023
2 parents b0113e3 + 6fda9fc commit 4477fd1
Show file tree
Hide file tree
Showing 9 changed files with 364 additions and 118 deletions.
23 changes: 18 additions & 5 deletions frontend/code/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/code/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"axios": "^1.5.0",
"preline": "^1.9.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.46.1",
Expand Down
210 changes: 203 additions & 7 deletions frontend/code/src/Components/Chat/Components/MessageHelpers.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,22 @@
import { Send, yas, check } from "../Components/tools/Assets";
import { useState } from "react";
import { SelectedUserTile } from "..";
import {
UserImage,
yas,
yas1,
yas2,
yas3,
yas4,
SearchIcon,
// EditIcon,
// More,
Send,
// Close,
// Bio,
GroupChat,
check,
MessageDummy,
} from "../Components/tools/Assets";

export interface myConversationProps {
username: string;
Expand Down Expand Up @@ -59,7 +77,7 @@ export const MessageTextInput = () => {
/>

<button className="btn btn-square bg-[#8C67F6]">
<img src={Send} alt=""/>
<img src={Send} alt="" />
</button>
</div>
);
Expand Down Expand Up @@ -94,13 +112,191 @@ export const ChatPlaceHolder = ({
<p className="text-gray-400 font-poppins text-sm font-medium leading-normal ">
{message}
</p>
{ isRead === false ? <div className="messages-dot relative inline-flex">
<div className="w-4 h-4 bg-red-500 rounded-full text-white flex items-center justify-center">
<span className="text-xs font-medium">5</span>
</div>
</div> : <img alt="" src={check}/>}
{isRead === false ? (
<div className="messages-dot relative inline-flex">
<div className="w-4 h-4 bg-red-500 rounded-full text-white flex items-center justify-center">
<span className="text-xs font-medium">5</span>
</div>
</div>
) : (
<img alt="" src={check} />
)}
</div>
</div>
</div>
);
};

export const OnlineNowUsers = () => {
const [Users] = useState(MessageDummy);
const [selectedOption, setSelectedOption] = useState("Public"); // Initialize with a default value

const handleOptionChange = (e: any) => {
setSelectedOption(e.target.value);
};
return (
<>
<div className="online-now-container pt-5 pl-5 pb-2 pr-3 bg-[#1A1C26]">
<div className="messages-header flex flex-row justify-between pb-2">
<p className="text-purple-500 font-poppins text-lg font-medium leading-normal ">
Messages
</p>
<div className="icons-row flex flex-row ">
<img className="mr-5" alt="" src={SearchIcon} />

<a href="#my_modal_8" className="">
<img className="" alt="" src={GroupChat} />
</a>

{/* // here */}
<div className="modal " id="my_modal_8">
<div className="modal-box bg-[#1A1C26] no-scrollbar ">
<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">
Create Chat Group
</p>
</div>
<div className="flex flex-row p-3">
<div className="flex flex-row w-full justify-center pt-2">
<img className="mr-2" alt="" src={GroupChat} />
<input
type="text"
placeholder="Set The Group Name"
className="input w-full shadow-xl max-w-lg bg-[#272932] placeholder:text-gray-400 font-poppins text-base font-normal leading-normal"
/>
</div>
</div>

<div className="flex flex-row form-control justify-around">
<label className="label cursor-pointer ">
<span className="label-text pr-2">Public</span>
<input
type="radio"
name="radio-10"
value="Public"
className="radio checked:bg-purple-500"
checked={selectedOption === "Public"}
onChange={handleOptionChange}
/>
</label>
<label className="label cursor-pointer">
<span className="label-text pr-2">Private</span>
<input
type="radio"
name="radio-10"
value="Private"
className="radio checked:bg-red-500"
checked={selectedOption === "Private"}
onChange={handleOptionChange}
/>
</label>
<label className="label cursor-pointer">
<span className="label-text pr-2">Protected</span>
<input
type="radio"
name="radio-10"
value="Protected"
className="radio checked:bg-orange-500"
checked={selectedOption === "Protected"}
onChange={handleOptionChange}
/>
</label>
</div>

{/* Conditionally render the text input */}
{selectedOption === "Protected" && (
<div className="flex flex-row p-3">
<div className="flex flex-row w-full justify-center pt-2">
<p>Group Password</p>
<input
type="Password"
className="input w-full shadow-xl max-w-lg bg-[#272932] placeholder:text-gray-400 font-poppins text-base font-normal leading-normal"
/>
</div>
</div>
)}
<p className="p-2">Select To Add Friends</p>

{/* Scrollable part */}
<div className="max-h-[300px] overflow-y-auto no-scrollbar">
{Users.map((user) => (
<SelectedUserTile
key={user.username} // Make sure to add a unique key prop
username={user.username}
userImage={user.userImage}
message={""}
time={""}
isMe={false}
isRead={false}
/>
))}
</div>

<div className="modal-action">
{
// eslint-disable-next-line
}<a href="#" className="btn hover:bg-purple-500">
{" "}
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="message-row flex flex-row pt-2 justify-between">
<p className="text-gray-400 font-poppins text-xs font-medium leading-normal ">
Online Now
</p>
<p className="text-gray-400 font-poppins text-xs font-medium leading-normal ">
See All
</p>
</div>
<div className="users-images flex flex-row justify-between pt-3 ">
<div className="relative inline-block">
<img
className="user-image h-10 w-10 rounded-full"
src={UserImage}
alt={`second's Profile`}
/>
<div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
</div>

<div className="relative inline-block">
<img
className="user-image h-10 w-10 rounded-full"
src={yas1}
alt={`second's Profile`}
/>
<div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
</div>
<div className="relative inline-block">
<img
className="user-image h-10 w-10 rounded-full"
src={yas2}
alt={`second's Profile`}
/>
<div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
</div>
<div className="relative inline-block">
<img
className="user-image h-10 w-10 rounded-full"
src={yas3}
alt={`second's Profile`}
/>
<div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
</div>
<div className="relative inline-block">
<img
className="user-image h-10 w-10 rounded-full"
src={yas4}
alt={`second's Profile`}
/>
<div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div>
</div>
</div>
</div>
</>
);
};
2 changes: 2 additions & 0 deletions frontend/code/src/Components/Chat/Components/tools/Assets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import Close from "../../assets/close_icon.svg";
import Bio from "../../assets/bio_icon.svg";
import check from "../../assets/check_icon.svg";
import group from "../../assets/groupChat.png";
import GroupChat from "../../assets/CreateGroupChat.svg"
import { myConversationProps } from "../MessageHelpers";

export const MessageDummy: myConversationProps[] = [
Expand Down Expand Up @@ -106,4 +107,5 @@ export {
Close,
Bio,
check,
GroupChat
};
Loading

0 comments on commit 4477fd1

Please sign in to comment.