In a component, I show a list of subscribable items. Every item can be subscribed by clicking on a SubscribeButton element. The subscribed items are also listed in the left global navigation menu (customized menu invoked in layout.tsx). Therefore, after the subscription is effected, the navigation menu has to be updated by refetching it from the api. (Updating the menu via optimistic rendering is not an option / needed). Fetching the navigation menu is done in the CustomMenuComponent by a custom useGetMenu-hook.
I'm wondering how I could trigger the menu refetch from inside my SubscribeButton component?
Related
I'm making a scheduler app that receive notification.
I tries to make an action for notification, when it clicks it will go to my schedule page.
I use navigation component to make this app, and the problem occur when i try to explicit deep-link to schedule page.
when i want to click home buttom navigation bar, i can't go to that place like it's not gonna happen.
but, when i click back button from schedule page, it'll navigate to home, and from that i was be able to click home button.
i think it's because the start destination change from home to schedule page, but im not sure.
here's my code:
val pendingIntent = NavDeepLinkBuilder(context)
.setGraph(R.navigation.main_navgraph)
.setDestination(R.id.action_schedule)
.createPendingIntent()
val builder = NotificationCompat.Builder(context, SCHEDULE_CHANNEL_ID)
.setSmallIcon(R.drawable.ic_launcher_foreground)
.setContentTitle(title)
.setContentText(dateTime)
.setSound(soundUri)
.setContentIntent(pendingIntent)
.setPriority(NotificationCompat.PRIORITY_HIGH)
I appreciate all the help!
So basically here's what's going on, I have two navigation flows:
Products flow: I have a StackNavigator with two screens, the first rendering a list of all products in the stock, clicking on one product item would take you to the details screen as expected.
Admin flow: I have another StackNavigator where I'm rendering user products, basically the products that were added by the user (admin) into the stock, he can also add new products, delete, edit existing products. Any changes made by the user to his own products will be reflected in the products flow also since the global state will be updated.
Note: The two flows are conntected and accessible using a DrawerNavigator.
My issue
When the user opens the details screen after clicking on one of his own products and then navigates to the admin flow and deletes that product, I get an on error in the details screen because it's trying to render a javascript object that doesn't exist anymore which of course makes perfect sense.
My solution
So I figured since this error occurs only when the details screen has been already opened, meaning it's already in the navigation state's history, Im attempting to solve the problem by checking if the details screen is present in the routes array each time the delete button is clicked, if it's present, meaning the screen is loaded in memory, I try resetting the navigation state by keeping the previous state as it is and simply filtering out the details screen from the previous routes array and setting the new array as the new routes property.
Here's the code that attempts to reset the navigation state each time the delete button is clicked
navigation.dispatch(state => {
const routes = state.routes.filter(
route => route.name !== 'ProductDetail',
);
return CommonActions.reset({
...state,
routes: routes,
});
});
The problem is when I click on the delete button I get the following error
TypeError: undefined is not an object (evaluating 'action.target')
So where am I missing something? Any insight at all would be much apperciated.
I have a use case where I am using stack navigator. I have a homepage where I have some aggregated data and a list which are retrieved from an API.
On clicking on a list item I move to a screen which has more details of that item. There I can add entries for that item. When entries are added using a form, both the homepage as well as the item specific screen need to be updated, which means I need to call the API's again to fetch data. In case no transactions are added I was to avoid this.
What should be the best practice here? should I pass a state variable from homepage and whenever it is updated refresh the screens?
Currently, I am using a willFocus listener, and it makes an API call each time I am on one of these screens. I believe that there can be a better approach than this.
I neet to create registration/login popup.
The header component is on all pages.
I have login btn in header.
I have page /login/register with a slot BodyContentSlot-register
I don’t know how many components can be added to BodyContentSlot-register, but I need to click on the icon in the header to show the registration form in a modal window without going to the registration page. And show in a modal window all the components of this slot.
To achieve directly what you've described:
In the modal:
you need to make a call using CMS service to get page data (that calls backend for CMS page data) OR get the data if you've loaded it before (as an optimizaiton only)
display the slot's content you want to show, i.e. using cx-page-slot component statically in your modal and passing the position as an input
The tricky part is that this component gets from CmsService the slots of the current page, i.e. cart page (based on routing /cart), but not the page data you've loaded programatically in your modal. So you need to customize CmsService to return you the CMS data for specific slot of given page (register), even if it's not a part of current page data.
In my Durandal app, I have a search page - I'd like to:
Load a clean search page when it's loaded from the menu (router.navigate('#/search'))
When navigating to an item from the search page, then using the back button, this should return to the original search result & criteria.
I'm also storing my search criteria & results as a (app-wide) singleton, which is injected to the view model via RequireJS.
Am I able to: distinguish how the user entered the page? I can see that the activate() lifecycle call is triggered under both entry methods.
If you want to know if the user landed to the search page by clicking a link/button from your app or by visiting by entering a url/back button, what I would do is to raise an event when the user clicks on the link/button and on the search page check if the event has been raised or pass some parameter in router.navigate.
I have been recently doing some work on distinguishing a user click from within the application and a back or forward button from the browser. If you are using router.navigate() to navigate around the Durandal application the router.explicitNavigation flag is set to true. But you would want to capture this before the 'router:navigation:complete' event in 'router:route:activating' event as the flag gets set back to false on 'router:navigation:complete' event.
Bottom line is if you are using router.navigate to navigate around the application the router.explicitNavigation property will be set to true and if navigation is triggered using the back/forward button in the browser router.explicitNavigation will be set to false.
In actual case you might not even need to perform router.navigate() to distinguish between an in app navigation and a browser back/forward because Durandal's router module listens to all 'a' tag click on the document level and sets the explicitNavigation flag to true. However I haven't tested this fully.