The Data type was only answered, So I made fake data to show the UI what it looked like.
- 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
- TailwindCSS for styling.
- MUI for UI and icon.
- Axios to fetch data
- unstated-next to small and simple state management
src/components
: All the shared react components.src/containers
: State management container.src/utils
: All the functions & API.backend
: custom react hooks for fetching.
/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" }
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.
- 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😌.