Add leaderboard, home, auth form first versions

package.json

@@ -4,12 +4,18 @@
 	"private": true,
 	"dependencies": {
 		"@ant-design/icons": "^4.7.0",
+		"@hookform/error-message": "^2.0.0",
+		"@hookform/resolvers": "^2.8.3",
 		"antd": "^4.16.13",
+		"classnames": "^2.3.1",
 		"firebase": "^9.2.0",
+		"firebase-admin": "^10.0.0",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
+		"react-hook-form": "^7.19.1",
 		"react-router-dom": "^5.3.0",
-		"react-scripts": "4.0.3"
+		"react-scripts": "4.0.3",
+		"yup": "^0.32.11"
 	},
 	"devDependencies": {
 		"@types/node": "^12.0.0",

src/App.tsx

 import { Button, Menu, Layout } from 'antd';
-import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';
+import {
+	BrowserRouter,
+	Link,
+	Route,
+	Switch,
+	useHistory
+} from 'react-router-dom';
 import {
 	HomeOutlined,
 	RocketOutlined,
 	DollarOutlined,
 	LogoutOutlined,
-	LoginOutlined,
-	BookOutlined
+	BookOutlined,
+	FundOutlined
 } from '@ant-design/icons';
 import './App.css';
-
 const { Content } = Layout;
+import { useMemo } from 'react';
 
 import Encyclopedia from './pages/Encyclopedia';
 import Game from './pages/Game';
-import Home from './pages/Home';
-import Leaderboard from './pages/Leaderboard';
-import Login from './pages/Login';
+import Home from './pages/Home/Home';
+import Leaderboard from './pages/Leaderboard/Leaderboard';
 import Store from './pages/Store';
+import { signOut } from './utils/firebase';
+import useLoggedInUser from './hooks/useLoggedInUser';
 
-const TopMenu = () => (
-	<Menu style={{ padding: '0 px' }} mode="horizontal">
-		<Menu.Item key="home" icon={<HomeOutlined />}>
-			<Link to="/">
-				<Button type="text">Home</Button>
-			</Link>
-		</Menu.Item>
-		<Menu.Item key="game" icon={<RocketOutlined />}>
-			<Link to="/game">
-				<Button type="text">Game</Button>
-			</Link>
-		</Menu.Item>
-		<Menu.Item key="store" icon={<DollarOutlined />}>
-			<Link to="/store">
-				<Button type="text">Store</Button>
-			</Link>
-		</Menu.Item>
-		<Menu.Item key="encyclopedia" icon={<BookOutlined />}>
-			<Link to="/encyclopedia">
-				<Button type="text">Encyclopedia</Button>
-			</Link>
-		</Menu.Item>
-		<Menu.Item key="login" icon={<LoginOutlined />}>
-			<Link to="/login">
-				<Button type="text">Login</Button>
-			</Link>
-		</Menu.Item>
-		<Menu.Item key="logout" icon={<LogoutOutlined />}>
-			<Button type="text">Logout</Button>
-		</Menu.Item>
-	</Menu>
-);
+const TopMenu = () => {
+	const currentUser = useLoggedInUser();
+	const isLoggedIn = useMemo(() => currentUser !== undefined, [currentUser]);
+	const { push } = useHistory();
 
-const AppContent = () => (
-	<Content style={{ padding: '0 50px' }}>
-		<Switch>
-			<Route path="/" exact component={Home} />
-			<Route path="/login" exact component={Login} />
-			<Route path="/store" exact component={Store} />
-			<Route path="/encyclopedia" exact component={Encyclopedia} />
-			<Route path="/leaderboard" exact component={Leaderboard} />
-			<Route path="/game" exact component={Game} />
-		</Switch>
-	</Content>
-);
+	return (
+		<Menu style={{ padding: '0 px' }} mode="horizontal">
+			<Menu.Item key="home" icon={<HomeOutlined />}>
+				<Link to="/">
+					<Button type="text">Home</Button>
+				</Link>
+			</Menu.Item>
+			{isLoggedIn && (
+				<>
+					<Menu.Item key="game" icon={<RocketOutlined />}>
+						<Link to="/game">
+							<Button type="text">Game</Button>
+						</Link>
+					</Menu.Item>
+					<Menu.Item key="store" icon={<DollarOutlined />}>
+						<Link to="/store">
+							<Button type="text">Store</Button>
+						</Link>
+					</Menu.Item>
+					<Menu.Item key="encyclopedia" icon={<BookOutlined />}>
+						<Link to="/encyclopedia">
+							<Button type="text">Encyclopedia</Button>
+						</Link>
+					</Menu.Item>
+					<Menu.Item key="leaderboard" icon={<FundOutlined />}>
+						<Link to="/leaderboard">
+							<Button type="text">Leaderboard</Button>
+						</Link>
+					</Menu.Item>
+					<Menu.Item key="logout" icon={<LogoutOutlined />}>
+						<Button
+							type="text"
+							onClick={async () => {
+								await signOut();
+								push('/');
+							}}
+						>
+							Logout
+						</Button>
+					</Menu.Item>
+				</>
+			)}
+		</Menu>
+	);
+};
+
+const AppContent = () => {
+	const currentUser = useLoggedInUser();
+	const isLoggedIn = useMemo(() => currentUser !== undefined, [currentUser]);
+
+	return (
+		<Content style={{ padding: '0 50px' }}>
+			<Switch>
+				<Route path="/" exact component={Home} />
+				{isLoggedIn && (
+					<>
+						<Route path="/store" exact component={Store} />
+						<Route path="/encyclopedia" exact component={Encyclopedia} />
+						<Route path="/leaderboard" exact component={Leaderboard} />
+						<Route path="/game" exact component={Game} />
+					</>
+				)}
+			</Switch>
+		</Content>
+	);
+};
 
 const App = () => (
 	<BrowserRouter>

src/data/dummyUserData.ts

 import { UserData } from '../utils/firebase';
 
-const dummyUserData: UserData[] = [
+export const dummyUserData: UserData[] = [
 	{
 		userId: '1',
+		email: 'dummy1@example.com',
 		catchedPokemonIds: [1, 2, 3],
 		pokeballIds: [1],
 		foodIds: [1],
@@ -12,6 +13,7 @@ const dummyUserData: UserData[] = [
 	},
 	{
 		userId: '2',
+		email: 'dummy2@example.com',
 		catchedPokemonIds: [5, 8],
 		pokeballIds: [2],
 		foodIds: [],
@@ -21,6 +23,7 @@ const dummyUserData: UserData[] = [
 	},
 	{
 		userId: '3',
+		email: 'dummy3@example.com',
 		catchedPokemonIds: [6, 9],
 		pokeballIds: [],
 		foodIds: [1],
@@ -30,6 +33,7 @@ const dummyUserData: UserData[] = [
 	},
 	{
 		userId: '4',
+		email: 'dummy4@example.com',
 		catchedPokemonIds: [1, 2],
 		pokeballIds: [1],
 		foodIds: [1],
@@ -39,6 +43,7 @@ const dummyUserData: UserData[] = [
 	},
 	{
 		userId: '5',
+		email: 'dummy5@example.com',
 		catchedPokemonIds: [2],
 		pokeballIds: [1],
 		foodIds: [1],
@@ -48,6 +53,7 @@ const dummyUserData: UserData[] = [
 	},
 	{
 		userId: '6',
+		email: 'dummy6@example.com',
 		catchedPokemonIds: [3],
 		pokeballIds: [1],
 		foodIds: [1],
@@ -57,6 +63,7 @@ const dummyUserData: UserData[] = [
 	},
 	{
 		userId: '7',
+		email: 'dummy7@example.com',
 		catchedPokemonIds: [1, 2, 3, 8],
 		pokeballIds: [1],
 		foodIds: [1],
@@ -66,6 +73,7 @@ const dummyUserData: UserData[] = [
 	},
 	{
 		userId: '8',
+		email: 'dummy8@example.com',
 		catchedPokemonIds: [1, 3, 4],
 		pokeballIds: [1],
 		foodIds: [1],
@@ -75,6 +83,7 @@ const dummyUserData: UserData[] = [
 	},
 	{
 		userId: '9',
+		email: 'dummy9@example.com',
 		catchedPokemonIds: [30, 31],
 		pokeballIds: [1],
 		foodIds: [1],
@@ -84,6 +93,7 @@ const dummyUserData: UserData[] = [
 	},
 	{
 		userId: '10',
+		email: 'dummy10@example.com',
 		catchedPokemonIds: [100],
 		pokeballIds: [1],
 		foodIds: [1],
@@ -93,6 +103,7 @@ const dummyUserData: UserData[] = [
 	},
 	{
 		userId: '11',
+		email: 'dummy11@example.com',
 		catchedPokemonIds: [82, 83],
 		pokeballIds: [1],
 		foodIds: [1],
@@ -102,6 +113,7 @@ const dummyUserData: UserData[] = [
 	},
 	{
 		userId: '12',
+		email: 'dummy12@example.com',
 		catchedPokemonIds: [84, 86],
 		pokeballIds: [1],
 		foodIds: [1],
@@ -110,3 +122,6 @@ const dummyUserData: UserData[] = [
 		highestSecondsAlive: 19
 	}
 ];
+
+export const getDummyUserData = (id: string): UserData =>
+	dummyUserData.filter(obj => obj.userId === id)[0];

src/data/dummyUsers.ts

+import { User } from 'firebase/auth';
+
+// necessary subset of firebase User
+export const dummyUsers = [
+	{
+		uid: '1',
+		email: 'dummy1@example.com'
+	},
+	{
+		uid: '2',
+		email: 'dummy2@example.com'
+	},
+	{
+		uid: '3',
+		email: 'dummy3@example.com'
+	},
+	{
+		uid: '4',
+		email: 'dummy4@example.com'
+	},
+	{
+		uid: '5',
+		email: 'dummy5@example.com'
+	},
+	{
+		uid: '6',
+		email: 'dummy6@example.com'
+	},
+	{
+		uid: '7',
+		email: 'dummy7@example.com'
+	},
+	{
+		uid: '8',
+		email: 'dummy8@example.com'
+	},
+	{
+		uid: '9',
+		email: 'dummy9@example.com'
+	},
+	{
+		uid: '10',
+		email: 'dummy10@example.com'
+	},
+	{
+		uid: '11',
+		email: 'dummy11@example.com'
+	},
+	{
+		uid: '12',
+		email: 'dummy12@example.com'
+	}
+] as User[];

src/data/pokeballs.ts

@@ -4,13 +4,14 @@ export type Pokeballs = {
 	id: number;
 	name: string;
 	price: number;
+	catches: number;
 	image?: string;
 };
 
 export const pokeballs: Pokeballs[] = [
-	{ id: 1, name: 'Pokeball 1', price: 12 },
-	{ id: 2, name: 'Pokeball 2', price: 48 },
-	{ id: 3, name: 'Pokeball 3', price: 19 }
+	{ id: 1, name: 'Pokeball 1', price: 12, catches: 1 },
+	{ id: 2, name: 'Pokeball 2', price: 48, catches: 2 },
+	{ id: 3, name: 'Pokeball 3', price: 19, catches: 3 }
 ];
 
 export const getUserPokeballs = (pokeballIds: number[]): Pokeballs[] =>

src/hooks/useAllUserData.ts

+import { onSnapshot } from '@firebase/firestore';
+import { useEffect, useState } from 'react';
+
+import { UserData, userDataCollection } from '../utils/firebase';
+
+const useAllUserData = () => {
+	const [allUserData, setAllUserData] = useState<UserData[]>();
+
+	useEffect(() => {
+		const unsubscribe = onSnapshot(userDataCollection, snapshot => {
+			setAllUserData(snapshot.docs.map(doc => doc.data()));
+		});
+		return () => {
+			unsubscribe();
+		};
+	}, []);
+
+	return allUserData;
+};
+
+export default useAllUserData;

src/hooks/useField.ts

 import { ChangeEvent, useCallback, useState } from 'react';
 
+// TODO: rewrite to work with antd (maybe works, not tested)
 const useField = (id: string, required?: boolean) => {
 	const [value, setValue] = useState('');
 	const [touched, setTouched] = useState(false);

src/hooks/usePageTitle.ts

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 
 const usePageTitle = (title: string) => {
 	useEffect(() => {
-		document.title = `${title} | Tic Tac Toe`;
+		document.title = `${title} | Pokemon Game`;
 	}, [title]);
 };
 

src/hooks/useUserData.ts

+import { onSnapshot } from '@firebase/firestore';
+import { useEffect, useState } from 'react';
+
+import { UserData, userDataCollection } from '../utils/firebase';
+
+const useUserData = (uid: string) => {
+	const [userData, setUserData] = useState<UserData>();
+
+	useEffect(() => {
+		const unsubscribe = onSnapshot(userDataCollection, snapshot => {
+			const allUserData = snapshot.docs.map(doc => doc.data());
+			setUserData(allUserData.filter(ud => ud.userId === uid)[0]);
+		});
+		return () => {
+			unsubscribe();
+		};
+	}, []);
+
+	return userData;
+};
+
+export default useUserData;

src/pages/Encyclopedia.tsx

 import { Typography } from 'antd';
 
-const Encyclopedia = () => <Typography>Encyclopedia</Typography>;
+import usePageTitle from '../hooks/usePageTitle';
+
+const Encyclopedia = () => {
+	usePageTitle('Encyclopedia');
+	return <Typography>Encyclopedia</Typography>;
+};
 
 export default Encyclopedia;

src/pages/Game.tsx

 import { Typography } from 'antd';
 
-const Game = () => <Typography>Game</Typography>;
+import usePageTitle from '../hooks/usePageTitle';
+
+const Game = () => {
+	usePageTitle('Game');
+	return <Typography>Game</Typography>;
+};
 
 export default Game;

src/pages/Home.tsx

-import { Typography } from 'antd';
-
-const Home = () => <Typography>Home</Typography>;
-
-export default Home;

src/pages/Home/AuthModal.tsx

+import {
+	EyeInvisibleOutlined,
+	EyeTwoTone,
+	LockOutlined,
+	UserOutlined
+} from '@ant-design/icons';
+import { Input, message, Modal } from 'antd';
+import { Controller, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import { useCallback } from 'react';
+import { ErrorMessage } from '@hookform/error-message';
+
+import { signIn, signUp } from '../../utils/firebase';
+
+type AuthModalProps = {
+	type?: AuthModalType;
+	title?: string;
+	isVisible: boolean;
+	setAuthModalType: (_: undefined | AuthModalType) => void;
+	setIsAuthModalVisible: (_: boolean) => void;
+};
+
+type FormInput = {
+	email: string;
+	password: string;
+};
+
+export enum AuthModalType {
+	SignIn,
+	SignUp
+}
+
+export const getAuthModalTitle = (type?: AuthModalType) => {
+	switch (type) {
+		case AuthModalType.SignIn:
+			return 'Sign In';
+		case AuthModalType.SignUp:
+			return 'Sign Up';
+	}
+};
+
+const schema = yup
+	.object({
+		email: yup
+			.string()
+			.required('Email is required')
+			.email('Email must be valid'),
+		password: yup
+			.string()
+			.required('Password is required')
+			.min(6, 'Password must be at least 6 characters')
+	})
+	.required();
+
+const errorRenderer = ({ message }: { message: string }) => (
+	<p style={{ color: 'red' }}>{message}</p>
+);
+
+export const AuthModal = ({
+	type,
+	title,
+	isVisible,
+	setAuthModalType,
+	setIsAuthModalVisible
+}: AuthModalProps) => {
+	const {
+		control,
+		formState: { errors },
+		handleSubmit
+	} = useForm<FormInput>({
+		resolver: yupResolver(schema)
+	});
+
+	const closeModal = useCallback(() => {
+		setAuthModalType(undefined);
+		setIsAuthModalVisible(false);
+	}, [setAuthModalType, setIsAuthModalVisible]);
+
+	const onOk = useCallback(
+		async ({ email, password }: FormInput) => {
+			console.log(type);
+			try {
+				switch (type) {
+					case AuthModalType.SignUp:
+						await signUp(email, password);
+						break;
+					case AuthModalType.SignIn:
+						await signIn(email, password);
+						break;
+				}
+				closeModal();
+			} catch (err) {
+				const submitError =
+					(err as { message?: string })?.message ?? 'Unknown error occurred';
+				message.error(submitError);
+			}
+		},
+		[setAuthModalType, setIsAuthModalVisible, type]
+	);
+
+	if (type === undefined || title === undefined) {
+		return null;
+	}
+
+	return (
+		<Modal
+			title={title}
+			visible={isVisible && type !== undefined}
+			okText={title}
+			onOk={handleSubmit(onOk)}
+			onCancel={closeModal}
+		>
+			<Controller
+				name="email"
+				control={control}
+				defaultValue=""
+				render={({ field }) => (
+					<Input
+						{...field}
+						size="large"
+						placeholder="Enter your email"
+						prefix={<UserOutlined />}
+					/>
+				)}
+			/>
+			<ErrorMessage errors={errors} name="email" render={errorRenderer} />
+
+			<div style={{ marginTop: 10 }}>
+				<Controller
+					name="password"
+					control={control}
+					defaultValue=""
+					render={({ field }) => (
+						<Input.Password
+							{...field}
+							size="large"
+							placeholder="Enter your password"
+							iconRender={visible =>
+								visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
+							}
+							prefix={<LockOutlined />}
+						/>
+					)}
+				/>
+			</div>
+			<ErrorMessage errors={errors} name="password" render={errorRenderer} />
+		</Modal>
+	);
+};

src/pages/Home/Home.tsx

+import { Button, Typography } from 'antd';
+import { useMemo, useState } from 'react';
+
+import useLoggedInUser from '../../hooks/useLoggedInUser';
+import usePageTitle from '../../hooks/usePageTitle';
+
+import { AuthModal, AuthModalType, getAuthModalTitle } from './AuthModal';
+import { HomeCarousel } from './HomeCarousel';
+
+const Home = () => {
+	usePageTitle('Home');
+
+	const currentUser = useLoggedInUser();
+	const isLoggedIn = useMemo(() => currentUser !== undefined, [currentUser]);
+