Skip to content

Commit

Permalink
refactor: migrate EmojiViewModel to React (#ACC-251) (#13493)
Browse files Browse the repository at this point in the history
* refactor: migrate EmojiViewModel to React (#ACC-251)

* Remove any type

* Update tests

* CR Fixes

* Build fixes
  • Loading branch information
przemvs committed Aug 18, 2022
1 parent ae492bb commit 30b2d87
Show file tree
Hide file tree
Showing 10 changed files with 613 additions and 503 deletions.
38 changes: 11 additions & 27 deletions .betterer.results
Original file line number Diff line number Diff line change
Expand Up @@ -1109,7 +1109,7 @@ exports[`stricter compilation`] = {
[61, 4, 91, "Type \'number | null\' is not assignable to type \'number\'.\\n Type \'null\' is not assignable to type \'number\'.", "187276181"],
[72, 6, 41, "Type of computed property\'s value is \'(conversationEntity: Conversation, eventJson: ConversationMessageTimerUpdateEvent) => Promise<Conversation>\', which is not assignable to type \'(conversationEntity: Conversation) => void | Promise<void>\'.", "2358639438"],
[77, 4, 18, "Type \'ObservableArray<never>\' is not assignable to type \'ObservableArray<ContentMessage>\'.\\n Types of parameters \'value\' and \'value\' are incompatible.\\n Type \'ContentMessage[] | null | undefined\' is not assignable to type \'never[] | null | undefined\'.\\n Type \'ContentMessage[]\' is not assignable to type \'never[]\'.\\n Type \'ContentMessage\' is not assignable to type \'never\'.", "2087948420"],
[84, 29, 16, "No overload matches this call.\\n Overload 1 of 2, \'(id?: number | undefined): void\', gave the following error.\\n Argument of type \'number | null\' is not assignable to parameter of type \'number | undefined\'.\\n Overload 2 of 2, \'(intervalId: Timeout | undefined): void\', gave the following error.\\n Argument of type \'number | null\' is not assignable to parameter of type \'Timeout | undefined\'.\\n Type \'null\' is not assignable to type \'Timeout | undefined\'.", "1776967942"],
[84, 29, 16, "No overload matches this call.\\n Overload 1 of 2, \'(id?: number | undefined): void\', gave the following error.\\n Argument of type \'number | null\' is not assignable to parameter of type \'number | undefined\'.\\n Type \'null\' is not assignable to type \'number | undefined\'.\\n Overload 2 of 2, \'(intervalId: Timeout | undefined): void\', gave the following error.\\n Argument of type \'number | null\' is not assignable to parameter of type \'Timeout | undefined\'.\\n Type \'null\' is not assignable to type \'Timeout | undefined\'.", "1776967942"],
[129, 38, 25, "Argument of type \'string | undefined\' is not assignable to parameter of type \'string\'.\\n Type \'undefined\' is not assignable to type \'string\'.", "1762572671"],
[178, 34, 25, "Argument of type \'string | undefined\' is not assignable to parameter of type \'string\'.\\n Type \'undefined\' is not assignable to type \'string\'.", "1762572671"],
[197, 34, 25, "Argument of type \'string | undefined\' is not assignable to parameter of type \'string\'.\\n Type \'undefined\' is not assignable to type \'string\'.", "1762572671"],
Expand Down Expand Up @@ -2398,16 +2398,16 @@ exports[`stricter compilation`] = {
[87, 11, 17, "Property \'activeCallViewTab\' has no initializer and is not definitely assigned in the constructor.", "1323835793"],
[319, 4, 63, "Type \'Conversation | undefined\' is not assignable to type \'Conversation\'.\\n Type \'undefined\' is not assignable to type \'Conversation\'.", "62763745"]
],
"src/script/view_model/ContentViewModel.ts:2091681853": [
[250, 65, 6, "Type \'string | null\' is not assignable to type \'string\'.\\n Type \'null\' is not assignable to type \'string\'.", "1127975365"],
[287, 68, 13, "Argument of type \'Message | undefined\' is not assignable to parameter of type \'Message\'.\\n Type \'undefined\' is not assignable to type \'Message\'.", "2065728181"],
[293, 10, 6, "Type \'Conversation | null\' is not assignable to type \'PanelEntity\'.", "1164306878"],
[297, 37, 5, "Object is of type \'unknown\'.", "165548477"],
[307, 10, 9, "Argument of type \'undefined\' is not assignable to parameter of type \'string\'.", "2620553983"],
[390, 50, 9, "Argument of type \'undefined\' is not assignable to parameter of type \'Conversation\'.", "2620553983"],
[418, 12, 9, "Argument of type \'undefined\' is not assignable to parameter of type \'string\'.", "2620553983"],
[427, 20, 29, "Object is possibly \'undefined\'.", "1398699454"],
[430, 12, 9, "Argument of type \'undefined\' is not assignable to parameter of type \'string\'.", "2620553983"]
"src/script/view_model/ContentViewModel.ts:240260927": [
[247, 65, 6, "Type \'string | null\' is not assignable to type \'string\'.\\n Type \'null\' is not assignable to type \'string\'.", "1127975365"],
[284, 68, 13, "Argument of type \'Message | undefined\' is not assignable to parameter of type \'Message\'.\\n Type \'undefined\' is not assignable to type \'Message\'.", "2065728181"],
[290, 10, 6, "Type \'Conversation | null\' is not assignable to type \'PanelEntity\'.", "1164306878"],
[294, 37, 5, "Object is of type \'unknown\'.", "165548477"],
[304, 10, 9, "Argument of type \'undefined\' is not assignable to parameter of type \'string\'.", "2620553983"],
[387, 50, 9, "Argument of type \'undefined\' is not assignable to parameter of type \'Conversation\'.", "2620553983"],
[415, 12, 9, "Argument of type \'undefined\' is not assignable to parameter of type \'string\'.", "2620553983"],
[424, 20, 29, "Object is possibly \'undefined\'.", "1398699454"],
[427, 12, 9, "Argument of type \'undefined\' is not assignable to parameter of type \'string\'.", "2620553983"]
],
"src/script/view_model/ImageDetailViewViewModel.ts:1576396674": [
[58, 4, 11, "Type \'undefined\' is not assignable to type \'string\'.", "3652784592"],
Expand Down Expand Up @@ -2518,22 +2518,6 @@ exports[`stricter compilation`] = {
"src/script/view_model/content/ConnectRequestsViewModel.ts:1733765070": [
[54, 56, 43, "Argument of type \'HTMLElement | null\' is not assignable to parameter of type \'HTMLElement\'.\\n Type \'null\' is not assignable to type \'HTMLElement\'.", "4107348197"]
],
"src/script/view_model/content/EmojiInputViewModel.ts:3746352283": [
[50, 10, 13, "Property \'suppressKeyUp\' has no initializer and is not definitely assigned in the constructor.", "1816102502"],
[168, 8, 48, "Argument of type \'string[]\' is not assignable to parameter of type \'number[]\'.\\n Type \'string\' is not assignable to type \'number\'.", "4095030990"],
[320, 41, 9, "Argument of type \'number | null\' is not assignable to parameter of type \'number | undefined\'.\\n Type \'null\' is not assignable to type \'number | undefined\'.", "3834073445"],
[321, 37, 9, "Argument of type \'number | null\' is not assignable to parameter of type \'number | undefined\'.", "3834073445"],
[371, 60, 4, "Property \'icon\' does not exist on type \'never\'.", "2087846158"],
[373, 27, 5, "Argument of type \'{ icon: string; name: string; }\' is not assignable to parameter of type \'never\'.", "165439585"],
[378, 54, 4, "Property \'name\' does not exist on type \'never\'.", "2087876002"],
[379, 54, 4, "Property \'name\' does not exist on type \'never\'.", "2087876002"],
[382, 54, 4, "Property \'name\' does not exist on type \'never\'.", "2087876002"],
[382, 67, 4, "Property \'name\' does not exist on type \'never\'.", "2087876002"],
[388, 41, 4, "Property \'icon\' does not exist on type \'never\'.", "2087846158"],
[388, 80, 4, "Property \'name\' does not exist on type \'never\'.", "2087876002"],
[403, 31, 22, "Object is possibly \'undefined\'.", "4272920130"],
[432, 38, 9, "Argument of type \'number | null\' is not assignable to parameter of type \'number | undefined\'.", "3834073445"]
],
"src/script/view_model/content/HistoryExportViewModel.ts:1810820018": [
[89, 4, 16, "Type \'Observable<Blob | null>\' is not assignable to type \'Observable<Blob>\'.\\n The types returned by \'peek()\' are incompatible between these types.\\n Type \'Blob | null\' is not assignable to type \'Blob\'.\\n Type \'null\' is not assignable to type \'Blob\'.", "340013420"],
[128, 19, 5, "Argument of type \'unknown\' is not assignable to parameter of type \'Error\'.", "165548477"]
Expand Down
2 changes: 1 addition & 1 deletion src/page/template/content/conversation.htm
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@
assetRepository: $root.repositories.asset,
conversationEntity: $root.conversationState.activeConversation(),
conversationRepository: $root.repositories.conversation,
emojiInput: $root.emojiInput,
eventRepository: $root.repositories.event,
messageRepository: $root.repositories.message,
propertiesRepository: $root.repositories.properties,
searchRepository: $root.repositories.search,
storageRepository: $root.repositories.storage,
teamState: $root.teamState,
Expand Down
47 changes: 47 additions & 0 deletions src/script/components/Emoji/EmojiItem.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/*
* Wire
* Copyright (C) 2022 Wire Swiss GmbH
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see http://www.gnu.org/licenses/.
*
*/

import cx from 'classnames';
import {FC} from 'react';

import {EmojiListItem} from './useEmoji';

interface EmojiItemProps {
emoji: EmojiListItem;
onClick: () => void;
onMouseEnter: () => void;
selectedEmoji?: boolean;
}

const EmojiItem: FC<EmojiItemProps> = ({emoji, onClick, onMouseEnter, selectedEmoji = false}) => (
<button
type="button"
className={cx('button-reset-default emoji', {selected: selectedEmoji})}
css={{alignItems: 'flex-start', display: 'flex', flexDirection: 'column', width: '100%'}}
onMouseEnter={onMouseEnter}
onClick={onClick}
aria-label={emoji.name}
tabIndex={0}
>
<span className="symbol">{emoji.icon}</span>
<span className="name">{emoji.name}</span>
</button>
);

export default EmojiItem;
File renamed without changes.
76 changes: 76 additions & 0 deletions src/script/components/Emoji/inlineReplacements.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
/*
* Wire
* Copyright (C) 2022 Wire Swiss GmbH
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see http://www.gnu.org/licenses/.
*
*/

const inlineReplacements = [
{name: 'slight smile', shortcut: ':)'},
{name: 'slight smile', shortcut: ':-)'},
{name: 'smile', shortcut: ':D'},
{name: 'smile', shortcut: ':-D'},
{name: 'grinning', shortcut: ':-d'},
{name: 'sunglasses', shortcut: 'B-)'},
{name: 'sunglasses', shortcut: 'b-)'},
{name: 'sunglasses', shortcut: '8-)'},
{name: 'disappointed', shortcut: ':('},
{name: 'disappointed', shortcut: ':-('},
{name: 'wink', shortcut: ';)'},
{name: 'wink', shortcut: ';-)'},
{name: 'wink', shortcut: ';-]'},
{name: 'wink', shortcut: ';]'},
{name: 'confused', shortcut: ':/'},
{name: 'confused', shortcut: ':-/'},
{name: 'stuck out tongue', shortcut: ':P'},
{name: 'stuck out tongue', shortcut: ':-P'},
{name: 'stuck out tongue', shortcut: ':-p'},
{name: 'stuck out tongue winking eye', shortcut: ';P'},
{name: 'stuck out tongue winking eye', shortcut: ';-P'},
{name: 'stuck out tongue winking eye', shortcut: ';-p'},
{name: 'open mouth', shortcut: ':O'},
{name: 'open mouth', shortcut: ':-o'},
{name: 'innocent', shortcut: 'O:)'},
{name: 'innocent', shortcut: 'O:-)'},
{name: 'innocent', shortcut: 'o:)'},
{name: 'innocent', shortcut: 'o:-)'},
{name: 'smirk', shortcut: ';^)'},
{name: 'angry', shortcut: ':@'},
{name: 'rage', shortcut: '>:('},
{name: 'smiling imp', shortcut: '}:-)'},
{name: 'smiling imp', shortcut: '}:)'},
{name: 'smiling imp', shortcut: '3:-)'},
{name: 'smiling imp', shortcut: '3:)'},
{name: 'cry', shortcut: ":'-("},
{name: 'cry', shortcut: ":'("},
{name: 'cry', shortcut: ';('},
{name: 'joy', shortcut: ":'-)"},
{name: 'joy', shortcut: ":')"},
{name: 'kissing heart', shortcut: ':*'},
{name: 'kissing heart', shortcut: ':^*'},
{name: 'kissing heart', shortcut: ':-*'},
{name: 'neutral face', shortcut: ':-|'},
{name: 'neutral face', shortcut: ':|'},
{name: 'flushed', shortcut: ':$'},
{name: 'no mouth', shortcut: ':-X'},
{name: 'no mouth', shortcut: ':X'},
{name: 'no mouth', shortcut: ':-#'},
{name: 'no mouth', shortcut: ':#'},
{name: 'raised hands', shortcut: '\\o/'},
{name: 'heart', shortcut: '<3'},
{name: 'broken heart', shortcut: '</3'},
];

export default inlineReplacements;
Loading

0 comments on commit 30b2d87

Please sign in to comment.