componentized, store created

app/_components/BetterIDEa.tsx → app/_components/_rhs/BetterIDEa.tsx

@@ -1,13 +1,22 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { useCodeStore } from "../_store/store";
-import { CodeCell, setCellCode } from "@betteridea/codecell";
+import {
+  useCodeStore,
+  useMessagesArrayStore,
+  usePidStore,
+} from "../../_store/store";
+import { CodeCell, setCellCode, getInbox } from "@betteridea/codecell";
 import Image from "next/image";
+import { brandLightText } from "../../_utils/colors";
+import PidDisplay from "./PidDisplay";
+import MessagesDD from "./MessagesDD";
 
 const BetterIDEa = () => {
   const curCode = useCodeStore((state) => state.curCode);
+  const setMessArr = useMessagesArrayStore((state) => state.setMessArr);
   const [curPid, setCurPid] = useState("");
   const [copied, setCopied] = useState(false);
+  const [newMes, setNewMes] = useState("");
 
   useEffect(() => {
     console.log(encodeURI(curCode));
@@ -21,13 +30,19 @@ const BetterIDEa = () => {
     console.log(pid);
   };
 
-  // const onNewMessage = (m: any) => {
-  //   console.log("message new", m);
-  // };
+  const onNewMessage = (m: any) => {
+    console.log("message new", m);
+    setNewMes(m);
+  };
+  useEffect(() => {
+    alert(newMes);
+    console.log("new mes", newMes);
+  }, [newMes]);
 
-  // const onInbox = (i: any) => {
-  //   console.log("inbox", i);
-  // };
+  const onInbox = (i: any) => {
+    console.log("inbox", i);
+    setMessArr(i);
+  };
 
   const handleCopy = () => {
     if (curPid) {
@@ -46,7 +61,7 @@ const BetterIDEa = () => {
 
   return (
     <>
-      <div className="relative h-[33px] w-full justify-start px-20 lg:flex hidden max-w-[1800px]">
+      {/* <div className="relative h-[33px] w-full justify-start px-20 lg:flex hidden max-w-[1800px]">
         <div className="absolute left-0 z-10">
           <div className="bg-[#EB8F44] bg-opacity-30 text-[#EB8F44] font-semibold border-2 border-[#EB8F44] text-sm rounded py-2 px-4 shadow-lg relative">
             <div className="flex items-center">
@@ -82,23 +97,20 @@ const BetterIDEa = () => {
             <div className="w-0 h-0 border-t-8 border-t-[#EB8F44] border-r-8 border-r-transparent border-l-8 border-l-transparent absolute left-1 -bottom-2"></div>
           </div>
         </div>
-      </div>
-      {/* <button
-        className="bg-[#000000] px-[12px]"
-        onClick={() => {
-          getInbox("1", true);
-        }}
-      >
-        Check Inbox
-      </button> */}
+      </div> */}
+      <PidDisplay />
       <CodeCell
         height="100%"
         cellId="1"
         appName="Sandbox"
         onAOProcess={onAOProcess}
-        // onNewMessage={onNewMessage}
-        // onInbox={onInbox}
+        onNewMessage={(m: any) => {
+          console.log("check");
+          console.log(m);
+        }}
+        onInbox={onInbox}
       />
+      <MessagesDD />
     </>
   );
 };

app/_components/_rhs/MessagesDD.tsx

@@ -0,0 +1,59 @@
+"use client";
+import React, { useState } from "react";
+import { brandLightText } from "../../_utils/colors";
+import { getInbox } from "@betteridea/codecell";
+import Image from "next/image";
+import { useMessagesArrayStore } from "../../_store/store";
+
+const MessagesDD = () => {
+  //   const [mesArr, setMesArr] = useState<any[]>([]);
+  const [mesToggle, setMesToggle] = useState(false);
+  const messArr = useMessagesArrayStore((state) => state.messArr);
+
+  const stripAnsiCodes = (str: string) => {
+    str.replace(
+      /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g,
+      ""
+    );
+  };
+  return (
+    <div
+      className={`bg-[#000000] w-full py-[12px] px-[13.5px] rounded-md 
+        text-[12px] ${brandLightText} mt-[-12px]
+        `}
+    >
+      <div
+        onClick={() => {
+          getInbox("1", true);
+          setMesToggle(!mesToggle);
+        }}
+        className="flex flex-row justify-start gap-3 items-center"
+      >
+        <button className="uppercase text-[15px] text-[#98e870]">
+          {mesToggle ? "Messages" : "Check Inbox"}
+        </button>
+        <Image
+          src="/ddMes.png"
+          width={15}
+          height={21}
+          alt="dd"
+          className={`${mesToggle ? "rotate-180" : "rotate-0"}`}
+        />
+      </div>
+      <div className={`max-h-[60px] ${mesToggle ? "overflow-y-scroll" : ""}`}>
+        {mesToggle &&
+          messArr?.map((item, id) => {
+            stripAnsiCodes(item.Data);
+            return (
+              <div className=" tracking-[1.5px]">
+                {`Inbox[${id + 1}].Data: `}
+                {item.Data ? item.Data : "No Data"}
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+};
+
+export default MessagesDD;

app/_components/_rhs/PidDisplay.tsx

@@ -0,0 +1,64 @@
+"use client";
+import Image from "next/image";
+import React, { useState } from "react";
+import { usePidStore } from "../../_store/store";
+
+const PidDisplay = () => {
+  const [copied, setCopied] = useState(false);
+  const curPid = usePidStore((state) => state.curPid);
+  const handleCopy = () => {
+    if (curPid) {
+      navigator.clipboard
+        .writeText(curPid)
+        .then(() => {
+          setCopied(true);
+          console.log("Copied to clipboard:", curPid);
+        })
+        .catch((err) => {
+          setCopied(false);
+          console.error("Failed to copy:", err);
+        });
+    }
+  };
+  return (
+    <div className="relative h-[33px] w-full justify-start px-20 lg:flex hidden max-w-[1800px]">
+      <div className="absolute left-0 z-10">
+        <div className="bg-[#EB8F44] bg-opacity-30 text-[#EB8F44] font-semibold border-2 border-[#EB8F44] text-sm rounded py-2 px-4 shadow-lg relative">
+          <div className="flex items-center">
+            <h3>
+              {curPid
+                ? `Process ID: ${curPid}`
+                : `Please Connect Your Wallet First !!`}
+            </h3>
+            {curPid ? (
+              copied ? (
+                <Image
+                  alt="copy"
+                  src="/clip1.png"
+                  height={18}
+                  width={18}
+                  onClick={handleCopy}
+                  className="hover:cursor-pointer w-[18px] h-[18px] hover:bg-[#7f512a] rounded-md"
+                />
+              ) : (
+                <Image
+                  alt="copy"
+                  src="/clip0.svg"
+                  height={18}
+                  width={18}
+                  onClick={handleCopy}
+                  className="hover:cursor-pointer w-[18px] h-[18px] hover:bg-[#7f512a] rounded-md"
+                />
+              )
+            ) : (
+              ""
+            )}
+          </div>
+          <div className="w-0 h-0 border-t-8 border-t-[#EB8F44] border-r-8 border-r-transparent border-l-8 border-l-transparent absolute left-1 -bottom-2"></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PidDisplay;

app/_components/index.ts

@@ -1,4 +1,4 @@
-import BetterIDEa from "./BetterIDEa";
+import BetterIDEa from "./_rhs/BetterIDEa";
 import GETReq from "./_tutorials/GETReq";
 import PrismLoader from "./PrismLoader";
 import Header from "./Header";
@@ -8,6 +8,8 @@ import NewsFeed from "./_tutorials/NewsFeed";
 import TutRender from "./_tutorials/TutRender";
 import DropDown from "./DropDown";
 import Footer from "./Footer";
+import PidDisplay from "./_rhs/PidDisplay";
+import MessagesDD from "./_rhs/MessagesDD";
 export {
   BetterIDEa,
   GETReq,
@@ -19,4 +21,6 @@ export {
   TutRender,
   DropDown,
   Footer,
+  PidDisplay,
+  MessagesDD,
 };

app/_store/store.ts

@@ -7,6 +7,17 @@ interface CodeState {
   curCode: string;
   changeCode: (newCode: string) => void;
 }
+
+interface MessagesArrayState {
+  messArr: Array<any>;
+  setMessArr: (newMessArr: string[]) => void;
+}
+
+interface PidState {
+  curPid: string;
+  setCurPid: (newPid: string) => void;
+}
+
 export const useTutorialStore = create<TutorialState>()((set) => ({
   curTutorial: "GET Request",
   //   increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
@@ -18,3 +29,13 @@ export const useCodeStore = create<CodeState>()((set) => ({
   curCode: "",
   changeCode: (newCode) => set({ curCode: newCode }),
 }));
+
+export const useMessagesArrayStore = create<MessagesArrayState>()((set) => ({
+  messArr: [],
+  setMessArr: (newMessArr) => set({ messArr: newMessArr }),
+}));
+
+export const usePidStore = create<PidState>()((set) => ({
+  curPid: "",
+  setCurPid: (newPid) => set({ curPid: newPid }),
+}));