Regular user can visualize many pictures from the club

api/app/controllers/clubs_controller.rb

@@ -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/models/club.rb

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

api/app/serializers/club_serializer.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/db/seeds.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',

client/package.json

@@ -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",

client/src/components/gallery.js

@@ -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/src/services/club.js

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

client/src/views/clubs.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",

client/src/views/create-club.js

@@ -11,7 +11,7 @@ function CreateClub() {
     name: "",
     address: "",
     district: "",
-    image: null
+    image: []
   });
   const [schedule, setSchedule] = React.useState({
     "monday-friday": {
@@ -31,7 +31,7 @@ function CreateClub() {
 
   function handleChange(e) {
     if (e.target.name === "image") {
-      setFields({ ...fields, image: e.target.files[0] });
+      setFields({ ...fields, image: [...fields.image, ...e.target.files] });
     } else {
       setFields({ ...fields, [e.target.name]: e.target.value });
     }
@@ -49,7 +49,13 @@ function CreateClub() {
     e.preventDefault();
     const formData = new FormData();
     Object.keys(fields).forEach(key => {
-      formData.append(key, fields[key]);
+      if (key === "image") {
+        fields[key].forEach(file => {
+          formData.append("image[]", file);
+        });
+      } else {
+        formData.append(key, fields[key]);
+      }
     });
     const { results } = await getCoords(
       `${fields.address}, ${fields.district}`
@@ -129,6 +135,7 @@ function CreateClub() {
             id="image"
             name="image"
             type="file"
+            multiple
             onChange={handleChange}
           />
         </div>

client/yarn.lock

@@ -6089,6 +6089,11 @@ lodash._reinterpolate@~3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -6119,6 +6124,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.unescape@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
@@ -7933,7 +7943,7 @@ prompts@^2.0.1:
     kleur "^3.0.2"
     sisteransi "^1.0.0"
 
-prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8149,6 +8159,18 @@ react-error-overlay@^5.1.6:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d"
   integrity sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q==
 
+react-image-gallery@^0.8.18:
+  version "0.8.18"
+  resolved "https://registry.yarnpkg.com/react-image-gallery/-/react-image-gallery-0.8.18.tgz#bfc4698cbe22cbaa0b4e000994e7d248b2f098f2"
+  integrity sha512-2uRF4+wTm3oLj+ijJkcTpgH55V+QHKPjItJocNY/MFGIqK+qeNx3mBzxWaPUP8hX6onwGHY/zRos7zIkSQFqsw==
+  dependencies:
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
+    prop-types "^15.5.8"
+    react "^16.4.0"
+    react-swipeable "^5.2.0"
+    resize-observer-polyfill "^1.5.0"
+
 react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
@@ -8241,7 +8263,14 @@ react-scripts@3.0.1:
   optionalDependencies:
     fsevents "2.0.6"
 
-react@^16.8.6:
+react-swipeable@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-5.3.0.tgz#861bcecab2d5ff462e5737b1a20da2bfe35d8b21"
+  integrity sha512-mOfRfPxbcfl0jC/3DHSYWRkTElr8aU+ZVc4qv+VOhOQfw8+UM7Mhlky+1YhpRQ/5F9NRR36NZHhHP0kC1yEjGQ==
+  dependencies:
+    prop-types "^15.6.2"
+
+react@^16.4.0, react@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
   integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
@@ -8531,6 +8560,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"