We Keep Coding

Vue component using axios to update a preference

I am trying to update a preference, example UI attached. The default is yes but a user should have the option to select no. I know I am a little way off but I just need some help identifying where I am going wrong, any help would be really appreciated.
Parent:
<CommunicationPreference
v-for="(communication, index) in communicationPreferenceType"
:key="index + communication.name"
:consent="communication.consent"
:name="communication.name"
#accept-consent="acceptConsent"
#decline-consent="declineConsent"
/>
methods: {
async acceptConsent() {
await this.$store.dispatch('account/updateCommunicationPreferences')
},
async declineConsent() {
await this.$store.dispatch('account/updateCommunicationPreferences')
},
}
CommunicationPreference.vue component:
<Button
:text="Yes"
:type="consent === true ? 'primary' : 'secondary'"
#clicked="acceptConsent"
/>
<Button
:text="No"
:type="consent !== true ? 'primary' : 'secondary'"
#clicked="declineConsent"
/>
methods: {
acceptConsent(consent) {
this.$emit('accept', consent === true)
},
declineConsent(consent) {
this.$emit('decline', consent === false)
},
},
Store:
async updateCommunicationPreferences({ commit, state }) {
const { communicationTypeName } = state.communicationTypeName
if (!communicationTypeName) {
return
}
try {
const response = await this.$axios.put(`/communication-consent/${communicationTypeName}`)
const { data: updatedCommunicationPreferences } = response.data
commit('SET_UPDATED_COMMUNICATION_PREFERENCES', updatedCommunicationPreferences)
} catch (error) {
commit('ADD_ERROR', { id: 'updateCommunicationPreferences', error }, { root: true })
}
},

