Does anyone know the complete sequence of reflux methods? I have this reflux store and its relation shown in the flow below:
component =(listen state)=> store =(listen)=> action =(listen trigger)=> component
That is the complete cycle, and I am trying to integrate this into socket.io
Code snippet:
Store:
export default Reflux.createStore({
listenables: [action],
init() {
this.state = messages;
this.registerListener();
},
registerListener() {
msgSocket.on('message', (user, msgs) => {
this.state.msg.push(`${user} : ${msgs}`);
this.trigger(this.state);
});
},
getInitialState() {
return this.state;
},
onSendMessage(username, message) {
msgSocket.emit('message', username, message);
}
});
But I get this result:
[user: undefined,
user: myMessage]
Why does it seem its repeating? anyone knows?
Related
I have a checkbox list of domain tlds, such as com, net, io, etc. I also have a search text input, where I can drill down the list of 500 or so domains to a smaller amount. For example, if I start to type co in to my search text input, I will get back results that match co, such as co, com, com.au, etc. I am using Laravel and Vue,js 3 to achieve this with a watcher. It works beautifully. How can an achieve the same within a Pinia store?
Here is my code currently:
watch: {
'filters.searchedTlds': function(after, before) {
this.fetchsearchedTlds();
}
},
This is inside my vue component.
Next is the code to fetch searched tlds:
fetchsearchedTlds() {
self = this;
axios.get('/fetch-checked-tlds', { params: { searchedTlds: self.filters.searchedTlds } })
.then(function (response) {
self.filters.tlds = response.data.tlds;
console.log(response.data.tlds);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
},
And finally, the code inside my Laravel controller:
public function fetchCheckedTlds(Request $request)
{
$data['tlds'] = Tld::where('tld', 'LIKE','%'.$request->input('searchedTlds').'%')->pluck('tld');
return response()->json($data);
}
I am converting my code to use a Pinia store and I am stuck on how to convert my vue component watcher to Pinia?
Many thanks in advance.
To watch a pinia status, you may watch a computed attribute based on pinia or use watch getter
Your pinia may look like the one below.
~/store/filters.js
export const useFilters = defineStore('filters', {
state: () => {
return {
_filters: {},
};
},
getters: {
filters: state => state._filters,
},
...
}
In where you want to watch
<script setup>
import { computed, watch } from 'vue';
import { useFilters } from '~/store/filters.js';
const filters = useFilters();
// watch a computed attributes instead
const searchedTlds = computed(() => {
return filters.filters?.searchedTlds || '';
});
watch(
searchedTlds,
(newValue, oldValue) {
fetchsearchedTlds();
}
);
// or use watch getter
watch(
() => {
return filters.filters?.searchedTlds || '';
},
(newValue, oldValue) {
fetchsearchedTlds();
}
);
</script>
The first parameter of watch() can be a single ref or a getter function, or an array of getter functions, for more details, please view the Watch Source Types.
I have a component in vue 3 named index which gets the user form data and passes it onto api controller in laravel.
async submitForm() {
try {
await axios.post(
"/api/show",
{
firstname: this.form.firstname,
email: this.form.email,
},
);
} catch (error) {
console.error("error");
}
},
and I'm trying to fetch the data sent into the controller via following method onto another component named show and all I'm getting is empty string and I don't understand the reason. Any guide would be really appreciated.
loadProductDetails() {
axios.post("api/show")
.then(({data}) => (this.products = data));
},
Solved the issue. It was because I was trying to get response from two different routes but the first one was already fetching the post response data and second one was returning the empty string and replacing the data I already recieved from the response.
try {
axios
.post("/api/show", {
firstname: this.form.firstname,
email: this.form.email,
selectedAnswer: this.form.selectedAnswer,
selectedCategory: this.form.selectedCategory,
})
.then((res) => {
localStorage.setItem("show", JSON.stringify(res.data));
});
} catch (error) {
console.error("error");
}
Simply saving the response data into local storage and getting it from another component solved the issue.
loadProductDetails() {
this.products = JSON.parse(localStorage.getItem('show'));
}
I am looking to write what I am calling structural expectations with Jest and I am not sure how this could be accomplished.
To start I have a graphql server and a database with a number of todo items. I currently have the following test that just returns true if the content within the database is the same as the response that I have written. I want to check instead that the response looks like an object with data that could be anything.
Here is the code that I have:
describe('To Do:', () => {
it('add todo items', async () => {
const response = await axios.post('http://localhost:5000/graphql', {
query: `
query {
getTodoItems {
message
id
dateCreated
dateDue
}
}
`
});
const { data } = response;
expect(data).toMatchObject({
data: {
getTodoItems: [
{
message: "message",
id: "5bd9aec8406e0a2170e04494",
dateCreated: "1540992712052",
dateDue: "1111111111"
},
{
message: "message",
id: "5bd9aeec60a9b2579882a308",
dateCreated: "1540992748028",
dateDue: "1111111111"
},
{
message: "new message",
id: "5bd9af15922b27236c91837c",
dateCreated: "1540992789836",
dateDue: "1111111111"
}
]
}
})
});
});
Now I want to write something like this, where there can be any number of returned items and they follow similar structuring:
describe('To Do:', () => {
it('add todo items', async () => {
const response = await axios.post('http://localhost:5000/graphql', {
query: `
query {
getTodoItems {
message
id
dateCreated
dateDue
}
}
`
});
const { data } = response;
expect(data).toMatchObject({
data: {
getTodoItems: [
{
message: expect.any(String),
id: expect.any(String),
dateCreated: expect.any(String),
dateDue: expect.any(String)
} // There needs to be unlimited additional items here
]
}
})
});
});
I have been looking throught the docs and I even tried nesting the expectations but I can't seem to get the desired response. Let me know what yo think or if I can clarify in any way.
I figured out the best way for me to do it. I would love to hear better answers. I wrote a function within the scope of the test as a jest.fn and then I called it. In that function, I made custom checks to parse the data that was received in the response. From there I added an expect function with the 'toHaveReturnedWith' method to see what the response of my custom function was and finishing out the test.
const addTodoResponse = jest.fn(() => {
// Custom parsing and check here
// Returns true or false
});
addTodoResponse();
expect(addTodoResponse).toHaveReturnedWith(true);
Are there better ways to do this out there?
I've got a fairly simple react container component that attempts to call set state in an ajax callback called from componentDidMount. The full error is:
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the UserListContainer component.
the order of operations from my console.log are:
render
child-render
componentDidMount
ajax-data
[Big ol Error Message]
I started out using async/await but when I received the error I went back to callbacks with the same result. This is the relevant code:
export class UserListContainer extends React.Component<any, any>
{
constructor() {
super();
this.state = {
users: [], request: {}
};
}
//componentDidMount = async () => {
componentWillMount = () => {
console.log('componentWillMount');
//var response: Models.IUserQueryResponse = await Api.UserList.get(this.state.request);
Api.UserList.get(this.state.request).then((response) => {
console.log('ajax-data');
if (response.isOk) {
this.setState({ users: response.data, request: response.state });
}
});
}
render() {
console.log('render');
return <UserList
request={this.state.request}
users={this.state.users}
onEditClick={this.edit}
onRefresh={this.refresh}
/>;
}
Any help would be appreciated.
you cannot set state in componentWillMount because your component could be in a transitioning state.. also it will not trigger a re-rendering. Either use componentWillReceiveProps or componentDidUpdate.
Now that aside your issue is that you are calling setState in the callback from an API request. and the issue with that is you probably have unmounted that component and dont want to setState anymore.
you can fix this with a simple flag
constructor() {
super();
this.state = {
users: [], request: {}
};
this.isMounted = false;
}
componentDidMount(){
this.isMounted = true
}
componentWillUnmount(){
this.isMounted = false;
}
then in your api request you would do this.
Api.UserList.get(this.state.request).then((response) => {
console.log('ajax-data');
if (response.isOk && this.isMounted) {
this.setState({ users: response.data, request: response.state });
}
});
I think is better to use componentWillMount() instead of componentDidMount() cause you want to load the list and then set the state, not after the component was mounted.
I'm using Angular2 RC5 with an ASP.NET Core server that makes the API calls to get my data.
I'm actually wondering if there is a way to reduce the number of http calls you make with Angular2, because I fear there will be a lot if I keep using components the way I do. Here is a concrete example.
I want to get a text value from the database, which is defined by an ID and a Language. I then made the following component :
dico.component.ts
#Component({
selector: 'dico',
template: `{{text}}`,
providers: [EntitiesService]
})
class Dico implements AfterViewInit {
#Input() private id: string;
#Input() private lang: string;
private text: string = null;
// DI for my service
constructor(private entitiesService: EntitiesService) {
}
ngAfterViewInit() {
this.getDico();
}
// Call the service that makes the http call to my ASP Controller
getDico() {
this.entitiesService.getDico(this.id, this.lang)
.subscribe(
DicoText => this.text = DicoText
);
}
}
#Component({
template: `<dico [id] [lang]></dico>`,
directives: [Dico]
})
export class DicoComponent {
}
Here is the code from my service :
entities.service.ts
getDico(aDicoID: string, aLangue: string) {
// Parameters to use in my controller
let params = new URLSearchParams();
params.set("aDicoID", aDicoID);
params.set("aLangue", aLangue);
// Setting up the Http request
let lHttpRequestBody = params.toString();
let lControllerAction: string = "/libelle";
let lControllerFullURL: string = this.controllerURL + lControllerAction;
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
let options = new RequestOptions({ headers: headers });
return this.http.post(lControllerFullURL, lHttpRequestBody, options)
.map((res: any) => {
// Parsing the data from the response
let data = res.json();
// Managing the error cases
switch (data.status) {
case "success":
let l_cRet: string = data.results;
if (l_cRet != null && !l_cRet.includes("UNDEFINED")) {
return data.results;
} else {
throw new Error("Erreur récupération Dico : " + l_cRet);
}
case "error":
throw new Error("Erreur récupération Dico : " + data.message);
}
}
).catch(this.handleError);
}
Then I can use my newly made component in my app :
randomFile.html
<dico id="201124" lang="it"></dico>
<dico id="201125" lang="en"></dico>
<dico id="201126" lang="fr"></dico>
But this application will eventually use hundreds of these "dico" and I was wondering how I could manage some pre-fetch or something like that before the app fully loads. Does it even matter ? Will that affect performance in the long term ?
Any advice would be greatly appreciated.
EDIT : These dico allow me to fetch from the database a text translated into the langage I want. Here, in the example above, I have 3 "dico" that will output some text in italian, french, and english.
My application will use a lot of them, as every text in every menu will be a "dico", and the problem is that there will be a lot of them, and right now for every "dico" I make, my service is called and makes one http call to get the data. What I want is to somehow define all my dicos, call the service which will give me the text of all my dicos in an array to avoid making several calls (but I don't really know how to do that).
A basic untested approach (I don't know observables too well myself)
class DicoService {
private subjects = {}
private ids = [];
getDico(String id):Observable<Dico> {
var s = this.subjects[id];
if(!s) {
this.ids.push(id);
s = new Subject();
this.subjects[id]=s;
}
return s.asObservable().share().first();
}
sendRequest() {
http.get(....) /* pass this.ids */
map(response => response.json())
.subscribe(data => {
for(item in data) { // don't know how to iterate exactly because I don't know how the response will look like
this.subject[item.id].next(item.langText);
}
// you might cache them if other components added by the router also request them
// this.subjects = {};
// this.ids = []
});
}
}
<dico [text]="dicoService.getDico('someId') | async"></dico>
ngAfterViewInit() {
this.dicoService.sendRequest();
}