feat: use a selector for htmlDirection and pass it down as props instead of using state

this is more inline with class component conventions

ts/components/conversation/SessionConversation.tsx

@@ -57,6 +57,7 @@ import { MessageDetail } from './message/message-item/MessageDetail';
 
 import styled from 'styled-components';
 import { SessionSpinner } from '../basic/SessionSpinner';
+import { HTMLDirection } from '../../util/i18n';
 // tslint:disable: jsx-curly-spacing
 
 interface State {
@@ -76,6 +77,7 @@ interface Props {
   showMessageDetails: boolean;
   isRightPanelShowing: boolean;
   hasOngoingCallWithFocusedConvo: boolean;
+  htmlDirection: HTMLDirection;
 
   // lightbox options
   lightBoxOptions?: LightBoxOptions;
@@ -290,6 +292,7 @@ export class SessionConversation extends React.Component<Props, State> {
                 sendMessage={this.sendMessageFn}
                 stagedAttachments={this.props.stagedAttachments}
                 onChoseAttachments={this.onChoseAttachments}
+                htmlDirection={this.props.htmlDirection}
               />
             </div>
             <div

ts/components/conversation/composition/CompositionBox.tsx

@@ -57,7 +57,7 @@ import {
   getSelectedConversationKey,
 } from '../../../state/selectors/selectedConversation';
 import { SettingsKey } from '../../../data/settings-key';
-import { getHTMLDirection, HTMLDirection } from '../../../util/i18n';
+import { HTMLDirection } from '../../../util/i18n';
 
 export interface ReplyingToMessageProps {
   convoId: string;
@@ -105,6 +105,7 @@ interface Props {
   quotedMessageProps?: ReplyingToMessageProps;
   stagedAttachments: Array<StagedAttachmentType>;
   onChoseAttachments: (newAttachments: Array<File>) => void;
+  htmlDirection: HTMLDirection;
 }
 
 interface State {
@@ -114,7 +115,6 @@ interface State {
   ignoredLink?: string; // set the ignored url when users closed the link preview
   stagedLinkPreview?: StagedLinkPreviewData;
   showCaptionEditor?: AttachmentType;
-  htmlDirection?: HTMLDirection;
 }
 
 const sendMessageStyle = (dir?: HTMLDirection) => {
@@ -149,7 +149,6 @@ const getDefaultState = (newConvoId?: string) => {
     ignoredLink: undefined,
     stagedLinkPreview: undefined,
     showCaptionEditor: undefined,
-    htmlDirection: getHTMLDirection(),
   };
 };
 
@@ -418,7 +417,7 @@ class CompositionBoxInner extends React.Component<Props, State> {
 
     return (
       <Flex
-        dir={this.state.htmlDirection}
+        dir={this.props.htmlDirection}
         container={true}
         flexDirection={'row'}
         alignItems={'center'}
@@ -439,7 +438,7 @@ class CompositionBoxInner extends React.Component<Props, State> {
 
         <StyledSendMessageInput
           role="main"
-          dir={this.state.htmlDirection}
+          dir={this.props.htmlDirection}
           onClick={this.focusCompositionBox} // used to focus on the textarea when clicking in its container
           ref={el => {
             this.container = el;
@@ -455,7 +454,7 @@ class CompositionBoxInner extends React.Component<Props, State> {
         <SendMessageButton onClick={this.onSendMessage} />
 
         {typingEnabled && showEmojiPanel && (
-          <StyledEmojiPanelContainer role="button" dir={this.state.htmlDirection}>
+          <StyledEmojiPanelContainer role="button" dir={this.props.htmlDirection}>
             <SessionEmojiPanel
               ref={this.emojiPanel}
               show={showEmojiPanel}
@@ -470,7 +469,8 @@ class CompositionBoxInner extends React.Component<Props, State> {
 
   private renderTextArea() {
     const { i18n } = window;
-    const { draft, htmlDirection } = this.state;
+    const { draft } = this.state;
+    const { htmlDirection } = this.props;
 
     if (!this.props.selectedConversation) {
       return null;

ts/state/selectors/user.ts

@@ -4,6 +4,7 @@ import { LocalizerType } from '../../types/Util';
 
 import { StateType } from '../reducer';
 import { UserStateType } from '../ducks/user';
+import { HTMLDirection, isRtlBody } from '../../util/i18n';
 
 export const getUser = (state: StateType): UserStateType => state.user;
 
@@ -13,3 +14,8 @@ export const getOurNumber = createSelector(
 );
 
 export const getIntl = createSelector(getUser, (): LocalizerType => window.i18n);
+
+export const getHTMLDirection = createSelector(
+  getUser,
+  (): HTMLDirection => (isRtlBody() ? 'rtl' : 'ltr')
+);

ts/state/smart/SessionConversation.ts

@@ -17,7 +17,7 @@ import {
 } from '../selectors/selectedConversation';
 import { getStagedAttachmentsForCurrentConversation } from '../selectors/stagedAttachments';
 import { getTheme } from '../selectors/theme';
-import { getOurNumber } from '../selectors/user';
+import { getHTMLDirection, getOurNumber } from '../selectors/user';
 
 const mapStateToProps = (state: StateType) => {
   return {
@@ -33,6 +33,7 @@ const mapStateToProps = (state: StateType) => {
     stagedAttachments: getStagedAttachmentsForCurrentConversation(state),
     hasOngoingCallWithFocusedConvo: getHasOngoingCallWithFocusedConvo(state),
     isSelectedConvoInitialLoadingInProgress: getIsSelectedConvoInitialLoadingInProgress(state),
+    htmlDirection: getHTMLDirection(state),
   };
 };
 

ts/util/i18n.ts

@@ -73,7 +73,3 @@ export function isRtlBody(): boolean {
 
   return body?.classList.contains('rtl') || false;
 }
-
-export function getHTMLDirection(): HTMLDirection {
-  return isRtlBody() ? 'rtl' : 'ltr';
-}