totole/commander_league_web
1
0
Fork 0
mirror of https://github.com/kevin-DL/commander_league_web.git synced 2026-01-18 12:55:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added a base layout with a nav bar

Browse Source
This commit is contained in:
Kevin ANATOLE
2020-10-26 12:30:21 +00:00
parent eef551bf7a
commit a8f5fe8db4
11 changed files with 1002 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
pages/auth.js
View File

@@ -1,14 +1,26 @@
import FirebaseAuth from '../components/FirebaseAuth'
import { Box, Typography } from "@material-ui/core";
import DefaultLayout from "../components/defaultLayout";
import FirebaseAuth from "../components/FirebaseAuth";
import styles from "./index.module.css";
const Auth = () => {
return (
<div>
<p>Sign in</p>
<div>
<FirebaseAuth />
</div>
</div>
)
}
<DefaultLayout requiresAuth={false}>
<Box
boxShadow={2}
className={styles.index}
display="flex"
flexDirection="column"
justifyContent="center"
alignItems="center"
>
<Typography variant="h4">Sign in</Typography>
<div>
<FirebaseAuth />
</div>
</Box>
</DefaultLayout>
);
};
export default Auth
export default Auth;

15
pages/example.js
View File

@@ -1,17 +1,18 @@
import Link from 'next/link'
import Link from "next/link";
import DefaultLayout from "../components/defaultLayout";
const Example = (props) => {
return (
<div>
<DefaultLayout requiresAuth>
<p>
This page is static because it does not fetch any data or include the
authed user info.
</p>
<Link href={'/'}>
<Link href={"/"}>
<a>Home</a>
</Link>
</div>
)
}
</DefaultLayout>
);
};
export default Example
export default Example;

63
pages/index.js
View File

@@ -1,63 +0,0 @@
import useSWR from 'swr'
import Link from 'next/link'
import { useUser } from '../utils/auth/useUser'
const fetcher = (url, token) =>
fetch(url, {
method: 'GET',
headers: new Headers({ 'Content-Type': 'application/json', token }),
credentials: 'same-origin',
}).then((res) => res.json())
const Index = () => {
const { user, logout } = useUser()
const { data, error } = useSWR(
user ? ['/api/getFood', user.token] : null,
fetcher
)
if (!user) {
return (
<>
<p>Hi there!</p>
<p>
You are not signed in.{' '}
<Link href={'/auth'}>
<a>Sign in</a>
</Link>
</p>
</>
)
}
return (
<div>
<div>
<p>You're signed in. Email: {user.email}</p>
<p
style={{
display: 'inline-block',
color: 'blue',
textDecoration: 'underline',
cursor: 'pointer',
}}
onClick={() => logout()}
>
Log out
</p>
</div>
<div>
<Link href={'/example'}>
<a>Another example page</a>
</Link>
</div>
{error && <div>Failed to fetch food!</div>}
{data && !error ? (
<div>Your favorite food is {data.food}.</div>
) : (
<div>Loading...</div>
)}
</div>
)
}
export default Index

48
pages/index.jsx Normal file
View File

@@ -0,0 +1,48 @@
import useSWR from "swr";
import Link from "next/link";
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";
const fetcher = (url, token) =>
fetch(url, {
method: "GET",
headers: new Headers({ "Content-Type": "application/json", token }),
credentials: "same-origin",
}).then((res) => res.json());
const Index = () => {
const { user, logout } = useUser();
const { data, error } = useSWR(
user ? ["/api/getFood", user.token] : null,
fetcher
);
return (
<DefaultLayout>
<Box
boxShadow={2}
className={styles.index}
display="flex"
flexDirection="column"
justifyContent="center"
alignItems="center"
>
<Typography variant="h1">Start creating your leagues</Typography>
<Link href="/auth">
<Button
color="primary"
classes={{ root: styles["main-button"] }}
variant="contained"
>
{" "}
Get Started{" "}
</Button>
</Link>
</Box>
</DefaultLayout>
);
};
export default Index;

14
pages/index.module.css Normal file
View File

@@ -0,0 +1,14 @@
.index {
background-image: linear-gradient(
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.2)
),
url("https://res.cloudinary.com/deezgu5i7/image/upload/c_scale,e_gradient_fade:20,o_66,w_1920,z_0.8/v1603388872/commander_league/ryan-quintal-Vp8RnXSnJ6I-unsplash_q2znva.jpg");
background-size: cover;
height: 100vh;
margin-top: -65px;
}
.main-button {
margin-top: 1.5rem !important;
}