Skip to content

Commit f0365d7

Browse files
Aime-PatrickAime-Patrick
authored
Fixed image slide show (#67)
* [Finishes #187584877] Admin should be able to disable an account * [Delivers #187584880]Users should be able to chat
1 parent 6cab583 commit f0365d7

File tree

5 files changed

+110
-113
lines changed

5 files changed

+110
-113
lines changed

Diff for: ‎public/assets/images/1293.jpg

5.75 MB
Loading

Diff for: ‎public/assets/images/23172.jpg

-1.5 MB
Binary file not shown.

Diff for: ‎src/assets/styles/Product.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
&:hover {
99
transform: scale(1.05);
1010
box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.3);
11-
transition: all 0.2s ease-in-out;
11+
transition: all 0.3s ease-in-out;;
1212
}
1313

1414
.product-image-container {

Diff for: ‎src/components/live-chat/LiveChat.tsx

+109-95
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { URL } from "../../utils/axios/axiosInstance";
2727
import { clearImages } from "../../store/actions/resetAction";
2828
import { IoIosCloseCircle } from "react-icons/io";
2929
import EmojiPicker, { EmojiStyle, Theme } from "emoji-picker-react";
30+
import { Empty } from "antd";
3031

3132
const LiveChat = () => {
3233
const [messages, setMessages] = useState([]);
@@ -71,7 +72,7 @@ const LiveChat = () => {
7172
if (user) {
7273
setCurrentUserId(user.id);
7374
setIsLoggedIn(true);
74-
}else{
75+
} else {
7576
setIsLoggedIn(false);
7677
setIsChatOpen(false);
7778
setIsMinimized(false);
@@ -86,33 +87,33 @@ const LiveChat = () => {
8687
}, [images]);
8788

8889
useEffect(() => {
89-
if(isLoggedIn){
90+
if (isLoggedIn) {
9091
const newSocket = io(`${URL}/chats`, {
9192
auth: {
9293
token: localStorage.getItem("token"),
9394
},
9495
});
95-
96+
9697
setSocket(newSocket);
97-
98+
9899
newSocket.on("connect", () => {
99100
newSocket.emit("requestPastMessages");
100101
});
101-
102+
102103
newSocket.on("userJoined", (data) => {
103104
setUsers((prevUsers) => [...prevUsers, data.user]);
104105
});
105-
106+
106107
newSocket.on("userLeft", (data) => {
107108
setUsers((prevUsers) =>
108109
prevUsers.filter((user) => user.id !== data.user.id)
109110
);
110111
});
111-
112+
112113
newSocket.on("chatMessage", (data) => {
113114
if (isNotificationEnabled && (!isChatOpen || isMinimized)) {
114115
notificationRef.current.play();
115-
}
116+
}
116117
const newMessage = {
117118
id: Date.now(),
118119
userId: data.user.id,
@@ -123,7 +124,6 @@ const LiveChat = () => {
123124
};
124125
setMessages((prevMessages) => [...prevMessages, newMessage]);
125126
if (data.user.id !== currentUserId) {
126-
127127
if (
128128
!lastReadTimestamp ||
129129
new Date(newMessage.timestamp) > lastReadTimestamp
@@ -132,7 +132,7 @@ const LiveChat = () => {
132132
}
133133
}
134134
});
135-
135+
136136
newSocket.on("pastMessages", (data) => {
137137
const oldMessages = data.map((msg) => ({
138138
id: msg.id || Date.now(),
@@ -144,15 +144,15 @@ const LiveChat = () => {
144144
}));
145145
setMessages(oldMessages);
146146
});
147-
147+
148148
newSocket.on("connect_error", (error) => {
149149
if (error.message === "Authentication error") {
150150
console.log("Authentication error detected. Closing chat.");
151151
setIsLoggedIn(false);
152152
}
153153
console.log("connection error", error);
154154
});
155-
155+
156156
return () => {
157157
newSocket.disconnect();
158158
};
@@ -211,11 +211,14 @@ const LiveChat = () => {
211211
}
212212
}, [dispatch]);
213213

214-
useEffect(()=>{
215-
if(messages.length > 0 && isChatOpen){
216-
lastMessageRef.current?.scrollIntoView({behavior:"smooth",block:"end"})
214+
useEffect(() => {
215+
if (messages.length > 0 && isChatOpen) {
216+
lastMessageRef.current?.scrollIntoView({
217+
behavior: "smooth",
218+
block: "end",
219+
});
217220
}
218-
},[messages,isChatOpen]);
221+
}, [messages, isChatOpen]);
219222
const handleChangeMessage = (event) => {
220223
setCurrentMessage(event.target.value);
221224
};
@@ -237,7 +240,7 @@ const LiveChat = () => {
237240
);
238241
input.focus();
239242
}, 0);
240-
setIsEmojiPickerOpen((prev)=>!prev)
243+
setIsEmojiPickerOpen((prev) => !prev);
241244
}
242245
};
243246

@@ -317,7 +320,6 @@ const LiveChat = () => {
317320
};
318321
}, [isChatOpen, messages]);
319322

320-
321323
useEffect(() => {
322324
const chatContainer = chatMessagesRef.current;
323325
if (isChatOpen && chatContainer) {
@@ -438,83 +440,96 @@ const LiveChat = () => {
438440
{!isMinimized && (
439441
<>
440442
<div className="chat-messages" ref={chatMessagesRef}>
441-
{messages.map((msg, index) => {
442-
let textImage = [];
443-
let messageText = msg.text;
444-
const isFirstUnread =
445-
isUnread(msg.timestamp) &&
446-
(index === 0 || !isUnread(messages[index - 1]?.timestamp));
447-
if (messageText?.includes(" + ")) {
448-
const [imagesPart, ...messageParts] =
449-
messageText.split(" + ");
450-
textImage = imagesPart
451-
.split(", ")
452-
.filter((url) => url.startsWith("http"));
453-
messageText = messageParts.join(" + ");
454-
}
455-
456-
return (
457-
<React.Fragment key={msg.id}>
458-
{isFirstUnread && (
459-
<div className="unread-badge-container">
460-
<span className="unread-badge">New</span>
461-
</div>
462-
)}
463-
<div
464-
className={`chat-message ${isUnread(msg.timestamp) ? "unread" : ""} ${
465-
msg.userId === currentUserId
466-
? "chat-message-right"
467-
: "chat-message-left"
468-
}`}
469-
>
470-
<div className="profile-image">
471-
<img
472-
src={msg.profileImage}
473-
alt="User profile"
474-
className="user-profile-img"
475-
/>
476-
</div>
477-
<div className="message-content">
478-
<span className="username">
479-
{msg.username?.toLowerCase()}
480-
</span>
481-
<span style={{ marginBottom: ".5rem" }}>
482-
{messageText}
483-
</span>
484-
{(msg.images?.length > 0 || textImage.length > 0) && (
485-
<div className="images-container">
486-
{(msg.images || textImage).map(
487-
(image: string, idx: number) => (
488-
<div key={idx} className="imageDisplay">
489-
<img
490-
src={image}
491-
alt={`Image ${idx}`}
492-
onClick={() => handleImageClick(image)}
493-
/>
494-
<GrZoomIn
495-
className="zoomIn"
496-
onClick={() => handleImageClick(image)}
497-
/>
498-
</div>
499-
)
500-
)}
501-
</div>
443+
{messages.length > 0 ? (
444+
messages.map((msg, index) => {
445+
let textImage = [];
446+
let messageText = msg.text;
447+
const isFirstUnread =
448+
isUnread(msg.timestamp) &&
449+
(index === 0 ||
450+
!isUnread(messages[index - 1]?.timestamp));
451+
if (messageText?.includes(" + ")) {
452+
const [imagesPart, ...messageParts] =
453+
messageText.split(" + ");
454+
textImage = imagesPart
455+
.split(", ")
456+
.filter((url) => url.startsWith("http"));
457+
messageText = messageParts.join(" + ");
458+
}
459+
460+
return (
461+
<React.Fragment key={msg.id}>
462+
{isFirstUnread && (
463+
<div className="unread-badge-container">
464+
<span className="unread-badge">New</span>
465+
</div>
466+
)}
467+
<div
468+
className={`chat-message ${isUnread(msg.timestamp) ? "unread" : ""} ${
469+
msg.userId === currentUserId
470+
? "chat-message-right"
471+
: "chat-message-left"
472+
}`}
473+
>
474+
<div className="profile-image">
475+
<img
476+
src={msg.profileImage}
477+
alt="User profile"
478+
className="user-profile-img"
479+
/>
480+
</div>
481+
<div className="message-content">
482+
<span className="username">
483+
{msg.username?.toLowerCase()}
484+
</span>
485+
<span style={{ marginBottom: ".5rem" }}>
486+
{messageText}
487+
</span>
488+
{(msg.images?.length > 0 ||
489+
textImage.length > 0) && (
490+
<div className="images-container">
491+
{(msg.images || textImage).map(
492+
(image: string, idx: number) => (
493+
<div key={idx} className="imageDisplay">
494+
<img
495+
src={image}
496+
alt={`Image ${idx}`}
497+
onClick={() => handleImageClick(image)}
498+
/>
499+
<GrZoomIn
500+
className="zoomIn"
501+
onClick={() => handleImageClick(image)}
502+
/>
503+
</div>
504+
)
505+
)}
506+
</div>
507+
)}
508+
<span className="timestamp">
509+
{new Date(msg.timestamp)
510+
.toLocaleTimeString([], {
511+
hour: "2-digit",
512+
minute: "2-digit",
513+
hour12: true,
514+
})
515+
.toUpperCase()}
516+
</span>
517+
</div>
518+
{index === messages.length - 1 && (
519+
<div ref={lastMessageRef} />
502520
)}
503-
<span className="timestamp">
504-
{new Date(msg.timestamp)
505-
.toLocaleTimeString([], {
506-
hour: "2-digit",
507-
minute: "2-digit",
508-
hour12: true,
509-
})
510-
.toUpperCase()}
511-
</span>
512521
</div>
513-
{index === messages.length - 1 && <div ref={lastMessageRef} />}
514-
</div>
515-
</React.Fragment>
516-
);
517-
})}
522+
</React.Fragment>
523+
);
524+
})
525+
) : (
526+
<div className="no-chats-message">
527+
<Empty
528+
image={Empty.PRESENTED_IMAGE_SIMPLE}
529+
description={"No chats available. Start a conversation🤖"}
530+
/>
531+
</div>
532+
)}
518533
</div>
519534
<div className="chat-inputs">
520535
{allImages && allImages.length > 0 && (
@@ -538,7 +553,7 @@ const LiveChat = () => {
538553
)}
539554
<div className="chat-input">
540555
<input
541-
className="input"
556+
className="input"
542557
type="text"
543558
value={currentMessage}
544559
onChange={handleChangeMessage}
@@ -571,7 +586,6 @@ const LiveChat = () => {
571586
theme={Theme.DARK}
572587
emojiStyle={EmojiStyle.GOOGLE}
573588
onEmojiClick={handleEmojiClick}
574-
575589
/>
576590
</div>
577591
<input

Diff for: ‎src/pages/Products.tsx

-17
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,6 @@ const ProductsPage: React.FC = () => {
101101

102102
return (
103103
<>
104-
<Meta title="Products - E-Commerce Ninjas" />
105104
<Meta title="Products - E-Commerce Ninjas" />
106105
<div className="landing-container">
107106
{isLoading ? (
@@ -117,22 +116,6 @@ const ProductsPage: React.FC = () => {
117116
<div className="head">
118117
<h1>Products</h1>
119118
</div>
120-
<div className="filters">
121-
<div>
122-
<label>Price Range: </label>
123-
<input
124-
type="range"
125-
min={minPrice}
126-
max={maxPrice}
127-
value={priceRange[1]}
128-
onChange={(e) =>
129-
setPriceRange([priceRange[0], Number(e.target.value)])
130-
}
131-
/>
132-
<span className="span">${priceRange[0]} - ${priceRange[1]}</span>
133-
</div>
134-
<h1>Products</h1>
135-
</div>
136119
<div className="filters">
137120
<div>
138121
<label>Price Range: </label>

0 commit comments

Comments
 (0)