Merge pull request #29 from codeableorg/feature-list-club-favorites

Feature list club favorites

Author: Frank Davis Condezo Fabian

api/app/controllers/clubs_controller.rb

@@ -2,7 +2,11 @@ class ClubsController < ApplicationController
   before_action :set_club, only: [:show, :update, :destroy]
 
   def index
-    render json: Club.all
+    if params[:favorites].present?
+      render json: current_user.clubs
+    else
+      render json: Club.all
+    end
   end
 
   def show

api/app/models/user.rb

@@ -4,6 +4,7 @@ class User < ApplicationRecord
   has_many :bookings
 
   has_many :favorites, dependent: :destroy
+  has_many :clubs, through: :favorites
 
   validates :email, :name, :role, presence: true
   validates :email, uniqueness: true

client/src/actions/action-hooks.js

@@ -1,8 +1,8 @@
 import React from "react";
 import { useDispatch } from "react-redux";
-
 import {
   setClubs,
+  setClubsFavorites,
   setSportFields,
   setFavorite,
   setUnfavorite
@@ -13,6 +13,11 @@ export function useSetClubs() {
   return React.useCallback(clubs => dispatch(setClubs(clubs)), [dispatch]);
 }
 
+export function useSetClubsFavorites() {
+  const dispatch = useDispatch();
+  return React.useCallback(clubs => dispatch(setClubsFavorites(clubs)), [dispatch]);
+}
+
 export function useSetFavorite() {
   const dispatch = useDispatch();
   return React.useCallback(club => dispatch(setFavorite(club)), [dispatch]);

client/src/actions/actions.js

@@ -2,6 +2,10 @@ export function setClubs(clubs) {
   return { type: "SET_CLUBS", payload: clubs };
 }
 
+export function setClubsFavorites(clubs) {
+  return { type: "SET_CLUBS_FAVORITES", payload: clubs };
+}
+
 export function setFavorite(clubs) {
   return { type: "FAVORITED", payload: clubs };
 }

client/src/components/club.js

@@ -75,10 +75,14 @@ function Club({ club }) {
           >
             {club.favorited_count > 0 && club.favorited_count}
           </span>
-          <MapPin width="18px" height="18px" css={styleMapPin} />
-          <span>
-            {club.distance !== 0 ? `${club.distance / 1000.0}km` : null}
-          </span>
+          {club.distance && (
+            <>
+              <MapPin width="18px" height="18px" css={styleMapPin} />
+              <span>
+                {club.distance !== 0 ? `${club.distance / 1000.0}km` : null}
+              </span>
+            </>
+          )}
         </div>
       </div>
     </Card>

client/src/components/navbar.js

@@ -1,41 +1,80 @@
 /** @jsx jsx */
+import React from "react";
 import { jsx } from "@emotion/core";
 import { Link } from "@reach/router";
 
 function Navbar() {
+  const styleMenu = {
+    textDecoration: "none",
+    color: "inherit",
+    padding: "15px",
+    borderRight: "1px solid #ddd",
+    flex: "auto",
+    ":last-child": {
+      border: "none"
+    }
+  };
+
   return (
-    <nav
-      css={{
-        background: "#fff",
-        borderBottom: "1px solid #e5edef",
-        padding: "15px",
-        marginBottom: "2em"
-      }}
-    >
-      <div
+    <>
+      <nav
         css={{
-          maxWidth: "900px",
-          margin: "auto"
+          background: "#fff",
+          borderBottom: "1px solid #e5edef",
+          padding: "15px",
+          marginBottom: "2em",
+          flex: 1
         }}
       >
-        <Link to="/" css={{ textDecoration: "none" }}>
-          <h2
-            css={{
-              textDecoration: "none",
-              margin: "0",
-              fontSize: "35px",
-              fontWeight: "500",
-              backgroundImage:
-                "-webkit-gradient(linear, 0% 0%, 25% 100%,from(#c5e9a1), to(#00b7c6))",
-              WebkitBackgroundClip: "text",
-              WebkitTextFillColor: "transparent"
-            }}
-          >
-            Kampu
-          </h2>
-        </Link>
-      </div>
-    </nav>
+        <div
+          css={{
+            maxWidth: "900px",
+            margin: "auto"
+          }}
+        >
+          <Link to="/" css={{ textDecoration: "none" }}>
+            <h2
+              css={{
+                textDecoration: "none",
+                margin: "0",
+                fontSize: "35px",
+                fontWeight: "500",
+                backgroundImage:
+                  "-webkit-gradient(linear, 0% 0%, 25% 100%,from(#c5e9a1), to(#00b7c6))",
+                WebkitBackgroundClip: "text",
+                WebkitTextFillColor: "transparent"
+              }}
+            >
+              Kampu
+            </h2>
+          </Link>
+        </div>
+        <div
+          css={{
+            position: "fixed",
+            display: "flex",
+            bottom: "1px",
+            background: "#fff",
+            border: "1px solid #ddd",
+            right: "0",
+            left: "0",
+            alignItems: "center",
+            justifyContent: "space-around",
+            textAlign: "center"
+          }}
+        >
+          <Link to="/" css={styleMenu}>
+            Home
+          </Link>
+          <Link to="/favorites" css={styleMenu}>
+            Heart
+          </Link>
+          <Link to="/" css={styleMenu}>
+            Profile
+          </Link>
+        </div>
+      </nav>
+    </>
   );
 }
 

client/src/index.js

@@ -14,6 +14,7 @@ import OwnerHome from "./views/owner-home";
 import CreateClub from "./views/create-club";
 import CreateSportField from "./views/create-sport-field";
 import OwnerSportField from "./views/owner-sport-field";
+import Favorites from "./views/favorites";
 import Navbar from "./components/navbar";
 import { register } from "./service-worker";
 
@@ -26,6 +27,7 @@ function App() {
           maxWidth: "900px",
           margin: "0 auto",
           boxSizing: "border-box",
+          marginBottom: "80px",
           "@media (max-width: 720px)": {
             padding: "0px 15px"
           }
@@ -48,7 +50,11 @@ function App() {
           <OwnerHome path="/owner" />
           <CreateClub path="/create-club" />
           <CreateSportField path="/create-sport-field" />
+<<<<<<< HEAD
           <OwnerSportField path="/owner-sport-field/:id" />
+=======
+          <Favorites path="/favorites" />
+>>>>>>> Get favorite clubs
         </Router>
       </main>
     </>

client/src/reducers/index.js

@@ -43,9 +43,37 @@ export function sportFieldsReducer(state = initialState.sportFields, action) {
   }
 }
 
+export function favoriteClubsReducer(
+  state = initialState.favoriteClubs,
+  action
+) {
+  switch (action.type) {
+    case "SET_CLUBS_FAVORITES": {
+      return action.payload;
+    }
+    case "FAVORITED":
+    case "UNFAVORITED": {
+      return state.map(club => {
+        if (club.id === action.payload.id) {
+          return {
+            ...club,
+            favorited: action.payload.favorited,
+            favorited_count: action.payload.favorited_count
+          };
+        }
+        return club;
+      });
+    }
+    default: {
+      return state;
+    }
+  }
+}
+
 const reducer = combineReducers({
   clubs: clubsReducer,
-  sportFields: sportFieldsReducer
+  sportFields: sportFieldsReducer,
+  favoriteClubs: favoriteClubsReducer
 });
 
 export default reducer;

client/src/selectors/selectors.js

@@ -4,8 +4,12 @@ function useClubs() {
   return useSelector(state => state.clubs, shallowEqual);
 }
 
+function useClubsFavorites() {
+  return useSelector(state => state.favoriteClubs, shallowEqual);
+}
+
 function useSportFields() {
   return useSelector(state => state.sportFields, shallowEqual);
 }
 
-export { useClubs, useSportFields };
+export { useClubs, useSportFields, useClubsFavorites };

client/src/services/club.js

@@ -26,6 +26,15 @@ async function getClubs() {
   return response.json();
 }
 
+async function getFavoriteClubs() {
+  const response = await fetch(`${apiUrl}/clubs?favorites=true`, {
+    credentials: "include"
+  });
+
+  if (!response.ok) throw new Error(response.statusText);
+  return response.json();
+}
+
 async function favorite(clubId) {
   const response = await fetch(`${apiUrl}/clubs/${clubId}/favorites`, {
     credentials: "include",
@@ -48,4 +57,4 @@ async function unfavorite(clubId) {
   return response.json();
 }
 
-export { getClubs, postClub, favorite, unfavorite };
+export { getClubs, postClub, favorite, unfavorite, getFavoriteClubs };