What You'll Learn

Yesterday lab is for our front-end muscle refreshing. It is okay if we could not finish all the required features, eventhough we shouldve. To help us moving on, today we will have a template Front-end for us to focus on practicing the backend.

💡 One or more professional/senior developers have spent months if not years working on the code of the company you join. It's a good idea to study it carefully.

The project is related, but not connected. We don't want to be hold back because of yesterday bugs don't we?

!!! Caution : this template use yarn not npm.

User Story

User

Post

 
git clone git@github.com:coderschool/cs-coderbook-template.git

cd cs-coderbook/client
touch .env
echo REACT_APP_BACKEND_API="http://localhost:5000/" > .env

cd ..
cd server
touch .env
echo "PORT=5000 \nJWT_SECRET_KEY='verySecretSecret' \nMONGODB_URI='mongodb://localhost:27017/coder-book'" >> .env

yarn
yarn dev
cd ..
cd client
yarn
yarn start

💡 One or more professional/senior developers have spent months if not years working on the code of the company you join. It's a good idea to study it carefully.

Study the existing project code

Before we start coding, discuss in your group :

The auth page has a register button/modal that doesn't work. Oppotunity.

Make it work by searching for STEP 1 or look inside of ./client/src/pages/AuthPage/AuthPage.js. Refactor it to update the user state and submit to our API.

<Form
  onSubmit={onSubmit}
  className="d-flex flex-column justify-content-center"
></Form>

This should look familiar, we dispatch an action, register(), to our Redux store. If you look at it you'll see we make a request to our backend.

const onSubmit = (e) => {
  e.preventDefault();
  dispatch(authActions.register(null, user.email, user.password));
};

The form provided doesn't work yet. Bummer.

Make it work. Search the project for the string STEP 2 or look inside of ./client/src/components/Composer/Composer.js.

import React, { useState } from "react";

const [post, setPost] = useState({ body: "" });

const onChange = (e) => {
  setPost({ ...post, [e.target.id]: e.target.value });
};

<Form.Control
  id="body"
  type="text"
  onChange={onChange}
  placeholder="What's on your mind?"
/>

Add a console.log in the body of Composer.

console.log({ post });

const onSubmit = (e) => {
  e.preventDefault();
};

<Form onSubmit={onSubmit}></Form>

We need to dispatch an action when we submit the form.

import { postActions } from "../../redux/actions";

const onSubmit = (e) => {
  e.preventDefault();
  dispatch(postActions.createPost(post.body));
};

import { useDispatch } from "react-redux";

const dispatch = useDispatch();

We've created posts in our backend so let's read from it. Search the project for the string STEP 3 or look inside of ./client/src/pages/HomePage/HomePage.

When the HomePage loads we want to dispatch an action that will fetch posts.

import { useSelector, useDispatch } from "react-redux";
import { postActions } from "../../redux/actions/post.actions";

const dispatch = useDispatch();

dispatch(postActions.postsRequest());

When we refresh the page we see an error. Why...?

We're making a GET request to /api/posts and our server responds 404 Not Found...

We haven't...

router.get("/", postsController.list);

The error went away... and we're getting this data back from the api; interesting...

[
  {
    foo: "bar",
  },
];

postController.list = async (req, res) => {
  return sendResponse(
    res,
    200,
    true,
    { posts: [{ foo: "bar" }] },
    null,
    "Received posts"
  );
};

The data sent back to the client is hardcoded, that isn't right.

Add the owner of the post to the response data by populating as well. Why might we want to know who the owner of a post is?

postController.list = catchAsync(async (req, res) => {
  const posts = await Post.find({}).populate("owner");
  return sendResponse(res, 200, true, { posts }, null, "Received posts");
});

We not get back the correct posts. Incredible

const posts = useSelector((state) => state.post.posts);

{
  posts &&
    posts.map((p) => {
      return <Post key={p._id} {...p} />;
    });
}

We capture the first argument sent into our Post component, props. We then render the body prop and pass the owner prop to PostHeader as a prop named userWhoCreatedPost.

export default function Post(props) {
  return (
    <Card className="p-3 mb-3 rounded">
      <PostHeader userWhoCreatedPost={props.owner} />
      {props.body}
      <Card.Img
        variant="top"
        src="https://images.unsplash.com/photo-1529231812519-f0dcfdf0445f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8dGFsZW50ZWR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
      />
      <PostReactions />
      <hr className="my-1" />
      <PostActions />
      <hr className="mt-1" />
      <PostComments comments={COMMENTS} />
      <CommentForm />
    </Card>
  );
}

Once again, we capture the first prop sent in. Except we also destructure it. The prop we look for is named userWhoCreatedPost. Why?

Afterwards we replace Charles Lee with {userWhoCreatedPost.name}.

function PostHeader({ userWhoCreatedPost }) {
  return (
    <div className="d-flex align-items-center p-3">
      <Avatar url="https://scontent.fsgn5-6.fna.fbcdn.net/v/t1.0-1/p480x480/13924881_10105599279810183_392497317459780337_n.jpg?_nc_cat=109&ccb=3&_nc_sid=7206a8&_nc_ohc=uI6aGTdf9vEAX8-Aev9&_nc_ht=scontent.fsgn5-6.fna&tp=6&oh=e8b18753cb8aa63937829afe3aa916a7&oe=6064C685" />
      <h3 className="font-weight-bold ml-3">{userWhoCreatedPost.name}</h3>
    </div>
  );
}

We should now see that our post is rendering the correct owner's name & the body of the post. Excellent