[WIP] Refactor TS React #1102

vincentbavitz · 2020-04-24T15:47:21Z

Improvements

This PR was requested primarily to implement preliminary modulations in into TypeScript and Redux.
Included also in this PR are the conversation screen UI components rewritten in React that I build in February. The conversation screen now exists in as the parent component ConversationView.tsx which, with Redux.

Efficiency

Restructuring the conversation-view to use React with Redux speeds up message loading considerably in app launch, scrolling and switching between conversations.

Currently, Session stores each opened conversation in its entirety in the DOM. This doesn't scale nicely if the user opens 20 conversations opened from launching, and causes extremely laggy behaviour. Keeping the global Redux store allows us to switch between conversations quickly without storing them in the DOM, and while maintaining state such as scroll position, drafts in composition box, et cetera.

Simplification of Events

We want to be able to trigger certain conversation events from any UI component. For example, when a new LNS mapping is found, we want all references to this name to be instantly and seamlessly updated, no matter which component it's located in.

Currently, backbone collections serve as stores and their corresponding event triggers act in an equivalent manner to reducers. Binding these triggers to our store allows for instantaneous app-wide updates onChange of any collection, without having to send bound methods through complex nested component props.

This also creates a clearer distinction from Signal code and Session code and keeps TypeScript typings strict by removing the intermediary window object in event trigger calls.

For example, this

window.Whisper.events.trigger('showConversation', sessionID);

becomes this

this.props.conversations[id].show();

through this

export function reducer(
  state: ConversationsStateType,
  action: ConversationActionType
): ConversationsStateType { }

UI / UX Improvements

Keyboard navigation

Keyboard navigation cheat-sheet to be added to Session docs.

Scroll Up: PageUp, Up Arrow
Scroll Down: PageDown, Down Arrow

Composition Container
- Send: enter
- Newline: shift + enter

Microphone Events

Mikunj

Also need to run linting

Mikunj · 2020-04-26T22:50:36Z

js/background.js

@@ -1038,8 +1038,9 @@
    };

    window.toggleMediaPermissions = () => {
-      const mediaPermissions = window.getMediaPermissions();
-      window.setMediaPermissions(!mediaPermissions);
+      // eslint-disable-next-line more/no-then


Don't think this applies

js/conversation_controller.js

Mikunj · 2020-04-26T22:54:11Z

js/conversation_controller.js

+      MessageCollection: Whisper.MessageCollection,
+    });
+
+    messages = messageSet.models.map(conv => conv.attributes);


Suggested change

messages = messageSet.models.map(conv => conv.attributes);

messages = messageSet.models.map(msg => msg.attributes);

Mikunj · 2020-04-26T22:58:46Z

js/conversation_controller.js

+      MessageCollection: Whisper.MessageCollection,
+    });
+
+    const message = messageSet.models.map(conv => conv.attributes)[0];


Suggested change

const message = messageSet.models.map(conv => conv.attributes)[0];

const message = messageSet.models.map(msg => msg.attributes)[0];

Mikunj · 2020-04-26T22:59:14Z

js/models/conversations.js

@@ -2336,6 +2338,8 @@
        })
      );

+      console.log(`[vince][unread] Read:`, read);


Forgot to remove this?

Mikunj · 2020-04-26T23:41:55Z

ts/components/session/conversation/SessionConversation.tsx

+          let item;
+          // firstMessageOfSeries tells us to render the avatar only for the first message
+          // in a series of messages from the same user
+          item = messageProps       ? this.renderMessage(messageProps, message.firstMessageOfSeries) : item;


We should use if-elseif here

Mikunj · 2020-04-26T23:44:05Z

ts/components/session/conversation/SessionConversation.tsx

