ユーザのプロフィールページ②

プロフィールページを作成

プロフィールボタンを押すとプロフィールが、表示されるようにする。

ページについて作成するので、コンフィグのラウツ
config/routes.rb
resourcesを使ってurlを全開作成しました。

resource :profile

今回は、resource

その後、routesをブラウザで確認すると
profileの中にindexがありません。
indexは、複数あるものを表示するもの

プロフィールは一つしか表示する必要がないため、showだけあれば十分

resource :profile, only: [:show, :edit, :update]

この三つを指定
resourceの場合、この三つを指定することが多い

app/controllers/profiles_controller.rb
を作成
ここは、profilesで複数形で良い

class ProfilesController < ApplicationController
  def show
  end

  def edit
  end
end

ビフォーアクションを定義
このアクション（今回はshow）の前に実行するアクション

before_action :authenticate_user!

authenticate_user!:ログインしてないとできないですよという意味

def show
    @profile = current_user.profile
end

これで、プロフィールを取得できる

app/models/user.rb
ここのhas_one :profileとある
ことによって、current_user.profileと、とってくることができる。

view
app/views/profiles
フォルダーを作成
ProfilesControllerなので、profilesにする

app/views/profiles/show.html.haml
app/views/profiles/edit.html.haml
二つのファイルを作成

app/views/profiles/edit.html.haml

edit

とりあえずこれを記入
app/views/profiles/show.html.haml

.container.profilePage
  .profilePage_user
    .profilePage_user_image
          = image_tag 'default-avatar.png'
    .profilePage_user_basicInfo
      .profilePage_user_name
        .profilePage_user_displayName
          = current_user.display_name
    .profilePage_user_actionButton
      = link_to 'Edit', edit_profile_path
  .profilePage_user_introduction
    あああああああああああああああああああああああああああああああああああああああああああああああああああああ

edit_profile_pathは、ブラウザのラウツにあるプロフィールのedit

リンクを貼る
app/views/layouts/application.html.haml

= link_to  'プロフィール'profile_path

とする

これで、プロフィールを押すと画面が変わります。
また、editをおせば,editと書かれた画面になります。

装飾変更
app/assets/stylesheets/profile.scss
を作成し
app/assets/stylesheets/application.scss

@import 'profile';

を追加

app/assets/stylesheets/profile.scss

@import './variables';

$image_size: 56px;

.profilePage {
  margin-top: 24px;

  &_user {
    display: flex;

    &_image {
      display: flex;
      flex-direction: column;
      justify-content: center;

      img {
        width: $image_size;
        height: $image_size;
      }
    }

    &_basicInfo {
      margin-left: 16px;
    }

    &_actionButton {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 12px;
      border-radius: 4px;
      border: 1px solid $primary-color;
      font-weight: bold;
      padding: 0px 8px;

      a {
        color: $primary-color;
      }
    }

    &_name {
      display: flex;
      margin-bottom: 8px;
    }

    &_displayName {
      font-size: 18px;
      font-weight: bold;
      margin-right: 8px;
    }

    &_introduction {
      font-size: 12px;
    }
  }
}

を追加