diff --git a/src/assets/no-results.png b/src/assets/no-results.png new file mode 100644 index 0000000..82e7068 Binary files /dev/null and b/src/assets/no-results.png differ diff --git a/src/pages/posts/PostsPage.js b/src/pages/posts/PostsPage.js index bb5b0b4..5b60916 100644 --- a/src/pages/posts/PostsPage.js +++ b/src/pages/posts/PostsPage.js @@ -1,19 +1,59 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import Form from "react-bootstrap/Form"; import Col from "react-bootstrap/Col"; import Row from "react-bootstrap/Row"; import Container from "react-bootstrap/Container"; +import Post from "./Post"; +import Asset from "../../components/Asset"; import appStyles from "../../App.module.css"; import styles from "../../styles/PostsPage.module.css"; +import { useLocation } from "react-router-dom"; +import { axiosReq } from "../../api/axiosDefaults"; + +import NoResults from "../../assets/no-results.png"; + +function PostsPage({ message, filter = "" }) { + const [posts, setPosts] = useState({ results: [] }); + const [hasLoaded, setHasLoaded] = useState(false); + const { pathname } = useLocation(); + + useEffect(() => { + const fetchPosts = async () => { + try { + const { data } = await axiosReq.get(`/posts/?${filter}`); + setPosts(data); + setHasLoaded(true); + } catch (err) { + console.log(err); + } + }; + setHasLoaded(false); + fetchPosts(); + }, [filter, pathname]); -function PostsPage() { return (

Popular profiles mobile

-

List of posts here

+ {hasLoaded ? ( + <> + {posts.results.length ? ( + posts.results.map((post) => ( + + )) + ) : ( + + + + )} + + ) : ( + + + + )}

Popular profiles for desktop