chore(fe): split service

Author: hyuse202

spez-frontend/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_SERVER_URL=

spez-frontend/src/app/post/[id]/page.tsx

@@ -1,5 +1,10 @@
 "use client"
+<<<<<<< HEAD
 import svPost from "../../../utils/svPost"
+=======
+import svPost from "@/services/svPost";
+import svCmt from "@/services/svCmt";
+>>>>>>> 5a06110 (chore(fe): split service)
 import Link from "next/link";
 import Comment from "@/components/Comment";
 import Parser from 'html-react-parser'
@@ -9,12 +14,19 @@ import CmtForm from "@/components/CmtForm";
 import { getRelativeTime } from "@/utils/getRelativeTime";
 import axios from "axios";
 import { GoTrash } from "react-icons/go";
+<<<<<<< HEAD
 import { useEffect } from "react";
+=======
+import { IPost, IComment } from "@/types";
+import LikeButton from "@/components/LikeButton";
+import svLike from "@/services/svLike";
+>>>>>>> 5a06110 (chore(fe): split service)
 type Props = {
   params: { id: string };
 };
 export default async function Post({ params }: Props) {
   const id: string = params.id;
+<<<<<<< HEAD
   const { getPost, getLike, getComment, delPost } = await svPost();
   useEffect(aysnc () => {
     const info: any = await getPost(id);
@@ -48,6 +60,18 @@ export default async function Post({ params }: Props) {
   };
   const handleDelPost = async (e: React.FormEvent) => {
     let token: any
+=======
+  const { getPost, delPost } = svPost();
+  const {getLike} = svLike();
+  const {getComment} = svCmt()
+  const info: IPost = await getPost(id);
+  const likes: number = await getLike(id);
+  console.log(likes)
+  const comment: IComment[] = await getComment(id);
+  const author_url = "/user/" + info.author.id;
+  const handleDelPost = async () => {
+    let token: string | null = null
+>>>>>>> 5a06110 (chore(fe): split service)
     if (typeof window !== 'undefined')
       token = localStorage.getItem('jwt')
     const deletePost:any = await delPost(id, token);

spez-frontend/src/app/user/[id]/page.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import svUser from "@/utils/svUser";
+import svUser from "@/services/svUser";
 import ImageUploader from "@/components/ImgUpload";
 import ImageFromBase64 from "@/components/DisplayImg";
 type Props = {

spez-frontend/src/components/CmtForm.tsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 // import dynamic from 'next/dynamic';
 import SunEditor from "suneditor-react";
 import "suneditor/dist/css/suneditor.min.css";
-import axios from "axios";
+import svCmt from "@/services/svCmt";
 import { useRouter } from "next/navigation";
 
 // Dynamically import SunEditor to avoid SSR issues
@@ -17,7 +17,7 @@ type Props = {
 export default function CmtForm({ postId }: Props) {
   const [content, setContent] = useState<string>("");
   const router = useRouter();
-
+  const {createComment} = svCmt()
   // Handle form submission
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -27,6 +27,7 @@ export default function CmtForm({ postId }: Props) {
       if (typeof window !== "undefined") token = localStorage.getItem("jwt");
       if (token === undefined) router.push("/");
       // console.log(token)
+<<<<<<< HEAD
       await axios.post(
         `https://spezbe.hungnq.online/posts/cmt/${postId}`,
         {
@@ -40,6 +41,9 @@ export default function CmtForm({ postId }: Props) {
         }
       );
 
+=======
+      await createComment(postId, token, content)
+>>>>>>> 5a06110 (chore(fe): split service)
       // Redirect or give feedback upon success
       alert("Post created successfully!");
     } catch (error) {

spez-frontend/src/components/Comment.tsx

@@ -1,13 +1,13 @@
 import { getRelativeTime } from "@/utils/getRelativeTime";
 import Link from "next/link";
 import Parser from "html-react-parser";
-import svPost from "@/utils/svPost";
 import { GoTrash } from "react-icons/go";
 import { IComment } from "@/types";
+import svCmt from "@/services/svCmt";
 
 export default async function Comment({id, author, content, created_at}: IComment) {
   const usr_url = "/user/" + author.id;
-  const { delComment } = await svPost();
+  const { delComment } = await svCmt();
   const handleDelCmt = async () => {
     let token: string | null = null;
     if (typeof window !== "undefined") token = localStorage.getItem("jwt");

spez-frontend/src/components/ImgUpload.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React, { useState } from "react";
-import svUser from "@/utils/svUser";
+import svUser from "@/services/svUser";
 interface ImgUploadProps {
   userId: string;
 }
@@ -15,7 +15,7 @@ function ImageUploader({ userId }: ImgUploadProps) {
         const base64String = reader.result? reader.result.toString().split(",")[1]: null
         setBase64Image(base64String);
         // You can also send the base64 string to the server here if needed
-        console.log("Base64 Image String:", base64String);
+        // console.log("Base64 Image String:", base64String);
       };
       reader.readAsDataURL(file);
     }

spez-frontend/src/components/LikeButton.tsx

@@ -2,7 +2,7 @@
 import React, { useState } from "react";
 import Image from "next/image";
 import EagleEmoji from "../../public/eagle_emoji.png";
-import svPost from "@/utils/svPost";
+import svLike from "@/services/svLike";
 interface LikeButtonProps {
   initialLikes: number;
   post_id: string
@@ -11,7 +11,7 @@ interface LikeButtonProps {
 const  LikeButton: React.FC<LikeButtonProps> = ({ initialLikes, post_id }) => {
   const [likes, setLikes] = useState<number>(initialLikes);
   const [liked, setLiked] = useState(false);
-  const {postLike, delLike} = svPost()
+  const {postLike, delLike} = svLike()
 
   const handleLike = async () => {
     try {

spez-frontend/src/components/NewsFeed.tsx

@@ -1,10 +1,9 @@
-import svPost from "@/utils/svPost"
+import svPost from "@/services/svPost"
 import Post from "./Post";
 import { IPost } from "@/types";
 export default async function NewsFeed() {
     const {getAllPost} =  svPost();
     const AllPost = await getAllPost();
-    // console.log(AllPost)
     return (
         <>
             <div className="w-full h-screen p-8">

spez-frontend/src/components/PostForm.tsx

@@ -5,7 +5,7 @@ import SunEditor from 'suneditor-react';
 import 'suneditor/dist/css/suneditor.min.css';
 import axios from 'axios';
 import { useRouter } from 'next/navigation';
-
+import svPost from '@/services/svPost';
 // Dynamically import SunEditor to avoid SSR issues
 // const DynamicSunEditor = dynamic(() => import('suneditor-react'), {
 //   ssr: false,
@@ -15,18 +15,18 @@ export default function PostForm () {
   const [content, setContent] = useState<string>('');
   const [title, setTitle] = useState<string>('');
   const router = useRouter();
-
+  const {createPost} = svPost()
   // Handle form submission
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
     try {
-      // Send a POST request to your FastAPI backend
       let token: string | null = null
       if (typeof window !== 'undefined')
         token = localStorage.getItem('jwt')
       if(token === undefined)
         router.push('/')
+<<<<<<< HEAD
       await axios.post('https://spezbe.hungnq.online/posts/', 
         {
 
@@ -41,6 +41,9 @@ export default function PostForm () {
       }
     );
 
+=======
+      await createPost(title, content, token)
+>>>>>>> 5a06110 (chore(fe): split service)
       // Redirect or give feedback upon success
       alert('Post created successfully!');
       router.push('/');  // Redirect to the homepage or a posts page
@@ -70,6 +73,7 @@ export default function PostForm () {
         <div className="mb-4">
           <label htmlFor="content" className="block mb-2">Content</label>
           <SunEditor
+            
             setContents={content}
             onChange={(value: string) => setContent(value)}
             setOptions={{

spez-frontend/src/services/svCmt.ts

@@ -0,0 +1,43 @@
+import axios from "axios";
+import { BE_URI } from "@/utils/constants";
+export default function svCmt() {
+  const API = {
+    comments: BE_URI + "/posts/cmt/",
+  };
+  async function getComment(id: string) {
+    const data = await axios.get(API.comments + id, {
+      headers: {
+        accept: "application/json",
+      },
+    });
+    return data.data;
+  }
+  async function delComment(id: string, token: string | null) {
+    const data = await axios.delete(BE_URI + "/comments/" + id, {
+      headers: {
+        accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    return data;
+  }
+  async function createComment(
+    id: string,
+    token: string | null,
+    content: string
+  ) {
+    await axios.post(API.comments + id, {
+        content: content
+    }, {
+        headers: {
+            accept: "application/json",
+            Authorization: `Bearer ${token}`
+        }
+    });
+  }
+  return {
+    getComment,
+    delComment,
+    createComment
+  };
+}

spez-frontend/src/services/svLike.ts

@@ -0,0 +1,37 @@
+import axios from "axios"
+import { BE_URI } from "@/utils/constants"
+export default function svLike(){
+    const API = {
+        like: BE_URI + "/likes"
+    }
+  async function postLike(id: string, token: string | null) {
+     return await axios.post(API.like + "/" + id, {},{
+      headers: {
+        accept: "application/json",     
+        Authorization: `Bearer ${token}`
+      }
+    }) 
+  }
+  async function delLike(id: string, token: string | null) {
+     return await axios.delete(API.like + "/" + id, {
+      headers: {
+        // accept: "application/json",
+        Authorization: `Bearer ${token}`
+      }
+    })
+  }
+
+  async function getLike(id: string) {
+    const data = await axios.get(API.like + "/post/" + id, {
+      headers: {
+        accept: "application/json",
+      },
+    });
+    return data.data;
+  }
+  return {
+    postLike,
+    delLike,
+    getLike,
+  }
+}

spez-frontend/src/services/svPost.ts

@@ -0,0 +1,55 @@
+import { BE_URI } from "@/utils/constants";
+import axios from "axios";
+import { headers } from "next/headers";
+export default function svPost() {
+  const API = {
+    all: BE_URI + "/posts",
+    post: BE_URI + "/posts/",
+  };
+  async function createPost(title: string, content: string, token: string | null) {
+    await axios.post(
+      API.post,
+      {
+        title: title,
+        content: content,
+      },
+      {
+        headers: {
+          accept: "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+  }
+  async function getAllPost() {
+    const data = await axios.get(API.all + "/?skip=10", {
+      headers: {
+        accept: "application/json",
+      },
+    });
+    return data.data;
+  }
+  async function getPost(id: string) {
+    const data = await axios.get(API.post + id, {
+      headers: {
+        accept: "application/json",
+      },
+    });
+    return data.data;
+  }
+  async function delPost(id: string, token: string | null) {
+    const data = await axios.delete(API.post + id, {
+      headers: {
+        accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    return data.data;
+  }
+  return {
+    getAllPost,
+    getPost,
+    delPost,
+    createPost
+  };
+}

spez-frontend/src/utils/svUser.ts spez-frontend/src/services/svUser.ts

@@ -1 +1,5 @@
-export const BE_URI = 'https://spezbe.hungnq.online'
+<<<<<<< HEAD
+export const BE_URI = 'https://spezbe.hungnq.online'
+=======
+export const BE_URI = process.env.NEXT_PUBLIC_SERVER_URL
+>>>>>>> 5a06110 (chore(fe): split service)