Repository: covid19india/covid19india-react
File: src/components/row.js (JavaScript)

Code before:

  useEffect(()=>{
    sort(districts);
  }, [districts]);

  const handleReveal = () => {
    props.handleReveal(props.state.state);
  };
  
  const sort = (aDistricts) => {
    sortedDistricts = {};
    if(aDistricts) {
      Object.keys(aDistricts).sort((district1, district2) => {
        const sortColumn = sortData.sortColumn;
        let value1 = aDistricts[district1][sortColumn];
        let value2 = aDistricts[district2][sortColumn];
        if (sortColumn === 'district') {
          value1 = district1;
          value2 = district2;
        } else {
          value1 = parseInt(value1);
          value2 = parseInt(value2);
        }

        if (sortData.isAscending) {
          return value1 > value2 ? 1 : (value1 == value2) && district1 > district2 ? 1 : -1;
        } else {
          return value1 < value2 ? 1 : (value1 == value2) && district1 > district2 ? 1 : -1;
        }
      }).forEach(key => {
        sortedDistricts[key] = aDistricts[key];
      });
    }
  };

  const handleSort = (e, props) => {
    const currentsortColumn = e.currentTarget.querySelector('abbr').getAttribute('title').toLowerCase();
    const isAscending = sortData.sortColumn == currentsortColumn? !sortData.isAscending : sortData.sortColumn === 'district';
    setSortData({
      sortColumn: currentsortColumn,
      isAscending: isAscending ,
    });
    localStorage.setItem('district.sortColumn', currentsortColumn);
    localStorage.setItem('district.isAscending', isAscending);
  };

  sort(districts);

  return (
    <React.Fragment>
      <span className={`dropdown ${props.reveal ? 'rotateRightDown' : 'rotateDownRight' }`} style={{display: !props.total ? '' : 'none'}} onClick={()=>{

Review comment (suggestion):
You don't need to repeat the same logic again two lines down. You can simply muliply with -1 if `sortData.isAscending` is `false`

Code after:

  useEffect(()=>{
    sort(districts);
  }, [districts]);

  const handleReveal = () => {
    props.handleReveal(props.state.state);
  };
  
  const sort = (aDistricts) => {
    sortedDistricts = {};
    if(aDistricts) {
      Object.keys(aDistricts).sort((district1, district2) => {
        const sortColumn = sortData.sortColumn;
        let value1 = sortColumn === 'district' ? district1 : parseInt(aDistricts[district1].confirmed);
        let value2 = sortColumn === 'district' ? district2 : parseInt(aDistricts[district2].confirmed);
        let comparisonValue = value1 > value2 ? 1 : (value1 == value2) && district1 > district2 ? 1 : -1;
        return sortData.isAscending? comparisonValue : (comparisonValue * -1)
      }).forEach(key => {
        sortedDistricts[key] = aDistricts[key];
      });
    }
  };

  const handleSort = (column) => {
    const isAscending = sortData.sortColumn == column? !sortData.isAscending : sortData.sortColumn === 'district';
    setSortData({
      sortColumn: column,
      isAscending: isAscending ,
    });
    localStorage.setItem('district.sortColumn', column);
    localStorage.setItem('district.isAscending', isAscending);
  };

  sort(districts);

  return (
    <React.Fragment>
      <span className={`dropdown ${props.reveal ? 'rotateRightDown' : 'rotateDownRight' }`} style={{display: !props.total ? '' : 'none'}} onClick={()=>{
        handleReveal();
      }}>
        <Icon.ChevronDown/>
      </span>
      <tr className={props.total ? 'state is-total' : 'state'} className={props.total ? 'is-total' : ''}
        onMouseEnter={() => props.onHighlightState?.(state, props.index)}
        onMouseLeave={() => props.onHighlightState?.()}
        touchstart={() => props.onHighlightState?.(state, props.index)}
        onClick={()=>{
          handleReveal();
        }}>
        <td style={{fontWeight: 600}}>{state.state}</td>