how to load new data from api using RefreshIndicator - api

Future<void> _fetchPage(int pageKey) async {
try {
final newItems = await ApiServices.fetchArticleList(pageKey, _pageSize);
final isLastPage = newItems.length < _pageSize;
if (isLastPage) {
_pagingController.appendLastPage(newItems);
} else {
final nextPageKey = pageKey + newItems.length;
_pagingController.appendPage(newItems, nextPageKey);
}
} catch (error) {
print(error);
_pagingController.error = error;
}
}
so, i have method _fetchPage() that loads data from api initially, but on refresh new data are not updated in screen. Any help will be appreciated.

change your onRefresh callback to
onRefresh:()=>_fetchPage(0)
_fetchPage method in your code is expecting a parameter but you are not passing the value. since the onRefresh callback doesn't have any value to pass as parameter to the function

Related

Nuxt constant is assigned a value but never used

I have an Nuxt (Vue2) application which throws me an error:
c:\wamp64-3-2-0\www\test\dynamic_stores\campaign.js
1436:12 error 'campaign' is assigned a value but never used
no-unused-vars 1438:12 error 'campaign' is assigned a value but
never used no-unused-vars 1441:18 error 'campaign' is not defined
no-undef
if( share_token ) {
const campaign = await this.$api.campaigns.getSharedCampaign(share_token);
} else {
const campaign = await this.$api.campaigns.getCampaign(state.id);
}
const data = campaign.data;
Can somebody tell me please what is wrong with this code? Thanks.
You need to declare campaign outside of the if-else statement in order to access it outside of the if-else statement.
Example:
let campaign;
if (share_token) {
campaign = await this.$api.campaigns.getSharedCampaign(share_token);
} else {
campaign = await this.$api.campaigns.getCampaign(state.id);
}
const data = campaign.data;
If it's a method, you can return API calls and you can use response as a result.
handleFetch(){
if(share_token) {
return this.$api.campaigns.getSharedCampaign(share_token);
} else {
return this.$api.campaigns.getCampaign(state.id);
}
}
thank you can use in template or somewhere else with:
handleFetch()

How to count the number of elements in this particular object

I am making a call to an API and the response is somehow what I expect. However, I want to count the number of elements returned and I can not do it. This is what I think is important from the code.
Call in Vue component
data(){
return {
messages: {}
}
},
loadMessages(){
axios.get("api/messagesmenu")
.then((data) => { this.messages = data.data})
}
Api controller
public function index(){
$messages = Message::all()->where('read_at', NULL);
if(isset($messages)){
foreach($messages as $message){
$from = User::find($message->from_id);
$message->fromPrenom = $from->first_name;
$message->fromNom = $from->last_name;
$message->fromImage = $from->user_image;
}
}else{
$messages = [];
}
return $messages;
}
Type of response from the API
{"3":{"id":560,"from_id":2,"to_id":1,"content":"tgr","created_at":"2019-07-15 16:59:03","read_at":null,"fromPrenom":"abdel1","fromNom":"Hidalgo","fromImage":"user2-160x160.png"}}
I want to count the number of objects I obtain. if (in vue component) I do
this.messages.length
it returns undefined
Try this:
const messages = {"3":{"id":560,"from_id":2,"to_id":1,"content":"tgr","created_at":"2019-07-15 16:59:03","read_at":null,"fromPrenom":"abdel1","fromNom":"Hidalgo","fromImage":"user2-160x160.png"}}
console.log(Object.keys(messages).length) // 1
Or in your code:
...
.then((data) => {
this.messages = data.data
console.log(Object.keys(this.messages).length)
})

Flutter: BLoC, testing streams

Testing the bloc pattern is not so clear to me. So, if I have these 2 stream controllers:
final _controller1 = StreamController();
final _controller2 = StreamController<bool>;
Sink get controller1Add = _controller1.sink;
Stream<bool> get controller2Out = _controller2.stream;
and I want to test that, from this function:
submit() {
if (_controller1.value == null ||
_controller1.value.isEmpty) {
print(...)
return;
}else
_controller2.sink.add(true);
}
the _controller2.stream should have true, how should I do?
I tried something like:
test("test", (){
bloc.submit();
expect(bloc.controller2Out, emitsAnyOf([true]));
});
but, of course, it didnĀ“t work.
I've modified your code to use the RxDart's BehaviorSubject and it seems to work. You are using StreamController but I get error cause it doesn't have the value property.
final _controller1 = BehaviorSubject<String>();
final _controller2 = BehaviorSubject<bool>();
Sink get controller1Add => _controller1.sink;
Stream<bool> get controller2Out => _controller2.stream;
submit() {
if (_controller1.value == null || _controller1.value.isEmpty) {
print('Error');
_controller2.sink.add(false);
return;
} else {
print('OK');
_controller2.sink.add(true);
}
}
The test:
bloc.controller1Add.add('');
bloc.submit();
expect(bloc.controller2Out, emits(false));
bloc.controller1Add.add('test');
bloc.submit();
expect(bloc.controller2Out, emits(true));
bloc.controller1Add.add('');
bloc.submit();
expect(bloc.controller2Out, emits(false));

Get JavaScript Array of Objects to bind to .Net Core List of ViewModel

I have a JS Array of Objects which, at time of Post contains three variables per object:
ParticipantId,
Answer,
ScenarioId
During post, there is an Array the size of 8 (at current anyway) which all correctly contain data. When I call post request, the Controller does get hit as the breakpoint triggers, the issue is when I view the List<SurveyResponse> participantScenarios it is shown as having 0 values.
The thing I always struggle to understand is that magic communication and transform between JS and .Net so I am struggling to see where it is going wrong.
My JS Call:
postResponse: function () {
var data = JSON.stringify({ participantScenarios: this.scenarioResponses})
// POST /someUrl
this.$http.post('ScenariosVue/PostScenarioChoices', data).then(response => {
// success callback
}, response => {
// error callback
});
}
My .Net Core Controller
[HttpPost("PostScenarioChoices")]
public async Task<ActionResult> PostScenarioChoices(List<SurveyResponse> participantScenarios)
{
List<ParticipantScenarios> addParticipantScenarios = new List<ParticipantScenarios>();
foreach(var result in participantScenarios)
{
bool temp = false;
if(result.Answer == 1)
{
temp = true;
}
else if (result.Answer == 0)
{
temp = false;
}
else
{
return StatusCode(400);
}
addParticipantScenarios.Add(new ParticipantScenarios
{
ParticipantId = result.ParticipantId,
Answer = temp,
ScenarioId = result.ScenarioId
});
}
try
{
await _context.ParticipantScenarios.AddRangeAsync(addParticipantScenarios);
await _context.SaveChangesAsync();
return StatusCode(201);
}
catch
{
return StatusCode(400);
}
}

jQuery Data table reload

I am using jQuery datatable plugin. I am trying to fetch the record count and based on the count doing some HTML manipulation using jQuery.
So far I have used this code
$('#tb').on('init.dt', function () {
var totalRecords = table.page.info().recordsTotal;
if(totalRecords != 0) {
$('#tb_div').show();
table.columns.adjust().draw();
}else{
$('#tb_div').hide();
$('#no_rec_msg').show();
}
} );
But this init.dt gets executed just once and it doesn't work on table.ajax.reload(); Any API method that would fix this?
Use xhr event instead that will be fired when an Ajax request is completed.
$('#tb').on('xhr.dt', function () {
var totalRecords = table.page.info().recordsTotal;
if(totalRecords != 0) {
$('#tb_div').show();
table.columns.adjust().draw();
} else {
$('#tb_div').hide();
$('#no_rec_msg').show();
}
} );