From 7b69f7a6e24d726faaec0c085db9b27c5b0086e6 Mon Sep 17 00:00:00 2001
From: mastqe <email.quincymast@gmail.com>
Date: Sat, 15 Oct 2022 10:01:53 -0400
Subject: [PATCH] Functional Component Refactor: Marvel, Mindmeister, Miro,
 ModeAnalytics (#4263)

---
 shared/editor/embeds/Marvel.tsx        | 23 +++++---------
 shared/editor/embeds/Mindmeister.tsx   | 42 +++++++++++++-------------
 shared/editor/embeds/Miro.tsx          | 36 +++++++++++-----------
 shared/editor/embeds/ModeAnalytics.tsx | 34 ++++++++++-----------
 4 files changed, 63 insertions(+), 72 deletions(-)

diff --git a/shared/editor/embeds/Marvel.tsx b/shared/editor/embeds/Marvel.tsx
index e35be6b2f..7f1059b13 100644
--- a/shared/editor/embeds/Marvel.tsx
+++ b/shared/editor/embeds/Marvel.tsx
@@ -2,19 +2,12 @@ import * as React from "react";
 import Frame from "../components/Frame";
 import { EmbedProps as Props } from ".";
 
-const URL_REGEX = new RegExp("^https://marvelapp\\.com/([A-Za-z0-9-]{6})/?$");
-
-export default class Marvel extends React.Component<Props> {
-  static ENABLED = [URL_REGEX];
-
-  render() {
-    return (
-      <Frame
-        {...this.props}
-        src={this.props.attrs.href}
-        title="Marvel Embed"
-        border
-      />
-    );
-  }
+function Marvel(props: Props) {
+  return (
+    <Frame {...props} src={props.attrs.href} title="Marvel Embed" border />
+  );
 }
+
+Marvel.ENABLED = [new RegExp("^https://marvelapp\\.com/([A-Za-z0-9-]{6})/?$")];
+
+export default Marvel;
diff --git a/shared/editor/embeds/Mindmeister.tsx b/shared/editor/embeds/Mindmeister.tsx
index 035a4d905..299a0bfc2 100644
--- a/shared/editor/embeds/Mindmeister.tsx
+++ b/shared/editor/embeds/Mindmeister.tsx
@@ -2,25 +2,25 @@ import * as React from "react";
 import Frame from "../components/Frame";
 import { EmbedProps as Props } from ".";
 
-const URL_REGEX = new RegExp(
-  "^https://([w.-]+\\.)?(mindmeister\\.com|mm\\.tt)(/maps/public_map_shell)?/(\\d+)(\\?t=.*)?(/.*)?$"
-);
-
-export default class Mindmeister extends React.Component<Props> {
-  static ENABLED = [URL_REGEX];
-
-  render() {
-    const chartId =
-      this.props.attrs.matches[4] +
-      (this.props.attrs.matches[5] || "") +
-      (this.props.attrs.matches[6] || "");
-    return (
-      <Frame
-        {...this.props}
-        src={`https://www.mindmeister.com/maps/public_map_shell/${chartId}`}
-        title="Mindmeister Embed"
-        border
-      />
-    );
-  }
+function Mindmeister(props: Props) {
+  const chartId =
+    props.attrs.matches[4] +
+    (props.attrs.matches[5] || "") +
+    (props.attrs.matches[6] || "");
+  return (
+    <Frame
+      {...props}
+      src={`https://www.mindmeister.com/maps/public_map_shell/${chartId}`}
+      title="Mindmeister Embed"
+      border
+    />
+  );
 }
+
+Mindmeister.ENABLED = [
+  new RegExp(
+    "^https://([w.-]+\\.)?(mindmeister\\.com|mm\\.tt)(/maps/public_map_shell)?/(\\d+)(\\?t=.*)?(/.*)?$"
+  ),
+];
+
+export default Mindmeister;
diff --git a/shared/editor/embeds/Miro.tsx b/shared/editor/embeds/Miro.tsx
index 61da3e6dc..c71a4a47b 100644
--- a/shared/editor/embeds/Miro.tsx
+++ b/shared/editor/embeds/Miro.tsx
@@ -2,23 +2,23 @@ import * as React from "react";
 import Frame from "../components/Frame";
 import { EmbedProps as Props } from ".";
 
-const URL_REGEX = /^https:\/\/(realtimeboard|miro)\.com\/app\/board\/(.*)$/;
+function RealtimeBoard(props: Props) {
+  const { matches } = props.attrs;
+  const domain = matches[1];
+  const boardId = matches[2];
+  const titleName = domain === "realtimeboard" ? "RealtimeBoard" : "Miro";
 
-export default class RealtimeBoard extends React.Component<Props> {
-  static ENABLED = [URL_REGEX];
-
-  render() {
-    const { matches } = this.props.attrs;
-    const domain = matches[1];
-    const boardId = matches[2];
-    const titleName = domain === "realtimeboard" ? "RealtimeBoard" : "Miro";
-
-    return (
-      <Frame
-        {...this.props}
-        src={`https://${domain}.com/app/embed/${boardId}`}
-        title={`${titleName} (${boardId})`}
-      />
-    );
-  }
+  return (
+    <Frame
+      {...props}
+      src={`https://${domain}.com/app/embed/${boardId}`}
+      title={`${titleName} (${boardId})`}
+    />
+  );
 }
+
+RealtimeBoard.ENABLED = [
+  /^https:\/\/(realtimeboard|miro)\.com\/app\/board\/(.*)$/,
+];
+
+export default RealtimeBoard;
diff --git a/shared/editor/embeds/ModeAnalytics.tsx b/shared/editor/embeds/ModeAnalytics.tsx
index e82431b6e..d8d6ce305 100644
--- a/shared/editor/embeds/ModeAnalytics.tsx
+++ b/shared/editor/embeds/ModeAnalytics.tsx
@@ -2,22 +2,20 @@ import * as React from "react";
 import Frame from "../components/Frame";
 import { EmbedProps as Props } from ".";
 
-const URL_REGEX = new RegExp(
-  "^https://([w.-]+\\.)?modeanalytics\\.com/(.*)/reports/(.*)$"
-);
-
-export default class ModeAnalytics extends React.Component<Props> {
-  static ENABLED = [URL_REGEX];
-
-  render() {
-    // Allow users to paste embed or standard urls and handle them the same
-    const normalizedUrl = this.props.attrs.href.replace(/\/embed$/, "");
-    return (
-      <Frame
-        {...this.props}
-        src={`${normalizedUrl}/embed`}
-        title="Mode Analytics Embed"
-      />
-    );
-  }
+function ModeAnalytics(props: Props) {
+  // Allow users to paste embed or standard urls and handle them the same
+  const normalizedUrl = props.attrs.href.replace(/\/embed$/, "");
+  return (
+    <Frame
+      {...props}
+      src={`${normalizedUrl}/embed`}
+      title="Mode Analytics Embed"
+    />
+  );
 }
+
+ModeAnalytics.ENABLED = [
+  new RegExp("^https://([w.-]+\\.)?modeanalytics\\.com/(.*)/reports/(.*)$"),
+];
+
+export default ModeAnalytics;