forked/topola-viewer
1
0
Fork 0
mirror of https://github.com/PeWu/topola-viewer.git synced 2026-05-27 07:36:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactored UploadMenu component from class-based to functional

Browse Source
This commit is contained in:
Przemek Wiech
2021-11-02 18:00:04 +01:00
parent 0386655fe0
commit 60aa526e62
1 changed files with 32 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/menu/upload_menu.tsx
View File

@@ -1,11 +1,11 @@
import * as queryString from 'query-string'; import * as queryString from 'query-string';
import * as React from 'react';
import md5 from 'md5'; import md5 from 'md5';
import {analyticsEvent} from '../util/analytics'; import {analyticsEvent} from '../util/analytics';
import {Dropdown, Icon, Menu} from 'semantic-ui-react'; import {Dropdown, Icon, Menu} from 'semantic-ui-react';
import {FormattedMessage} from 'react-intl'; import {FormattedMessage} from 'react-intl';
import {MenuType} from './menu_item'; import {MenuType} from './menu_item';
import {RouteComponentProps} from 'react-router-dom'; import {RouteComponentProps} from 'react-router-dom';
import {SyntheticEvent} from 'react';
function loadFileAsText(file: File): Promise<string> { function loadFileAsText(file: File): Promise<string> {
return new Promise((resolve) => { return new Promise((resolve) => {
@@ -27,8 +27,8 @@ interface Props {
} }
/** Displays and handles the "Open file" menu. */ /** Displays and handles the "Open file" menu. */
export class UploadMenu extends React.Component<RouteComponentProps & Props> { export function UploadMenu(props: RouteComponentProps & Props) {
private async handleUpload(event: React.SyntheticEvent<HTMLInputElement>) { async function handleUpload(event: SyntheticEvent<HTMLInputElement>) {
const files = (event.target as HTMLInputElement).files; const files = (event.target as HTMLInputElement).files;
if (!files || !files.length) { if (!files || !files.length) {
return; return;
@@ -68,11 +68,9 @@ export class UploadMenu extends React.Component<RouteComponentProps & Props> {
// Use history.replace() when reuploading the same file and history.push() when loading // Use history.replace() when reuploading the same file and history.push() when loading
// a new file. // a new file.
const search = queryString.parse(this.props.location.search); const search = queryString.parse(props.location.search);
const historyPush = const historyPush =
search.file === hash search.file === hash ? props.history.replace : props.history.push;
? this.props.history.replace
: this.props.history.push;
historyPush({ historyPush({
pathname: '/view', pathname: '/view',
@@ -81,7 +79,6 @@ export class UploadMenu extends React.Component<RouteComponentProps & Props> {
}); });
} }
render() {
const content = ( const content = (
<> <>
<Icon name="folder open" /> <Icon name="folder open" />
@@ -90,7 +87,7 @@ export class UploadMenu extends React.Component<RouteComponentProps & Props> {
); );
return ( return (
<> <>
{this.props.menuType === MenuType.Menu ? ( {props.menuType === MenuType.Menu ? (
<label htmlFor="fileInput"> <label htmlFor="fileInput">
<Menu.Item as="a">{content}</Menu.Item> <Menu.Item as="a">{content}</Menu.Item>
</label> </label>
@@ -105,9 +102,8 @@ export class UploadMenu extends React.Component<RouteComponentProps & Props> {
accept=".ged,image/*" accept=".ged,image/*"
id="fileInput" id="fileInput"
multiple multiple
onChange={(e) => this.handleUpload(e)} onChange={handleUpload}
/> />
</> </>
); );
} }
}