From 515e1a0d259bc29960b1b11f2d8f7d48653bf857 Mon Sep 17 00:00:00 2001
From: mastqe <email.quincymast@gmail.com>
Date: Sat, 15 Oct 2022 10:02:12 -0400
Subject: [PATCH] Functional Component Refactor: TypeForm, Vimeo, Whimsical,
 YouTube (#4265)

---
 shared/editor/embeds/Typeform.tsx  | 26 +++++++-----------
 shared/editor/embeds/Vimeo.tsx     | 44 +++++++++++++++---------------
 shared/editor/embeds/Whimsical.tsx | 32 +++++++++++-----------
 shared/editor/embeds/YouTube.tsx   | 32 +++++++++++-----------
 4 files changed, 64 insertions(+), 70 deletions(-)

diff --git a/shared/editor/embeds/Typeform.tsx b/shared/editor/embeds/Typeform.tsx
index c477ad873..50700ddb9 100644
--- a/shared/editor/embeds/Typeform.tsx
+++ b/shared/editor/embeds/Typeform.tsx
@@ -2,20 +2,14 @@ import * as React from "react";
 import Frame from "../components/Frame";
 import { EmbedProps as Props } from ".";
 
-const URL_REGEX = new RegExp(
-  "^https://([A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?)\\.typeform\\.com/to/(.*)$"
-);
-
-export default class Typeform extends React.Component<Props> {
-  static ENABLED = [URL_REGEX];
-
-  render() {
-    return (
-      <Frame
-        {...this.props}
-        src={this.props.attrs.href}
-        title="Typeform Embed"
-      />
-    );
-  }
+function Typeform(props: Props) {
+  return <Frame {...props} src={props.attrs.href} title="Typeform Embed" />;
 }
+
+Typeform.ENABLED = [
+  new RegExp(
+    "^https://([A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?)\\.typeform\\.com/to/(.*)$"
+  ),
+];
+
+export default Typeform;
diff --git a/shared/editor/embeds/Vimeo.tsx b/shared/editor/embeds/Vimeo.tsx
index dcf39f466..6eb80960e 100644
--- a/shared/editor/embeds/Vimeo.tsx
+++ b/shared/editor/embeds/Vimeo.tsx
@@ -2,27 +2,27 @@ import * as React from "react";
 import Frame from "../components/Frame";
 import { EmbedProps as Props } from ".";
 
-const URL_REGEX = /(http|https)?:\/\/(www\.)?vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|)(\d+)(?:\/|\?)?([\d\w]+)?/;
+function Vimeo(props: Props) {
+  const { matches } = props.attrs;
+  const videoId = matches[4];
+  const hId = matches[5];
 
-export default class Vimeo extends React.Component<Props> {
-  static ENABLED = [URL_REGEX];
-
-  render() {
-    const { matches } = this.props.attrs;
-    const videoId = matches[4];
-    const hId = matches[5];
-
-    return (
-      <Frame
-        {...this.props}
-        src={`https://player.vimeo.com/video/${videoId}?byline=0${
-          hId ? `&h=${hId}` : ""
-        }`}
-        title={`Vimeo Embed (${videoId})`}
-        height="412px"
-        border={false}
-        referrerPolicy="origin"
-      />
-    );
-  }
+  return (
+    <Frame
+      {...props}
+      src={`https://player.vimeo.com/video/${videoId}?byline=0${
+        hId ? `&h=${hId}` : ""
+      }`}
+      title={`Vimeo Embed (${videoId})`}
+      height="412px"
+      border={false}
+      referrerPolicy="origin"
+    />
+  );
 }
+
+Vimeo.ENABLED = [
+  /(http|https)?:\/\/(www\.)?vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|)(\d+)(?:\/|\?)?([\d\w]+)?/,
+];
+
+export default Vimeo;
diff --git a/shared/editor/embeds/Whimsical.tsx b/shared/editor/embeds/Whimsical.tsx
index aefa8c7b2..d95493e7c 100644
--- a/shared/editor/embeds/Whimsical.tsx
+++ b/shared/editor/embeds/Whimsical.tsx
@@ -2,21 +2,21 @@ import * as React from "react";
 import Frame from "../components/Frame";
 import { EmbedProps as Props } from ".";
 
-const URL_REGEX = /^https?:\/\/whimsical\.com\/[0-9a-zA-Z-_~]*-([a-zA-Z0-9]+)\/?$/;
+function Whimsical(props: Props) {
+  const { matches } = props.attrs;
+  const boardId = matches[1];
 
-export default class Whimsical extends React.Component<Props> {
-  static ENABLED = [URL_REGEX];
-
-  render() {
-    const { matches } = this.props.attrs;
-    const boardId = matches[1];
-
-    return (
-      <Frame
-        {...this.props}
-        src={`https://whimsical.com/embed/${boardId}`}
-        title="Whimsical"
-      />
-    );
-  }
+  return (
+    <Frame
+      {...props}
+      src={`https://whimsical.com/embed/${boardId}`}
+      title="Whimsical"
+    />
+  );
 }
+
+Whimsical.ENABLED = [
+  /^https?:\/\/whimsical\.com\/[0-9a-zA-Z-_~]*-([a-zA-Z0-9]+)\/?$/,
+];
+
+export default Whimsical;
diff --git a/shared/editor/embeds/YouTube.tsx b/shared/editor/embeds/YouTube.tsx
index c3a873ef8..3df4c53b7 100644
--- a/shared/editor/embeds/YouTube.tsx
+++ b/shared/editor/embeds/YouTube.tsx
@@ -2,20 +2,20 @@ import * as React from "react";
 import Frame from "../components/Frame";
 import { EmbedProps as Props } from ".";
 
-const URL_REGEX = /(?:https?:\/\/)?(?:www\.)?youtu\.?be(?:\.com)?\/?.*(?:watch|embed)?(?:.*v=|v\/|\/)([a-zA-Z0-9_-]{11})$/i;
-
-export default class YouTube extends React.Component<Props> {
-  static ENABLED = [URL_REGEX];
-
-  render() {
-    const { matches } = this.props.attrs;
-    const videoId = matches[1];
-    return (
-      <Frame
-        {...this.props}
-        src={`https://www.youtube.com/embed/${videoId}?modestbranding=1`}
-        title={`YouTube (${videoId})`}
-      />
-    );
-  }
+function YouTube(props: Props) {
+  const { matches } = props.attrs;
+  const videoId = matches[1];
+  return (
+    <Frame
+      {...props}
+      src={`https://www.youtube.com/embed/${videoId}?modestbranding=1`}
+      title={`YouTube (${videoId})`}
+    />
+  );
 }
+
+YouTube.ENABLED = [
+  /(?:https?:\/\/)?(?:www\.)?youtu\.?be(?:\.com)?\/?.*(?:watch|embed)?(?:.*v=|v\/|\/)([a-zA-Z0-9_-]{11})$/i,
+];
+
+export default YouTube;