As mentioned in the comments, the name of the method called is incorrect.
As mentioned by #qimolin, the values related to each option are not being passed to the function that saves it, this can be done by passing a value at calling the action.
methods: {
async acceptConsent() {
await this.$store.dispatch('account/updateCommunicationPreferences', { consent: true })
},
async declineConsent() {
await this.$store.dispatch('account/updateCommunicationPreferences', { consent: false })
}
or even that simplified with a single method
<CommunicationPreference
v-for="(communication, index) in communicationPreferenceType"
:key="index + communication.name"
:consent="communication.consent"
:name="communication.name"
#accept-consent="acceptConsent(true)"
#decline-consent="declineConsent(false)"
/>
methods: {
async updateConsent(consent) {
await this.$store.dispatch('account/updateCommunicationPreferences', { consent })
}
}
and that parameter must be captured on action
async updateCommunicationPreferences({ commit, state }, payload) {
const { consent } = payload // true or false. This is the value selected by the user.
const { communicationTypeName } = state.communicationTypeName
if (!communicationTypeName) {
return
}
try {
const response = await this.$axios.put(`/communication-consent/${communicationTypeName}`)
const { data: updatedCommunicationPreferences } = response.data
commit('SET_UPDATED_COMMUNICATION_PREFERENCES', updatedCommunicationPreferences)
} catch (error) {
commit('ADD_ERROR', { id: 'updateCommunicationPreferences', error }, { root: true })
}
},

Quasar QSelect is not opening when performing AJAX call

I have been trying to create a simple auto complete using Quasar's select but I'm not sure if this is a bug or if I'm doing something wrong.
Problem
Whenever I click the QSelect component, it doesn't show the dropdown where I can pick the options from.
video of the problem
As soon as I click on the QSelect component, I make a request to fetch a list of 50 tags, then I populate the tags to my QSelect but the dropdown doesn't show.
Code
import type { PropType } from "vue";
import { defineComponent, h, ref } from "vue";
import type { TagCodec } from "#/services/api/resources/tags/codec";
import { list } from "#/services/api/resources/tags/actions";
import { QSelect } from "quasar";
export const TagAutoComplete = defineComponent({
name: "TagAutoComplete",
props: {
modelValue: { type: Array as PropType<TagCodec[]> },
},
emits: ["update:modelValue"],
setup(props, context) {
const loading = ref(false);
const tags = ref<TagCodec[]>([]);
// eslint-disable-next-line #typescript-eslint/ban-types
const onFilterTest = (val: string, doneFn: (update: Function) => void) => {
const parameters = val === "" ? {} : { title: val };
doneFn(async () => {
loading.value = true;
const response = await list(parameters);
if (val) {
const needle = val.toLowerCase();
tags.value = response.data.data.filter(
(tag) => tag.title.toLowerCase().indexOf(needle) > -1
);
} else {
tags.value = response.data.data;
}
loading.value = false;
});
};
const onInput = (values: TagCodec[]) => {
context.emit("update:modelValue", values);
};
return function render() {
return h(QSelect, {
modelValue: props.modelValue,
multiple: true,
options: tags.value,
dense: true,
optionLabel: "title",
optionValue: "id",
outlined: true,
useInput: true,
useChips: true,
placeholder: "Start typing to search",
onFilter: onFilterTest,
"onUpdate:modelValue": onInput,
loading: loading.value,
});
};
},
});
What I have tried
I have tried to use the several props that is available for the component but nothing seemed to work.
My understanding is that whenever we want to create an AJAX request using QSelect we should use the onFilter event emitted by QSelect and handle the case from there.
Questions
Is this the way to create a Quasar AJAX Autocomplete? (I have tried to search online but all the answers are in Quasar's forums that are currently returning BAD GATEWAY)
What am I doing wrong that it is not displaying the dropdown as soon as I click on the QSelect?

It seems updateFn may not allow being async. Shift the async action a level up to solve the issue.
const onFilterTest = async (val, update /* abort */) => {
const parameters = val === '' ? {} : { title: val };
loading.value = true;
const response = await list(parameters);
let list = response.data.data;
if (val) {
const needle = val.toLowerCase();
list = response.data.data.filter((x) => x.title.toLowerCase()
.includes(needle));
}
update(() => {
tags.value = list;
loading.value = false;
});
};
I tested it by the following code and mocked values.
// import type { PropType } from 'vue';
import { defineComponent, h, ref } from 'vue';
// import type { TagCodec } from "#/services/api/resources/tags/codec";
// import { list } from "#/services/api/resources/tags/actions";
import { QSelect } from 'quasar';
export const TagAutoComplete = defineComponent({
name: 'TagAutoComplete',
props: {
modelValue: { type: [] },
},
emits: ['update:modelValue'],
setup(props, context) {
const loading = ref(false);
const tags = ref([]);
const onFilterTest = async (val, update /* abort */) => {
// const parameters = val === '' ? {} : { title: val };
loading.value = true;
const response = await new Promise((resolve) => {
setTimeout(() => {
resolve({
data: {
data: [
{
id: 1,
title: 'Vue',
},
{
id: 2,
title: 'Vuex',
},
{
id: 3,
title: 'Nuxt',
},
{
id: 4,
title: 'SSR',
},
],
},
});
}, 3000);
});
let list = response.data.data;
if (val) {
const needle = val.toLowerCase();
list = response.data.data.filter((x) => x.title.toLowerCase()
.includes(needle));
}
update(() => {
tags.value = list;
loading.value = false;
});
};
const onInput = (values) => {
context.emit('update:modelValue', values);
};
return function render() {
return h(QSelect, {
modelValue: props.modelValue,
multiple: true,
options: tags.value,
dense: true,
optionLabel: 'title',
optionValue: 'id',
outlined: true,
useInput: true,
useChips: true,
placeholder: 'Start typing to search',
onFilter: onFilterTest,
'onUpdate:modelValue': onInput,
loading: loading.value,
});
};
},
});

Why is my original state mutated when filtering with react redux

im using redux in an react app. Why is this filtering func mutating the original state.products? I cant understand why
state.products = [
{
type: "one",
products: [
{ active: true },
{ active: false }
]
}
]
function mapStateToProps(state) {
const test = state.products.filter((item) => {
if(item.type === "one") {
return item.products = item.products.filter((item) => {
item.active
});
}
return item;
});
return {
machineSearchWeightRange: state.machineSearchWeightRange,
filteredItems: test //This will have only products active
};
}
filteredItems will have only products that is active but the state.products is also updated containing only active products when trying to filter on the same data again.
Suggestions

Because you're assigning to a property on an existing state item:
function mapStateToProps(state) {
const test = state.products.filter((item) => {
if(item.type === "one") {
return item.products = item.products.filter((item) => { // <========== Here
item.active
});
}
return item;
});
return {
machineSearchWeightRange: state.machineSearchWeightRange,
filteredItems: test //This will have only products active
};
}
Instead, create a new item to return. Also, it looks like you need map along with filter, and you're not actually returning item.active in your inner filter (see this question's answers for more there):
function mapStateToProps(state) {
const test = state.products.filter(({type}) => type === "one").map(item => {
return {
...item,
products: item.products.filter((item) => {
return item.active;
})
};
});
return {
machineSearchWeightRange: state.machineSearchWeightRange,
filteredItems: test //This will have only products active
};
}
Side note: This:
products: item.products.filter((item) => {
return item.active;
})
can be simply:
products: item.products.filter(({active}) => active)

In React/Redux reducer, how can I update a string in an nested array in an immutable way?

My store looks like this,
{
name: "john",
foo: {},
arr: [
{
id:101,
desc:'comment'
},
{
id:101,
desc:'comment2'
}
]
}
My textarea looks like this
<textarea
id={arr.id} //"101"
name={`tesc:`}
value={this.props.store.desc}
onChange={this.props.onChng}
/>
My action is
export const onChng = (desc) => ({
type: Constants.SET_DESC,
payload: {
desc
}
});
My reducer
case Constants.SET_DESC:
return update(state, {
store: {
streams: {
desc: { $set: action.payload.desc }
}
}
});
It works only if arry is an object, I had to make changes to the stream to an array and I am confused how I can update to an array, also how does get the right value from the store.

The following example taken from the redux documentation might help you in the use case how to update items in an array. For more on this you can read on here http://redux.js.org/docs/recipes/StructuringReducers.html
state structure is something like this
{
visibilityFilter: 'SHOW_ALL',
todos: [
{
text: 'Consider using Redux',
completed: true,
},
{
text: 'Keep all state in a single tree',
completed: false
}
]
}
and reducer code is like below
function updateObject(oldObject, newValues) {
// Encapsulate the idea of passing a new object as the first parameter
// to Object.assign to ensure we correctly copy data instead of mutating
return Object.assign({}, oldObject, newValues);
}
function updateItemInArray(array, itemId, updateItemCallback) {
const updatedItems = array.map(item => {
if(item.id !== itemId) {
// Since we only want to update one item, preserve all others as they are now
return item;
}
// Use the provided callback to create an updated item
const updatedItem = updateItemCallback(item);
return updatedItem;
});
return updatedItems;
}
function appReducer(state = initialState, action) {
switch(action.type) {
case 'EDIT_TODO' : {
const newTodos = updateItemInArray(state.todos, action.id, todo => {
return updateObject(todo, {text : action.text});
});
return updateObject(state, {todos : newTodos});
}
default : return state;
}
}

If you have to update an element in a array within your store you have to copy the array and clone the matching element to apply your changes.
So in the first step your action should contain either the already cloned (and changed) object or the id of the object and the properties to change.
Here is a rough example:
export class MyActions {
static readonly UPDATE_ITEM = 'My.Action.UPDATE_ITEM';
static updateItem(id: string, changedValues: any) {
return { type: MyActions.UPDATE_ITEM, payload: { id, changedValues } };
}
}
export const myReducer: Reducer<IAppState> = (state: IAppState = initialState, action: AnyAction): IAppState => {
switch (action.type) {
case MyActions.UPDATE_ITEM:
return { ...state, items: merge(state.items, action.payload) };
default:
return state;
}
}
const merge = (array, change) => {
// check if an item with the id already exists
const index = array.findIndex(item => item.id === change.id);
// copy the source array
array = [...array];
if(index >= 0) {
// clone and change the existing item
const existingItem = array[index];
array[index] = { ...existingItem, ...change.changedValues };
} else {
// add a new item to the array
array.push = { id: change.id, ...change.changedValues };
}
return array;
}

To update an array, I would use immutability helper and do something like this - to your reducer
let store = {"state" : {
"data": [{
"subset": [{
"id": 1
}, {
"id": 2
}]
}, {
"subset": [{
"id": 10
}, {
"id": 11
}, {
"id": 12
}]
}]
}}
case Constants.SET_DESC:
return update(store, {
"state" : {
"data": {
[action.indexToUpdate]: {
"subset": {
$set: action.payload.desc
}
}
}
}
})
});

