Add redux to favorite clubs

Author: condef5

api/db/schema.rb

@@ -69,15 +69,6 @@
     t.index ["user_id"], name: "index_favorites_on_user_id"
   end
 
-  create_table "favorites", force: :cascade do |t|
-    t.bigint "club_id"
-    t.bigint "user_id"
-    t.datetime "created_at", null: false
-    t.datetime "updated_at", null: false
-    t.index ["club_id"], name: "index_favorites_on_club_id"
-    t.index ["user_id"], name: "index_favorites_on_user_id"
-  end
-
   create_table "sport_fields", force: :cascade do |t|
     t.string "name"
     t.string "description"

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/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/views/favorites.js

@@ -2,19 +2,18 @@
 import React from "react";
 import { jsx } from "@emotion/core";
 import { getFavoriteClubs } from "../services/club";
-import { useClubs } from "../selectors/selectors";
-import { useSetClubs } from "../actions/action-hooks";
+import { useClubsFavorites } from "../selectors/selectors";
+import { useSetClubsFavorites } from "../actions/action-hooks";
 import Club from "../components/club";
 
 function Home() {
   const [loading, setLoading] = React.useState(false);
-  const [clubs, setClubs] = React.useState([]);
-  // const setClubs = useSetClubs();
+  const clubs = useClubsFavorites();
+  const setClubs = useSetClubsFavorites();
 
   React.useEffect(() => {
     setLoading(true);
     getFavoriteClubs().then(clubs => {
-      console.log(clubs);
       setClubs(clubs);
       setLoading(false);
     });