Add raid section to ContentUpdate

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}>