added things

components/Loader.js

@@ -0,0 +1,3 @@
+export default function Loader({ show }) {
+  return show ? <div className="loader"></div> : null;
+}

components/Navbar.js

@@ -0,0 +1,43 @@
+import Link from 'next/link';
+
+export default function Navbar() {
+    const user = null;
+    const username = null;
+
+  return (
+    <nav className="navbar">
+      <ul>
+        <li>
+          <Link href="/">
+            <button className="btn-logo">FEED</button>
+          </Link>
+        </li>
+
+        {/* user is signed-in and has username */}
+        {username && (
+          <>
+            <li className="push-left">
+              <Link href="/admin">
+                <button className="btn-blue">Write Posts</button>
+              </Link>
+            </li>
+            <li>
+              <Link href={`/${username}`}>
+                <img src={user?.photoURL} />
+              </Link>
+            </li>
+          </>
+        )}
+
+        {/* user is not signed OR has not created username */}
+        {!username && (
+          <li>
+            <Link href="/enter">
+              <button className="btn-blue">Log in</button>
+            </Link>
+          </li>
+        )}
+      </ul>
+    </nav>
+  );
+}

lib/firebase.js

@@ -1,7 +1,8 @@
-import firebase from 'firebase/app'
-import 'firebase/auth'
-import 'firebase/firestore'
-import 'firebase/storage'
+import firebase from 'firebase/compat/app'
+import 'firebase/compat/auth';
+import 'firebase/compat/firestore';
+import 'firebase/compat/storage';
+
 
 const firebaseConfig = {
     apiKey: "AIzaSyD6lA0slEHkUipbfnI0-0spc3f9f-AoG1A",
@@ -15,8 +16,10 @@ const firebaseConfig = {
 
 if (!firebase.apps.length) {
     firebase.initializeApp(firebaseConfig)
-}
+}   
 
 export const auth = firebase.auth();
-export const firestore = firebase.filestore();
+export const googleAuthProvider = new firebase.auth.GoogleAuthProvider();
+
+export const firestore = firebase.firestore();
 export const storage = firebase.storage();

package.json

@@ -9,11 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "firebase": "^9.7.0",
+    "firebase": "^8.10.1",
     "firebase-hooks": "^0.0.1",
+    "firebase-react-hooks": "^0.8.0",
     "next": "12.1.6",
     "react": "18.1.0",
-    "react-dom": "18.1.0"
+    "react-dom": "18.1.0",
+    "react-hot-toast": "^2.2.0"
   },
   "devDependencies": {
     "@types/node": "^17.0.31",

pages/_app.js

@@ -1,8 +1,15 @@
 import '../styles/globals.css'
-
+import Navbar from '../components/Navbar';
+import { Toaster } from 'react-hot-toast';
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+    <>
+      <Navbar />
+      <Component {...pageProps} />
+      <Toaster />
+    </>
+  );
 }
 
 export default MyApp

pages/enter.js

@@ -1,7 +1,41 @@
+import { auth, googleAuthProvider } from '../lib/firebase';
+
+
 export default function EnterPage({ }) {
+    const user = null
+    const username = null;
+
+    // 1. user signed out <SignInButton />
+    // 2. user signed in, but missing username <UsernameForm />
+    // 3. user signed in, has username <SignOutButton />
     return (
         <main>
-            <h1>Sign Up</h1>
+            {user ?
+                !username ? <UsernameForm /> : <SignOutButton />
+                :
+                <SignInButton />
+        }
         </main>
     )
+}
+
+// Sign in with Google button
+function SignInButton() {
+    const signInWithGoogle = async () => {
+        await auth.signInWithPopup(googleAuthProvider);
+      };
+
+    return (
+        <button className="btn-google" onClick={signInWithGoogle}>
+            <img src={'/google.png'} /> Sign in with Google
+        </button>
+    );
+}
+
+function SignOutButton() {
+    return <button onClick={() => auth.signOut()}>Sign Out</button>
+}
+
+function UsernameForm() {
+
 }

pages/index.js

@@ -1,11 +1,18 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
+import Head from 'next/head';
+import Image from 'next/image';
+import styles from '../styles/Home.module.css';
+
+import Loader from '../components/Loader';
+import toast from 'react-hot-toast';
 
 export default function Home() {
   return (
     <div>
       <h1>Hello world!</h1>
+      <Loader show />
+      <button onClick={() => toast.success('hello toast!')}>
+        Click for Toast!
+      </button>
     </div>
   )
 }