Create Footer component (#499) (#534)

* Create Footer component (#499)

This commit basically should add a footer to the Simple React page,
But The footer logic is used in more than one place so
a Footer component is created and called wherever it is needed.

Resolves #499

* Move Footer to application layout

The Footer should appear in all the pages.

app/views/layouts/application.html.erb

@@ -20,6 +20,8 @@
   <%= yield %>
 </div>
 
+<%= react_component "Footer" %>
+
 <!-- This is a placeholder for ReactOnRails to know where to render the store props for
      client side hydration -->
 <%= redux_store_hydration_data %>

client/app/bundles/comments/components/CommentScreen/CommentScreen.jsx

@@ -39,18 +39,6 @@ export default class CommentScreen extends BaseComponent {
             actions={actions}
             ajaxCounter={data.get('ajaxCounter')}
           />
-          <div className="container">
-            <a href="http://www.shakacode.com">
-              <h3>
-                <div className={css.logo} />
-                Example of styling using image-url and Open Sans Light custom font
-              </h3>
-            </a>
-            <a href="https://twitter.com/railsonmaui">
-              <div className={css.twitterImage} />
-              Rails On Maui on Twitter
-            </a>
-          </div>
         </div>
       </div>
     );

client/app/bundles/comments/components/CommentScreen/CommentScreen.module.scss

@@ -2,16 +2,4 @@
   padding: 1em 1.5em;
 }
 
-.logo {
-  background: url('./images/railsonmaui.png') no-repeat left bottom;
-  display: inline-block;
-  height: 40px;
-  margin-right: 10px;
-  width: 146px;
-}
 
-.twitterImage {
-  background: url('./images/twitter_64.png') no-repeat;
-  height: 64px;
-  width: 64px;
-}

client/app/bundles/comments/components/Footer/Footer.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import BaseComponent from 'libs/components/BaseComponent';
+import css from './Footer.module.scss';
+
+export default class Footer extends BaseComponent {
+  render() {
+    return (
+      <div className="container">
+        <a href="http://www.shakacode.com">
+          <h3>
+            <div className={css.logo} />
+            Example of styling using image-url and Open Sans Light custom font
+          </h3>
+        </a>
+        <a href="https://twitter.com/railsonmaui">
+          <div className={css.twitterImage} />
+          Rails On Maui on Twitter
+        </a>
+      </div>
+    );
+  }
+}

client/app/bundles/comments/components/Footer/Footer.module.scss

@@ -0,0 +1,13 @@
+.logo {
+  background: url('./images/railsonmaui.png') no-repeat left bottom;
+  display: inline-block;
+  height: 40px;
+  margin-right: 10px;
+  width: 146px;
+}
+
+.twitterImage {
+  background: url('./images/twitter_64.png') no-repeat;
+  height: 64px;
+  width: 64px;
+}

client/app/bundles/comments/startup/serverRegistration.jsx

@@ -7,12 +7,14 @@ import SimpleCommentScreen from '../components/SimpleCommentScreen/SimpleComment
 import NavigationBarApp from './NavigationBarApp.jsx';
 import routerCommentsStore from '../store/routerCommentsStore';
 import commentsStore from '../store/commentsStore';
+import Footer from '../components/Footer/Footer';
 
 ReactOnRails.register({
   App,
   RouterApp,
   NavigationBarApp,
   SimpleCommentScreen,
+  Footer,
 });
 
 ReactOnRails.registerStore({

client/app/packs/client-bundle.js

@@ -10,6 +10,7 @@ import SimpleCommentScreen from '../bundles/comments/components/SimpleCommentScr
 import routerCommentsStore from '../bundles/comments/store/routerCommentsStore';
 import commentsStore from '../bundles/comments/store/commentsStore';
 import NavigationBarApp from '../bundles/comments/startup/NavigationBarApp.jsx';
+import Footer from '../bundles/comments/components/Footer/Footer.jsx';
 
 ReactOnRails.setOptions({
   // traceTurbolinks: process.env.TRACE_TURBOLINKS, // eslint-disable-line no-undef
@@ -22,6 +23,7 @@ ReactOnRails.register({
   RouterApp,
   NavigationBarApp,
   SimpleCommentScreen,
+  Footer,
 });
 
 ReactOnRails.registerStore({

client/app/packs/server-bundle.js

@@ -7,12 +7,14 @@ import SimpleCommentScreen from '../bundles/comments/components/SimpleCommentScr
 import NavigationBarApp from '../bundles/comments/startup/NavigationBarApp';
 import routerCommentsStore from '../bundles/comments/store/routerCommentsStore';
 import commentsStore from '../bundles/comments/store/commentsStore';
+import Footer from '../bundles/comments/components/Footer/Footer';
 
 ReactOnRails.register({
   App,
   RouterApp,
   NavigationBarApp,
   SimpleCommentScreen,
+  Footer,
 });
 
 ReactOnRails.registerStore({