added Api components at frontend side

Author: sanjaraiy

frontend/package-lock.json

@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.2",
     "file-saver": "^2.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

frontend/package.json

@@ -0,0 +1,9 @@
+import axios from "axios";
+
+const API = axios.create({
+    baseURL: "http://localhost:8080/api/v1",
+})
+
+export const GetPosts = async () => await API.get("/post/");
+export const CreatePost = async () => await API.post("/post/", data);
+export const GenerateImage = async () => await API.post("/generateImage/", data);

frontend/src/api/index.js

@@ -2,6 +2,11 @@ import styled from "styled-components";
 import Button from "./Button";
 import TextInput from "./TextInput";
 import { AutoAwesome, CreateRounded } from "@mui/icons-material";
+import { GenerateImage } from "../api";
+import { useState } from "react";
+import { createPost } from "../../../server/controllers/Posts.controller";
+import {useNavigate} from 'react-router-dom';
+
 
 const Form = styled.div`
   flex: 1;
@@ -50,11 +55,31 @@ function GenerateImageForm({
   setCreatePostLoading,
 }) {
 
- const generateImageFun = () => {
+  const navigate = useNavigate();
+  const [error, setError] = useState("");
+
+ const generateImageFun = async () => {
     setGenerateImageLoading(true);
+    await GenerateImage({prompt: post.prompt})
+    .then((res) => {
+      setPost({...post, photo:`data:image/jpeg;base64,${res?.data?.photo}`})
+      setGenerateImageLoading(false)
+    }).catch((error)=> {
+      setError(error?.response?.data?.message);
+      console.log(error);
+    })
  }
- const createPostFun = () => {
+ const createPostFun = async () => {
     setCreatePostLoading(true);
+    await createPost(post)
+    .then((res) => {
+      setPost({...post, photo:`data:image/jpeg;base64,${res?.data?.photo}`})
+      setCreatePostLoading(false);
+    }).catch((error)=> {
+      setError(error?.response?.data?.message);
+      setCreatePostLoading(false);
+      navigate("/")
+    })
  }
 
   return (
@@ -82,6 +107,7 @@ function GenerateImageForm({
           value={post.prompt}
           handelChange={(e) => setPost({...post, prompt:e.target.value})}
         ></TextInput>
+        {error && <div style={{color:"red"}}>{error}</div>}
         ** You can post the AI Generated Image to the Community **
       </Body>
       <Action>

frontend/src/components/GenerateImageForm.js

@@ -79,7 +79,7 @@ function ImageCard({item}) {
                 justifyContent:"space-between",
             }}>
             <Author>
-               <Avatar sx={{width:"32px", height:"32px"}}>{item?.author[0]}</Avatar>
+               <Avatar sx={{width:"32px", height:"32px"}}>{item?.name[0]}</Avatar>
                {item?.author} 
             </Author>
             <DownloadRounded onClick={()=>saveAs(item?.photo,"download.jpg")} ></DownloadRounded>

frontend/src/components/ImageCard.js

@@ -17,7 +17,7 @@ align-items:center;
 `;
 
 
-function SearchBar() {
+function SearchBar({search, setSearch}) {
   return (
     <SearchBarContainer>
         <SearchOutlined></SearchOutlined>
@@ -28,7 +28,11 @@ function SearchBar() {
             color:'inherit',
             background:"transparent",
             fontSize:"16px",
-           }} />
+           }} 
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+           />
+
     </SearchBarContainer>
   )
 }

frontend/src/components/SearchBar.js

@@ -1,7 +1,9 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import styled from 'styled-components';
 import ImageCard from '../components/ImageCard';
 import SearchBar from '../components/SearchBar';
+import { CircularProgress } from '@mui/material';
+import { GetPosts } from '../api';
 
 const Container = styled.div`
 height:100%;
@@ -68,6 +70,49 @@ gap:20px;
 
 function Home() {
 
+   const [posts, setPosts] = useState([]);
+   const [loading, setLoading] = useState(false);
+   const [error, setError] = useState("");
+   const [search, setSearch] = useState("");
+   const [filteredPosts, setFilteredPosts] = useState([]);
+    
+
+  const getPosts = async () => {
+     setLoading(true);
+     await GetPosts()
+     .then((res) => {
+         setLoading(false);
+         setPosts(res?.data?.data);
+         setFilteredPosts(res?.data?.data)
+     })
+     .catch((error) => {
+      setError(error?.response?.data?.message);
+      setLoading(false);
+
+     })
+  }
+
+  useEffect(() => {
+    getPosts();
+  },[])
+
+ useEffect(() => {
+    if(!search){
+      setFilteredPosts(posts);
+    }
+
+    const SearchFilteredPosts = posts.filter((post) => {
+      const promptMatch = post?.prompt?.toLowerCase().includes(search.toString().toLowerCase());
+      const authorMatch = post?.name?.toLowerCase().includes(search.toString().toLowerCase());
+
+      return promptMatch || authorMatch;
+    });
+
+    if(search){
+      setFilteredPosts(SearchFilteredPosts);
+    }
+ }, [posts, search])
+
   const item = {
     photo: "https://images.pexels.com/photos/26409497/pexels-photo-26409497/free-photo-of-a-small-white-house-sits-in-the-middle-of-a-field.jpeg?auto=compress&cs=tinysrgb&w=400&lazy=load",
     author: "Sanjay Rai",
@@ -81,14 +126,14 @@ function Home() {
       <Headline>Explore posts in the Community!
          <Span> » Generated with AI « </Span>
       </Headline>
-      <SearchBar></SearchBar>
+      <SearchBar search={search} setSearch={setSearch}></SearchBar>
       <Wrapper>
-        <CardWrapper>
-          <ImageCard item={item}></ImageCard>
-          <ImageCard></ImageCard>
-          <ImageCard></ImageCard>
-          <ImageCard></ImageCard>
-        </CardWrapper>
+        {error && <div style = {{color : "red"}}>{error}</div>}
+        {loading ? (<CircularProgress></CircularProgress>) : (
+          <CardWrapper>
+            {filteredPosts.length === 0 ? <> No Posts Found </> : <>{filteredPosts.slice().reverse().map((item, index) => <ImageCard key = {index} item = {item}></ImageCard>)}</>}
+          </CardWrapper>
+        )}
       </Wrapper>
     </Container>
   )