Merge pull request #6979 from fjordllc/feature/convert-notifications-…

…component-to-react

notitications、notificationのreact化

app/javascript/components/Notification.jsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import dayjs from 'dayjs'
+import ja from 'dayjs/locale/ja'
+dayjs.locale(ja)
+
+export default function Notification({ notification }) {
+  const createdAt = dayjs(notification.created_at).format(
+    'YYYY年MM月DD日(ddd) HH:mm'
+  )
+  const roleClass = `is-${notification.sender.primary_role}`
+
+  return (
+    <div
+      className={`card-list-item ${
+        notification.read ? 'is-read' : 'is-unread'
+      }`}>
+      <div className="card-list-item__inner">
+        <div className="card-list-item__user">
+          <img
+            className={`card-list-item__user-icon a-user-icon ${roleClass}`}
+            title={notification.sender.icon_title}
+            src={notification.sender.avatar_url}
+          />
+        </div>
+        <div className="card-list-item__rows">
+          <div className="card-list-item__row">
+            <div className="card-list-item-title">
+              <div className="card-list-item-title__start">
+                {notification.read === false && (
+                  <div className="a-list-item-badge is-unread">
+                    <span>未読</span>
+                  </div>
+                )}
+                <h2 className="card-list-item-title__title" itemProp="name">
+                  <a
+                    className="card-list-item-title__link a-text-link js-unconfirmed-link"
+                    href={notification.path}
+                    itemProp="url">
+                    <span className="card-list-item-title__link-label">
+                      {notification.message}
+                    </span>
+                  </a>
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div className="card-list-item__row">
+            <div className="card-list-item-meta">
+              <div className="card-list-item-meta__items">
+                <div className="card-list-item-meta__item">
+                  <time className="a-meta" dateTime={notification.created_at}>
+                    {createdAt}
+                  </time>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/javascript/components/Notifications.jsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import Notification from './Notification'
+import LoadingListPlaceholder from './LoadingListPlaceholder'
+import Pagination from './Pagination'
+import UnconfirmedLink from './UnconfirmedLink'
+import useSWR from 'swr'
+import fetcher from '../fetcher'
+import usePage from './hooks/usePage'
+
+export default function Notifications({ isMentor }) {
+  const per = 20
+  const isUnreadPage = () => {
+    const params = new URLSearchParams(location.search)
+    return params.get('status') !== null && params.get('status') === 'unread'
+  }
+  const url = () => {
+    const params = new URLSearchParams(location.search)
+    return `/api/notifications.json?${params}`
+  }
+
+  const { data, error } = useSWR(url, fetcher)
+
+  const { page, setPage } = usePage()
+
+  if (error) {
+    console.warn(error)
+    return <div>failed to load</div>
+  }
+
+  if (!data) {
+    return (
+      <div id="notifications" className="page-content loading">
+        <LoadingListPlaceholder />
+      </div>
+    )
+  } else if (data.notifications.length === 0) {
+    return (
+      <div className="o-empty-message">
+        <div className="o-empty-message__icon">
+          <i className="fa-regular fa-smile" />
+        </div>
+        <p className="o-empty-message__text">
+          {isUnreadPage ? '未読の通知はありません' : '通知はありません'}
+        </p>
+      </div>
+    )
+  } else {
+    const params = new URLSearchParams(location.search)
+    return (
+      <>
+        <nav className="pill-nav">
+          <div className="container">
+            <ul className="pill-nav__items">
+              <li className="pill-nav__item">
+                <a
+                  className={`pill-nav__item-link ${
+                    params.get('status') === 'unread' ? 'is-active' : ''
+                  }`}
+                  href={`/notifications?status=unread`}>
+                  未読
+                </a>
+              </li>
+              <li className="pill-nav__item">
+                <a
+                  className={`pill-nav__item-link ${
+                    params.get('status') === 'unread' ? '' : 'is-active'
+                  }`}
+                  href="/notifications">
+                  全て
+                </a>
+              </li>
+            </ul>
+          </div>
+        </nav>
+        <div id="notifications" className="page-content loaded">
+          {data.total_pages > 1 && (
+            <nav className="pagination">
+              <Pagination
+                sum={data.total_pages * per}
+                per={per}
+                page={page}
+                setPage={setPage}
+              />
+            </nav>
+          )}
+          <div className="card-list a-card">
+            {data.notifications.map((notification) => {
+              return (
+                <Notification
+                  key={notification.id}
+                  notification={notification}
+                />
+              )
+            })}
+          </div>
+          {isMentor && isUnreadPage() && (
+            <UnconfirmedLink label="未読の通知を一括で開く" />
+          )}
+          {data.total_pages > 1 && (
+            <nav className="pagination">
+              <Pagination
+                sum={data.total_pages * per}
+                per={per}
+                page={page}
+                setPage={setPage}
+              />
+            </nav>
+          )}
+        </div>
+      </>
+    )
+  }
+}

app/javascript/packs/application.js

@@ -29,7 +29,6 @@ import '../github_grass'
 import '../following.js'
 import '../hide-user.js'
 import '../categories-practice.js'
-import '../notifications.js'
 import '../products.js'
 import '../courses-categories.js'
 import '../courses-practices.js'