add relations

app/api/data/route.ts

@@ -0,0 +1,34 @@
+import { NextResponse } from 'next/server';
+import { db } from '@/app/connection';
+
+export async function GET() {
+    try {
+        const database = await db;
+
+        // Fetch all users
+        const users = await database.userRepository.find();
+
+        // Fetch all posts with their related users and tags
+        const posts = await database.postRepository.find({
+            relations: ['user', 'tags'],
+            order: { createdAt: 'DESC' }
+        });
+
+        // Fetch all tags
+        const tags = await database.tagRepository.find({
+            order: { name: 'ASC' }
+        });
+
+        return NextResponse.json({
+            users,
+            posts,
+            tags
+        });
+    } catch (error) {
+        console.error('Error fetching data:', error);
+        return NextResponse.json(
+            { error: 'Failed to fetch data' },
+            { status: 500 }
+        );
+    }
+}

app/api/posts/route.ts

@@ -0,0 +1,64 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { db } from '@/app/connection';
+
+export async function POST(request: NextRequest) {
+    try {
+        const { content, username, email } = await request.json();
+
+        if (!content || !username || !email) {
+            return NextResponse.json(
+                { error: 'Content, username, and email are required' },
+                { status: 400 }
+            );
+        }
+
+        const database = await db;
+
+        // Check if user exists, if not create one
+        let user = await database.userRepository.findOne({
+            where: { email }
+        });
+
+        if (!user) {
+            user = database.userRepository.create({
+                name: username,
+                email: email,
+            });
+            await database.userRepository.save(user);
+        }
+
+        // Extract hashtags from content
+        const hashtagRegex = /#([a-zA-Z0-9_]+)/g;
+        const hashtags = [...content.matchAll(hashtagRegex)].map(match => match[1].toLowerCase());
+        const uniqueHashtags = [...new Set(hashtags)];
+
+        // Create or find tags
+        const tags = [];
+        for (const tagName of uniqueHashtags) {
+            let tag = await database.tagRepository.findOne({ where: { name: tagName } });
+            if (!tag) {
+                tag = database.tagRepository.create({ name: tagName });
+                await database.tagRepository.save(tag);
+            }
+            tags.push(tag);
+        }
+
+        // Create the post
+        const post = database.postRepository.create({
+            content,
+            username,
+            userEmail: email,
+            tags
+        });
+
+        const savedPost = await database.postRepository.save(post);
+
+        return NextResponse.json(savedPost, { status: 201 });
+    } catch (error) {
+        console.error('Error creating post:', error);
+        return NextResponse.json(
+            { error: 'Failed to create post' },
+            { status: 500 }
+        );
+    }
+}

app/page.tsx

@@ -1,21 +1,319 @@
-import Image from "next/image";
-import { db } from "./connection";
+"use client";
 
