From 074f3e441936dbc2b8bd8939930335a25ec2809a Mon Sep 17 00:00:00 2001
From: Kevin ANATOLE <kevanatole@gmail.com>
Date: Mon, 26 Oct 2020 19:00:28 +0000
Subject: [PATCH] Basic Profile page

---
 components/FirebaseAuth.js            |  2 +-
 pages/index.jsx                       | 20 ++++++----
 pages/profile.jsx                     | 56 +++++++++++++++++++++++++++
 pages/profile.module.css              | 15 +++++++
 services/authenticatedFetchService.js | 10 +++++
 5 files changed, 94 insertions(+), 9 deletions(-)
 create mode 100644 pages/profile.jsx
 create mode 100644 pages/profile.module.css
 create mode 100644 services/authenticatedFetchService.js

diff --git a/components/FirebaseAuth.js b/components/FirebaseAuth.js
index eda0b51..879f961 100644
--- a/components/FirebaseAuth.js
+++ b/components/FirebaseAuth.js
@@ -23,7 +23,7 @@ const firebaseAuthConfig = {
       provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
     },
   ],
-  signInSuccessUrl: "/",
+  signInSuccessUrl: "/profile",
   credentialHelper: "none",
   callbacks: {
     signInSuccessWithAuthResult: async ({ user }, redirectUrl) => {
diff --git a/pages/index.jsx b/pages/index.jsx
index f29004a..0192acb 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -1,6 +1,6 @@
-import useSWR from "swr";
+// import useSWR from "swr";
 import Link from "next/link";
-import { useUser } from "../utils/auth/useUser";
+// import { useUser } from "../utils/auth/useUser";
 import DefaultLayout from "../components/defaultLayout";
 import styles from "./index.module.css";
 import { Box, Button, Container, Typography } from "@material-ui/core";
@@ -13,11 +13,11 @@ const fetcher = (url, token) =>
   }).then((res) => res.json());
 
 const Index = () => {
-  const { user, logout } = useUser();
-  const { data, error } = useSWR(
-    user ? ["/api/getFood", user.token] : null,
-    fetcher
-  );
+  // const { user, logout } = useUser();
+  // const { data, error } = useSWR(
+  //   user ? ["/api/getFood", user.token] : null,
+  //   fetcher
+  // );
 
   return (
     <DefaultLayout>
@@ -29,7 +29,11 @@ const Index = () => {
         justifyContent="center"
         alignItems="center"
       >
-        <Typography variant="h1">Start creating your leagues</Typography>
+        <Typography variant="h1">
+          {" "}
+          Coming Soon. Developoment in progress{" "}
+        </Typography>
+        <Typography variant="h5">Start creating your leagues</Typography>
         <Link href="/auth">
           <Button
             color="primary"
diff --git a/pages/profile.jsx b/pages/profile.jsx
new file mode 100644
index 0000000..cb7fcb4
--- /dev/null
+++ b/pages/profile.jsx
@@ -0,0 +1,56 @@
+import {
+  Avatar,
+  Box,
+  Card,
+  CardContent,
+  CircularProgress,
+  Grid,
+  Typography,
+} from "@material-ui/core";
+import useSWR from "swr";
+import DefaultLayout from "../components/defaultLayout";
+import { authorisedFetchGet } from "../services/authenticatedFetchService";
+import { useUser } from "../utils/auth/useUser";
+import styles from "./profile.module.css";
+
+const Profile = () => {
+  const { user } = useUser();
+  const { data, error } = useSWR(
+    user ? [`${process.env.NEXT_PUBLIC_API_URL}/profiles`, user.token] : null,
+    authorisedFetchGet
+  );
+
+  if (!data && !error) {
+    return (
+      <DefaultLayout requiresAuth>
+        <Box
+          className={styles.loading}
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <CircularProgress />
+        </Box>
+      </DefaultLayout>
+    );
+  }
+
+  return (
+    <DefaultLayout requiresAuth>
+      <Box className={styles.main}>
+        <Grid container spacing={3}>
+          <Grid item xs={12} md={6} lg={3}>
+            <Card>
+              <CardContent>
+                <Avatar src={data.data.picture} alt={data.data.username} />
+                <Typography variant="h5">{data.data.username}</Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+        </Grid>
+      </Box>
+    </DefaultLayout>
+  );
+};
+
+export default Profile;
diff --git a/pages/profile.module.css b/pages/profile.module.css
new file mode 100644
index 0000000..6e61da2
--- /dev/null
+++ b/pages/profile.module.css
@@ -0,0 +1,15 @@
+.loading {
+  height: 100vh;
+  margin-top: -65px;
+}
+
+.main {
+  margin-top: 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .main {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+}
diff --git a/services/authenticatedFetchService.js b/services/authenticatedFetchService.js
new file mode 100644
index 0000000..b18cf62
--- /dev/null
+++ b/services/authenticatedFetchService.js
@@ -0,0 +1,10 @@
+export const authorisedFetchGet = (url, token) => {
+  return fetch(url, {
+    method: "GET",
+    headers: new Headers({
+      "Content-Type": "application/json",
+      Authorization: token,
+    }),
+    credentials: "same-origin",
+  }).then((res) => res.json());
+};