Merge branch '#20' into 'dev'

#20

See merge request !21

frontend/.env

-VITE_BASE_URL=http://localhost:8000/
+VITE_BASE_URL=http://localhost:8002

frontend/src/App.tsx

@@ -2,13 +2,14 @@ import { Container } from "@mui/material"
 import { Route, Routes } from "react-router-dom"
 import Layout from "./components/Layout/Layout"
 import './App.css'
+import HomePage from "./containers/HomePage/HomePage"
 
 const App = ()=> {
   return (
     //@ts-ignore
       <Layout>
         <Routes>
-        <Route path={'/'} element={<h1>HOME</h1>} />
+        <Route path={'/'} element={<HomePage />} />
         </Routes>
       </Layout>
     

frontend/src/components/Layout/Layout.css

 
 .sidebar {
     margin: 80px 30px;
+    margin-right: 150px;
 }
\ No newline at end of file

frontend/src/components/Post/IPostProps.ts

+import IPost from "../../interfaces/IPost";
+
+export default interface IPostProps {
+    post: IPost
+}
\ No newline at end of file

frontend/src/components/Post/Post.css

+.post_imageframe {
+    margin-right: 100px;
+    width: 100%;
+    border-radius: 10px;
+    overflow: hidden;
+    height: 300px;
+}
+
+.post_image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
\ No newline at end of file

frontend/src/components/Post/Post.tsx

+import { FunctionComponent, ReactElement } from "react";
+import IPostProps from "./IPostProps";
+import defaultImage from '../../assets/default-image.jpg'
+import './Post.css'
+
+const Post: FunctionComponent<IPostProps> = (props): ReactElement => {
+    return (
+        <div className="post">
+            <h3>user</h3>
+            <div className="post_imageframe">
+                <img
+                    className="post_image"
+                    src={`${import.meta.env.VITE_BASE_URL}/uploads/${props.post.image}`}
+                    alt={props.post.title}
+                    onError={(e) => {
+                        e.currentTarget.src = defaultImage
+                    }} />
+            </div>
+            <p>{props.post.datetime}</p>
+        </div>
+    )
+}
+
+export default Post
\ No newline at end of file

frontend/src/components/PostList/IPostListProps.ts

+import IPost from "../../interfaces/IPost";
+
+export default interface IPostListProps {
+    posts: IPost[]
+}
\ No newline at end of file

frontend/src/components/PostList/PostList.tsx

+import React, { FunctionComponent, ReactElement } from "react";
+import IPostListProps from "./IPostListProps";
+import Post from "../Post/Post";
+
+
+const PostList: FunctionComponent<IPostListProps> = (props): ReactElement => {
+    return (
+        <div className="PostList">
+            {props.posts.length ? 
+                props.posts.map(p => {
+                    return <Post
+                        key={p._id}
+                        post={p}
+                    />
+                }): <h1>No posts</h1>}
+        </div>
+    )
+}
+
+export default PostList
\ No newline at end of file

frontend/src/containers/HomePage/HomePage.tsx

+import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import { AppDispatch, AppState } from "../../store/store";
+import { shallowEqual, useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
+import { getPosts } from "../../store/posts/posts.slice";
+import PostList from "../../components/PostList/PostList";
+
+
+const HomePage: FunctionComponent = (): ReactElement => {
+    const dispatch:AppDispatch = useDispatch()
+    const {posts} = useSelector((state: AppState) => state.posts, shallowEqual)
+    
+    useEffect(() => {
+        dispatch(getPosts())
+    }, [])
+
+    return (
+        <div className="homepage">
+            <div className="container">
+                <PostList 
+                    posts={posts}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default HomePage
\ No newline at end of file

frontend/src/interfaces/IPost.ts

@@ -4,5 +4,5 @@ export default interface IPost {
     title: string
     description: string
     image: File | undefined | string
-    datetime: Date
+    datetime: string
 }
\ No newline at end of file