February 2024 updates and bug fixes (#407)

### New content
* Adds Onmyoji
* Adds Dark Rapture Zero
* Adds Exo Aristarchus

### Bug fixes
* Fixed a bug that prevented filtering job skills by category
* Fixed a bug that prevented infinite scroll in search modals

components/about/ChangelogUnit/index.tsx

@@ -6,7 +6,7 @@ import styles from './index.module.scss'
 
 interface Props {
   id: string
-  type: 'character' | 'summon' | 'weapon'
+  type: 'character' | 'summon' | 'weapon' | 'raid' | 'job'
   image?: '01' | '02' | '03' | '04'
 }
 
@@ -48,6 +48,11 @@ const ChangelogUnit = ({ id, type, image }: Props) => {
         const summon = await fetchSummon()
         setItem(summon.data)
         break
+
+      case 'raid':
+        const raid = await fetchRaid()
+        setItem(raid.data)
+        break
     }
   }
 
@@ -63,6 +68,10 @@ const ChangelogUnit = ({ id, type, image }: Props) => {
     return api.endpoints.summons.getOne({ id: id })
   }
 
+  async function fetchRaid() {
+    return api.endpoints.raids.getOne({ id: id })
+  }
+
   const imageUrl = () => {
     let src = ''
 
@@ -82,6 +91,10 @@ const ChangelogUnit = ({ id, type, image }: Props) => {
             ? `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${id}_${image}.jpg`
             : `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${id}.jpg`
         break
+
+      case 'raid':
+        src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/raids/${id}.png`
+        break
     }
 
     return src

components/about/ContentUpdate/index.module.scss

@@ -30,7 +30,8 @@
 
     .characters,
     .weapons,
-    .summons {
+    .summons,
+    .raids,
       display: grid;
       grid-template-rows: auto 1fr;
       gap: $unit;

components/about/ContentUpdate/index.tsx

@@ -18,6 +18,7 @@ interface Props {
   newItems?: UpdateObject
   uncappedItems?: UpdateObject
   transcendedItems?: UpdateObject
+  raidItems?: string[]
   numNotes: number
 }
 const ContentUpdate = ({
@@ -27,6 +28,7 @@ const ContentUpdate = ({
   newItems,
   uncappedItems,
   transcendedItems,
+  raidItems,
   numNotes,
 }: Props) => {
   const { t: updates } = useTranslation('updates')
@@ -138,6 +140,33 @@ const ContentUpdate = ({
     return section
   }
 
+  function newRaidSection() {
+    let section: React.ReactNode = ''
+
+    if (raidItems) {
+      section = raidItems && raidItems.length > 0 && (
+        <section className={styles['raids']}>
+          <h4>{updates(`labels.raids`)}</h4>
+          <div className={styles.items}>{raidItemElements()}</div>
+        </section>
+      )
+    }
+
+    return section
+  }
+
+  function raidItemElements() {
+    let elements: React.ReactNode[] = []
+
+    if (raidItems) {
+      elements = raidItems.map((id) => {
+        return <ChangelogUnit id={id} type="raid" key={id} />
+      })
+    }
+
+    return elements
+  }
+
   return (
     <section
       className={classNames({
@@ -163,6 +192,7 @@ const ContentUpdate = ({
         {newItemSection('summon')}
         {uncapItemSection('summon')}
         {transcendItemSection('summon')}
+        {newRaidSection()}
       </div>
       {numNotes > 0 ? (
         <div className={styles.notes}>

components/about/UpdatesPage/index.tsx

@@ -78,6 +78,16 @@ const UpdatesPage = () => {
   return (
     <div className={classes}>
       <h1>{common('about.segmented_control.updates')}</h1>
+      <ContentUpdate
+        version="2024-02U"
+        dateString="2024/02/20"
+        event="events.content"
+        newItems={{
+          weapon: ['1040618400'],
+        }}
+        raidItems={['dark-rapture-zero']}
+        numNotes={3}
+      />
       <ContentUpdate
         version="2024-02F"
         dateString="2024/02/14"

components/search/SearchModal/index.tsx

@@ -243,6 +243,13 @@ const SearchModal = (props: Props) => {
     }
   }, [query, open])
 
+  useEffect(() => {
+    if (open && props.object === 'job_skills') {
+      setCurrentPage(1)
+      fetchResults({ replace: true })
+    }
+  }, [filters, open])
+
   function incrementPage() {
     setCurrentPage(currentPage + 1)
   }
@@ -479,7 +486,7 @@ const SearchModal = (props: Props) => {
           {filterBar()}
         </header>
 
-        <div className={styles.results} ref={scrollContainer}>
+        <div id="Results" className={styles.results} ref={scrollContainer}>
           <div className={styles.totalRow}>
             <h5 className={styles.total}>
               {t('search.result_count', { record_count: recordCount })}
@@ -496,7 +503,7 @@ const SearchModal = (props: Props) => {
               </div>
             )}
           </div>
-          {open ? renderResults() : ''}
+          {open && renderResults()}
         </div>
       </DialogContent>
     </Dialog>

data/raidGroups.tsx

@@ -133,4 +133,10 @@ export const raidGroups: RaidGroup[] = [
       ja: 'スーパーアルティメット',
     },
   },
+  {
+    name: {
+      en: 'Nine-Star Raids',
+      ja: '★★★★★★★★★',
+    },
+  },
 ]

pages/[username].tsx

@@ -399,8 +399,8 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
         context: null,
         error: true,
         status: {
-          code: response?.status,
+          code: response ? response.status : -999,
-          text: response?.statusText,
+          text: response ? response.statusText : 'unspecified_error',
         },
         ...(await serverSideTranslations(locale, ['common'])),
       },

pages/saved.tsx

@@ -429,8 +429,8 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
         context: null,
         error: true,
         status: {
-          code: response?.status,
+          code: response ? response.status : -999,
-          text: response?.statusText,
+          text: response ? response.statusText : 'unspecified_error',
         },
         ...(await serverSideTranslations(locale, ['common'])),
       },

pages/teams.tsx

@@ -438,8 +438,8 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
         context: null,
         error: true,
         status: {
-          code: response?.status,
+          code: response ? response.status : -999,
-          text: response?.statusText,
+          text: response ? response.statusText : "unspecified_error",
         },
         ...(await serverSideTranslations(locale, ['common'])),
       },

public/locales/en/common.json

@@ -123,6 +123,10 @@
     "unauthorized": {
       "title": "Unauthorized",
       "description": "You don't have permission to perform that action"
+    },
+    "unspecified_error": {
+      "title": "Something went wrong",
+      "description": "You shouldn't see this message. Please try again later."
     }
   },
   "filters": {

public/locales/en/updates.json

@@ -13,6 +13,8 @@
       "weapons": "New weapon transcendence",
       "summons": "New summon transcendence"
     },
+    "jobs": "New classes",
+    "raids": "New raids",
     "features": "New features",
     "updates": "Other updates"
   },
@@ -24,6 +26,13 @@
     "uncap": "Uncap"
   },
   "versions": {
+    "2024-02U": {
+      "features": [
+        "Added new class: Onmyoji",
+        "Fixed a bug that prevented filtering job skills by category",
+        "Fixed a bug that prevented infinite scrolling in search results"
+      ]
+    },
     "2024-01L": {
       "features": [
         "Added Ultimate Mastery skills for classes: Cavalier, Relic Buster, Yamato, and Masquerade",
@@ -62,7 +71,7 @@
     },
     "1.2.1": {
       "bugs": [
-        "Job accessory popover has been fixed, so Paladin shields and Manadiver manatura can be selected again",
+        "Class accessory popover has been fixed, so Paladin shields and Manadiver manatura can be selected again",
         "The AX skill section no longer shows up in the weapon hovercard if no AX skills are set",
         "The top of the character hovercard has been slightly refined",
         "Fixed a bug that prevented all character over mastery (ring) bonuses from being displayed",

public/locales/ja/common.json

@@ -123,6 +123,10 @@
     "unauthorized": {
       "title": "権限がありません",
       "description": "行ったアクションを実行する権限がありません"
+    },
+    "unspecified_error": {
+      "title": "エラー",
+      "description": "エラーが発生しました"
     }
   },
   "filters": {

public/locales/ja/updates.json

@@ -13,6 +13,8 @@
       "weapons": "武器の新限界超越",
       "summons": "召喚石の新限界超越"
     },
+    "jobs": "新ジョブ",
+    "raids": "新マルチバトル",
     "features": "新機能",
     "updates": "その他の更新"
   },
@@ -24,6 +26,13 @@
     "uncap": "上限解放"
   },
   "versions": {
+    "2024-02U": {
+      "features": [
+        "新ジョブ「陰陽師」を追加",
+        "ジョブスキルのフィルターを発生できないバグを修正",
+        "検索リザルトに無限スクロールを発生できないバグを修正"
+      ]
+    },
     "2024-01L": {
       "features": [
         "「キャバルリー」「レリックバスター」「ヤマト」「マスカレード」の極致の証スキルを追加",

styles/globals.scss

@@ -303,7 +303,70 @@ h5 {
       }
 
       .LinkItem {
+        $diameter: $unit-6x;
+        align-items: center;
+        background: var(--dialog-bg);
+        border: 1px solid var(--link-item-bg);
+        border-radius: $card-corner;
+        display: flex;
+        min-height: 82px;
+        transition: background $duration-zoom ease-in,
+          transform $duration-zoom ease-in;
+
+        &:hover {
+          background: var(--link-item-bg);
+          color: var(--text-primary);
+
+          .shareIcon {
+            fill: var(--text-primary);
+            transform: translate($unit-half, calc(($unit * -1) / 2));
+          }
+        }
+
+        .Left {
+          align-items: center;
+          display: flex;
+          gap: $unit;
+
+          h3 {
+            font-weight: 600;
+            max-width: 70%;
+            line-height: 1.3;
+          }
+        }
+
+        a {
+          display: flex;
+          justify-content: space-between;
+          padding: $unit-2x;
           width: 100%;
+
+          &:hover {
+            text-decoration: none;
+          }
+
+          .left {
+            align-items: center;
+            display: flex;
+            gap: $unit-2x;
+            flex-grow: 1;
+
+            h3 {
+              font-weight: 600;
+            }
+          }
+        }
+
+        svg {
+          fill: var(--link-item-image-color);
+          width: $diameter;
+          height: auto;
+          transition: fill $duration-zoom ease-in;
+
+          &.shareIcon {
+            width: $unit-4x;
+          }
+        }
       }
     }
   }