♻️(frontend) use next/router instead of next/navigation

The last upgrade of next.js gives a warning
when we were using next/navigation with the
pages router.
This commit fixes this issue.
This commit is contained in:
Anthony LC
2024-11-14 16:31:58 +01:00
committed by Anthony LC
parent a8362e8e88
commit f266232b5a
7 changed files with 17 additions and 19 deletions

View File

@@ -5,7 +5,7 @@ import { AppWrapper } from '@/tests/utils';
import Page from '../pages'; import Page from '../pages';
jest.mock('next/navigation', () => ({ jest.mock('next/router', () => ({
useRouter() { useRouter() {
return { return {
push: jest.fn(), push: jest.fn(),

View File

@@ -1,5 +1,4 @@
import { Alert, Loader, VariantType } from '@openfun/cunningham-react'; import { Alert, Loader, VariantType } from '@openfun/cunningham-react';
import { useRouter as useNavigate } from 'next/navigation';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@@ -100,7 +99,7 @@ export const DocVersionEditor = ({ doc, versionId }: DocVersionEditorProps) => {
}); });
const { createProvider, providers } = useDocStore(); const { createProvider, providers } = useDocStore();
const navigate = useNavigate(); const { replace } = useRouter();
useEffect(() => { useEffect(() => {
if (!version?.id) { if (!version?.id) {
@@ -115,7 +114,7 @@ export const DocVersionEditor = ({ doc, versionId }: DocVersionEditorProps) => {
if (isError && error) { if (isError && error) {
if (error.status === 404) { if (error.status === 404) {
navigate.replace(`/404`); void replace(`/404`);
return null; return null;
} }

View File

@@ -7,7 +7,7 @@ import {
useToastProvider, useToastProvider,
} from '@openfun/cunningham-react'; } from '@openfun/cunningham-react';
import { t } from 'i18next'; import { t } from 'i18next';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/router';
import { Box, Text, TextErrors } from '@/components'; import { Box, Text, TextErrors } from '@/components';
import useCunninghamTheme from '@/cunningham/useCunninghamTheme'; import useCunninghamTheme from '@/cunningham/useCunninghamTheme';
@@ -24,7 +24,7 @@ interface ModalRemoveDocProps {
export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => { export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
const { colorsTokens } = useCunninghamTheme(); const { colorsTokens } = useCunninghamTheme();
const { toast } = useToastProvider(); const { toast } = useToastProvider();
const router = useRouter(); const { push } = useRouter();
const { const {
mutate: removeDoc, mutate: removeDoc,
@@ -35,7 +35,7 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
toast(t('The document has been deleted.'), VariantType.SUCCESS, { toast(t('The document has been deleted.'), VariantType.SUCCESS, {
duration: 4000, duration: 4000,
}); });
router.push('/'); void push('/');
}, },
}); });

View File

@@ -7,7 +7,7 @@ import {
useToastProvider, useToastProvider,
} from '@openfun/cunningham-react'; } from '@openfun/cunningham-react';
import { t } from 'i18next'; import { t } from 'i18next';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/router';
import * as Y from 'yjs'; import * as Y from 'yjs';
import { Box, Text } from '@/components'; import { Box, Text } from '@/components';
@@ -31,14 +31,14 @@ export const ModalVersion = ({
versionId, versionId,
}: ModalVersionProps) => { }: ModalVersionProps) => {
const { toast } = useToastProvider(); const { toast } = useToastProvider();
const router = useRouter(); const { push } = useRouter();
const { providers } = useDocStore(); const { providers } = useDocStore();
const { mutate: updateDoc } = useUpdateDoc({ const { mutate: updateDoc } = useUpdateDoc({
listInvalideQueries: [KEY_LIST_DOC_VERSIONS], listInvalideQueries: [KEY_LIST_DOC_VERSIONS],
onSuccess: () => { onSuccess: () => {
const onDisplaySuccess = () => { const onDisplaySuccess = () => {
toast(t('Version restored successfully'), VariantType.SUCCESS); toast(t('Version restored successfully'), VariantType.SUCCESS);
router.push(`/docs/${docId}`); void push(`/docs/${docId}`);
}; };
if (!providers?.[docId] || !providers?.[versionId]) { if (!providers?.[docId] || !providers?.[versionId]) {

View File

@@ -1,5 +1,5 @@
import { Button } from '@openfun/cunningham-react'; import { Button } from '@openfun/cunningham-react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@@ -12,12 +12,12 @@ import { DocsGrid } from './DocsGrid';
export const DocsGridContainer = () => { export const DocsGridContainer = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { untitledDocument } = useTrans(); const { untitledDocument } = useTrans();
const router = useRouter(); const { push } = useRouter();
const { isMobile } = useResponsiveStore(); const { isMobile } = useResponsiveStore();
const { mutate: createDoc } = useCreateDoc({ const { mutate: createDoc } = useCreateDoc({
onSuccess: (doc) => { onSuccess: (doc) => {
router.push(`/docs/${doc.id}`); void push(`/docs/${doc.id}`);
}, },
}); });

View File

@@ -5,7 +5,7 @@ import {
VariantType, VariantType,
useToastProvider, useToastProvider,
} from '@openfun/cunningham-react'; } from '@openfun/cunningham-react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/router';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@@ -35,7 +35,7 @@ export const MemberItem = ({
const { isSmallMobile, screenWidth } = useResponsiveStore(); const { isSmallMobile, screenWidth } = useResponsiveStore();
const [localRole, setLocalRole] = useState(role); const [localRole, setLocalRole] = useState(role);
const { toast } = useToastProvider(); const { toast } = useToastProvider();
const router = useRouter(); const { push } = useRouter();
const { mutate: updateDocAccess, error: errorUpdate } = useUpdateDocAccess({ const { mutate: updateDocAccess, error: errorUpdate } = useUpdateDocAccess({
onSuccess: () => { onSuccess: () => {
toast(t('The role has been updated'), VariantType.SUCCESS, { toast(t('The role has been updated'), VariantType.SUCCESS, {
@@ -55,7 +55,7 @@ export const MemberItem = ({
); );
if (isMyself) { if (isMyself) {
router.push('/'); void push('/');
} }
}, },
}); });

View File

@@ -1,7 +1,6 @@
import { Loader } from '@openfun/cunningham-react'; import { Loader } from '@openfun/cunningham-react';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import Head from 'next/head'; import Head from 'next/head';
import { useRouter as useNavigate } from 'next/navigation';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@@ -46,7 +45,7 @@ const DocPage = ({ id }: DocProps) => {
const { setCurrentDoc, createProvider, providers } = useDocStore(); const { setCurrentDoc, createProvider, providers } = useDocStore();
const { setBroadcastProvider, addTask } = useBroadcastStore(); const { setBroadcastProvider, addTask } = useBroadcastStore();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const navigate = useNavigate(); const { replace } = useRouter();
const provider = providers?.[id]; const provider = providers?.[id];
useEffect(() => { useEffect(() => {
@@ -101,7 +100,7 @@ const DocPage = ({ id }: DocProps) => {
if (isError && error) { if (isError && error) {
if (error.status === 404) { if (error.status === 404) {
navigate.replace(`/404`); void replace(`/404`);
return null; return null;
} }