Merge with club information

Author: cristianbgp

client/src/components/gallery.js

@@ -3,10 +3,8 @@ 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({ id }) {
-  const clubs = useClubs();
+function Gallery({ club }) {
   const [images, setImages] = React.useState([]);
 
   function getImagesReady(originalArray) {
@@ -16,10 +14,11 @@ function Gallery({ id }) {
       };
     });
   }
+  console.log(club);
 
   React.useEffect(() => {
-    setImages(getImagesReady(clubs[0].image));
-  }, []);
+    setImages(getImagesReady(club ? club.image : []));
+  }, [club]);
 
   return (
     <div
@@ -28,7 +27,7 @@ function Gallery({ id }) {
           objectFit: "cover",
           maxHeight: "45vw",
           "@media screen and (min-width: 530px)": {
-            maxHeight: "300px"
+            height: "300px"
           }
         }
       }}

client/src/index.js

@@ -16,7 +16,6 @@ import CreateSportField from "./views/create-sport-field";
 import OwnerSportField from "./views/owner-sport-field";
 import Clubs from "./views/clubs";
 import Favorites from "./views/favorites";
-import Clubs from "./views/clubs";
 import Navbar from "./components/navbar";
 import { register } from "./service-worker";
 

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