break FlashBanner into multiple files

src/v2/Components/FlashBanner/FlashMessage.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import { Banner, Sans } from "@artsy/palette"
+
+/** Flash messages triggered by a url `flash_message` query param
+ * A message can be a string or a React Component that takes no props
+ * (that is, use relay or context if necessary)
+ */
+const messagebyQueryParam: { [k: string]: string | React.FC } = {
+  confirmed: "Your email has been confirmed.",
+  already_confirmed: "You have already confirmed your email.",
+  invalid_token: "An error has occurred. Please contact support@artsy.net.",
+  blank_token: "An error has occurred. Please contact support@artsy.net.",
+  expired_token: "Link expired. Resend verification email.",
+}
+
+export const FlashMessage: React.FC<{ messageCode: string }> = ({
+  messageCode,
+}) => {
+  const Message = messagebyQueryParam[messageCode]
+  if (!Message) return null
+  return (
+    Message && (
+      <Banner dismissable backgroundColor="black100">
+        <Sans color="white100" size="3" lineHeight={1} weight="medium">
+          {typeof Message === "string" ? Message : <Message />}
+        </Sans>
+      </Banner>
+    )
+  )
+}

src/v2/Components/FlashMessage.story.tsx → src/v2/Components/FlashBanner/__stories__/FlashMessage.story.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { storiesOf } from "storybook/storiesOf"
-import { FlashMessage } from "v2/Components/FlashBanner"
+import { FlashMessage } from "v2/Components/FlashBanner/FlashMessage"
 
 storiesOf("Components/FlashBanner", module).add(
   "Successful Confirmation Message",

src/v2/Components/__tests__/FlashBanner.jest.tsx → src/v2/Components/FlashBanner/__tests__/FlashBanner.jest.tsx

@@ -1,9 +1,9 @@
 import { mount } from "enzyme"
 import "jest-styled-components"
 import React from "react"
-import { FlashMessage } from "../FlashBanner"
+import { FlashMessage } from "../FlashMessage"
 
-describe("FlashBanner", () => {
+describe("FlashMessage", () => {
   it("renders a banner based on a message code", () => {
     const wrapper = mount(<FlashMessage messageCode="confirmed" />)
     expect(wrapper.text()).toContain("Your email has been confirmed.")

src/v2/Components/FlashBanner/index.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import qs from "qs"
+import { FlashMessage } from "./FlashMessage"
+
+/**
+ * The component responsible for selecting a flash message key from the `flash_message` url query param
+ */
+export const FlashBanner: React.FunctionComponent = () => {
+  const [messageCode, setMessageCode] = React.useState(null)
+
+  React.useEffect(() => {
+    const query = qs.parse(window.location.search.slice(1))
+    if (query["flash_message"]) setMessageCode(query["flash_message"])
+  }, [])
+
+  if (!messageCode) return null
+  return <FlashMessage messageCode={messageCode} />
+}