diff --git a/web/.eslintrc.js b/web/.eslintrc.js index 372eaa90..90ec1548 100644 --- a/web/.eslintrc.js +++ b/web/.eslintrc.js @@ -1,10 +1,7 @@ module.exports = { parser: '@typescript-eslint/parser', - extends: [ - 'plugin:react-hooks/recommended', - 'plugin:@next/next/recommended', - ], + extends: ['plugin:react-hooks/recommended', 'plugin:@next/next/recommended'], rules: { - // Add or disable rules here. - } + // Add or disable rules here. + }, } diff --git a/web/.prettierignore b/web/.prettierignore new file mode 100644 index 00000000..b79c5513 --- /dev/null +++ b/web/.prettierignore @@ -0,0 +1,3 @@ +# Ignore Next artifacts +.next/ +out/ \ No newline at end of file diff --git a/web/components/header.tsx b/web/components/header.tsx index a90f5f77..8b1a5ded 100644 --- a/web/components/header.tsx +++ b/web/components/header.tsx @@ -1,7 +1,7 @@ import { Popover } from '@headlessui/react' import Link from 'next/link' -import { useEffect, useState } from 'react' -import { firebaseLogin, listenForLogin, User } from '../lib/firebase/users' +import { useUser } from '../hooks/use-user' +import { firebaseLogin } from '../lib/firebase/users' const navigation = [ { @@ -12,12 +12,11 @@ const navigation = [ ] function SignInLink() { - const [user, setUser] = useState(null) - useEffect(() => listenForLogin(setUser), []) + const user = useUser() return ( <> - {user && user.id ? ( + {user ? ( {user.name} diff --git a/web/hooks/use-contract.ts b/web/hooks/use-contract.ts index 5ab723b4..c870a7fb 100644 --- a/web/hooks/use-contract.ts +++ b/web/hooks/use-contract.ts @@ -2,12 +2,13 @@ import { useEffect, useState } from 'react' import { Contract, listenForContract } from '../lib/firebase/contracts' export const useContract = (contractId: string) => { - const [contract, setContract] = useState('loading') + const [contract, setContract] = useState( + 'loading' + ) - useEffect(() => { - if (contractId) - return listenForContract(contractId, setContract) - }, [contractId]) + useEffect(() => { + if (contractId) return listenForContract(contractId, setContract) + }, [contractId]) - return contract -} \ No newline at end of file + return contract +} diff --git a/web/hooks/use-user.ts b/web/hooks/use-user.ts index b6085547..2512d5f3 100644 --- a/web/hooks/use-user.ts +++ b/web/hooks/use-user.ts @@ -2,11 +2,7 @@ import { useEffect, useState } from 'react' import { listenForLogin, User } from '../lib/firebase/users' export const useUser = () => { - const [user, setUser] = useState(null) - - useEffect(() => { - return listenForLogin(setUser) - }, []) - - return user -} \ No newline at end of file + const [user, setUser] = useState(null) + useEffect(() => listenForLogin(setUser), []) + return user +} diff --git a/web/lib/firebase/init.ts b/web/lib/firebase/init.ts index 1cff329c..35266282 100644 --- a/web/lib/firebase/init.ts +++ b/web/lib/firebase/init.ts @@ -7,7 +7,7 @@ const firebaseConfig = { storageBucket: 'mantic-markets.appspot.com', messagingSenderId: '128925704902', appId: '1:128925704902:web:f61f86944d8ffa2a642dc7', - measurementId: '${config.measurementId}', + measurementId: 'G-SSFK1Q138D', } // Initialize Firebase diff --git a/web/lib/firebase/users.ts b/web/lib/firebase/users.ts index 1282d40c..ea9cd7c7 100644 --- a/web/lib/firebase/users.ts +++ b/web/lib/firebase/users.ts @@ -32,14 +32,14 @@ export async function setUser(userId: string, user: User) { } const CACHED_USER_KEY = 'CACHED_USER_KEY' -export function listenForLogin(onUser: (user: User) => void) { +export function listenForLogin(onUser: (_user: User | null) => void) { // Immediately load any persisted user object from browser cache. const cachedUser = localStorage.getItem(CACHED_USER_KEY) if (cachedUser) { onUser(JSON.parse(cachedUser)) } - onAuthStateChanged(auth, async (user) => { + return onAuthStateChanged(auth, async (user) => { if (user) { let fetchedUser = await getUser(user.uid) if (!fetchedUser) { @@ -63,8 +63,8 @@ export function listenForLogin(onUser: (user: User) => void) { // Note: Cap on localStorage size is ~5mb localStorage.setItem(CACHED_USER_KEY, JSON.stringify(fetchedUser)) } else { - // User logged out; reset to the empty object - onUser({} as User) + // User logged out; reset to null + onUser(null) } }) } @@ -76,7 +76,6 @@ export async function firebaseLogin() { export async function firebaseLogout() { auth.signOut() - localStorage.removeItem(CACHED_USER_KEY) } const storage = getStorage(app) diff --git a/web/package.json b/web/package.json index 6283a5f2..e9b33044 100644 --- a/web/package.json +++ b/web/package.json @@ -11,12 +11,12 @@ "dependencies": { "@headlessui/react": "1.4.2", "@heroicons/react": "1.0.5", - "chart.js": "^3.6.1", - "daisyui": "^1.16.2", - "firebase": "^9.6.0", + "chart.js": "3.6.1", + "daisyui": "1.16.2", + "firebase": "9.6.0", "next": "12.0.4", "react": "17.0.2", - "react-chartjs-2": "^4.0.0", + "react-chartjs-2": "4.0.0", "react-dom": "17.0.2" }, "devDependencies": { diff --git a/web/pages/account.tsx b/web/pages/account.tsx index 9173e2d8..9ea3f578 100644 --- a/web/pages/account.tsx +++ b/web/pages/account.tsx @@ -1,11 +1,10 @@ import { useRouter } from 'next/router' -import { useEffect, useState } from 'react' -import { firebaseLogout, listenForLogin, User } from '../lib/firebase/users' +import { firebaseLogout } from '../lib/firebase/users' import { Header } from '../components/header' +import { useUser } from '../hooks/use-user' export default function Account() { - const [user, setUser] = useState(null) - useEffect(() => listenForLogin(setUser), []) + const user = useUser() const router = useRouter() return (