Merge pull request #9 from jeremykirc/add-react-router

Add react router
jeremykirc · Jun 25, 2020 · c9d1f77 · c9d1f77
2 parents 763e182 + ab06c92
commit c9d1f77
Show file tree

Hide file tree

Showing 84 changed files with 357 additions and 116 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -39,3 +39,4 @@ yarn-debug.log*
 *.swo
 /log
 /tmp
+.DS_store
diff --git a/app/.DS_Store b/app/.DS_Store
diff --git a/app/controllers/api/v1/images_controller.rb b/app/controllers/api/v1/images_controller.rb
@@ -0,0 +1,44 @@
+
+module Api
+  module V1
+    class ImagesController < ParentController
+      # GET /images/test_grid_data
+      # Return test image grid data.
+      def test_grid_data
+        render json: test_image_grid_data
+      end
+
+      private
+
+      def test_image_grid_data
+        [
+          {
+            title: 'Egg on Waffle',
+            description: 'Test1',
+            url: 'EggOnWaffle.jpg'
+          },
+          {
+            title: 'Roasted Carrots with Lentils',
+            description: 'Test2',
+            url: 'RoastedCarrotsAndLentils.jpg'
+          },
+          {
+            title: 'Mole Taco',
+            description: 'Test3',
+            url: 'MoleTaco.jpg'
+          },
+          {
+            title: 'Burrata and Orange',
+            description: 'Test4',
+            url: 'OttelenghiBurrataOrange.jpg'
+          },
+          {
+            title: 'Apricot Lavender Cake',
+            description: 'Test5',
+            url: 'ApricotLavenderCake.jpg'
+          }
+        ]
+      end 
+    end
+  end
+end
diff --git a/app/controllers/api/v1/parent_controller.rb b/app/controllers/api/v1/parent_controller.rb
@@ -0,0 +1,6 @@
+module Api
+  module V1
+    class ParentController < ApplicationController
+    end
+  end
+end
diff --git a/app/controllers/static_pages_controller.rb b/app/controllers/static_pages_controller.rb
@@ -1,3 +1,3 @@
 class StaticPagesController < ApplicationController
-  def home; end
+  def index; end
 end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -1,16 +1,2 @@
 module ApplicationHelper
-  def image_grid_data
-    [
-      {
-        title: 'Pacific Ocean',
-        description: 'A big blue ocean',
-        url: asset_pack_path('media/images/Ocean.jpg')
-      },
-      {
-        title: 'Santa Barbara Mission',
-        description: 'The mission on a sunny afternoon',
-        url: asset_pack_path('media/images/SbMission.jpg')
-      }
-    ]
-  end
 end
diff --git a/app/javascript/components/ImageGrid.jsx b/app/javascript/components/ImageGrid.jsx
diff --git a/app/javascript/components/Welcome.jsx b/app/javascript/components/Welcome.jsx
diff --git a/app/javascript/images/Ocean.jpg b/app/javascript/images/Ocean.jpg
diff --git a/app/javascript/images/SbMission.jpg b/app/javascript/images/SbMission.jpg
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -12,12 +12,6 @@
     <%= render 'layouts/shim' %>
   </head>
   <body id='<%= yield(:page_id)%>'>
-    <%= render 'layouts/header' %>
-    <div class='wrapper'>
-      <div class='container'>
-        <%= render 'layouts/flash_messages' %>
-        <%= yield %>
-      </div>
-    </div>
+    <%= yield %>
   </body>
 </html>
