DEV Community

Cover image for Connecting The Dots: Front-end and Algorithms
Paper Coding
Paper Coding

Posted on • Edited on

11 3

Connecting The Dots: Front-end and Algorithms

Last week, during an interview, I encountered an algorithm test. This week, while working on the current React project, I came across the same test. I recognized it instantly and solved it effortlessly, like eating a piece of cake. This experience reminded me of one of my favorite quotes.

Alt Text

The algorithm dot - Merge Intervals

You can see details here in LeetCode.

Example 1:



Input: intervals = [[1,3],[2,6],[8,10],[15,18]]
Output: [[1,6],[8,10],[15,18]]
Explanation: Since intervals [1,3] and [2,6] overlaps, merge them into [1,6].


Enter fullscreen mode Exit fullscreen mode

Example 2:



Input: intervals = [[1,4],[4,5]]
Output: [[1,5]]
Explanation: Intervals [1,4] and [4,5] are considered overlapping.


Enter fullscreen mode Exit fullscreen mode

Alt Text

Connecting to Front-end

So, how this algorithm test I took last week related to my current work. Let's see a gif below

Alt Text

Try it yourself ⇒ codesandbox

  • There's a list transactions grouped by date.
  • At first load, we only load a few items.
  • When users press "Load More" button, we call an api to get more data.
  • Data come but in section date "19.10.2021", without merge we see two separate sections.
  • Now my mission is to merge theme together. Let's go

Connecting The Dots

This is the solution



const merge = (currentList, newList) => {
    // We take the currentList at first load, and the "load more" list.
    // First we just merge it by spread operator => [...currentList, ...newList]
    // After that we use `Array.prototype.reduce` to generate a new array,
    // Which is merged and grouped by date.
  const merged = [...currentList, ...newList].reduce((acc, item) => {
        // Condition 1: just push the item to the new empty array, or
        // if the last item in `acc` doesn't have the same date with the current item
    if (!acc.length || acc[acc.length - 1].date !== item.date) {
      acc.push(item);
    } else {
            // Condition 2: if they have the same date, we merge it. 🤝
      const lastItem = acc[acc.length - 1];
      const mergedDate = [...lastItem.transactions, ...item.transactions];
      lastItem.transactions = mergedDate;
    }
    return acc;
  }, []);
  return merged;
};

const result = await fakeAPIRequest(page);

setMergedList((prevList) =>
    merge(cloneDeep(prevList), cloneDeep(result.items))
);



Enter fullscreen mode Exit fullscreen mode

So, it's a bit different from the algorithm test, but the idea is the same. Now, you can return to Leetcode and try solving it on your own.

Algorithm tests can be challenging at times, and we often underestimate them because we rarely use or think about them in real-life projects. This experience has made me reconsider and motivates me to practice more on upcoming weekends.

SurveyJS custom survey software

JavaScript UI Library for Surveys and Forms

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

View demo

Top comments (0)

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay