/b3c4c80b

aircall live

Primary LanguageJavaScript

Screen shoot

The Data type was only answered, So I made fake data to show the UI what it looked like.

Screenshot 2024-07-12 at 2 39 34 PM Screenshot 2024-07-12 at 2 39 26 PM Screenshot 2024-07-12 at 2 38 57 PM

Features

  • inbox to show Activity Feed
  • Accordion expand to show Activity Detail
  • Archived calls
  • Group action to archive or unarchive
  • button to archive/unarchive each call

Use

Code architecture (outdated)

  • src/components: All the shared react components.
  • src/containers: State management container.
  • src/utils: All the functions & API.
    • backend: custom react hooks for fetching.

Actual endpoint

/activities:

[ { "direction": "inbound", "from": 1, "to": 2, "via": 1, "duration": 0, "is_archived": false, "call_type": "answered", "id": "6685a0df24a7a79ae0c50f8f", "created_at": "2024-07-03T19:05:03.506Z" }, { "direction": "outbound", "from": 2, "to": 1, "via": 1, "duration": 0, "is_archived": false, "call_type": "answered", "id": "6685b79524326ad725d48041", "created_at": "2024-07-03T20:41:57.436Z" } ]

/activities/${id}:

{ "direction": "inbound", "from": 1, "to": 2, "via": 1, "duration": 0, "is_archived": false, "call_type": "answered", "id": "6685a0df24a7a79ae0c50f8f", "created_at": "2024-07-03T19:05:03.506Z" }

Deploying

netlify - aircall

What I want to say

First of all, Thank you for giving me a chance. It was really fun to do the airball assignment. The data was simple, and the detailed endpoint was the same for getting calls. I was expected to have more info to display 😂 I came back from vacation, So I started a bit late, but hopefully, it's not too late to submit.

Problem & solved

  • The first time, the child component has too many states and functions. So, to make a reusable component, move on to the parent level and rebuild the card component as a reusable component.
  • Fetch with Axios in each component to unnecessary or duplicate states such as loading or error. -> Made Fetch hook to reduce unnecessary state use cases and save time in code😌.