Add hooks to send data back to the server

components/Party/index.tsx

@@ -37,8 +37,11 @@ const Party = (props: Props) => {
     // Fetch data from the server
     useEffect(() => {
         const shortcode = (props.slug) ? props.slug : undefined
-        if (shortcode) fetchDetails(shortcode)
+
-        else appState.party.editable = true
+        if (shortcode)
+            fetchDetails(shortcode)
+        else
+            appState.party.editable = true
     }, [props.slug])
 
     // Methods: Creating a new party
@@ -53,7 +56,7 @@ const Party = (props: Props) => {
         return await api.endpoints.parties.create(body, headers)
     }
 
-    // Methods: Updating the party's extra flag
+    // Methods: Updating the party's details
     function checkboxChanged(event: React.ChangeEvent<HTMLInputElement>) {
         appState.party.extra = event.target.checked
 
@@ -64,6 +67,27 @@ const Party = (props: Props) => {
         }
     }
 
+    function updateDetails(name?: string, description?: string, raid?: Raid) {
+        if (appState.party.name !== name ||
+            appState.party.description !== description ||
+            appState.party.raid?.id !== raid?.id) {
+                if (appState.party.id)
+                    api.endpoints.parties.update(appState.party.id, {
+                        'party': {
+                            'name': name,
+                            'description': description,
+                            'raid_id': raid?.id
+                        }
+                    }, headers)
+                    .then(() => {
+                        appState.party.name = name
+                        appState.party.description = description
+                        appState.party.raid = raid
+                    })
+            }
+
+    }
+
     // Methods: Navigating with segmented control
     function segmentClicked(event: React.ChangeEvent<HTMLInputElement>) {
         switch(event.target.value) {
@@ -92,18 +116,12 @@ const Party = (props: Props) => {
     }
 
     function processResult(response: AxiosResponse) {
-        // Store the response
+        appState.party.id = response.data.party.id
-        const party = response.data.party
 
         // Store the party's user-generated details
-        if (party.name)
+        appState.party.name = response.data.party.name
-            appState.party.name = party.name
+        appState.party.description = response.data.party.description
-
+        appState.party.raid = response.data.party.raid
-        if (party.description)
-            appState.party.description = party.description
-
-        if (party.raid)
-            appState.party.raid = party.raid
     }
 
     function processError(error: any) {
@@ -169,6 +187,7 @@ const Party = (props: Props) => {
             </section>
             { <PartyDetails
                 editable={party.editable}
+                updateCallback={updateDetails}
             />}
         </div>
     )

components/PartyDetails/index.tsx

@@ -13,6 +13,7 @@ import RaidDropdown from '~components/RaidDropdown'
 // Props
 interface Props {
     editable: boolean
+    updateCallback: (name?: string, description?: string, raid?: Raid) => void
 }
 
 const PartyDetails = (props: Props) => {
@@ -20,6 +21,7 @@ const PartyDetails = (props: Props) => {
 
     const nameInput = React.createRef<HTMLInputElement>()
     const descriptionInput = React.createRef<HTMLTextAreaElement>()
+    const raidSelect = React.createRef<HTMLSelectElement>()
 
     const readOnlyClasses = classNames({
         'Details': true,
@@ -39,8 +41,6 @@ const PartyDetails = (props: Props) => {
     })
 
     function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
-        console.log(event)
-
         event.preventDefault()
 
         const { name, value } = event.target
@@ -58,6 +58,14 @@ const PartyDetails = (props: Props) => {
         setErrors(newErrors)
     }
 
+    function updateDetails(event: React.ChangeEvent) {
+        const nameValue = nameInput.current?.value
+        const descriptionValue = descriptionInput.current?.value
+        const raid = appSnapshot.raids.find(raid => raid.id == raidSelect.current?.value)
+
+        props.updateCallback(nameValue, descriptionValue, raid)
+    }
+
     const editable = (
         <section className={editableClasses}>
             <CharLimitedFieldset 
@@ -65,22 +73,21 @@ const PartyDetails = (props: Props) => {
                 placeholder="Name your team"
                 value={appSnapshot.party.name}
                 limit={50}
-                onBlur={ () => {} }
+                onBlur={updateDetails}
                 onChange={handleInputChange}
                 error={errors.name}
                 ref={nameInput}
             />
-            <RaidDropdown />
+            <RaidDropdown 
-            <select>
+                selected={appSnapshot.party.raid?.id || ''}
-                <option>Belial</option>
+                onBlur={updateDetails}
-                <option>Beelzebub</option>
+                ref={raidSelect}
-                <option>Lucifer (Hard)</option>
+            />
-            </select>
             <TextFieldset 
                 fieldName="name"
                 placeholder={"Write your notes here\n\n\nWatch out for the 50% trigger!\nMake sure to click Fediel’s 1 first\nGood luck with RNG!"}
                 value={appSnapshot.party.description}
-                onBlur={ () => {} }
+                onBlur={updateDetails}
                 onChange={handleTextAreaChange}
                 error={errors.description}
                 ref={descriptionInput}