Merge pull request #3 from lGnyte/homepage

Homepage
lGnyte · Apr 7, 2024 · 31e5634 · 31e5634
2 parents dd65049 + 2f5570f
commit 31e5634
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 14 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    domains: ["firebasestorage.googleapis.com"],
+  },
+};
 
 export default nextConfig;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,13 +2,14 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { Toaster } from "react-hot-toast";
-import UserContext from "./components/UserContext";
+import UserContext from "../components/UserContext";
+import Header from "@/components/Header";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "[CC] HW3",
-  description: "Generated by create next app",
+  title: "[CC] Turismo",
+  description: "Find accommodation for you and your group of friends!",
 };
 
 export default function RootLayout({
@@ -20,6 +21,7 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         <UserContext>
+          <Header />
           {children}
           <Toaster />
         </UserContext>

diff --git a/src/app/components/UsernameForm.tsx → src/app/login/UsernameForm.tsx b/src/app/components/UsernameForm.tsx → src/app/login/UsernameForm.tsx
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -5,7 +5,7 @@ import { UserContext } from "../../lib/context";
 import { auth } from "@/lib/firebase";
 import { useContext } from "react";
 import Link from "next/link";
-import UsernameForm from "../components/UsernameForm";
+import UsernameForm from "./UsernameForm";
 
 export default function Login() {
   const { user, username } = useContext(UserContext);

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -3,21 +3,28 @@
 import Link from "next/link";
 import { UserContext } from "../lib/context";
 import { useContext } from "react";
+import PostsFeed from "@/components/PostsFeed";
 
 export default function Home() {
-  const { user, username } = useContext(UserContext);
+  const { username } = useContext(UserContext);
 
   return (
-
     <main className="p-10">
-      <h1 className="text-2xl font-bold">{username ?
-        `Welcome back, ${username}!`
+      {username ?
+        <>
+          <h1 className="text-3xl font-bold">Welcome back, {username}!</h1>
+          <p className="text-xl">Start planning your next trip.</p>
+        </>
         :
-        `No user`
-      }</h1>
-      <Link href={'/login'} className="text-blue-500">
-        Login
-      </Link>
+        <>
+          <h1 className="text-3xl font-bold">Welcome to Turismo!</h1>
+          <p className="text-xl mb-2">Sign in to start planning your next trip</p>
+          <Link href="/login" className="px-4 py-2 bg-gray-500 rounded-md text-xl text-white font-bold">Sign in</Link>
+        </>
+      }
+      <hr className="my-10" />
+      <h2 className="text-2xl font-bold">Recent posts</h2>
+      <PostsFeed />
     </main>
   );
 }

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { UserContext } from "@/lib/context";
+import { auth } from "@/lib/firebase";
+import Link from "next/link";
+import { useContext } from "react";
+
+export default function Header() {
+  const { username } = useContext(UserContext);
+
+  return (
+    <header className="flex justify-between items-center p-4 bg-gray-800 text-white">
+      <h1 className="text-2xl font-bold">[CC] Turismo</h1>
+      <nav>
+        <ul className="flex space-x-4">
+          <li><Link href="/">Home</Link></li>
+          {username ?
+            <li className="cursor-pointer" onClick={() => auth.signOut()}>Sign out</li>
+            :
+            <li><Link href="/login">Sign in</Link></li>
+          }
+        </ul>
+      </nav>
+    </header>
+  )
+}
diff --git a/src/components/PostsFeed.tsx b/src/components/PostsFeed.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { db } from "@/lib/firebase";
+import { DocumentData, collection, getDocs } from "firebase/firestore";
+import { useEffect, useState } from "react";
+import Image from "next/image";
+
+export default function PostsFeed() {
+  const [posts, setPosts] = useState([] as DocumentData[]);
+
+  useEffect(() => {
+    (async () => {
+      const querySnapshot = await getDocs(collection(db, 'posts'));
+      const postsData = querySnapshot.docs.map(doc => doc.data());
+      setPosts(postsData);
+    })();
+  }, []);
+
+  return (
+    <section className="grid grid-cols-3 gap-4">
+      {posts.map(post => {
+        if(!post.hasOwnProperty('post_title') || !post.hasOwnProperty('post_description')) {
+          return null;
+        }
+
+        return (
+          <div key={post.id} className="bg-gray-100 p-4 rounded-md">
+            <h3 className="text-xl font-bold">{post.post_title}</h3>
+            <p className="text-lg">{post.post_description}</p>
+            {post?.images && post.images.length > 0 && post.images.map((image: string, index: number) => {
+              return <Image key={index} src={image} width={100} height={100} alt={`Image ${index + 1}`} className="inline-block" />
+            })}
+          </div>
+        )}
+      )}
+    </section>
+  );
+}
diff --git a/src/app/components/UserContext.tsx → src/components/UserContext.tsx b/src/app/components/UserContext.tsx → src/components/UserContext.tsx