add: improved the frontend and the backend by adding websockets

front/src/pages/ChannelPage.tsx

@@ -71,15 +71,17 @@ export default function ChannelPage() {
     }, [name]);
 
     useEffect(() => {
-        const id = setInterval(() => {
-            axios
-                .get(`/api/channels/${name}/messages`).then((res) => {
-                    setMessages(res.data)
-                })
-        }, 2000)
-
-        return () => { clearInterval(id) }
-    }, [])
+        const socket = new WebSocket(`/api/channels/${name}`);
+          
+        socket.addEventListener('message', function (event) {
+            if (event.data === "new_message" || event.data === "delete_message") {
+                axios
+                    .get(`/api/channels/${name}/messages`).then((res) => {
+                        setMessages(res.data)
+                    })
+            }
+        });
+    }, [name])
 
     useEffect(() => {
         const words = message.toString().split(" ");
@@ -102,7 +104,14 @@ export default function ChannelPage() {
     
 
     if (!channel || !messages) {
-        return <div>Loading...</div>;
+        return (
+            <div className="channel-page">
+                <TopBar user={user} />
+                <div className="channel">
+                    <p>Loading...</p>
+                </div>
+            </div>
+        )
     }
 
     return (

front/src/pages/ChannelsPage.tsx

@@ -34,22 +34,40 @@ export default function ChannelsPage() {
     }, [])
 
     useEffect(() => {
-        const id = setInterval(() => {
-            axios
-                .get("/api/channels").then((res) => {
-                    setChannels(res.data)
-                }
-            )
-        }, 2000)
+        const socket = new WebSocket("/api/channels");
 
-        return () => { clearInterval(id) }
+        socket.addEventListener('message', function (event) {
+            if (event.data === "new_channel") {
+                axios
+                    .get("/api/channels")
+                    .then((res) => {
+                        setChannels(res.data)
+                    })
+                    .catch((err) => {
+                        console.error(err.response)
+                    })
+            }
+        });
     }, [])
 
+    if (!channels) {
+        return (
+            <div className="channels-page">
+                <TopBar user={user} />
+                <div className="channels-page-channels">
+                    <h2>Channels</h2>
+                    <p>Loading...</p>
+                </div>
+            </div>
+        )
+    }
+
     return (
         <div className="channels-page">
             <TopBar user={user} />
             <div className="channels-page-channels">
                 <h2>Channels</h2>
+                <Link to="/create-channel">Create channel</Link>
                 <input
                     type="text"
                     placeholder="Search channels"
@@ -57,7 +75,7 @@ export default function ChannelsPage() {
                     onChange={(e) => setSearch(e.target.value)}
                 />
                 <ul>
-                    {channels?.filter((channel) => channel.name.toLowerCase().includes(search.toLowerCase())).map((channel) => (
+                    {channels?.sort().filter((channel) => channel.name.toLowerCase().includes(search.toLowerCase())).map((channel) => (
                         <li key={channel.id}>
                             <Link to={`/c/${channel.name}`}>{channel.name}</Link>
                         </li>

front/src/pages/CreateChannel.tsx

@@ -31,7 +31,7 @@ export default function CreateChannel() {
         axios
             .post("/api/channels/add", { name, description, token })
             .then(() => {
-                navigate("/");
+                navigate(`/c/${name}`);
             })
             .catch((err) => {
                 console.error(err.response.data.message);

front/src/pages/Home.tsx

@@ -12,6 +12,7 @@ export default function Home() {
     const [channels, setChannels] = useState<RecentChannels>();
     const [messages , setMessages] = useState<Messages>();
     const [searchedChannels, setSearchedChannels] = useState<Channels>([]);
+    const [newChannels, setNewChannels] = useState<Channels>([]);
     const [search, setSearch] = useState<string>("");
 
     useEffect(() => {
@@ -45,27 +46,60 @@ export default function Home() {
             })
             .catch((err) => {
                 console.error(err.response)
-            }
-        )
+            })
+
+        axios
+            .get("/api/newchannels")
+            .then((res) => {
+                setNewChannels(res.data)
+            })
+            .catch((err) => {
+                console.error(err.response)
+            })
     }, [])
 
     useEffect(() => {
-        const id = setInterval(() => {
-            axios
-                .get("/api/activechannels").then((res) => {
-                    setChannels(res.data)
-                }
-            )
+        const socket = new WebSocket("/api/channels");
 
-            axios
-                .get("/api/lastmessages").then((res) => {
-                    setMessages(res.data)
-                }
-            )
+        socket.addEventListener('message', function (event) {
+            if (event.data === "new_message" || event.data === "delete_message") {
+                axios
+                    .get("/api/lastmessages")
+                    .then((res) => {
+                        setMessages(res.data)
+                    })
+                    .catch((err) => {
+                        console.error(err.response)
+                    })
 
-        }, 2000)
+                axios
+                    .get("/api/activechannels")
+                    .then((res) => {
+                        setChannels(res.data)
+                    })
+                    .catch((err) => {
+                        console.error(err.response)
+                    })
+            } else if (event.data === "new_channel") {
+                axios
+                    .get("/api/activechannels")
+                    .then((res) => {
+                        setChannels(res.data)
+                    })
+                    .catch((err) => {
+                        console.error(err.response)
+                    })
 
-        return () => { clearInterval(id) }
+                axios
+                    .get("/api/newchannels")
+                    .then((res) => {
+                        setNewChannels(res.data)
+                    })
+                    .catch((err) => {
+                        console.error(err.response)
+                    })
+            }
+        });
     }, [])
 
     useEffect(() => {
@@ -125,6 +159,16 @@ export default function Home() {
                             ))}
                         </ul>
                     </div>
+                    <div className="channels-new">
+                        <h3>Last created channels</h3>
+                        <ul>
+                            {newChannels?.map((channel) => (
+                                <li key={channel.id}>
+                                    <Link to={`/c/${channel.name}`}>{channel.name}</Link>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
                     <div className="channels-search">   
                         <h3>Search channels</h3>
                         <input

front/src/pages/UserPage.tsx

@@ -34,17 +34,6 @@ export default function UserPage() {
         });
     }, [username]);
 
-    useEffect(() => {
-        const id = setInterval(() => {
-            axios
-                .get(`/api/users/${username}/lastmessages`).then((res) => {
-                    setMessages(res.data)
-                })
-        }, 2000)
-
-        return () => { clearInterval(id) }
-    }, [username])
-
     if (!pageUser) {
         return <div>Loading...</div>;
     }
@@ -55,19 +44,19 @@ export default function UserPage() {
             <div className="user">
             <h2>{pageUser.username}</h2>
                 {pageUser.admin ? <p>Admin</p> : <p>User</p>}
-                <div className="user-messages">
-                    <h2>Last messages</h2>
-                    <div className="messages-list">
-                        {messages?.map((message) => (
-                            <MessageComponent
-                                key={message.id}
-                                message={message}
-                                user={pageUser}
-                                channel={undefined}
-                                deleteMessage={undefined}
-                            />
-                        ))}
-                    </div>
+            </div>
+            <div className="user-messages">
+                <h2>Last messages</h2>
+                <div className="messages-list">
+                    {messages?.map((message) => (
+                        <MessageComponent
+                            key={message.id}
+                            message={message}
+                            user={pageUser}
+                            channel={undefined}
+                            deleteMessage={undefined}
+                        />
+                    ))}
                 </div>
             </div>
         </div>