refactor: use better standard conventions

hotosm · Oct 1, 2024 · 240afd8 · 240afd8
1 parent 302d623
commit 240afd8
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 10 deletions.
diff --git a/frontend/src/components/partnerMapswipeStats/contributionsGrid.js b/frontend/src/components/partnerMapswipeStats/contributionsGrid.js
@@ -5,8 +5,8 @@ import PropTypes from 'prop-types';
 
 import messages from './messages';
 
+const LEGEND_INDEXES = [30, 50, 70, 100];
 const Legend = () => {
-  const indexes = [30, 50, 70, 100];
   const legendFontStyle = 'ph2 f7 blue-grey ttc';
 
   return (
@@ -15,7 +15,7 @@ const Legend = () => {
         <FormattedMessage {...messages.contributionsGridLegendLess} />
       </span>
       <div className={`dib h1 w1 bg-tan`}></div>
-      {indexes.map((i) => (
+      {LEGEND_INDEXES.map((i) => (
         <div key={i} className={`dib h1 w1 bg-red o-${i}`}></div>
       ))}
       <span className={legendFontStyle}>
@@ -26,7 +26,7 @@ const Legend = () => {
 };
 
 export const ContributionsGrid = ({ contributionsByDate = [] }) => {
-  contributionsByDate = contributionsByDate.map((contribution) => ({
+  const gridData = contributionsByDate.map((contribution) => ({
     date: contribution.taskDate,
     count: contribution.totalcontributions,
   }));
@@ -46,7 +46,7 @@ export const ContributionsGrid = ({ contributionsByDate = [] }) => {
       : formatDate(new Date(currentYear, 11, 31));
   };
 
-  const countValues = contributionsByDate.map((contribution) => contribution.count);
+  const countValues = gridData.map((contribution) => contribution.count);
   const maxValue = Math.max(...countValues);
 
   const getHeatmapClass = (value) => {
@@ -79,7 +79,7 @@ export const ContributionsGrid = ({ contributionsByDate = [] }) => {
         <CalendarHeatmap
           startDate={getDate()}
           endDate={getDate(true)}
-          values={contributionsByDate}
+          values={gridData}
           classForValue={(value) => {
             if (!value) return 'fill-tan';
             return getHeatmapClass(value);
@@ -100,7 +100,7 @@ export const ContributionsGrid = ({ contributionsByDate = [] }) => {
             };
           }}
         />
-        <Tooltip id={'partnerMapswipeContributionsGridTooltip'} />
+        <Tooltip id="partnerMapswipeContributionsGridTooltip" />
         <Legend />
       </div>
     </div>

diff --git a/frontend/src/components/partnerMapswipeStats/contributionsHeatmap.css b/frontend/src/components/partnerMapswipeStats/contributionsHeatmap.css
@@ -1,5 +1,6 @@
 .partner-mapswipe-heatmap-zoom-text {
   visibility: hidden;
+  user-select: none;
 }
 .partner-mapswipe-heatmap-wrapper:hover .partner-mapswipe-heatmap-zoom-text {
   visibility: visible;

diff --git a/frontend/src/components/partnerMapswipeStats/contributionsHeatmap.js b/frontend/src/components/partnerMapswipeStats/contributionsHeatmap.js
@@ -191,10 +191,7 @@ export const ContributionsHeatmap = ({ contributionsByGeo = [] }) => {
       <div className="relative partner-mapswipe-heatmap-wrapper">
         <div ref={mapContainer} style={{ width: '100%', height: '650px' }} className="shadow-6" />
         <div className="flex items-center justify-start absolute top-0 left-0 right-0 pa2">
-          <p
-            className="ma0 pa1 bg-white ba b--black-20 br2 partner-mapswipe-heatmap-zoom-text"
-            style={{ userSelect: 'none' }}
-          >
+          <p className="ma0 pa1 bg-blue-dark white ba b--black-20 br2 partner-mapswipe-heatmap-zoom-text">
             Use Ctrl + Scroll to zoom
           </p>
         </div>