Notes

Ionic React: Call Log Page

 

You have been provided with a partial implementation of an Ionic React application that manages a call log. The application consists of two main components: the root component, "App", which sets up the routing, and the "Home" component, which displays the recent calls in a list.

Your task is to complete the implementation of the "Home" component and the supporting functions to handle data retrieval and deletion from the call log. Individual call entries are listed using the component "CallListItem" inside "Home" component.

 

Home Component:
The "Home" component is responsible for displaying the recent call log entries and handling the call log's  deletion functionality.

1. Display a header with the title "Recent Calls".
2. Retrieve the call log data using the "getCalls" function from the "calls" interface. The "getCalls" function returns an array of "Call" objects with the following properties:

  name (string): Name of the contact (can be empty if not available).
mobile (string): Mobile number of the contact.
time (string): Time of the call.
place (string): Place or location of the call.
region (string): Region or area of the call.
missed (boolean): Indicates whether the call was missed (true) or not (false).
id (string): Unique identifier for the call log entry.

3. Display the call log entries in a list using the "CallListItem" component. Each "CallListItem" should display the contact name (if available), mobile number (if name is not available), call time, place and region. If the call was missed, display a missed call icon beside the contact name.
5. Implement the "deleteCalls" function to delete a call log entry when the "Delete" option in the "CallListItem" component is clicked. After deletion, update the call log list to reflect the changes.

 

CallListItem Component:
The "CallListItem" component represents an individual call log entry in the list.

1. Display the contact name (if available) or the mobile number, call time, place, and region of the call.
2. If the call was missed (missed=true), display a missed call icon (e.g., a red phone icon).
3. Implement a "Delete" option for each call log entry using the "IonItemOption" component. When the "Delete" option is clicked, call the "deleteCalls" function to delete the corresponding call log entry and update the list.

 

Data Source (calls.ts):
The "calls.ts" file contains the sample call log data as an array of "Call" objects. You should use this data to populate the call log list and handle deletion.

 

Screenshot

 

Mobile view : 

 

Web view :

 




Instructions

To run the application, execute the sh run.sh command, from the directory.
To test the Full Stack application, execute the sh test.sh command from the directory.
You need to write code in Home.tsx ( IonicReact/src/pages/Home.tsx ),calls.ts ( IonicReact/src/data/call.ts ) and CallListItem.tsx (IonicReact/src/components/CallListItem.tsx )
Please open the problem statement in the Chrome browser.