Update types

Added RaidGroup and updated Raid, then updated dependent types and objects

components/RaidSelect/index.scss

@@ -0,0 +1,22 @@
+.Raid.Select {
+  min-width: 420px;
+
+  .Top {
+    display: flex;
+    flex-direction: column;
+    gap: $unit;
+    padding: $unit 0;
+
+    .SegmentedControl {
+      width: 100%;
+    }
+
+    .Input.Bound {
+      background-color: var(--select-contained-bg);
+
+      &:hover {
+        background-color: var(--select-contained-bg-hover);
+      }
+    }
+  }
+}

components/RaidSelect/index.tsx

@@ -0,0 +1,170 @@
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import * as RadixSelect from '@radix-ui/react-select'
+import classNames from 'classnames'
+
+import Overlay from '~components/common/Overlay'
+
+import ChevronIcon from '~public/icons/Chevron.svg'
+
+import './index.scss'
+import SegmentedControl from '~components/common/SegmentedControl'
+import Segment from '~components/common/Segment'
+import Input from '~components/common/Input'
+
+// Props
+interface Props
+  extends React.DetailedHTMLProps<
+    React.SelectHTMLAttributes<HTMLSelectElement>,
+    HTMLSelectElement
+  > {
+  altText?: string
+  currentSegment: number
+  iconSrc?: string
+  open: boolean
+  trigger?: React.ReactNode
+  children?: React.ReactNode
+  onOpenChange?: () => void
+  onValueChange?: (value: string) => void
+  onSegmentClick: (segment: number) => void
+  onClose?: () => void
+  triggerClass?: string
+  overlayVisible?: boolean
+}
+
+const RaidSelect = React.forwardRef<HTMLButtonElement, Props>(function Select(
+  props: Props,
+  forwardedRef
+) {
+  // Import translations
+  const { t } = useTranslation('common')
+
+  const searchInput = React.createRef<HTMLInputElement>()
+
+  const [open, setOpen] = useState(false)
+  const [value, setValue] = useState('')
+  const [query, setQuery] = useState('')
+
+  const triggerClasses = classNames(
+    {
+      SelectTrigger: true,
+      Disabled: props.disabled,
+    },
+    props.triggerClass
+  )
+
+  useEffect(() => {
+    setOpen(props.open)
+  }, [props.open])
+
+  useEffect(() => {
+    if (props.value && props.value !== '') setValue(`${props.value}`)
+    else setValue('')
+  }, [props.value])
+
+  function onValueChange(newValue: string) {
+    setValue(`${newValue}`)
+    if (props.onValueChange) props.onValueChange(newValue)
+  }
+
+  function onCloseAutoFocus() {
+    setOpen(false)
+    if (props.onClose) props.onClose()
+  }
+
+  function onEscapeKeyDown() {
+    setOpen(false)
+    if (props.onClose) props.onClose()
+  }
+
+  function onPointerDownOutside() {
+    setOpen(false)
+    if (props.onClose) props.onClose()
+  }
+
+  return (
+    <RadixSelect.Root
+      open={open}
+      value={value !== '' ? value : undefined}
+      onValueChange={onValueChange}
+      onOpenChange={props.onOpenChange}
+    >
+      <RadixSelect.Trigger
+        className={triggerClasses}
+        placeholder={props.placeholder}
+        ref={forwardedRef}
+      >
+        {props.iconSrc ? <img alt={props.altText} src={props.iconSrc} /> : ''}
+        <RadixSelect.Value placeholder={props.placeholder} />
+        {!props.disabled ? (
+          <RadixSelect.Icon className="SelectIcon">
+            <ChevronIcon />
+          </RadixSelect.Icon>
+        ) : (
+          ''
+        )}
+      </RadixSelect.Trigger>
+
+      <RadixSelect.Portal className="Select">
+        <>
+          <Overlay
+            open={open}
+            visible={props.overlayVisible != null ? props.overlayVisible : true}
+          />
+
+          <RadixSelect.Content
+            className="Raid Select"
+            onCloseAutoFocus={onCloseAutoFocus}
+            onEscapeKeyDown={onEscapeKeyDown}
+            onPointerDownOutside={onPointerDownOutside}
+          >
+            <div className="Top">
+              <Input
+                autoComplete="off"
+                className="Search Bound"
+                name="query"
+                placeholder={t('search.placeholders.raid')}
+                ref={searchInput}
+                value={query}
+                onChange={() => {}}
+              />
+              <SegmentedControl blended={true}>
+                <Segment
+                  groupName="raid_section"
+                  name="events"
+                  selected={props.currentSegment === 1}
+                  onClick={() => props.onSegmentClick(1)}
+                >
+                  {t('raids.sections.events')}
+                </Segment>
+                <Segment
+                  groupName="raid_section"
+                  name="raids"
+                  selected={props.currentSegment === 0}
+                  onClick={() => props.onSegmentClick(0)}
+                >
+                  {t('raids.sections.raids')}
+                </Segment>
+                <Segment
+                  groupName="raid_section"
+                  name="solo"
+                  selected={props.currentSegment === 2}
+                  onClick={() => props.onSegmentClick(2)}
+                >
+                  {t('raids.sections.solo')}
+                </Segment>
+              </SegmentedControl>
+            </div>
+            <RadixSelect.Viewport>{props.children}</RadixSelect.Viewport>
+          </RadixSelect.Content>
+        </>
+      </RadixSelect.Portal>
+    </RadixSelect.Root>
+  )
+})
+
+RaidSelect.defaultProps = {
+  overlayVisible: true,
+}
+
+export default RaidSelect

types/Raid.d.ts

@@ -1,5 +1,6 @@
 interface Raid {
   id: string
+  group: RaidGroup
   name: {
     [key: string]: string
     en: string
@@ -7,6 +8,5 @@ interface Raid {
   }
   slug: string
   level: number
-  group: number
   element: number
 }

types/RaidGroup.d.ts

@@ -0,0 +1,14 @@
+interface RaidGroup {
+  id: string
+  name: {
+    [key: string]: string
+    en: string
+    ja: string
+  }
+  raids: Raid[]
+  difficulty: number
+  section: number
+  order: number
+  extra: boolean
+  hl: boolean
+}

types/index.d.ts

@@ -83,8 +83,7 @@ interface PageContextObj {
   party?: Party
   jobs?: Job[]
   jobSkills?: JobSkill[]
-  raids: Raid[]
-  sortedRaids: Raid[][]
+  raidGroups: RaidGroup[]
   weaponKeys?: GroupedWeaponKeys
   pagination?: PaginationObject
   meta?: { [key: string]: string }

utils/appState.tsx

@@ -83,7 +83,7 @@ interface AppState {
       summons: Summon[]
     }
   }
-  raids: Raid[]
+  raidGroups: RaidGroup[]
   jobs: Job[]
   jobSkills: JobSkill[]
   weaponKeys: GroupedWeaponKeys
@@ -149,7 +149,7 @@ export const initialAppState: AppState = {
       summons: [],
     },
   },
-  raids: [],
+  raidGroups: [],
   jobs: [],
   jobSkills: [],
   weaponKeys: {