74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
import { useSelector } from "react-redux";
|
|
import {
|
|
fetchFollowedPosts,
|
|
fetchGlobalPosts,
|
|
selectAllPosts,
|
|
selectFollowedPosts,
|
|
} from "../app/postSlice";
|
|
import { useAppDispatch } from "../app/store";
|
|
import { useEffect } from "react";
|
|
import { Box, List, Typography } from "@mui/material";
|
|
import { Post } from "../api";
|
|
import PostListItem from "../components/postListItem";
|
|
|
|
interface PostListProps {
|
|
type: "all" | "user";
|
|
}
|
|
|
|
export default function PostList(props: PostListProps) {
|
|
const dispatch = useAppDispatch();
|
|
const followedPosts = useSelector(selectFollowedPosts);
|
|
const globalPosts = useSelector(selectAllPosts);
|
|
|
|
useEffect(() => {
|
|
if (props.type === "all") dispatch(fetchGlobalPosts());
|
|
if (props.type === "user") dispatch(fetchFollowedPosts());
|
|
}, []);
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
width: "100%",
|
|
alignContent: "center",
|
|
justifyContent: "center",
|
|
display: "flex",
|
|
}}
|
|
>
|
|
{props.type === "all" && (
|
|
<List>
|
|
{globalPosts.map((post: Post) => (
|
|
<PostListItem post={post} postType="all" key={post.id} />
|
|
))}
|
|
</List>
|
|
)}
|
|
{props.type === "user" && (
|
|
<List>
|
|
{followedPosts.map((post: Post) => (
|
|
<PostListItem post={post} postType="user" key={post.id} />
|
|
))}
|
|
{followedPosts.length === 0 && (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h3"
|
|
sx={{ color: "text.secondary", mb: "2rem" }}
|
|
>
|
|
Whops!
|
|
</Typography>
|
|
<Typography textAlign="center" sx={{ color: "text.secondary" }}>
|
|
There is no content here! Try following some users, or check the
|
|
global feed
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
</List>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|