Skip to content

F
FMS_Project_Frontend
Commit 10df46a0 authored by ReemyHasan's avatar ReemyHasan
Browse files
Options

SSE Fixing

parent b5ec0666
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 50 deletions
packages/admin/src/components/layout/index.tsx
View file @ 10df46a0
import React, { ReactNode, useState } from "react"; import React, { ReactNode, useState, useEffect, useContext } from "react";
import { Layout } from "antd"; import { Layout } from "antd";
import AppContentView from "./components/content-view"; import AppContentView from "./components/content-view";
import AppSidebar from "./components/sidebar"; import AppSidebar from "./components/sidebar";
import AppHeader from "./components/header"; import AppHeader from "./components/header";
import { useCookies } from "react-cookie";
import DataContext from "../../context/trap-context";
import { fetchData } from "../../services/traps-service";
type AppLayoutProps = { type AppLayoutProps = {
children: ReactNode; children: ReactNode;
}; };
...@@ -12,7 +14,60 @@ const AppLayout = ({ children }: AppLayoutProps) => { ...@@ -12,7 +14,60 @@ const AppLayout = ({ children }: AppLayoutProps) => {
const toggleCollapse = () => { const toggleCollapse = () => {
setIsCollapsed(!isCollapsed); setIsCollapsed(!isCollapsed);
}; };
const { data, setData } = useContext(DataContext);
const [cookies, setCookie] = useCookies([]);
useEffect(() => {
if (!cookies["fetch"] ) {
const fetchData1 = async () => {
try {
const response = await fetchData(cookies["token"]);
setData(response);
setCookie("fetch", 1);
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchData1();
// console.log(data);
}
// console.log(data);
const authToken = `Bearer ${cookies["token"]}`;
const source = new EventSource(
`http://localhost:6647/api/notifications/sub?token=${authToken}`
);
source.addEventListener("open", () => {
console.log("SSE opened!");
});
source.addEventListener("message", (e) => {
const message = JSON.parse(e.data);
console.log(message);
if (message.new_val != null) {
const newData = message.new_val;
// setData1((prevData: any) => [...prevData, newData]);
setData((prevData: any) => [...prevData, newData]);
} else {
setData((prevData: any) =>
prevData.filter((item: any) => item.id !== message.old_val.id)
);
// setData1((prevData: any) =>
// prevData.filter((item: any) => item.id !== message.old_val.id)
// );
}
});
source.addEventListener("error", (e) => {
console.error("Error: ", e);
});
return () => {
source.close();
console.log("SSE closed ");
};
}, []);
return ( return (
<div className={"app-layout"}> <div className={"app-layout"}>
......
packages/admin/src/features/show-traps/index.tsx
View file @ 10df46a0
...@@ -19,60 +19,63 @@ export default function ShowTraps() { ...@@ -19,60 +19,63 @@ export default function ShowTraps() {
const [data1, setData1] = useState(data); const [data1, setData1] = useState(data);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [cookies, setCookie] = useCookies([]); const [cookies, setCookie] = useCookies([]);
useEffect(() => { useEffect(()=>{
if (!cookies["fetch"] ) {
const fetchData1 = async () => {
try {
const response = await fetchData(cookies["token"]);
setData(response);
setData1(response);
setCookie("fetch", 1);
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchData1();
console.log(data);
}
console.log(data);
setData1(data); setData1(data);
}, [data])
// useEffect(() => {
// if (!cookies["fetch"] ) {
// const fetchData1 = async () => {
// try {
// const response = await fetchData(cookies["token"]);
// setData(response);
// setData1(response);
// setCookie("fetch", 1);
// } catch (error) {
// console.error("Error fetching data:", error);
// }
// };
// fetchData1();
// console.log(data);
// }
// console.log(data);
// setData1(data);
const authToken = `Bearer ${cookies["token"]}`; // const authToken = `Bearer ${cookies["token"]}`;
const source = new EventSource( // const source = new EventSource(
`http://localhost:6647/api/notifications/sub?token=${authToken}` // `http://localhost:6647/api/notifications/sub?token=${authToken}`
); // );
source.addEventListener("open", () => { // source.addEventListener("open", () => {
console.log("SSE opened!"); // console.log("SSE opened!");
}); // });
source.addEventListener("message", (e) => { // source.addEventListener("message", (e) => {
const message = JSON.parse(e.data); // const message = JSON.parse(e.data);
console.log(message); // console.log(message);
if (message.new_val != null) { // if (message.new_val != null) {
const newData = message.new_val; // const newData = message.new_val;
setData1((prevData: any) => [...prevData, newData]); // setData1((prevData: any) => [...prevData, newData]);
setData((prevData: any) => [...prevData, newData]); // setData((prevData: any) => [...prevData, newData]);
} else { // } else {
setData((prevData: any) => // setData((prevData: any) =>
prevData.filter((item: any) => item.id !== message.old_val.id) // prevData.filter((item: any) => item.id !== message.old_val.id)
); // );
setData1((prevData: any) => // setData1((prevData: any) =>
prevData.filter((item: any) => item.id !== message.old_val.id) // prevData.filter((item: any) => item.id !== message.old_val.id)
); // );
} // }
}); // });
source.addEventListener("error", (e) => { // source.addEventListener("error", (e) => {
console.error("Error: ", e); // console.error("Error: ", e);
}); // });
return () => { // return () => {
source.close(); // source.close();
console.log("SSE closed "); // console.log("SSE closed ");
}; // };
}, []); // }, []);
return ( return (
<div> <div>
<Spin spinning={loading}> <Spin spinning={loading}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab