From 6ea3e9af445222e6455233630969e1a4e046de94 Mon Sep 17 00:00:00 2001 From: sina_sajjadi Date: Sat, 28 Sep 2024 14:11:06 +0330 Subject: [PATCH] blogs page connected to api --- src/app/blog/Card12.tsx | 22 +++--- src/app/blog/Card13.tsx | 18 ++--- src/app/blog/SectionMagazine5.tsx | 19 ++++-- src/app/blog/[...slug]/page.tsx | 108 +++++++----------------------- src/app/blog/page.tsx | 4 +- src/components/PostCardMeta.tsx | 20 +++--- src/data/jsons/__posts.json | 2 +- src/data/types.ts | 39 +++++++---- 8 files changed, 94 insertions(+), 138 deletions(-) diff --git a/src/app/blog/Card12.tsx b/src/app/blog/Card12.tsx index 7d059be..d09df05 100644 --- a/src/app/blog/Card12.tsx +++ b/src/app/blog/Card12.tsx @@ -1,5 +1,5 @@ import React, { FC } from "react"; -import { PostDataType } from "@/data/types"; +import { Blog } from "@/data/types"; import PostCardMeta from "@/components/PostCardMeta"; import PostTypeFeaturedIcon from "@/components/PostTypeFeaturedIcon"; import SocialsShare from "@/shared/SocialsShare"; @@ -9,31 +9,31 @@ import Image from "next/image"; export interface Card12Props { className?: string; - post?: PostDataType; + post?: Blog; } const Card12: FC = ({ className = "h-full", post = DEMO_POSTS[0], }) => { - const { title, href, featuredImage, desc, postType } = post; - + console.log(post); + return (
{title} @@ -46,12 +46,12 @@ const Card12: FC = ({

- - {title} + + {post?.title}

- {desc} + {post?.summary}
diff --git a/src/app/blog/Card13.tsx b/src/app/blog/Card13.tsx index 826f21f..71e2c90 100644 --- a/src/app/blog/Card13.tsx +++ b/src/app/blog/Card13.tsx @@ -11,21 +11,21 @@ export interface Card13Props { } const Card13: FC = ({ className = "", post }) => { - const { title, href, desc, featuredImage, date, postType } = post; + return (

- - {title} + + {post?.title}

- {desc} + {post?.summary} - {date} + {post?.date}
@@ -33,19 +33,19 @@ const Card13: FC = ({ className = "", post }) => {
{title} diff --git a/src/app/blog/SectionMagazine5.tsx b/src/app/blog/SectionMagazine5.tsx index 5c0cf25..2b82108 100644 --- a/src/app/blog/SectionMagazine5.tsx +++ b/src/app/blog/SectionMagazine5.tsx @@ -1,13 +1,22 @@ -import React, { FC } from "react"; +"use client" + +import React, { FC, useEffect, useState } from "react"; import { PostDataType } from "@/data/types"; import Card12 from "./Card12"; import Card13 from "./Card13"; +import axiosInstance from "@/components/api/axios"; + +const SectionMagazine5 = () => { -export interface SectionMagazine5Props { - posts: PostDataType[]; -} + const [posts , setPosts] = useState([]) -const SectionMagazine5: FC = ({ posts }) => { + useEffect(()=>{ + axiosInstance.get("/api/blogs/") + .then((response)=>{ + setPosts(response.data.results); + + }) + } , []) return (
diff --git a/src/app/blog/[...slug]/page.tsx b/src/app/blog/[...slug]/page.tsx index 85c24d4..47d68f1 100644 --- a/src/app/blog/[...slug]/page.tsx +++ b/src/app/blog/[...slug]/page.tsx @@ -1,4 +1,6 @@ -import React from "react"; +"use client" + +import React, { useEffect, useState } from "react"; import { DEMO_POSTS } from "@/data/posts"; import { PostDataType } from "@/data/types"; import Avatar from "@/shared/Avatar"; @@ -14,6 +16,7 @@ import Link from "next/link"; import { Route } from "@/routers/types"; import { BiLike , BiDislike } from "react-icons/bi"; import Survey from "./Survey"; +import axiosInstance from "@/components/api/axios"; const Page = ({ params, @@ -22,7 +25,21 @@ const Page = ({ params: { stepIndex: string }; searchParams?: { [key: string]: string | string[] | undefined }; }) => { + + const [ blog , setBlog] = useState() + + useEffect(()=>{ + + axiosInstance.get(`/api/blogs/${params.slug[0]}/`) + .then((response)=>{ + setBlog(response.data); + + }) + + }) const renderHeader = () => { + + return (
@@ -31,13 +48,13 @@ const Page = ({ className=" text-neutral-900 font-semibold text-3xl md:text-4xl md:!leading-[120%] lg:text-4xl dark:text-neutral-100 max-w-4xl " title="Quiet ingenuity: 120,000 lunches and counting" > - Keep up the spirit of the desire to travel around the world + {blog?.title} - + {/* We’re an online magazine dedicated to covering the best in international product design. We started as a little blog back in 2002 covering student work and over time - + */}
@@ -77,86 +94,7 @@ const Page = ({
-

- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure vel - officiis ipsum placeat itaque neque dolorem modi perspiciatis dolor - distinctio veritatis sapiente, minima corrupti dolores necessitatibus - suscipit accusantium dignissimos culpa cumque. -

-

- It is a long established fact that a reader will be - distracted by the readable content of a page when looking at its{" "} - layout. The point of using Lorem Ipsum is that it has - a more-or-less normal{" "} - - distribution of letters. - {" "} -

-
    -
  1. We want everything to look good out of the box.
    2. -
  2. - {` Really just the first reason, that's the whole point of the plugin.`} -
    3. -
  3. - {` Here's a third pretend reason though a list with three items looks - more realistic than a list with two items.`} -
    4. -
-

Typography should be easy

-

- {`So that's a header for you — with any luck if we've done our job - correctly that will look pretty reasonable.`} -

-

Something a wise person once told me about typography is:

-
-

- {` Typography is pretty important if you don't want your stuff to look - like trash. Make it good then it won't be bad.`} -

-
-

- {` It's probably important that images look okay here by default as well:`} -

-
- blog -
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure vel - officiis ipsum placeat itaque neque dolorem modi perspiciatis dolor - distinctio veritatis sapiente -
-
-

- {` Now I'm going to show you an example of an unordered list to make sure - that looks good, too:`} -

-
    -
  • So here is the first item in this list.
    • -
  • {`In this example we're keeping the items short.`}
    • -
  • {`Later, we'll use longer, more complex list items.`}
    • -
-

{`And that's the end of this section.`}

-

Code should look okay by default.

-

- I think most people are going to use{" "} - highlight.js or{" "} - Prism{" "} - {`or something if they want to - style their code blocks but it wouldn't hurt to make them look`}{" "} - okay out of the box, even with no syntax highlighting. -

-

- {` What I've written here is probably long enough, but adding this final - sentence can't hurt.`} -

- -

Hopefully that looks good enough to you.

-

We still need to think about stacked headings though.

- -

- Phew, with any luck we have styled the headings above this text and - they look pretty good. -

+ >
); }; @@ -269,7 +207,7 @@ const Page = ({
{renderHeader()}
- + {/* */}
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx index cf7218a..90bd1d8 100644 --- a/src/app/blog/page.tsx +++ b/src/app/blog/page.tsx @@ -7,10 +7,8 @@ import BgGlassmorphism from "@/components/BgGlassmorphism"; import SectionSubscribe2 from "@/components/SectionSubscribe2"; // DEMO DATA -const POSTS = DEMO_POSTS; // DEMO POST FOR MAGAZINE SECTION -const MAGAZINE1_POSTS = POSTS.filter((_, i) => i >= 0 && i < 8); // const BlogPage: React.FC = () => { @@ -19,7 +17,7 @@ const BlogPage: React.FC = () => {
- +
{/* diff --git a/src/components/PostCardMeta.tsx b/src/components/PostCardMeta.tsx index 40739a3..0d6d36a 100644 --- a/src/components/PostCardMeta.tsx +++ b/src/components/PostCardMeta.tsx @@ -5,7 +5,7 @@ import Link from "next/link"; export interface PostCardMetaProps { className?: string; - meta: Pick; + meta: Pick; hiddenAvatar?: boolean; size?: "large" | "normal"; } @@ -16,7 +16,7 @@ const PostCardMeta: FC = ({ hiddenAvatar = false, size = "normal", }) => { - const { date, author } = meta; + const { created_at , author } = meta; return (
= ({ } ${className}`} data-nc-id="PostCardMeta" > - {!hiddenAvatar && ( @@ -34,20 +33,17 @@ const PostCardMeta: FC = ({ sizeClass={ size === "normal" ? "h-7 w-7 text-sm" : "h-10 w-10 text-xl" } - imgUrl={author.avatar} - userName={author.displayName} + imgUrl={author?.avatar} + userName={author?.fullname} /> )} - {author.displayName} + {author.fullname} - +
*/} <> - - · - - {date} + {created_at.split("T")[0]}
diff --git a/src/data/jsons/__posts.json b/src/data/jsons/__posts.json index bfad2da..8472be3 100644 --- a/src/data/jsons/__posts.json +++ b/src/data/jsons/__posts.json @@ -14,7 +14,7 @@ "like": { "count": 3366, "isLiked": true }, "authorId": 3, "categoriesId": [3, 12], - "postType": "standard" + "postType": "video" }, { "index": 2, diff --git a/src/data/types.ts b/src/data/types.ts index 92c6de5..ed1414d 100644 --- a/src/data/types.ts +++ b/src/data/types.ts @@ -36,19 +36,34 @@ export interface AuthorType { starRating?: number; } -export interface PostDataType { - id: string | number; - author: AuthorType; - date: string; - href: Route; - categories: TaxonomyType[]; +interface BlogAuthor { + id: number; + fullname: string; + avatar: string | null; + email: string | null; + phone_number: string | null; + available_password: string; +} + +interface BlogTag { + id: number; + name: string; + slug: string; +} + +export interface Blog { + id: number; title: string; - featuredImage: StaticImageData | string; - desc?: string; - commentCount: number; - viewdCount: number; - readingTime: number; - postType?: "standard" | "video" | "gallery" | "audio"; + slug: string; + author: BlogAuthor; + content: string; + summary: string; + tags: BlogTag[]; + status: boolean; + created_at: string; + cover: string; + language: number; + has_voted: boolean; } export type TwMainColor =