Notes

// Inside Home.tsx
import React, { useState } from "react";
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonNote } from "@ionic/react";
import MessageListItem from "../components/MessageListItem";
import { Call, getCalls, deleteCalls } from "../data/calls";

const Home: React.FC = () => {
const [calls, setCalls] = useState<Call[]>([]);

useIonViewWillEnter(() => {
setCalls(getCalls());
});

const handleDelete = (id: string) => {
deleteCalls(id);
setCalls(getCalls()); // Refresh the list after deletion
};

return (
<IonPage id="home-page">
<IonHeader>
<IonToolbar>
<IonTitle>Recent Calls</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<div className="message">
{calls.length > 0 ? (
<IonList>
{calls.map((call) => (
<MessageListItem key={call.id} call={call} onDelete={handleDelete} />
))}
</IonList>
) : (
<IonNote>Call Log Is Empty</IonNote>
)}
</div>
</IonContent>
</IonPage>
);
};

export default Home;
--------------------------------------

// Inside calls.ts
export interface Call {
name: string;
mobile: string;
time: string;
place: string;
region: string;
missed: boolean;
id: string;
}

// Sample call log data array
let messages: Call[] = [
{
id: "1",
name: "Name 1",
mobile: "+91 987654321",
place: "place one",
region: "region one",
time: "1:30PM",
missed: false,
},
{
id: "2",
name: "Name 2",
mobile: "+91 987654321",
place: "place one",
region: "region one",
time: "11:30PM",
missed: true,
},
// Add more call log entries as needed
{
id: "3",
name: "",
mobile: "+91 987654321",
place: "place one",
region: "region one",
time: "10:30AM",
missed: false,
},
{
id: "4",
name: "",
mobile: "+91 448654321",
place: "place one",
region: "region one",
time: "12:30PM",
missed: true,
},
// Continue with other predefined call logs...
];

// Function to get all call log entries
export const getCalls = (): Call[] => {
return messages;
};

// Function to delete a specific call log entry by id
export const deleteCalls = (id: string): void => {
messages = messages.filter(message => message.id !== id);
};


-----------------
// Inside MessageListItem.tsx
import React from "react";
import {
IonItem,
IonItemOption,
IonItemOptions,
IonItemSliding,
IonLabel,
IonIcon,
} from "@ionic/react";
import { call as callIcon } from "ionicons/icons";
import { Call } from "../data/calls";

interface CallListItemProps {
call: Call;
onDelete: (id: string) => void;
}

const MessageListItem: React.FC<CallListItemProps> = ({ call, onDelete }) => {
return (
<IonItemSliding>
<IonItem>
<IonLabel className="ion-text-wrap">
{call.missed && <IonIcon icon={callIcon} color="danger" />}
<h2>{call.name || call.mobile}</h2>
<p>{`${call.place}, ${call.region}, ${call.time}`}</p>
</IonLabel>
</IonItem>
<IonItemOptions side="end">
<IonItemOption color="danger" onClick={() => onDelete(call.id)}>
Delete
</IonItemOption>
</IonItemOptions>
</IonItemSliding>
);
};

export default MessageListItem;