+
+    return (
+      <ConversationHeader
+        id={headerProps.id}


this can all be replaced by

<ConversationHeader {...headerProps} />

Mikunj · 2020-04-26T23:47:27Z

ts/components/session/conversation/SessionConversation.tsx

+  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  public selectMessage(messageId: string) {
+    const selectedMessages = this.state.selectedMessages.includes(messageId)
+      // Add to array if not selected. Else remove.


Comment should be // Remove from array if selected else add it so it matches the code

Mikunj · 2020-04-26T23:49:05Z

ts/components/session/conversation/SessionRecording.tsx

+    super(props);
+
+    // Mouse interaction
+    this.handleHoverActions = this.handleHoverActions.bind(this);


Same here, you can make the function an arrow function to remove binds

Mikunj · 2020-04-26T23:53:19Z

ts/state/smart/SessionConversation.tsx

+
+
+  return {
+    conversations: state.conversations,


Should we pass the current selected conversation here too?

…sktop into refactor-ts-react

vincentbavitz added 30 commits February 17, 2020 11:02

Roation fix of groupsettings chevron

7a7104d

Initiating new conversationVew

481315c

reactification conversationview bottombar initial

2c5e2df

Upgrade typescript, finding messaages

ea4dc05

Loading messages by id

57b20d2

Working conversation openning

bf5badd

SessionConversation namespace remapping initialisation

e34ed37

Started boilerplate getSessionConversationInfo

a90cae4

Started boilerplate getSessionConversationInfo

c365481

Partially rendered message success and root store manipulation

bb02799

Got it working

cdd1903

Redux prep for refactor

3fec09a

Message loading with redux

1689bc6

Initialised message array in redux store

af29113

Scrolling

d662fcf

Message conditional rendering

752ee8a

Conditional rendering of avatars

03df489

More scroll management

82f1f2d

Scrolling stuff

8a609ef

Onload scroll to unread

a590553

Header props

5d11ef1

File input prep

3055e23

Microphone

ab414ca

Start message selection reactification

548db71

Message selection

3030b02

Keyboard navigation

56ae705

Waveform dividing across fullwidth

74142fa

Broken numbars

92fa697

Waveform recording complete

8d8abf1

Microphone timer

2dc5885

vincentbavitz added 11 commits March 25, 2020 10:01

conv tinkering

d8a12aa

upgrade typescript

6cda163

Cleanup wrt tslint

214be7a

Timer notifications rework

f2ce52a

Timer notifications complete

43772b8

Disabled archiving

d09dc92

Session resetting

494e122

Notification styling

48ce580

revivify

cf05d4f

Merge new fonts

ffe30d4

include new alt-constants

df12fff

vincentbavitz requested review from msgmaxim and Mikunj April 24, 2020 15:48

Mikunj reviewed Apr 26, 2020

View reviewed changes

Mikunj marked this pull request as draft April 27, 2020 00:05

vincentbavitz added 7 commits April 27, 2020 12:41

stylesheets merge

55504f0

Merge branch 'clearnet' of https://github.com/loki-project/session-de…

83528f4

…sktop into refactor-ts-react

revive-ts-refactor

6078be1

SessionRecording-cleanup

9ec99da

Merge branch 'clearnet' of https://github.com/loki-project/session-de…

54b7d9a

…sktop into refactor-ts-react

css-loader

c26e20d

audio component ui

3591001

vincentbavitz force-pushed the refactor-ts-react branch from 993f404 to 3591001 Compare July 16, 2020 08:22

vincentbavitz added 6 commits July 17, 2020 11:05

Polish audio ui

e324d5c

merged-w-clearnet

35218ec

compositionbox

5b69f19

reorganise-dropin

5ed6a9d

Merge branch 'clearnet' of https://github.com/loki-project/session-de…

7072007

…sktop into refactor-ts-react

dropZone inti

79e821e

vincentbavitz closed this Jul 17, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Refactor TS React #1102

[WIP] Refactor TS React #1102

vincentbavitz commented Apr 24, 2020

Mikunj left a comment

Mikunj Apr 26, 2020

Mikunj Apr 26, 2020

Mikunj Apr 26, 2020

Mikunj Apr 26, 2020

Mikunj Apr 26, 2020

Mikunj Apr 26, 2020

Mikunj Apr 26, 2020

Mikunj Apr 26, 2020

Mikunj Apr 26, 2020

	messages = messageSet.models.map(conv => conv.attributes);
	messages = messageSet.models.map(msg => msg.attributes);

	const message = messageSet.models.map(conv => conv.attributes)[0];
	const message = messageSet.models.map(msg => msg.attributes)[0];

[WIP] Refactor TS React #1102

[WIP] Refactor TS React #1102

Conversation

vincentbavitz commented Apr 24, 2020

Improvements

Efficiency

Simplification of Events

UI / UX Improvements

Keyboard navigation

Composition Container

Microphone Events

Mikunj left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment