"@typescript-eslint/eslint-plugin" (#1298)

* tidy: replace any

* fix: resolve typescript eslint rule warnings

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"]
 }

explorer-old/Areas/index.tsx

@@ -67,7 +67,7 @@ function Areas() {
           {!error &&
             !loading &&
             data &&
-            data.areaStats.map((area: { meta: { name: any; }; }, index) => (
+            data.areaStats.map((area: { meta: { name: unknown; }; }, index) => (
               <TableRow key={index}>
                 {cells.map((cell) => (
                   <TableCell key={cell.key + 'c_' + index}>

explorer-old/HeadlineStats/index.tsx

@@ -24,7 +24,7 @@ const H_RED = '#FF6384';
 const H_GREEN = '#36A2EB';
 const H_YELLOW = '#FFCE56';
 
-function makeDoughnutData(labels: any[], data: any[]) {
+function makeDoughnutData(labels: unknown[], data: unknown[]) {
   return {
     labels,
     datasets: [
@@ -45,14 +45,14 @@ function HeadlineStats() {
 
   let { activeLoos, babyChanging, accessibleLoos } = data.proportions;
 
-  const getNames = (proportions: any[]) => {
-    return proportions.map((chunk: { name: any; }) => {
+  const getNames = (proportions: unknown[]) => {
+    return proportions.map((chunk: { name: unknown; }) => {
       return chunk.name;
     });
   };
 
-  const getValues = (proportions: any[]) => {
-    return proportions.map((chunk: { value: any; }) => {
+  const getValues = (proportions: unknown[]) => {
+    return proportions.map((chunk: { value: unknown; }) => {
       return chunk.value;
     });
   };

explorer-old/Loo/ExpandableReport.tsx

@@ -12,7 +12,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 import PropertyTable from './PropertyTable';
 
-export default function ExpandableReport(props: { report: any; }) {
+export default function ExpandableReport(props: { report: unknown; }) {
   let [expanded, setExpanded] = useState(false);
   let report = pickBy(props.report, (val) => val !== null);
   let displayProperties = omit(

explorer-old/Map/Chloropleth.tsx

@@ -30,7 +30,7 @@ const SCALE = [
 ];
 SCALE.reverse();
 
-function Chloropleth(props: { width?: any; height?: any; setTooltipContent?: any; options?: any; }) {
+function Chloropleth(props: { width?: unknown; height?: unknown; setTooltipContent?: unknown; options?: unknown; }) {
   const [position, setPosition] = useState({ coordinates: [0, 0], zoom: 1 });
   const [transformedStats, setTransformedStats] = useState();
   const [geography, setGeography] = useState();
@@ -68,7 +68,7 @@ function Chloropleth(props: { width?: any; height?: any; setTooltipContent?: any
     // Convert to valid TopoJSON form
     const newGeography = cloneDeep(areasData.mapAreas);
     const newObjects = {};
-    newGeography.objects.forEach((obj: { value: { geometries: any[]; }; name: string | number; }) => {
+    newGeography.objects.forEach((obj: { value: { geometries: unknown[]; }; name: string | number; }) => {
       obj.value.geometries.forEach((geom: { properties: string; }) => {
         geom.properties = JSON.parse(geom.properties);
       });
@@ -102,12 +102,12 @@ function Chloropleth(props: { width?: any; height?: any; setTooltipContent?: any
   }, [opts, geography, statsData]);
 
   // The function used to map the stats data into values
-  let statsFunc = (s: { [x: string]: any; }) => s[opts.statistic];
+  let statsFunc = (s: { [x: string]: unknown; }) => s[opts.statistic];
   if (opts.display === 'density') {
     statsFunc = (s: { [x: string]: number; area: { name: string | number; }; }) => s[opts.statistic] / areaSizes[s.area.name];
   }
 
-  let colourScale: (arg0: any) => any;
+  let colourScale: (arg0: unknown) => any;
   if (statsData && areaSizes) {
     colourScale = scaleQuantile()
       .domain(statsData.areaStats.map(statsFunc))

explorer-old/Map/index.tsx

@@ -12,9 +12,9 @@ const DEFAULT_OPTIONS = {
   display: 'density',
 };
 
-function Options(props: { onOptionChange: (arg0: any,arg1: any) => any; }) {
+function Options(props: { onOptionChange: (arg0: unknown,arg1: unknown) => any; }) {
   const getCallback = (optionName: string) => {
-    return (e: { target: { value: any; }; }) => props.onOptionChange(optionName, e.target.value);
+    return (e: { target: { value: unknown; }; }) => props.onOptionChange(optionName, e.target.value);
   };
 
   const year = new Date().getFullYear();

explorer-old/Search/Form/Autocomplete.tsx

@@ -10,7 +10,7 @@ import InputAdornment from '@material-ui/core/InputAdornment';
 import IconButton from '@material-ui/core/IconButton';
 import CloseOutlined from '@material-ui/icons/CloseOutlined';
 
-const renderInput = (inputProps: { [x: string]: any; fullWidth?: boolean; classes: any; InputProps: any; ref?: any; }) => {
+const renderInput = (inputProps: { [x: string]: unknown; fullWidth?: boolean; classes: unknown; InputProps: unknown; ref?: unknown; }) => {
   const { InputProps, classes, ref, ...other } = inputProps;
 
   return (
@@ -49,7 +49,7 @@ const renderSuggestion = ({
   );
 };
 
-function filterSuggestions(data: any[], value: string) {
+function filterSuggestions(data: unknown[], value: string) {
   const inputValue = deburr(value.trim()).toLowerCase();
   const inputLength = inputValue.length;
   let count = 0;
@@ -69,7 +69,7 @@ function filterSuggestions(data: any[], value: string) {
       });
 }
 
-function Autocomplete(props: { [x: string]: any; classes: any; id: any; onChange: any; value: any; query: any; placeholderText: any; clearAriaLabel: any; }) {
+function Autocomplete(props: { [x: string]: unknown; classes: unknown; id: unknown; onChange: unknown; value: unknown; query: unknown; placeholderText: unknown; clearAriaLabel: unknown; }) {
   const {
     classes,
     id,
@@ -83,7 +83,7 @@ function Autocomplete(props: { [x: string]: any; classes: any; id: any; onChange
 
   const { data } = useSWR(query);
 
-  const items = data?.items?.map((i: { label: any; }) => i.label) || [];
+  const items = data?.items?.map((i: { label: unknown; }) => i.label) || [];
 
   return (
     <Downshift id={id} onChange={onChange} selectedItem={value} {...others}>

explorer-old/Search/Results/Row.tsx

@@ -17,7 +17,7 @@ const MISSING_MESSAGE = 'Not Recorded';
 
 export default function ResultRow({ loo }) {
   const { name, area } = loo;
-  const contributors = loo.reports.reduce((current: any[], next: { contributor: any; }) => {
+  const contributors = loo.reports.reduce((current: unknown[], next: { contributor: unknown; }) => {
     current.push(next.contributor);
     return current;
   }, []);

explorer-old/Search/Results/index.tsx

@@ -9,7 +9,7 @@ import TablePagination from '@material-ui/core/TablePagination';
 
 import ResultRow from './Row';
 
-function Results(props: { data: any; rowsPerPage: any; handleChangePage: any; handleChangeRowsPerPage: any; }) {
+function Results(props: { data: unknown; rowsPerPage: unknown; handleChangePage: unknown; handleChangeRowsPerPage: unknown; }) {
   const {
     data,
     rowsPerPage,

explorer-old/Search/index.tsx

@@ -52,7 +52,7 @@ export default function Search() {
         data={data.loos}
         rowsPerPage={variables.limit}
         handleChangePage={(e, page) => search({ page })}
-        handleChangeRowsPerPage={(e: { target: { value: any; }; }) => search({ limit: e.target.value })}
+        handleChangeRowsPerPage={(e: { target: { value: unknown; }; }) => search({ limit: e.target.value })}
       />
     </>
   );

package.json

@@ -99,6 +99,7 @@
     "@types/react-dom": "17.0.14",
     "@types/react-leaflet": "2.8.2",
     "@types/styled-system": "5.1.15",
+    "@typescript-eslint/eslint-plugin": "5.16.0",
     "cli-progress": "3.10.0",
     "dotenv": "16.0.0",
     "eslint": "8.12.0",

src/api-client/withApollo.tsx

@@ -82,7 +82,7 @@ export function getApolloClient(
 }
 
 export const withApollo = (Comp: NextPage) =>
-  function ApolloWrapper(props: any) {
+  function ApolloWrapper(props: unknown) {
     return (
       <ApolloProvider client={getApolloClient(props.apolloState)}>
         <Comp {...props} />

src/api/directives/authDirective.ts

@@ -3,9 +3,10 @@ import { mapSchema, getDirective, MapperKind } from '@graphql-tools/utils';
 import { GraphQLSchema, defaultFieldResolver } from 'graphql';
 
 export default function authDirective(directiveName: string) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const typeDirectiveArgumentMaps: Record<string, any> = {};
   return {
-    authDirectiveTypeDefs: `directive @${directiveName}(requires: Permission) on OBJECT | FIELD_DEFINITION
+    authDirectiveTypeDefs: `directive @${directiveName}(requires: Permission) on OBJECT |FIELD_DEFINITION
 
     enum Permission {
       SUBMIT_REPORT

src/components/Control/Control.tsx

@@ -10,7 +10,7 @@ const POSITION_CLASSES = {
 };
 
 const Control = (props): JSX.Element => {
-  const [container, setContainer] = React.useState<any>(
+  const [container, setContainer] = React.useState<HTMLElement>(
     document.createElement('div')
   );
   const positionClass =
@@ -19,7 +19,7 @@ const Control = (props): JSX.Element => {
 
   React.useEffect(() => {
     const targetDiv = document.getElementsByClassName(positionClass);
-    setContainer(targetDiv[0]);
+    setContainer(targetDiv[0] as HTMLElement);
   }, [positionClass]);
 
   const controlContainer = (

src/components/EntryForm.tsx

@@ -190,7 +190,7 @@ const EntryForm = ({ title, loo, children, ...props }) => {
   const hasOpeningTimes = Boolean(loo.openingTimes);
 
   const isOpen = loo.openingTimes
-    ? loo.openingTimes.map((x: string | any[]) => !isClosed(x))
+    ? loo.openingTimes.map((x: string | unknown[]) => !isClosed(x))
     : WEEKDAYS.map(() => false);
 
   const { register, control, handleSubmit, formState, setValue, getValues } =
@@ -200,7 +200,7 @@ const EntryForm = ({ title, loo, children, ...props }) => {
   const { isDirty, dirtyFields } = formState;
 
   const onSubmit = (data: {
-    [x: string]: any;
+    [x: string]: unknown;
     isFree: string;
     geometry: { coordinates: string[] };
   }) => {

src/components/Filters.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {
   faPoundSign,
   faBaby,

src/components/Header/MainMenu.tsx

@@ -12,7 +12,7 @@ const StyledNavLink = styled(Link)<
     onMouseEnter?: React.MouseEventHandler<Element> | undefined;
     onClick: React.MouseEventHandler;
     href?: string | undefined;
-    ref?: any;
+    ref?: unknown;
   }
 >`
   // active class is added by NavLink component
@@ -28,7 +28,7 @@ interface IMainMenu {
 }
 
 // Todo: Contact link
-const MainMenu = ({ mapCenter, onMenuItemClick, children }: IMainMenu) => {
+const MainMenu = ({ children }: IMainMenu) => {
   const { user } = useUser();
   const [mapState] = useMapState();
 

src/components/LocationSearch/LocationSearch.tsx

@@ -38,8 +38,8 @@ const LocationSearch = ({ onSelectedItemChange }) => {
   };
 
   const stateReducer = (
-    state: { isOpen: any; selectedItem: any; inputValue: any },
-    actionAndChanges: { type: any; changes: any }
+    state: { isOpen: unknown; selectedItem: unknown; inputValue: unknown },
+    actionAndChanges: { type: unknown; changes: unknown }
   ) => {
     switch (actionAndChanges.type) {
       case useCombobox.stateChangeTypes.InputBlur:

src/components/LocationSearch/useNominatimAutocomplete.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import debounce from 'lodash/debounce';
 
-const useNominatimAutocomplete = (input: string | any[]) => {
+const useNominatimAutocomplete = (input: string | unknown[]) => {
   const [places, setPlaces] = React.useState([]);
 
   const fetchHandler = async (input) => {
@@ -15,7 +15,12 @@ const useNominatimAutocomplete = (input: string | any[]) => {
     }
 
     const locationResults = results.map(
-      (item: { place_id: any; display_name: any; lat: any; lon: any }) => ({
+      (item: {
+        place_id: unknown;
+        display_name: unknown;
+        lat: unknown;
+        lon: unknown;
+      }) => ({
         id: item.place_id,
         label: item.display_name,
         location: {

src/components/LocationSearch/usePlacesAutocomplete.ts

@@ -45,24 +45,27 @@ const usePlacesSessionToken = () => {
   return [token, reset];
 };
 
-const usePlacesAutocomplete = (input: string | any[]) => {
+const usePlacesAutocomplete = (input: string | unknown[]) => {
   const autocompleteService = usePlacesAutocompleteService();
 
   const [sessionToken, resetSessionToken] = usePlacesSessionToken();
 
   const [places, setPlaces] = React.useState([]);
 
   const fetchPlaces = debounce((input) => {
-    const onFetchCompleted = (places: any[]) => {
+    const onFetchCompleted = (places: unknown[]) => {
       if (!places) {
         return;
       }
 
       const locationResults = places.map(
         (item: {
-          id: any;
-          place_id: any;
-          structured_formatting: { main_text: any; secondary_text: any };
+          id: unknown;
+          place_id: unknown;
+          structured_formatting: {
+            main_text: unknown;
+            secondary_text: unknown;
+          };
         }) => ({
           id: item.id,
           placeId: item.place_id,
@@ -110,7 +113,7 @@ const usePlacesAutocomplete = (input: string | any[]) => {
       placesService.getDetails(
         { placeId, sessionToken },
         (
-          result: { geometry: { location: { lat: any; lng: any } } },
+          result: { geometry: { location: { lat: unknown; lng: unknown } } },
           status
         ) => {
           if (status !== OK) {

src/components/Login.tsx

@@ -17,7 +17,7 @@ const ListItem = (props: BoxProps) => (
   <Box as="li" marginTop={2} marginLeft={4} {...props} />
 );
 
-const LoginPage = (props) => {
+const LoginPage = () => {
   const router = useRouter();
   return (
     <Box my={5}>

src/components/LooMap/AccessibilityIntersection.tsx

@@ -12,7 +12,6 @@ const AccessibilityIntersection = ({
   center,
   onIntersection,
   onSelection,
-  ...props
 }: {
   toilets: CompressedLooObject[];
   center: { lat: number; lng: number };

src/components/LooMap/LooMap.tsx

@@ -56,7 +56,6 @@ const LooMap: React.FC<LooMapProps> = ({
   minZoom,
   maxZoom = 18,
   staticMap = false,
-  onViewportChanged = () => {},
   withAccessibilityOverlays = true,
 }) => {
   const [mapState, setMapState] = useMapState();
@@ -115,7 +114,7 @@ const LooMap: React.FC<LooMapProps> = ({
   React.useEffect(() => {
     if (withAccessibilityOverlays && mapState.map) {
       const callback = function (mutationsList) {
-        for (let mutation of mutationsList) {
+        for (const mutation of mutationsList) {
           const focusVisible = mutation.target.dataset.focusVisibleAdded === '';
           if (focusVisible !== renderAccessibilityOverlays) {
             setRenderAccessibilityOverlays(focusVisible);
@@ -146,7 +145,7 @@ const LooMap: React.FC<LooMapProps> = ({
 
   // Begin location service initialisation.
   const onLocationFound = useCallback(
-    (event: { latitude: any; longitude: any }) => {
+    (event: { latitude: unknown; longitude: unknown }) => {
       setMapState({
         geolocation: {
           lat: event.latitude,