107日目①：プロフィールページに「Back To Profiles」と「Edit Profile」（リンク付き）ボタンをつける（React Hooks)

2019年07月10日 2019年07月10日

キョウコ

ユーザーそれぞれのプロフィールページに「Back to Profiles」（他のユーザーも一覧表示されているプロフィールページに戻る）と「Edit Profile」（ユーザー本人であることが確認できた場合プロフィールを編集できる）ボタンを作成しました。

(アバター画像で表示している人物は、例としてUdemy講師のBrad Traversyです。）

この部分では、残念ながら２つ目の「Edit Profile」ボタンが表示されずじまいとなりました。次回debug予定です。ユーザー本人がログインした場合でも表示されないのでどこに間違いがあるのか探す予定です。

本日完成したのは以下の部分です。

①新しいフォルダとファイルを作成 client/src/components/profile/Profile.jsして、React　Hooksを使って「Back to Profiles」と「Edit Profiles」のリンク付きボタンを作成する

import React, { Fragment, useEffect } from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import Spinner from "../layout/Spinner";
import ProfileTop from "./ProfileTop";
import ProfileAbout from "./ProfileAbout";
import { getProfileById } from "../../actions/profile";

const Profile = ({
  getProfileById,
  profile: { profile, loading },
  auth,
  match
}) => {
  useEffect(() => {
    getProfileById(match.params.id);
  }, [getProfileById]);

  return (
    <Fragment>
      {profile === null || loading ? (
        <Spinner />
      ) : (
        <Fragment>
          <Link to='/profiles' className='btn btn-light'>
            Back To Profiles
          </Link>
          {auth.isAuthenticated &&
            auth.loading === false &&
            auth.user._id === profile.user._id && (
              <Link to='/edit-profile' className='btn btn-dark'>
                Edit Profile
              </Link>
            )}
          <div class='profile-grid my-1'>
            <ProfileTop profile={profile} />
            <ProfileAbout profile={profile} />
          </div>
        </Fragment>
      )}
    </Fragment>
  );
};

Profile.propTypes = {
  getProfileById: PropTypes.func.isRequired,
  profile: PropTypes.object.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  profile: state.profile,
  auth: state.auth
});

export default connect(
  mapStateToProps,
  { getProfileById }
)(Profile);

今日はどこが間違っているのかわからなかったのですが、以下の部分か、他のファイルのどこかにおかしいところがあってEdit Profileが表示されなかったのだと思います。

{auth.isAuthenticated &&
            auth.loading === false &&
            auth.user._id === profile.user._id && (
              <Link to='/edit-profile' className='btn btn-dark'>
                Edit Profile
              </Link>
            )}
          <div class='profile-grid my-1'>

②App.jsにrouteを作る

まずは、importします。

import Profile from "./components/profile/Profile";

次に、routeを作成しました。

<Route exact path='/profile/:id' component={Profile} />

③client/src/actions/profile.jsのaxios.get部分を修正する

実はこの時点では1つ目のBack to Profilesすら表示されなかったので、何かがおかしいと思いUdemyのQ&Aコーナーを見てみたところ、Get Profile by IDのアクション部分の表記に間違いがあるのでは？という話でした。

axios.get('/api/profile~~')となっていたところを、axios.get('../api/profile~~)と修正しています。Get Github reposについても同じように修正しました。

// Get profile by ID
export const getProfileById = userId => async dispatch => {
  try {
    const res = await axios.get(`../api/profile/user/${userId}`);

    dispatch({
      type: GET_PROFILE,
      payload: res.data
    });
  } catch (err) {
    dispatch({
      type: PROFILE_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status }
    });
  }
};