Change image to accept multiple images

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,12 @@ 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|
+        p "CRIS", url_for(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

@@ -3,18 +3,23 @@ import React from "react";
 import { jsx } from "@emotion/core";
 import "react-image-gallery/styles/css/image-gallery.css";
 import ImageGallery from "react-image-gallery";
+import { useClubs } from "../selectors/selectors";
 
-function Gallery() {
-  const images = [
-    {
-      original:
-        "https://pvpanthers.com/common/controls/image_handler.aspx?thumb_id=0&image_path=/images/2017/2/7/Soccer_Field_1.jpeg"
-    },
-    {
-      original:
-        "https://apelotear.com/media/canchas/8ECE298C-60A2-4E92-8A3A-C4C82EF948AF.jpeg"
-    }
-  ];
+function Gallery({ id }) {
+  const clubs = useClubs();
+  const [images, setImages] = React.useState([]);
+
+  function getImagesReady(originalArray) {
+    return originalArray.map(element => {
+      return {
+        original: element
+      };
+    });
+  }
+
+  React.useEffect(() => {
+    setImages(getImagesReady(clubs[0].image));
+  }, []);
 
   return (
     <div

api/db/seeds.rb

@@ -31,6 +31,7 @@ function CreateClub() {
 
   function handleChange(e) {
     if (e.target.name === "image") {
+      console.log([...e.target.files]);
       setFields({ ...fields, image: e.target.files[0] });
     } else {
       setFields({ ...fields, [e.target.name]: e.target.value });
@@ -129,6 +130,7 @@ function CreateClub() {
             id="image"
             name="image"
             type="file"
+            multiple
             onChange={handleChange}
           />
         </div>