I'm writing a custom hook to prevent a user from navigating away if there's unsaved information (in a form) on a page.
To do this, I want to emit a router event when a route change has been cancelled. However, router.events.emit('routeChangeStart') causes a a type error TypeError: Cannot read properties of undefined (reading 'shallow')
import { useRouter } from 'next/router'
import { useEffect, useCallback } from 'react'
export default function usePreventWindowUnload(preventDefault: boolean) {
const confirmMessage = 'Are you sure?'
const router = useRouter()
const onRouterChangeStart = useCallback(() => {
if (preventDefault) {
if (window.confirm(confirmMessage)) {
return true
}
}
// line causing error
router.events.emit('routeChangeError')
throw 'cancelled route change'
,} [preventDefault])
useEffect(() => {
router.events.on('routeChangeStart', onRouteChangeStart)
return () => {
router.events.off('routeChangeStart', onRouteChangeStart)
}
}, [preventDefault])
}
How do I fix this?
Related
I want to test if "onLogin" event emitted from child component will trigger "toLogin" function from parent correctly.
Login.vue
<template>
<ChildComponent
ref="child"
#onLogin="toLogin"
/>
</template>
<script>
import { useAuthStore } from "#/stores/AuthStore.js"; //import Pinia Store
import { userLogin } from "#/service/authService.js"; // import axios functions from another js file
import ChildComponent from "#/components/ChildComponent.vue";
export default {
name: "Login",
components: {
ChildComponent,
},
setup() {
const AuthStore = useAuthStore();
const toLogin = async (param) => {
try {
const res = await userLogin (param);
AuthStore.setTokens(res);
} catch (error) {
console.log(error);
}
};
}
</script>
login.spec.js
import { describe, it, expect, vi, beforeAll } from 'vitest';
import { shallowMount, flushPromises } from '#vue/test-utils';
import { createTestingPinia } from "#pinia/testing";
import Login from "#/views/user/Login.vue"
import { useAuthStore } from "#/stores/AuthStore.js";
describe('Login', () => {
let wrapper = null;
beforeAll(() => {
wrapper = shallowMount(Login, {
global: {
plugins: [createTestingPinia({ createSpy: vi.fn })],
},
});
})
it('login by emitted events', async () => {
const AuthStore = useAuthStore();
const loginParam = {
email: 'dummy#email.com',
password: '12345',
};
const spyOnLogin = vi.spyOn(wrapper.vm, 'toLogin');
const spyOnStore = vi.spyOn(AuthStore, 'setTokens');
await wrapper.vm.$refs.child.$emit('onLogin', loginParam);
await wrapper.vm.$nextTick();
await flushPromises();
expect(spyOnLogin).toHaveBeenCalledOnce(); // will not be called
expect(spyOnStore).toHaveBeenCalledOnce(); // will be called once
})
}
I expected both "spyOnLogin" and "spyOnStore" will be called once from emitted event, however, only "spyOnStore" will be called even though "spyOnStore" should only be called after "spyOnLogin" has been triggered.
The error message is:
AssertionError: expected "toLogin" to be called once
❯ src/components/__tests__:136:24
- Expected "1"
+ Received "0"
What do I fail to understand about Vitest & Vue-Test-Utils?
You shouldn't mock your toLogin method because its part of Login component which you are testing. Therefore, instead of expecting if toLogin has been called, you should check if instructions inside are working correctly.
In your case i would only test if after emit, userLogin and AuthStore.setTokens has been called.
I would like to know what is the current route so that I can compute the size of the sidebar.
import { defineStore } from 'pinia'
export const useSidebarStore = defineStore('sidebar', {
state: () => {
return {
full: true // can be toggled by clicking on the sidebar toggle button
}
},
getters: {
// TODO secondarySidebar is open if current route is settings
// secondarySidebarOpen: (state) =>
// TODO create a getter that returns the current route
currentRoute (state, getters, rootState, rootGetters) {
return
}
},
actions: {
}
})
export default useSidebarStore
Can you please help?
A solution I found is to store the current route to the state of the store by using beforeEach method of the router.
import { createRouter, createWebHistory } from 'vue-router'
import routes from '#/router/routes.js'
import { useSidebarStore } from '#/stores/sidebar.js'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
})
router.beforeEach(async (to) => {
const sidebarStore = useSidebarStore()
sidebarStore.currentRoutePath = to.path
return true
})
export default router
I have a kanban app build with Next.js. I currently have two boards:
{"name": "New Board", "id": "6db0ceec-d371-4b53-8065-2eeebac4694a"}
{"name": "tired": "cc41d33e-43a1-49bd-8b76-18e46417b27a"}
I have a menu which maps over next Link, rendering links like so:
<Link href={`/board/${board.id}`}>{board.name}</Link>
I then have the following:
src/pages/board/[boardId].js (page)
src/pages/api/board/[boardId].js (API end point)
In the page, I've defined an async function which sends a GET request to the end point that retrieves the data. For SSR, it's called in getServerSideProps() (this would be called when a user navigates to a specific board page from another part of the app). For client-side, I call this in an effect. (This is called when the user is already on the board page but they select a different board from the menu).
The issue I am having is figuring out the correct Next.js idiomatic way to get the new id from the route when it is changed. I've tried using router.query and router.asPath. However, it often gives me the old value (before the route changed). The only way I am reliably able to get the correct param when the route changes is to use window.location.pathname.split('/')[2].
I will include the source code for the page as well as some console.log() output which will show how the three methods of getting the id from the route are inconsistent (window is always correct) as I switch back and forth between the two boards by clicking the Links in the menu:
// src/pages/board/[boardId].js
import React, { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'
import supabase from 'Utilities/SupabaseClient'
import Board from 'Components/Screens/Board/Board'
import { useRouter } from 'next/router'
import axios from 'axios'
import { getBaseUrl } from 'Utilities'
import { hydrateTasks } from 'Redux/Reducers/TaskSlice'
const BoardPage = (props) => {
const router = useRouter()
const dispatch = useDispatch()
async function handleRouteChange() {
const { asPath } = router
const { boardId } = router.query // sometimes this does not update!
const idFromWindow = window.location.pathname.split('/')[2]
const { board, tasks } = await handleFetchData({boardId: idFromWindow})
console.log(`hello from handleRouteChange:\n\nFrom window: ${idFromWindow}\n\nFrom router.query: ${boardId}\n\nFrom router.asPath: ${asPath}`)
dispatch(hydrateTasks({board, tasks}))
}
useEffect(() => {
//subscribe
router.events.on('routeChangeComplete', handleRouteChange);
//unsubscribe
return () => router.events.off('routeChangeComplete', handleRouteChange);
}, [ router.events]);
return (
<Board {...props}/>
)
}
const handleFetchData = async ({boardId, req}) => {
const baseUrl = getBaseUrl(req)
return axios.get(`${baseUrl}/api/board/${boardId}`)
.then(({data}) => data)
.catch(err => { console.log(err)})
}
export async function getServerSideProps ({ query, req }) {
const { user } = await supabase.auth.api.getUserByCookie(req)
if (!user) {
return { props: {}, redirect: { destination: '/signin' } }
}
const { boardId } = query
const { board, tasks} = await handleFetchData({boardId, req})
return { props: { user, board, tasks } }
}
export default BoardPage
Starting from the "tired" board, I click back and forth between "New Board" and "tired". Observe the console output. The window is always correct. The router is frequently wrong:
// click 1
[boardId].js?0a51:19 hello from handleRouteChange:
From window: 6db0ceec-d371-4b53-8065-2eeebac4694a
From router.query: cc41d33e-43a1-49bd-8b76-18e46417b27a
From router.asPath: /board/cc41d33e-43a1-49bd-8b76-18e46417b27a
// click 2
[boardId].js?0a51:19 hello from handleRouteChange:
From window: cc41d33e-43a1-49bd-8b76-18e46417b27a
From router.query: cc41d33e-43a1-49bd-8b76-18e46417b27a
From router.asPath: /board/cc41d33e-43a1-49bd-8b76-18e46417b27a
// click 3
[boardId].js?0a51:19 hello from handleRouteChange:
From window: 6db0ceec-d371-4b53-8065-2eeebac4694a
From router.query: cc41d33e-43a1-49bd-8b76-18e46417b27a
From router.asPath: /board/cc41d33e-43a1-49bd-8b76-18e46417b27a
// click 4
[boardId].js?0a51:19 hello from handleRouteChange:
From window: cc41d33e-43a1-49bd-8b76-18e46417b27a
From router.query: cc41d33e-43a1-49bd-8b76-18e46417b27a
From router.asPath: /board/cc41d33e-43a1-49bd-8b76-18e46417b27a
I'm new to Next.js, so it's possible I am going about this the wrong way...
How I have done this is -
Suppose I have a page called localhost:3000/board
I have done this with state, and not with [boardId] (lets called this state as boardId and initialvalue be null)
Suppose a user from anywhere in the app visit this page, using the Link
<Link href="/board">
Go To Board
</Link>
on the page mount I try to read the value of boardId from url such as -
useEffect(() => {
if (router.query && router.query.boardId )
{
setBoardId(router.query.boardId);
}
}, []);
and if fount I set the state of boardId, also I do this to get the data from API
useEffect(() => {
if (boardId) getBoardIdDataFromApi();
}, [boardId] );
In the above Case the board Id will be null as I'm not passing any Id as params to the url. (In my case I create a new board here)
Case 2 - suppose a User visit this board page with something like this, from anywhere in the page -
<Link
href={{
pathname: "/board",
query: { boardId: boardId },
}}
>
this time url will be like
localhost:3000?boardId=AnyBoardId
and this will load the Id and get actual data from the api, or change the layout accodringingly.
useEffect(() => {
if (router.query && router.query.boardId )
{
setBoardId(router.query.boardId);
}
}, []);
Case - 3
Now when a user change the boaardId fromt being on the page itself, you can do -
const onChangeBoard = (v) => {
router.push('/board?boardId=${v}', undefined, { shallow: true })
setboardId(v);
}
This will upadte the state of boardId and fetch the data once the user chooses a different board and update the url.
I'm experimenting with {shallow:true}, and I have all the data fetching mechanisms on the client side.
For you -
you can block getServerSideProps for Case 1
Use getServerSideProps for case 2
For case 3, if you remove shallow, you can again use getServerSideProps but please verify.
This may not be the exact answer. but can help you to understand the logic
Okay I got this working by checking the effect to:
useEffect(() => {
async function handleRouteChange() {
const { boardId } = router.query
const { board, tasks } = await handleFetchData({ boardId })
dispatch(hydrateTasks({ board, tasks }))
}
handleRouteChange()
}, [router])
Here is the complete code for the page now:
// src/pages/board/[boardId].js
import React, { useEffect } from 'react'
import { useDispatch } from 'react-redux'
import supabase from 'Utilities/SupabaseClient'
import Board from 'Components/Screens/Board/Board'
import { useRouter } from 'next/router'
import axios from 'axios'
import { getBaseUrl } from 'Utilities'
import { hydrateTasks } from 'Redux/Reducers/TaskSlice'
const BoardPage = (props) => {
const router = useRouter()
const dispatch = useDispatch()
useEffect(() => {
async function handleRouteChange() {
const { boardId } = router.query
const { board, tasks } = await handleFetchData({ boardId })
dispatch(hydrateTasks({ board, tasks }))
}
handleRouteChange()
}, [router])
return (
<Board {...props}/>
)
}
const handleFetchData = async ({boardId, req}) => {
const baseUrl = getBaseUrl(req)
return axios.get(`${baseUrl}/api/board/${boardId}`)
.then(({data}) => data)
.catch(err => { console.log(err)})
}
export async function getServerSideProps ({ query, req }) {
const { user } = await supabase.auth.api.getUserByCookie(req)
if (!user) {
return { props: {}, redirect: { destination: '/signin' } }
}
const { boardId } = query
const { board, tasks} = await handleFetchData({boardId, req})
return { props: { user, board, tasks } }
}
export default BoardPage
I would like to detect when the user leaves the page Next JS. I count 3 ways of leaving a page:
by clicking on a link
by doing an action that triggers router.back, router.push, etc...
by closing the tab (i.e. when beforeunload event is fired
Being able to detect when a page is leaved is very helpful for example, alerting the user some changes have not been saved yet.
I would like something like:
router.beforeLeavingPage(() => {
// my callback
})
I use 'next/router' like NextJs Page for disconnect a socket
import { useEffect } from 'react'
import { useRouter } from 'next/router'
export default function MyPage() {
const router = useRouter()
useEffect(() => {
const exitingFunction = () => {
console.log('exiting...');
};
router.events.on('routeChangeStart', exitingFunction );
return () => {
console.log('unmounting component...');
router.events.off('routeChangeStart', exitingFunction);
};
}, []);
return <>My Page</>
}
router.beforePopState is great for browser back button but not for <Link>s on the page.
Solution found here: https://github.com/vercel/next.js/issues/2694#issuecomment-732990201
... Here is a version with this approach, for anyone who gets to this page
looking for another solution. Note, I have adapted it a bit further
for my requirements.
// prompt the user if they try and leave with unsaved changes
useEffect(() => {
const warningText =
'You have unsaved changes - are you sure you wish to leave this page?';
const handleWindowClose = (e: BeforeUnloadEvent) => {
if (!unsavedChanges) return;
e.preventDefault();
return (e.returnValue = warningText);
};
const handleBrowseAway = () => {
if (!unsavedChanges) return;
if (window.confirm(warningText)) return;
router.events.emit('routeChangeError');
throw 'routeChange aborted.';
};
window.addEventListener('beforeunload', handleWindowClose);
router.events.on('routeChangeStart', handleBrowseAway);
return () => {
window.removeEventListener('beforeunload', handleWindowClose);
router.events.off('routeChangeStart', handleBrowseAway);
};
}, [unsavedChanges]);
So far, it seems to work pretty reliably.
Alternatively you can add an onClick to all the <Link>s yourself.
You can use router.beforePopState check here for examples
I saw two things when coding it :
Knowing when nextjs router would be activated
Knowing when specific browser event would happen
I did a hook that way. It triggers if next router is used, or if there is a classic browser event (closing tab, refreshing)
import SingletonRouter, { Router } from 'next/router';
export function usePreventUserFromErasingContent(shouldPreventLeaving) {
const stringToDisplay = 'Do you want to save before leaving the page ?';
useEffect(() => {
// Prevents tab quit / tab refresh
if (shouldPreventLeaving) {
// Adding window alert if the shop quits without saving
window.onbeforeunload = function () {
return stringToDisplay;
};
} else {
window.onbeforeunload = () => {};
}
if (shouldPreventLeaving) {
// Prevents next routing
SingletonRouter.router.change = (...args) => {
if (confirm(stringToDisplay)) {
return Router.prototype.change.apply(SingletonRouter.router, args);
} else {
return new Promise((resolve, reject) => resolve(false));
}
};
}
return () => {
delete SingletonRouter.router.change;
};
}, [shouldPreventLeaving]);
}
You just have to call your hook in the component you want to cover :
usePreventUserFromErasingContent(isThereModificationNotSaved);
This a boolean I created with useState and edit when needed. This way, it only triggers when needed.
You can use default web api's eventhandler in your react page or component.
if (process.browser) {
window.onbeforeunload = () => {
// your callback
}
}
Browsers heavily restrict permissions and features but this works:
window.confirm: for next.js router event
beforeunload: for broswer reload, closing tab or navigating away
import { useRouter } from 'next/router'
const MyComponent = () => {
const router = useRouter()
const unsavedChanges = true
const warningText =
'You have unsaved changes - are you sure you wish to leave this page?'
useEffect(() => {
const handleWindowClose = (e) => {
if (!unsavedChanges) return
e.preventDefault()
return (e.returnValue = warningText)
}
const handleBrowseAway = () => {
if (!unsavedChanges) return
if (window.confirm(warningText)) return
router.events.emit('routeChangeError')
throw 'routeChange aborted.'
}
window.addEventListener('beforeunload', handleWindowClose)
router.events.on('routeChangeStart', handleBrowseAway)
return () => {
window.removeEventListener('beforeunload', handleWindowClose)
router.events.off('routeChangeStart', handleBrowseAway)
}
}, [unsavedChanges])
}
export default MyComponent
Credit to this article
this worked for me in next-router / react-FC
add router event handler
add onBeforeUnload event handler
unload them when component unmounted
https://github.com/vercel/next.js/issues/2476#issuecomment-563190607
You can use the react-use npm package
import { useEffect } from "react";
import Router from "next/router";
import { useBeforeUnload } from "react-use";
export const useLeavePageConfirm = (
isConfirm = true,
message = "Are you sure want to leave this page?"
) => {
useBeforeUnload(isConfirm, message);
useEffect(() => {
const handler = () => {
if (isConfirm && !window.confirm(message)) {
throw "Route Canceled";
}
};
Router.events.on("routeChangeStart", handler);
return () => {
Router.events.off("routeChangeStart", handler);
};
}, [isConfirm, message]);
};
I need a custom hook that uses Redux's state. If you were to pass the state from a React component to the function it would look something like:
Custom hook:
function useMyCustomHook(state) {
const { message } = state;
const handleClick = () => {
if(environment_variable) {
// do something with message
} else {
// do something else with message
}
}
return handleClick;
}
My component:
const MyComponent = ({ state }) => {
return <button onClick={()=> useMyCustomHook(state) }>Go</button>
}
It's a bit of a pain to have to pass Redux's state from the React component every time. Is it possible to access the state directly in the custom hook?
With the latest versions of react-redux you could use useSelector hook.
Also note that a hook is not supposed to be called on an handler
import { useSelector } from 'react-redux';
function useMyCustomHook() {
const message = useSelector(state => state.message);
const handleClick = () => {
if(environment_variable) {
// do something with message
} else {
// do something else with message
}
}
return handleClick;
}
and it will be used like
const MyComponent = ({ state }) => {
const handleClick = useMyCustomHook();
return <button onClick={handleClick}>Go</button>
}