Feat: Highlight currently selected row in table. (#1482)

Author: nayakrahul

src/App.scss

@@ -1545,9 +1545,12 @@ table {
     tr {
       cursor: pointer;
 
-      &:hover {
+      &.is-highlighted {
         background: $gray-hover !important;
+      }
 
+      &:hover {
+        background: $gray-hover !important;
 
         .dropdown {
           background: $gray-hover;

src/components/home.js

@@ -29,6 +29,11 @@ function Home(props) {
   const [fetched, setFetched] = useState(false);
   const [activeStateCode, setActiveStateCode] = useState('TT');
   const [regionHighlighted, setRegionHighlighted] = useState(undefined);
+  const [rowHighlighted, setRowHighlighted] = useState({
+    statecode: undefined,
+    isDistrict: false,
+    districtName: undefined,
+  });
   const [showUpdates, setShowUpdates] = useState(false);
   const [anchor, setAnchor] = useState(null);
   const [lastViewedLog, setLastViewedLog] = useLocalStorage(
@@ -110,8 +115,20 @@ function Home(props) {
     setRegionHighlighted({district, state, index});
   };
 
-  const onMapHighlightChange = useCallback(({statecode}) => {
-    setActiveStateCode(statecode);
+  const onMapHighlightChange = useCallback((region) => {
+    setActiveStateCode(region.statecode);
+    if ('districtName' in region)
+      setRowHighlighted({
+        statecode: region.statecode,
+        isDistrict: true,
+        districtName: region.districtName,
+      });
+    else
+      setRowHighlighted({
+        statecode: region.statecode,
+        isDistrict: false,
+        districtName: undefined,
+      });
   }, []);
 
   return (
@@ -159,6 +176,7 @@ function Home(props) {
               states={states}
               summary={false}
               stateDistrictWiseData={stateDistrictWiseData}
+              rowHighlighted={rowHighlighted}
               onHighlightState={onHighlightState}
               onHighlightDistrict={onHighlightDistrict}
             />

src/components/mapexplorer.js

@@ -123,6 +123,7 @@ function MapExplorer({
         setPanelRegion(panelRegion);
         currentHoveredRegion.statecode = panelRegion.statecode;
         setCurrentHoveredRegion(currentHoveredRegion);
+        panelRegion.districtName = currentHoveredRegion.name;
         if (onMapHighlightChange) onMapHighlightChange(panelRegion);
       }
     },

src/components/row.js

@@ -98,7 +98,7 @@ function Row(props) {
       <tr
         className={`state ${props.total ? 'is-total' : ''} ${
           props.index % 2 === 0 ? 'is-odd' : ''
-        }`}
+        } ${props.isHighlighted ? 'is-highlighted' : ''}`}
         onMouseEnter={() => props.onHighlightState?.(state, props.index)}
         onMouseLeave={() => props.onHighlightState?.()}
         onClick={!props.total ? handleReveal : null}
@@ -275,7 +275,11 @@ function Row(props) {
               return (
                 <tr
                   key={index}
-                  className={`district ${index % 2 === 0 ? 'is-odd' : ''}`}
+                  className={`district ${index % 2 === 0 ? 'is-odd' : ''} ${
+                    props.highlightedDistrict === district
+                      ? 'is-highlighted'
+                      : ''
+                  }`}
                   style={{
                     background: index % 2 === 0 ? '#f8f9fa' : '',
                   }}

src/components/table.js

@@ -3,8 +3,11 @@ import Row from './row';
 import React, {useState, useEffect} from 'react';
 import {Link} from 'react-router-dom';
 
-const isEqual = () => {
-  return true;
+const isEqual = (prevProps, currProps) => {
+  return (
+    JSON.stringify(prevProps.rowHighlighted) ===
+    JSON.stringify(currProps.rowHighlighted)
+  );
 };
 
 function Table(props) {
@@ -271,6 +274,16 @@ function Table(props) {
                         ? districts[state.state].districtData
                         : []
                     }
+                    isHighlighted={
+                      !props.rowHighlighted.isDistrict &&
+                      props.rowHighlighted.statecode === state.statecode
+                    }
+                    highlightedDistrict={
+                      props.rowHighlighted.isDistrict &&
+                      props.rowHighlighted.statecode === state.statecode
+                        ? props.rowHighlighted.districtName
+                        : null
+                    }
                     onHighlightState={props.onHighlightState}
                     onHighlightDistrict={props.onHighlightDistrict}
                     handleReveal={handleReveal}