Connect API with frontend to Owner Clubs view

Author: cristianbgp

.gitignore

@@ -48,3 +48,4 @@ client/npm-debug.log*
 client/yarn-debug.log*
 client/yarn-error.log*
 
+.env

api/app/controllers/clubs_controller.rb

@@ -0,0 +1,25 @@
+class ClubsController < ApplicationController
+  before_action :set_club, only: [:show, :update, :destroy]
+
+  def index
+    render json: Club.all
+  end
+
+  def show
+    render json: @club
+  end
+
+  rescue_from ActiveRecord::RecordNotFound do |e|
+    render json: { message: e.message }, status: :not_found
+  end
+
+  private    
+  def set_club
+    @club = Club.find(params[:id])
+  end
+
+  def club_params
+    params.permit(:name, :email, :city, :country,  :address, :image, gallery: [])
+  end
+
+end

api/config/routes.rb

@@ -1,10 +1,9 @@
 Rails.application.routes.draw do
   scope '/api' do
-    # sessions routes
     post '/login', to: 'sessions#login'
     post '/register', to: 'sessions#register'
-
     delete '/logout', to: 'sessions#destroy'
-
+    resources :clubs
+    resources :sport_fields
   end
 end

api/db/seeds.rb

@@ -1,3 +1,8 @@
 User.destroy_all
 User.create(name: 'Lian Nivin', email: 'liam@kampu.pe', role: "regular", password: '123456')
-User.create(name: 'Cristian Berly', email: 'berli@kampu.pe', role: "owner", password: '123456')
+User.create(name: 'Cristian Berly', email: 'berli@kampu.pe', role: "owner", password: '123456')
+
+clubs = Club.create([{name: "Club #1"}, {name: "Club #2"}, {name: "Club #3"}])
+SportField.create(name: "SportField #1", club_id: 1);
+SportField.create(name: "SportField #2", club_id: 2);
+SportField.create(name: "SportField #3", club_id: 1);

client/src/actions/action-hooks.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+
+import { setClubs, setSportFields } from "./actions";
+
+export function useSetClubs() {
+  const dispatch = useDispatch();
+  return React.useCallback(clubs => dispatch(setClubs(clubs)), [dispatch]);
+}
+
+export function useSetSportFields() {
+  const dispatch = useDispatch();
+  return React.useCallback(
+    sportFields => dispatch(setSportFields(sportFields)),
+    [dispatch]
+  );
+}

client/src/actions/actions.js

@@ -0,0 +1,7 @@
+export function setClubs(clubs) {
+  return { type: "SET_CLUBS", payload: clubs };
+}
+
+export function setSportFields(sportFields) {
+  return { type: "SET_SPORTFIELDS", payload: sportFields };
+}

client/src/components/owner-create-button.js

@@ -0,0 +1,93 @@
+/** @jsx jsx */
+import React from "react";
+import { jsx } from "@emotion/core";
+
+function OwnerCreateButton() {
+  const [active, setActive] = React.useState(false);
+
+  const styleButtonContainer = {
+    position: "fixed",
+    bottom: "2em",
+    right: "1em",
+    background: "#C3C4C3",
+    width: "3em",
+    height: "3em",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: "50%",
+
+    transition: "all 0.2s ease"
+  };
+
+  const styleIcon = {
+    background: "none",
+    color: "inherit",
+    border: "none",
+    padding: "0",
+    font: "inherit",
+    cursor: "pointer",
+    outline: "inherit",
+    fontSize: "2em",
+    margin: 0,
+    transition: "all 0.2s ease"
+  };
+
+  const styleIconActive = {
+    ...styleIcon,
+    transform: "rotate(45deg)",
+    position: "absolute",
+    bottom: "0.5em",
+    right: "0.5em"
+  };
+
+  const styleListContainer = {
+    ...styleButtonContainer,
+    width: "12em",
+    height: "10em",
+    borderRadius: "15px"
+  };
+
+  const styleButtonsContainer = {
+    display: "none"
+  };
+
+  const styleButtonsContainerActive = {
+    ...styleButtonsContainer,
+    display: "block"
+  };
+
+  const styleButton = {
+    background: "none",
+    color: "inherit",
+    border: "none",
+    padding: "0",
+    font: "inherit",
+    cursor: "pointer",
+    outline: "inherit",
+    fontSize: "1.3em",
+    margin: 0,
+    width: "100%",
+    "&:hover": {
+      background: "#a6a6a6"
+    }
+  };
+
+  function handleClick() {
+    setActive(!active);
+  }
+
+  return (
+    <div css={active ? styleListContainer : styleButtonContainer}>
+      <div css={active ? styleButtonsContainerActive : styleButtonsContainer}>
+        <button css={styleButton}>Create Club</button>
+        <button css={styleButton}>Create Sport Field</button>
+      </div>
+      <button css={active ? styleIconActive : styleIcon} onClick={handleClick}>
+        +
+      </button>
+    </div>
+  );
+}
+
+export default OwnerCreateButton;

client/src/reducers/index.js

@@ -1,13 +1,38 @@
-const initialState = {
-  appName: "Kampu"
+import { combineReducers } from "redux";
+
+export const initialState = {
+  appName: "Kampu",
+  clubs: [],
+  sportFields: [],
+  favoriteClubs: [],
+  user: {}
 };
 
-function reducer(state = initialState, action) {
+export function clubsReducer(state = initialState.clubs, action) {
   switch (action.type) {
+    case "SET_CLUBS": {
+      return action.payload;
+    }
     default: {
       return state;
     }
   }
 }
 
+export function sportFieldsReducer(state = initialState.sportFields, action) {
+  switch (action.type) {
+    case "SET_SPORTFIELDS": {
+      return action.payload;
+    }
+    default: {
+      return state;
+    }
+  }
+}
+
+const reducer = combineReducers({
+  clubs: clubsReducer,
+  sportFields: sportFieldsReducer
+});
+
 export default reducer;

client/src/selectors/selectors.js

@@ -0,0 +1,11 @@
+import { useSelector, shallowEqual } from "react-redux";
+
+function useClubs() {
+  return useSelector(state => state.clubs, shallowEqual);
+}
+
+function useSportFields() {
+  return useSelector(state => state.sportFields, shallowEqual);
+}
+
+export { useClubs, useSportFields };

client/src/services/club.js

@@ -0,0 +1,12 @@
+import { apiUrl } from "../utils";
+
+async function getClubs() {
+  const response = await fetch(`${apiUrl}/clubs`, {
+    credentials: "include"
+  });
+
+  if (!response.ok) throw new Error(response.statusText);
+  return response.json();
+}
+
+export { getClubs };