diff --git a/components/Party/index.tsx b/components/Party/index.tsx index 63ac7bee..913ed776 100644 --- a/components/Party/index.tsx +++ b/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) { 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) { switch(event.target.value) { @@ -92,18 +116,12 @@ const Party = (props: Props) => { } function processResult(response: AxiosResponse) { - // Store the response - const party = response.data.party + appState.party.id = response.data.party.id // Store the party's user-generated details - if (party.name) - appState.party.name = party.name - - if (party.description) - appState.party.description = party.description - - if (party.raid) - appState.party.raid = party.raid + appState.party.name = response.data.party.name + appState.party.description = response.data.party.description + appState.party.raid = response.data.party.raid } function processError(error: any) { @@ -169,6 +187,7 @@ const Party = (props: Props) => { { } ) diff --git a/components/PartyDetails/index.tsx b/components/PartyDetails/index.tsx index 5ff4347b..bd92744c 100644 --- a/components/PartyDetails/index.tsx +++ b/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() const descriptionInput = React.createRef() + const raidSelect = React.createRef() const readOnlyClasses = classNames({ 'Details': true, @@ -39,8 +41,6 @@ const PartyDetails = (props: Props) => { }) function handleInputChange(event: React.ChangeEvent) { - 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 = (
{ placeholder="Name your team" value={appSnapshot.party.name} limit={50} - onBlur={ () => {} } + onBlur={updateDetails} onChange={handleInputChange} error={errors.name} ref={nameInput} /> - - + {} } + onBlur={updateDetails} onChange={handleTextAreaChange} error={errors.description} ref={descriptionInput}