Updates to Select component

Use `value` instead of `defaultValue` and properly control it

components/FilterBar/index.tsx

@@ -32,11 +32,6 @@ const FilterBar = (props: Props) => {
   const [recencyOpen, setRecencyOpen] = useState(false)
   const [elementOpen, setElementOpen] = useState(false)
 
-  // Set up refs for filter dropdowns
-  const elementSelect = React.createRef<HTMLSelectElement>()
-  const raidSelect = React.createRef<HTMLSelectElement>()
-  const recencySelect = React.createRef<HTMLSelectElement>()
-
   // Set up classes object for showing shadow on scroll
   const classes = classNames({
     FilterBar: true,
@@ -69,9 +64,9 @@ const FilterBar = (props: Props) => {
     <div className={classes}>
       {props.children}
       <Select
-        defaultValue={`${props.element}`}
+        value={`${props.element}`}
         open={elementOpen}
-        onChange={elementSelectChanged}
+        onValueChange={elementSelectChanged}
         onClick={openElementSelect}
       >
         <SelectItem data-element="all" key={-1} value={-1}>
@@ -105,14 +100,13 @@ const FilterBar = (props: Props) => {
         defaultRaid="all"
         showAllRaidsOption={true}
         onChange={raidSelectChanged}
-        ref={raidSelect}
       />
 
       <Select
-        defaultValue={`${props.recency}`}
+        value={`${props.recency}`}
         trigger={'All time'}
         open={recencyOpen}
-        onChange={recencySelectChanged}
+        onValueChange={recencySelectChanged}
         onClick={openRecencySelect}
       >
         <SelectItem key={-1} value={-1}>

components/JobDropdown/index.tsx

@@ -102,11 +102,11 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
 
     return (
       <Select
-        defaultValue={props.currentJob}
+        value={currentJob ? currentJob.id : 'no-job'}
         placeholder={'Select a class...'}
         open={open}
         onClick={openJobSelect}
-        onChange={handleChange}
+        onValueChange={handleChange}
         triggerClass="Job"
       >
         <SelectItem key={-1} value="no-job">

components/JobSkillSearchFilterBar/index.tsx

@@ -40,11 +40,11 @@ const JobSkillSearchFilterBar = (props: Props) => {
   return (
     <div className="SearchFilterBar">
       <Select
-        defaultValue="-1"
+        value={-1}
         triggerClass="Bound"
         trigger={'All elements'}
         open={open}
-        onChange={onChange}
+        onValueChange={onChange}
         onClick={openSelect}
       >
         <SelectItem key="all" value={-1}>

components/Party/index.tsx

@@ -25,18 +25,6 @@ interface Props {
 }
 
 const Party = (props: Props) => {
-  // Cookies
-  const cookie = getCookie('account')
-  const accountData: AccountCookie = cookie
-    ? JSON.parse(cookie as string)
-    : null
-
-  const headers = useMemo(() => {
-    return accountData
-      ? { headers: { Authorization: `Bearer ${accountData.token}` } }
-      : {}
-  }, [accountData])
-
   // Set up router
   const router = useRouter()
 
@@ -55,12 +43,13 @@ const Party = (props: Props) => {
   async function createParty(extra: boolean = false) {
     let body = {
       party: {
-        ...(accountData && { user_id: accountData.userId }),
         extra: extra,
       },
     }
 
-    return await api.endpoints.parties.create(body, headers)
+    console.log(body)
+
+    return await api.endpoints.parties.create(body)
   }
 
   // Methods: Updating the party's details
@@ -68,13 +57,9 @@ const Party = (props: Props) => {
     appState.party.extra = event.target.checked
 
     if (party.id) {
-      api.endpoints.parties.update(
-        party.id,
-        {
-          party: { extra: event.target.checked },
-        },
-        headers
-      )
+      api.endpoints.parties.update(party.id, {
+        party: { extra: event.target.checked },
+      })
     }
   }
 
@@ -86,17 +71,13 @@ const Party = (props: Props) => {
     ) {
       if (appState.party.id)
         api.endpoints.parties
-          .update(
-            appState.party.id,
-            {
-              party: {
-                name: name,
-                description: description,
-                raid_id: raid?.id,
-              },
+          .update(appState.party.id, {
+            party: {
+              name: name,
+              description: description,
+              raid_id: raid?.id,
             },
-            headers
-          )
+          })
           .then(() => {
             appState.party.name = name
             appState.party.description = description
@@ -110,7 +91,7 @@ const Party = (props: Props) => {
   function deleteTeam(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
     if (appState.party.editable && appState.party.id) {
       api.endpoints.parties
-        .destroy({ id: appState.party.id, params: headers })
+        .destroy({ id: appState.party.id })
         .then(() => {
           // Push to route
           router.push('/')
@@ -131,26 +112,26 @@ const Party = (props: Props) => {
   }
 
   // Methods: Storing party data
-  const storeParty = function (party: Party) {
+  const storeParty = function (team: Party) {
     // Store the important party and state-keeping values
-    appState.party.name = party.name
-    appState.party.description = party.description
-    appState.party.raid = party.raid
-    appState.party.updated_at = party.updated_at
-    appState.party.job = party.job
-    appState.party.jobSkills = party.job_skills
+    appState.party.name = team.name
+    appState.party.description = team.description
+    appState.party.raid = team.raid
+    appState.party.updated_at = team.updated_at
+    appState.party.job = team.job
+    appState.party.jobSkills = team.job_skills
 
-    appState.party.id = party.id
-    appState.party.extra = party.extra
-    appState.party.user = party.user
-    appState.party.favorited = party.favorited
-    appState.party.created_at = party.created_at
-    appState.party.updated_at = party.updated_at
+    appState.party.id = team.id
+    appState.party.extra = team.extra
+    appState.party.user = team.user
+    appState.party.favorited = team.favorited
+    appState.party.created_at = team.created_at
+    appState.party.updated_at = team.updated_at
 
     // Populate state
-    storeCharacters(party.characters)
-    storeWeapons(party.weapons)
-    storeSummons(party.summons)
+    storeCharacters(team.characters)
+    storeWeapons(team.weapons)
+    storeSummons(team.summons)
   }
 
   const storeCharacters = (list: Array<GridCharacter>) => {
@@ -256,13 +237,11 @@ const Party = (props: Props) => {
     <React.Fragment>
       {navigation}
       <section id="Party">{currentGrid()}</section>
-      {
-        <PartyDetails
-          editable={party.editable}
-          updateCallback={updateDetails}
-          deleteCallback={deleteTeam}
-        />
-      }
+      <PartyDetails
+        editable={party.editable}
+        updateCallback={updateDetails}
+        deleteCallback={deleteTeam}
+      />
     </React.Fragment>
   )
 }

components/RaidDropdown/index.tsx

@@ -42,7 +42,7 @@ const RaidDropdown = React.forwardRef<HTMLSelectElement, Props>(
 
     // Set up local states for storing raids
     const [open, setOpen] = useState(false)
-    const [currentRaid, setCurrentRaid] = useState<Raid>()
+    const [currentRaid, setCurrentRaid] = useState<Raid | undefined>(undefined)
     const [raids, setRaids] = useState<Raid[]>()
     const [sortedRaids, setSortedRaids] = useState<Raid[][]>()
 
@@ -78,7 +78,7 @@ const RaidDropdown = React.forwardRef<HTMLSelectElement, Props>(
     useEffect(() => {
       if (raids && props.currentRaid) {
         const raid = raids.find((raid) => raid.slug === props.currentRaid)
-        setCurrentRaid(raid)
+        if (raid) setCurrentRaid(raid)
       }
     }, [raids, props.currentRaid])
 
@@ -100,13 +100,12 @@ const RaidDropdown = React.forwardRef<HTMLSelectElement, Props>(
         sortedRaids[index].length > 0 &&
         sortedRaids[index]
           .sort((a, b) => a.element - b.element)
-          .map((item, i) => {
-            return (
-              <SelectItem key={i} value={item.slug}>
-                {item.name[locale]}
-              </SelectItem>
-            )
-          })
+          .map((item, i) => (
+            <SelectItem key={i} value={item.slug}>
+              {item.name[locale]}
+            </SelectItem>
+          ))
+
       return (
         <SelectGroup
           key={index}
@@ -119,17 +118,19 @@ const RaidDropdown = React.forwardRef<HTMLSelectElement, Props>(
     }
 
     return (
-      <Select
-        defaultValue={props.showAllRaidsOption ? props.currentRaid : undefined}
-        placeholder={'Select a raid...'}
-        open={open}
-        onClick={openRaidSelect}
-        onChange={handleChange}
-      >
-        {Array.from(Array(sortedRaids?.length)).map((x, i) =>
-          renderRaidGroup(i)
-        )}
-      </Select>
+      <React.Fragment>
+        <Select
+          value={props.currentRaid}
+          placeholder={'Select a raid...'}
+          open={open}
+          onClick={openRaidSelect}
+          onValueChange={handleChange}
+        >
+          {Array.from(Array(sortedRaids?.length)).map((x, i) =>
+            renderRaidGroup(i)
+          )}
+        </Select>
+      </React.Fragment>
     )
   }
 )

components/Select/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import * as RadixSelect from '@radix-ui/react-select'
 import classNames from 'classnames'
 
@@ -7,26 +7,34 @@ import ArrowIcon from '~public/icons/Arrow.svg'
 import './index.scss'
 
 // Props
-interface Props {
+interface Props
+  extends React.DetailedHTMLProps<
+    React.SelectHTMLAttributes<HTMLSelectElement>,
+    HTMLSelectElement
+  > {
   open: boolean
-  defaultValue?: string | number
   placeholder?: string
   trigger?: React.ReactNode
   children?: React.ReactNode
   onClick?: () => void
-  onChange?: (value: string) => void
+  onValueChange?: (value: string) => void
   triggerClass?: string
 }
 
-const Select = React.forwardRef<HTMLSelectElement, Props>(function useFieldSet(
-  props,
-  ref
-) {
+const Select = (props: Props) => {
+  const [value, setValue] = useState('')
+
+  useEffect(() => {
+    if (props.value) setValue(`${props.value}`)
+  }, [props.value])
+
+  function onValueChange(newValue: string) {
+    setValue(`${newValue}`)
+    if (props.onValueChange) props.onValueChange(newValue)
+  }
+
   return (
-    <RadixSelect.Root
-      defaultValue={props.defaultValue as string}
-      onValueChange={props.onChange}
-    >
+    <RadixSelect.Root value={value} onValueChange={onValueChange}>
       <RadixSelect.Trigger
         className={classNames('SelectTrigger', props.triggerClass)}
         placeholder={props.placeholder}
@@ -50,6 +58,6 @@ const Select = React.forwardRef<HTMLSelectElement, Props>(function useFieldSet(
       </RadixSelect.Portal>
     </RadixSelect.Root>
   )
-})
+}
 
 export default Select