:feature: New post view

Signed-off-by: Pau Costa <mico@micodev.es>

client/src/app/postSlice.ts

@@ -96,6 +96,17 @@ export const commentAPost =
     dispatch(setStatus(Status.idle));
   };
   
+export const createPost =
+  (title: string, content: string): AppThunk =>
+  async (dispatch: any) => {
+    const postApi = createApi(store);
+
+    dispatch(setStatus(Status.loading));
+    await postApi.createPost({ title, content });
+    dispatch(fetchGlobalPosts());
+    dispatch(setStatus(Status.idle));
+  };
+
 export const { setFollowedPosts, setGlobalPosts, setStatus, setAPost } =
   postSlice.actions;
 

client/src/routes/newPost.tsx

@@ -1,3 +1,53 @@
+import { Box, Button, TextField, Typography } from "@mui/material";
+import { useAppDispatch } from "../app/store";
+import React from "react";
+import { createPost } from "../app/postSlice";
+import { useNavigate } from "react-router-dom";
+
 export default function NewPost() {
-  return <>New Post</>;
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const [newPostText, setNewPostText] = React.useState("");
+  const [newPostTitle, setNewPostTitle] = React.useState("");
+
+  const handleCreatePost = () => {
+    if (newPostText === "" || newPostTitle === "") return;
+
+    dispatch(createPost(newPostTitle, newPostText));
+    setNewPostText("");
+    setNewPostTitle("");
+    navigate("/global");
+  };
+
+  return (
+    <Box
+      sx={{
+        margin: "auto",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <Typography variant="h4" sx={{ marginBottom: 2 }}>
+        Share your thoughts!
+      </Typography>
+      <TextField
+        label="Title"
+        value={newPostTitle}
+        multiline
+        onChange={(e) => setNewPostTitle(e.target.value)}
+        sx={{ marginBottom: 2 }}
+      />
+      <TextField
+        label="Post"
+        value={newPostText}
+        onChange={(e) => setNewPostText(e.target.value)}
+        multiline
+        rows={4}
+        sx={{ marginBottom: 2 }}
+      />
+      <Button variant="contained" fullWidth onClick={handleCreatePost}>
+        Post
+      </Button>
+    </Box>
+  );
 }

client/src/routes/postList.tsx

@@ -30,7 +30,19 @@ export default function PostList(props: PostListProps) {
   }, []);
 
   useEffect(() => {
-    setPosts(props.type === "all" ? globalPosts : followedPosts);
+    const postsToDisplay = props.type === "all" ? globalPosts : followedPosts;
+    let sortedPosts: Post[] = [];
+
+    if (postsToDisplay.length > 0) {
+      sortedPosts = [...postsToDisplay].sort((a: Post, b: Post) => {
+        return b.createdAt! > a.createdAt!
+          ? 1
+          : b.createdAt! < a.createdAt!
+          ? -1
+          : 0;
+      });
+    }
+    setPosts(sortedPosts);
   }, [followedPosts, globalPosts, props.type]);
 
   return (