mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace useRouter().params with useParam()

Browse Source
This commit is contained in:
m5r 2021-10-24 17:42:48 +02:00
parent 3edf0cb471
commit 1d59a74002
3 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/messages/components/conversation.tsx
View File

@ -1,15 +1,14 @@
import { Suspense, useEffect, useMemo, useRef } from "react"; import { Suspense, useEffect, useMemo, useRef } from "react";
import { useRouter } from "blitz"; import { useParam } from "blitz";
import clsx from "clsx"; import clsx from "clsx";
import { Direction } from "../../../db"; import { Direction } from "db";
import useConversation from "../hooks/use-conversation"; import useConversation from "../hooks/use-conversation";
import NewMessageArea from "./new-message-area"; 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() { export default function Conversation() {
const router = useRouter(); const recipient = decodeURIComponent(useParam("recipient", "string") ?? "");
const recipient = decodeURIComponent(router.params.recipient);
const conversation = useConversation(recipient)[0]; const conversation = useConversation(recipient)[0];
const messages = useMemo(() => conversation?.messages ?? [], [conversation?.messages]); const messages = useMemo(() => conversation?.messages ?? [], [conversation?.messages]);
const messagesListRef = useRef<HTMLUListElement>(null); const messagesListRef = useRef<HTMLUListElement>(null);

4
app/messages/pages/messages/[recipient].tsx
View File

@ -1,6 +1,6 @@
import { Suspense } from "react"; import { Suspense } from "react";
import type { BlitzPage } from "blitz"; 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 { IoChevronBack, IoInformationCircle, IoCall } from "react-icons/io5";
import AppLayout from "../../../core/layouts/layout"; import AppLayout from "../../../core/layouts/layout";
@ -9,7 +9,7 @@ import useConversation from "../../hooks/use-conversation";
const ConversationPage: BlitzPage = () => { const ConversationPage: BlitzPage = () => {
const router = useRouter(); const router = useRouter();
const recipient = decodeURIComponent(router.params.recipient); const recipient = decodeURIComponent(useParam("recipient", "string") ?? "");
const pageTitle = `Messages with ${recipient}`; const pageTitle = `Messages with ${recipient}`;
const conversation = useConversation(recipient)[0]; const conversation = useConversation(recipient)[0];

8
app/phone-calls/pages/outgoing-call/[recipient].tsx
View File

@ -1,6 +1,7 @@
import type { BlitzPage, ErrorFallbackProps, WithRouterProps } from "blitz";
import { ErrorBoundary, Routes, useRouter, withRouter } from "blitz";
import { useCallback, useEffect } from "react"; 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 type { TwilioError } from "@twilio/voice-sdk";
import { atom, useAtom } from "jotai"; import { atom, useAtom } from "jotai";
import { IoCall } from "react-icons/io5"; import { IoCall } from "react-icons/io5";
@ -12,8 +13,7 @@ import Keypad from "../../components/keypad";
const OutgoingCall: BlitzPage = () => { const OutgoingCall: BlitzPage = () => {
const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom); const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom);
const router = useRouter(); const recipient = decodeURIComponent(useParam("recipient", "string") ?? "");
const recipient = decodeURIComponent(router.params.recipient);
const onHangUp = useCallback(() => setPhoneNumber(""), [setPhoneNumber]); const onHangUp = useCallback(() => setPhoneNumber(""), [setPhoneNumber]);
const call = useMakeCall({ recipient, onHangUp }); const call = useMakeCall({ recipient, onHangUp });
const { isDeviceReady } = useDevice(); const { isDeviceReady } = useDevice();