From 7f635c68c519e0df9ba20e34c8f278ea33b20720 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Mon, 21 Jun 2021 14:50:21 +0100 Subject: [PATCH 1/4] Migrate SearchBar to TypeScript --- src/components/structures/RoomView.tsx | 9 +-- .../rooms/{SearchBar.js => SearchBar.tsx} | 69 ++++++++++++++----- 2 files changed, 55 insertions(+), 23 deletions(-) rename src/components/views/rooms/{SearchBar.js => SearchBar.tsx} (55%) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 1e3adcb518..c1dcb81e08 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -60,7 +60,7 @@ import ScrollPanel from "./ScrollPanel"; import TimelinePanel from "./TimelinePanel"; import ErrorBoundary from "../views/elements/ErrorBoundary"; import RoomPreviewBar from "../views/rooms/RoomPreviewBar"; -import SearchBar from "../views/rooms/SearchBar"; +import SearchBar, { SearchScope } from "../views/rooms/SearchBar"; import RoomUpgradeWarningBar from "../views/rooms/RoomUpgradeWarningBar"; import AuxPanel from "../views/rooms/AuxPanel"; import RoomHeader from "../views/rooms/RoomHeader"; @@ -82,6 +82,7 @@ import SpaceRoomView from "./SpaceRoomView"; import { IOpts } from "../../createRoom"; import { replaceableComponent } from "../../utils/replaceableComponent"; import UIStore from "../../stores/UIStore"; +import Search from '../views/emojipicker/Search'; const DEBUG = false; let debuglog = function(msg: string) {}; @@ -139,7 +140,7 @@ export interface IState { draggingFile: boolean; searching: boolean; searchTerm?: string; - searchScope?: "All" | "Room"; + searchScope?: SearchScope; searchResults?: XOR<{}, { count: number; highlights: string[]; @@ -1267,7 +1268,7 @@ export default class RoomView extends React.Component { }); } - private onSearch = (term: string, scope) => { + private onSearch = (term: string, scope: SearchScope) => { this.setState({ searchTerm: term, searchScope: scope, @@ -1288,7 +1289,7 @@ export default class RoomView extends React.Component { this.searchId = new Date().getTime(); let roomId; - if (scope === "Room") roomId = this.state.room.roomId; + if (scope === SearchScope.Room) roomId = this.state.room.roomId; debuglog("sending search request"); const searchPromise = eventSearch(term, roomId); diff --git a/src/components/views/rooms/SearchBar.js b/src/components/views/rooms/SearchBar.tsx similarity index 55% rename from src/components/views/rooms/SearchBar.js rename to src/components/views/rooms/SearchBar.tsx index 029516c932..de99305d81 100644 --- a/src/components/views/rooms/SearchBar.js +++ b/src/components/views/rooms/SearchBar.tsx @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, {createRef} from 'react'; +import React, {createRef, RefObject} from 'react'; import AccessibleButton from "../elements/AccessibleButton"; import classNames from "classnames"; import { _t } from '../../../languageHandler'; @@ -23,27 +23,42 @@ import {Key} from "../../../Keyboard"; import DesktopBuildsNotice, {WarningKind} from "../elements/DesktopBuildsNotice"; import {replaceableComponent} from "../../../utils/replaceableComponent"; +interface IProps { + onCancelClick: () => void; + onSearch: (query: string, scope: string) => void; + searchInProgress?: boolean; + isRoomEncrypted?: boolean; +} + +interface IState { + scope: SearchScope; +} + +export enum SearchScope { + Room = "Room", + All = "All", +} + @replaceableComponent("views.rooms.SearchBar") -export default class SearchBar extends React.Component { - constructor(props) { +export default class SearchBar extends React.Component { + private searchTerm: RefObject = createRef(); + + constructor(props: IProps) { super(props); - - this._search_term = createRef(); - this.state = { - scope: 'Room', + scope: SearchScope.Room, }; } - onThisRoomClick = () => { - this.setState({ scope: 'Room' }, () => this._searchIfQuery()); + public onThisRoomClick = () => { + this.setState({ scope: SearchScope.Room }, () => this._searchIfQuery()); }; - onAllRoomsClick = () => { - this.setState({ scope: 'All' }, () => this._searchIfQuery()); + public onAllRoomsClick = () => { + this.setState({ scope: SearchScope.All }, () => this._searchIfQuery()); }; - onSearchChange = (e) => { + public onSearchChange = (e: React.KeyboardEvent) => { switch (e.key) { case Key.ENTER: this.onSearch(); @@ -55,13 +70,13 @@ export default class SearchBar extends React.Component { }; _searchIfQuery() { - if (this._search_term.current.value) { + if (this.searchTerm.current.value) { this.onSearch(); } } onSearch = () => { - this.props.onSearch(this._search_term.current.value, this.state.scope); + this.props.onSearch(this.searchTerm.current.value, this.state.scope); }; render() { @@ -69,25 +84,41 @@ export default class SearchBar extends React.Component { mx_SearchBar_searching: this.props.searchInProgress, }); const thisRoomClasses = classNames("mx_SearchBar_button", { - mx_SearchBar_unselected: this.state.scope !== 'Room', + mx_SearchBar_unselected: this.state.scope !== SearchScope.Room, }); const allRoomsClasses = classNames("mx_SearchBar_button", { - mx_SearchBar_unselected: this.state.scope !== 'All', + mx_SearchBar_unselected: this.state.scope !== SearchScope.All, }); return ( <>
- + {_t("This Room")} - + {_t("All Rooms")}
- +
From 7825c30bf773185c967c61ef3cb2a448bdf8f791 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Mon, 21 Jun 2021 15:41:47 +0100 Subject: [PATCH 2/4] Improve event index initialisation failure message in search bar for supported platforms --- .../views/elements/DesktopBuildsNotice.tsx | 19 ++++++++++++++++++- src/i18n/strings/en_EN.json | 1 + 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/views/elements/DesktopBuildsNotice.tsx b/src/components/views/elements/DesktopBuildsNotice.tsx index fd1c7848aa..e5e94d4bd4 100644 --- a/src/components/views/elements/DesktopBuildsNotice.tsx +++ b/src/components/views/elements/DesktopBuildsNotice.tsx @@ -14,10 +14,15 @@ See the License for the specific language governing permissions and limitations under the License. */ +import React from "react"; import EventIndexPeg from "../../../indexing/EventIndexPeg"; import { _t } from "../../../languageHandler"; import SdkConfig from "../../../SdkConfig"; -import React from "react"; + +import dis from "../../../dispatcher/dispatcher"; +import { Action } from "../../../dispatcher/actions"; +import { UserTab } from "../dialogs/UserSettingsDialog"; + export enum WarningKind { Files, @@ -33,6 +38,18 @@ export default function DesktopBuildsNotice({isRoomEncrypted, kind}: IProps) { if (!isRoomEncrypted) return null; if (EventIndexPeg.get()) return null; + if (EventIndexPeg.error) { + return _t("Message search initialisation failed, check your settings for more information", {}, { + a: sub => ( { + evt.preventDefault(); + dis.dispatch({ + action: Action.ViewUserSettings, + initialTabId: UserTab.Security, + }); + }}>{sub}), + }); + } + const {desktopBuilds, brand} = SdkConfig.get(); let text = null; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index b88dc79da5..37f6416460 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1933,6 +1933,7 @@ "Error loading Widget": "Error loading Widget", "Error - Mixed content": "Error - Mixed content", "Popout widget": "Popout widget", + "Message search initialisation failed, check your settings for more information": "Message search initialisation failed, check your settings for more information", "Use the Desktop app to see all encrypted files": "Use the Desktop app to see all encrypted files", "Use the Desktop app to search encrypted messages": "Use the Desktop app to search encrypted messages", "This version of %(brand)s does not support viewing some encrypted files": "This version of %(brand)s does not support viewing some encrypted files", From 3d3c4284555ab95a9bc798844c16db517b0f111b Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 22 Jun 2021 10:26:49 +0100 Subject: [PATCH 3/4] Fix DesktopBuildsNotice return type --- src/components/structures/RoomView.tsx | 1 - .../views/elements/DesktopBuildsNotice.tsx | 23 +++++++++++-------- src/components/views/rooms/SearchBar.tsx | 20 ++++++++-------- 3 files changed, 23 insertions(+), 21 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index c1dcb81e08..a4338e832a 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -82,7 +82,6 @@ import SpaceRoomView from "./SpaceRoomView"; import { IOpts } from "../../createRoom"; import { replaceableComponent } from "../../utils/replaceableComponent"; import UIStore from "../../stores/UIStore"; -import Search from '../views/emojipicker/Search'; const DEBUG = false; let debuglog = function(msg: string) {}; diff --git a/src/components/views/elements/DesktopBuildsNotice.tsx b/src/components/views/elements/DesktopBuildsNotice.tsx index e5e94d4bd4..426554f31e 100644 --- a/src/components/views/elements/DesktopBuildsNotice.tsx +++ b/src/components/views/elements/DesktopBuildsNotice.tsx @@ -18,7 +18,6 @@ import React from "react"; import EventIndexPeg from "../../../indexing/EventIndexPeg"; import { _t } from "../../../languageHandler"; import SdkConfig from "../../../SdkConfig"; - import dis from "../../../dispatcher/dispatcher"; import { Action } from "../../../dispatcher/actions"; import { UserTab } from "../dialogs/UserSettingsDialog"; @@ -39,15 +38,19 @@ export default function DesktopBuildsNotice({isRoomEncrypted, kind}: IProps) { if (EventIndexPeg.get()) return null; if (EventIndexPeg.error) { - return _t("Message search initialisation failed, check your settings for more information", {}, { - a: sub => ( { - evt.preventDefault(); - dis.dispatch({ - action: Action.ViewUserSettings, - initialTabId: UserTab.Security, - }); - }}>{sub}), - }); + return <> + {_t("Message search initialisation failed, check your settings for more information", {}, { + a: sub => ( { + evt.preventDefault(); + dis.dispatch({ + action: Action.ViewUserSettings, + initialTabId: UserTab.Security, + }); + }}> + {sub} + ), + })} + ; } const {desktopBuilds, brand} = SdkConfig.get(); diff --git a/src/components/views/rooms/SearchBar.tsx b/src/components/views/rooms/SearchBar.tsx index de99305d81..47994f5251 100644 --- a/src/components/views/rooms/SearchBar.tsx +++ b/src/components/views/rooms/SearchBar.tsx @@ -15,13 +15,13 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, {createRef, RefObject} from 'react'; +import React, { createRef, RefObject } from 'react'; import AccessibleButton from "../elements/AccessibleButton"; import classNames from "classnames"; import { _t } from '../../../languageHandler'; import {Key} from "../../../Keyboard"; import DesktopBuildsNotice, {WarningKind} from "../elements/DesktopBuildsNotice"; -import {replaceableComponent} from "../../../utils/replaceableComponent"; +import { replaceableComponent } from "../../../utils/replaceableComponent"; interface IProps { onCancelClick: () => void; @@ -50,15 +50,15 @@ export default class SearchBar extends React.Component { }; } - public onThisRoomClick = () => { - this.setState({ scope: SearchScope.Room }, () => this._searchIfQuery()); + private onThisRoomClick = () => { + this.setState({ scope: SearchScope.Room }, () => this.searchIfQuery()); }; - public onAllRoomsClick = () => { - this.setState({ scope: SearchScope.All }, () => this._searchIfQuery()); + private onAllRoomsClick = () => { + this.setState({ scope: SearchScope.All }, () => this.searchIfQuery()); }; - public onSearchChange = (e: React.KeyboardEvent) => { + private onSearchChange = (e: React.KeyboardEvent) => { switch (e.key) { case Key.ENTER: this.onSearch(); @@ -69,17 +69,17 @@ export default class SearchBar extends React.Component { } }; - _searchIfQuery() { + private searchIfQuery(): void { if (this.searchTerm.current.value) { this.onSearch(); } } - onSearch = () => { + private onSearch = (): void => { this.props.onSearch(this.searchTerm.current.value, this.state.scope); }; - render() { + public render() { const searchButtonClasses = classNames("mx_SearchBar_searchButton", { mx_SearchBar_searching: this.props.searchInProgress, }); From ded738ce8c820cffb9b2a49f659e5febf130e4f1 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 22 Jun 2021 14:57:44 +0100 Subject: [PATCH 4/4] Add spaces around curlies Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/rooms/SearchBar.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/rooms/SearchBar.tsx b/src/components/views/rooms/SearchBar.tsx index 47994f5251..d71bb8da73 100644 --- a/src/components/views/rooms/SearchBar.tsx +++ b/src/components/views/rooms/SearchBar.tsx @@ -19,8 +19,8 @@ import React, { createRef, RefObject } from 'react'; import AccessibleButton from "../elements/AccessibleButton"; import classNames from "classnames"; import { _t } from '../../../languageHandler'; -import {Key} from "../../../Keyboard"; -import DesktopBuildsNotice, {WarningKind} from "../elements/DesktopBuildsNotice"; +import { Key } from "../../../Keyboard"; +import DesktopBuildsNotice, { WarningKind } from "../elements/DesktopBuildsNotice"; import { replaceableComponent } from "../../../utils/replaceableComponent"; interface IProps { @@ -95,7 +95,7 @@ export default class SearchBar extends React.Component {
{ {_t("This Room")}