Limprovements

.prettierrc

@@ -4,7 +4,8 @@
     "^react$",
     "^react-dom$",
     "^react-router-dom$",
-    "^@mui/(.*)$",
+    "^@mui/material(.*)$",
+    "^@mui/icons-material(.*)$",
     "^notistack$",
     "^socialvoid$",
     "^[./]"

package.json

@@ -11,9 +11,11 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
+    "@types/moment": "^2.13.0",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "moment": "^2.29.1",
     "node-sass": "^6.0.1",
     "notistack": "^2.0.3",
     "react": "^17.0.2",

src/Routes/Home.tsx

@@ -1,54 +1,46 @@
-import { useNavigate } from "react-router"
-import { useState } from "react"
-import { Avatar, Box, TextField } from "@mui/material"
+import { Component } from "react"
+import { useNavigate } from "react-router-dom"
 import { useSnackbar } from "notistack"
-import { Profile } from "socialvoid"
+import { Post as TypePost } from "socialvoid"
+import { Post } from "../components"
 import { dispatch } from "../socialvoid"
+import { RouteProps } from "../types"
+
+class HomeC extends Component<RouteProps, { posts: TypePost[]; page: number }> {
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      posts: [],
+      page: 1,
+    }
+  }
+
+  componentDidMount() {
+    dispatch(
+      async (client) => {
+        const posts = await client.timeline.retrieveFeed(this.state.page)
+
+        this.setState({ posts })
+      },
+      { ...this.props, requireToBeAuthenticated: true }
+    )
+  }
+
+  render() {
+    return (
+      <>
+        {this.state.posts.map((post) => (
+          <Post post={post} />
+        ))}
+      </>
+    )
+  }
+}
 
 export default function Home() {
   const navigate = useNavigate()
   const snackbar = useSnackbar()
 
-  const [profile, setProfile] = useState<Profile & { photo: string }>()
-
-  dispatch(
-    async (client) => {
-      const profile = await client.network.getProfile()
-
-      const photo = await client.cdn.download(
-        profile.display_picture_sizes[0].document,
-        true
-      )
-
-      setProfile({ ...profile, photo: URL.createObjectURL(photo) })
-    },
-    { navigate, snackbar }
-  )
-
-  return (
-    <Box
-      sx={{
-        marginTop: 8,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-      }}
-    >
-      <Avatar
-        src={profile?.photo}
-        alt="Your profile photo"
-        sx={{ width: 100, height: 100, mb: 3 }}
-      />
-      <TextField
-        required
-        fullWidth
-        id="name"
-        label="Name"
-        name="username"
-        autoComplete="off"
-        autoFocus
-        sx={{ mb: 3 }}
-      />
-    </Box>
-  )
+  return <HomeC navigate={navigate} snackbar={snackbar} />
 }

src/components/Post.tsx

@@ -0,0 +1,65 @@
+import moment from "moment"
+import { useState } from "react"
+import Button from "@mui/material/Button"
+import Card from "@mui/material/Card"
+import CardActions from "@mui/material/CardActions"
+import CardContent from "@mui/material/CardContent"
+import CardHeader from "@mui/material/CardHeader"
+import Typography from "@mui/material/Typography"
+import ChangeCircle from "@mui/icons-material/ChangeCircle"
+import ChangeCircleOutlined from "@mui/icons-material/ChangeCircleOutlined"
+import Star from "@mui/icons-material/Star"
+import StarOutline from "@mui/icons-material/StarOutline"
+import { Post as TypePost } from "socialvoid"
+import { client } from "../socialvoid"
+
+export default function Post({ post }: { post: TypePost }) {
+  const [liked, setLiked] = useState(false)
+  const [likes, setLikes] = useState(post.like_count!)
+
+  const like = async () => {
+    if (liked) {
+      await client.timeline.unlike(post)
+      setLiked(false)
+      setLikes(likes - 1)
+    } else {
+      await client.timeline.like(post)
+      setLiked(true)
+      setLikes(likes + 1)
+    }
+  }
+
+  const [reposted, setReposted] = useState(false)
+  // @ts-ignore
+  const [reposts, setReposts] = useState(post.repost_count!)
+
+  const repost = () => {}
+
+  return (
+    <Card>
+      <CardHeader
+        title={post.peer?.name}
+        subheader={moment(post.posted_timestamp * 1000).fromNow()}
+      />
+      <CardContent>
+        <Typography variant="body1">{post.text}</Typography>
+      </CardContent>
+      <CardActions disableSpacing sx={{ width: "100%" }}>
+        <Button
+          fullWidth
+          onClick={like}
+          startIcon={liked ? <Star /> : <StarOutline />}
+        >
+          {likes}
+        </Button>
+        <Button
+          fullWidth
+          onClick={repost}
+          startIcon={reposted ? <ChangeCircle /> : <ChangeCircleOutlined />}
+        >
+          {reposts}
+        </Button>
+      </CardActions>
+    </Card>
+  )
+}

src/components/index.ts

@@ -1,2 +1,3 @@
 export { default as Bar } from "./Bar"
 export { default as HideOnScroll } from "./HideOnScroll"
+export { default as Post } from "./Post"

src/socialvoid.ts

@@ -23,7 +23,7 @@ export const dispatch = async (
   try {
     if (opts?.requireToBeAuthenticated) {
       if (!client.sessionExists) {
-        navigate("/signin")
+        navigate("/signin", { replace: true })
         return
       }
     } else if (opts?.requireToBeNotAuthenticated) {

yarn.lock

@@ -2224,6 +2224,13 @@
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
+"@types/moment@^2.13.0":
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/@types/moment/-/moment-2.13.0.tgz#604ebd189bc3bc34a1548689404e61a2a4aac896"
+  integrity sha1-YE69GJvDvDShVIaJQE5hoqSqyJY=
+  dependencies:
+    moment "*"
+
 "@types/node@*":
   version "14.14.31"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.31.tgz#72286bd33d137aa0d152d47ec7c1762563d34055"
@@ -8093,6 +8100,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+moment@*, moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"