perf: optimize load of pagination items with caching

contexts/Channels.tsx

@@ -6,6 +6,7 @@ import { useAuthentication } from '../tools/authentication'
 import { Channel, ChannelWithDefaultChannelId } from '../models/Channel'
 import { GuildsChannelsPath } from '../components/Application'
 import { handleSocketData, SocketData } from '../tools/handleSocketData'
+import { CacheKey, CHANNELS_CACHE_KEY } from '../tools/cache'
 
 export interface Channels {
   channels: Channel[]
@@ -27,6 +28,8 @@ export const ChannelsProvider: React.FC<
   const router = useRouter()
   const { authentication } = useAuthentication()
 
+  const cacheKey: CacheKey = `${path.guildId}-${CHANNELS_CACHE_KEY}`
+
   const {
     items: channels,
     hasMore,
@@ -35,14 +38,15 @@ export const ChannelsProvider: React.FC<
     setItems
   } = usePagination<Channel>({
     api: authentication.api,
-    url: `/guilds/${path.guildId}/channels`
+    url: `/guilds/${path.guildId}/channels`,
+    cacheKey
   })
 
   useEffect(() => {
-    authentication.socket.on(
+    authentication?.socket?.on(
       'channels',
       async (data: SocketData<ChannelWithDefaultChannelId>) => {
-        handleSocketData({ data, setItems })
+        handleSocketData({ data, setItems, cacheKey })
         if (data.action === 'delete') {
           await router.push(
             `/application/${path.guildId}/${data.item.defaultChannelId}`
@@ -52,9 +56,9 @@ export const ChannelsProvider: React.FC<
     )
 
     return () => {
-      authentication.socket.off('channels')
+      authentication?.socket?.off('channels')
     }
-  }, [authentication.socket, path.guildId, router, setItems])
+  }, [authentication.socket, path.guildId, router, setItems, cacheKey])
 
   useEffect(() => {
     resetPagination()

contexts/GuildMember.tsx

@@ -47,7 +47,7 @@ export const GuildMemberProvider: React.FC<
   }, [path, authentication.api])
 
   useEffect(() => {
-    authentication.socket.on(
+    authentication?.socket?.on(
       'guilds',
       async (data: SocketData<GuildWithDefaultChannelId>) => {
         if (data.item.id === path.guildId) {
@@ -72,7 +72,7 @@ export const GuildMemberProvider: React.FC<
     )
 
     return () => {
-      authentication.socket.off('guilds')
+      authentication?.socket?.off('guilds')
     }
   }, [authentication.socket, path.guildId, router])
 

contexts/Guilds.tsx

@@ -4,6 +4,7 @@ import { NextPage, usePagination } from '../hooks/usePagination'
 import { useAuthentication } from '../tools/authentication'
 import { GuildWithDefaultChannelId } from '../models/Guild'
 import { handleSocketData, SocketData } from '../tools/handleSocketData'
+import { GUILDS_CACHE_KEY } from '../tools/cache'
 
 export interface Guilds {
   guilds: GuildWithDefaultChannelId[]
@@ -29,19 +30,20 @@ export const GuildsProvider: React.FC<React.PropsWithChildren<{}>> = (
     setItems
   } = usePagination<GuildWithDefaultChannelId>({
     api: authentication.api,
-    url: '/guilds'
+    url: '/guilds',
+    cacheKey: GUILDS_CACHE_KEY
   })
 
   useEffect(() => {
-    authentication.socket.on(
+    authentication?.socket?.on(
       'guilds',
       (data: SocketData<GuildWithDefaultChannelId>) => {
-        handleSocketData({ data, setItems })
+        handleSocketData({ data, setItems, cacheKey: GUILDS_CACHE_KEY })
       }
     )
 
     return () => {
-      authentication.socket.off('guilds')
+      authentication?.socket?.off('guilds')
     }
   }, [authentication.socket, setItems])
 

contexts/Members.tsx

@@ -6,6 +6,7 @@ import { MemberWithPublicUser } from '../models/Member'
 import { GuildsChannelsPath } from '../components/Application'
 import { handleSocketData, SocketData } from '../tools/handleSocketData'
 import { User } from '../models/User'
+import { CacheKey, MEMBERS_CACHE_KEY } from '../tools/cache'
 
 export interface Members {
   members: MemberWithPublicUser[]
@@ -27,6 +28,8 @@ export const MembersProviders: React.FC<
 
   const { authentication } = useAuthentication()
 
+  const cacheKey: CacheKey = `${path.guildId}-${MEMBERS_CACHE_KEY}`
+
   const {
     items: members,
     hasMore,
@@ -35,18 +38,19 @@ export const MembersProviders: React.FC<
     setItems
   } = usePagination<MemberWithPublicUser>({
     api: authentication.api,
-    url: `/guilds/${path.guildId}/members`
+    url: `/guilds/${path.guildId}/members`,
+    cacheKey
   })
 
   useEffect(() => {
-    authentication.socket.on(
+    authentication?.socket?.on(
       'members',
       (data: SocketData<MemberWithPublicUser>) => {
-        handleSocketData({ data, setItems })
+        handleSocketData({ data, setItems, cacheKey })
       }
     )
 
-    authentication.socket.on('users', (data: SocketData<User>) => {
+    authentication?.socket?.on('users', (data: SocketData<User>) => {
       setItems((oldItems) => {
         const newItems = [...oldItems]
         switch (data.action) {
@@ -65,10 +69,10 @@ export const MembersProviders: React.FC<
     })
 
     return () => {
-      authentication.socket.off('members')
-      authentication.socket.off('users')
+      authentication?.socket?.off('members')
+      authentication?.socket?.off('users')
     }
-  }, [authentication.socket, setItems])
+  }, [authentication.socket, setItems, cacheKey])
 
   useEffect(() => {
     resetPagination()

contexts/Messages.tsx

@@ -5,6 +5,7 @@ import { useAuthentication } from '../tools/authentication'
 import { MessageWithMember } from '../models/Message'
 import { GuildsChannelsPath } from '../components/Application'
 import { handleSocketData, SocketData } from '../tools/handleSocketData'
+import { CacheKey, MESSAGES_CACHE_KEY } from '../tools/cache'
 
 export interface Messages {
   messages: MessageWithMember[]
@@ -25,6 +26,8 @@ export const MessagesProvider: React.FC<
   const { path, children } = props
   const { authentication, user } = useAuthentication()
 
+  const cacheKey: CacheKey = `${path.channelId}-${MESSAGES_CACHE_KEY}`
+
   const {
     items: messages,
     hasMore,
@@ -34,11 +37,12 @@ export const MessagesProvider: React.FC<
   } = usePagination<MessageWithMember>({
     api: authentication.api,
     url: `/channels/${path.channelId}/messages`,
-    inverse: true
+    inverse: true,
+    cacheKey
   })
 
   useEffect(() => {
-    authentication.socket.on(
+    authentication?.socket?.on(
       'messages',
       (data: SocketData<MessageWithMember>) => {
         if (data.item.channelId === path.channelId) {
@@ -48,7 +52,7 @@ export const MessagesProvider: React.FC<
           const isAtBottom =
             messagesDiv.scrollHeight - messagesDiv.scrollTop <=
             messagesDiv.clientHeight
-          handleSocketData({ data, setItems })
+          handleSocketData({ data, setItems, cacheKey })
           if (
             data.action === 'create' &&
             (isAtBottom || data.item.member.userId === user.id)
@@ -60,9 +64,9 @@ export const MessagesProvider: React.FC<
     )
 
     return () => {
-      authentication.socket.off('messages')
+      authentication?.socket?.off('messages')
     }
-  }, [authentication.socket, setItems, path, user.id])
+  }, [authentication.socket, setItems, path, user.id, cacheKey])
 
   useEffect(() => {
     resetPagination()