diff --git a/app/_components/_rhs/BetterIDEa.tsx b/app/_components/_rhs/BetterIDEa.tsx index 0344dce..653f867 100644 --- a/app/_components/_rhs/BetterIDEa.tsx +++ b/app/_components/_rhs/BetterIDEa.tsx @@ -1,6 +1,7 @@ "use client"; import React, { useEffect, useState } from "react"; import { + useAlertStore, useCodeStore, useMessagesArrayStore, usePidStore, @@ -13,6 +14,7 @@ const BetterIDEa = () => { const curCode = useCodeStore((state) => state.curCode); const setMessArr = useMessagesArrayStore((state) => state.setMessArr); const setCurPid = usePidStore((state) => state.setCurPid); + const setAlert = useAlertStore((state) => state.setAlert); const [newMes, setNewMes] = useState(""); useEffect(() => { @@ -61,6 +63,7 @@ const BetterIDEa = () => { console.log("message new", "test\n", m); // setNewMes(m); if (m[0].Output.print) { + setAlert(true); alert("You have new Message!"); } }} diff --git a/app/_components/_rhs/MessagesDD.tsx b/app/_components/_rhs/MessagesDD.tsx index 09646e3..b8573fd 100644 --- a/app/_components/_rhs/MessagesDD.tsx +++ b/app/_components/_rhs/MessagesDD.tsx @@ -3,12 +3,37 @@ import React, { useState, useEffect } from "react"; import { brandLightText } from "../../_utils/colors"; import { getInbox } from "@betteridea/codecell"; import Image from "next/image"; -import { useMessagesArrayStore, usePidStore } from "../../_store/store"; +import { + useAlertStore, + useMessagesArrayStore, + usePidStore, +} from "../../_store/store"; const MessagesDD = () => { const [mesToggle, setMesToggle] = useState(false); + const [notif, setNotif] = useState(false); const messArr = useMessagesArrayStore((state) => state.messArr); const curPid = usePidStore((state) => state.curPid); + const alert = useAlertStore((state) => state.alert); + const setAlert = useAlertStore((state) => state.setAlert); + + useEffect(() => { + getInbox("1", true); + }, []); + + useEffect(() => { + console.log("alert effecvt triggere", alert); + if (!mesToggle && alert) { + getInbox("1", true); + setNotif(true); + } + }, [alert]); + + useEffect(() => { + if (mesToggle) { + setAlert(false); + } + }, [mesToggle]); const stripAnsiCodes = (str: string) => { return str?.replace( @@ -55,6 +80,15 @@ const MessagesDD = () => { className={`${mesToggle ? "rotate-180" : "rotate-0"}`} /> )} + {notif && ( + dd + )} {curPid && ( void; } +interface AlertState { + alert: boolean; + setAlert: (newAlert: boolean) => void; +} + export const useTutorialStore = create()((set) => ({ curTutorial: "GET Request", // increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), @@ -39,3 +44,7 @@ export const usePidStore = create()((set) => ({ curPid: "", setCurPid: (newPid) => set({ curPid: newPid }), })); +export const useAlertStore = create()((set) => ({ + alert: false, + setAlert: (newAlert) => set({ alert: newAlert }), +})); diff --git a/public/alert.png b/public/alert.png new file mode 100644 index 0000000..4ae6394 Binary files /dev/null and b/public/alert.png differ