I created this simple react application for a coding challenge, which is described in the linked README file. Basically, I created the components and helper logic to display dynamic JSON data in a sortable table.

I did not clear the coding challenge and I am looking for some feedback on how this could be done better. Note that the solution does work but the code quality may not be that good.

In my opinion, the issue could be how I implemented this getSortedData function:

import moment from "moment";

export const getSortedData = (tableData, sortBy, sortOrderAsc) => {
  tableData.rows.sort((a, b) => {
    const valueA = a[sortBy];
    const valueB = b[sortBy];
    switch (sortBy) {
      case "title": {
        return valueA.toLowerCase() > valueB.toLowerCase() ? 1 : -1;
      }
      case "releaseDate": {
        const momentA = moment(valueA, "DD-MM-YYYY");
        const momentB = moment(valueB, "DD-MM-YYYY");
        if (!momentA.isValid()) {
          return 1;
        }
        if (!momentB.isValid()) {
          return -1;
        }
        return momentA.isAfter(momentB) ? 1 : -1;
      }
      case "productionBudget":
      case "worldwideBoxOffice":
      case "number": {
        if (Number.isNaN(parseFloat(valueA))) return -1;
        if (Number.isNaN(parseFloat(valueB))) return 1;
        return valueA > valueB ? 1 : -1;
      }
      default: {
        return valueA > valueB ? 1 : -1;
      }
    }
  });
  if (!sortOrderAsc) {
    tableData.rows.reverse();
  }
  return tableData;
};

