Merge pull request #11 from codeableorg/feature-ownerhomeui

Feature Owner Home UI

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,21 @@
+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
+
+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-club-circle.js

@@ -0,0 +1,43 @@
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
+import { Title } from "../components/ui";
+
+function OwnerClubCircle({ id, active, name, activeClub, setActiveClub }) {
+  const styleCircle = {
+    backgroundColor: "#bababa",
+    width: "80px",
+    height: "80px",
+    borderRadius: "50%",
+    margin: "0 1em",
+    display: "flex",
+    cursor: "pointer",
+    border: "solid #ffffff00 0.5em",
+    flex: "0 0 80px"
+  };
+
+  const styleActive = {
+    ...styleCircle,
+    border: "solid #272727 0.5em"
+  };
+
+  const styleName = {
+    fontWeight: "normal",
+    margin: "auto",
+    alignSelf: "center"
+  };
+
+  function handleClick() {
+    setActiveClub(id);
+  }
+
+  return (
+    <div
+      css={activeClub === id ? styleActive : styleCircle}
+      onClick={handleClick}
+    >
+      <Title css={styleName}>{name}</Title>
+    </div>
+  );
+}
+
+export default OwnerClubCircle;

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/components/owner-sportfield-card.js

@@ -0,0 +1,32 @@
+/** @jsx jsx */
+import React from "react";
+import { jsx } from "@emotion/core";
+import { Card, Title, Progress } from "../components/ui";
+
+function OwnerSportFieldCard({ name, progressStatus }) {
+  const [status, setStatus] = React.useState("0%");
+
+  const styleCard = {
+    maxWidth: "40%",
+    marginBottom: "1.5em",
+    "@media screen and (max-width: 530px)": {
+      maxWidth: "100%"
+    }
+  };
+
+  React.useEffect(() => {
+    if (status !== progressStatus) {
+      setStatus(progressStatus);
+    }
+  }, [progressStatus, status]);
+
+  return (
+    <Card css={styleCard}>
+      <Title>{name}</Title>
+      <Progress styles={{ bar: { width: status } }} />
+      <p css={{ textAlign: "center" }}>Bookings: {progressStatus}</p>
+    </Card>
+  );
+}
+
+export default OwnerSportFieldCard;