From 9fd0d868734b27cc024d73d892a6f7c49a89deef Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Mon, 10 Mar 2025 20:55:11 +0000
Subject: [PATCH] add static posts page

---
 backend/src/routes/pure_sql_posts.js      | 16 ++++++++
 frontend/src/components/AsideMenuItem.tsx |  2 +-
 frontend/src/pages/posts.tsx              | 18 +++++++++
 frontend/src/pages/web_pages/home.tsx     |  1 +
 frontend/src/pages/web_pages/posts.tsx    | 48 +++++++++++++++++++++++
 5 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 backend/src/routes/pure_sql_posts.js
 create mode 100644 frontend/src/pages/posts.tsx
 create mode 100644 frontend/src/pages/web_pages/posts.tsx

diff --git a/backend/src/routes/pure_sql_posts.js b/backend/src/routes/pure_sql_posts.js
new file mode 100644
index 0000000..ea4c8f0
--- /dev/null
+++ b/backend/src/routes/pure_sql_posts.js
@@ -0,0 +1,16 @@
+const express = require('express');
+const router = express.Router();
+const { sequelize } = require('../db/models');
+
+// Endpoint to fetch posts using a pure SQL query
+router.get('/pure-sql-posts', async (req, res) => {
+  try {
+    const [rows] = await sequelize.query('SELECT * FROM posts ORDER BY posted_at DESC');
+    res.json(rows);
+  } catch (error) {
+    console.error('Error fetching posts:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
+module.exports = router;
diff --git a/frontend/src/components/AsideMenuItem.tsx b/frontend/src/components/AsideMenuItem.tsx
index c5a8b8a..fa5a7d2 100644
--- a/frontend/src/components/AsideMenuItem.tsx
+++ b/frontend/src/components/AsideMenuItem.tsx
@@ -85,7 +85,7 @@ const AsideMenuItem = ({ item, isDropdownList = false }: Props) => {
   ].join(' ');
 
   return (
-    <li className={'px-3 py-1.5'}>
+    <li className={'px-2 py-1'}>
       {item.withDevider && <hr className={`${borders} mb-3`} />}
       {item.href && (
         <Link href={item.href} target={item.target} className={componentClass}>
diff --git a/frontend/src/pages/posts.tsx b/frontend/src/pages/posts.tsx
new file mode 100644
index 0000000..be64738
--- /dev/null
+++ b/frontend/src/pages/posts.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { ReactElement } from 'react';
+import LayoutGuest from '../layouts/Guest';
+
+const PostsPage = () => {
+  return (
+    <div className="container mx-auto p-4">
+      <h1 className="text-2xl font-bold mb-4">Posts</h1>
+      <p>This is a static posts page. Content coming soon!</p>
+    </div>
+  );
+};
+
+PostsPage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
+
+export default PostsPage;
diff --git a/frontend/src/pages/web_pages/home.tsx b/frontend/src/pages/web_pages/home.tsx
index f869936..d2cd457 100644
--- a/frontend/src/pages/web_pages/home.tsx
+++ b/frontend/src/pages/web_pages/home.tsx
@@ -41,6 +41,7 @@ export default function WebSite() {
       label: 'home',
     },
 
+    { href: '/posts', label: 'posts' },
     {
       href: '/about',
       label: 'about',
diff --git a/frontend/src/pages/web_pages/posts.tsx b/frontend/src/pages/web_pages/posts.tsx
new file mode 100644
index 0000000..435126e
--- /dev/null
+++ b/frontend/src/pages/web_pages/posts.tsx
@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from "react";
+import WebsiteHeader from "../components/WebsiteHeader";
+import WebsiteFooter from "../components/WebsiteFooter";
+
+const PostsPage = () => {
+  const [posts, setPosts] = useState([]);
+
+  useEffect(() => {
+    const fetchPosts = async () => {
+      try {
+        const response = await fetch('/api/pure-sql-posts');
+        if (response.ok) {
+          const data = await response.json();
+          setPosts(data);
+        } else {
+          console.error('Failed to fetch posts');
+        }
+      } catch (error) {
+        console.error('Error fetching posts:', error);
+      }
+    };
+
+    fetchPosts();
+  }, []);
+
+  return (
+    <>
+      <WebsiteHeader />
+      <div className="container mx-auto p-4">
+        <h1 className="text-3xl font-bold mb-4">Posts</h1>
+        <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
+          {posts.map((post) => (
+            <div key={post.id} className="bg-white shadow rounded p-4">
+              {/* Display content of the post and posted date. Adjust accordingly if more fields are needed. */}
+              <p className="mt-2">{post.content}</p>
+              <p className="text-sm text-gray-500 mt-2">
+                {new Date(post.posted_at).toLocaleString()}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+      <WebsiteFooter />
+    </>
+  );
+};
+
+export default PostsPage;