Skip to content

Commit

Permalink
Fixed image slide show (#67)
Browse files Browse the repository at this point in the history 
* [Finishes #187584877] Admin should be able to disable an account

* [Delivers #187584880]Users should be able to chat
  • Loading branch information
@Aime-Patrick
Aime-Patrick authored Aug 4, 2024
1 parent 6cab583 commit f0365d7
Show file tree
Hide file tree
Showing 5 changed files with 110 additions and 113 deletions.
Binary file added public/assets/images/1293.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/assets/images/23172.jpg
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion src/assets/styles/Product.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
&:hover {
transform: scale(1.05);
box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.3);
transition: all 0.2s ease-in-out;
transition: all 0.3s ease-in-out;;
}

.product-image-container {
Expand Down
204 changes: 109 additions & 95 deletions src/components/live-chat/LiveChat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { URL } from "../../utils/axios/axiosInstance";
import { clearImages } from "../../store/actions/resetAction";
import { IoIosCloseCircle } from "react-icons/io";
import EmojiPicker, { EmojiStyle, Theme } from "emoji-picker-react";
import { Empty } from "antd";

const LiveChat = () => {
const [messages, setMessages] = useState([]);
Expand Down Expand Up @@ -71,7 +72,7 @@ const LiveChat = () => {
if (user) {
setCurrentUserId(user.id);
setIsLoggedIn(true);
}else{
} else {
setIsLoggedIn(false);
setIsChatOpen(false);
setIsMinimized(false);
Expand All @@ -86,33 +87,33 @@ const LiveChat = () => {
}, [images]);

useEffect(() => {
if(isLoggedIn){
if (isLoggedIn) {
const newSocket = io(`${URL}/chats`, {
auth: {
token: localStorage.getItem("token"),
},
});

setSocket(newSocket);

newSocket.on("connect", () => {
newSocket.emit("requestPastMessages");
});

newSocket.on("userJoined", (data) => {
setUsers((prevUsers) => [...prevUsers, data.user]);
});

newSocket.on("userLeft", (data) => {
setUsers((prevUsers) =>
prevUsers.filter((user) => user.id !== data.user.id)
);
});

newSocket.on("chatMessage", (data) => {
if (isNotificationEnabled && (!isChatOpen || isMinimized)) {
notificationRef.current.play();
}
}
const newMessage = {
id: Date.now(),
userId: data.user.id,
Expand All @@ -123,7 +124,6 @@ const LiveChat = () => {
};
setMessages((prevMessages) => [...prevMessages, newMessage]);
if (data.user.id !== currentUserId) {

if (
!lastReadTimestamp ||
new Date(newMessage.timestamp) > lastReadTimestamp
Expand All @@ -132,7 +132,7 @@ const LiveChat = () => {
}
}
});

newSocket.on("pastMessages", (data) => {
const oldMessages = data.map((msg) => ({
id: msg.id || Date.now(),
Expand All @@ -144,15 +144,15 @@ const LiveChat = () => {
}));
setMessages(oldMessages);
});

newSocket.on("connect_error", (error) => {
if (error.message === "Authentication error") {
console.log("Authentication error detected. Closing chat.");
setIsLoggedIn(false);
}
console.log("connection error", error);
});

return () => {
newSocket.disconnect();
};
Expand Down Expand Up @@ -211,11 +211,14 @@ const LiveChat = () => {
}
}, [dispatch]);

useEffect(()=>{
if(messages.length > 0 && isChatOpen){
lastMessageRef.current?.scrollIntoView({behavior:"smooth",block:"end"})
useEffect(() => {
if (messages.length > 0 && isChatOpen) {
lastMessageRef.current?.scrollIntoView({
behavior: "smooth",
block: "end",
});
}
},[messages,isChatOpen]);
}, [messages, isChatOpen]);
const handleChangeMessage = (event) => {
setCurrentMessage(event.target.value);
};
Expand All @@ -237,7 +240,7 @@ const LiveChat = () => {
);
input.focus();
}, 0);
setIsEmojiPickerOpen((prev)=>!prev)
setIsEmojiPickerOpen((prev) => !prev);
}
};

Expand Down Expand Up @@ -317,7 +320,6 @@ const LiveChat = () => {
};
}, [isChatOpen, messages]);


useEffect(() => {
const chatContainer = chatMessagesRef.current;
if (isChatOpen && chatContainer) {
Expand Down Expand Up @@ -438,83 +440,96 @@ const LiveChat = () => {
{!isMinimized && (
<>
<div className="chat-messages" ref={chatMessagesRef}>
{messages.map((msg, index) => {
let textImage = [];
let messageText = msg.text;
const isFirstUnread =
isUnread(msg.timestamp) &&
(index === 0 || !isUnread(messages[index - 1]?.timestamp));
if (messageText?.includes(" + ")) {
const [imagesPart, ...messageParts] =
messageText.split(" + ");
textImage = imagesPart
.split(", ")
.filter((url) => url.startsWith("http"));
messageText = messageParts.join(" + ");
}

return (
<React.Fragment key={msg.id}>
{isFirstUnread && (
<div className="unread-badge-container">
<span className="unread-badge">New</span>
</div>
)}
<div
className={`chat-message ${isUnread(msg.timestamp) ? "unread" : ""} ${
msg.userId === currentUserId
? "chat-message-right"
: "chat-message-left"
}`}
>
<div className="profile-image">
<img
src={msg.profileImage}
alt="User profile"
className="user-profile-img"
/>
</div>
<div className="message-content">
<span className="username">
{msg.username?.toLowerCase()}
</span>
<span style={{ marginBottom: ".5rem" }}>
{messageText}
</span>
{(msg.images?.length > 0 || textImage.length > 0) && (
<div className="images-container">
{(msg.images || textImage).map(
(image: string, idx: number) => (
<div key={idx} className="imageDisplay">
<img
src={image}
alt={`Image ${idx}`}
onClick={() => handleImageClick(image)}
/>
<GrZoomIn
className="zoomIn"
onClick={() => handleImageClick(image)}
/>
</div>
)
)}
</div>
{messages.length > 0 ? (
messages.map((msg, index) => {
let textImage = [];
let messageText = msg.text;
const isFirstUnread =
isUnread(msg.timestamp) &&
(index === 0 ||
!isUnread(messages[index - 1]?.timestamp));
if (messageText?.includes(" + ")) {
const [imagesPart, ...messageParts] =
messageText.split(" + ");
textImage = imagesPart
.split(", ")
.filter((url) => url.startsWith("http"));
messageText = messageParts.join(" + ");
}

return (
<React.Fragment key={msg.id}>
{isFirstUnread && (
<div className="unread-badge-container">
<span className="unread-badge">New</span>
</div>
)}
<div
className={`chat-message ${isUnread(msg.timestamp) ? "unread" : ""} ${
msg.userId === currentUserId
? "chat-message-right"
: "chat-message-left"
}`}
>
<div className="profile-image">
<img
src={msg.profileImage}
alt="User profile"
className="user-profile-img"
/>
</div>
<div className="message-content">
<span className="username">
{msg.username?.toLowerCase()}
</span>
<span style={{ marginBottom: ".5rem" }}>
{messageText}
</span>
{(msg.images?.length > 0 ||
textImage.length > 0) && (
<div className="images-container">
{(msg.images || textImage).map(
(image: string, idx: number) => (
<div key={idx} className="imageDisplay">
<img
src={image}
alt={`Image ${idx}`}
onClick={() => handleImageClick(image)}
/>
<GrZoomIn
className="zoomIn"
onClick={() => handleImageClick(image)}
/>
</div>
)
)}
</div>
)}
<span className="timestamp">
{new Date(msg.timestamp)
.toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
hour12: true,
})
.toUpperCase()}
</span>
</div>
{index === messages.length - 1 && (
<div ref={lastMessageRef} />
)}
<span className="timestamp">
{new Date(msg.timestamp)
.toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
hour12: true,
})
.toUpperCase()}
</span>
</div>
{index === messages.length - 1 && <div ref={lastMessageRef} />}
</div>
</React.Fragment>
);
})}
</React.Fragment>
);
})
) : (
<div className="no-chats-message">
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={"No chats available. Start a conversation🤖"}
/>
</div>
)}
</div>
<div className="chat-inputs">
{allImages && allImages.length > 0 && (
Expand All @@ -538,7 +553,7 @@ const LiveChat = () => {
)}
<div className="chat-input">
<input
className="input"
className="input"
type="text"
value={currentMessage}
onChange={handleChangeMessage}
Expand Down Expand Up @@ -571,7 +586,6 @@ const LiveChat = () => {
theme={Theme.DARK}
emojiStyle={EmojiStyle.GOOGLE}
onEmojiClick={handleEmojiClick}

/>
</div>
<input
Expand Down
17 changes: 0 additions & 17 deletions src/pages/Products.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,6 @@ const ProductsPage: React.FC = () => {

return (
<>
<Meta title="Products - E-Commerce Ninjas" />
<Meta title="Products - E-Commerce Ninjas" />
<div className="landing-container">
{isLoading ? (
Expand All @@ -117,22 +116,6 @@ const ProductsPage: React.FC = () => {
<div className="head">
<h1>Products</h1>
</div>
<div className="filters">
<div>
<label>Price Range: </label>
<input
type="range"
min={minPrice}
max={maxPrice}
value={priceRange[1]}
onChange={(e) =>
setPriceRange([priceRange[0], Number(e.target.value)])
}
/>
<span className="span">${priceRange[0]} - ${priceRange[1]}</span>
</div>
<h1>Products</h1>
</div>
<div className="filters">
<div>
<label>Price Range: </label>
Expand Down

0 comments on commit f0365d7

Please sign in to comment.