diff --git a/app/views/static_pages/home.html.erb b/app/views/static_pages/home.html.erb
diff --git a/app/views/static_pages/index.html.erb b/app/views/static_pages/index.html.erb
@@ -0,0 +1 @@
+<%= react_component('AppRouter') %>
diff --git a/app/webpack/.DS_Store b/app/webpack/.DS_Store
diff --git a/app/javascript/channels/consumer.js → app/webpack/channels/consumer.js b/app/javascript/channels/consumer.js → app/webpack/channels/consumer.js
diff --git a/app/javascript/channels/index.js → app/webpack/channels/index.js b/app/javascript/channels/index.js → app/webpack/channels/index.js
diff --git a/app/javascript/components/.keep → app/webpack/components/.keep b/app/javascript/components/.keep → app/webpack/components/.keep
diff --git a/app/webpack/components/AppRouter.js b/app/webpack/components/AppRouter.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Container } from 'react-bootstrap';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+
+import Header from '../components/Header';
+import Home from '../components/Home';
+import ImageUpload from '../components/ImageUpload';
+import NotFound from '../components/NotFound';
+
+const AppRouter = () => (
+  <BrowserRouter>
+    <Header />
+    <Container>
+      <Switch>
+        <Route path='/' component={Home} exact />
+        <Route path='/images/new' component={ImageUpload} />
+        <Route component={NotFound} />
+      </Switch>
+    </Container>
+  </BrowserRouter>
+);
+
+export default AppRouter;
diff --git a/app/webpack/components/Header.js b/app/webpack/components/Header.js
@@ -0,0 +1,37 @@
+import logo from 'images/text-with-whisk-color.png';
+import React from 'react';
+import { Container } from 'react-bootstrap';
+import { NavLink } from 'react-router-dom';
+
+const Header = () => (
+  <nav className='navbar navbar-expand-sm sticky-top navbar-light'>
+    <Container>
+      <div id='nav-logo'>
+        <NavLink to='/' exact>
+          <img src={logo} />
+        </NavLink>
+      </div>
+      <button className='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarNavDropdown' aria-controls='navbarNavDropdown' aria-expanded='false' aria-label='Toggle navigation'>
+        <span className='navbar-toggler-icon'></span>
+      </button>
+      <div className='collapse navbar-collapse' id='navbarNavDropdown'>
+        <ul className='navbar-nav'>
+          <li className='nav-item dropdown'>
+            <a className='nav-link dropdown-toggle' href='/#' id='navbarDropdownMenuLink' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+              Dropdown
+            </a>
+            <div className='dropdown-menu' aria-labelledby='navbarDropdownMenuLink'>
+              <NavLink to='/' exact className='dropdown-item'>Home</NavLink>
+              <NavLink to='/images/new' className='dropdown-item'>Upload Image</NavLink>
+            </div>
+          </li>
+          <li className='nav-item'>
+            <NavLink to='/sign_in' className='nav-link'>Sign in</NavLink>
+          </li>
+        </ul>
+      </div>
+    </Container>
+  </nav>
+);
+
+export default Header;
diff --git a/app/webpack/components/Home.js b/app/webpack/components/Home.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import ImageGrid from './ImageGrid';
+
+const Home = () => {
+  return (
+    <ImageGrid />
+  );
+};
+
+export default Home;
diff --git a/app/javascript/components/ImageBox.jsx → app/webpack/components/ImageBox.js b/app/javascript/components/ImageBox.jsx → app/webpack/components/ImageBox.js
diff --git a/app/webpack/components/ImageGrid.js b/app/webpack/components/ImageGrid.js
@@ -0,0 +1,50 @@
+import axios from 'axios';
+import React, { useEffect,useState } from 'react';
+import { Container, Row } from 'react-bootstrap';
+
+import ImageBox from './ImageBox';
+import ImageModal from './ImageModal';
+
+const ImageGrid = () => {
+  const [isModalShown, setIsModalShown] = useState(false);
+  const [imageInfo, setImageInfo] = useState({ title: '', description: '', url: '' });
+  const [imageBoxes, setImageBoxes] = useState();
+
+  useEffect(() => {
+    axios.get('/api/v1/images/test_grid_data')
+    .then(response => {
+      setImageBoxes(generateImageBoxes(response.data));
+    })
+    .catch(error => console.error(error));
+  }, []);
+
+  const showModal = (imageData) => {
+    setImageInfo(imageData);
+    setIsModalShown(true);
+  };
+
+  const hideModal = () => setIsModalShown(false);
+
+  const generateImageBoxes = (imageGridData) => {
+    return imageGridData.map((imageData, i) => (
+      <ImageBox
+        key={i}
+        imageInfo={imageData}
+        handleImageBoxClick={showModal}
+      />
+    ));
+  };
+
+  return (
+    <Container className='image-grid'>
+      <Row>{imageBoxes}</Row>
+      <ImageModal
+        show={isModalShown}
+        imageInfo={imageInfo}
+        handleClose={hideModal}
+      />
+    </Container>
+  );
+};
+
+export default ImageGrid;
diff --git a/app/javascript/components/ImageModal.jsx → app/webpack/components/ImageModal.js b/app/javascript/components/ImageModal.jsx → app/webpack/components/ImageModal.js
diff --git a/app/javascript/components/ImageUpload.jsx → app/webpack/components/ImageUpload.js b/app/javascript/components/ImageUpload.jsx → app/webpack/components/ImageUpload.js
diff --git a/app/webpack/components/NotFound.js b/app/webpack/components/NotFound.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const NotFoundPage = () => (
+  <div>
+    Page Not Found - <Link to='/'>Return to home</Link>
+  </div>
+);
+
+export default NotFoundPage;
diff --git a/app/javascript/fonts/Hind-Bold.ttf → app/webpack/fonts/Hind-Bold.ttf b/app/javascript/fonts/Hind-Bold.ttf → app/webpack/fonts/Hind-Bold.ttf
diff --git a/app/javascript/fonts/Hind-Light.ttf → app/webpack/fonts/Hind-Light.ttf b/app/javascript/fonts/Hind-Light.ttf → app/webpack/fonts/Hind-Light.ttf
diff --git a/app/javascript/fonts/Hind-Medium.ttf → app/webpack/fonts/Hind-Medium.ttf b/app/javascript/fonts/Hind-Medium.ttf → app/webpack/fonts/Hind-Medium.ttf
diff --git a/app/javascript/fonts/Hind-Regular.ttf → app/webpack/fonts/Hind-Regular.ttf b/app/javascript/fonts/Hind-Regular.ttf → app/webpack/fonts/Hind-Regular.ttf
diff --git a/app/javascript/fonts/Hind-SemiBold.ttf → app/webpack/fonts/Hind-SemiBold.ttf b/app/javascript/fonts/Hind-SemiBold.ttf → app/webpack/fonts/Hind-SemiBold.ttf
diff --git a/app/javascript/fonts/OFL.txt → app/webpack/fonts/OFL.txt b/app/javascript/fonts/OFL.txt → app/webpack/fonts/OFL.txt
diff --git a/app/javascript/helpers/crop-image.js → app/webpack/helpers/crop-image.js b/app/javascript/helpers/crop-image.js → app/webpack/helpers/crop-image.js
diff --git a/app/javascript/helpers/shared-prop-types.js → app/webpack/helpers/shared-prop-types.js b/app/javascript/helpers/shared-prop-types.js → app/webpack/helpers/shared-prop-types.js
diff --git a/app/javascript/images/.keep → app/webpack/images/.keep b/app/javascript/images/.keep → app/webpack/images/.keep
diff --git a/...javascript/images/ApricotLavenderCake.JPG → app/webpack/images/ApricotLavenderCake.jpg b/...javascript/images/ApricotLavenderCake.JPG → app/webpack/images/ApricotLavenderCake.jpg
diff --git a/app/javascript/images/BurrataSageToasts.JPG → app/webpack/images/BurrataSageToasts.jpg b/app/javascript/images/BurrataSageToasts.JPG → app/webpack/images/BurrataSageToasts.jpg
diff --git a/app/javascript/images/Champagne.JPG → app/webpack/images/Champagne.jpg b/app/javascript/images/Champagne.JPG → app/webpack/images/Champagne.jpg
diff --git a/app/javascript/images/CheeseFruitPlate.JPG → app/webpack/images/CheeseFruitPlate.jpg b/app/javascript/images/CheeseFruitPlate.JPG → app/webpack/images/CheeseFruitPlate.jpg
diff --git a/app/javascript/images/EggInFlour.JPG → app/webpack/images/EggInFlour.jpg b/app/javascript/images/EggInFlour.JPG → app/webpack/images/EggInFlour.jpg
diff --git a/app/javascript/images/EggOnWaffle.JPG → app/webpack/images/EggOnWaffle.jpg b/app/javascript/images/EggOnWaffle.JPG → app/webpack/images/EggOnWaffle.jpg
diff --git a/app/javascript/images/EggsOJBacon.JPG → app/webpack/images/EggsOJBacon.jpg b/app/javascript/images/EggsOJBacon.JPG → app/webpack/images/EggsOJBacon.jpg
diff --git a/...avascript/images/FarmersMarketBerries.JPG → app/webpack/images/FarmersMarketBerries.jpg b/...avascript/images/FarmersMarketBerries.JPG → app/webpack/images/FarmersMarketBerries.jpg
diff --git a/...javascript/images/FarmersMarketSquash.JPG → app/webpack/images/FarmersMarketSquash.jpg b/...javascript/images/FarmersMarketSquash.JPG → app/webpack/images/FarmersMarketSquash.jpg
diff --git a/app/javascript/images/FigMtnBeer.jpg → app/webpack/images/FigMtnBeer.jpg b/app/javascript/images/FigMtnBeer.jpg → app/webpack/images/FigMtnBeer.jpg
diff --git a/app/javascript/images/FigSalad.JPG → app/webpack/images/FigSalad.jpg b/app/javascript/images/FigSalad.JPG → app/webpack/images/FigSalad.jpg
diff --git a/app/javascript/images/LedlowBreakfast.jpg → app/webpack/images/LedlowBreakfast.jpg b/app/javascript/images/LedlowBreakfast.jpg → app/webpack/images/LedlowBreakfast.jpg
diff --git a/app/javascript/images/MoleTaco.jpg → app/webpack/images/MoleTaco.jpg b/app/javascript/images/MoleTaco.jpg → app/webpack/images/MoleTaco.jpg
diff --git a/...script/images/OttelenghiBurrataOrange.JPG → ...ebpack/images/OttelenghiBurrataOrange.jpg b/...script/images/OttelenghiBurrataOrange.JPG → ...ebpack/images/OttelenghiBurrataOrange.jpg
diff --git a/...cript/images/RoastedCarrotsAndLentils.JPG → ...bpack/images/RoastedCarrotsAndLentils.jpg b/...cript/images/RoastedCarrotsAndLentils.JPG → ...bpack/images/RoastedCarrotsAndLentils.jpg
diff --git a/app/javascript/images/Sushi.JPG → app/webpack/images/Sushi.jpg b/app/javascript/images/Sushi.JPG → app/webpack/images/Sushi.jpg
diff --git a/app/javascript/images/TableAndChairs.JPG → app/webpack/images/TableAndChairs.jpg b/app/javascript/images/TableAndChairs.JPG → app/webpack/images/TableAndChairs.jpg
diff --git a/app/javascript/images/ValleyProjectWine.jpg → app/webpack/images/ValleyProjectWine.jpg b/app/javascript/images/ValleyProjectWine.jpg → app/webpack/images/ValleyProjectWine.jpg
diff --git a/app/javascript/images/VeggieTaco.jpg → app/webpack/images/VeggieTaco.jpg b/app/javascript/images/VeggieTaco.jpg → app/webpack/images/VeggieTaco.jpg
diff --git a/app/javascript/images/WoodFiredPizza.JPG → app/webpack/images/WoodFiredPizza.JPG b/app/javascript/images/WoodFiredPizza.JPG → app/webpack/images/WoodFiredPizza.JPG
diff --git a/app/javascript/images/favicon.ico → app/webpack/images/favicon.ico b/app/javascript/images/favicon.ico → app/webpack/images/favicon.ico
diff --git a/app/javascript/images/text-color.png → app/webpack/images/text-color.png b/app/javascript/images/text-color.png → app/webpack/images/text-color.png
diff --git a/app/javascript/images/text-white.png → app/webpack/images/text-white.png b/app/javascript/images/text-white.png → app/webpack/images/text-white.png
diff --git a/...vascript/images/text-with-whisk-color.png → app/webpack/images/text-with-whisk-color.png b/...vascript/images/text-with-whisk-color.png → app/webpack/images/text-with-whisk-color.png
diff --git a/...vascript/images/text-with-whisk-white.png → app/webpack/images/text-with-whisk-white.png b/...vascript/images/text-with-whisk-white.png → app/webpack/images/text-with-whisk-white.png
diff --git a/app/javascript/packs/application.js → app/webpack/packs/application.js b/app/javascript/packs/application.js → app/webpack/packs/application.js
diff --git a/app/javascript/packs/server_rendering.js → app/webpack/packs/server_rendering.js b/app/javascript/packs/server_rendering.js → app/webpack/packs/server_rendering.js
diff --git a/app/javascript/stylesheets/application.scss → app/webpack/stylesheets/application.scss b/app/javascript/stylesheets/application.scss → app/webpack/stylesheets/application.scss
diff --git a/app/javascript/stylesheets/colors.scss → app/webpack/stylesheets/colors.scss b/app/javascript/stylesheets/colors.scss → app/webpack/stylesheets/colors.scss
diff --git a/app/javascript/stylesheets/fonts.scss → app/webpack/stylesheets/fonts.scss b/app/javascript/stylesheets/fonts.scss → app/webpack/stylesheets/fonts.scss
diff --git a/app/javascript/stylesheets/forms.scss → app/webpack/stylesheets/forms.scss b/app/javascript/stylesheets/forms.scss → app/webpack/stylesheets/forms.scss
diff --git a/app/javascript/stylesheets/header.scss → app/webpack/stylesheets/header.scss b/app/javascript/stylesheets/header.scss → app/webpack/stylesheets/header.scss
@@ -1,5 +1,5 @@
 #nav-logo {
