We Keep Coding

Embedded Component Not Updating

I am working on a React Native project, and I am currently focused in the Chatroom aspect. Due to user roles, this component is embedded in another component for 2 of the 3 user types, but navigated to (not embedded in anything other than App.js) for the other type.
This means sometimes the app uses the props it was supplied with, and other times it uses the props.route.params?.item syntax to extract information. As is such its difficult to maneuver with useEffects to make sure it works on both sides.
The issue I am facing is with the embedded version of this component. It takes three props, the chatroom, and two booleans that are unrelated to this. The chatroom can change as a GUARDIAN user can see their CHILD user's messages, but they cannot text in them (those are the other two boolean values). From the parent component, users can toggle whether they are the Guardian accessing their own chat, or if they want to view their children' chats. While the all three values change properly (I console.log'd this in the parent component to confirm) the chatroom does not change inside of the embedded component.
I will show you what I mean...
// PARENT COMPONENT //
function renderMessageThread(chat){
console.log("\n\n\n", chat[0].messages.length, "LANDING")
console.log(msgUser.id, isThisChatMine())
return <MessageThread hardCodedChat={chat} hardCoderUserId={msgUser.id} isItMe={isThisChatMine()} />
}
The console.logs show the proper values. Inside the MessageThread component, both hardCoderUserId and isItMe are correct values, even when isItMe changes values. hardCodedChat, however, never has its value changed from the first time it is created. Does anyone have any ideas on how to have this changes as well?

Is there a way to run a specific function before moving or refreshing pages in angular?

When a page is routed to another page or when a user presses the Back, Forward, or Refresh buttons, the alert window is displayed and the user selects Move, and the user wants to proceed with the initialization process.
For unload events, this does not occur in page routing. Attempted to use canDeactivate, but failed to execute a specific function after closing the alert window.
I want to know the detailed method and example.
(I'm not familiar with the anglular)

Yes. I can think of two potential solutions to your problem:
-1- If you are using Angular Material Dialog combined with canDeactivate guard logic there is a built-in method just called like that. It is named beforeClosed. It returns an Observable that you can subscribe to which will notify you when the dialog started closing. Inside this method you can execute your function.
-2- Angular router has an API called events. It essentially helps you track the status of the router. It can detect when the router starts the navigation, ends the navigation, cancels the navigation, resolved the navigation, etc...
For a complete list of API advanced events. Check this documentation link
Cool, with this API you can choose the right event that suits you and put you function inside the condition such as :
checkRouterEventToFireCustomFunctionLogic(){
this.router.events.subscribe((routerEvent) => {
if(routerEvent instanceof NavigationStart) {
// execute my custom function OR
// just console.log("Hello World")
}
});
}
PS: beforeunload event is not really good especially when it comes to Web Vitals bfcache

Call method from sibling component using ReactJS

I have one ReactJS App which I reduced to the minimum as possible on the diagram below:
Side note: On this App I use Redux to manage state changes.
This App contains:
Component: UploadScreen with an image holder and a button. When that button is clicked, the user gets displayed a Popup Window which let him to pick an image from his device file system. Then that image is displayed on the image holder.
Component: AuxWidget which is a totally different component (needs to be separate) which also contains a button that when it is clicked it should popup the Select File window. I was thinking in something like triggering the click event of the first button.
Any idea on how to achieve that?
First I though about using Redux but I think that's not a too good idea because even though you can send messages with it from one component to another, that causes a render update and I don't want that.
Also, I was thinking on using jQuery but that's not the best approach when it comes to ReactJS.
Also, I thought about using the attribute: ref="foo" to get a reference to the other component but I think that's normally done when you want the interaction to be between parent and child components.
Also, I was thinking about EventEmmitter but I don't know if that's the best approach on this case (I'm using Redux to manage the state changes between components).

One of the best ways I can suggest using RxJS, you can create a Subject and pass it to your components. In one component you will need to subscribe to it and whenever you will call next on your subject from the second component, the other will be notified, so you can trigger open popup. You can even create your own implementation for this in case you don't want to add new library to your project.

The upload window could be triggered when a certain state in the app changes. The relevant state on the app could be changed from different places, like from AuxWidget and UploadScreen. That way they are not coupled with the upload window. They merely call a function that is passed to them and that function changes the state on the app and it will display the window.
If you have a shared component between two unrelated component I think it is best to lift that common component and let its state sit on a higher level.

If I understand things correctly, your primary concern is code-reuse as opposed to wanting to call a sibling method. Basically, you want a SelectFilePopup component that can be re-used (open/closed) cleanly. I think React Portals could be a good solution for this. I found a good example (https://github.com/Assortment/react-modal-component/blob/master/src/components/Modal.js) of how a Modal can be isolated into a component and be called anywhere in the codebase.
The usage of the Modal looks like this (copied and slightly modified from App.js in the github project above)
import Modal from './components/Modal';
<Modal><div>Click me to open Modal</div></Modal>
And the Modal component implementation (simplified)
render() {
return (
<Fragment>
<ModalTrigger
onOpen={this.onOpen}
/>
{isOpen &&
<ModalContent/>
}
</Fragment>
)
}
By default the Modal component shows a trigger (i.e button) when isOpen state is false. Once clicked, and isOpen switches to true, the ModalContent (i.e can be the FilePickerPopup) is dynamically created and attached to document body. You can check out the source code for more details. I think its a very clean solution to modals. So in your case, your code could end up looking something like this
UploadScreen.js
import FileSelectPopup from './components/FileSelectPopup';
<FileSelectPopup>{Upload Image}</FileSelectPopup>
AuxWidget.js
import FileSelectPopup from './components/FileSelectPopup';
<FileSelectPopup>{Upload Image or some other text}</FileSelectPopup>
So basically, AuxWidget doesn't even need to know about where the FileSelectPopup is located at. It's an independent component that can be called anywhere. The caveat is that the Modal implementation in the project I linked to is not a singleton (although it can be modified to be one). So if AuxWidget and UploadScreen are visible to the user at the same time, clicking both Upload Image buttons will create two instances of the Popup.

I would define the function in the parent component and pass it to both children as props

React Native/Expo: Event Emitter between screens; trigger refresh

I've scoured this site and various Github issues for a solution but am still a bit stuck. In essence, this is the flow that I desire:
Land on first component/screen, which has some information
Click a button and be pushed to a second component/screen
Do something on this second component/screen
Pop back to first component/screen
Have refreshed information be displayed when we come back to this page
Issues:
Component lifecycles don't work because when I'm popping from the second component to the first component (the parent), there's no component lifecycle method I can call in this case.
Event Emitters won't suffice as a solution because they only work within a single component (is this correct btw?)
Would greatly appreciate any help I can get. Thank you!

In the first component, create a function that will refresh the component by updating the state. Pass the function to the second component and when you pop, call this function.

How can I get buttons in a ListView itemTemplate to perform different actions?

Context: This is specifically a Windows 8 Metro application question based on their HTML/JS framework.
I want to put one or two of the most common secondary actions within the template for my items in a ListView. Think music player. Clicking the name plays the track immediately but I also want an "Add to playlist" button on each row.
When I add a button inside my template, even if I add a handler to that button, the onItemInvoked function for the ListView always gets called and my button's handler never gets called. This would be fine if I could identify from the onItemInvoked CustomEvent what element had been clicked, however the target and sourceElement are always the outer div of the template and never the actual thing that was clicked.
Does anyone have some suggestions on how I can go about making this work? I've seen the samples for selecting an element and presenting the additional options in an appbar but for something as commonly used as "Add to playlist" that's just going to be a poor user experience.

I posted this same identical question on the msdn dev forums in the hope of getting an answer ASAP. Thank you to jpsanders over there who pointed me at win-interactive:
http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/cd5e3b84-8405-4894-9f37-3608e448bae9