Reorganise ChatScreen code, reduce unneeded state.

Author: retrixe

src/App.tsx

@@ -15,8 +15,8 @@ import {
 } from '@react-navigation/native-stack'
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
 
-import useAsyncStorage from './storage/useAsyncStorage'
-import useJsonAsyncStorage from './storage/useJsonAsyncStorage'
+import useAsyncStorage from './utilities/storage/useAsyncStorage'
+import useJsonAsyncStorage from './utilities/storage/useJsonAsyncStorage'
 import ConnectionContext, {
   type DisconnectReason
 } from './context/connectionContext'
@@ -29,7 +29,7 @@ import ServersContext, { type Servers } from './context/serversContext'
 import { ColorSchemeContext } from './context/useDarkMode'
 import DisconnectDialog from './components/DisconnectDialog'
 import { type ServerConnection } from './minecraft/connection'
-import ChatScreen from './screens/chat/ChatScreen'
+import ChatScreen from './screens/ChatScreen'
 import ServerScreen from './screens/ServerScreen'
 import AccountScreen from './screens/AccountScreen'
 import SettingScreen from './screens/SettingScreen'

src/components/chat/ChatMessageList.tsx

@@ -0,0 +1,71 @@
+import React, { useCallback } from 'react'
+import { FlatList, StyleSheet, type ListRenderItem } from 'react-native'
+import {
+  ChatToJsx,
+  type MinecraftChat,
+  type ClickEvent,
+  type ColorMap
+} from '../../minecraft/chatToJsx'
+import Text from '../../components/Text'
+
+export interface Message {
+  key: number
+  text: MinecraftChat
+}
+
+const MessageRenderer = (props: {
+  item: Message
+  colorMap: ColorMap
+  clickEventHandler: (event: ClickEvent) => void
+}): JSX.Element => (
+  <ChatToJsx
+    chat={props.item.text}
+    component={Text}
+    colorMap={props.colorMap}
+    clickEventHandler={props.clickEventHandler}
+  />
+)
+
+const MessageRendererMemo = React.memo(
+  MessageRenderer,
+  (prev, next) =>
+    prev.item.key === next.item.key &&
+    prev.colorMap === next.colorMap &&
+    prev.clickEventHandler === next.clickEventHandler
+)
+
+const ChatMessageList = (props: {
+  messages: Message[]
+  colorMap: ColorMap
+  clickEventHandler: (ce: ClickEvent) => void
+}): JSX.Element => {
+  // If colorMap/clickEventHandler changes, this will change and cause a re-render.
+  // If messages changes, FlatList will execute this function for all messages, and
+  // ItemRendererMemo will check if props have changed instead of this useCallback.
+  const renderItem = useCallback<ListRenderItem<Message>>(
+    ({ item }) => (
+      <MessageRendererMemo
+        item={item}
+        colorMap={props.colorMap}
+        clickEventHandler={props.clickEventHandler}
+      />
+    ),
+    [props.colorMap, props.clickEventHandler]
+  )
+  return (
+    <FlatList
+      inverted
+      data={props.messages}
+      style={styles.chatArea}
+      contentContainerStyle={styles.chatAreaScrollView}
+      renderItem={renderItem}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  chatArea: { padding: 8, flex: 1 },
+  chatAreaScrollView: { paddingBottom: 16 }
+})
+
+export default ChatMessageList

src/screens/chat/ChatScreen.tsx renamed to src/screens/ChatScreen.tsx

@@ -6,13 +6,11 @@ import React, {
   useState
 } from 'react'
 import {
-  FlatList,
   StyleSheet,
   View,
   ActivityIndicator,
   Platform,
-  Linking,
-  type ListRenderItem
+  Linking
 } from 'react-native'
 import Ionicons from 'react-native-vector-icons/Ionicons'
 import Clipboard from '@react-native-clipboard/clipboard'
@@ -22,89 +20,37 @@ import {
   packetHandler,
   enderChatPrefix,
   sendMessageError
-} from './packetHandler'
-import { getSession, createConnection } from './sessionBuilder'
-import { type RootStackParamList } from '../../App'
-import globalStyle from '../../globalStyle'
-import useDarkMode from '../../context/useDarkMode'
-import AccountsContext from '../../context/accountsContext'
-import ServersContext from '../../context/serversContext'
-import useSessionStore from '../../context/sessionStore'
-import SettingsContext from '../../context/settingsContext'
+} from '../utilities/connection/packetHandler'
+import {
+  getSession,
+  createConnection
+} from '../utilities/connection/connectionBuilder'
+import { type RootStackParamList } from '../App'
+import globalStyle from '../globalStyle'
+import useDarkMode from '../context/useDarkMode'
+import AccountsContext from '../context/accountsContext'
+import ServersContext from '../context/serversContext'
+import useSessionStore from '../context/sessionStore'
+import SettingsContext from '../context/settingsContext'
 import ConnectionContext, {
   type DisconnectReason
-} from '../../context/connectionContext'
+} from '../context/connectionContext'
 import {
-  ChatToJsx,
   mojangColorMap,
   lightColorMap,
   type MinecraftChat,
-  type ClickEvent,
-  type ColorMap
-} from '../../minecraft/chatToJsx'
-import { makeChatMessagePacket } from '../../minecraft/packets/chat'
-import TextField from '../../components/TextField'
-import Text from '../../components/Text'
+  type ClickEvent
+} from '../minecraft/chatToJsx'
+import { makeChatMessagePacket } from '../minecraft/packets/chat'
+import TextField from '../components/TextField'
+import Text from '../components/Text'
+import ChatMessageList, {
+  type Message
+} from '../components/chat/ChatMessageList'
 
 type Props = NativeStackScreenProps<RootStackParamList, 'Chat'>
 
