From 1d59a7400219d4d4f4948fb5409c3bee17d36e0f Mon Sep 17 00:00:00 2001 From: m5r Date: Sun, 24 Oct 2021 17:42:48 +0200 Subject: [PATCH] replace useRouter().params with useParam() --- app/messages/components/conversation.tsx | 9 ++++----- app/messages/pages/messages/[recipient].tsx | 4 ++-- app/phone-calls/pages/outgoing-call/[recipient].tsx | 8 ++++---- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/app/messages/components/conversation.tsx b/app/messages/components/conversation.tsx index 1987b19..5c2a034 100644 --- a/app/messages/components/conversation.tsx +++ b/app/messages/components/conversation.tsx @@ -1,15 +1,14 @@ import { Suspense, useEffect, useMemo, useRef } from "react"; -import { useRouter } from "blitz"; +import { useParam } from "blitz"; import clsx from "clsx"; -import { Direction } from "../../../db"; +import { Direction } from "db"; import useConversation from "../hooks/use-conversation"; import NewMessageArea from "./new-message-area"; -import { formatDate, formatTime } from "../../core/helpers/date-formatter"; +import { formatDate, formatTime } from "app/core/helpers/date-formatter"; export default function Conversation() { - const router = useRouter(); - const recipient = decodeURIComponent(router.params.recipient); + const recipient = decodeURIComponent(useParam("recipient", "string") ?? ""); const conversation = useConversation(recipient)[0]; const messages = useMemo(() => conversation?.messages ?? [], [conversation?.messages]); const messagesListRef = useRef(null); diff --git a/app/messages/pages/messages/[recipient].tsx b/app/messages/pages/messages/[recipient].tsx index d75ac82..ea36114 100644 --- a/app/messages/pages/messages/[recipient].tsx +++ b/app/messages/pages/messages/[recipient].tsx @@ -1,6 +1,6 @@ import { Suspense } from "react"; import type { BlitzPage } from "blitz"; -import { Routes, useRouter } from "blitz"; +import { Routes, useParam, useRouter } from "blitz"; import { IoChevronBack, IoInformationCircle, IoCall } from "react-icons/io5"; import AppLayout from "../../../core/layouts/layout"; @@ -9,7 +9,7 @@ import useConversation from "../../hooks/use-conversation"; const ConversationPage: BlitzPage = () => { const router = useRouter(); - const recipient = decodeURIComponent(router.params.recipient); + const recipient = decodeURIComponent(useParam("recipient", "string") ?? ""); const pageTitle = `Messages with ${recipient}`; const conversation = useConversation(recipient)[0]; diff --git a/app/phone-calls/pages/outgoing-call/[recipient].tsx b/app/phone-calls/pages/outgoing-call/[recipient].tsx index 55639da..52ce4d3 100644 --- a/app/phone-calls/pages/outgoing-call/[recipient].tsx +++ b/app/phone-calls/pages/outgoing-call/[recipient].tsx @@ -1,6 +1,7 @@ -import type { BlitzPage, ErrorFallbackProps, WithRouterProps } from "blitz"; -import { ErrorBoundary, Routes, useRouter, withRouter } from "blitz"; import { useCallback, useEffect } from "react"; +import type { WithRouterProps } from "next/dist/client/with-router"; +import type { BlitzPage, ErrorFallbackProps } from "blitz"; +import { ErrorBoundary, Routes, useParam, withRouter } from "blitz"; import type { TwilioError } from "@twilio/voice-sdk"; import { atom, useAtom } from "jotai"; import { IoCall } from "react-icons/io5"; @@ -12,8 +13,7 @@ import Keypad from "../../components/keypad"; const OutgoingCall: BlitzPage = () => { const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom); - const router = useRouter(); - const recipient = decodeURIComponent(router.params.recipient); + const recipient = decodeURIComponent(useParam("recipient", "string") ?? ""); const onHangUp = useCallback(() => setPhoneNumber(""), [setPhoneNumber]); const call = useMakeCall({ recipient, onHangUp }); const { isDeviceReady } = useDevice();