refactor(wakeword): move checkmark to its own file

spokestack · Jul 23, 2020 · ea16f91 · ea16f91
1 parent df69455
commit ea16f91
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 22 deletions.
diff --git a/src/components/Wakeword.tsx b/src/components/Wakeword.tsx
@@ -8,33 +8,16 @@ import Card from './Card'
 import { CopyButton } from './EditButtons'
 import { MIN_DEFAULT_MEDIA_QUERY } from 'typography-breakpoint-constants'
 import SVGIcon from './SVGIcon'
+import WakewordCheckmark from './WakewordCheckmark'
 import { capitalize } from 'lodash'
 import { css } from '@emotion/core'
 import { record } from 'spokestack/client'
 
+// The uploader will not allow anything longer than 3 seconds.
+// We can't use 3 seconds here though or it results in recordings with
+// 3 seconds and some milliseconds.
 const MAX_RECORD_TIME = 2.9
 
-function Checkmark(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      {...props}
-      width="75"
-      height="76"
-      viewBox="0 0 75 76"
-      xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M37.5,74.5 C57.9345357,74.5 74.5,57.9345357 74.5,37.5 C74.5,17.0654643 57.9345357,0.5 37.5,0.5 C17.0654643,0.5 0.5,17.0654643 0.5,37.5 C0.5,57.9345357 17.0654643,74.5 37.5,74.5 Z"
-        stroke="#2F5BEA"
-        fillRule="nonzero"
-      />
-      <polygon
-        fill="#2F5BEA"
-        points="31.7897727 44.4247159 50.5823864 25.5894886 53.0965909 28.1036932 31.7897727 49.4105114 21.9034091 39.5241477 24.375 37.0099432"
-      />
-    </svg>
-  )
-}
-
 interface Props {
   numRecordings?: number
   assistant: string
@@ -211,7 +194,7 @@ export default class Wakeword extends PureComponent<Props, State> {
             )}
             <div css={styles.steps}>
               {[...Array(numRecordings)].map((_, i) => (
-                <Checkmark
+                <WakewordCheckmark
                   key={`wakeword-checkmark-${i}`}
                   css={[styles.check, recorded >= i + 1 && styles.checkFilled]}
                 />

diff --git a/src/components/WakewordCheckmark.tsx b/src/components/WakewordCheckmark.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+
+export default function Checkmark(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      width="75"
+      height="76"
+      viewBox="0 0 75 76"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M37.5,74.5 C57.9345357,74.5 74.5,57.9345357 74.5,37.5 C74.5,17.0654643 57.9345357,0.5 37.5,0.5 C17.0654643,0.5 0.5,17.0654643 0.5,37.5 C0.5,57.9345357 17.0654643,74.5 37.5,74.5 Z"
+        stroke="#2F5BEA"
+        fillRule="nonzero"
+      />
+      <polygon
+        fill="#2F5BEA"
+        points="31.7897727 44.4247159 50.5823864 25.5894886 53.0965909 28.1036932 31.7897727 49.4105114 21.9034091 39.5241477 24.375 37.0099432"
+      />
+    </svg>
+  )
+}