diff --git a/phone/src/apps/dialer/components/views/DialerHistory.tsx b/phone/src/apps/dialer/components/views/DialerHistory.tsx index d97f01dab..46b9da671 100644 --- a/phone/src/apps/dialer/components/views/DialerHistory.tsx +++ b/phone/src/apps/dialer/components/views/DialerHistory.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import PhoneCallbackIcon from '@mui/icons-material/PhoneCallback'; import PhoneForwardedIcon from '@mui/icons-material/PhoneForwarded'; import PhoneIcon from '@mui/icons-material/Phone'; @@ -16,6 +16,7 @@ import dayjs from 'dayjs'; import { useMyPhoneNumber } from '@os/simcard/hooks/useMyPhoneNumber'; import { useDialHistory } from '../../hooks/useDialHistory'; import { useCall } from '@os/call/hooks/useCall'; +import { useContacts } from '../../../contacts/hooks/state'; const useStyles = makeStyles((theme: Theme) => ({ callForward: { @@ -32,6 +33,7 @@ export const DialerHistory: React.FC = () => { const { initializeCall } = useCall(); const calls = useDialHistory(); const classes = useStyles(); + const contacts = useContacts(); const history = useHistory(); const [t] = useTranslation(); @@ -39,6 +41,12 @@ export const DialerHistory: React.FC = () => { initializeCall(phoneNumber); }; + // To display the name, force a re-render when we get contacts | issue #432 + const getDisplay = useCallback( + (number: string) => (contacts.length ? getDisplayByNumber(number) : number), + [contacts, getDisplayByNumber], + ); + if (!calls?.length) { return ( @@ -62,7 +70,7 @@ export const DialerHistory: React.FC = () => { { {} - {getDisplayByNumber(call.receiver) === call.receiver && ( + {getDisplay(call.receiver) === call.receiver && ( history.push(`/contacts/-1?addNumber=${call.receiver}&referal=/phone/contacts`) @@ -94,7 +102,7 @@ export const DialerHistory: React.FC = () => { { - {getDisplayByNumber(call.transmitter) === call.transmitter && ( + {getDisplay(call.transmitter) === call.transmitter && ( history.push(`/contacts/-1?addNumber=${call.transmitter}&referal=/phone/contacts`) diff --git a/phone/src/apps/dialer/hooks/state.ts b/phone/src/apps/dialer/hooks/state.ts index c2ddd58b6..154088dff 100644 --- a/phone/src/apps/dialer/hooks/state.ts +++ b/phone/src/apps/dialer/hooks/state.ts @@ -14,7 +14,7 @@ export const dialState = { get: async () => { try { const resp = await fetchNui>(CallEvents.FETCH_CALLS); - LogDebugEvent({ action: 'ContactsFetched', data: resp.data }); + LogDebugEvent({ action: CallEvents.FETCH_CALLS, data: resp.data }); return resp.data; } catch (e) { if (isEnvBrowser()) {