fix review comment

src/common/types.ts

@@ -67,6 +67,7 @@ export interface CallHistory {
   callSid: string;
   direction: SipCallDirection;
   number: string;
+  name?: string;
   duration: string;
   timeStamp: number;
   isSaved?: boolean;

src/window/app.tsx

@@ -33,6 +33,7 @@ export const WindowApp = () => {
   const [sipDisplayName, setSipDisplayName] = useState("");
   const [callHistories, setCallHistories] = useState<CallHistory[]>([]);
   const [calledNumber, setCalledNumber] = useState("");
+  const [calledName, setCalledName] = useState("");
   const [tabIndex, setTabIndex] = useState(0);
   const [advancedSettings, setAdvancedSettings] = useState<AdvancedAppSettings>(
     getAdvancedSettings()
@@ -48,18 +49,20 @@ export const WindowApp = () => {
           sipDisplayName={sipDisplayName}
           sipServerAddress={sipServerAddress}
           calledNumber={[calledNumber, setCalledNumber]}
+          calledName={[calledName, setCalledName]}
           advancedSettings={advancedSettings}
         />
       ),
     },
     {
-      title: "History",
+      title: "Calls",
       content: (
         <CallHistories
           calls={callHistories}
           onDataChange={() => setCallHistories(getCallHistories(sipUsername))}
-          onCallNumber={(number) => {
+          onCallNumber={(number, name) => {
             setCalledNumber(number);
+            setCalledName(name || "");
             setTabIndex(0);
           }}
         />

src/window/history/call-history-item.tsx

@@ -9,7 +9,14 @@ import {
 } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import { useState } from "react";
-import { Phone, PhoneIncoming, PhoneOutgoing, Save, Star } from "react-feather";
+import {
+  Phone,
+  PhoneIncoming,
+  PhoneOutgoing,
+  Save,
+  Star,
+  Trash2,
+} from "react-feather";
 import { CallHistory, SipCallDirection } from "src/common/types";
 import { getSettings, isSaveCallHistory } from "src/storage";
 import { formatPhoneNumber } from "src/utils";
@@ -17,7 +24,7 @@ import { formatPhoneNumber } from "src/utils";
 type CallHistoryItemProbs = {
   call: CallHistory;
   onDataChange?: (call: CallHistory) => void;
-  onCallNumber?: (number: string) => void;
+  onCallNumber?: (number: string, name: string | undefined) => void;
 };
 
 export const CallHistoryItem = ({
@@ -45,21 +52,14 @@ export const CallHistoryItem = ({
       onMouseEnter={() => setCallEnable(true)}
       onMouseLeave={() => setCallEnable(false)}
     >
-      <Icon as={getDirectionIcon(call.direction)} w="20px" h="20px" />
-      <VStack align="start">
-        <Text fontSize="14px" fontWeight="500">
-          {formatPhoneNumber(call.number)}
-        </Text>
-        <Text fontSize="12px">{call.duration}</Text>
-      </VStack>
-      {callEnable && (
+      {callEnable ? (
         <Tooltip label="Call">
           <IconButton
             aria-label="call recents"
             icon={<Phone />}
             onClick={() => {
               if (onCallNumber) {
-                onCallNumber(call.number);
+                onCallNumber(call.number, call.name);
               }
             }}
             variant="unstyled"
@@ -67,17 +67,27 @@ export const CallHistoryItem = ({
             color="green.500"
           />
         </Tooltip>
+      ) : (
+        <Icon as={getDirectionIcon(call.direction)} w="20px" h="20px" />
       )}
+
+      <VStack align="start">
+        <Text fontSize="14px" fontWeight="500">
+          {call.name || formatPhoneNumber(call.number)}
+        </Text>
+        <Text fontSize="12px">{call.duration}</Text>
+      </VStack>
+
       <Spacer />
       <VStack align="start">
         <Text fontSize="12px">
           {dayjs(call.timeStamp).format("MMM D, hh:mm A")}
         </Text>
       </VStack>
-      <Tooltip label="Save">
+      <Tooltip label={call.isSaved ? "Remove" : "Save"}>
         <IconButton
           aria-label="save recents"
-          icon={<Save />}
+          icon={call.isSaved ? <Trash2 /> : <Save />}
           onClick={() => {
             const settings = getSettings();
             if (settings.sipUsername) {

src/window/history/index.tsx

@@ -1,5 +1,4 @@
 import {
-  VStack,
   Grid,
   HStack,
   InputGroup,
@@ -7,18 +6,15 @@ import {
   InputLeftElement,
   Icon,
   Text,
-  Spacer,
-  UnorderedList,
   Tabs,
   TabList,
   Tab,
   TabPanels,
   TabPanel,
 } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Search, Sliders } from "react-feather";
 import { CallHistory } from "src/common/types";
-import CallHistoryItem from "./call-history-item";
 
 import { DEFAULT_COLOR_SCHEME } from "src/common/constants";
 import Recents from "./recent";
@@ -26,7 +22,7 @@ import Recents from "./recent";
 type CallHistoriesProbs = {
   calls: CallHistory[];
   onDataChange?: (call: CallHistory) => void;
-  onCallNumber?: (number: string) => void;
+  onCallNumber?: (number: string, name: string | undefined) => void;
 };
 
 export const CallHistories = ({
@@ -39,8 +35,8 @@ export const CallHistories = ({
   return (
     <Tabs isFitted colorScheme={DEFAULT_COLOR_SCHEME}>
       <TabList mb="1em" gap={1}>
-        <Tab>Saved</Tab>
         <Tab>Recent</Tab>
+        <Tab>Saved</Tab>
       </TabList>
 
       <Grid w="full" templateColumns="1fr auto" gap={5}>
@@ -71,7 +67,6 @@ export const CallHistories = ({
           <Recents
             calls={calls}
             search={searchText}
-            isSaved
             onCallNumber={onCallNumber}
             onDataChange={onDataChange}
           />
@@ -80,6 +75,7 @@ export const CallHistories = ({
           <Recents
             calls={calls}
             search={searchText}
+            isSaved
             onCallNumber={onCallNumber}
             onDataChange={onDataChange}
           />

src/window/history/recent.tsx

@@ -9,7 +9,7 @@ type RecentsProbs = {
   search: string;
   isSaved?: boolean;
   onDataChange?: (call: CallHistory) => void;
-  onCallNumber?: (number: string) => void;
+  onCallNumber?: (number: string, name: string | undefined) => void;
 };
 
 export const Recents = ({

src/window/phone/index.tsx

@@ -60,6 +60,7 @@ type PhoneProbs = {
   sipPassword: string;
   sipDisplayName: string;
   calledNumber: [string, React.Dispatch<React.SetStateAction<string>>];
+  calledName: [string, React.Dispatch<React.SetStateAction<string>>];
   advancedSettings: AdvancedAppSettings;
 };
 
@@ -70,6 +71,7 @@ export const Phone = ({
   sipPassword,
   sipDisplayName,
   calledNumber: [calledANumber, setCalledANumber],
+  calledName: [calledAName, setCalledAName],
   advancedSettings,
 }: PhoneProbs) => {
   const [inputNumber, setInputNumber] = useState("");
@@ -125,9 +127,18 @@ export const Phone = ({
 
   useEffect(() => {
     if (calledANumber) {
-      setInputNumber(calledANumber);
+      if (
+        !(
+          calledANumber.startsWith("app-") || calledANumber.startsWith("queue-")
+        )
+      ) {
+        setInputNumber(calledANumber);
+      }
+
+      setAppName(calledAName);
       makeOutboundCall(calledANumber);
       setCalledANumber("");
+      setCalledAName("");
     }
   }, [calledANumber]);
 
@@ -246,6 +257,7 @@ export const Phone = ({
         duration: transform(Date.now(), call.timeStamp),
         timeStamp: call.timeStamp,
         callSid: call.callSid,
+        name: call.name,
       });
     }
     deleteCurrentCall();
@@ -278,13 +290,14 @@ export const Phone = ({
     makeOutboundCall(inputNumber);
   };
 
-  const makeOutboundCall = (number: string) => {
+  const makeOutboundCall = (number: string, name: string = "") => {
     if (sipUA.current && number) {
       setIsCallButtonLoading(true);
       setCallStatus(SipConstants.SESSION_RINGING);
       setSessionDirection("outgoing");
       saveCurrentCall({
         number: number,
+        name,
         direction: "outgoing",
         timeStamp: Date.now(),
         duration: "0",
@@ -458,7 +471,7 @@ export const Phone = ({
                   setAppName(`Queue ${name}`);
                   const calledQueue = `queue-${value}`;
                   setInputNumber("");
-                  makeOutboundCall(calledQueue);
+                  makeOutboundCall(calledQueue, `Queue ${name}`);
                 }}
                 onOpen={() => {
                   return new Promise<IconButtonMenuItems[]>(
@@ -485,7 +498,7 @@ export const Phone = ({
                   setAppName(`App ${name}`);
                   const calledAppId = `app-${value}`;
                   setInputNumber("");
-                  makeOutboundCall(calledAppId);
+                  makeOutboundCall(calledAppId, `App ${name}`);
                 }}
                 onOpen={() => {
                   return new Promise<IconButtonMenuItems[]>(