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 AppContentView from "./components/content-view";
import AppSidebar from "./components/sidebar";
import AppHeader from "./components/header";
import { useCookies } from "react-cookie";
import DataContext from "../../context/trap-context";
import { fetchData } from "../../services/traps-service";
type AppLayoutProps = {
children: ReactNode;
};
......@@ -12,7 +14,60 @@ const AppLayout = ({ children }: AppLayoutProps) => {
const toggleCollapse = () => {
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 (
<div className={"app-layout"}>
......
packages/admin/src/features/show-traps/index.tsx
View file @ 10df46a0
......@@ -19,60 +19,63 @@ export default function ShowTraps() {
const [data1, setData1] = useState(data);
const [loading, setLoading] = useState(false);
const [cookies, setCookie] = useCookies([]);
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);
useEffect(()=>{
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 source = new EventSource(
`http://localhost:6647/api/notifications/sub?token=${authToken}`
);
// 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("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("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);
});
// source.addEventListener("error", (e) => {
// console.error("Error: ", e);
// });
return () => {
source.close();
console.log("SSE closed ");
};
}, []);
// return () => {
// source.close();
// console.log("SSE closed ");
// };
// }, []);
return (
<div>
<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