Get favorite clubs

Author: condef5

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/services/club.js

@@ -26,6 +26,15 @@ async function getClubs() {
   return response.json();
 }
 
+async function getFavoriteClubs() {
+  const response = await fetch(`${apiUrl}/clubs`, {
+    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 };

client/src/views/favorites.js

@@ -0,0 +1,34 @@
+/** @jsx jsx */
+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 Club from "../components/club";
+
+function Home() {
+  const [loading, setLoading] = React.useState(false);
+  const [clubs, setClubs] = React.useState([]);
+  // const setClubs = useSetClubs();
+
+  React.useEffect(() => {
+    setLoading(true);
+    getFavoriteClubs().then(clubs => {
+      console.log(clubs);
+      setClubs(clubs);
+      setLoading(false);
+    });
+  }, []);
+
+  return (
+    <div>
+      <h2>Favorites Clubs</h2>
+      {loading && <div>Loading</div>}
+      {clubs.map(club => (
+        <Club club={club} key={club.id} />
+      ))}
+    </div>
+  );
+}
+
+export default Home;