07_display_posts

client/package.json

@@ -9,6 +9,7 @@
     "apollo-link-http": "^1.5.16",
     "apollo-link-http": "^1.5.16",
     "graphql": "^14.5.8",
     "graphql": "^14.5.8",
     "graphql-tag": "^2.10.1",
     "graphql-tag": "^2.10.1",
+    "moment": "^2.24.0",
     "react": "^16.10.2",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-router-dom": "^5.1.2",
     "react-router-dom": "^5.1.2",

client/src/App.css

+.page-title {
+  display: block !important;
+  text-align: center;
+  font-size: 2rem;
+  margin-top: 10px;
+}

client/src/App.js

 import React from "react";
 import React from "react";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import { BrowserRouter as Router, Route } from "react-router-dom";
+
 import "semantic-ui-css/semantic.min.css";
 import "semantic-ui-css/semantic.min.css";
 import { Container } from "semantic-ui-react";
 import { Container } from "semantic-ui-react";
 
 
@@ -7,6 +8,7 @@ import Home from "./pages/Home";
 import Login from "./pages/Login";
 import Login from "./pages/Login";
 import Register from "./pages/Register";
 import Register from "./pages/Register";
 import MenuBar from "./components/MenuBar";
 import MenuBar from "./components/MenuBar";
+import "./App.css";
 
 
 function App() {
 function App() {
   return (
   return (

client/src/components/MenuBar.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Menu } from "semantic-ui-react";
 import { Menu } from "semantic-ui-react";
 import { Link } from "react-router-dom";
 import { Link } from "react-router-dom";
 
 
-function MenuBar() {
+const MenuBar = () => {
   const pathname = window.location.pathname;
   const pathname = window.location.pathname;
   const path = pathname === "/" ? "home" : pathname.substr(1);
   const path = pathname === "/" ? "home" : pathname.substr(1);
   const [activeItem, setActiveItem] = useState(path);
   const [activeItem, setActiveItem] = useState(path);
@@ -38,6 +38,6 @@ function MenuBar() {
       </Menu>
       </Menu>
     </div>
     </div>
   );
   );
-}
+};
 
 
 export default MenuBar;
 export default MenuBar;

client/src/components/PostCard.js

+import React from "react";
+import { Card, Image, Button, Label, Icon } from "semantic-ui-react";
+import moment from "moment";
+import { Link } from "react-router-dom";
+
+const PostCard = ({
+  post: { username, body, id, createdAt, likeCount, commentCount, likes }
+}) => {
+  const likePost = () => {};
+  return (
+    <Card fluid>
+      <Card.Content>
+        <Image
+          floated="right"
+          size="mini"
+          src="https://react.semantic-ui.com/images/avatar/large/steve.jpg"
+        />
+        <Card.Header>{username} </Card.Header>
+        <Card.Meta as={Link} to={`/posts/${id}`}>
+          {moment(createdAt).fromNow(true)}
+        </Card.Meta>
+        <Card.Description>{body}</Card.Description>
+      </Card.Content>
+      <Card.Content extra>
+        <Button as="div" labelPosition="right" onClick={likePost}>
+          <Button color="teal" basic>
+            <Icon name="heart" />
+          </Button>
+          <Label basic color="teal" pointing="left">
+            {likeCount}
+          </Label>
+        </Button>
+        <Button as="div" labelPosition="right">
+          <Button color="blue" basic>
+            <Icon name="comment" />
+          </Button>
+          <Label basic color="blue" pointing="left">
+            {commentCount}
+          </Label>
+        </Button>
+      </Card.Content>
+    </Card>
+  );
+};
+
+export default PostCard;

client/src/pages/Home.js

 import React from "react";
 import React from "react";
 import gql from "graphql-tag";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/react-hooks";
 import { useQuery } from "@apollo/react-hooks";
+import { Grid } from "semantic-ui-react";
+import PostCard from "../components/PostCard";
 
 
 const FETCH_POSTS_QUERY = gql`
 const FETCH_POSTS_QUERY = gql`
   {
   {
@@ -24,16 +26,28 @@ const FETCH_POSTS_QUERY = gql`
   }
   }
 `;
 `;
 
 
-function Home() {
-  const { loading, error, data } = useQuery(FETCH_POSTS_QUERY);
-
-  console.log(data);
+const Home = () => {
+  const { loading, data } = useQuery(FETCH_POSTS_QUERY);
 
 
   return (
   return (
-    <div>
-      <h1>Home page</h1>
-    </div>
+    <Grid columns={3}>
+      <Grid.Row className="page-title">
+        <h1>Recent Posts</h1>
+      </Grid.Row>
+      <Grid.Row>
+        {loading ? (
+          <h1>Loading posts...</h1>
+        ) : (
+          data.getPosts &&
+          data.getPosts.map(post => (
+            <Grid.Column key={post.id} style={{ marginBottom: 20 }}>
+              <PostCard post={post} />
+            </Grid.Column>
+          ))
+        )}
+      </Grid.Row>
+    </Grid>
   );
   );
-}
+};
 
 
 export default Home;
 export default Home;

client/yarn.lock

@@ -6518,6 +6518,11 @@ mkdirp@0.5.1, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   dependencies:
   dependencies:
     minimist "0.0.8"
     minimist "0.0.8"
 
 
+moment@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.npm.taobao.org/moment/download/moment-2.24.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmoment%2Fdownload%2Fmoment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha1-DQVdU/UFKqZTyfbraLtdEr9cK1s=
+
 move-concurrently@^1.0.1:
 move-concurrently@^1.0.1:
   version "1.0.1"
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
   resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"