oxen-io
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

lint code

This commit is contained in:
Audric Ackermann 2020-01-03 11:49:42 +11:00
parent 6209d7d2e2
commit 9cc6807b22
7 changed files with 307 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
stylesheets/_session_theme_dark_left_pane.scss
View File

@ -287,7 +287,7 @@ $session-compose-margin: 20px;
.module-conversation-list-item {
&--has-friend-request {
border: 1px solid $session-shade-8 !important;
.module-conversation__user__profile-number,
.module-conversation__user__profile-name {
font-size: 13px !important;
@ -302,7 +302,7 @@ $session-compose-margin: 20px;
padding: 6px;
height: auto;
margin: 0px;
line-height: 14px;
line-height: 14px;
}
}
}
@ -320,8 +320,6 @@ $session-compose-margin: 20px;
line-height: 50px;
}
}
}
.panel-text-divider {

43
ts/components/ConversationListItem.tsx
View File

@ -80,8 +80,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
isPendingFriendRequest,
} = this.props;
let borderColor = undefined;
let borderColor;
if (!isPendingFriendRequest) {
borderColor = isOnline ? Colors.ONLINE : Colors.OFFLINE;
}
@ -125,7 +124,14 @@ export class ConversationListItem extends React.PureComponent<Props> {
}
public renderHeader() {
const { unreadCount, i18n, isMe, lastUpdated, isFriendItem, hasReceivedFriendRequest } = this.props;
const {
unreadCount,
i18n,
isMe,
lastUpdated,
isFriendItem,
hasReceivedFriendRequest,
} = this.props;
return (
<div className="module-conversation-list-item__header">
@ -139,7 +145,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
>
{isMe ? i18n('noteToSelf') : this.renderUser()}
</div>
{hasReceivedFriendRequest || this.renderUnread()}
{hasReceivedFriendRequest || this.renderUnread()}
{!isFriendItem && (
<div
className={classNames(
@ -149,13 +155,14 @@ export class ConversationListItem extends React.PureComponent<Props> {
: null
)}
>
{!hasReceivedFriendRequest && (<Timestamp
timestamp={lastUpdated}
extended={false}
module="module-conversation-list-item__header__timestamp"
i18n={i18n}
/>)
}
{!hasReceivedFriendRequest && (
<Timestamp
timestamp={lastUpdated}
extended={false}
module="module-conversation-list-item__header__timestamp"
i18n={i18n}
/>
)}
</div>
)}
</div>
@ -283,12 +290,19 @@ export class ConversationListItem extends React.PureComponent<Props> {
}
public renderFriendRequestButtons() {
const { acceptFriendRequest, declineFriendRequest } = this.props;
return (
<div className="module-conversation-list-item__buttons">
<SessionButton text={window.i18n('decline')} buttonColor={SessionButtonColor.None} onClick={declineFriendRequest}/>
<SessionButton text={window.i18n('accept')} onClick={acceptFriendRequest}/>
<SessionButton
text={window.i18n('decline')}
buttonColor={SessionButtonColor.None}
onClick={declineFriendRequest}
/>
<SessionButton
text={window.i18n('accept')}
onClick={acceptFriendRequest}
/>
</div>
);
}
@ -306,7 +320,6 @@ export class ConversationListItem extends React.PureComponent<Props> {
mentionedUs,
} = this.props;
const triggerId = `${phoneNumber}-ctxmenu-${Date.now()}`;
return (

172
ts/components/LeftPane.tsx
View File

@ -42,7 +42,7 @@ interface Props {
searchResults?: SearchResultsProps;
searchTerm: string;
isSecondaryDevice: boolean;
openConversationInternal: (id: string, messageId?: string) => void;
updateSearchTerm: (searchTerm: string) => void;
search: (query: string, options: SearchOptions) => void;
@ -59,92 +59,8 @@ export class LeftPane extends React.Component<Props, State> {
this.handleSectionSelected = this.handleSectionSelected.bind(this);
}
public handleSectionSelected(section: SectionType) {
this.setState({ selectedSection: section });
}
public render(): JSX.Element {
return (
<div className="module-left-pane-session">
<ActionsPanel
selectedSection={this.state.selectedSection}
onSectionSelected={this.handleSectionSelected}
conversations={this.props.conversations}
/>
<div className="module-left-pane">{this.renderSection()}</div>
</div>
);
}
private renderSection(): JSX.Element | undefined {
switch (this.state.selectedSection) {
case SectionType.Message:
return this.renderMessageSection();
case SectionType.Contact:
return this.renderContactSection();
default:
return undefined;
}
}
private renderMessageSection() {
const {
openConversationInternal,
conversations,
searchResults,
searchTerm,
isSecondaryDevice,
updateSearchTerm,
search,
clearSearch,
} = this.props;
return (
<LeftPaneMessageSection
openConversationInternal={openConversationInternal}
conversations={conversations}
searchResults={searchResults}
searchTerm={searchTerm}
isSecondaryDevice={isSecondaryDevice}
updateSearchTerm={updateSearchTerm}
search={search}
clearSearch={clearSearch}
/>
);
}
private renderContactSection() {
const {
openConversationInternal,
friends,
conversations,
searchResults,
searchTerm,
isSecondaryDevice,
updateSearchTerm,
search,
clearSearch,
} = this.props;
return (
<LeftPaneContactSection
openConversationInternal={openConversationInternal}
conversations={conversations}
friends={friends}
searchResults={searchResults}
searchTerm={searchTerm}
isSecondaryDevice={isSecondaryDevice}
updateSearchTerm={updateSearchTerm}
search={search}
clearSearch={clearSearch}
/>
);
}
// this static function is set here to be used by all subsections (message, contacts,...) to render their headers
static renderHeader(
public static RENDER_HEADER(
labels: Array<string>,
onTabSelected?: any,
buttonLabel?: string,
@ -163,7 +79,7 @@ export class LeftPane extends React.Component<Props, State> {
);
}
static renderClosableOverlay(
public static RENDER_CLOSABLE_OVERLAY(
isAddContactView: boolean,
onChangeSessionID: any,
onCloseClick: any,
@ -237,4 +153,86 @@ export class LeftPane extends React.Component<Props, State> {
</div>
);
}
public handleSectionSelected(section: SectionType) {
this.setState({ selectedSection: section });
}
public render(): JSX.Element {
return (
<div className="module-left-pane-session">
<ActionsPanel
selectedSection={this.state.selectedSection}
onSectionSelected={this.handleSectionSelected}
conversations={this.props.conversations}
/>
<div className="module-left-pane">{this.renderSection()}</div>
</div>
);
}
private renderSection(): JSX.Element | undefined {
switch (this.state.selectedSection) {
case SectionType.Message:
return this.renderMessageSection();
case SectionType.Contact:
return this.renderContactSection();
default:
return undefined;
}
}
private renderMessageSection() {
const {
openConversationInternal,
conversations,
searchResults,
searchTerm,
isSecondaryDevice,
updateSearchTerm,
search,
clearSearch,
} = this.props;
return (
<LeftPaneMessageSection
openConversationInternal={openConversationInternal}
conversations={conversations}
searchResults={searchResults}
searchTerm={searchTerm}
isSecondaryDevice={isSecondaryDevice}
updateSearchTerm={updateSearchTerm}
search={search}
clearSearch={clearSearch}
/>
);
}
private renderContactSection() {
const {
openConversationInternal,
friends,
conversations,
searchResults,
searchTerm,
isSecondaryDevice,
updateSearchTerm,
search,
clearSearch,
} = this.props;
return (
<LeftPaneContactSection
openConversationInternal={openConversationInternal}
conversations={conversations}
friends={friends}
searchResults={searchResults}
searchTerm={searchTerm}
isSecondaryDevice={isSecondaryDevice}
updateSearchTerm={updateSearchTerm}
search={search}
clearSearch={clearSearch}
/>
);
}
}

67
ts/components/session/ActionsPanel.tsx
View File

@ -121,6 +121,27 @@ export class ActionsPanel extends React.Component<Props, State> {
avatarPath: '',
};
}
public static GET_FRIEND_REQUESTS_COUNT(
conversations: Array<ConversationListItemPropsType> | undefined
): number {
let friendRequestCount = 0;
if (conversations !== undefined) {
// We assume a friend request already read is still a friend valid request
conversations.some(conversation => {
// Ignore friend request with lastmessage status as sent as this is a friend request we made ourself
friendRequestCount += conversation.hasReceivedFriendRequest ? 1 : 0;
if (friendRequestCount > 9) {
return true;
}
return false;
});
}
return friendRequestCount;
}
public componentDidMount() {
// tslint:disable-next-line: no-backbone-get-set-outside-model
const ourNumber = window.storage.get('primaryDevicePubKey');
@ -137,42 +158,51 @@ export class ActionsPanel extends React.Component<Props, State> {
public render(): JSX.Element {
const { selectedSection, conversations } = this.props;
const friendRequestCount = ActionsPanel.getFriendRequestsCount(conversations);
const friendRequestCount = ActionsPanel.GET_FRIEND_REQUESTS_COUNT(
conversations
);
const unreadMessageCount = this.getUnreadMessageCount();
const isProfilePageSelected = selectedSection === SectionType.Profile;
const isMessagePageSelected = selectedSection === SectionType.Message;
const isContactPageSelected = selectedSection === SectionType.Contact;
const isGlobePageSelected = selectedSection === SectionType.Globe;
const isSettingsPageSelected = selectedSection === SectionType.Settings;
const isMoonPageSelected = selectedSection === SectionType.Moon;
return (
<div className="module-left-pane__sections-container">
<Section
type={SectionType.Profile}
avatarPath={this.state.avatarPath}
isSelected={selectedSection === SectionType.Profile}
isSelected={isProfilePageSelected}
onSelect={this.handleSectionSelect}
/>
<Section
type={SectionType.Message}
isSelected={selectedSection === SectionType.Message}
isSelected={isMessagePageSelected}
onSelect={this.handleSectionSelect}
notificationCount={unreadMessageCount}
/>
<Section
type={SectionType.Contact}
isSelected={selectedSection === SectionType.Contact}
isSelected={isContactPageSelected}
onSelect={this.handleSectionSelect}
notificationCount={friendRequestCount}
/>
<Section
type={SectionType.Globe}
isSelected={selectedSection === SectionType.Globe}
isSelected={isGlobePageSelected}
onSelect={this.handleSectionSelect}
/>
<Section
type={SectionType.Settings}
isSelected={selectedSection === SectionType.Settings}
isSelected={isSettingsPageSelected}
onSelect={this.handleSectionSelect}
/>
<Section
type={SectionType.Moon}
isSelected={selectedSection === SectionType.Moon}
isSelected={isMoonPageSelected}
onSelect={this.handleSectionSelect}
/>
</div>
@ -183,36 +213,21 @@ export class ActionsPanel extends React.Component<Props, State> {
const { conversations } = this.props;
let unreadCount = 0;
if (conversations !== undefined) {
conversations.some(function (conversation) {
conversations.some(conversation => {
if (conversation.isPendingFriendRequest) {
return false;
}
unreadCount += conversation.unreadCount;
if (unreadCount > 9) {
return true;
}
return false;
});
}
return unreadCount;
}
static getFriendRequestsCount(conversations: Array<ConversationListItemPropsType> | undefined): number {
let friendRequestCount = 0;
if (conversations !== undefined) {
// We assume a friend request already read is still a friend valid request
conversations.some(function (conversation) {
// Ignore friend request with lastmessage status as sent as this is a friend request we made ourself
friendRequestCount += conversation.hasReceivedFriendRequest ? 1 : 0;
if (friendRequestCount > 9) {
return true;
}
return false;
});
}
return friendRequestCount;
return unreadCount;
}
private readonly handleSectionSelect = (section: SectionType): void => {

272
ts/components/session/LeftPaneContactSection.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import {
PropsData as ConversationListItemPropsType,
ConversationListItem,
PropsData as ConversationListItemPropsType
} from '../ConversationListItem';
import { PropsData as SearchResultsProps } from '../SearchResults';
import { debounce } from 'lodash';
@ -11,8 +11,8 @@ import { SearchOptions } from '../../types/Search';
import { LeftPane, RowRendererParamsType } from '../LeftPane';
import {
SessionButton,
SessionButtonType,
SessionButtonColor,
SessionButtonType,
} from './SessionButton';
import { AutoSizer, List } from 'react-virtualized';
import { validateNumber } from '../../types/PhoneNumber';
@ -65,9 +65,11 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
public renderHeader(): JSX.Element | undefined {
const labels = [window.i18n('contactsHeader'), window.i18n('lists')];
const friendRequestCount = ActionsPanel.getFriendRequestsCount(this.props.conversations);
const friendRequestCount = ActionsPanel.GET_FRIEND_REQUESTS_COUNT(
this.props.conversations
);
return LeftPane.renderHeader(
return LeftPane.RENDER_HEADER(
labels,
this.handleTabSelected,
undefined,
@ -81,7 +83,7 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
<div className="left-pane-contact-section">
{this.renderHeader()}
{this.state.showAddContactView
? LeftPane.renderClosableOverlay(
? LeftPane.RENDER_CLOSABLE_OVERLAY(
true,
this.handleRecipientSessionIDChanged,
this.handleToggleOverlay,
@ -93,155 +95,40 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
);
}
private handleToggleOverlay() {
this.setState((prevState: { showAddContactView: any }) => ({
showAddContactView: !prevState.showAddContactView,
}));
}
private handleOnAddContact() {
const sessionID = this.state.addContactRecipientID;
const error = validateNumber(sessionID, window.i18n);
if (error) {
window.pushToast({
title: error,
type: 'error',
id: 'addContact',
});
} else {
window.Whisper.events.trigger('showConversation', sessionID);
}
}
private handleRecipientSessionIDChanged(event: any) {
if (event.target.innerHTML) {
// remove br elements or div elements
const cleanText = event.target.innerHTML.replace(/<\/?[^>]+(>|$)/g, '');
this.setState({ addContactRecipientID: cleanText });
}
}
private renderContacts() {
return (
<div className="left-pane-contact-content">
{this.renderList()}
{this.renderBottomButtons()}
</div>
);
}
private renderBottomButtons(): JSX.Element {
const { selectedTab } = this.state;
const edit = window.i18n('edit');
const addContact = window.i18n('addContact');
const createGroup = window.i18n('createGroup');
return (
<div className="left-pane-contact-bottom-buttons">
<SessionButton
text={edit}
buttonType={SessionButtonType.SquareOutline}
buttonColor={SessionButtonColor.White}
/>
{selectedTab === 0 ? (
<SessionButton
text={addContact}
buttonType={SessionButtonType.SquareOutline}
buttonColor={SessionButtonColor.Green}
onClick={this.handleToggleOverlay}
/>
) : (
<SessionButton
text={createGroup}
buttonType={SessionButtonType.SquareOutline}
buttonColor={SessionButtonColor.Green}
onClick={this.handleToggleOverlay}
/>
)}
</div>
);
}
public getCurrentFriends():
| Array<ConversationType> {
public getCurrentFriends(): Array<ConversationType> {
const { friends } = this.props;
let friendList = friends;
if (friendList !== undefined) {
friendList = friendList.filter(
friend =>
friend.type ==='direct' && !friend.isMe
friend => friend.type === 'direct' && !friend.isMe
);
}
return friendList;
}
// true: received only, false: sent only
private getFriendRequests(received:boolean): Array<ConversationListItemPropsType> {
const { conversations } = this.props;
let conversationsList = conversations;
if (conversationsList !== undefined) {
if (received) {
conversationsList = conversationsList.filter(
conversation => (conversation.hasReceivedFriendRequest));
} else {
conversationsList = conversationsList.filter(
conversation => (conversation.hasSentFriendRequest));
}
}
return conversationsList;
}
private renderList() {
const receivedFriendsRequest = this.getFriendRequests(true);
const sentFriendsRequest = this.getFriendRequests(false);
const friends = this.getCurrentFriends();
const combined = [...receivedFriendsRequest, ...sentFriendsRequest, ...friends];
const length = combined.length;
const list = (
<div className="module-left-pane__list" key={0}>
<AutoSizer>
{({ height, width }) => (
<List
className="module-left-pane__virtual-list"
height={height}
rowCount={length}
rowHeight={64}
rowRenderer={this.renderRow}
width={width}
autoHeight={true}
/>
)}
</AutoSizer>
</div>
);
return [list];
}
public renderRow = ({
index,
key,
style,
}: RowRendererParamsType): JSX.Element | undefined => {
const receivedFriendsRequest = this.getFriendRequests(true);
const sentFriendsRequest = this.getFriendRequests(false);
const friends = this.getCurrentFriends();
const combined = [...receivedFriendsRequest, ...sentFriendsRequest, ...friends];
const combined = [
...receivedFriendsRequest,
...sentFriendsRequest,
...friends,
];
const item = combined[index];
let onClick = undefined;
let onClick;
if (index >= receivedFriendsRequest.length) {
onClick = this.props.openConversationInternal;
}
return (
<ConversationListItem
key={key}
@ -300,4 +187,131 @@ export class LeftPaneContactSection extends React.Component<Props, any> {
});
}
}
private handleToggleOverlay() {
this.setState((prevState: { showAddContactView: any }) => ({
showAddContactView: !prevState.showAddContactView,
}));
}
private handleOnAddContact() {
const sessionID = this.state.addContactRecipientID;
const error = validateNumber(sessionID, window.i18n);
if (error) {
window.pushToast({
title: error,
type: 'error',
id: 'addContact',
});
} else {
window.Whisper.events.trigger('showConversation', sessionID);
}
}
private handleRecipientSessionIDChanged(event: any) {
if (event.target.innerHTML) {
// remove br elements or div elements
const cleanText = event.target.innerHTML.replace(/<\/?[^>]+(>|$)/g, '');
this.setState({ addContactRecipientID: cleanText });
}
}
private renderContacts() {
return (
<div className="left-pane-contact-content">
{this.renderList()}
{this.renderBottomButtons()}
</div>
);
}
private renderBottomButtons(): JSX.Element {
const { selectedTab } = this.state;
const edit = window.i18n('edit');
const addContact = window.i18n('addContact');
const createGroup = window.i18n('createGroup');
return (
<div className="left-pane-contact-bottom-buttons">
<SessionButton
text={edit}
buttonType={SessionButtonType.SquareOutline}
buttonColor={SessionButtonColor.White}
/>
{selectedTab === 0 ? (
<SessionButton
text={addContact}
buttonType={SessionButtonType.SquareOutline}
buttonColor={SessionButtonColor.Green}
onClick={this.handleToggleOverlay}
/>
) : (
<SessionButton
text={createGroup}
buttonType={SessionButtonType.SquareOutline}
buttonColor={SessionButtonColor.Green}
onClick={this.handleToggleOverlay}
/>
)}
</div>
);
}
// true: received only, false: sent only
private getFriendRequests(
received: boolean
): Array<ConversationListItemPropsType> {
const { conversations } = this.props;
let conversationsList = conversations;
if (conversationsList !== undefined) {
if (received) {
conversationsList = conversationsList.filter(
conversation => conversation.hasReceivedFriendRequest
);
} else {
conversationsList = conversationsList.filter(
conversation => conversation.hasSentFriendRequest
);
}
}
return conversationsList;
}
private renderList() {
const receivedFriendsRequest = this.getFriendRequests(true);
const sentFriendsRequest = this.getFriendRequests(false);
const friends = this.getCurrentFriends();
const combined = [
...receivedFriendsRequest,
...sentFriendsRequest,
...friends,
];
const length = combined.length;
const list = (
<div className="module-left-pane__list" key={0}>
<AutoSizer>
{({ height, width }) => (
<List
className="module-left-pane__virtual-list"
height={height}
rowCount={length}
rowHeight={64}
rowRenderer={this.renderRow}
width={width}
autoHeight={true}
/>
)}
</AutoSizer>
</div>
);
return [list];
}
}

11
ts/components/session/LeftPaneMessageSection.tsx
View File

@ -14,7 +14,7 @@ import { debounce } from 'lodash';
import { cleanSearchTerm } from '../../util/cleanSearchTerm';
import { SearchOptions } from '../../types/Search';
import { validateNumber } from '../../types/PhoneNumber';
import { RowRendererParamsType, LeftPane } from '../LeftPane';
import { LeftPane, RowRendererParamsType } from '../LeftPane';
export interface Props {
searchTerm: string;
@ -60,8 +60,8 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
let conversationList = conversations;
if (conversationList !== undefined) {
conversationList = conversationList.filter(
conversation => !conversation.isSecondary
&& !conversation.isPendingFriendRequest
conversation =>
!conversation.isSecondary && !conversation.isPendingFriendRequest
);
}
@ -145,7 +145,8 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
public renderHeader(): JSX.Element {
const labels = [window.i18n('messagesHeader')];
return LeftPane.renderHeader(
return LeftPane.RENDER_HEADER(
labels,
null,
window.i18n('compose'),
@ -158,7 +159,7 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
<div>
{this.renderHeader()}
{this.state.showComposeView
? LeftPane.renderClosableOverlay(
? LeftPane.RENDER_CLOSABLE_OVERLAY(
false,
this.handleOnPasteSessionID,
this.handleComposeClick,

6
ts/components/session/LeftPaneSectionHeader.tsx
View File

@ -84,16 +84,14 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
<SessionButton
text={window.i18n('compose')}
onClick={buttonClicked}
key='compose'
key="compose"
/>
);
} else if (notificationCount && notificationCount > 0) {
const shortenedNotificationCount =
notificationCount > 9 ? 9 : notificationCount;
children.push(
<div
className="contact-notification-count-bubble"
>
<div className="contact-notification-count-bubble">
{shortenedNotificationCount}
</div>
);