+import { useState, useEffect } from "react";
+import { UserEntity } from "@/schema/entity/UserEntity";
+import { PostEntity } from "@/schema/entity/PostEntity";
+import { TagEntity } from "@/schema/entity/TagEntity";
+
+interface PostWithUser extends PostEntity {
+  user: UserEntity | null;
+  tags: TagEntity[];
+}
+
+export default function Home() {
+  const [posts, setPosts] = useState<PostWithUser[]>([]);
+  const [users, setUsers] = useState<UserEntity[]>([]);
+  const [tags, setTags] = useState<TagEntity[]>([]);
+  const [filteredPosts, setFilteredPosts] = useState<PostWithUser[]>([]);
+  const [selectedUser, setSelectedUser] = useState<string | null>(null);
+  const [selectedTag, setSelectedTag] = useState<string | null>(null);
+  const [content, setContent] = useState("");
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    let filtered = posts;
+
+    if (selectedUser) {
+      filtered = filtered.filter(post => post.userEmail === selectedUser);
+    }
+
+    if (selectedTag) {
+      filtered = filtered.filter(post =>
+        post.tags && post.tags.some(tag => tag.name === selectedTag)
+      );
+    }
+
+    setFilteredPosts(filtered);
+  }, [posts, selectedUser, selectedTag]);
+
+  const fetchData = async () => {
+    try {
+      const response = await fetch('/api/data');
+      const data = await response.json();
+      setPosts(data.posts || []);
+      setUsers(data.users || []);
+      setTags(data.tags || []);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  };
+
+  const handleSubmitPost = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!content.trim() || !username.trim() || !email.trim()) {
+      alert('Please fill in all fields');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const response = await fetch('/api/posts', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          content: content.trim(),
+          username: username.trim(),
+          email: email.trim(),
+        }),
+      });
+
+      if (response.ok) {
+        setContent("");
+        setUsername("");
+        setEmail("");
+        await fetchData(); // Refresh data
+      } else {
+        alert('Failed to create post');
+      }
+    } catch (error) {
+      console.error('Error creating post:', error);
+      alert('Error creating post');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleUserClick = (userEmail: string) => {
+    if (selectedUser === userEmail) {
+      setSelectedUser(null); // Deselect if clicking same user
+    } else {
+      setSelectedUser(userEmail);
+      setSelectedTag(null); // Clear tag filter when selecting user
+    }
+  };
+
+  const handleTagClick = (tagName: string) => {
+    if (selectedTag === tagName) {
+      setSelectedTag(null); // Deselect if clicking same tag
+    } else {
+      setSelectedTag(tagName);
+      setSelectedUser(null); // Clear user filter when selecting tag
+    }
+  };
+
+  const clearAllFilters = () => {
+    setSelectedUser(null);
+    setSelectedTag(null);
+  };
+
+  const renderPostContent = (content: string) => {
+    // Convert hashtags to clickable elements
+    const parts = content.split(/(#[a-zA-Z0-9_]+)/g);
+    return parts.map((part, index) => {
+      if (part.match(/^#[a-zA-Z0-9_]+$/)) {
+        const tagName = part.slice(1).toLowerCase();
+        return (
+          <span
+            key={index}
+            className="text-blue-600 cursor-pointer hover:text-blue-800 font-medium"
+            onClick={() => handleTagClick(tagName)}
+          >
+            {part}
+          </span>
+        );
+      }
+      return part;
+    });
+  };
 
-export default async function Home() {
-  const user  = await db.userRepository.findOneBy({email: "montheeric1@gmail.com"})
-  
   return (
-    <div>
-      <div>{user?.email}</div>
-      <div className="size-10">
-        <Image
-          alt="user avatar"
-          src={user?.image ?? ""}
-          className="object-cover"
-          fill
-        />
+    <div className="max-w-7xl mx-auto p-6 space-y-8">
+      <h1 className="text-3xl font-bold text-center">Posts, Users & Tags</h1>
+
+      {/* Post Creation Form */}
+      <div className="bg-white p-6 rounded-lg shadow-md">
+        <h2 className="text-2xl font-semibold mb-4">Create New Post</h2>
+        <p className="text-sm text-gray-600 mb-4">
+          Use hashtags like #javascript #coding to categorize your posts!
+        </p>
+        <form onSubmit={handleSubmitPost} className="space-y-4">
+          <div>
+            <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
+              Username
+            </label>
+            <input
+              type="text"
+              id="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="Enter your username"
+              required
+            />
+          </div>
+
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="Enter your email"
+              required
+            />
+          </div>
+
+          <div>
+            <label htmlFor="content" className="block text-sm font-medium text-gray-700 mb-1">
+              Post Content
+            </label>
+            <textarea
+              id="content"
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 h-32 resize-vertical"
+              placeholder="What's on your mind? Use #hashtags to categorize your post!"
+              required
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? 'Creating Post...' : 'Create Post'}
+          </button>
+        </form>
+      </div>
+
+      {/* Filter Status */}
+      {(selectedUser || selectedTag) && (
+        <div className="bg-blue-50 p-4 rounded-lg">
+          <div className="flex items-center justify-between">
+            <span className="text-blue-800">
+              {selectedUser && `Filtering by user: ${selectedUser}`}
+              {selectedTag && `Filtering by tag: #${selectedTag}`}
+            </span>
+            <button
+              onClick={clearAllFilters}
+              className="text-blue-600 hover:text-blue-800 underline"
+            >
+              Clear all filters
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Users List */}
+        <div className="bg-white p-6 rounded-lg shadow-md">
+          <h2 className="text-2xl font-semibold mb-4">Users</h2>
+          {users.length === 0 ? (
+            <p className="text-gray-500">No users found</p>
+          ) : (
+            <div className="space-y-2">
+              {users.map((user) => (
+                <div
+                  key={user.id}
+                  className={`p-3 border rounded-md cursor-pointer transition-colors ${selectedUser === user.email
+                      ? 'bg-blue-100 border-blue-300'
+                      : 'hover:bg-gray-50 border-gray-200'
+                    }`}
+                  onClick={() => user.email && handleUserClick(user.email)}
+                >
+                  <div className="font-medium">{user.name || 'Unknown User'}</div>
+                  <div className="text-sm text-gray-600">{user.email}</div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Tags List */}
+        <div className="bg-white p-6 rounded-lg shadow-md">
+          <h2 className="text-2xl font-semibold mb-4">Tags</h2>
+          {tags.length === 0 ? (
+            <p className="text-gray-500">No tags found</p>
+          ) : (
+            <div className="flex flex-wrap gap-2">
+              {tags.map((tag) => (
+                <span
+                  key={tag.id}
+                  className={`px-3 py-1 rounded-full text-sm cursor-pointer transition-colors ${selectedTag === tag.name
+                      ? 'bg-blue-600 text-white'
+                      : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                    }`}
+                  onClick={() => handleTagClick(tag.name)}
+                >
+                  #{tag.name}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Posts List */}
+        <div className="bg-white p-6 rounded-lg shadow-md">
+          <h2 className="text-2xl font-semibold mb-4">
+            Posts ({filteredPosts.length})
+          </h2>
+          {filteredPosts.length === 0 ? (
+            <p className="text-gray-500">
+              {selectedUser || selectedTag ? 'No posts found with current filters' : 'No posts found'}
+            </p>
+          ) : (
+            <div className="space-y-4">
+              {filteredPosts.map((post) => (
+                <div key={post.id} className="border border-gray-200 rounded-md p-4">
+                  <div className="flex justify-between items-start mb-2">
+                    <div>
+                      <span
+                        className="font-medium text-blue-600 cursor-pointer hover:text-blue-800"
+                        onClick={() => handleUserClick(post.userEmail)}
+                      >
+                        {post.username}
+                      </span>
+                      <span className="text-sm text-gray-500 ml-2">({post.userEmail})</span>
+                    </div>
+                    <span className="text-xs text-gray-400">
+                      {new Date(post.createdAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                  <p className="text-gray-800 whitespace-pre-wrap mb-3">
+                    {renderPostContent(post.content)}
+                  </p>
+                  {post.tags && post.tags.length > 0 && (
+                    <div className="flex flex-wrap gap-1">
+                      {post.tags.map((tag) => (
+                        <span
+                          key={tag.id}
+                          className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded cursor-pointer hover:bg-blue-200"
+                          onClick={() => handleTagClick(tag.name)}
+                        >
+                          #{tag.name}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
-}
+}

schema/entity/PostEntity.ts

@@ -0,0 +1,34 @@
+import { Column, Entity, ManyToOne, ManyToMany, JoinColumn, JoinTable, type Relation } from "typeorm"
+import { UserEntity } from "./UserEntity"
+import { TagEntity } from "./TagEntity"
+import AbstractBaseEntity from "./abstract/AbstractBaseEntity"
+
+@Entity({ name: "posts" })
+export class PostEntity extends AbstractBaseEntity {
+
+    @Column({ type: "text" })
+    content!: string
+
+    @Column({ type: "varchar" })
+    userEmail!: string
+
+    @Column({ type: "varchar" })
+    username!: string
+
+    @Column({ type: "timestamp", default: () => "CURRENT_TIMESTAMP" })
+    createdAt!: Date
+
+    @ManyToOne(() => UserEntity, { nullable: true })
+    @JoinColumn({ name: "userEmail", referencedColumnName: "email" })
+    user!: Relation<UserEntity> | null
+
+    @ManyToMany(() => TagEntity, (tag) => tag.posts)
+    @JoinTable({
+        name: "post_tags",
+        joinColumn: { name: "postId", referencedColumnName: "id" },
+        inverseJoinColumn: { name: "tagId", referencedColumnName: "id" }
+    })
+    tags!: TagEntity[]
+}
+
+export default PostEntity

schema/entity/TagEntity.ts

@@ -0,0 +1,18 @@
+import { Column, Entity, ManyToMany } from "typeorm"
+import { PostEntity } from "./PostEntity"
+import AbstractBaseEntity from "./abstract/AbstractBaseEntity"
+
+@Entity({ name: "tags" })
+export class TagEntity extends AbstractBaseEntity {
+
+    @Column({ type: "varchar", unique: true })
+    name!: string
+
+    @Column({ type: "timestamp", default: () => "CURRENT_TIMESTAMP" })
+    createdAt!: Date
+
+    @ManyToMany(() => PostEntity, (post) => post.tags)
+    posts!: PostEntity[]
+}
+
+export default TagEntity

schema/entity/UserEntity.ts

@@ -3,9 +3,10 @@ import SessionEntity from "./SessionEntity"
 import AccountEntity from "./AccountEntity"
 import { transformer } from "../utils/transformers"
 import AbstractBaseEntity from "./abstract/AbstractBaseEntity"
+import { PostEntity } from "./PostEntity"
 
 @Entity({ name: "users" })
-export  class UserEntity extends AbstractBaseEntity {
+export class UserEntity extends AbstractBaseEntity {
 
     @Column({ type: "varchar", nullable: true })
     name!: string | null
@@ -30,4 +31,7 @@ export  class UserEntity extends AbstractBaseEntity {
 
     @OneToMany(() => AccountEntity, (account) => account.userId)
     accounts!: Relation<AccountEntity>[]
-}
+
+    @OneToMany(() => PostEntity, (post) => post.user)
+    posts!: Relation<PostEntity>[]
+}

schema/index.ts

@@ -1,17 +1,21 @@
 "use node"
 import { dataSource } from "./data-source";
 import { UserEntity } from "./entity/UserEntity";
+import { PostEntity } from "./entity/PostEntity";
+import { TagEntity } from "./entity/TagEntity";
 
 
 let dbInstance = dataSource;
 // you can add a try catch
 export const dbSource = async () => {
 
-    if(!dataSource.isInitialized) {
+    if (!dataSource.isInitialized) {
         dbInstance = await dataSource.initialize();
     }
-    
+
     return {
         userRepository: dbInstance.getRepository(UserEntity),
+        postRepository: dbInstance.getRepository(PostEntity),
+        tagRepository: dbInstance.getRepository(TagEntity),
     }
-}
+}