fetching and display a users favourite countries

Author: markslorach

app/components/CountryList.tsx

@@ -31,7 +31,7 @@ const CountryList = ({ data }: { data: Country[] }) => {
 
   return (
     <>
-      <div className="flex flex-wrap md:flex-nowrap justify-between py-10 gap-5">
+      <div className="flex flex-wrap md:flex-nowrap justify-between pb-10 gap-5">
         <SearchCountry search={search} setSearch={setSearch} />
 
         <RegionSelect

app/components/shared/NavBar.tsx

@@ -1,14 +1,14 @@
 import Link from "next/link";
-import { GlobeAsiaAustraliaIcon } from "@heroicons/react/24/outline";
 import ThemeToggle from "./ThemeToggle";
+import { GlobeAsiaAustraliaIcon } from "@heroicons/react/24/outline";
 import { SignedIn, SignedOut, SignInButton } from "@clerk/nextjs";
 import { SignOutButton } from "./SignOutButton";
 import { getUser } from "@/lib/user";
 import { auth } from "@clerk/nextjs/server";
 
 const NavBar = async () => {
   const { userId } = auth();
-  
+
   if (userId) await getUser();
 
   return (

app/favourite-countries/page.tsx

@@ -0,0 +1,46 @@
+import { getCountry } from "@/lib/countries";
+import { getFavouriteCountries } from "@/lib/user";
+import { SignedIn, SignedOut } from "@clerk/nextjs";
+import { auth } from "@clerk/nextjs/server";
+import CountryCard from "../components/CountryCard";
+
+const FavouriteCountriesPage = async () => {
+  const { userId } = auth();
+
+  let favouriteCountries = [];
+
+  if (userId) {
+    const { countries = [], error } = await getFavouriteCountries();
+
+    if (error) return <div className="px-4 md:container mt-10">{error}</div>;
+
+    if (countries.length > 0) {
+      favouriteCountries = await Promise.all(
+        countries.map(async (country) => {
+          const { data } = await getCountry(country.country);
+          return data;
+        })
+      );
+    }
+  }
+
+  return (
+    <div className="px-4 md:container mt-10">
+      <h1 className="mb-10 text-lg font-semibold">Favourite Countries</h1>
+      <SignedOut>
+        <p>Please sign in to see your favourite countries</p>
+      </SignedOut>
+      <SignedIn>
+        <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+          {favouriteCountries.map((country) => (
+            <li key={country.cca3}>
+              <CountryCard country={country} />
+            </li>
+          ))}
+        </ul>
+      </SignedIn>
+    </div>
+  );
+};
+
+export default FavouriteCountriesPage;

app/favourites/page.tsx

@@ -11,10 +11,10 @@ export default async function Home() {
   );
 
   return (
-    <main className="px-4 md:container mb-10">
+    <main className="px-4 md:container my-10">
       {error && <p>{error}</p>}
 
-      <CountryList data={countriesInAlphabeticalOrder} />
+      {!error && <CountryList data={countriesInAlphabeticalOrder} />}
       <ScrollButton />
     </main>
   );

app/page.tsx

@@ -24,3 +24,18 @@ export async function getUser() {
     console.error(error);
   }
 }
+
+export async function getFavouriteCountries() {
+  try {
+    const user = await getUser();
+    if (!user) return { error: "User not found" };
+
+    const countries = await prisma.favouriteCountry.findMany({
+      where: { userId: user.id },
+    });
+
+    return { countries };
+  } catch (error) {
+    return { error: "Error fetching data" };
+  }
+}

lib/user.ts

@@ -17,5 +17,13 @@ model User {
   id           Int      @id @default(autoincrement())
   name         String?
   email        String   @unique
-  favCountries String[]
+  favoriteCountries FavouriteCountry[]
 }
+
+model FavouriteCountry {
+  id        Int      @id @default(autoincrement())
+  userId    Int
+  country   String
+  user      User     @relation(fields: [userId], references: [id])
+}
+