Merge pull request #7039 from fjordllc/bug/fix-notifications-first-pa…

…ge-with-iOS 通知ページのバグを修正する
fjordllc · Nov 15, 2023 · ea69a7c · ea69a7c
2 parents 3304f5b + d804a23
commit ea69a7c
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 82 deletions.
diff --git a/app/javascript/components/Notifications.jsx b/app/javascript/components/Notifications.jsx
@@ -11,109 +11,141 @@ 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'
+    return params.get('status') === 'unread'
   }
-
-  const url = () => {
+  const apiUrl = () => {
+    const searchParams = new URLSearchParams()
     const params = new URLSearchParams(location.search)
-    if (params.get('status') === 'unread' && params.get('page') === null) {
-      return '/api/notifications.json?status=unread&page=1'
-    } else if (params.size === 0) {
-      return '/api/notifications.json?page=1'
+    const target = params.get('target')
+    if (target) {
+      searchParams.set('target', target)
+    }
+
+    const status = params.get('status')
+    if (status) {
+      searchParams.set('status', status)
     }
-    return `/api/notifications.json?${params}`
-  }
 
-  const { data, error } = useSWR(url, fetcher)
+    const page = params.get('page') ?? 1
+    searchParams.set('page', page)
+
+    const url = new URL('api/notifications.json', location.origin)
+    url.search = searchParams
+
+    return url.toString()
+  }
 
   const { page, setPage } = usePage()
+  const { data, error } = useSWR(apiUrl, fetcher)
 
   if (error) {
     console.warn(error)
     return <div>failed to load</div>
-  }
-
-  if (!data) {
+  } else 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}
-                />
-              )
-            })}
+        <FilterButton />
+        <div className="o-empty-message">
+          <div className="o-empty-message__icon">
+            <i className="fa-regular fa-smile" />
           </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>
-          )}
+          <p className="o-empty-message__text">
+            {isUnreadPage() ? '未読の通知はありません' : '通知はありません'}
+          </p>
         </div>
       </>
     )
   }
+
+  return (
+    <>
+      <FilterButton />
+      <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>
+    </>
+  )
+}
+
+const FilterButton = () => {
+  const filterButtonUrl = (status) => {
+    const searchParams = new URLSearchParams()
+    const params = new URLSearchParams(location.search)
+    const target = params.get('target')
+    if (target) {
+      searchParams.set('target', target)
+    }
+
+    if (status) {
+      searchParams.set('status', status)
+    }
+
+    const url = new URL('/notifications', location.origin)
+    url.search = searchParams
+
+    return url.toString()
+  }
+
+  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={filterButtonUrl('unread')}>
+              未読
+            </a>
+          </li>
+          <li className="pill-nav__item">
+            <a
+              className={`pill-nav__item-link ${
+                params.get('status') === 'unread' ? '' : 'is-active'
+              }`}
+              href={filterButtonUrl()}>
+              全て
+            </a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  )
 }
diff --git a/test/system/notifications_test.rb b/test/system/notifications_test.rb
@@ -262,14 +262,17 @@ class NotificationsTest < ApplicationSystemTestCase
       visit "/reports/#{report}"
       fill_in 'new_comment[description]', with: 'コメントと確認した'
       click_button '確認OKにする'
+      assert_text 'コメントと確認した'
       visit_with_auth "/reports/#{report}", 'hatsuno'
+      assert_text 'コメントと確認した'
       find('.header-links__link.test-show-notifications').click
       assert_text 'hatsunoさんの【 「コメントと」の日報 】にkomagataさんがコメントしました。'
     end
   end
 
   test 'notify user class name role contains' do
     visit_with_auth '/', 'komagata'
+    assert_text '7日以上経過'
     find('.header-links__link.test-show-notifications').click
     assert_selector 'span.a-user-role.is-admin'
     assert_selector 'span.a-user-role.is-student'
@@ -419,4 +422,13 @@ class NotificationsTest < ApplicationSystemTestCase
       assert_no_selector '.a-notification-count'
     end
   end
+
+  test 'Unread and All buttons should always be displayed' do
+    user = users(:kimura)
+    visit_with_auth '/notifications', user.login_name
+    assert_selector '.pill-nav__item-link.is-active'
+
+    visit '/notifications?status=unread&target=check'
+    assert_selector '.pill-nav__item-link.is-active'
+  end
 end