refactor: use stores correctly

web/src/App.tsx

@@ -2,10 +2,14 @@ import React, { useEffect, useRef, useState } from "react";
 import GroupDashboard from "./components/GroupDashboard";
 import PlayerList from "./components/PlayerList";
 import GroupJob from "./components/GroupJob";
-import DataHandler from './components/DataHandler';
+import DataHandler from "./components/DataHandler";
 import { GroupJobStep } from "./types/GroupJobStep";
 import { Group } from "./types/Group";
 import { useNuiEvent } from "./hooks/useNuiEvent";
+import { fetchReactNui } from "./utils/fetchReactNui";
+import { useGroupJobStepStore } from "./storage/GroupJobStepStore";
+import { useGroupStore } from "./storage/GroupStore";
+import { usePlayerDataStore } from "./storage/PlayerDataStore";
 import "./App.css";
 
 const devMode = !window?.["invokeNative"];
@@ -22,7 +26,9 @@ const App = () => {
     onSettingsChange,
   } = window as any;
   const [currentPage, setCurrentPage] = useState("GroupDashboard");
-  const [inGroup, setInGroup] = useState(false);
+  const { setGroupJobSteps } = useGroupJobStepStore();
+  const { inGroup, setGroups } = useGroupStore();
+  const { setPlayerData } = usePlayerDataStore();
 
   useEffect(() => {
     if (devMode) {
@@ -35,6 +41,80 @@ const App = () => {
     }
   }, [theme]);
 
+  useEffect(() => {
+    fetchReactNui("setPlayerData", {}, {
+      source: 1,
+      citizenId: 'ABCD1234',
+      name: 'Testicle',
+    }).then((data) => {
+      setPlayerData(data);
+    });
+
+    fetchReactNui<GroupJobStep[]>("getGroupJobSteps", {}, [
+      { id: 1, name: "Step 1", isDone: false },
+      { id: 2, name: "Step 2", isDone: false },
+      { id: 3, name: "Step 3", isDone: false },
+    ]).then((data) => {
+      setGroupJobSteps(data);
+    });
+
+    fetchReactNui<Group[]>("refreshGroups", {}, [
+      {
+        id: 1,
+        status: "open",
+        GName: "Larrys Group",
+        GPass: "password",
+        leader: 1,
+        members: [
+          { name: "Larry", CID: "ABCD1234", Player: 1 },
+          { name: "Barry", CID: "EFGH5678", Player: 2 },
+          { name: "Harry", CID: "IJKL9101", Player: 3 },
+        ],
+        stage: [],
+        ScriptCreated: false,
+      },
+      {
+        id: 2,
+        status: "open",
+        GName: "Group 2",
+        GPass: "password",
+        leader: 2,
+        members: [{ name: "Larry", CID: "ABCD1234", Player: 3 }],
+        stage: [],
+        ScriptCreated: false,
+      },
+      {
+        id: 3,
+        status: "open",
+        GName: "Group 3",
+        GPass: "password",
+        leader: 3,
+        members: [
+          { name: "Larry", CID: "ABCD1234", Player: 2 },
+          { name: "Barry", CID: "EFGH5678", Player: 3 },
+        ],
+        stage: [],
+        ScriptCreated: false,
+      },
+      {
+        id: 4,
+        status: "open",
+        GName: "Group 4",
+        GPass: "password",
+        leader: 4,
+        members: [{ name: "Larry", CID: "ABCD1234", Player: 4 }],
+        stage: [],
+        ScriptCreated: false,
+      },
+    ]).then((data) => setGroups(data));
+  }, []);
+
+  useEffect(() => {
+    if (!inGroup) {
+      setCurrentPage("GroupDashboard");
+    }
+  }, [inGroup]);
+
   useNuiEvent("startJob", () => {
     setCurrentPage("GroupJob");
   });
@@ -87,15 +167,19 @@ const App = () => {
         ref={appDiv}
         data-theme={theme}
       >
-        {!devMode && (<button onClick={toggleTheme} className="w-full rounded-m">
-          Toggle Theme
-        </button>)}
+        {!devMode && (
+          <button onClick={toggleTheme} className="w-full rounded-m">
+            Toggle Theme
+          </button>
+        )}
         <div className="text-left text-4xl font-bold m-2 pt-2">Groups</div>
         {currentPage === "GroupDashboard" && (
-          <GroupDashboard setCurrentPage={setCurrentPage} setInGroup={setInGroup} inGroup={inGroup}/>
+          <GroupDashboard
+            setCurrentPage={setCurrentPage}
+          />
         )}
         {currentPage === "GroupJob" && (
-          <GroupJob setCurrentPage={setCurrentPage} inGroup={inGroup}/>
+          <GroupJob setCurrentPage={setCurrentPage} />
         )}
       </div>
       <DataHandler />

web/src/components/ConfirmationDialog.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-const ConfirmationDialog = ({ onClose, onConfirm }) => {
+const ConfirmationDialog = ({ onClose, onConfirm, confirmation}) => {
   return (
     <div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center">
       <div className="bg-background border border-primary rounded-lg p-6 w-full max-w-md">
         <h2 className="text-text text-xl font-semibold mb-4">
-          Leave the group?
+          {confirmation.message}
         </h2>
         <div className="flex justify-end space-x-4">
           <button
@@ -15,7 +15,7 @@ const ConfirmationDialog = ({ onClose, onConfirm }) => {
             No
           </button>
           <button
-            className="px-4 py-2 bg-primary rounded hover:bg-secondary"
+            className="px-4 py-2 bg-primary rounded hover:bg-danger"
             onClick={onConfirm}
           >
             Yes

web/src/components/DataHandler.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 import { useNuiEvent } from "../hooks/useNuiEvent";
+import { fetchReactNui } from "../utils/fetchReactNui";
 import { usePlayerDataStore } from "../storage/PlayerDataStore";
 import { useGroupStore } from "../storage/GroupStore";
 import { useGroupJobStepStore } from "../storage/GroupJobStepStore";
 
 const DataHandler: React.FC = () => {
   const { setPlayerData } = usePlayerDataStore();
   const { setGroups } = useGroupStore();
-  const { groupJobSteps, setGroupJobSteps } = useGroupJobStepStore();
+  const { setGroupJobSteps } = useGroupJobStepStore();
 
   useNuiEvent("setPlayerData", setPlayerData);
   useNuiEvent("setGroups", setGroups);

web/src/components/GroupDashboard.tsx

@@ -4,6 +4,7 @@ import JoinGroup from "./JoinGroup";
 import PlayerList from "./PlayerList";
 import ConfirmationDialog from "./ConfirmationDialog";
 import { Group } from "../types/Group";
+import { fetchReactNui } from "../utils/fetchReactNui";
 import { usePlayerDataStore } from "../storage/PlayerDataStore";
 import { useGroupStore } from "../storage/GroupStore";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -15,76 +16,83 @@ import {
   faRightFromBracket,
 } from "@fortawesome/free-solid-svg-icons";
 
-const GroupDashboard = ({ setCurrentPage, setInGroup, inGroup}) => {
-  const { currentGroups, refreshGroups } = useGroupStore();
+const GroupDashboard = ({ setCurrentPage }) => {
+  const { currentGroups, currentGroup, setCurrentGroup, inGroup, setInGroup } =
+    useGroupStore();
   const { playerData } = usePlayerDataStore();
   const [showCreateGroup, setShowCreateGroup] = useState(false);
   const [showPlayerList, setShowPlayerList] = useState(false);
   const [selectedGroup, setSelectedGroup] = useState(null);
-  const [currentGroup, setCurrentGroup] = useState(null);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [confirmation, setConfirmation] = useState({ message: null, type: null });
 
   useEffect(() => {
-    if (currentGroups.length === 0) {
-      refreshGroups();
-    }
-  }, [])
-
-  useEffect(() => {
-    setInGroup(currentGroups && currentGroups.length > 0 && currentGroups.some((group) =>
-      group.members.some((member) => member.Player === playerData.source)
-    ))
-    setCurrentGroup(currentGroups.find(group => group.members.some(member => member.Player === playerData.source)));
-  }, [currentGroups])
+    setInGroup(
+      currentGroups &&
+        currentGroups.length > 0 &&
+        currentGroups.some((group) =>
+          group.members.some((member) => member.Player === playerData.source)
+        )
+    );
+    setCurrentGroup(
+      currentGroups.find((group) =>
+        group.members.some((member) => member.Player === playerData.source)
+      )
+    );
+  }, [currentGroups]);
 
   const handleConfirm = () => {
-    fetchReactNui('leaveGroup')
+    fetchReactNui(confirmation.type, {}, {});
+    console.log(confirmation);
     setIsDialogOpen(false);
   };
 
   const createGroup = (groupData) => {
     console.log(groupData);
-    fetchReactNui('createGroup', groupData)
+    fetchReactNui("createGroup", groupData);
   };
 
   const joinGroup = (groupData) => {
-    fetchReactNui('joinGroup', groupData)
+    fetchReactNui("joinGroup", groupData);
     console.log(groupData);
   };
 
   const leaveGroup = () => {
+    setConfirmation({message: "Leave the group?", type: "leaveGroup"})
     setIsDialogOpen(true);
   };
 
   const removeGroup = (groupData) => {
-    fetchReactNui('removeGroup', groupData)
+    setConfirmation({message: "Disband the group?", type: "removeGroup"})
+    setIsDialogOpen(true);
+    // fetchReactNui("removeGroup", groupData);
     console.log(groupData);
   };
 
   const renderIcons = (isLeader, isMember, group) => {
     return (
       <>
-      <div className="flex items-center">
-        <FontAwesomeIcon
-          icon={faList}
-          className="mx-1 hover:text-background"
-          onClick={() => setShowPlayerList(true)}
-        />
-        {isLeader && (
-          <FontAwesomeIcon
-            icon={faTrash}
-            className="mx-1 hover:text-danger"
-            onClick={() => removeGroup(group)}
-          />
-        )}
-        {isMember && !isLeader && (
+        <div className="flex items-center">
           <FontAwesomeIcon
-            icon={faRightFromBracket}
-            className="mx-1 hover:text-danger"
-            onClick={() => leaveGroup(group)}
+            icon={faList}
+            className="mx-1 hover:text-background"
+            onClick={() => setShowPlayerList(true)}
           />
-        )}
-      </div>
+          {isLeader && (
+            <FontAwesomeIcon
+              icon={faTrash}
+              className="mx-1 hover:text-danger"
+              onClick={() => removeGroup(group)}
+            />
+          )}
+          {isMember && !isLeader && (
+            <FontAwesomeIcon
+              icon={faRightFromBracket}
+              className="mx-1 hover:text-danger"
+              onClick={() => leaveGroup(group)}
+            />
+          )}
+        </div>
       </>
     );
   };
@@ -110,7 +118,7 @@ const GroupDashboard = ({ setCurrentPage, setInGroup, inGroup}) => {
             Show Tasks
           </button>
           <button
-            onClick={() => setIsDialogOpen(true)}
+            onClick={() => leaveGroup()}
             disabled={!inGroup}
             className={`p-2 w-1/3 bg-primary rounded
               ${!inGroup ? "cursor-not-allowed" : "hover:bg-danger"}`}
@@ -119,7 +127,9 @@ const GroupDashboard = ({ setCurrentPage, setInGroup, inGroup}) => {
           </button>
         </div>
         {currentGroups?.length > 0 ? (
-          <h2 className="mb-4">Create a group or join an existing group below</h2>
+          <h2 className="mb-4">
+            Create a group or join an existing group below
+          </h2>
         ) : (
           <h2 className="mb-4">Create a group to get started</h2>
         )}
@@ -130,7 +140,6 @@ const GroupDashboard = ({ setCurrentPage, setInGroup, inGroup}) => {
               let isMember = group.members.some(
                 (member) => member.Player === playerData.source
               );
-              if (isMember === true) {}
 
               return (
                 <div
@@ -150,7 +159,7 @@ const GroupDashboard = ({ setCurrentPage, setInGroup, inGroup}) => {
                   </div>
                   <div className="flex items-center">
                     <>
-                      {isMember && (renderIcons(isLeader, isMember, group))}
+                      {isMember && renderIcons(isLeader, isMember, group)}
                       <FontAwesomeIcon icon={faUserGroup} className="" />
                       <span className="mx-2 font-semibold">
                         {group.members.length}
@@ -185,12 +194,16 @@ const GroupDashboard = ({ setCurrentPage, setInGroup, inGroup}) => {
           />
         )}
         {showPlayerList && (
-          <PlayerList onClose={() => setShowPlayerList(false)} currentGroup={currentGroup}/>
+          <PlayerList
+            onClose={() => setShowPlayerList(false)}
+            currentGroup={currentGroup}
+          />
         )}
         {isDialogOpen && (
           <ConfirmationDialog
             onClose={() => setIsDialogOpen(false)}
             onConfirm={handleConfirm}
+            confirmation={confirmation}
           />
         )}
       </div>