Format dropdown

src/components/views/dialogs/ExportDialog.tsx

@@ -1,56 +1,75 @@
-import React from 'react';
-import { Room } from 'matrix-js-sdk/src';
-import { _t } from '../../../languageHandler';
-import { IDialogProps } from './IDialogProps';
-import BaseDialog from "./BaseDialog"
+import React, { useState } from "react";
+import { Room } from "matrix-js-sdk/src";
+import { _t } from "../../../languageHandler";
+import { IDialogProps } from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
+import Dropdown from "../elements/Dropdown";
+import exportConversationalHistory, {
+    exportFormats,
+    exportTypes,
+} from "../../../utils/exportUtils/exportUtils";
 
-interface IProps extends IDialogProps{
+interface IProps extends IDialogProps {
     room: Room;
 }
 
-export default class ExportDialog extends React.PureComponent<IProps> {
-    onExportClick = async () => {
-        const {
-            default: exportConversationalHistory,
-            exportFormats,
-            exportTypes,
-        } = await import("../../../utils/exportUtils/exportUtils");
-
+const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
+    const [format, setFormat] = useState("HTML");
+    const onExportClick = async () => {
         await exportConversationalHistory(
-            this.props.room,
+            room,
             exportFormats.PLAIN_TEXT,
             exportTypes.START_DATE,
             {
-                startDate: parseInt(new Date("2021.05.20").getTime().toFixed(0)),
+                startDate: parseInt(
+                    new Date("2021.05.20").getTime().toFixed(0),
+                ),
                 attachmentsIncluded: true,
                 maxSize: 7 * 1024 * 1024, // 7 MB
             },
         );
     };
 
-    onCancel = () => {
-        this.props.onFinished(false);
+    const onCancel = () => {
+        onFinished(false);
     };
 
-    render() {
-        return (
-            <BaseDialog
-                title={_t("Export Chat")}
-                contentId='mx_Dialog_content'
-                hasCancel={true}
-                onFinished={this.props.onFinished}
-                fixedWidth={false}
+    const options = Object.keys(exportFormats).map(key => {
+        return <div key={key}>
+            { exportFormats[key] }
+        </div>
+    })
+
+    return (
+        <BaseDialog
+            title={_t("Export Chat")}
+            contentId="mx_Dialog_content"
+            hasCancel={true}
+            onFinished={onFinished}
+            fixedWidth={true}
+        >
+            <p>
+                {_t(
+                    "Select from the options below to export chats from your timeline",
+                )}
+            </p>
+
+            <Dropdown
+                onOptionChange={(key: string) => { setFormat(key) }}
+                value={format}
+                label={_t("Export formats")}
             >
-                <div className="mx_Dialog_content" id='mx_Dialog_content'>
-                    Export
-                </div>
-                <DialogButtons
-                    primaryButton={_t('Export')}
-                    onPrimaryButtonClick={this.onExportClick}
-                    onCancel={this.onCancel}
-                />
-            </BaseDialog>
-        );
-    }
-}
+                { options }
+            </Dropdown>
+
+            <DialogButtons
+                primaryButton={_t("Export")}
+                onPrimaryButtonClick={onExportClick}
+                onCancel={onCancel}
+            />
+        </BaseDialog>
+    );
+};
+
+export default ExportDialog;

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -47,7 +47,6 @@ import {useRoomMemberCount} from "../../../hooks/useRoomMembers";
 import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import RoomName from "../elements/RoomName";
 import UIStore from "../../../stores/UIStore";
-import ExportDialog from "../dialogs/ExportDialog";
 
 interface IProps {
     room: Room;
@@ -234,7 +233,9 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
         });
     };
 
-    const onRoomExportClick = () => {
+    const onRoomExportClick = async () => {
+        const {default: ExportDialog} = await import("../dialogs/ExportDialog");
+
         Modal.createTrackedDialog('export room dialog', '', ExportDialog, {
             room,
         });

src/i18n/strings/en_EN.json

@@ -2250,6 +2250,7 @@
     "Update community": "Update community",
     "An error has occurred.": "An error has occurred.",
     "Export Chat": "Export Chat",
+    "Select from the options below to export chats from your timeline": "Select from the options below to export chats from your timeline",
     "Export": "Export",
     "Feedback sent": "Feedback sent",
     "Rate %(brand)s": "Rate %(brand)s",

src/utils/exportUtils/exportUtils.ts

@@ -1,19 +1,29 @@
 import { Room } from "matrix-js-sdk/src/models/room";
+import { _t } from "../../languageHandler";
 import HTMLExporter from "./HtmlExport";
 import JSONExporter from "./JSONExport";
 import PlainTextExporter from "./PlainTextExport";
 
+_t("HTML");
+_t("JSON");
+_t("Plain Text");
+
 export enum exportFormats {
     HTML = "HTML",
     JSON = "JSON",
-    PLAIN_TEXT = "PLAIN_TEXT",
+    PLAIN_TEXT = "Plain Text",
 }
 
+_t("Current Timeline");
+_t("From the beginning")
+_t("From a specific date")
+_t("Last n messages");
+
 export enum exportTypes {
-    TIMELINE = "TIMELINE",
-    BEGINNING = "BEGINNING",
-    START_DATE = "START_DATE",
-    LAST_N_MESSAGES = "LAST_N_MESSAGES",
+    TIMELINE = "Current Timeline",
+    BEGINNING = "From the beginning",
+    START_DATE = "From a specific date",
+    LAST_N_MESSAGES = "Last n messages",
 }
 
 export interface exportOptions {