React.DOM: Unhandled Rejection (TypeError): Cannot read property 'map' of undefined

Being a newbie to the React community...I'm blocked (for hours now) and unable to trace a solution to fix the error posted above:
Am I missing the right parameters to how the data object is fetched in through the app?
This is my ajax data response
The bug is living on props.personList.map inside of const ListContainer
For context here's the code on the entire file:
import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
function getPersonList() {
const api = 'apistring';
return axios.get(api).then(res => {
console.log(res);
}).catch(err => console.log(err));
}
let getLastName = (fullName) => {
return fullName.match(/\w+/g)[1];
};
const getFirstName = (fullName) => {
return fullName.match(/\w+/g)[0];
};
//Remove any people that do not have the name we are searching for
let filterByName = (searchForName, personList) => {
return personList.filter((person) => {
return person.name === searchForName;
});
};
//VIEW (React)
const Search = ({ onChange }) => React.DOM.input({
type: 'input',
onChange
});
const Thumbnail = ({src}) => React.DOM.img({
className: 'image',
src
});
//CODE BREAKS HERE
const ListRow = (props) => React.DOM.tr({ key: props.person.name }, [
React.DOM.td({ key: 'headshot' }, React.createElement(Thumbnail, { src: props.person.url })),
React.DOM.td({ key: 'firstName' }, null, getFirstName(props.person.name)),
React.DOM.td({ key: 'lastName' }, null, getLastName(props.person.name)),
]);
const ListContainer = (props) => React.DOM.table({ className: 'list-container' }, [
React.DOM.thead({ key: 'firstName' }, React.DOM.tr({}, [
React.DOM.th({ key: 'lastName' }, null, 'headshot'),
React.DOM.th({ key: 'id' }, null, 'First Name'),
React.DOM.th({ key: 'last-h' }, null, 'Last Name')
])),
React.DOM.tbody({ key: 'tbody' }, props.personList.map((person, i) =>
React.createElement(ListRow, { key: `person-${i}`, person })))
]);
const App = React.createClass({
getInitialState() {
return {
personList: [],
visiblePersonList: []
};
},
componentDidMount() {
getPersonList().then((data) =>
this.setState({
data,
visiblePersonList: data
}));
},
_shuffleList() {
this.setState({
visiblePersonList: shuffleList(this.state.personList)
});
},
_sortByFirst() {
this.setState({
visiblePersonList: sortByFirstName(this.state.personList)
});
},
_sortByLast() {
this.setState({
visiblePersonList: sortByLastName(this.state.personList)
});
},
_onSearch(e) {
this.setState({
visiblePersonList: filterByName(e.target.value, this.state.personList)
});
},
render() {
const { visiblePersonList } = this.state;
return React.DOM.div({ className: 'app-container' }, [
React.createElement(Search, { key: 'search', onChange: this._onSearch }),
React.DOM.button({ key: 'shuffle', onClick: this._shuffleList }, null, 'Shuffle'),
React.DOM.button({ key: 'sort-first', onClick: this._sortByFirst }, null, 'Sort (First Name)'),
React.DOM.button({ key: 'sort-last', onClick: this._sortByLast }, null, 'Sort (Last Name)'),
React.createElement(ListContainer, { key: 'list', personList: visiblePersonList })
]);
}
});
ReactDOM.render(<App />, document.getElementById('app'));

Your callback with the console.log accesses the value and then discards it.
function getPersonList() {
const api = 'apistring';
return axios.get(api).then(res => {
console.log(res);
}).catch(err => console.log(err));
}
should be
function getPersonList() {
const api = 'apistring';
return axios.get(api).then(res => {
console.log(res);
return res.data.items;
}).catch(err => console.log(err));
}
When you use .then you are inserting a link into your promise chain. The value returned by .then becomes the value passed to the next handler. Because you are not returning any value, your
getPersonList().then((data) => {
// ...
});
callback will get data as undefined.
Another thing to note, though don't cause this specific error, is that your screenshot shows objects with .firstName and .lastName but all of the code in this file uses .name which does not exist.