refactor: clean imports, add proptypes, and address linting warnings

frontend/src/components/partnerMapswipeStats/contributionsHeatmap.js

@@ -5,8 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 import 'mapbox-gl/dist/mapbox-gl.css';
 
-import { MAPBOX_TOKEN, MAP_STYLE } from '../../config';
-import { CHART_COLOURS } from '../../config';
+import { MAPBOX_TOKEN, MAP_STYLE, CHART_COLOURS } from '../../config';
 import { ZoomPlusIcon, ZoomMinusIcon } from '../svgIcons';
 import messages from './messages';
 import './contributionsHeatmap.css';
@@ -164,14 +163,13 @@ export const ContributionsHeatmap = ({ contributionsByGeo = [] }) => {
         // Check if CTRL key is pressed
         event.originalEvent.preventDefault(); // Prevent chrome/firefox default behavior
         if (!map.current.scrollZoom._enabled) map.current.scrollZoom.enable(); // Enable zoom only if it's disabled
-      } else {
-        if (map.current.scrollZoom._enabled) map.current.scrollZoom.disable(); // Disable zoom only if it's enabled
+      } else if (map.current.scrollZoom._enabled) {
+        map.current.scrollZoom.disable(); // Disable zoom only if it's enabled
       }
     });
 
     map.current.on('zoomend', () => {
       const currentZoom = map.current.getZoom();
-      console.log(currentZoom, 'ZOOM');
       const h3ResBasedOnZoom =
         currentZoom >= 1
           ? zoomToH3ResMapping[parseInt(currentZoom)] ?? Math.floor((currentZoom - 2) * 0.7)
@@ -200,7 +198,7 @@ export const ContributionsHeatmap = ({ contributionsByGeo = [] }) => {
     }
   };
 
-  const shouldDisableZoomOut = zoom === '0.75' || zoom === 0.75;
+  const shouldDisableZoomOut = zoom === 0.75;
 
   return (
     <div>

frontend/src/components/partnerMapswipeStats/groupMembers.js

@@ -72,7 +72,7 @@ export const GroupMembers = () => {
 
   const rows = 10;
 
-  const { isLoading, isError, data, isFetching, isPreviousData } = useQuery({
+  const { isLoading, isError, data, isFetching } = useQuery({
     queryKey: ['partners-mapswipe-statistics-group-members', partnerPermalink, pageNumber],
     queryFn: async () => {
       const response = await fetchLocalJSONAPI(

frontend/src/components/partnerMapswipeStats/swipesByOrganisation.js

@@ -76,6 +76,7 @@ export const SwipesByOrganisation = ({ contributionsByOrganization = [] }) => {
         chartInstance.current.destroy();
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

frontend/src/components/partnerMapswipeStats/swipesByProjectType.js

@@ -85,6 +85,7 @@ export const SwipesByProjectType = ({ contributionsByProjectType = [] }) => {
         chartInstance.current.destroy();
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

frontend/src/components/statsCard.js

@@ -1,4 +1,6 @@
 import { FormattedNumber } from 'react-intl';
+import PropTypes from 'prop-types';
+
 import shortNumber from 'short-number';
 
 export const StatsCard = ({ icon, description, value, className, invertColors = false }) => {
@@ -26,7 +28,7 @@ export const StatsCardWithFooter = ({
   className,
   delta,
   invertColors = false,
-  style
+  style,
 }) => {
   return (
     <div
@@ -58,25 +60,37 @@ export const StatsCardWithFooter = ({
   );
 };
 
+StatsCardWithFooter.propTypes = {
+  icon: PropTypes.node,
+  description: PropTypes.node,
+  value: PropTypes.node,
+  className: PropTypes.string,
+  delta: PropTypes.node,
+  invertColors: PropTypes.bool,
+  style: PropTypes.object,
+};
+
 export const StatsCardContent = ({ value, label, className, invertColors = false }: Object) => (
   <div className={className}>
     <h3 className={`ma0 mb1 barlow-condensed f2 fw5 ${invertColors ? 'white' : 'red'}`}>{value}</h3>
     <span className={`ma0 h2 f7 fw5 ${invertColors ? 'white' : 'blue-grey'}`}>{label}</span>
   </div>
 );
 
-export const StatsCardWithFooterContent = ({
-  value,
-  label,
-  className,
-  invertColors = false,
-}: Object) => (
+export const StatsCardWithFooterContent = ({ value, label, className, invertColors = false }) => (
   <div className={className}>
     <h3 className={`ma0 mb1 barlow-condensed f1 fw6 ${invertColors ? 'white' : 'red'}`}>{value}</h3>
     <span className={`ma0 h2 f6 fw6 ${invertColors ? 'white' : 'blue-grey'}`}>{label}</span>
   </div>
 );
 
+StatsCardWithFooterContent.propTypes = {
+  value: PropTypes.node,
+  label: PropTypes.node,
+  className: PropTypes.string,
+  invertColors: PropTypes.bool,
+};
+
 function getFormattedNumber(num) {
   if (typeof num !== 'number') return '-';
   const value = shortNumber(num);