Where sortBy could be the id of one of the columns in following tableData. sortOrderAsc is a boolean which tells whether the data ia sorted in ascending order. tableData is as following:

 {
  "columns": [
    { "id": "number", "title": "Number" },
    { "id": "title", "title": "Movie" },
    { "id": "releaseDate", "title": "Release Date" },
    { "id": "productionBudget", "title": "Production Budget in $" },
    { "id": "worldwideBoxOffice", "title": "Worldwide Box Office in $" }
  ],
  "rows": [
    {
      "number": 1,
      "releaseDate": "02-05-2008",
      "title": "Iron Man",
      "productionBudget": 186000000,
      "worldwideBoxOffice": 585171547
    },
    {
      "number": 2,
      "releaseDate": "13-06-2008",
      "title": "The Incredible Hulk",
      "productionBudget": 137500000,
      "worldwideBoxOffice": 265573859
    },
    {
      "number": 3,
      "releaseDate": "07-05-2010",
      "title": "Iron Man 2",
      "productionBudget": 170000000,
      "worldwideBoxOffice": 621156389
    },
    {
      "number": 4,
      "releaseDate": "06-05-2011",
      "title": "Thor",
      "productionBudget": 150000000,
      "worldwideBoxOffice": 449326618
    },
    {
      "number": 5,
      "releaseDate": "22-07-2011",
      "title": "Captain America: The First Avenger",
      "productionBudget": 140000000,
      "worldwideBoxOffice": 370569776
    },
    {
      "number": 6,
      "releaseDate": "04-05-2012",
      "title": "The Avengers",
      "productionBudget": 225000000,
      "worldwideBoxOffice": 1519479547
    },
    {
      "number": 7,
      "releaseDate": "03-05-2013",
      "title": "Iron Man 3",
      "productionBudget": 200000000,
      "worldwideBoxOffice": 1215392272
    },
    {
      "number": 8,
      "releaseDate": "08-11-2013",
      "title": "Thor: The Dark World",
      "productionBudget": 150000000,
      "worldwideBoxOffice": 644602516
    },
    {
      "number": 9,
      "releaseDate": "04-04-2014",
      "title": "Captain America: The Winter Soldier",
      "productionBudget": 170000000,
      "worldwideBoxOffice": 714401889
    },
    {
      "number": 10,
      "releaseDate": "01-08-2014",
      "title": "Guardians of the Galaxy",
      "productionBudget": 170000000,
      "worldwideBoxOffice": 771051335
    },
    {
      "number": 11,
      "releaseDate": "01-05-2015",
      "title": "Avengers: Age of Ultron",
      "productionBudget": 330600000,
      "worldwideBoxOffice": 1408218722
    },
    {
      "number": 12,
      "releaseDate": "17-07-2015",
      "title": "Ant-Man",
      "productionBudget": 130000000,
      "worldwideBoxOffice": 518860086
    },
    {
      "number": 13,
      "releaseDate": "06-05-2016",
      "title": "Captain America: Civil War",
      "productionBudget": 250000000,
      "worldwideBoxOffice": 1153304495
    },
    {
      "number": 14,
      "releaseDate": "04-11-2016",
      "title": "Doctor Strange",
      "productionBudget": 165000000,
      "worldwideBoxOffice": 677323653
    },
    {
      "number": 15,
      "releaseDate": "05-05-2017",
      "title": "Guardians of the Galaxy Vol 2",
      "productionBudget": 200000000,
      "worldwideBoxOffice": 862888462
    },
    {
      "number": 16,
      "releaseDate": "07-07-2017",
      "title": "Spider-Man: Homecoming",
      "productionBudget": 175000000,
      "worldwideBoxOffice": 880070886
    },
    {
      "number": 17,
      "releaseDate": "03-11-2017",
      "title": "Thor: Ragnarok",
      "productionBudget": 180000000,
      "worldwideBoxOffice": 850650283
    },
    {
      "number": 18,
      "releaseDate": "16-02-2018",
      "title": "Black Panther",
      "productionBudget": 200000000,
      "worldwideBoxOffice": 1346960289
    },
    {
      "number": 19,
      "releaseDate": "27-04-2018",
      "title": "Avengers: Infinity War",
      "productionBudget": 300000000,
      "worldwideBoxOffice": 2017483467
    },
    {
      "number": 20,
      "releaseDate": "06-06-2018",
      "title": "Ant-Man and the Wasp",
      "productionBudget": 130000000,
      "worldwideBoxOffice": 361759753
    },
    {
      "number": 21,
      "releaseDate": "Unknown",
      "title": "The Eternals",
      "productionBudget": 0,
      "worldwideBoxOffice": 0
    },
    {
      "number": 22,
      "releaseDate": "Unknown",
      "title": "Black Widow",
      "productionBudget": 0,
      "worldwideBoxOffice": 0
    },
    {
      "number": 23,
      "releaseDate": "08-05-2019",
      "title": "Captain Marvel",
      "productionBudget": 0,
      "worldwideBoxOffice": 0
    },
    {
      "number": 24,
      "releaseDate": "03-05-2019",
      "title": "UnreleaseDated Avengers Movie"
    },
    {
      "number": 25,
      "releaseDate": "05-07-2019",
      "title": "Spider-Man: Far From Home"
    },
    {
      "number": 26,
      "releaseDate": "2020",
      "title": "Guardians of the Galaxy Vol 3",
      "productionBudget": 0,
      "worldwideBoxOffice": 0
    }
  ]
}
  • I don't think it is possible for me to paste the code here, as I want to review the whole solution, how I broke the components, if I should be making more smaller components and how I have used the helper function. If this cannot be reviewed and answered here then I am on the wrong site. Can someone guide me to a place where the entire application solution can be reviewed and I can get some useful feedback to develop my skills. – Sambhav Gore Sep 25 at 15:02
  • @200_success I have added the actual code which I need reviewing the most. Can you please remove 'put on hold' and also remove the downvote ? thanks. – Sambhav Gore Sep 25 at 16:13

I don't know why you didn't clear the coding challenge. It looks mostly alright.

There's a couple of things I think could be improved:

  • getSortedData mutates the tableData. Only setState should be able to mutate state.
  • getSortedData has hard-coded the column names. Table was supposed to have dynamic columns. You could have solved this by sending in either custom sorter predicates or adding on a dataType property to each column definition.
  • 1
    Thank you for looking into it. I completely overlooked the mutating of the tableData. Thanks for pointing that out. For second part about types, I did write the following quote in my readme file as a feedback for reviewer (may be I should have done as you suggested instead by using predicates): ... adding a "type" (string|number|date ...) to the columns in data.json would make the solution more scalable as there would be no hardcoding for expected values for ids in the json data. Thanks. – Sambhav Gore Sep 26 at 12:56

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.