Take into account the current user for message displaying (#61)

* Take into account the current user for message displaying

* Review comment

* Linter

src/annotation/message.tsx

@@ -2,21 +2,32 @@ import { User } from '@jupyterlab/services';
 import * as React from 'react';
 
 interface IProps {
+  /*
+   * The message content.
+   **/
   message: string;
-  index: number;
+
+  /*
+   * Whether the message was originated from the current user.
+   **/
+  self: boolean;
+
+  /*
+   * The user who originated the message.
+   **/
   user?: User.IIdentity;
 }
 
 export const Message = (props: IProps): JSX.Element => {
-  const { index, message, user } = props;
+  const { self, message, user } = props;
   const color = user?.color ?? 'black';
   const author = user?.display_name ?? '';
   const initials = user?.initials ?? '';
   return (
     <div
       className="jcad-Annotation-Message"
       style={{
-        flexFlow: index % 2 === 0 ? 'row' : 'row-reverse'
+        flexFlow: self ? 'row' : 'row-reverse'
       }}
     >
       <div

src/annotation/model.ts

@@ -13,6 +13,7 @@ export interface IAnnotation {
   position: [number, number, number];
   contents: IAnnotationContent[];
 }
+
 export class AnnotationModel {
   constructor(options: AnnotationModel.IOptions) {
     this._getCoordinate = options.getCoordinate;
@@ -25,9 +26,14 @@ export class AnnotationModel {
     return this._updateSignal;
   }
 
+  get user(): User.IIdentity | undefined {
+    return this._user;
+  }
+
   update(): void {
     this._updateSignal.emit(null);
   }
+
   getAnnotation(id: string): IAnnotation | undefined {
     const rawData = this._sharedModel.metadata.get(id);
     if (rawData) {

src/annotation/view.tsx

@@ -45,12 +45,12 @@ export const Annotation = (props: IProps): JSX.Element => {
           }}
         />
         <div style={{ paddingBottom: 10, maxHeight: 400, overflow: 'auto' }}>
-          {contents.map((content, index) => {
+          {contents.map(content => {
             return (
               <Message
                 user={content.user}
                 message={content.value}
-                index={index}
+                self={model.user?.username === content.user?.username}
               />
             );
           })}