Integrate Server Actions into Pages to Fetch Data

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

src/actions/cafe.action.ts

@@ -1,16 +1,14 @@
-'use server'
+"use server";
 
 import { connect } from "@/lib/db"; // connect to the database
 import Cafe from "@/models/cafe.model"; // cafe model
 
-export async function getCafes() { 
-    try {
-        await connect();
-        const cafes = await Cafe.find();
-        return cafes;
-    } catch (error) {
-        throw new Error("Failed to fetch cafes");
-    }
+export async function getCafes() {
+  try {
+    await connect();
+    const cafes = await Cafe.find();
+    return cafes;
+  } catch (error) {
+    throw new Error("Failed to fetch cafes");
+  }
 }
-
-

src/actions/news.actions.ts

@@ -1,14 +1,14 @@
-'use server'
+"use server";
 
 import { connect } from "@/lib/db";
 import News from "@/models/news.model";
 
 export async function getNews() {
-    try {
-        await connect();
-        const news = await News.find();
-        return news;
-    } catch (error) {
-        throw new Error("Failed to fetch news");
-    }
-} 
+  try {
+    await connect();
+    const news = await News.find();
+    return news;
+  } catch (error) {
+    throw new Error("Failed to fetch news");
+  }
+}

src/app/cafes/page.tsx → src/app/(categories)/(en)/cafes/CafesData.tsx

