fix: ui fixing pt1

client/main.lua

@@ -27,8 +27,8 @@ CreateThread(function()
             description = 'Group app to do stuff together',
             developer = 'solareon',
             defaultApp = true,
-            ui = 'slrn_groups/web/dist/assets/index.html',
-            icon = 'https://cfx-nui-slrn_groups/web/dist/icon.png'
+            ui = 'http://localhost:3000',
+            icon = 'https://cfx-nui-slrn_groups/ui/dist/icon.svg'
         })
         if not added then
             print('Could not add app:', errorMessage)
@@ -54,22 +54,22 @@ RegisterNuiCallback('getPlayerData', function(_, cb)
 end)
 
 RegisterNuiCallback('getGroupData', function(_, cb)
-    cb({})
     local groups, inGroup, groupStatus, groupStages = lib.callback.await('slrn_groups:server:getAllGroups')
     if groups then
-        exports['lb-phone']:SendCustomAppMessage(identifier, {
-            action = 'setGroups',
-            data = groups,
-        })
+        cb(groups)
     end
     exports['lb-phone']:SendCustomAppMessage(identifier, {
         action = 'setInGroup',
         data = inGroup and true or false
     })
-    exports['lb-phone']:SendCustomAppMessage(identifier, {
-        action = 'setCurrentGroup',
-        data = inGroup or nil
-    })
+    lib.callback('slrn_groups:server:getGroupMembersNames', false, function(groupData)
+        lib.print.error('currentGroupData')
+        lib.print.error(groupData)
+        exports['lb-phone']:SendCustomAppMessage(identifier, {
+            action = 'setCurrentGroup',
+            data = groupData or {}
+        })
+    end)
     exports['lb-phone']:SendCustomAppMessage(identifier, {
         action = 'setGroupJobSteps',
         data = groupStages or {}
@@ -80,11 +80,12 @@ RegisterNuiCallback('getGroupData', function(_, cb)
             data = {}
         })
     end
+    -- cb({})
 end)
 
 RegisterNuiCallback('createGroup', function(data, cb)
     TriggerServerEvent('slrn_groups:server:createGroup', data)
-    cb({})
+    cb('ok')
 end)
 
 RegisterNuiCallback('joinGroup', function(data, cb)
@@ -118,7 +119,7 @@ RegisterNuiCallback('deleteGroup', function(_, cb)
 end)
 
 RegisterNUICallback('getMemberList', function(_, cb)
-    local groupNames = lib.callback.await('slrn_groups:server:getGroupMembers')
+    local groupNames = lib.callback.await('slrn_groups:server:getGroupMembersNames')
     cb(groupNames)
 end)
 

fxmanifest.lua

@@ -17,11 +17,10 @@ server_script 'server/**/*'
 shared_script '@ox_lib/init.lua'
 
 files {
-    "web/dist/**/*",
-    "web/icon.png"
+    "ui/dist/**/*",
 }
 
-ui_page "web/dist/index.html"
+ui_page "ui/dist/index.html"
 
 dependency '/assetpacks'
 

server/api.lua

@@ -164,7 +164,7 @@ function api.DestroyGroup(groupID)
     table.remove(groups, groupID)
 
     TriggerEvent('slrn_groups:server:GroupDeleted', groupID, group:getGroupMembers())
-    lib.TriggerClientEvent('slrn_groups:client:refreshGroups', -1, api.GetAllGroups())
+    lib.triggerClientEvent('slrn_groups:client:refreshGroups', -1, api.GetAllGroups())
 end
 utils.exportHandler('DestroyGroup', api.DestroyGroup)
 
@@ -177,7 +177,7 @@ function api.AddMember(groupID, source)
 
     group:addMember(source)
 
-    lib.TriggerClientEvent('slrn_groups:client:refreshGroups', -1, api.GetAllGroups())
+    lib.triggerClientEvent('slrn_groups:client:refreshGroups', -1, api.GetAllGroups())
 end
 utils.exportHandler('AddMember', api.AddMember)
 
@@ -232,7 +232,7 @@ function api.RemovePlayerFromGroup(source, groupID)
         if member.Player == source then
             table.remove(group.members, i)
 
-            lib.TriggerClientEvent('slrn_groups:client:refreshGroups', -1, api.GetAllGroups())
+            lib.triggerClientEvent('slrn_groups:client:refreshGroups', -1, api.GetAllGroups())
 
             -- There are no more members in the group, destroy it
             if memberCount == 1 then
@@ -347,14 +347,14 @@ function api.GetGroupMembersNames(groupId)
     end
 
     local members = {}
-    local amount = 0
 
     for i = 1, #group.members do
-        amount += 1
-        local member = {}
-        member.name = group.members[i].name
-        member.Player = group.members[i].Player
-        members[amount] = member
+        local member = group.members[i]
+
+        members[i] = {
+            name = member.name,
+            Player = member.Player
+        }
     end
 
     return members
@@ -397,8 +397,9 @@ function api.CreateGroup(src, name, password)
 
     groups[id] = group
 
+    lib.print.error(groups)
     -- Send non-sensitive data to all clients (id, name, memberCount)
-    lib.TriggerClientEvent('slrn_groups:client:refreshGroups', -1, api.GetAllGroups())
+    lib.triggerClientEvent('slrn_groups:client:refreshGroups', -1, api.GetAllGroups())
 
     return id
 end

server/main.lua

@@ -51,6 +51,7 @@ end)
 ---@param data {name: string, pass: string}
 RegisterNetEvent('slrn_groups:server:createGroup', function(data)
     api.CreateGroup(source, data.name, data.pass)
+    lib.print.error('Group Created')
 end)
 
 
@@ -61,16 +62,30 @@ lib.callback.register('slrn_groups:server:getGroupMembers', function(source)
     local groupId = api.GetGroupByMembers(source)
 
     if groupId then
+        lib.print.error(api.getGroupMembers(groupId))
         return api.getGroupMembers(groupId)
     end
 end)
 
+---Gets all the player names of the players in the group
+---@param source number
+---@return table?
+lib.callback.register('slrn_groups:server:getGroupMembersNames', function(source)
+    local groupId = api.GetGroupByMembers(source)
+
+    if groupId then
+        lib.print.error(api.GetGroupMembersNames(groupId))
+        return api.GetGroupMembersNames(groupId)
+    end
+end)
+
 
 
 ---Get all groups
 ---@param source number
 lib.callback.register('slrn_groups:server:getAllGroups', function(source)
     local groupId = api.GetGroupByMembers(source)
+    lib.print.error(api.GetAllGroups())
 
     if groupId then
         return api.GetAllGroups(), groupId, api.getJobStatus(groupId), api.GetGroupStages(groupId)

web/src/App.tsx → ui/src/App.tsx

@@ -6,7 +6,6 @@ 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";
@@ -42,35 +41,12 @@ const App = () => {
   }, [theme]);
 
   useEffect(() => {
-    fetchReactNui("getPlayerData", {}, {
-      source: 1,
-      citizenId: 'ABCD1234',
-    }).then((data) => {
+    fetchNui("getPlayerData").then((data) => {
       setPlayerData(data);
     });
 
-    fetchReactNui<Group[]>("getGroupData", {}, [
-      {
-        id: 1,
-        name: "Group 1",
-        memberCount: 1,
-      },
-      {
-        id: 2,
-        name: "Group 2",
-        memberCount: 2,
-      },
-      {
-        id: 3,
-        name: "Group 3",
-        memberCount: 3,
-      },
-      {
-        id: 4,
-        name: "Group 4",
-        memberCount: 4,
-      }
-    ]).then((data) => setGroups(data));
+    fetchNui<Group[]>("getGroupData").then((data) => setGroups(data));
+    // fetchNui<Group[]>("getGroupData").then(() => void);
   }, []);
 
   useEffect(() => {
@@ -139,7 +115,7 @@ const App = () => {
         <div className="text-left text-4xl font-bold m-2 pt-2">Groups</div>
         {currentPage === "GroupDashboard" && (
           <GroupDashboard
-            setCurrentPage={setCurrentPage}
+            setCurrentPage={setCurrentPage} fetchNui={fetchNui}
           />
         )}
         {currentPage === "GroupJob" && (

web/src/components/GroupDashboard.tsx → ui/src/components/GroupDashboard.tsx

@@ -4,7 +4,6 @@ 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";
@@ -16,7 +15,7 @@ import {
   faRightFromBracket,
 } from "@fortawesome/free-solid-svg-icons";
 
-const GroupDashboard = ({ setCurrentPage }) => {
+const GroupDashboard = ({ setCurrentPage, fetchNui }) => {
   const { currentGroups, currentGroup, inGroup, } = useGroupStore();
   const { playerData } = usePlayerDataStore();
   const [showCreateGroup, setShowCreateGroup] = useState(false);
@@ -26,26 +25,22 @@ const GroupDashboard = ({ setCurrentPage }) => {
   const [confirmation, setConfirmation] = useState({ message: null, type: null });
 
   useEffect(() => {
-    setCurrentGroup(
-      currentGroups.find((group) =>
-        group.members.some((member) => member.Player === playerData.source)
-      )
-    );
+      fetchNui('getMemberList').then((data) => setCurrentGroup(data));
   }, [currentGroups]);
 
   const handleConfirm = () => {
-    fetchReactNui(confirmation.type, {}, {});
+    fetchNui(confirmation.type);
     console.log(confirmation);
     setIsDialogOpen(false);
   };
 
   const createGroup = (groupData) => {
     console.log(groupData);
-    fetchReactNui("createGroup", groupData);
+    fetchNui("createGroup", {name: groupData.groupName, pass: groupData.password});
   };
 
   const joinGroup = (groupData) => {
-    fetchReactNui("joinGroup", groupData);
+    fetchNui("joinGroup", {groupData});
     console.log(groupData);
   };
 
@@ -128,9 +123,10 @@ const GroupDashboard = ({ setCurrentPage }) => {
           <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
-              );
+              // let isMember = group.members.some(
+              //   (member) => member.Player === playerData.source
+              // );
+              let isMember = true;
 
               return (
                 <div
@@ -153,7 +149,7 @@ const GroupDashboard = ({ setCurrentPage }) => {
                       {isMember && renderIcons(isLeader, isMember, group)}
                       <FontAwesomeIcon icon={faUserGroup} className="" />
                       <span className="mx-2 font-semibold">
-                        {group.members.length}
+                        {group.membercount}
                       </span>
                     </>
                   </div>
@@ -187,6 +183,7 @@ const GroupDashboard = ({ setCurrentPage }) => {
         {showPlayerList && (
           <PlayerList
             onClose={() => setShowPlayerList(false)}
+            fetchNui={fetchNui}
             currentGroup={currentGroup}
           />
         )}

web/src/components/GroupJob.tsx → ui/src/components/GroupJob.tsx

@@ -12,6 +12,10 @@ interface GroupJobProps {
   initialSteps: GroupJobStep[];
 }
 
+const {
+  fetchNui,
+} = window as any;
+
 const GroupJob: React.FC<GroupJobProps> = ({ setCurrentPage }) => {
   const { currentGroups, currentGroup, setCurrentGroup, inGroup, setInGroup } = useGroupStore();
   const { playerData } = usePlayerDataStore();
@@ -35,7 +39,7 @@ const GroupJob: React.FC<GroupJobProps> = ({ setCurrentPage }) => {
   }, [currentGroups]);
 
   const handleConfirm = () => {
-    fetchReactNui(confirmation.type);
+    fetchNui(confirmation.type);
     setIsDialogOpen(false);
   };
 

web/src/components/PlayerList.tsx → ui/src/components/PlayerList.tsx

@@ -4,7 +4,7 @@ import { faUser, faTrash, faCrown } 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, fetchNui }) => {
   const { playerData } = usePlayerDataStore();
   const { currentGroup } = useGroupStore();
 
@@ -16,25 +16,24 @@ const PlayerList: React.FC = ({ onClose }) => {
     console.log('Promote Member', member);
   }
 
-  const isLeader = currentGroup.members.find(member => member.Player === playerData.source) && true;
-
   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'>
         <div className='p-4 rounded-t-md'>
           <h2 className='text-2xl font-semibold'>Group Members</h2>
-          <h3 className='text-xl'>{currentGroup.GName}</h3>
+          <h3 className='text-xl'>{currentGroup.name}</h3>
         </div>
         <div className='p-2'>
-          {currentGroup.members.map((member, index) => {
+          {currentGroup.map((member, index) => {
             return (
               <div
                 key={index}
                 className='flex items-center p-2 rounded-md my-2 gap-x-2 bg-secondary'
               >
                 <FontAwesomeIcon icon={faUser} className='' />
                 <>
-                { (isLeader && member.Player !== playerData.source) && (
+                {/* { (isLeader && member.Player !== playerData.source) && ( */}
+                { (member.Player !== playerData.source) && (
                   <>
                     <FontAwesomeIcon
                       icon={faTrash}

web/src/storage/GroupStore.ts → ui/src/storage/GroupStore.ts

@@ -14,7 +14,16 @@ interface GroupStore {
 export const useGroupStore = create<GroupStore>((set) => ({
   currentGroups: [],
   inGroup: false,
-  setGroups: (data) => set({ currentGroups: data }),
-  setCurrentGroup: (data) => set({ currentGroup: data }),
-  setInGroup: (data) => set({ inGroup: data }),
+  setGroups: (data) => {
+    console.log("Setting current groups:", data);
+    set({ currentGroups: data });
+  },
+  setCurrentGroup: (data) => {
+    console.log("Setting current group:", data);
+    set({ currentGroup: data });
+  },
+  setInGroup: (data) => {
+    console.log("Setting inGroup:", data);
+    set({ inGroup: data });
+  },
 }));