fix(phone): fixed?

project-error · May 20, 2021 · 054f89c · RockySouthpaw · May 20, 2021 · 054f89c
1 parent 2f0f83a
commit 054f89c
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 25 deletions.
diff --git a/phone/src/Phone.tsx b/phone/src/Phone.tsx
@@ -81,23 +81,44 @@ function Phone() {
 
   const { modal: callModal } = useCallModal();
 
+  const { isPhoneReady } = usePhone();
+
   return (
     <div>
       <WindowSnackbar />
       <PhoneWrapper>
-        <NotificationBar />
-        <div className="PhoneAppContainer">
+        {isPhoneReady ? (
           <>
-            <Route exact path="/" component={HomeApp} />
-            {callModal && <Route exact path="/call" component={CallModal} />}
-            {apps.map((App) => (
-              <App.Route key={App.id} />
-            ))}
+            <NotificationBar />
+            <div className="PhoneAppContainer">
+              <>
+                <Route exact path="/" component={HomeApp} />
+                {callModal && <Route exact path="/call" component={CallModal} />}
+                {apps.map((App) => (
+                  <App.Route key={App.id} />
+                ))}
+              </>
+              <NotificationAlert />
+              <PhoneSnackbar />
+            </div>
+            <Navigation />
           </>
-          <NotificationAlert />
-          <PhoneSnackbar />
-        </div>
-        <Navigation />
+        ) : (
+          <Box
+            component={Paper}
+            height="100%"
+            width="100%"
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Typography paragraph variant="h6">
+              NPWD {t('INITIALIZING')}
+            </Typography>
+            <Typography paragraph>{t('GENERIC_WAIT')}</Typography>
+          </Box>
+        )}
       </PhoneWrapper>
     </div>
   );

diff --git a/phone/src/os/phone/hooks/state.ts b/phone/src/os/phone/hooks/state.ts
@@ -10,6 +10,10 @@ export const phoneState = {
     key: 'resourceConfig',
     default: null,
   }),
+  phoneReady: atom<boolean>({
+    key: 'phoneReady',
+    default: false,
+  }),
   phoneTime: atom<string>({
     key: 'phoneTime',
     default: null,

diff --git a/phone/src/os/phone/hooks/usePhone.ts b/phone/src/os/phone/hooks/usePhone.ts
@@ -10,11 +10,13 @@ interface IUsePhone {
   openPhone(): void;
   closePhone(): void;
   isPhoneOpen: boolean;
+  isPhoneReady: boolean;
 }
 
 export const usePhone = (): IUsePhone => {
   const Nui = useNuiRequest();
   const isPhoneOpen = useRecoilValue(phoneState.visibility);
+  const isPhoneReady = useRecoilValue(phoneState.phoneReady);
   const config = useRecoilValue(phoneState.resourceConfig);
 
   const { removeAlerts } = useNotifications();
@@ -32,5 +34,6 @@ export const usePhone = (): IUsePhone => {
     closePhone,
     openPhone,
     isPhoneOpen,
+    isPhoneReady,
   };
 };
diff --git a/phone/src/os/phone/hooks/usePhoneService.ts b/phone/src/os/phone/hooks/usePhoneService.ts
@@ -1,12 +1,22 @@
-import { useNuiEvent } from 'fivem-nui-react-lib';
+import { useNuiEvent, useNuiRequest } from 'fivem-nui-react-lib';
 import { useSetRecoilState } from 'recoil';
 import { PhoneEvents } from '../../../../../typings/phone';
 import { phoneState } from './state';
+import { useEffect } from 'react';
 
 export const usePhoneService = () => {
+  const { send } = useNuiRequest();
+
+  // Let client know UI is ready to accept events
+  useEffect(() => {
+    send(PhoneEvents.UI_IS_READY);
+  }, [send]);
+
   const setVisibility = useSetRecoilState(phoneState.visibility);
   const setResourceConfig = useSetRecoilState(phoneState.resourceConfig);
+  const setPhoneReady = useSetRecoilState(phoneState.phoneReady);
   const setPhoneTime = useSetRecoilState(phoneState.phoneTime);
+  useNuiEvent('PHONE', PhoneEvents.SET_PHONE_READY, setPhoneReady);
   useNuiEvent('PHONE', PhoneEvents.SET_VISIBILITY, setVisibility);
   useNuiEvent('PHONE', PhoneEvents.SET_CONFIG, setResourceConfig);
   useNuiEvent('PHONE', PhoneEvents.SET_TIME, setPhoneTime);

diff --git a/resources/client/cl_main.ts b/resources/client/cl_main.ts
@@ -21,20 +21,13 @@ let isUiReady = false;
  *
  * * * * * * * * * * * * */
 function fetchOnInitialize() {
-  sendMessage('PHONE', PhoneEvents.SET_CONFIG, config);
   emitNet(ContactEvents.GET_CONTACTS);
   emitNet(MessageEvents.FETCH_MESSAGE_GROUPS);
   emitNet(TwitterEvents.GET_OR_CREATE_PROFILE);
+  sendMessage('PHONE', PhoneEvents.SET_PHONE_READY, true);
+  sendMessage('PHONE', PhoneEvents.SET_CONFIG, config);
 }
 
-if (!config.general.enableMultiChar) {
-  on('playerSpawned', fetchOnInitialize);
-}
-
-onNet(PhoneEvents.ON_INIT, () => {
-  fetchOnInitialize();
-});
-
 RegisterKeyMapping('phone', 'Open Phone', 'keyboard', 'f1');
 
 const getCurrentGameTime = () => {
@@ -134,8 +127,17 @@ AddEventHandler('onResourceStop', function (resource: string) {
   }
 });
 
-onNet(PhoneEvents.SEND_CREDENTIALS, (number: string) => {
-  sendMessage('SIMCARD', PhoneEvents.SET_NUMBER, number);
+RegisterNuiCallbackType(PhoneEvents.UI_IS_READY);
+on(`__cfx_nui:${PhoneEvents.UI_IS_READY}`, (_data: any, cb: Function) => {
+  isUiReady = true;
+  if (isPlayerReady) {
+    fetchOnInitialize();
+  }
+  cb();
+});
+
+onNet(PhoneEvents.ON_INIT, () => {
+  fetchOnInitialize();
 });
 
 // DO NOT CHANGE THIS EITHER, PLEASE - CHIP

diff --git a/resources/server/players/player.service.ts b/resources/server/players/player.service.ts
@@ -131,7 +131,8 @@ class _PlayerService {
     playerLogger.debug(newPlayer);
 
     // Emit to client that player is ready
-    /*emitNet(PhoneEvents.ON_INIT, pSource);*/
+    console.log('init baby', pSource);
+    emitNet(PhoneEvents.PLAYER_IS_READY, pSource, true);
   }
 
   /**
@@ -183,7 +184,7 @@ class _PlayerService {
     playerLogger.debug(player);
 
     // Emit to client that player is ready
-    emitNet(PhoneEvents.ON_INIT, src);
+    emitNet(PhoneEvents.PLAYER_IS_READY, src, true);
   }
 
   /**