fix(AAiT-web-2): rtk query and minor ui fix

aait/web/group-2/app/blogs/[id]/page.tsx

@@ -1,25 +1,20 @@
-import { Blog } from "@/types/blog"
+"use client"
 import Image from "next/image"
+import { useGetBlogByIdQuery } from "@/store/features/blogs/blogs-api"
 
-export const getBlogDetail = async (blogId: string) => {
-  const res = await fetch(`https://a2sv-backend.onrender.com/api/blogs/${blogId}`)
-  console.log('response', res)
-  const blog: Blog = await res.json()
 
-  return blog
-}
 
 
 
-const BlogDetail: React.FC = async ({
+const BlogDetailPage: React.FC =  ({
   params: { id },
 }: {
   params: { id: string }
 }) => {
 
-  const blogDetail: Blog = await getBlogDetail(id)
+
+  const { data: blogDetail, isLoading, isFetching} = useGetBlogByIdQuery(id as string)
 
-  console.log('blog details', blogDetail)
 
   return (
     <div className='flex flex-col w-4/5 mx-auto my-20'>
@@ -32,14 +27,16 @@ const BlogDetail: React.FC = async ({
           <h4 className="text-gray-400"> 5 min read</h4>
         </div>
       </div>
+
       {/* Image section */}
       <div className='relative w-full h-[600px] flex flex-col justify-center items-center bg-gray-300 my-16'>
         {/* <Image src={blogDetail.image} alt="blog image" className='absolute w-full h-96 object-cover' objectFit="contain" layout='fill'/> */}
       </div>
+
       {/*Author section */}
       <div className='flex flex-col justify-center items-center'>
         <div className="w-20 h-20 rounded-[40px] bg-primary">
-          <Image src={blogDetail.author} alt="author image" className='w-full h-full object-cover rounded-[40px]' />
+          {/* <Image src={blogDetail. } alt="author image" className='w-full h-full object-cover rounded-[40px]' /> */}
         </div>
         <div className='flex flex-row justify-center items-center mt-6 gap-4'>
           <h4 className="text-gray-400">Chaltu Kebede</h4>
@@ -48,28 +45,15 @@ const BlogDetail: React.FC = async ({
         </div>
         <h4 className="text-blue-300">@Chaltu_Kebede</h4>
       </div>
+
+
       {/* Body section */}
       <div className='w-ful flex flex-row justify-end'>
         <div className="w-11/12 flex flex-col  mt-10 ">
           <div className="w-full flex flex-col items-center">
             <div className='mr-0'>
               <p className="text-justify pt-6">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
-                voluptatum, quibusdam, voluptate, quia quod voluptas quos
-                exercitationem voluptatibus quas quibusdam, voluptate, quia quod
-                voluptas quos exercitationem voluptatibus quas
-              </p>
-              <p className="text-justify pt-6">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
-                voluptatum, quibusdam, voluptate, quia quod voluptas quos
-                exercitationem voluptatibus quas quibusdam, voluptate, quia quod
-                voluptas quos exercitationem voluptatibus quas
-              </p>
-              <p className="text-justify pt-6">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
-                voluptatum, quibusdam, voluptate, quia quod voluptas quos
-                exercitationem voluptatibus quas quibusdam, voluptate, quia quod
-                voluptas quos exercitationem voluptatibus quas
+                {blogDetail.description}
               </p>
             </div>
           </div>
@@ -90,12 +74,11 @@ const BlogDetail: React.FC = async ({
                 <h3 className='text-xl capitalize font-medium'>Design Liberalized Exchange Rate Management</h3>
             </div>
           </div>
-
-
+
         </div>
       </div>
     </div>
-  )
+    )
 }
 
-export default BlogDetail
+export default BlogDetailPage

aait/web/group-2/app/blogs/page.tsx

@@ -1,46 +1,40 @@
-import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
-import Link from 'next/link'
-
-import BlogTags from '@/components/blogs/BlogTags'
-import { Blog } from '@/types/blog'
-import SearchArea from '@/components/blogs/SearchArea'
-import BlogAuthor from '@/components/blogs/BlogAuthor'
-import BlogPreview from '@/components/blogs/BlogPreview'
-
-
-
-export const getBlogs = async () => {
-    const res = await fetch('https://a2sv-backend.onrender.com/api/blogs')
-
-    return await res.json()
-}
+"use client";
 
+import React from 'react';
+import Link from 'next/link';
 
+import BlogTags from '@/components/blogs/BlogTags';
+import { Blog } from '@/types/blog/blog';
+import SearchArea from '@/components/blogs/SearchArea';
+import BlogAuthor from '@/components/blogs/BlogAuthor';
+import BlogPreview from '@/components/blogs/BlogPreview';
 
+import { useGetBlogsQuery} from '@/store/features/blogs/blogs-api';
 
 
+const BlogsPage: React.FC = () => {
 
-const BlogsPage: React.FC = async () => {
-
-    const blogs = await getBlogs();
+    const { data: blogs, error, isLoading } = useGetBlogsQuery();
     return (
-        <div className='w-11/12 mx-auto mt-20'>
+        <div className='w-11/12 mx-auto mt-25'>
             <SearchArea />
+
+            {/* The blogs */}
             <div className='w-4/5 flex flex-col mt-24 mx-auto'>
                 {
                     blogs && blogs.map((blog: Blog, index: number) => {
 
                         return (
                             <div className='w-full flex flex-col text-left border-gray-300 border-t-2 py-8'>
-                                <BlogAuthor name='' role='' imgUrl='' date=''/>
+                                <BlogAuthor name='' role='' imgUrl='' date='April 16, 2023' />
                                 <Link prefetch href={`blogs/${blog._id}`}>
                                     <BlogPreview title={blog.title} description={blog.description} blogImg={blog.image} />
                                 </Link>
                                 <div className='flex flex-wrap w-full'>
                                     {
                                         blog.tags.map((tag, index) => {
-                                            return <BlogTags tag={tag} key={index}/>
-                                                
+                                            return <BlogTags tag={tag} key={index} />
+
                                         })}
                                 </div>
                             </div>
@@ -50,6 +44,11 @@ const BlogsPage: React.FC = async () => {
                 }
 
             </div>
+
+            {/* The pagination */}
+            <div className=''>
+
+            </div>
         </div>
     )
 }

aait/web/group-2/components/blogs/BlogAuthor.tsx

@@ -21,7 +21,7 @@ const BlogAuthor: React.FC<BlogAuthorProps> = ({name, role, date,imgUrl}:BlogAut
                                                 <h4 className='text-lg text-[#9C9C9C] uppercase' >Software Engineer</h4>
                                             </div>
                                             <div className='flex ml-3'>
-                                                <div className='flex justify-center items-center'><div className='w-[6px] h-[6px] rounded-[3px] bg-gray-400'></div><h5 className='text-gray-600 ml-3'> date-month-year</h5></div>
+                                                <div className='flex justify-center items-center'><div className='w-[6px] h-[6px] rounded-[3px] bg-gray-400'></div><h5 className='text-gray-600 ml-3'> {date}</h5></div>
                                             </div>
                                         </div>
 

aait/web/group-2/components/blogs/BlogPreview.tsx

@@ -12,16 +12,16 @@ const BlogPreview: React.FC<BlogPreviewProps> = ({
     blogImg,
 }) => {
     return (
-        <div className='flex justify-between mt-11'>
-            <div className='flex flex-col w-9/12'>
+        <div className='flex w-full h-fit justify-between items-center mt-7'>
+            <div className='flex flex-col w-8/12 mr-25'>
                 <h3 className='text-4xl font-bold'>{title}</h3>
-                <p className='text-2xl text-gray-700 leading-10 mt-6'>{description}</p>
+                <p className='text-2xl text-gray-700 leading-10 mt-6 text-elipses'>{description}</p>
             </div>
-            <div className='relative w-[450px] h-[300px]'>
-                <Image src={blogImg} alt='blog image' className=' absolute rounded-md w-full ' objectFit='contain' layout='fill' />
+            <div className='relative w-[450px] h-[300px] rounded-2xl'>
+                <Image src={blogImg} alt='blog image' className=' absolute rounded-2xl w-full ' objectFit='contain' fill={true} />
             </div>
         </div>
     )
 }
 
-export default BlogPreview 
+export default BlogPreview

aait/web/group-2/components/blogs/BlogTags.tsx

@@ -6,8 +6,8 @@ interface BlogTagsProps {
 const BlogTags: React.FC<BlogTagsProps> = ({tag}) => {
 
     return (
-        <div className='bg-gray-200 rounded-md px-2 py-1 mr-2 mt-2'>
-            <h5 className='text-sm'>{tag}</h5>
+        <div className='bg-gray-200 rounded-full  mr-2 my-5'>
+            <h5 className='text-2xl py-5 px-7 text-gray-500 font-semibold'>{tag}</h5>
         </div>
     )
 }

aait/web/group-2/store/features/blogs/blogs-api.ts

@@ -0,0 +1,51 @@
+import { Blog } from "@/types/blog/blog";
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+export const blogsApi = createApi({
+  reducerPath: "blogs-api",
+  baseQuery: fetchBaseQuery({
+    baseUrl: "https://a2sv-backend.onrender.com/api/",
+  }),
+  endpoints: (build) => ({
+    getBlogs: build.query<Blog[], void>({
+      query: () => ({
+        url: "blogs",
+        method: "GET",
+      }),
+    }),
+    getBlogById: build.query<Blog, string>({
+      query: (id) => ({
+        url: `blogs/${id}`,
+        method: "GET",
+      }),
+    }),
+    createBlog: build.mutation<Blog, Blog>({
+      query: (blog) => ({
+        url: "blogs",
+        method: "POST",
+        body: blog,
+      }),
+    }),
+    updateBlog: build.mutation<Blog, Blog>({
+      query: (blog) => ({
+        url: `blogs/${blog._id}`,
+        method: "PUT",
+        body: blog,
+      }),
+    }),
+    deleteBlog: build.mutation<Blog, string>({
+      query: (id) => ({
+        url: `blogs/${id}`,
+        method: "DELETE",
+      }),
+    }),
+  }),
+});
+
+export const {
+  useGetBlogsQuery,
+  useGetBlogByIdQuery,
+  useCreateBlogMutation,
+  useUpdateBlogMutation,
+  useDeleteBlogMutation,
+} = blogsApi;

aait/web/group-2/store/index.ts

@@ -1,15 +1,17 @@
 import { configureStore } from "@reduxjs/toolkit";
 import { successApi } from "./features/success-stories";
 import authApi from "./features/auth/auth-api";
+import { blogsApi}  from "./features/blogs/blogs-api"
 
 export const store = configureStore({
   reducer: {
     [successApi.reducerPath]: successApi.reducer,
     [authApi.reducerPath]: authApi.reducer,
+    [blogsApi.reducerPath]: blogsApi.reducer,
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware()
-      .concat(authApi.middleware, successApi.middleware),
+      .concat(authApi.middleware, successApi.middleware, blogsApi.middleware),
 });
 
 export type AppDispatch = typeof store.dispatch;