Release 1

api/app/controllers/application_controller.rb

@@ -28,4 +28,4 @@ def regenerate_and_signed_token(user)
     cookies.signed[:auth_token] = { value: user.token, httponly: true }
     user
   end
-end
+end

api/app/controllers/sessions_controller.rb

@@ -17,7 +17,7 @@ def register
     if user.save
       render json: user
     else
-      render json: { errors: user.errors}
+      render json: { errors: user.errors}, status: :bad_request
     end
 
   end
@@ -32,4 +32,4 @@ def destroy
   def user_params
     params.permit(:name, :email, :password, :role)
   end
-end
+end

api/app/controllers/sport_fields_controller.rb

@@ -1,5 +1,9 @@
 class SportFieldsController < ApplicationController
 
+  def index
+    render json: SportField.all
+  end
+
   def create
     sport_field = SportField.new(sport_field_params)
     if sport_field.save

api/app/serializers/sport_field_serializer.rb

@@ -1,7 +1,7 @@
 class SportFieldSerializer < ActiveModel::Serializer
   include Rails.application.routes.url_helpers
 
-  attributes :id, :name, :description, :image, :price_day, :price_night
+  attributes :id, :name, :description, :image, :price_day, :price_night, :club_id
 
   def image
     url_for(object.image) if self.object.image.attached?

api/config/initializers/cors.rb

@@ -7,4 +7,4 @@
       methods: [:get, :post, :put, :patch, :delete, :options, :head],
       credentials: true
   end
-end
+end

api/db/seeds.rb

@@ -3,7 +3,50 @@
 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')
 
-clubs = Club.create([{name: "Club #1"}, {name: "Club #2"}, {name: "Club #3"}])
+clubs = Club.create([{name: "Club #1", address: 'Jr cayumba 440',
+schedule: {
+  'monday-friday': {
+    start: '8',
+    end: '22'
+  },
+  'saturday': {
+    start: '8',
+    end: '22'
+  },
+  'sunday': {
+    start: '8',
+    end: '22'
+  },
+}}, {name: "Club #2", address: 'Jr cayumba 440',
+schedule: {
+  'monday-friday': {
+    start: '8',
+    end: '22'
+  },
+  'saturday': {
+    start: '8',
+    end: '22'
+  },
+  'sunday': {
+    start: '8',
+    end: '22'
+  },
+}}, {name: "Club #3", address: 'Jr cayumba 440',
+schedule: {
+  'monday-friday': {
+    start: '8',
+    end: '22'
+  },
+  'saturday': {
+    start: '8',
+    end: '22'
+  },
+  'sunday': {
+    start: '8',
+    end: '22'
+  },
+}}])
+
 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/components/navbar.js

@@ -8,7 +8,7 @@ function Navbar() {
       css={{
         background: "#fff",
         borderBottom: "1px solid #e5edef",
-        padding: "10px 15px",
+        padding: "15px",
         marginBottom: "2em"
       }}
     >
@@ -18,8 +18,21 @@ function Navbar() {
           margin: "auto"
         }}
       >
-        <Link to="/">
-          <h2>Kampu</h2>
+        <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>

client/src/components/owner-club-circle.js

