timetravel: modernizing it more

Author: williamstein

src/packages/frontend/frame-editors/time-travel-editor/document.tsx

@@ -7,51 +7,24 @@
 Render a static version of a document for use in TimeTravel.
 */
 
-import { Component, Rendered } from "../../app-framework";
-
-import { fromJS, Map } from "immutable";
+import { fromJS } from "immutable";
 import { CodemirrorEditor } from "../code-editor/codemirror-editor";
-import { TimeTravelActions } from "./actions";
-
-interface Props {
-  id: string;
-  actions: TimeTravelActions;
-  font_size: number;
-  doc: string;
-  path: string; // filename of doc, which determines what sort of editor it uses
-  project_id: string;
-  editor_settings: Map<string, any>;
-}
 
-export class Document extends Component<Props> {
-  private render_body(): Rendered {
-    return (
+export function Document(props) {
+  return (
+    <div className="smc-vfill" style={{ overflowY: "auto" }}>
       <CodemirrorEditor
-        id={this.props.id}
-        actions={this.props.actions}
-        path={this.props.path}
-        project_id={this.props.project_id}
-        font_size={this.props.font_size}
+        {...props}
         cursors={fromJS({})}
         editor_state={fromJS({})}
         read_only={true}
         is_current={true}
         is_public={true}
-        value={this.props.doc}
         misspelled_words={fromJS([]) as any}
         resize={0}
         gutters={[]}
         gutter_markers={fromJS({}) as any}
-        editor_settings={this.props.editor_settings}
       />
-    );
-  }
-
-  public render(): Rendered {
-    return (
-      <div className="smc-vfill" style={{ overflowY: "auto" }}>
-        {this.render_body()}
-      </div>
-    );
-  }
+    </div>
+  );
 }

src/packages/frontend/frame-editors/time-travel-editor/export.tsx

@@ -8,24 +8,21 @@
 - This is really just some minimal data *about* the history for now.
 */
 
-import { Rendered, Component } from "../../app-framework";
-import { Button } from "react-bootstrap";
+import { Button } from "antd";
 import { TimeTravelActions } from "./actions";
 import { Icon } from "../../components";
 
 interface Props {
   actions: TimeTravelActions;
 }
 
-export class Export extends Component<Props> {
-  public render(): Rendered {
-    return (
-      <Button
-        onClick={() => this.props.actions.export()}
-        title="Export information about edit history to a JSON file"
-      >
-        <Icon name={"file-export"} /> Export
-      </Button>
-    );
-  }
+export function Export({ actions }: Props) {
+  return (
+    <Button
+      onClick={() => actions.export()}
+      title="Export information about edit history to a JSON file"
+    >
+      <Icon name={"file-export"} /> Export
+    </Button>
+  );
 }

src/packages/frontend/frame-editors/time-travel-editor/load-full-history.tsx

@@ -3,24 +3,21 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Rendered, Component } from "../../app-framework";
-import { Button } from "react-bootstrap";
+import { Button } from "antd";
 import { TimeTravelActions } from "./actions";
 import { Icon } from "../../components";
 
 interface Props {
   actions: TimeTravelActions;
 }
 
-export class LoadFullHistory extends Component<Props> {
-  public render(): Rendered {
-    return (
-      <Button
-        onClick={() => this.props.actions.load_full_history()}
-        title={"Load the complete edit history for this file."}
-      >
-        <Icon name="file-archive" /> Load All
-      </Button>
-    );
-  }
+export function LoadFullHistory({ actions }: Props) {
+  return (
+    <Button
+      onClick={() => actions.load_full_history()}
+      title={"Load the complete edit history for this file."}
+    >
+      <Icon name="file-archive" /> Load All
+    </Button>
+  );
 }

src/packages/frontend/frame-editors/time-travel-editor/navigation-buttons.tsx

@@ -12,55 +12,50 @@ Navigation Buttons to:
  - last
 */
 
-import { Button, ButtonGroup } from "react-bootstrap";
-import { Component, Rendered } from "../../app-framework";
-import { Icon } from "../../components";
-
+import { Button } from "antd";
+import { Icon } from "@cocalc/frontend/components";
 import { TimeTravelActions } from "./actions";
 
 interface Props {
   id: string;
   actions: TimeTravelActions;
-
   version0: number;
   version1: number;
   max: number;
 }
 
-export class NavigationButtons extends Component<Props> {
-  public render(): Rendered {
-    const { version0, version1, max } = this.props;
-    return (
-      <ButtonGroup>
-        <Button
-          title={"First version"}
-          onClick={() => this.props.actions.step(this.props.id, -version0)}
-          disabled={version0 != null && version0 <= 0}
-        >
-          <Icon name="backward" />
-        </Button>
-        <Button
-          title={"Previous version"}
-          onClick={() => this.props.actions.step(this.props.id, -1)}
-          disabled={version0 != null && version0 <= 0}
-        >
-          <Icon name="step-backward" />
-        </Button>
-        <Button
-          title={"Next version"}
-          onClick={() => this.props.actions.step(this.props.id, 1)}
-          disabled={version1 != null && version1 >= max}
-        >
-          <Icon name="step-forward" />
-        </Button>
-        <Button
-          title={"Most recent version"}
-          onClick={() => this.props.actions.step(this.props.id, max - version1)}
-          disabled={version1 != null && version1 >= max}
-        >
-          <Icon name="forward" />
-        </Button>
-      </ButtonGroup>
-    );
-  }
+export function NavigationButtons(props: Props) {
+  const { version0, version1, max } = props;
+  return (
+    <div style={{ display: "inline-flex" }}>
+      <Button
+        title={"First version"}
+        onClick={() => props.actions.step(props.id, -version0)}
+        disabled={version0 != null && version0 <= 0}
+      >
+        <Icon name="backward" />
+      </Button>
+      <Button
+        title={"Previous version"}
+        onClick={() => props.actions.step(props.id, -1)}
+        disabled={version0 != null && version0 <= 0}
+      >
+        <Icon name="step-backward" />
+      </Button>
+      <Button
+        title={"Next version"}
+        onClick={() => props.actions.step(props.id, 1)}
+        disabled={version1 != null && version1 >= max}
+      >
+        <Icon name="step-forward" />
+      </Button>
+      <Button
+        title={"Most recent version"}
+        onClick={() => props.actions.step(props.id, max - version1)}
+        disabled={version1 != null && version1 >= max}
+      >
+        <Icon name="forward" />
+      </Button>
+    </div>
+  );
 }

src/packages/frontend/frame-editors/time-travel-editor/navigation-slider.tsx

@@ -3,35 +3,45 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Component, Rendered } from "../../app-framework";
-
+import { Slider } from "antd";
 import { TimeTravelActions } from "./actions";
+import { TimeAgo } from "../../components";
+import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
 
 interface Props {
   id: string;
   actions: TimeTravelActions;
-
   version?: number;
+  versions;
   max: number;
 }
 
-export class NavigationSlider extends Component<Props> {
-  private handle_change(event: any): void {
-    this.props.actions.set_version(this.props.id, parseInt(event.target.value));
+export function NavigationSlider({
+  id,
+  actions,
+  version,
+  versions,
+  max,
+}: Props) {
+  const { isVisible } = useFrameContext();
+  if (version == null || !isVisible) {
+    return <div />;
   }
+  const renderTooltip = (index) => {
+    const date = versions.get(index);
+    if (date == null) return; // shouldn't happen
+    return <TimeAgo date={date} />;
+  };
 
-  public render(): Rendered {
-    const { version, max } = this.props;
-    if (version == null) return <div />;
-    return (
-      <input
-        style={{ cursor: "pointer" }}
-        type="range"
-        min={0}
-        max={max}
-        value={version}
-        onChange={this.handle_change.bind(this)}
-      />
-    );
-  }
+  return (
+    <Slider
+      min={0}
+      max={max}
+      value={version}
+      onChange={(value) => {
+        actions.set_version(id, value);
+      }}
+      tooltip={{ formatter: renderTooltip, placement: "bottom", open: true }}
+    />
+  );
 }

src/packages/frontend/frame-editors/time-travel-editor/open-file.tsx

@@ -4,7 +4,7 @@
  */
 
 import { Rendered, Component } from "../../app-framework";
-import { Button } from "react-bootstrap";
+import { Button } from "antd";
 import { TimeTravelActions } from "./actions";
 import { Icon } from "../../components";
 

src/packages/frontend/frame-editors/time-travel-editor/open-snapshots.tsx

@@ -10,8 +10,7 @@
   just links to the info from backups about *this* file.
 */
 
-import { Button } from "react-bootstrap";
-
+import { Button } from "antd";
 import { Rendered, Component } from "@cocalc/frontend/app-framework";
 import { TimeTravelActions } from "./actions";
 import { Icon } from "@cocalc/frontend/components";