feat: setup notification for app

app/app.py

@@ -1,20 +1,44 @@
 import os
+import time
 
 from camera import generate_frames
 from dotenv import load_dotenv
 from flask import Flask, Response, render_template, request
 from flask_cors import CORS
+from flask_socketio import SocketIO, emit
 from light import fetch_light_state
 
 load_dotenv()
 
 app = Flask(__name__)
-CORS(app, origins=["http://localhost:5173", "http://192.168.1.20:5173"])
+CORS(
+    app,
+    resources={
+        r"/socket.io/*": {"origins": "*"},
+        r"/light/*": {"origins": "*"},
+        r"/light_state/*": {"origins": "*"},
+    },
+)
 
 camera_streams = [
     0,
 ]
 
+socketio = SocketIO(app, cors_allowed_origins="*")
+
+
+@socketio.on("connect")
+def test_connect():
+    emit("notification", {"message": "New notification!"})
+    for i in range(3):
+        test_message = "New notification! " + str(i)
+        emit("notification", {"message": test_message})
+
+
+@socketio.on("disconnect")
+def test_disconnect():
+    print("Client disconnected")
+
 
 @app.route("/light", methods=["POST"])
 def light_switch():

smarthome/src/App.tsx

@@ -5,9 +5,32 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Camera from "./Pages/Camera";
 import Report from "./Pages/Report";
 import Schedule from "./Pages/Schdule";
+import { useEffect } from "react";
+import addNotification, { Notifications } from "react-push-notification";
+import { socket } from "./Utils/socket";
 export default function App() {
+    useEffect(() => {
+        const handleNotification = (data: any) => {
+            console.log("notification from app", data.message);
+            addNotification({
+                title: "Hello title",
+                subtitle: "This is a subtitle",
+                message: data.message,
+                theme: "darkblue",
+                native: false,
+            });
+        };
+
+        socket.on("notification", handleNotification);
+
+        return () => {
+            socket.off("notification", handleNotification);
+        };
+    }, []);
+
     return (
-        <div>
+        <div className="app">
+            <Notifications />
             <BrowserRouter>
                 <Header>
                     <Routes>