-export type Status = 'OPENING' | 'CONNECTING' | 'CONNECTED' | 'CLOSED'
-
-interface Message {
-  key: number
-  text: MinecraftChat
-}
-
-const ItemRenderer = (props: {
-  item: Message
-  colorMap: ColorMap
-  clickEventHandler: (event: ClickEvent) => void
-}): JSX.Element => (
-  <ChatToJsx
-    chat={props.item.text}
-    component={Text}
-    colorMap={props.colorMap}
-    clickEventHandler={props.clickEventHandler}
-  />
-)
-
-const ItemRendererMemo = React.memo(
-  ItemRenderer,
-  (prev, next) =>
-    prev.item.key === next.item.key &&
-    prev.colorMap === next.colorMap &&
-    prev.clickEventHandler === next.clickEventHandler
-)
-
-const ChatMessageList = (props: {
-  messages: Message[]
-  colorMap: ColorMap
-  clickEventHandler: (ce: ClickEvent) => void
-}): JSX.Element => {
-  // If colorMap/clickEventHandler changes, this will change and cause a re-render.
-  // If messages changes, FlatList will execute this function for all messages, and
-  // ItemRendererMemo will check if props have changed instead of this useCallback.
-  const renderItem = useCallback<ListRenderItem<Message>>(
-    ({ item }) => (
-      <ItemRendererMemo
-        item={item}
-        colorMap={props.colorMap}
-        clickEventHandler={props.clickEventHandler}
-      />
-    ),
-    [props.colorMap, props.clickEventHandler]
-  )
-  return (
-    <FlatList
-      inverted
-      data={props.messages}
-      style={styles.chatArea}
-      contentContainerStyle={styles.chatAreaScrollView}
-      renderItem={renderItem}
-    />
-  )
-}
-
+export type Status = 'CONNECTING' | 'CONNECTED' | 'CLOSED'
 const handleError =
   (addMessage: (text: MinecraftChat) => void, translated: string) =>
   (error: unknown) => {
@@ -130,7 +76,7 @@ const ChatScreen = ({ navigation, route }: Props): JSX.Element => {
 
   const messagesBufferRef = useRef<Message[]>([])
   const healthRef = useRef<number | null>(null)
-  const statusRef = useRef<Status>(connection ? 'CONNECTING' : 'OPENING')
+  const statusRef = useRef<Status>(connection ? 'CONNECTED' : 'CONNECTING')
   const idRef = useRef(0)
 
   const { version, serverName } = route.params
@@ -173,8 +119,8 @@ const ChatScreen = ({ navigation, route }: Props): JSX.Element => {
 
   // Create connection useEffect.
   useEffect(() => {
-    if (statusRef.current === 'OPENING') {
-      statusRef.current = 'CONNECTING'
+    if (statusRef.current === 'CONNECTING') {
+      statusRef.current = 'CONNECTED'
       ;(async () => {
         const session = await getSession(
           version,
@@ -198,7 +144,7 @@ const ChatScreen = ({ navigation, route }: Props): JSX.Element => {
             setConnection,
             closeChatScreen
           )
-          if ((statusRef.current as 'CLOSED' | 'CONNECTING') !== 'CLOSED') {
+          if ((statusRef.current as Status) !== 'CLOSED') {
             if (typeof conn === 'string') {
               closeChatScreen({ server: serverName, reason: conn })
             } else {
@@ -224,7 +170,6 @@ const ChatScreen = ({ navigation, route }: Props): JSX.Element => {
       'packet',
       packetHandler(
         healthRef,
-        statusRef,
         setLoading,
         connection,
         addMessage,
@@ -358,8 +303,6 @@ const styles = StyleSheet.create({
   backButton: { marginRight: 8 },
   backButtonIcon: { marginRight: 0 },
   sendButtonIcon: { marginRight: 0, marginLeft: 4 },
-  chatArea: { padding: 8, flex: 1 },
-  chatAreaScrollView: { paddingBottom: 16 },
   loadingScreen: { flex: 1, alignItems: 'center', justifyContent: 'center' },
   loadingScreenText: { paddingTop: 24, fontSize: 20 },
   textAreaDark: {

src/screens/chat/sessionBuilder.ts renamed to src/utilities/connection/connectionBuilder.ts

@@ -1,5 +1,4 @@
 import type React from 'react'
-import { type Status } from './ChatScreen'
 import { type MinecraftChat, parseValidJson } from '../../minecraft/chatToJsx'
 import {
   ConnectionState,
@@ -90,7 +89,6 @@ const handleSystemMessage = (
 export const packetHandler =
   (
     healthRef: React.MutableRefObject<number | null>,
-    statusRef: React.MutableRefObject<Status>,
     setLoading: React.Dispatch<React.SetStateAction<string>>,
     connection: ServerConnection,
     addMessage: (text: MinecraftChat) => any,
@@ -102,12 +100,8 @@ export const packetHandler =
   ) =>
   (packet: Packet) => {
     const { protocolVersion: version } = connection.options
-    if (
-      statusRef.current === 'CONNECTING' &&
-      connection.state === ConnectionState.LOGIN
-    ) {
+    if (connection.state === ConnectionState.LOGIN) {
       setLoading('')
-      statusRef.current = 'CONNECTED'
       const messageToSend = joinMessage.substring(0, charLimit).trim()
       if (sendJoinMessage && messageToSend) {
         connection