Basic Profile page

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) => {

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"

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;

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;
+  }
+}

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());
+};