-  margin: 15px 20px;
+  margin: 15px 8px;
   float: left;
   img {
     height: 40px;
@@ -8,10 +8,11 @@
 
 .navbar {
   background-color: $white;
+  padding: 8px 0px;
   .navbar-nav {
     float: none;
     margin-left: auto;
-    margin-right: 20px;
+    margin-right: 0px;
     text-align: center;
     font-size: 14px;
     font-weight: 600;
@@ -31,7 +32,7 @@
         letter-spacing: 0.5px;
         text-transform: uppercase;
         color: $white !important;
-        &:hover, &:focus, &:active, &:active:hover, &:active:focus {
+        &:hover, &:focus, &:active, &:active:hover, &:active:focus, &.active {
           background-color: $primary-dark;
         }
       }

diff --git a/...javascript/stylesheets/image_cropper.scss → app/webpack/stylesheets/image_cropper.scss b/...javascript/stylesheets/image_cropper.scss → app/webpack/stylesheets/image_cropper.scss
diff --git a/app/javascript/stylesheets/image_grid.scss → app/webpack/stylesheets/image_grid.scss b/app/javascript/stylesheets/image_grid.scss → app/webpack/stylesheets/image_grid.scss
@@ -1,5 +1,5 @@
 .image-grid {
-  margin-left: 3%;
+  margin-left: 2%;
   margin-top: 30px;
   .image-box-container {
     padding: 0px;
@@ -33,7 +33,7 @@
     }
   }
   @media (max-width: 767px) {
-    margin-left: 4%;
+    margin-left: 3%;
     .image-box, .image-info {
       height: 42vw !important;
       max-width: 42vw !important;

diff --git a/app/javascript/stylesheets/layout.scss → app/webpack/stylesheets/layout.scss b/app/javascript/stylesheets/layout.scss → app/webpack/stylesheets/layout.scss
@@ -46,6 +46,7 @@
 
 .container {
   max-width: 98% !important;
+  padding: 0px 15px !important;
 }
 
 body {

diff --git a/app/javascript/stylesheets/mixins.scss → app/webpack/stylesheets/mixins.scss b/app/javascript/stylesheets/mixins.scss → app/webpack/stylesheets/mixins.scss
diff --git a/...vascript/tests/helpers/crop-image.spec.js → app/webpack/tests/helpers/crop-image.spec.js b/...vascript/tests/helpers/crop-image.spec.js → app/webpack/tests/helpers/crop-image.spec.js
diff --git a/config/routes.rb b/config/routes.rb
@@ -1,6 +1,11 @@
 Rails.application.routes.draw do
   # Set static page paths.
-  root to: 'static_pages#home'
+  root to: 'static_pages#index'
+
+  # Forward all non-Ajax/non-API requests with HTML Mime type to index page.
+  get '*page', to: 'static_pages#index', constraints: ->(req) do
+    !req.xhr? && req.format.html? && req.path.exclude?('/api/')
+  end
 
   # Set paths for signups.
   get '/signup',    to: 'users#new'
@@ -11,6 +16,12 @@
   delete '/logout', to: 'sessions#destroy'
 
   # Set paths for images.
-  resources :images, only: %i[new]
   post '/upload', to: 'images#upload'
+
+  # Set paths for the API.
+  namespace :api do
+    namespace :v1 do
+      get '/images/test_grid_data', to: 'images#test_grid_data'
+    end
+  end
 end
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,3 +39,4 @@ yarn-debug.log* @@
     *.swo
     /log
     /tmp
+    .DS_store