I've found this comment to match what I'm looking for. It seems to work, for me, perfectly with "console.log". I want to know when a user has left the page:
const getChatRoomId = () => {}
useEffect(() => {
const chatRoomId = getChatRoomId()
if (chatRoomId) {
console.log('----HAS ENTERED /messages/* ------', chatRoomId)
}
// I believe this is not important?
const routeChangeStart = url => {}
// This is very important
const beforeunload = e => {
if (chatRoomId) {
console.log(`---- IS LEAVING /messages/${chatRoomId} ------`)
}
}
window.addEventListener('beforeunload', beforeunload);
Router.events.on('routeChangeStart', routeChangeStart);
return () => {
window.removeEventListener('beforeunload', beforeunload);
Router.events.off('routeChangeStart', routeChangeStart);
};
}, [someStateChangeVariable])
The above works great but using a function inside beforeunload does not work. I've made some searches and one states to "return a string":
[..]
// This is very important
const beforeunload = e => {
if (chatRoomId) {
alert(`---- IS LEAVING /messages/${chatRoomId} ------`)
}
return 'GoodBye!'
}
[..]
Blocked alert('---- IS LEAVING /messages/1 ------') during beforeunload.
I'm using NextJs catch all routes /pages/[...messages] where you can have a page id of "new" or "123" where "123" is the message id and "new" to create a new message. How to trigger a function when a user leaves a page?
You can use router.events methods: NextJS docs.
Also this topic might be relevant.
Related
I'm developing with h5p standalone plugin in react (nextjs), passing the path as prop to a Modal Component which render the h5p activity.
useEffect(() => {
const initH5p = async (contentLocation) => {
const { H5P: H5PStandalone } = require('h5p-standalone')
const h5pPath = `https://cdn.thinkeyschool.com/h5p/${contentLocation}`
const options = {
id: 'THINKeyLesson',
h5pJsonPath: h5pPath,
frameJs: '/h5p/dist/frame.bundle.js',
frameCss: '/h5p/dist/styles/h5p.css',
}
let element = document.getElementById('h5p_container')
removeAllChildNodes(element)
await new H5PStandalone(element, options)
fireCompleteH5PTopic(H5P)
setIsLoaderVisible(false)
}
initH5p(location)
}, [location, session.data.user.id, course.slug, topic])
With that code, I get two h5p rendered in screen. So I'm using removeAllChildren() to eliminate them from the render.
function removeAllChildNodes(parent) {
console.log(parent)
while (parent.firstChild) {
parent.removeChild(parent.firstChild)
}
}
That hack is working fine, but when I try to send the xAPI statement to my database, it fires twice
const fireCompleteH5PTopic = async (H5P) => {
H5P.externalDispatcher.on("xAPI", (event) => {
// console.log('event fired')
if (event?.data?.statement?.result?.completion) {
setCounter(counter + 1)
completeH5PTopic(event, session.data.user.id, course.slug, topic)
return true
}
})
}
Any help regarding why it fires twice? I think it may be related to h5p rendering twice too.
Thanks in advance.
I tried using a state to render only once, but it is not working.
I am attempting to make style class on and off when it is observed, but it works only once. i guess it may be solved with obs.unobserve or obs.disconnect, but i failed to write a code in right way.
Here is the code. (simplified)
useEffect(() => {
const obs = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
$('.class-a').addClass('white');
}
else {
$('.class-a').addClass('black');
}
})
}, { threshold: [0.5] });
obs.observe(document.querySelector('.sub'));
}, [])
You are only querying a single selector. If you want to query more than one, you would have to use document.querySelectorAll().
Edit try this (querying them on their own won't work, have to actually loop through them as well):
const list = document.querySelectorAll('.sub');
list.forEach((el) => {
obs.observe(el);
})
Referring to these mdn docs
Working non-react test: https://codepen.io/shikkaba/pen/eYMVXXX
I'm working an a react app with a few forms and I am trying to implement an edit form for input items. The function first opens the list item in a pre-populated form.
The editItem function currently looks like this:
editItem(event) {
event.preventDefault();
const target = event.target.parentNode.parentNode;
const { key } = target.dataset;
const { className } = target;
const currState = { ...this.state[className] };
const currItem = currState.list[key];
for (let i in currItem) {
if (i !== "list" && i !== "hidden") {
currState[i] = currItem[i]
}
}
this.setState({ [className]: currState });
this.hideUnhide({target: {name: className}});
}
I have confirmed with console logs that currState is correctly set with the values that I am looking for, and that I am not having an async issue. I am using this same format to set state in other functions in my app and all of the others are working properly. If I directly mutate state in the same place, I get the behavior I'm looking for (form fields populate), but nothing happens when I use setState.
Link to my github repo: here. The function in question is in App.js.
As Brian Thompson points out in his comment, it turns out that the hideUnhide function call directly after my setState uses setState as well and writes over the first setState call with the previous state:
hideUnhide(event) {
const { name } = event.target;
const currState = { ...this.state[name] };
if (currState.hidden === true) {
currState.hidden = false;
}
this.setState({ [name]: currState });
}
The way to prevent that was to use hideUnhide as a callback to the setState in editItem:
this.setState({ [className]: currState }, () =>
this.hideUnhide({ target: { name: className } })
);
and now everything functions as intended.
I have been using Google firestore as a database for my projet.
In the collection "paths", I store all the paths I have in my app, which are composed of 2 fields : name, and coordinates (which is an array of objects with coordinates of points).
Anyway, i created a utility file in utils/firebase.js
In the file, i have this function which gets all the paths in my collection and return an array of all documents found :
export const fetchPaths = () => {
let pathsRef = db.collection('paths');
let pathsArray = []
pathsRef.get().then((response) => {
response.docs.forEach(path => {
const {nom, coordonnees } = path.data();
pathsArray.push({ nom: nom, coordonnees: coordonnees})
})
console.log(pathsArray)
return pathsArray;
});
};
In my react component, What i want to do is to load this function in useEffect to have all the data, and then display them. Here is the code I use :
import { addPath, fetchPaths } from './Utils/firebase';
//rest of the code
useEffect(() => {
let paths = fetchPaths()
setLoadedPaths(paths);
}, [loadedPaths])
//.......
The issue here is if I console log pathsArray in the function it's correct, but it never gets to the state.
When i console log paths in the component file, i get undefined.
I am quite new with react, i tried different things with await/async, etc. But I don't know what i am doing wrong here / what i misunderstand.
I know that because of my dependency, i would be supposed to have an infinite loop, but it's not even happening
Thank you for your help
Have a nice day
fetchPaths does not return any result. It should be:
export const fetchPaths = () => {
let pathsRef = db.collection('paths');
let pathsArray = []
return pathsRef.get().then((response) => {
response.docs.forEach(path => {
const {nom, coordonnees } = path.data();
pathsArray.push({ nom: nom, coordonnees: coordonnees})
})
console.log(pathsArray)
return pathsArray;
});
};
note the return statement.
Since the fetchPaths returns a promise, in the effect it should be like following:
useEffect(() => {
fetchPaths().then(paths =>
setLoadedPaths(paths));
}, [loadedPaths])
I am using React. I want to warn the user when the user clicks on the back button.
What I had done was
handleWindowClose = (ev) => {
ev.preventDefault();
return ev.returnValue = 'Leaving this page will loose data';
}
componentDidMount = () => {
window.addEventListener('beforeunload',this.handleWindowClose);
}
componentWillUnmount = () => {
window.removeEventListener('beforeunload',this.handleWindowClose);
}
However, this does not work with a back button click. So I tried doing this:
handleWindowClose = (ev) => {
ev.preventDefault();
return ev.returnValue = 'Leaving this page will loose data';
}
onBackButtonEvent = (e) => {
e.preventDefault();
if (confirm("Do you want to loose this data")) {
window.history.go(0);
}
else {
window.history.forward();
}
}
componentDidMount = () => {
window.addEventListener('beforeunload',this.handleWindowClose);
window.addEventListener('popstate',this.onBackButtonEvent);
}
componentWillUnmount = () => {
window.removeEventListener('beforeunload',this.handleWindowClose);
window.removeEventListener('popstate',this.onBackButtonEvent);
}
I am not using react-router. Is there a better way to do this using only React? Also I want the window to stay on that page without using history.forward() as I will lose the window state.
I am having the below problems when handling the back button in React:
The first popstate event is not being called at the first time
It is called twice after executing my back button custom logic
To solve problem 1, I did the following code:
componentDidMount() {
window.history.pushState(null, null, window.location.pathname);
window.addEventListener('popstate', this.onBackButtonEvent);
}
To solve problem 2, I did the below code:
onBackButtonEvent = (e) => {
e.preventDefault();
if (!this.isBackButtonClicked) {
if (window.confirm("Do you want to save your changes")) {
this.isBackButtonClicked = true;
// Your custom logic to page transition, like react-router-dom history.push()
}
else {
window.history.pushState(null, null, window.location.pathname);
this.isBackButtonClicked = false;
}
}
}
Don't forget to add this.isBackButtonClicked = false; in the constructor and unscubscribe the events.
componentWillUnmount = () => {
window.removeEventListener('popstate', this.onBackButtonEvent);
}
I had a similar issue and fixed that this way:
componentDidUpdate(){
window.onpopstate = (e) => {
// Tour code...
}
}
Try this code:
componentDidMount() {
window.addEventListener("popstate", this.onBackButtonEvent)
}
componentWillUnmount() {
window.removeEventListener("popstate", this.onBackButtonEvent)
}
onBackButtonEvent = () => {
window.history.forward()
}
It looks like onbeforeunload is what you want: check this related question, which contains a useful demo.
Also the MDN documentation contain a useful example.
Assuming you've got some good reason for not wanting to use react-router, I'll sketch the JavaScript way of doing this
It looks like you're capturing the wrong event. You want to grab any change of the URL hash, so you should use onhashchange.
Example from the documentation:
if ("onhashchange" in window) {
alert("The browser supports the hashchange event!");
}
function locationHashChanged() {
if (location.hash === "#somecoolfeature") {
somecoolfeature();
}
}
window.onhashchange = locationHashChanged;
However, I'd give react-router a go, given that you're developing in React. In which case, browserHistory would be your friend.