I have to show notification with custom buttons, right now the buttons are showing but on click of them application is opening. but i don't want to open application rather i have to call an API on click of the button.
These are data only notifications.
Here is my code:
import {AppRegistry, Platform} from 'react-native';
import 'babel-polyfill';
import App from './App';
import {name as appName} from './app.json';
import firebase from 'react-native-firebase';
console.disableYellowBox = true;
const bgMessaging = async(messages) => {
console.log("Message",messages);
const bgNotification = new firebase.notifications.Android.Channel("bgNotification","bgNotification",firebase.notifications.Android.Importance.Max);
firebase.notifications().android.createChannel(bgNotification);
let notification_to_be_displayed = new firebase.notifications.Notification({
show_in_foreground: true,
title: 'Hello Application',
body: 'New Invitation',
android_channel_id:"bgNotification"
});
if (Platform.OS == "android")
{
notification_to_be_displayed
.android.setPriority(firebase.notifications.Android.Priority.High)
.android.setChannelId("bgNotification")
.android.setVibrate(5000);
}
const action = new firebase.notifications.Android.Action('test_action', 'ic_launcher', 'Accept');
notification_to_be_displayed.android.addAction(action);
firebase.notifications().displayNotification(notification_to_be_displayed);
return Promise.resolve();
};
AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage',() => bgMessaging );
AppRegistry.registerComponent(appName, () => App);
Related
I have a simple react app using mqtt-react-hooks and redux. I want to update my redux store each time a new message is received by a Subscriber.
Subscriber.tsx
import React, { useEffect} from 'react';
import { useSubscription } from 'mqtt-react-hooks';
import { useAppDispatch } from '../features/item/hooks';
import { addItem } from '../features/item/item-slice';
const Subscriber = () => {
const { message } = useSubscription('queue');
const dispatch = useAppDispatch();
useEffect(() => {
if (message && message.message) {
dispatch(addItem(JSON.parse(message.message)));
}
}, [message]);
return (
<span>{message}</span>
);
};
export default Subscriber
App.tsx
import React from 'react';
import './App.css';
import {useAppSelector} from './features/item/hooks'
import { Connector } from 'mqtt-react-hooks'
import Subscriber from './mqtt/Subscriber'
function App() {
const items = useAppSelector((state) => state.item.items);
return (
<>
<Connector brokerUrl="ws://localhost:9001"
options={{keepalive: 10}}>
<div className="item-holder">
{Array.from(items, ([key, it]) => ({ key, it })).map( (kvp) => { return <div>{kvp.it} key={kvp.key}></div>})}
</div>
<Subscriber />
</Connector>
</>
);
}
export default App;
If I remove the useEffect from the Subscriber, the message gets received and updated. And I can send as many messages as I want. However, when I call the dispatch(addItem(... inside the useEffect, it will receive the first message, but ignores all future messages. My mosquitto broker says that the client has closed the connection. It never attempts to reconnect.
I'm very new to react. I have a feeling I'm not doing this right at all. What I really want is a redux store that maintains state based off of messages coming from an mqtt topic. The app has buttons that allows the user to publish messages back to the mqtt broker and change the redux state.
EDIT
As requested, here's the addItem code.
import {createSlice, PayloadAction} from '#reduxjs/toolkit'
interface ItemState {
items: Item[],
}
const initialState: ItemState = {
items: []
}
const orderSlice = createSlice({
name: 'items',
initialState,
reducers: {
addItem(state, action: PayloadAction<Item>) {
state.items.push(action.payload);
return state;
}
}
});
export const { addItem } = itemSlice.actions;
export default itemSlice.reducer;
And the useAppDispatch comes from ./features/item/hooks
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import { RootState, AppDispatch } from './item-store'
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
However, I will add that I got rid of this and used the usual useDispatch and useSelector instead of the "useApp____" versions and got the same result.
I believe the issue lies in the mqtt-react-hooks hooks but my react-fu skills are not yet high enough to solve.
It looks like there is a sequence of things happening that is causing Connector to rerender and drop the connection, here's what I think is going on:
App is subscribing to store state, causing it to rerender every time a new message is received.
You're recreating your mqtt config object every time App renders, because you're passing an object literal {keepalive: 10}
In Connector.tsx line 48, the mqttConnect callback depends on the mqtt options object. React does a referential equality check, sees the options have changed, and causes the callback to be recreated.
In Connector.tsx line 59, this causes the useEffect to rerun because the callback changed, which calls its teardown function, which ends the mqtt connection.
To fix it, you should create your MQTT options outside of App so that they don't change.
How to add Loading effect in VUE js plus Laravel.
This is a single page website in vuejs, i want to add loader when i change the route.
Means when i click to another router, it takes time to fetch data and show meanwhile i want to show loader. Or When i submit a form i takes time for submit meanwhile i want to add loader.
Means when i click to another router, it takes time to fetch data and show meanwhile i want to show loader. Or When i submit a form i takes time for submit meanwhile i want to add loader.
Means when i click to another router, it takes time to fetch data and show meanwhile i want to show loader. Or When i submit a form i takes time for submit meanwhile i want to add loader.
Means when i click to another router, it takes time to fetch data and show meanwhile i want to show loader. Or When i submit a form i takes time for submit meanwhile i want to add loader.
Help please in VUE js + Laravel
add this line of code in your app.js file
router.beforeEach((to, from, next) => {
// add loader
next()
})
router.afterEach(() => {
// terminate you loader
})
so Full file is
window.Vue = require('vue');
import VueRouter from 'vue-router';
import VueProgressBar from 'vue-progressbar'
window.Fire = new Vue();
Vue.use(VueProgressBar, {
color: 'rgb(143, 255, 199)', //normal color for progress bar
failedColor: 'red', //color for failed progress bar
height: '2px'//height of progress bar can be changed here
})
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
Vue.use(VueRouter);
window.Fire = new Vue();
let routes = [
{
path: '/',
name: 'posts',
component: post,
},
{
path: '/general',
name: 'dashboard',
component: Dashboard,
},
];
let router = new VueRouter({
routes // short for `routes: routes`
});
router.beforeEach((to, from, next) => {
// add loader
VueProgressBar .start();
next()
})
router.afterEach(() => {
// terminate you loader
VueProgressBar.finish();
})
const app = new Vue({
el: '#app',
router,
data: {},
methods: {}
});
window.Fire = new Vue();
If you are requesting while browsing through the pages, the loader can work accordingly.
<script>
export default {
data: () => ({
loaderIsActive: false,
items: null,
}),
mounted() {
this.fetch();
},
methods: {
async fetch() {
this.loaderIsActive = true;
this.items = await axios.post('YOUR API');
this.loaderIsActive = false;
}
}
}
In this way you can use it.
I am following these 2 samples:
Webchat with react
Programmatic post activity
My bot is working ok. I can send and process activities via directline. My test helpButton logs ok, but there is no actual 'help' message sent when I click the button like in the sample.
var mainBotConnection;
const { createStore, ReactWebChat } = window.WebChat;
const { createProvider } = window.ReactRedux;
const Provider = createProvider('webchat');
const Store = createStore();
// get a token
const RequestToken = async (user) => {
...
};
(async function () {
RequestToken(agent)
.then(token => {
//init main chat bot
mainBotConnection = window.WebChat.createDirectLine({token: token});
...
//grab mainbot placeholder and put it on screen
window.ReactDOM.render(
<Provider store={Store}>
<ReactWebChat
directLine={mainBotConnection}
storeKey='webchat'
userID={user.id}
username={user.name}
styleOptions={mainBotStyleOptions}
/>
</Provider>,
document.getElementById('webchat'));
// this message does not appear
Store.dispatch({
type: 'WEB_CHAT/SEND_MESSAGE',
payload: { text: 'StartUp hello!' }
});
});
// test button
document.querySelector('#helpButton').addEventListener('click', () => {
// this is successfully logged
console.log(`help button clicked`);
// 'help' text does not appear in bot
Store.dispatch({
type: 'WEB_CHAT/SEND_MESSAGE',
payload: { text: 'help' }
});
// this is also successfully logged
console.log(Store);
});
document.querySelector('#webchat').focus();
})().catch(err => console.error(err));
You need to add store={Store} to your ReactWebChat component:
[...]
<Provider store={Store}>
<ReactWebChat
directLine={mainBotConnection}
storeKey='webchat'
userID={user.id}
username={user.name}
styleOptions={mainBotStyleOptions}
store={Store} // ADD THIS PART
/>
</Provider>,
[...]
That being said, without the rest of your code, I wasn't able to test this exactly. Instead, I started up the React with Redux Sample. If I removed store={Store}, it didn't work, but if I left it in there, it worked just fine and sent both the welcome and help messages. You may also need: <Provider store={ store } key='webchat'>, but like I said, I wasn't able to test your exact code.
I have an app I have inherited that is getting data from an API endpoint. We have found that when we change data on the API, the changes are not reflected in the app. If we uninstall and re-install the app on a mobile device, then the new data from the API is displayed. Here is an example of the Building Detail page:
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from "#angular/router";
import { switchMap } from 'rxjs/operators';
import { Building } from "../shared/building/building";
import { HttpService } from "../services/http/http.service";
import {
getString,
setString
} from "application-settings";
#Component({
moduleId: module.id,
selector: 'building-detail',
templateUrl: 'building-detail.component.html',
styleUrls: ["./building-detail-common.css"],
providers: [ Building, HttpService ]
})
export class BuildingDetailComponent implements OnInit {
paramName: string;
constructor(
private route: ActivatedRoute,
public building: Building,
private httpService: HttpService) {
this.route.params.subscribe(
(params) => {
this.paramName = params['name']
}
);
}
ngOnInit() {
console.log("ON INIT FIRED " + this.paramName);
let buildingInfo = JSON.parse(getString("buildingInfo"));
for (let item of buildingInfo) {
if (item.attributes.title === this.paramName) {
this.building.name = item.attributes.title;
this.building.desc = item.attributes.body.value;
let imageEndpoint = "file/file/" + item.relationships.field_building_image.data.id;
let imageUrl = this.httpService.getData(imageEndpoint)
.subscribe(data => {
this.building.image = "https://nav.abtech.edu" + data['data'].attributes.url;
console.log("The building image URL is " + this.building.image);
}, (error) => {
console.log("Error is " + error);
});
}
}
}
}
I am happy to share other files/code if you would like to look at those. Thanks!
The reason your data is not being updated is not because the ngOnInit is not being executed, it's because you're caching the old value and reloading it each time the app is run. You're caching the data persistently across app runs with appSettings and that's why you are seeing the values stay the same until you uninstall.
If you don't want to show a cached value then don't read from the app settings, or at least don't read from appSettings until you've refreshed the data once.
ngOnInit is something that is executed only when your component is created, it will never be executed again.
Also there is difference between app launch and resume, if you want to update data every time when user opens the app, you should listen to resume event and perform apis calls inside ngZone
You may even use push notification / data message if you want to notify user immediately when data changes on backend
I am busy with a little proof of concept where basically the requirement is to have the home page be a login screen when a user has not logged in yet, after which a component with the relevant content is shown instead when the state changes upon successful authentication.
I have to state upfront that I am very new to react and redux and am busy working through a tutorial to get my skills up. However, this tutorial is a bit basic in the sense that it doesn't deal with connecting with a server to get stuff done on it.
My first problem was to get props to be available in the context of the last then of a fetch as I was getting an error that this.props.dispatch was undefined. I used the old javascript trick around that and if I put a console.log in the final then, I can see it is no longer undefined and actually a function as expected.
The problem for me now is that nothing happens when dispatch is called. However, if I manually refresh the page it will display the AuthenticatedPartialPage component as expected because the localstorage got populated.
My understanding is that on dispatch being called, the conditional statement will be reavaluated and AuthenticatedPartialPage should display.
It feels like something is missing, that the dispatch isn't communicating the change back to the parent component and thus nothing happens. Is this correct, and if so, how would I go about wiring up that piece of code?
The HomePage HOC:
import React from 'react';
import { createStore, combineReducers } from 'redux';
import { connect } from 'react-redux';
import AuthenticatedPartialPage from './partials/home-page/authenticated';
import AnonymousPartialPage from './partials/home-page/anonymous';
import { loggedIntoApi, logOutOfApi } from '../actions/authentication';
import authReducer from '../reducers/authentication'
// unconnected stateless react component
const HomePage = (props) => (
<div>
{ !props.auth
? <AnonymousPartialPage />
: <AuthenticatedPartialPage /> }
</div>
);
const mapStateToProps = (state) => {
const store = createStore(
combineReducers({
auth: authReducer
})
);
// When the user logs in, in the Anonymous component, the local storage is set with the response
// of the API when the log in attempt was successful.
const storageAuth = JSON.parse(localStorage.getItem('auth'));
if(storageAuth !== null) {
// Clear auth state in case local storage has been cleaned and thus the user should not be logged in.
store.dispatch(logOutOfApi());
// Make sure the auth info in local storage is contained in the state.auth object.
store.dispatch(loggedIntoApi(...storageAuth))
}
return {
auth: state.auth && state.auth.jwt && storageAuth === null
? state.auth
: storageAuth
};
}
export default connect(mapStateToProps)(HomePage);
with the Anonymous LOC being:
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { loggedIntoApi } from '../../../actions/authentication';
export class AnonymousPartialPage extends React.Component {
constructor(props) {
super(props);
}
onSubmit = (e) => {
e.preventDefault();
const loginData = { ... };
// This is where I thought the problem initially occurred as I
// would get an error that `this.props` was undefined in the final
// then` of the `fetch`. After doing this, however, the error went
// away and I can see that `props.dispatch is no longer undefined
// when using it. Now though, nothing happens.
const props = this.props;
fetch('https://.../api/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(loginData)
})
.then(function(response) {
return response.json();
})
.then(function(data) {
if(data && data.jwt) {
props.dispatch(loggedIntoApi(data));
localStorage.setItem('auth', JSON.stringify(data));
}
// else show an error on screen
});
};
render() {
return (
<div>
... onSubmit gets called successfully somewhere in here ...
</div>
);
}
}
export default connect()(AnonymousPartialPage);
the action:
// LOGGED_INTO_API
export const loggedIntoApi = (auth_token) => ({
type: 'LOGGED_INTO_API',
auth: auth_token
});
// LOGGED_OUT_OF_API
export const logOutOfApi = (j) => ({
type: 'LOG_OUT_OF_API'
});
and finally the reducer:
const authDefaultState = { };
export default (state = authDefaultState, action) => {
switch (action.type) {
case 'LOGGED_INTO_API':
// SOLUTION : changed this line "return action.auth;" to this:
return { ...action.auth, time_stamp: new Date().getTime() }
case 'LOG_OUT_OF_API':
return { auth: authDefaultState };
default:
return state;
}
};
My suggestion would be to make sure that the state that you are changing inside Redux is changing according to javascript's equality operator!. There is a really good answer to another question posted that captures this idea here. Basically, you can't mutate an old object and send it back to Redux and hope it will re-render because the equality check with old object will return TRUE and thus Redux thinks that nothing changed! I had to solve this issue by creating an entirely new object with the updated values and sending it through dispatch().
Essentially:
x = {
foo:bar
}
x.foo = "baz"
dispatch(thereWasAChange(x)) // doesn't update because the x_old === x returns TRUE!
Instead I created a new object:
x = {
foo:"bar"
}
y = JSON.parse(JSON.stringify(x)) // creates an entirely new object
dispatch(thereWasAChange(y)) // now it should update x correctly and trigger a rerender
// BE CAREFUL OF THE FOLLOWING!
y = x
dispatch(thereWasAChange(y)) // This WON'T work!!, both y and x reference the SAME OBJECT! and therefore will not trigger a rerender
Hope this helps!