WIP: Index cards react

Gemfile

@@ -28,6 +28,7 @@ gem 'geocoder'
 
 gem 'cloudinary', '~> 1.12.0'
 gem 'pundit'
+gem 'react-rails'
 
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', '>= 1.4.2', require: false

Gemfile.lock

@@ -61,6 +61,10 @@ GEM
     autoprefixer-rails (9.7.6)
       execjs
     aws_cf_signer (0.1.3)
+    babel-source (5.8.35)
+    babel-transpiler (0.7.0)
+      babel-source (>= 4.0, < 6)
+      execjs (~> 2.0)
     bcrypt (3.1.13)
     bindex (0.8.1)
     bootsnap (1.4.6)
@@ -81,6 +85,7 @@ GEM
       rest-client
     coderay (1.1.2)
     concurrent-ruby (1.1.6)
+    connection_pool (2.2.3)
     crass (1.0.6)
     devise (4.7.1)
       bcrypt (~> 3.0)
@@ -188,6 +193,12 @@ GEM
     rb-fsevent (0.10.3)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
+    react-rails (2.6.1)
+      babel-transpiler (>= 0.7.0)
+      connection_pool
+      execjs
+      railties (>= 3.2)
+      tilt
     regexp_parser (1.7.0)
     responders (3.0.0)
       actionpack (>= 5.0)
@@ -282,6 +293,7 @@ DEPENDENCIES
   puma (~> 4.1)
   pundit
   rails (~> 6.0.2, >= 6.0.2.2)
+  react-rails
   sass-rails (>= 6)
   selenium-webdriver
   simple_form

app/javascript/components/HelloWorld.js

@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+import FaceIcon from "@material-ui/icons/Face";
+
+class HelloWorld extends React.Component {
+  render() {
+    return (
+      <React.Fragment>
+        Greeting: {this.props.greeting}
+        <FaceIcon />
+      </React.Fragment>
+    );
+  }
+}
+
+HelloWorld.propTypes = {
+  greeting: PropTypes.string,
+};
+export default HelloWorld;

app/javascript/components/SimpleCard.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles({
+  root: {
+    minWidth: 275,
+  },
+  bullet: {
+    display: 'inline-block',
+    margin: '0 2px',
+    transform: 'scale(0.8)',
+  },
+  title: {
+    fontSize: 14,
+  },
+  pos: {
+    marginBottom: 12,
+  },
+});
+
+export default function SimpleCard (props) {
+  const classes = useStyles();
+  const bull = <span className={classes.bullet}>•</span>;
+
+  return (
+    <Card className={classes.root}>
+      <CardContent>
+        <Typography className={classes.title} color="textSecondary" gutterBottom>
+          Word of the Day {props.something}
+        </Typography>
+        <Typography variant="h5" component="h2">
+          be{bull}nev{bull}o{bull}lent
+        </Typography>
+        <Typography className={classes.pos} color="textSecondary">
+          adjective
+        </Typography>
+        <Typography variant="body2" component="p">
+          well meaning and kindly.
+          <br />
+          {'"a benevolent smile"'}
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button size="small">Learn More</Button>
+      </CardActions>
+    </Card>
+  );
+}

app/javascript/packs/application.js

@@ -36,3 +36,7 @@ document.addEventListener('turbolinks:load', () => {
   initMapbox();
   initAutocomplete();
 });
+// Support component names relative to this directory:
+var componentRequireContext = require.context("components", true);
+var ReactRailsUJS = require("react_ujs");
+ReactRailsUJS.useContext(componentRequireContext);

app/javascript/packs/hello_react.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+
+const Hello = (props) => <div>Hello {props.name}!</div>;
+
+Hello.defaultProps = {
+  name: "David",
+};
+
+Hello.propTypes = {
+  name: PropTypes.string,
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+  ReactDOM.render(
+    <Hello name="React" />,
+    document.body.appendChild(document.createElement("div"))
+  );
+});

app/javascript/packs/server_rendering.js

@@ -0,0 +1,5 @@
+// By default, this pack is loaded for server-side rendering.
+// It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
+var componentRequireContext = require.context("components", true);
+var ReactRailsUJS = require("react_ujs");
+ReactRailsUJS.useContext(componentRequireContext);

app/views/adventures/index.html.erb

@@ -2,7 +2,6 @@
 <div class="banner" style="background-image: linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.2)), url('<%= cl_image_path('banner_yospke') %>');">
 <!-- <div class="banner" style="background-image: linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.2)), url(https://images.unsplash.com/photo-1582866143347-8f3efbeb44c9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);"> -->
 <!-- <div class="banner" style="background-image: linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.2)), url(https://images.pexels.com/photos/130111/pexels-photo-130111.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);"> -->
-
   <div class="container">
 
     <h1>Mini Adventure Guide</h1>
@@ -33,26 +32,7 @@
       <!-- top 5 cards -->
       <h2>Top 5 Mini Adventures</h2>
       <% @top_adventures.each_with_index do |adventure, index| %>
-        <%= link_to adventure_path(adventure), class: "card-product", style: "width:95%", id: 'card-link-text' do %>
-            <% if adventure.photo.present? %>
-              <%= cl_image_tag(adventure.photo.key, width:120, height:120) %>
-            <% else %>
-              <img src="https://loremflickr.com/120/120/nature?random=<%= index.to_s %>">
-            <% end %>
-
-            <div class="card-product-infos", style="width:70%">
-              <div><%= adventure.title %>
-                <p><% adventure.avg_rating.round.times do %>
-                  <span style="font-size: 9pt" class="fas fa-star"></span>
-                <% end %>
-                <% (5 - adventure.avg_rating.round).times do  %>
-                  <span style="font-size: 9pt" class="far fa-star"></span>
-                <% end %>
-                <span style="font-size: 9pt"> (<%= adventure.avg_rating.round(1) %>) | Category: <%= adventure.category %></span>
-                </p>
-              </div>
-            </div>
-        <% end %>
+        <%= react_component("SimpleCard", { something: "I am a title." })  %>
       <% end %>
     </div>
   </div>

app/views/shared/_navbar.html.erb

@@ -4,6 +4,8 @@
   <h3 class="mb-0 p-1">
       <%= link_to "/", class: "navbar-brand" do %>
         <%= image_tag "logo_smcompass1.png", class: "avatar"%>
+        <%# This is for demonstration purposes only %>
+        <%= react_component("HelloWorld", { greeting: "Hello from react-rails!" }) %>
         <% end %>
         <% if current_user.nil? %>
           <%= "" %>

babel.config.js

@@ -22,8 +22,10 @@ module.exports = function(api) {
         {
           targets: {
             node: 'current'
-          }
-        }
+          },
+          modules: 'commonjs'
+        },
+        '@babel/preset-react'
       ],
       (isProductionEnv || isDevelopmentEnv) && [
         '@babel/preset-env',
@@ -34,6 +36,13 @@ module.exports = function(api) {
           modules: false,
           exclude: ['transform-typeof-symbol']
         }
+      ],
+      [
+        '@babel/preset-react',
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        }
       ]
     ].filter(Boolean),
     plugins: [
@@ -66,6 +75,12 @@ module.exports = function(api) {
         {
           async: false
         }
+      ],
+      isProductionEnv && [
+        'babel-plugin-transform-react-remove-prop-types',
+        {
+          removeImport: true
+        }
       ]
     ].filter(Boolean)
   }

config/webpacker.yml

@@ -34,6 +34,7 @@ default: &default
     - .woff2
 
   extensions:
+    - .jsx
     - .mjs
     - .js
     - .sass