Create semantic-ui-react + react-on-rails flash alerts

app/assets/javascripts/application.js

@@ -12,4 +12,5 @@
 //
 //= require rails-ujs
 //= require activestorage
+//= require semantic-ui
 //= require_tree .

app/assets/stylesheets/application.css

@@ -12,4 +12,5 @@
  *
  *= require_tree .
  *= require_self
+ *= require semantic-ui
  */

app/controllers/pokemon_controller.rb

@@ -26,10 +26,10 @@ class PokemonController < ApplicationController
   def destroy
     pokemon = Pokemon.find(params[:id])
     if pokemon.destroy
-      flash.now[:notice] = "Pokemon successfuly deleted."
+      flash.now[:info] = "Pokemon successfuly deleted."
       redirect_to pokemon_index_path
     else
-      flash.now[:alert] = "Failed to delete pokemon."
+      flash.now[:error] = "Failed to delete pokemon."
       render :show
     end
   end
@@ -44,13 +44,13 @@ class PokemonController < ApplicationController
 
     redirect_to pokemon_index_path
   rescue PKParse::Error => e
-    flash.now[:alert] = e.message
+    flash.now[:error] = e.message
     @pokemon = Pokemon.new
     render :new
   rescue ActiveRecord::ActiveRecordError => e
     PKParse.logger.error("Failed to commit parsed results:\n#{e}\n#{e.backtrace.join("\n")}")
 
-    flash.now[:alert] = "Failed to commit the uploaded pokemon."
+    flash.now[:error] = "Failed to commit the uploaded pokemon."
     @pokemon = Pokemon.new
     render :new
   end

app/javascript/packs/react-app/components/misc/flash_alerts.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Message} from 'semantic-ui-react';
+
+class FlashAlerts extends React.Component {
+  render() {
+    let alerts = this.props.alerts.map((alert, i) => {
+      return <Alert key={i} klass={alert.klass} message={alert.message} />;
+    });
+    return alerts;
+  }
+}
+
+export class Alert extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {visible: true};
+  }
+
+  onDismiss = () => {
+    this.setState({visible: false});
+  };
+
+  render() {
+    if (this.state.visible) {
+      return (
+        <Message
+          className={this.props.klass}
+          onDismiss={this.onDismiss}
+          content={this.props.message}
+          {...this.props}
+        />
+      );
+    }
+    return null;
+  }
+}
+
+export default FlashAlerts;

app/javascript/packs/react-bundle.js

@@ -1,6 +1,8 @@
 import ReactOnRails from 'react-on-rails';
 import TestComponent from './react-app/components/test_component';
+import FlashAlerts from './react-app/components/misc/flash_alerts';
 
 ReactOnRails.register({
   TestComponent,
+  FlashAlerts,
 });

app/views/application/_semantic_flash.html.haml

@@ -0,0 +1 @@
+= react_component("FlashAlerts", props: {alerts: flash.map { |k,v| {klass: k, message: v} }})

app/views/layouts/application.html.haml

@@ -6,9 +6,10 @@
     = csrf_meta_tags
     = csp_meta_tag
     = stylesheet_link_tag 'application', media: 'all'
+    -#= javascript_include_tag 'application'
+
     = javascript_pack_tag 'react-bundle'
-    = stylesheet_pack_tag 'react-app/assets/stylesheets/app'
+    -#= stylesheet_pack_tag 'react-app/assets/stylesheets/app'
   %body
-    - flash.each do |key, value|
-      = content_tag :div, value, class: "flash #{key}"
+    = render "semantic_flash"
     = yield