refactor: cleanup datastores

solareon · Jun 26, 2024 · 9f0a876 · 9f0a876
1 parent d336c46
commit 9f0a876
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 98 deletions.
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -22,6 +22,7 @@ const App = () => {
     onSettingsChange,
   } = window as any;
   const [currentPage, setCurrentPage] = useState("GroupDashboard");
+  const [inGroup, setInGroup] = useState(false);
 
   useEffect(() => {
     if (devMode) {
@@ -91,10 +92,10 @@ const App = () => {
         </button>)}
         <div className="text-left text-4xl font-bold m-2 pt-2">Groups</div>
         {currentPage === "GroupDashboard" && (
-          <GroupDashboard setCurrentPage={setCurrentPage} />
+          <GroupDashboard setCurrentPage={setCurrentPage} setInGroup={setInGroup} inGroup={inGroup}/>
         )}
         {currentPage === "GroupJob" && (
-          <GroupJob setCurrentPage={setCurrentPage} />
+          <GroupJob setCurrentPage={setCurrentPage} inGroup={inGroup}/>
         )}
       </div>
       <DataHandler />

diff --git a/web/src/components/GroupDashboard.tsx b/web/src/components/GroupDashboard.tsx
@@ -15,70 +15,56 @@ import {
   faRightFromBracket,
 } from "@fortawesome/free-solid-svg-icons";
 
-const GroupDashboard = ({ setCurrentPage }) => {
-  const { currentGroups, getCurrentGroups } = useGroupStore();
+const GroupDashboard = ({ setCurrentPage, setInGroup, inGroup}) => {
+  const { currentGroups, refreshGroups } = useGroupStore();
   const { playerData } = usePlayerDataStore();
-  const [ groups, setGroups ] = useState<Group[]>([]);
   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);
 
   useEffect(() => {
-    getCurrentGroups();
-  }, []);
+    if (currentGroups.length === 0) {
+      refreshGroups();
+    }
+  }, [])
 
   useEffect(() => {
-    setGroups(currentGroups);
-  }, [currentGroups]);
-
-  const inGroup = groups.some((group) =>
-    group.members.some((member) => member.Player === playerData.source)
-  );
+    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 = () => {
-    // Add your confirm action here
+    fetchReactNui('leaveGroup')
     setIsDialogOpen(false);
   };
 
   const createGroup = (groupData) => {
     console.log(groupData);
-    const newGroup = {
-      id: groups.length + 1,
-      status: "open",
-      GName: groupData.groupName,
-      GPass: groupData.password,
-      leader: playerData.source,
-      members: [
-        {
-          name: playerData.name,
-          CID: playerData.citizenId,
-          Player: playerData.source,
-        },
-      ],
-      stage: [],
-      ScriptCreated: false,
-    };
-    console.log(newGroup);
-    setGroups([...groups, newGroup]);
+    fetchReactNui('createGroup', groupData)
   };
 
   const joinGroup = (groupData) => {
+    fetchReactNui('joinGroup', groupData)
     console.log(groupData);
   };
 
   const leaveGroup = () => {
-    console.log("Leaving current group");
     setIsDialogOpen(true);
   };
 
   const removeGroup = (groupData) => {
+    fetchReactNui('removeGroup', groupData)
     console.log(groupData);
   };
 
-  const renderIcons = (isLeader, isMember, element) => {
+  const renderIcons = (isLeader, isMember, group) => {
     return (
       <>
+      <div className="flex items-center">
         <FontAwesomeIcon
           icon={faList}
           className="mx-1 hover:text-background"
@@ -88,16 +74,17 @@ const GroupDashboard = ({ setCurrentPage }) => {
           <FontAwesomeIcon
             icon={faTrash}
             className="mx-1 hover:text-danger"
-            onClick={() => removeGroup(element)}
+            onClick={() => removeGroup(group)}
           />
         )}
         {isMember && !isLeader && (
           <FontAwesomeIcon
             icon={faRightFromBracket}
             className="mx-1 hover:text-danger"
-            onClick={() => leaveGroup(element)}
+            onClick={() => leaveGroup(group)}
           />
         )}
+      </div>
       </>
     );
   };
@@ -131,49 +118,50 @@ const GroupDashboard = ({ setCurrentPage }) => {
             Leave Group
           </button>
         </div>
-        <h2 className="mb-4">Create a group or join an existing group below</h2>
-        <div className="bg-secondary p-4 rounded-lg shadow-inner">
-          {Object.keys(groups).map((key) => {
-            const element = groups[key];
-            let isLeader = element.leader === playerData.source;
-            let isMember = element.members.some(
-              (member) => member.Player === playerData.source
-            );
+        {currentGroups?.length > 0 ? (
+          <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>
+        )}
+        {currentGroups && currentGroups.length > 0 && (
+          <div className="bg-secondary p-4 rounded-lg shadow-inner">
+            {currentGroups.map((group) => {
+              let isLeader = group.leader === playerData.source;
+              let isMember = group.members.some(
+                (member) => member.Player === playerData.source
+              );
+              if (isMember === true) {}
 
-            return (
-              <div
-                key={element.id}
-                className={`flex justify-between items-center p-3 mb-2 rounded-md ${
-                  !inGroup && "hover:bg-accent"
-                }`}
-                onClick={() => {
-                  if (!inGroup) {
-                    setSelectedGroup(element);
-                  }
-                }}
-              >
-                <div className="flex items-center">
-                  <FontAwesomeIcon icon={faUsers} className="mr-2" />
-                  <span>{element.GName}</span>
+              return (
+                <div
+                  key={group.id}
+                  className={`flex justify-between items-center p-3 mb-2 rounded-md ${
+                    !inGroup && "hover:bg-accent"
+                  }`}
+                  onClick={() => {
+                    if (!inGroup) {
+                      setSelectedGroup(group);
+                    }
+                  }}
+                >
+                  <div className="flex items-center">
+                    <FontAwesomeIcon icon={faUsers} className="mr-2" />
+                    <span>{group.GName}</span>
+                  </div>
+                  <div className="flex items-center">
+                    <>
+                      {isMember && (renderIcons(isLeader, isMember, group))}
+                      <FontAwesomeIcon icon={faUserGroup} className="" />
+                      <span className="mx-2 font-semibold">
+                        {group.members.length}
+                      </span>
+                    </>
+                  </div>
                 </div>
-                <div className="flex items-center">
-                  <>
-                    {isLeader ||
-                      (isMember && (
-                        <div className="flex items-center">
-                          {renderIcons(isLeader, isMember, element)}
-                        </div>
-                      ))}
-                    <FontAwesomeIcon icon={faUserGroup} className="" />
-                    <span className="mx-2 font-semibold">
-                      {element.members.length}
-                    </span>
-                  </>
-                </div>
-              </div>
-            );
-          })}
-        </div>
+              );
+            })}
+          </div>
+        )}
         {showCreateGroup && (
           <CreateGroup
             onSelect={(groupData) => {
@@ -197,7 +185,7 @@ const GroupDashboard = ({ setCurrentPage }) => {
           />
         )}
         {showPlayerList && (
-          <PlayerList onClose={() => setShowPlayerList(false)} />
+          <PlayerList onClose={() => setShowPlayerList(false)} currentGroup={currentGroup}/>
         )}
         {isDialogOpen && (
           <ConfirmationDialog

diff --git a/web/src/components/GroupJob.tsx b/web/src/components/GroupJob.tsx
@@ -3,6 +3,7 @@ import ConfirmationDialog from "./ConfirmationDialog";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
 import { useNuiEvent } from "../hooks/useNuiEvent";
+import { fetchReactNui } from "../utils/fetchReactNui";
 import { GroupJobStep } from "../types/GroupJobStep";
 import { useGroupJobStepStore } from "../storage/GroupJobStepStore";
 import { useGroupStore } from "../storage/GroupStore";
@@ -12,7 +13,7 @@ interface GroupJobProps {
   initialSteps: GroupJobStep[];
 }
 
-const GroupJob: React.FC<GroupJobProps> = ({ setCurrentPage }) => {
+const GroupJob: React.FC<GroupJobProps> = ({ setCurrentPage, inGroup }) => {
   const { groups } = useGroupStore();
   const { playerData } = usePlayerDataStore();
   const { groupJobSteps, getGroupJobSteps } = useGroupJobStepStore();
@@ -27,12 +28,8 @@ const GroupJob: React.FC<GroupJobProps> = ({ setCurrentPage }) => {
     setSteps(groupJobSteps);
   }, [groupJobSteps]);
 
-  const inGroup = groups.some((group) =>
-    group.members.some((member) => member.Player === playerData.source)
-  );
-
   const handleConfirm = () => {
-    // Add your confirm action here
+    fetchReactNui('leaveGroup')
     setIsDialogOpen(false);
   };
 

diff --git a/web/src/components/PlayerList.tsx b/web/src/components/PlayerList.tsx
@@ -2,20 +2,16 @@ import React, { useContext } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUser, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { usePlayerDataStore } from '../storage/PlayerDataStore';
-import { useGroupStore } from '../storage/GroupStore';
 
-const PlayerList: React.FC = ({ onClose }) => {
+const PlayerList: React.FC = ({ onClose, currentGroup }) => {
   const { playerData } = usePlayerDataStore();
-  const { groups, setGroups } = useGroupStore();
-  const currentGroup = groups.find((group) =>
-    group.members.some((member) => member.Player === playerData.source)
-  );
-  const isLeader = currentGroup.leader === playerData.source;
 
   const removeGroupMember = (member) => {
     console.log('Remove Member', member);
   };
 
+  const isLeader = currentGroup.members.find(member => member.Player === playerData.source).isLeader;
+
   return (
     <div className='fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center'>
       <div className='bg-background border border-primary w-full max-w-md rounded-md shadow-md'>
@@ -32,7 +28,7 @@ const PlayerList: React.FC = ({ onClose }) => {
               >
                 <FontAwesomeIcon icon={faUser} className='' />
                 <>
-                { isLeader && member.Player !== playerData.source &&
+                { (isLeader && member.Player !== playerData.source) &&
                   <FontAwesomeIcon
                     icon={faTrash}
                     className='self-right hover:text-danger'

diff --git a/web/src/storage/GroupStore.ts b/web/src/storage/GroupStore.ts
@@ -5,13 +5,15 @@ import { GroupJobStep } from "../types/GroupJobStep";
 
 interface GroupStore {
   currentGroups: Group[];
-  getCurrentGroups: () => void;
+  inGroup: boolean;
+  refreshGroups: () => void;
   setGroups: (currentGroups: Group[]) => void;
 }
 
 export const useGroupStore = create<GroupStore>((set) => ({
-  getCurrentGroups: async () => {
-    const currentGroups = await fetchReactNui<Group[]>("getCurrentGroups", {}, [
+  currentGroups: [],
+  refreshGroups: async () => {
+    const currentGroups = await fetchReactNui<Group[]>("refreshGroups", {}, [
       {
         id: 1,
         status: "open",
@@ -43,7 +45,7 @@ export const useGroupStore = create<GroupStore>((set) => ({
         GPass: "password",
         leader: 3,
         members: [
-          { name: "Larry", CID: "ABCD1234", Player: 1 },
+          { name: "Larry", CID: "ABCD1234", Player: 2 },
           { name: "Barry", CID: "EFGH5678", Player: 3 },
         ],
         stage: [],
@@ -60,7 +62,8 @@ export const useGroupStore = create<GroupStore>((set) => ({
         ScriptCreated: false,
       },
     ]);
-    set({ currentGroups });
+    set({ currentGroups }, true);
+    console.log("Fetched groups");
   },
   setGroups: (currentGroups) => set({ currentGroups }),
-}));
+}));
diff --git a/web/src/storage/PlayerListStore.ts b/web/src/storage/PlayerListStore.ts
@@ -0,0 +1,35 @@
+import { create } from 'zustand';
+
+type PlayerListStoreState = {
+  members: string[];
+  leader: number;
+  addMember: (member: string) => void;
+  setLeader: (leader: number) => void;
+};
+
+const usePlayerListStore = create<PlayerListStoreState>((set) => ({
+  members: [],
+  leader: 0,
+  addMember: (member) => set((state) => ({ members: [...state.members, member] })),
+  setLeader: (leader) => set({ leader }),
+}));
+
+const PlayerListStore: React.FC = () => {
+  const { members, leader, addMember, setLeader } = usePlayerListStore();
+
+  return (
+    <div>
+      <h2>Player List</h2>
+      <ul>
+        {members.map((member, index) => (
+          <li key={index}>{member}</li>
+        ))}
+      </ul>
+      <p>Leader: {leader}</p>
+      <button onClick={() => addMember('New Member')}>Add Member</button>
+      <button onClick={() => setLeader(1)}>Set Leader</button>
+    </div>
+  );
+};
+
+export default PlayerListStore;