Merge pull request #38 from codeableorg/feature-club-gallery

Regular user can visualize many pictures from the club

Author: cristianbgp

api/app/assets/images/cancha1.jpg

@@ -32,7 +32,7 @@ def set_club
   end
 
   def club_params
-    params.permit(:name, :address, :schedule, :image, :district, :latitude, :longitude)
+    params.permit(:name, :address, :schedule, :district, :latitude, :longitude, image: [])
   end
 
 end

api/app/assets/images/cancha2.jpg

@@ -1,5 +1,5 @@
 class Club < ApplicationRecord
-  has_one_attached :image
+  has_many_attached :image
   has_many :favorites
   has_many :sport_fields
 

api/app/controllers/clubs_controller.rb

@@ -5,7 +5,11 @@ class ClubSerializer < ActiveModel::Serializer
 
   def image
     # rails_blob_path(object.image, only_path: true) if object.image.attached?
-    url_for(object.image) if self.object.image.attached?
+    if self.object.image.attached?
+      object.image.map do |img|
+        url_for(img)
+      end
+    end
   end
 
   def favorited

api/app/models/club.rb

@@ -1,9 +1,14 @@
 puts "Init seed"
+
+def get_image(file_name)
+  { io: File.open(File.join(Rails.root, "/app/assets/images/#{file_name}")), filename: file_name }
+end
+
 User.destroy_all
 regular_user = User.create(name: 'Lian Nivin', email: 'liam@kampu.pe', role: "regular", password: '123456')
 owner_user = User.create(name: 'Cristian Berly', email: 'berli@kampu.pe', role: "owner", password: '123456')
 
-clubs = Club.create([{name: "Club #1", address: 'Jr cayumba 440', district: "Lince", latitude: -12.1199378, longitude: -77.0373161,
+clubs = Club.create([{name: "Club #1", image: get_image("cancha1.jpg"), address: 'Jr cayumba 440', district: "Lince", latitude: -12.1199378, longitude: -77.0373161,
 schedule: {
   'monday-friday': {
     start: '8',

api/app/serializers/club_serializer.rb

@@ -12,6 +12,7 @@
     "leaflet": "^1.5.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-image-gallery": "^0.8.18",
     "react-leaflet": "^2.4.0",
     "react-redux": "^7.1.0",
     "react-scripts": "3.0.1",

api/db/seeds.rb

@@ -0,0 +1,46 @@
+/** @jsx jsx */
+import React from "react";
+import { jsx } from "@emotion/core";
+import "react-image-gallery/styles/css/image-gallery.css";
+import ImageGallery from "react-image-gallery";
+
+function Gallery({ club }) {
+  const [images, setImages] = React.useState([]);
+
+  function getImagesReady(originalArray) {
+    return originalArray.map(element => {
+      return {
+        original: element
+      };
+    });
+  }
+  console.log(club);
+
+  React.useEffect(() => {
+    setImages(getImagesReady(club ? club.image : []));
+  }, [club]);
+
+  return (
+    <div
+      css={{
+        img: {
+          objectFit: "cover",
+          maxHeight: "45vw",
+          "@media screen and (min-width: 530px)": {
+            height: "300px"
+          }
+        }
+      }}
+    >
+      <ImageGallery
+        items={images}
+        showBullets={true}
+        showThumbnails={false}
+        showFullscreenButton={false}
+        showPlayButton={false}
+      />
+    </div>
+  );
+}
+
+export default Gallery;

client/package.json

@@ -13,7 +13,6 @@ async function postClub(club) {
     console.log(errors);
     throw new Error(errors);
   }
-
   return response.json();
 }
 

client/src/components/gallery.js

@@ -4,9 +4,10 @@ import { jsx } from "@emotion/core";
 import { Title, Text, Card } from "../components/ui";
 import { clubData } from "../services/club";
 import SportfieldInfo from "../components/sportfield-info";
+import Gallery from "../components/gallery";
 
 function Clubs({ id }) {
-  const [club, setClub] = React.useState({ sport_fields: [] });
+  const [club, setClub] = React.useState({ sport_fields: [], image: [] });
 
   React.useEffect(() => {
     clubData(id).then(data => {
@@ -20,6 +21,7 @@ function Clubs({ id }) {
 
   return (
     <div>
+      <Gallery club={club} />
       <div
         css={{
           display: "flex",