From 06495eee5b186ebf7e8546117c8f04b76af8bd04 Mon Sep 17 00:00:00 2001 From: Ayushraj1605 Date: Fri, 3 Jan 2025 23:10:13 +0530 Subject: [PATCH 1/3] Add some amazing feature --- StoreHUB-fronted/src/pages/Discussion.jsx | 33 ++++++++++++++--------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/StoreHUB-fronted/src/pages/Discussion.jsx b/StoreHUB-fronted/src/pages/Discussion.jsx index f087acd..2c03b86 100644 --- a/StoreHUB-fronted/src/pages/Discussion.jsx +++ b/StoreHUB-fronted/src/pages/Discussion.jsx @@ -102,6 +102,9 @@ const DiscussionApp = () => { ...prev, [selectedChannel.id]: [...(prev[selectedChannel.id] || []), mes], })); + + // Scroll to the latest message + scrollToLatestMessage(); }; socket.onerror = (error) => { @@ -144,6 +147,13 @@ const DiscussionApp = () => { }; }, [selectedChannel, user.user.id, scrollToLatestMessage]); // Ensure dependencies are correct + useEffect(() => { + if (selectedChannel) { + scrollToLatestMessage(); // Trigger auto-scroll on message updates + } + }, [messages, selectedChannel]); // Watch for changes in messages or channel + + const fetchChatHistory = useCallback(async () => { if (!selectedChannel) return; @@ -192,8 +202,8 @@ const DiscussionApp = () => { const filteredMessages = selectedChannel ? (messages[selectedChannel.id] || []).filter((msg) => - msg?.Content?.toLowerCase().includes(searchTerm.toLowerCase()) - ) + msg?.Content?.toLowerCase().includes(searchTerm.toLowerCase()) + ) : []; const toggleSidebar = () => { @@ -263,11 +273,10 @@ const DiscussionApp = () => {
handleChannelSelect(channel)} - className={`flex items-center p-3 cursor-pointer rounded-lg transition-all duration-200 ${ - selectedChannel?.id === channel.id - ? "border-black text-black border" - : "hover:bg-gray-200 hover:text-black" - }`} + className={`flex items-center p-3 cursor-pointer rounded-lg transition-all duration-200 ${selectedChannel?.id === channel.id + ? "border-black text-black border" + : "hover:bg-gray-200 hover:text-black" + }`} > {channel.icon}
@@ -291,9 +300,8 @@ const DiscussionApp = () => { {/* Main Content Area */}
{selectedChannel ? (
@@ -324,9 +332,8 @@ const DiscussionApp = () => { return (
Date: Sun, 5 Jan 2025 16:37:24 +0530 Subject: [PATCH 2/3] fixes the autoscrolling --- StoreHUB-auth/config.yaml | 10 +++ StoreHUB-auth/migrate/migrate.go | 37 +++++++++++ StoreHUB-fronted/src/pages/Discussion.jsx | 78 +++++++++++------------ 3 files changed, 85 insertions(+), 40 deletions(-) create mode 100644 StoreHUB-auth/config.yaml create mode 100644 StoreHUB-auth/migrate/migrate.go diff --git a/StoreHUB-auth/config.yaml b/StoreHUB-auth/config.yaml new file mode 100644 index 0000000..803dd07 --- /dev/null +++ b/StoreHUB-auth/config.yaml @@ -0,0 +1,10 @@ +database: + host: localhost + port: 3306 + username: root + password: Ayush1raj@@ + dbname: storehub + +server: + port: 8080 + jwt_secret: "Ayush" \ No newline at end of file diff --git a/StoreHUB-auth/migrate/migrate.go b/StoreHUB-auth/migrate/migrate.go new file mode 100644 index 0000000..0871186 --- /dev/null +++ b/StoreHUB-auth/migrate/migrate.go @@ -0,0 +1,37 @@ +package main + +import ( + "log" + "time" // Added for time.Time + "gorm.io/driver/mysql" + "gorm.io/gorm" +) + +func main() { + // Database connection details + dsn := "root:Ayush1raj@@@tcp(127.0.0.1:3306)/storehub?charset=utf8mb4&parseTime=True&loc=Local" + db, err := gorm.Open(mysql.Open(dsn), &gorm.Config{}) + if err != nil { + log.Fatalf("Failed to connect to the database: %v", err) + } + + // Run database migrations + err = db.AutoMigrate( + &User{}, // Add all models to migrate here + ) + if err != nil { + log.Fatalf("Failed to run migrations: %v", err) + } + + log.Println("Database migration completed successfully!") +} + +// User model +type User struct { + ID uint `gorm:"primaryKey"` + Username string `gorm:"unique;not null"` + Email string `gorm:"unique;not null"` + Password string `gorm:"not null"` + CreatedAt time.Time `gorm:"autoCreateTime"` + UpdatedAt time.Time `gorm:"autoUpdateTime"` +} diff --git a/StoreHUB-fronted/src/pages/Discussion.jsx b/StoreHUB-fronted/src/pages/Discussion.jsx index 2c03b86..defa608 100644 --- a/StoreHUB-fronted/src/pages/Discussion.jsx +++ b/StoreHUB-fronted/src/pages/Discussion.jsx @@ -14,11 +14,11 @@ import { ArrowLeft, Menu, } from "lucide-react"; -import { useAuth } from "../context/AuthContext"; // Assume this provides user details +import { useAuth } from "../context/AuthContext"; import apiClient from "../utils/apiClient"; const DiscussionApp = () => { - const { user } = useAuth(); // Current user details + const { user } = useAuth(); const [selectedChannel, setSelectedChannel] = useState(null); const [messages, setMessages] = useState({}); const [newMessage, setNewMessage] = useState(""); @@ -26,15 +26,17 @@ const DiscussionApp = () => { const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false); const [isSidebarOpen, setIsSidebarOpen] = useState(true); const socketRef = useRef(null); - const latestMessageRef = useRef(null); // Reference for the latest message + const messageContainerRef = useRef(null); // Reference for the message container - // Function to scroll to the latest message - const scrollToLatestMessage = useCallback(() => { - if (latestMessageRef.current) { - latestMessageRef.current.scrollIntoView({ behavior: "smooth" }); + // Updated scroll function to scroll only the container + const scrollToBottom = useCallback(() => { + if (messageContainerRef.current) { + const container = messageContainerRef.current; + container.scrollTop = container.scrollHeight; } }, []); + // Rest of the imports and initial setup remain the same... const channels = [ { id: "react", @@ -103,15 +105,13 @@ const DiscussionApp = () => { [selectedChannel.id]: [...(prev[selectedChannel.id] || []), mes], })); - // Scroll to the latest message - scrollToLatestMessage(); + // Scroll to bottom after receiving a message + setTimeout(scrollToBottom, 100); }; socket.onerror = (error) => { console.error("WebSocket error:", error); - // Implement reconnection logic setTimeout(() => { - // Attempt to reconnect connectWebSocket(); }, 5000); }; @@ -119,9 +119,7 @@ const DiscussionApp = () => { socket.onclose = (event) => { console.log("WebSocket disconnected:", event); if (!event.wasClean) { - // Unexpected close, try to reconnect setTimeout(() => { - // Attempt to reconnect connectWebSocket(); }, 5000); } @@ -131,28 +129,25 @@ const DiscussionApp = () => { }; useEffect(() => { - // Only reconnect if the channel has changed if (!selectedChannel) return; - scrollToLatestMessage(); // Scroll to the latest message - - connectWebSocket(); // Use the defined function + + connectWebSocket(); previousChannelRef.current = selectedChannel; - // Cleanup function return () => { if (socketRef.current) { socketRef.current.close(); } }; - }, [selectedChannel, user.user.id, scrollToLatestMessage]); // Ensure dependencies are correct + }, [selectedChannel, user.user.id]); + // Effect for handling initial load and message updates useEffect(() => { - if (selectedChannel) { - scrollToLatestMessage(); // Trigger auto-scroll on message updates + if (selectedChannel && messages[selectedChannel.id]?.length > 0) { + scrollToBottom(); } - }, [messages, selectedChannel]); // Watch for changes in messages or channel - + }, [selectedChannel, messages, scrollToBottom]); const fetchChatHistory = useCallback(async () => { if (!selectedChannel) return; @@ -172,14 +167,13 @@ const DiscussionApp = () => { const handleSendMessage = useCallback(() => { if (newMessage.trim() && selectedChannel && socketRef.current) { const messagePayload = { - Content: newMessage, // Use 'Content' instead of 'text' + Content: newMessage, }; console.log(messagePayload, "Sending message"); if (socketRef.current.readyState === WebSocket.OPEN) { socketRef.current.send(JSON.stringify(messagePayload)); - // Optimistically update the messages state const localMessage = { id: Date.now(), UserID: user.user.id, @@ -191,14 +185,14 @@ const DiscussionApp = () => { // ...prev, // [selectedChannel.id]: [...(prev[selectedChannel.id] || []), localMessage], // })); - scrollToLatestMessage(); setNewMessage(""); + setTimeout(scrollToBottom, 100); } else { console.error("WebSocket is not open. Unable to send message."); } } - }, [newMessage, selectedChannel, user.user.id]); // Updated dependency + }, [newMessage, selectedChannel, user.user.id, scrollToBottom]); const filteredMessages = selectedChannel ? (messages[selectedChannel.id] || []).filter((msg) => @@ -222,9 +216,8 @@ const DiscussionApp = () => {

DevChat

- {/* Open Sidebar Button */}
@@ -247,7 +240,6 @@ const DiscussionApp = () => {
- {/* Close Sidebar Button */} @@ -273,10 +265,11 @@ const DiscussionApp = () => {
handleChannelSelect(channel)} - className={`flex items-center p-3 cursor-pointer rounded-lg transition-all duration-200 ${selectedChannel?.id === channel.id - ? "border-black text-black border" - : "hover:bg-gray-200 hover:text-black" - }`} + className={`flex items-center p-3 cursor-pointer rounded-lg transition-all duration-200 ${ + selectedChannel?.id === channel.id + ? "border-black text-black border" + : "hover:bg-gray-200 hover:text-black" + }`} > {channel.icon}
@@ -300,8 +293,9 @@ const DiscussionApp = () => { {/* Main Content Area */}
{selectedChannel ? (
@@ -325,15 +319,20 @@ const DiscussionApp = () => {
-
+ {/* Message container with ref */} +
{filteredMessages.map((msg) => { const isCurrentUser = msg.UserID === currentUserId; return (
{ /> {isEmojiPickerOpen && (
- {/* Emoji Picker Component or Content Goes Here */} 😊 😃 😂 🤔 👍
)} From 22ee0a7ccec71f8dc4eef82bd9d15f19f7e0a0a1 Mon Sep 17 00:00:00 2001 From: Ayushraj1605 Date: Sun, 5 Jan 2025 16:50:07 +0530 Subject: [PATCH 3/3] final commit --- StoreHUB-auth/config.yaml | 10 --------- StoreHUB-auth/migrate/migrate.go | 37 -------------------------------- 2 files changed, 47 deletions(-) delete mode 100644 StoreHUB-auth/config.yaml delete mode 100644 StoreHUB-auth/migrate/migrate.go diff --git a/StoreHUB-auth/config.yaml b/StoreHUB-auth/config.yaml deleted file mode 100644 index 803dd07..0000000 --- a/StoreHUB-auth/config.yaml +++ /dev/null @@ -1,10 +0,0 @@ -database: - host: localhost - port: 3306 - username: root - password: Ayush1raj@@ - dbname: storehub - -server: - port: 8080 - jwt_secret: "Ayush" \ No newline at end of file diff --git a/StoreHUB-auth/migrate/migrate.go b/StoreHUB-auth/migrate/migrate.go deleted file mode 100644 index 0871186..0000000 --- a/StoreHUB-auth/migrate/migrate.go +++ /dev/null @@ -1,37 +0,0 @@ -package main - -import ( - "log" - "time" // Added for time.Time - "gorm.io/driver/mysql" - "gorm.io/gorm" -) - -func main() { - // Database connection details - dsn := "root:Ayush1raj@@@tcp(127.0.0.1:3306)/storehub?charset=utf8mb4&parseTime=True&loc=Local" - db, err := gorm.Open(mysql.Open(dsn), &gorm.Config{}) - if err != nil { - log.Fatalf("Failed to connect to the database: %v", err) - } - - // Run database migrations - err = db.AutoMigrate( - &User{}, // Add all models to migrate here - ) - if err != nil { - log.Fatalf("Failed to run migrations: %v", err) - } - - log.Println("Database migration completed successfully!") -} - -// User model -type User struct { - ID uint `gorm:"primaryKey"` - Username string `gorm:"unique;not null"` - Email string `gorm:"unique;not null"` - Password string `gorm:"not null"` - CreatedAt time.Time `gorm:"autoCreateTime"` - UpdatedAt time.Time `gorm:"autoUpdateTime"` -}