@@ -12,7 +12,8 @@ function OwnerClubCircle({ id, active, name, activeClub, setActiveClub }) {
     display: "flex",
     cursor: "pointer",
     border: "solid #ffffff00 0.5em",
-    flex: "0 0 80px"
+    flex: "0 0 80px",
+    textAlign: "center"
   };
 
   const styleActive = {

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import React from "react";
 import { jsx } from "@emotion/core";
+import { Link } from "@reach/router";
 
 function OwnerCreateButton() {
   const [active, setActive] = React.useState(false);
@@ -59,6 +60,8 @@ function OwnerCreateButton() {
 
   const styleButton = {
     background: "none",
+    display: "block",
+    textDecoration: "none",
     color: "inherit",
     border: "none",
     padding: "0",
@@ -80,8 +83,12 @@ function OwnerCreateButton() {
   return (
     <div css={active ? styleListContainer : styleButtonContainer}>
       <div css={active ? styleButtonsContainerActive : styleButtonsContainer}>
-        <button css={styleButton}>Create Club</button>
-        <button css={styleButton}>Create Sport Field</button>
+        <Link to="/create-club" css={styleButton}>
+          Create Club
+        </Link>
+        <Link to="/create-sport-field" css={styleButton}>
+          Create Sport Field
+        </Link>
       </div>
       <button css={active ? styleIconActive : styleIcon} onClick={handleClick}>
         +

client/src/index.js

@@ -25,7 +25,7 @@ function App() {
           maxWidth: "900px",
           margin: "0 auto",
           boxSizing: "border-box",
-          "@media (max-width: 480px)": {
+          "@media (max-width: 720px)": {
             padding: "0px 15px"
           }
         }}

client/src/services/club.js

@@ -1,5 +1,22 @@
 import { apiUrl } from "../utils";
 
+async function postClub(club) {
+  const response = await fetch(`${apiUrl}/clubs`, {
+    method: "POST",
+    credentials: "include",
+    body: club,
+    contentType: "application/json"
+  });
+
+  if (!response.ok) {
+    const errors = await response.json();
+    console.log(errors);
+    throw new Error(errors);
+  }
+
+  return response.json();
+}
+
 async function getClubs() {
   const response = await fetch(`${apiUrl}/clubs`, {
     credentials: "include"
@@ -9,4 +26,4 @@ async function getClubs() {
   return response.json();
 }
 
-export { getClubs };
+export { getClubs, postClub };

client/src/services/sport-field.js

@@ -16,4 +16,13 @@ async function postSportField(sportField) {
   return response.json();
 }
 
-export { postSportField };
+async function getSportFields() {
+  const response = await fetch(`${apiUrl}/sport_fields`, {
+    credentials: "include"
+  });
+
+  if (!response.ok) throw new Error(response.statusText);
+  return response.json();
+}
+
+export { postSportField, getSportFields };

client/src/views/create-club.js

@@ -1,8 +1,9 @@
 /** @jsx jsx */
 import React from "react";
 import { jsx } from "@emotion/core";
+import { navigate } from "@reach/router";
 import { Input, Label, Card, Button } from "../components/ui";
-import { postClub } from "../services/clubs";
+import { postClub } from "../services/club";
 
 function CreateClub() {
   const [fields, setFields] = React.useState({
@@ -42,6 +43,7 @@ function CreateClub() {
     });
     try {
       const club = await postClub(formData);
+      navigate("/owner");
       console.log(club);
     } catch (error) {
       console.log(error.message);

client/src/views/create-sport-field.js

@@ -3,6 +3,8 @@ import React from "react";
 import { jsx } from "@emotion/core";
 import { Input, Label, Card, Button } from "../components/ui";
 import { postSportField } from "../services/sport-field";
+import {  navigate } from "@reach/router";
+
 
 function CreateSportField() {
   const [fields, setFields] = React.useState({
@@ -32,6 +34,7 @@ function CreateSportField() {
     try {
       const club = await postSportField(formData);
       console.log(club);
+      navigate('/owner')
     } catch (error) {
       console.log(error.message);
     }

client/src/views/login.js

@@ -22,7 +22,7 @@ function Login() {
     e.preventDefault();
     try {
       const user = await login(inputs);
-      navigate("/");
+      navigate("/owner");
       // userUpdater({ type: "LOGIN", payload: { name, email } });
     } catch (error) {
       setError(error.message);
@@ -86,16 +86,18 @@ function Login() {
             Login
           </Button>
           {error && (
-            <div css={{ color: "red", marginTop: "1rem" }}>Error: {error}</div>
+            <div css={{ color: "tomato", marginTop: "1rem" }}>
+              Error: {error}
+            </div>
           )}
         </form>
         <br />
 
         <Link
           to="/signup"
           style={{
-            color: "Black",
-            fontSize: "10px",
+            color: "#000",
+            fontSize: "14px",
             textDecoration: "none",
             display: "flex",
             justifyContent: "flex-end"

client/src/views/owner-home.js

@@ -8,7 +8,7 @@ import OwnerCreateButton from "../components/owner-create-button";
 import { useSetClubs, useSetSportFields } from "../actions/action-hooks";
 import { useClubs, useSportFields } from "../selectors/selectors";
 import { getClubs } from "../services/club";
-import { getSportFields } from "../services/sportField";
+import { getSportFields } from "../services/sport-field";
 
 function OwnerHome() {
   const clubs = useClubs();
@@ -43,15 +43,15 @@ function OwnerHome() {
       setClubs(clubs);
       setActiveClub(clubs.length ? clubs[0].id : null);
     });
-  }, [setClubs]);
+  }, []);
 
   React.useEffect(() => {
     if (activeClub) {
       getSportFields().then(sportFields => {
         setSportFields(sportFields);
       });
     }
-  }, [setSportFields]);
+  }, [activeClub]);
 
   const styleSportFieldsContainer = {
     display: "flex",
@@ -84,11 +84,10 @@ function OwnerHome() {
       </div>
       <Title>Sport Fields</Title>
       <div css={styleSportFieldsContainer}>
-        {sportFields ? (
+        {sportFields.length ? (
           sportFields
             .filter(sportField => sportField.club_id === activeClub)
             .map(sportField => {
-              //This is a temporal progress
               const progress = `${Math.floor(Math.random() * 100) + 1}%`;
               return (
                 <OwnerSportFieldCard

client/src/views/signup.js

@@ -123,8 +123,8 @@ function Signup() {
         <Link
           to="/login"
           style={{
-            color: "Black",
-            fontSize: "10px",
+            color: "#000",
+            fontSize: "14px",
             textDecoration: "none",
             display: "flex",
             justifyContent: "flex-end"