Skip to content

Commit

Permalink
Fetching new and trending posts
Browse files Browse the repository at this point in the history
  • Loading branch information
@MeetDOD
MeetDOD committed Jul 6, 2024
1 parent 70f3f51 commit f3708b9
Show file tree
Hide file tree
Showing 6 changed files with 143 additions and 156 deletions.
111 changes: 43 additions & 68 deletions admin/src/components/NewPosts.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,24 @@
import { PiNewspaperClippingLight } from "react-icons/pi"
import axios from "axios";
import { useEffect, useState } from "react";
import { IPost } from '../types';

const NewPosts = () => {
const [posts, setposts] = useState<IPost[]>([]);

const fetchPost = async () => {
try {
const response = await axios.get('/api/v1/posts?page=1&pageSize=6');
setposts(response.data.posts.reverse());
// console.log(response.data.posts);
} catch (error) {
console.log(error);
}
};

useEffect(() => {
fetchPost();
}, []);
return (
<div>
<div>
Expand All @@ -11,84 +29,41 @@ const NewPosts = () => {
New Posts
</span>
</div>
<div className="lg:mx-24 mx-10 mt-4 lg:mr-11 overflow-x-auto shadow-md rounded-xl mb-5">
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<div className="lg:mx-24 mx-10 lg:mr-11 mt-5 overflow-x-auto shadow-md rounded-xl mb-5">
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead className="text-xs text-white uppercase bg-sky-500">
<tr>
<th scope="col" className="px-6 py-3">
Title
</th>
<th scope="col" className="px-6 py-3">
Author
</th>
<th scope="col" className="px-6 py-3">
createdAt
</th>
<th scope="col" className="px-6 py-3">
Likes
</th>
<th scope="col" className="px-6 py-3">
Comments
</th>
<th scope="col" className="px-6 py-3">
Action
</th>
</tr>
<tr>
<th scope="col" className="px-6 py-3">Title</th>
<th scope="col" className="px-6 py-3">Author</th>
<th scope="col" className="px-3 py-3">Created At</th>
<th scope="col" className="px-6 py-3">Comments</th>
<th scope="col" className="px-6 py-3">Reactions</th>
<th scope="col" className="px-6 py-3">Action</th>
</tr>
</thead>
<tbody>
<tr className="border-b bg-[#000435] border-sky-500 hover:bg-blue-950 hover:text-white">
<td className="px-8 py-4 font-semibold text-white">
Navbar component
</td>
<th className="flex items-center px-6 py-5 text-white">
<div>
<div className="text-base font-bold">Neil Sims</div>
<div className="font-medium text-gray-300 ">neil.sims@flowbite.com</div>
</div>
</th>
<td className="px-3 py-4 font-semibold">
10th June 2024
</td>
<td className="px-8 py-4 font-semibold">
7
</td>
<td className="px-12 py-4 font-semibold">
7
</td>
<td className="px-2 py-4 ">
<button className='font-semibold rounded-md p-2 bg-sky-500 text-white px-4 hover:bg-sky-600'>
Manage
</button>
</td>
</tr>
<tr className="border-b bg-[#000435] border-sky-500 hover:bg-blue-950 hover:text-white">
<td className="px-8 py-4 font-semibold text-white">
Navbar component
</td>
<th className="flex items-center px-6 py-5 text-white">
{posts.slice(0,6).map(posts => (
<tr key={posts.id} className="border-b bg-[#000435] border-sky-500 hover:bg-blue-950 hover:text-white">
<td className="px-8 py-4 font-semibold text-white">{posts.title}</td>
<th className="flex items-center px-6 py-5 text-white">
<div>
<div className="text-base font-bold">Neil Sims</div>
<div className="font-medium text-gray-300 ">neil.sims@flowbite.com</div>
</div>
</th>
<td className="px-3 py-4 font-semibold">
10th June 2024
</td>
<td className="px-8 py-4 font-semibold">
7
</td>
<td className="px-12 py-4 font-semibold">
7
</td>
<td className="px-2 py-4 ">
<div className="text-base font-bold">{posts.author.username}</div>
<div className="font-medium text-gray-300 ">{posts.author.email}</div>
</div>
</th>
<td className="px-3 py-4 font-semibold">{new Date(posts.createdAt).toLocaleDateString()}</td>
<td className="px-14 py-4 font-semibold">{posts.comments.length}</td>
<td className="px-12 py-4 font-semibold">{posts.reactions.length}</td>
<td className="px-2 py-4">
<button className='font-semibold rounded-md p-2 bg-sky-500 text-white px-4 hover:bg-sky-600'>
Manage
</button>
</td>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
)
}
Expand Down
138 changes: 57 additions & 81 deletions admin/src/components/TrendingPosts.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,72 @@
import axios from "axios";
import { useEffect, useState } from "react";
import { MdAutoGraph } from "react-icons/md";
import { IPost } from '../types';

const TrendingPosts = () => {
const [trendingPosts, setTrendingPosts] = useState<IPost[]>([]);

const fetchPost = async () => {
try {
const response = await axios.get('/api/v1/posts/trending');
setTrendingPosts(response.data.trendingPosts);
// console.log(response.data.trendingPosts);
} catch (error) {
console.log(error);
}
};

useEffect(() => {
fetchPost();
}, []);

return (
<div>
<div>
<div>
<span className="flex items-center mx-24 lg:mr-11 text-xl font-bold mt-7 decoration-sky-500 decoration-dotted underline">
<div className='inline-block p-2 text-white bg-[#000435] rounded-lg mr-2'>
<MdAutoGraph size={23}/>
</div>
Trending Posts
<div className='inline-block p-2 text-white bg-[#000435] rounded-lg mr-2'>
<MdAutoGraph size={23} />
</div>
Trending Posts
</span>
</div>
<div className="lg:mx-24 mx-10 lg:mr-11 mt-5 overflow-x-auto shadow-md rounded-xl mb-5">
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead className="text-xs text-white uppercase bg-sky-500">
</div>
<div className="lg:mx-24 mx-10 lg:mr-11 mt-5 overflow-x-auto shadow-md rounded-xl mb-5">
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead className="text-xs text-white uppercase bg-sky-500">
<tr>
<th scope="col" className="px-6 py-3">
Title
</th>
<th scope="col" className="px-6 py-3">
Author
</th>
<th scope="col" className="px-6 py-3">
createdAt
</th>
<th scope="col" className="px-6 py-3">
Likes
</th>
<th scope="col" className="px-6 py-3">
Comments
</th>
<th scope="col" className="px-6 py-3">
Action
</th>
</tr>
</thead>
<tbody>
<tr className="border-b bg-[#000435] border-sky-500 hover:bg-blue-950 hover:text-white">
<td className="px-8 py-4 font-semibold text-white">
Navbar component
</td>
<th className="flex items-center px-6 py-5 text-white">
<div>
<div className="text-base font-bold">Neil Sims</div>
<div className="font-medium text-gray-300 ">neil.sims@flowbite.com</div>
</div>
</th>
<td className="px-3 py-4 font-semibold">
10th June 2024
</td>
<td className="px-8 py-4 font-semibold">
7
</td>
<td className="px-12 py-4 font-semibold">
7
</td>
<td className="px-2 py-4 ">
<button className='font-semibold rounded-md p-2 bg-sky-500 text-white px-4 hover:bg-sky-600'>
Manage
</button>
</td>
<th scope="col" className="px-6 py-3">Title</th>
<th scope="col" className="px-6 py-3">Author</th>
<th scope="col" className="px-3 py-3">Created At</th>
<th scope="col" className="px-6 py-3">Comments</th>
<th scope="col" className="px-6 py-3">Reactions</th>
<th scope="col" className="px-6 py-3">Action</th>
</tr>
<tr className="border-b bg-[#000435] border-sky-500 hover:bg-blue-950 hover:text-white">
<td className="px-8 py-4 font-semibold text-white">
Navbar component
</td>
</thead>
<tbody>
{trendingPosts.slice(0,6).map(post => (
<tr key={post.id} className="border-b bg-[#000435] border-sky-500 hover:bg-blue-950 hover:text-white">
<td className="px-8 py-4 font-semibold text-white">{post.title}</td>
<th className="flex items-center px-6 py-5 text-white">
<div>
<div className="text-base font-bold">Neil Sims</div>
<div className="font-medium text-gray-300 ">neil.sims@flowbite.com</div>
</div>
<div>
<div className="text-base font-bold">{post.author.username}</div>
<div className="font-medium text-gray-300 ">{post.author.email}</div>
</div>
</th>
<td className="px-3 py-4 font-semibold">
10th June 2024
</td>
<td className="px-8 py-4 font-semibold">
7
<td className="px-3 py-4 font-semibold">{new Date(post.createdAt).toLocaleDateString()}</td>
<td className="px-14 py-4 font-semibold">{post.comments.length}</td>
<td className="px-12 py-4 font-semibold">{post.reactions.length}</td>
<td className="px-2 py-4">
<button className='font-semibold rounded-md p-2 bg-sky-500 text-white px-4 hover:bg-sky-600'>
Manage
</button>
</td>
<td className="px-12 py-4 font-semibold">
7
</td>
<td className="px-2 py-4 ">
<button className='font-semibold rounded-md p-2 bg-sky-500 text-white px-4 hover:bg-sky-600'>
Manage
</button>
</td>
</tr>
</tbody>
</table>
</tr>
))}
</tbody>
</table>
</div>
</div>
)
}
);
};

export default TrendingPosts
export default TrendingPosts;
33 changes: 33 additions & 0 deletions admin/src/types.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
export interface IPost {
id: string;
title: string;
description: string;
codeSnippet: string;
jsCodeSnippet: string;
tags: string[];
createdAt:number;
author: {
id: string;
username: string;
email: string;
totalFollowers:number
},
comments:[]
reactions:[];
favoritePosts: [];
userReaction: 'Like' | 'Celebrate' | 'Support' | 'Love' | 'Insightful' | 'Funny' | null;
}

export interface IUser {
id: string;
username: string;
email: string;
verified: boolean;
createdAt:string;
posts: IPost[];
favoritePosts?: IPost[];
isFollowing: boolean;
_count: {
following: number
}
}
8 changes: 8 additions & 0 deletions backend/src/routes/post/controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,10 +279,15 @@ export const getPostsWithPagination = async (req: Request, res: Response) => {
jsCodeSnippet: true,
description: true,
tags: true,
likes:true,
createdAt:true,
comments:true,
reactions:true,
author: {
select: {
id: true,
username: true,
email:true
},
},
},
Expand Down Expand Up @@ -323,6 +328,9 @@ export const getTrendingPostsController = async (req: Request, res: Response) =>
jsCodeSnippet: true,
description: true,
tags: true,
likes:true,
createdAt:true,
comments:true,
author: {
select: {
id: true,
Expand Down
5 changes: 0 additions & 5 deletions backend/src/routes/post/route.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
import { Router } from "express";
import authMiddleware from "../../middleware/auth"





import { getTrendingPostsController,aiCustomization, createCommentController, createPostController, deletePostController, favoritePostController, getAllTagsController, getCommentsController, getFavoritePostsController, getLeaderboardController, getPostController, getPostReactionsController, getPostsWithPagination, getUserReactionController, reactToPostController, removeReactionController, unfavoritePostController, updatePostController } from "./controller";


const postRouter = Router();

postRouter.get('/', getPostsWithPagination);
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ import EditPost from "./pages/EditPost";
import useTheme from './hooks/useTheme';
import CodeEditor from "./pages/CodeEditor";
import TrendingPosts from "./pages/TrendingPosts";
import axios from "axios";
axios.defaults.baseURL = "http://localhost:3001/";
// import axios from "axios";
// axios.defaults.baseURL = "http://localhost:3001/";

function App() {
const { theme, toggleTheme } = useTheme();
Expand Down

0 comments on commit f3708b9

Please sign in to comment.