feat(twitter): prevent re-render for twitter feed

project-error · Nov 23, 2021 · 57e4760 · 57e4760
1 parent b730209
commit 57e4760
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 46 deletions.
diff --git a/phone/src/apps/twitter/components/tweet/Tweet.tsx b/phone/src/apps/twitter/components/tweet/Tweet.tsx
@@ -145,4 +145,4 @@ export const Tweet = (tweet: ITweet) => {
   );
 };
 
-export default memo(Tweet);
+export default Tweet;
diff --git a/phone/src/apps/twitter/components/tweet/TweetList.tsx b/phone/src/apps/twitter/components/tweet/TweetList.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, memo, useCallback } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { List } from '../../../../ui/components/List';
 import Tweet from './Tweet';
@@ -42,8 +42,6 @@ export function TweetList({ tweets }: { tweets: ITweet[] }) {
         setHasMore(true);
         setPage((curVal) => curVal + 1);
 
-        console.log('new tewwweeeeeettts', resp.data);
-
         updateTweets(resp.data.map(processTweet));
       },
     );
@@ -78,4 +76,4 @@ export function TweetList({ tweets }: { tweets: ITweet[] }) {
   );
 }
 
-export default memo(TweetList); // only re-render if our tweets change
+export default TweetList; // only re-render if our tweets change
diff --git a/phone/src/apps/twitter/components/tweet/TweetListContainer.tsx b/phone/src/apps/twitter/components/tweet/TweetListContainer.tsx
@@ -1,19 +1,15 @@
 import React, { useEffect } from 'react';
-import { useNuiRequest } from 'fivem-nui-react-lib';
-import { useTweets } from '../../hooks/useTweets';
 import { useTwitterNotifications } from '../../hooks/useTwitterNotifications';
 import TweetList from './TweetList';
 import { Tweet, TwitterEvents } from '../../../../../../typings/twitter';
 import { fetchNui } from '../../../../utils/fetchNui';
 import { ServerPromiseResp } from '../../../../../../typings/common';
 import { useSnackbar } from '../../../../ui/hooks/useSnackbar';
 import { useTranslation } from 'react-i18next';
-import { useTwitterActions } from '../../hooks/useTwitterActions';
 import { processTweet } from '../../utils/tweets';
-import { useTweetsState, useTweetsValue } from '../../hooks/state';
+import { useTweetsState } from '../../hooks/state';
 
 export function TweetListContainer() {
-  const { setUnreadCount } = useTwitterNotifications();
   const { addAlert } = useSnackbar();
   const { t } = useTranslation();
   const [tweets, setTweets] = useTweetsState();
@@ -31,12 +27,6 @@ export function TweetListContainer() {
     });
   }, [addAlert, t, setTweets]);
 
-  useEffect(() => {
-    if (tweets?.length) {
-      setUnreadCount(0);
-    }
-  }, [setUnreadCount, tweets]);
-
   return <TweetList tweets={tweets} />;
 }
 

diff --git a/phone/src/apps/twitter/hooks/state.ts b/phone/src/apps/twitter/hooks/state.ts
@@ -1,19 +1,33 @@
 import { atom, useSetRecoilState, selector, useRecoilValue, useRecoilState } from 'recoil';
 import {
   FormattedTweet,
+  Profile,
   Tweet,
   Tweet as ITweet,
   TwitterEvents,
 } from '../../../../../typings/twitter';
 import { fetchNui } from '../../../utils/fetchNui';
-import { ServerPromiseResp } from '../../../../../typings/common';
 import { processTweet } from '../utils/tweets';
 import { isEnvBrowser } from '../../../utils/misc';
