Add DynamicFlash to fix flashes.

src/components/DynamicFlash.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+
+import { UncontrolledAlert } from 'reactstrap';
+
+const colorMap = {
+  info: 'info',
+  alert: 'alert',
+  error: 'danger',
+};
+
+class DynamicFlash extends Component {
+  constructor(props) {
+    super(props);
+
+    const flashInput = document.getElementById('flash');
+    const flashValue = flashInput ? flashInput.value : '[]';
+    this.state = {
+      messages: JSON.parse(flashValue),
+    };
+  }
+
+  render() {
+    return <>
+      {[].concat.apply([], Object.keys(this.state.messages).map(type =>
+        this.state.messages[type].map((message, index) =>
+          <UncontrolledAlert className="mb-0 mt-3" key={type + index} color={type}>{message}</UncontrolledAlert>
+        )
+      ))}
+    </>;
+  }
+}
+
+export default DynamicFlash;

src/cube_analysis.js

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import { Col, Nav, NavLink, Row } from 'reactstrap';
 
 import CurveAnalysis from './components/CurveAnalysis';
+import DynamicFlash from './components/DynamicFlash';
 import MulticoloredAnalysis from './components/MulticoloredAnalysis';
 import TypeAnalysis from './components/TypeAnalysis';
 
@@ -28,7 +29,8 @@ class CubeAnalysis extends Component {
         {text}
       </NavLink>
     );
-    return (
+    return <>
+      <DynamicFlash />
       <Row className="mt-3">
         <Col xs="12" lg="2">
           <Nav vertical="lg" pills className="justify-content-sm-start justify-content-center mb-3">
@@ -38,12 +40,14 @@ class CubeAnalysis extends Component {
           </Nav>
         </Col>
         <Col xs="12" lg="10">
-          <CurveAnalysis curve={curve} style={{ display: active === 'curve' ? undefined : 'none' }} />
-          <TypeAnalysis typeByColor={typeByColor} style={{ display: active === 'type' ? 'flex' : 'none' }} />
-          <MulticoloredAnalysis multicoloredCounts={multicoloredCounts} style={{ display: active === 'multi' ? 'flex' : 'none' }} />
+          {{
+            curve: <CurveAnalysis curve={curve} />,
+            type: <TypeAnalysis typeByColor={typeByColor} />,
+            multi: <MulticoloredAnalysis multicoloredCounts={multicoloredCounts} />,
+          }[active]}
         </Col>
       </Row>
-    );
+    </>;
   }
 }
 

src/cube_compare.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 
 import CompareView from './components/CompareView';
 import CubeCompareNavbar from './components/CubeCompareNavbar';
+import DynamicFlash from './components/DynamicFlash';
 import SortContext from './components/SortContext';
 
 class CubeCompare extends Component {
@@ -28,6 +29,7 @@ class CubeCompare extends Component {
     return (
       <SortContext.Provider>
         <CubeCompareNavbar />
+        <DynamicFlash />
         <CompareView cards={cards} {...props} />
       </SortContext.Provider>
     );

src/cube_list.js

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import CubeListNavbar from './components/CubeListNavbar';
 import CurveView from './components/CurveView';
 import DisplayContext from './components/DisplayContext';
+import DynamicFlash from './components/DynamicFlash';
 import ListView from './components/ListView';
 import SortContext from './components/SortContext';
 import TableView from './components/TableView';
@@ -59,6 +60,7 @@ class CubeList extends Component {
             changeCubeView={this.changeCubeView}
             hasCustomImages={cards.some(card => card.imgUrl)}
           />
+          <DynamicFlash />
           <TagContext.Provider defaultTags={defaultTags}>
             {{
               'table': <TableView cards={cards} />,

src/cube_playtest.js

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 
 import { Button, Card, CardBody, CardFooter, CardHeader, CardTitle, Col, FormGroup, Input, Label, Row, UncontrolledAlert, UncontrolledCollapse } from 'reactstrap';
 
+import DynamicFlash from './components/DynamicFlash';
+
 const range = (lo, hi) => Array.from(Array(hi - lo).keys()).map(n => n + lo);
 const rangeOptions = (lo, hi) => range(lo, hi).map(n => <option key={n}>{n}</option>);
 
@@ -216,11 +218,10 @@ class CubePlaytest extends Component {
     const { alerts, draftFormats } = this.state;
 
     return <>
-      <div>
-        {alerts.map(data =>
-          <UncontrolledAlert key={data} className="mb-0 mt-3" {...data} />
-        )}
-      </div>
+      <DynamicFlash />
+      {alerts.map(data =>
+        <UncontrolledAlert key={data} className="mb-0 mt-3" {...data} />
+      )}
       <Row className="justify-content-center">
         <Col xs="12" md="6" xl="5">
           {decks.length == 0 ? '' :

views/cube/cube_blog.pug

@@ -12,6 +12,7 @@ block cube_toolbar
                 a.nav-link.newBlogButton(href='#' data-toggle='modal', data-target='#customDraftModal') Create new blog post
 
 block cube_content
+  include ../flash
   if pages
     hr
     nav(aria-label='pagination')

views/cube/cube_deck.pug

@@ -1,6 +1,7 @@
 extends cube_layout
 
 block cube_content
+  include ../flash
   link(rel='stylesheet' href='/css/draft.css')
   br
   if oldformat

views/cube/cube_deckbuilder.pug

@@ -21,6 +21,7 @@ block cube_toolbar
               label(for='customImageDisplayToggle') Show Custom Images
 
 block cube_content
+  include ../flash
   br
   .card.card-hover#deckhover
     .card-header

views/cube/cube_decks.pug

@@ -1,6 +1,7 @@
 extends cube_layout
 
 block cube_content
+  include ../flash
   if pages
     hr
     nav(aria-label='pagination')

views/cube/cube_layout.pug

@@ -22,5 +22,5 @@ block content
         li.nav-item
           a.nav-link(href='/cube/blog/'+cube_id, class=activeLink === 'blog' && 'active') Blog
   block cube_toolbar
-  include ../flash
+  include ../dynamic_flash
   block cube_content

views/cube/cube_overview.pug

@@ -14,6 +14,7 @@ block cube_toolbar
                 a.nav-link(href='#' data-toggle='modal', data-target='#deleteModal') Delete Cube
 
 block cube_content
+  include ../flash
   .row
     .col-md-4
       .card.mt-3

views/cube/cube_samplepack.pug

@@ -1,6 +1,7 @@
 extends cube_layout
 
 block cube_content
+  include ../flash
   .container
     br
     .card

views/dynamic_flash.pug

@@ -0,0 +1 @@
+!= messages('dynamic_message', locals)

views/dynamic_message.pug

@@ -0,0 +1 @@
+input(type='hidden', id='flash', value=JSON.stringify(messages))