@@ -1,17 +1,6 @@
-import Link from "next/link";
-import {
-  MapPin,
-  Clock,
-  Banknote,
-  ArrowLeft,
-  MessageSquare,
-} from "lucide-react";
-
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Cafes",
-};
+import { MapPin, Clock, Banknote, MessageSquare } from "lucide-react";
+import { getCafes } from "@/actions/cafe.action";
+import ErrorHeader from "@/components/ui/ErrorHeader/ErrorHeader";
 
 interface Cafe {
   name: string;
@@ -20,11 +9,11 @@ interface Cafe {
   openTime: string;
   closeTime: string;
   studyScore: number;
-  priceRange: "$" | "$$" | "$$$";
+  priceRange: string;
   comments: string[];
 }
 
-const cafes: Cafe[] = [
+/* const cafes: Cafe[] = [
   {
     name: "Yemen Coffee EMU",
     location: "EMU Campus Center",
@@ -269,19 +258,17 @@ const cafes: Cafe[] = [
     priceRange: "$$$",
     comments: ["Lovely staff", "Good coffee", "Friendly staff"],
   },
-];
+]; */
+
+export default async function CafesData({ lang }: { lang?: "en" | "tr" }) {
+  const cafes: Cafe[] = await getCafes();
+
+  if (!cafes || !cafes.length) {
+    return <ErrorHeader lang={lang} />;
+  }
 
-export default function page() {
   return (
-    <div className="container mx-auto px-4 py-8">
-      <Link
-        href="/"
-        className="inline-flex items-center mb-6 text-blue-600 hover:text-blue-800"
-      >
-        <ArrowLeft className="w-4 h-4 mr-2" />
-        Back to Home
-      </Link>
-      <h1 className="text-3xl font-bold mb-6">Cafes near EMU</h1>
+    <>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {cafes.map((cafe, index) => (
           <div key={index} className="bg-white rounded-lg shadow-md p-6">
@@ -307,7 +294,9 @@ export default function page() {
                 {cafe.priceRange}
               </p>
               <p className="flex items-center">
-                <span className="font-semibold mr-2">Study Score:</span>
+                <span className="font-semibold mr-2">
+                  {lang === "en" ? "Study Store:" : "Ders Çalışma Ortamı:"}
+                </span>
                 <span
                   className={`px-2 py-1 rounded ${
                     cafe.studyScore >= 8
@@ -323,10 +312,10 @@ export default function page() {
               <div className="mt-4">
                 <h3 className="font-semibold flex items-center mb-2">
                   <MessageSquare className="w-4 h-4 mr-2" />
-                  Comments
+                  {lang === "en" ? "Comments" : "Yorumlar"}
                 </h3>
                 <ul className="list-disc list-inside space-y-1">
-                  {cafe.comments.map((comment, i) => (
+                  {cafe.comments.map((comment: string, i: number) => (
                     <li key={i} className="text-sm text-gray-600">
                       {comment}
                     </li>
@@ -337,6 +326,6 @@ export default function page() {
           </div>
         ))}
       </div>
-    </div>
+    </>
   );
 }

src/app/(categories)/(en)/cafes/page.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from "next";
+import CafesData from "./CafesData";
+import CategoryPost from "@/components/ui/CategoryCard/CategoryPost";
+
+export const metadata: Metadata = {
+  title: "Cafes",
+};
+
+export default function page() {
+  return (
+    <CategoryPost title="Cafes near EMU">
+      <CafesData lang={"en"} />
+    </CategoryPost>
+  );
+}

src/app/clubs/page.tsx → src/app/(categories)/(en)/clubs/ClubsData.tsx

@@ -1,11 +1,6 @@
-import Link from "next/link";
-import { ArrowLeft, Users, ExternalLink, Activity } from "lucide-react";
-
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Clubs",
-};
+import { Users, ExternalLink, Activity } from "lucide-react";
+import ErrorHeader from "@/components/ui/ErrorHeader/ErrorHeader";
+import { getClubs } from "@/actions/club.actions";
 
 interface Club {
   id: number;
@@ -15,7 +10,7 @@ interface Club {
   activities: string[];
 }
 
-const clubs: Club[] = [
+/* const clubs: Club[] = [
   {
     id: 1,
     name: "EMU Photography Club",
@@ -453,78 +448,72 @@ const clubs: Club[] = [
       "Community outreach",
     ],
   },
-];
+]; */
+
+export default async function ClubsData({ lang }: { lang?: "en" | "tr" }) {
+  const clubs: Club[] = await getClubs();
+
+  if (!clubs || !clubs.length) {
+    return <ErrorHeader lang={lang} />;
+  }
 
-export default function page() {
   return (
-    <div className="container mx-auto px-4 py-8">
-      <Link
-        href="/"
-        className="inline-flex items-center mb-6 text-blue-600 hover:text-blue-800"
-      >
-        <ArrowLeft className="w-4 h-4 mr-2" />
-        Back to Home
-      </Link>
-      <h1 className="text-3xl font-bold mb-6">EMU Clubs</h1>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-        {clubs.map((club) => (
-          <div
-            key={club.id}
-            className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300 ease-in-out"
-          >
-            <h2 className="text-2xl font-bold mb-4 text-gray-800">
-              {club.name}
-            </h2>
-            <div className="space-y-4">
-              {club.memberSize && (
-                <p className="flex items-center text-gray-700">
-                  <Users className="w-5 h-5 mr-2" />
-                  {club.memberSize === "low" && <Users className="w-5 h-5" />}
-                  {club.memberSize === "mid" && (
-                    <>
-                      <Users className="w-5 h-5" />
-                      <Users className="w-5 h-5" />
-                    </>
-                  )}
-                  {club.memberSize === "high" && (
-                    <>
-                      <Users className="w-5 h-5" />
-                      <Users className="w-5 h-5" />
-                      <Users className="w-5 h-5" />
-                    </>
-                  )}
-                </p>
-              )}
-              {club.link && (
-                <p className="flex items-center text-blue-600">
-                  <ExternalLink className="w-5 h-5 mr-2" />
-                  <a
-                    href={club.link}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="hover:underline flex items-center"
-                  >
-                    Club Page
-                  </a>
-                </p>
-              )}
-              {club.activities.length > 0 && (
-                <div>
-                  <h3 className="font-semibold flex items-center mb-2">
-                    <Activity className="w-5 h-5 mr-2" />
-                    Activities
-                  </h3>
-                  <ul className="list-disc list-inside space-y-2 text-sm text-gray-600">
-                    {club.activities.map((activity, index) => (
-                      <li key={index}>{activity}</li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-            </div>
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      {clubs.map((club) => (
+        <div
+          key={club.id}
+          className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300 ease-in-out"
+        >
+          <h2 className="text-2xl font-bold mb-4 text-gray-800">{club.name}</h2>
+          <div className="space-y-4">
+            {club.memberSize && (
+              <p className="flex items-center text-gray-700">
+                <Users className="w-5 h-5 mr-2" />
+                {club.memberSize === "low" && <Users className="w-5 h-5" />}
+                {club.memberSize === "mid" && (
+                  <>
+                    <Users className="w-5 h-5" />
+                    <Users className="w-5 h-5" />
+                  </>
+                )}
+                {club.memberSize === "high" && (
+                  <>
+                    <Users className="w-5 h-5" />
+                    <Users className="w-5 h-5" />
+                    <Users className="w-5 h-5" />
+                  </>
+                )}
+              </p>
+            )}
+            {club.link && (
+              <p className="flex items-center text-blue-600">
+                <ExternalLink className="w-5 h-5 mr-2" />
+                <a
+                  href={club.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:underline flex items-center"
+                >
+                  Club Page
+                </a>
+              </p>
+            )}
+            {club.activities.length > 0 && (
+              <div>
+                <h3 className="font-semibold flex items-center mb-2">
+                  <Activity className="w-5 h-5 mr-2" />
+                  Activities
+                </h3>
+                <ul className="list-disc list-inside space-y-2 text-sm text-gray-600">
+                  {club.activities.map((activity, index) => (
+                    <li key={index}>{activity}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
           </div>
-        ))}
-      </div>
+        </div>
+      ))}
     </div>
   );
 }

src/app/(categories)/(en)/clubs/page.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from "next";
+import CategoryPost from "@/components/ui/CategoryCard/CategoryPost";
+import ClubsData from "./ClubsData";
+
+export const metadata: Metadata = {
+  title: "Clubs",
+};
+
+export default function page() {
+  return (
+    <CategoryPost title="EMU Clubs">
+      <ClubsData lang={"en"} />
+    </CategoryPost>
+  );
+}