+import { ServerPromiseResp } from '../../../../../typings/common';
 
 export const twitterState = {
   profile: atom({
     key: 'profile',
-    default: null,
+    default: selector<Profile>({
+      key: 'defaultProfileValue',
+      get: async () => {
+        try {
+          const resp = await fetchNui<ServerPromiseResp<Profile>>(
+            TwitterEvents.GET_OR_CREATE_PROFILE,
+          );
+          return resp.data;
+        } catch (e) {
+          console.log(e);
+          return null;
+        }
+      },
+    }),
   }),
   defaultProfileNames: atom({
     key: 'defaultProfileNames',
@@ -22,21 +36,7 @@ export const twitterState = {
   // TODO: Fix this any type
   tweets: atom<any[]>({
     key: 'tweets',
-    default: [] /*selector({
-      key: 'defaultTweetsValue',
-      get: async () => {
-        try {
-          const resp = await fetchNui<ServerPromiseResp<Tweet[]>>(TwitterEvents.FETCH_TWEETS, { pageId: 0 });
-          return resp.data.map(processTweet);
-        } catch (e) {
-          if (isEnvBrowser()) {
-            return []
-          }
-          console.log(e);
-          return [];
-        }
-      }
-    })*/,
+    default: [],
   }),
   filteredTweets: atom({
     key: 'filteredTweets',
@@ -79,3 +79,6 @@ export const twitterState = {
 export const useTweetsState = () => useRecoilState(twitterState.tweets);
 export const useTweetsValue = () => useRecoilValue(twitterState.tweets);
 export const useSetTweets = () => useSetRecoilState(twitterState.tweets);
+
+export const useTwitterProfile = () => useRecoilState(twitterState.profile);
+export const useTwitterProfileValue = () => useRecoilValue(twitterState.profile);
diff --git a/phone/src/apps/twitter/hooks/useTwitterService.ts b/phone/src/apps/twitter/hooks/useTwitterService.ts
@@ -1,17 +1,16 @@
+import { useCallback } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { v4 as uuidv4 } from 'uuid';
 
 import { useNuiEvent } from 'fivem-nui-react-lib';
 import { IMAGE_DELIMITER } from '../utils/images';
 import { APP_TWITTER } from '../utils/constants';
-import { twitterState } from './state';
+import { twitterState, useTwitterProfileValue } from './state';
 import { IAlert, useSnackbar } from '../../../ui/hooks/useSnackbar';
 import { useTwitterNotifications } from './useTwitterNotifications';
 import { useTranslation } from 'react-i18next';
 import { Tweet, FormattedTweet, Profile, TwitterEvents } from '../../../../../typings/twitter';
 import { useCurrentTwitterPage } from './useCurrentTwitterPage';
-import { useCallback, useEffect } from 'react';
-import { fetchNui } from '../../../utils/fetchNui';
 import { useTwitterActions } from './useTwitterActions';
 import { processBroadcastedTweet, processTweet } from '../utils/tweets';
 
@@ -28,7 +27,7 @@ export const useTwitterService = () => {
   const { t } = useTranslation();
   const { addTweet } = useTwitterActions();
 
-  const [profile, setProfile] = useRecoilState<Profile>(twitterState.profile);
+  const profile = useTwitterProfileValue();
   const setUpdateProfileLoading = useSetRecoilState(twitterState.updateProfileLoading);
   const { pageId } = useCurrentTwitterPage();
   const [currentTweets, setTweets] = useRecoilState(twitterState.tweets);
@@ -52,11 +51,10 @@ export const useTwitterService = () => {
     (tweet: Tweet) => {
       setNotification(tweet);
       const processedTweet = processBroadcastedTweet(tweet, profile);
-      const tweets = [processedTweet].concat(currentTweets);
 
       addTweet(processedTweet);
     },
-    [addTweet, setNotification, currentTweets, profile],
+    [addTweet, setNotification, profile],
   );
 
   const handleAddAlert = ({ message, type }: IAlert) => {
@@ -66,7 +64,8 @@ export const useTwitterService = () => {
     });
   };
 
-  useNuiEvent(APP_TWITTER, TwitterEvents.GET_OR_CREATE_PROFILE, setProfile);
+  // TODO: Remove TwitterEvents.GET_OR_CREATE_PROFILE listener
+  /*useNuiEvent(APP_TWITTER, TwitterEvents.GET_OR_CREATE_PROFILE, setProfile);*/
   useNuiEvent(APP_TWITTER, TwitterEvents.GET_OR_CREATE_PROFILE_NULL, setDefaultProfileNames);
   useNuiEvent(APP_TWITTER, TwitterEvents.CREATE_PROFILE_RESULT, handleAddAlert);
   useNuiEvent(APP_TWITTER, TwitterEvents.UPDATE_PROFILE_LOADING, setUpdateProfileLoading);

diff --git a/resources/server/twitter/twitter.controller.ts b/resources/server/twitter/twitter.controller.ts
@@ -5,6 +5,7 @@ import { getSource } from '../utils/miscUtils';
 import TwitterService from './twitter.service';
 import { onNetPromise } from '../utils/PromiseNetEvents/onNetPromise';
 
+/*
 onNet(TwitterEvents.GET_OR_CREATE_PROFILE, async () => {
   const _source = getSource();
   TwitterService.handleGetOrCreateProfile(_source).catch((e) =>
@@ -13,6 +14,16 @@ onNet(TwitterEvents.GET_OR_CREATE_PROFILE, async () => {
     ),
   );
 });
+*/
+
+onNetPromise(TwitterEvents.GET_OR_CREATE_PROFILE, async (reqObj, resp) => {
+  const _source = getSource();
+  TwitterService.handleGetOrCreateProfile(reqObj, resp).catch((e) => {
+    twitterLogger.error(
+      `Error occurred in getOrCreateProfile event (${_source}), Error: ${e.message}`,
+    );
+  });
+});
 
 onNet(TwitterEvents.CREATE_PROFILE, async (profile: Profile) => {
   const _source = getSource();
@@ -27,6 +38,7 @@ onNet(TwitterEvents.UPDATE_PROFILE, async (profile: Profile) => {
     twitterLogger.error(`Error occurred in updateProfile event (${_source}), Error: ${e.message}`),
   );
 });
+
 /*
 onNet(TwitterEvents.FETCH_TWEETS, async (pageI: number) => {
   const _source = getSource();

diff --git a/resources/server/twitter/twitter.service.ts b/resources/server/twitter/twitter.service.ts
@@ -14,8 +14,11 @@ class _TwitterService {
     twitterLogger.debug('Twitter service started');
   }
 
-  async handleGetOrCreateProfile(src: number) {
-    const identifier = PlayerService.getIdentifier(src);
+  async handleGetOrCreateProfile(
+    reqObj: PromiseRequest<void>,
+    resp: PromiseEventResp<Profile | string[]>,
+  ) {
+    const identifier = PlayerService.getIdentifier(reqObj.source);
 
     try {
       const profile = await this.twitterDB.getOrCreateProfile(identifier);
@@ -28,14 +31,15 @@ class _TwitterService {
       // as we create a default profile in that process.
 
       if (!profile) {
-        emitNet(TwitterEvents.GET_OR_CREATE_PROFILE_NULL, src, ['chip', 'taso']);
+        emitNet(TwitterEvents.GET_OR_CREATE_PROFILE_NULL, reqObj.source, ['chip', 'taso']);
       } else {
-        emitNet(TwitterEvents.GET_OR_CREATE_PROFILE_SUCCESS, src, profile);
+        resp({ status: 'ok', data: profile });
+        //emitNet(TwitterEvents.GET_OR_CREATE_PROFILE_SUCCESS, reqObj.source, profile);
       }
     } catch (e) {
-      emitNet(TwitterEvents.GET_OR_CREATE_PROFILE_FAILURE, src);
+      emitNet(TwitterEvents.GET_OR_CREATE_PROFILE_FAILURE, reqObj.source);
       twitterLogger.error(`Failed to get or create profile, ${e.message}`, {
-        source: src,
+        source: reqObj.source,
       });
     }
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -145,4 +145,4 @@ export const Tweet = (tweet: ITweet) => { @@
       );
     };
-    export default memo(Tweet);
+    export default Tweet;