regular-event.vue, regular-events.vueをreactに対応させる

[komagata]

下記を参考にしてreactに変える。

• react導入 + 管理画面のコース一覧をreact化 by komagata · Pull Request #5515 · fjordllc/bootcamp

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[Kassy0220]

@komagata @machida お疲れ様です！

こちらのIssueを実装している途中で次の不具合を発見しました。 この不具合を修正しようと思うのですが、このIssue内で修正しても大丈夫でしょうか、それとも別のIssueとして分けた方が良いでしょうか？ ご確認をお願いします🙏

不具合の内容

本来であれば図1のように、ユーザーのroleに応じてアイコンの縁取りが行われるはずが、特定の箇所で行われていません。

図1

問題の箇所

不具合が発生している箇所

UserIcon.jsxを利用している次の箇所で、アイコンの縁取りが行われていません。

• ブックマーク一覧(/current_user/bookmarks)
• 特別イベント一覧ページ(/events)

提出物一覧ページでは、次のようなコンポーネント構成でUserIcon.jsxを使っているのですが、ちゃんとアイコンの縁取りがなされています。 Products.jsx → Product.jsx → UserIcon.jsx

「なぜこのページだけちゃんと表示されているのか」についての原因は特定できていません。

原因

問題が発生している箇所ではUserIcon.jsxコンポーネントを利用しています。 該当のコンポーネントは次のようなマークアップを返します。

export default function UserIcon({ user, blockClassSuffix }) {
  return (
    <a href={user.url} className={`${blockClassSuffix}__user-link`}>
      <img
        src={user.avatar_url}
        alt={user.icon_title}
        title={user.icon_title}
        className={`${blockClassSuffix}__user-icon a-user-icon is-${user.primary_role}`}
      />
    </a>
  )
}

ユーザアイコンの縁取りが行われている箇所と比較すると、マークアップの構造が異なっていることが分かりました。 <a>タグの直下にある<span>タグがUserIcon.jsxでは欠けています。

(app/javascript/user-icon.vue)

<template lang="pug">
a(:href='user.url', :class='`${blockClass}user-link`')
  span(:class='["a-user-role", roleClass]')
    img(
      :src='user.avatar_url',
      :alt='user.icon_title',
      :title='user.icon_title',
      :class='[`${blockClass}user-icon`, "a-user-icon"]')
</template>

該当のスタイルは次のようになっています。 (app/javascript/stylesheets/config/mixins/_user-role.sass)

=icon-role-style
  &.is-admin,
  &.is-mentor
    .a-user-icon
      border: solid 2px rgba($danger, .7)
  &.is-graduate
    .a-user-icon
      border: solid 2px rgba($success, .7)
  &.is-adviser
    .a-user-icon
      border: solid 2px rgba($warning, .7)
  &.is-trainee
    .a-user-icon
      border: solid 2px rgba($main, .7)
  body.is-mentor-mode &.is-retired
    background-color: black
    .a-user-icon
     opacity: .7

解決法

UserIcon.jsxで、<a>タグの直下に<span>タグを挿入すれば問題は解消します。

<a href={user.url} className={`${blockClassSuffix}__user-link`}>
  <span className={`a-user-role is-${user.primary_role}`}>
    <img
      src={user.avatar_url}
      alt={user.icon_title}
      title={user.icon_title}
      className={`${blockClassSuffix}__user-icon a-user-icon`}
    />
  </span>
</a>

[machida]

@Kassy0220 不具合報告ありがとうございます！！対応お願いしたいです🙏

[Kassy0220]

こちら本番環境で動作確認できましたのでCloseいたします〜！🙌