chore: add linter, fix linter bugs

.eslintrc.js

+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: ['react', '@typescript-eslint'],
+  rules: {
+    'react/prop-types': 0,
+  },
+};

package.json

@@ -3,7 +3,8 @@
     "start": "snowpack dev",
     "build": "snowpack build && npm run copy:htaccess",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
-    "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
+    "prettier:lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
+    "eslint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "copy:htaccess": "cp public/.htaccess build/"
   },
   "dependencies": {
@@ -30,7 +31,12 @@
     "@types/react-dom": "^17.0.5",
     "@types/react-router-dom": "^5.1.7",
     "@types/snowpack-env": "^2.3.2",
+    "@typescript-eslint/eslint-plugin": "^4.24.0",
+    "@typescript-eslint/parser": "^4.24.0",
     "autoprefixer": "^10.2.4",
+    "eslint": "^7.26.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-react": "^7.23.2",
     "postcss": "^8.3.0",
     "postcss-cli": "^8.3.1",
     "prettier": "^2.3.0",

src/components/App.tsx

@@ -8,7 +8,7 @@ import SidebarCreateView from './Sidebar/SidebarCreateView';
 import SidebarListView from './Sidebar/SidebarListView';
 import SidebarSingleView from './Sidebar/SidebarSingleView';
 
-const App = () => {
+const App: React.FC = () => {
   const selectedPoi = useStore((state) => state.selectedPoi);
 
   return (
@@ -16,7 +16,7 @@ const App = () => {
       <ErrorModal />
       <Notification />
       <div className={'flex md:flex-row-reverse flex-col h-full'}>
-        <Route path="/add" children={({ match }) => <Map createMode={!!match} />} />
+        <Route path="/add">{({ match }) => <Map createMode={!!match} />}</Route>
         <Switch>
           <Route exact path="/add">
             <SidebarCreateView />

src/components/ErrorModal.tsx

@@ -3,9 +3,7 @@ import React from 'react';
 import { useStore } from '../hooks';
 import Modal from './Modal';
 
-interface Props {}
-
-const ErrorModal: React.FC<Props> = () => {
+const ErrorModal: React.FC = () => {
   const error = useStore((state) => state.error);
   const icons: { [index: string]: JSX.Element } = {
     alert: <AlertIcon className="h-6 w-6 text-red-600" />,

src/components/Form/AddPoiForm.tsx

@@ -13,9 +13,7 @@ import { removeDuplicateObjects } from '../../util/array';
 import { createPoi, createTags } from '../../graphql/mutations';
 import Spinner from '../Spinner';
 
-interface Props {}
-
-const AddPoiForm: React.FC<Props> = () => {
+const AddPoiForm: React.FC = () => {
   const [formData, setFormData] = useState<PointOfInterestFormData>({
     lat: 0,
     lng: 0,
@@ -57,9 +55,9 @@ const AddPoiForm: React.FC<Props> = () => {
 
     setIsLoading(true);
     try {
-      let newTags: Tag[] = [];
-      let newTagIdsResponse: number[] = [];
-      let oldTags: Tag[] = [];
+      const newTags: Tag[] = [];
+      const newTagIdsResponse: number[] = [];
+      const oldTags: Tag[] = [];
       selectedTags.forEach((tag) => (tag.id === 'draft' ? newTags.push(tag) : oldTags.push(tag)));
 
       if (newTags.length) {

src/components/Form/CoordinateInput.tsx

@@ -18,7 +18,7 @@ const CoordinateInput: React.FC<Props> = ({ label, text, value, required }) => {
         </span>
       )}
       <label className="flex mt-1 mb-4 p-2 items-center w-full rounded-lg border-2 border-black border-opacity-20 hover:border-opacity-40 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
-        <CheckIcon className={`${Boolean(value.filter(Boolean).length) ? 'text-indigo-500' : 'text-gray-400'} mr-2`} />
+        <CheckIcon className={`${value.filter(Boolean).length ? 'text-indigo-500' : 'text-gray-400'} mr-2`} />
         <input readOnly type="text" name={'lat'} value={value[0]} className="hidden" required={required}></input>
         <input readOnly type="text" name={'lng'} value={value[1]} className="hidden" required={required}></input>
         {!!text && <span className="form-label">{text}</span>}

src/components/Form/FileInput.tsx

@@ -23,7 +23,7 @@ const FileInput: React.FC<Props> = ({ name, label, value, onChange, ...inputProp
             : ' bg-indigo-500 text-white border-opacity-0 hover:bg-indigo-600 text-md'
         }`}
       >
-        {!!value ? (
+        {value ? (
           <>
             <PaperClipIcon size={18} className="flex-shrink-0 mr-2" />
             {value.name}

src/components/Form/TagInput.tsx

@@ -11,7 +11,7 @@ interface Props {
   required?: boolean;
 }
 
-const TagInput = ({ label, tags, options, onTagsChange, required }: Props) => {
+const TagInput: React.FC = ({ label, tags, options, onTagsChange, required }: Props) => {
   // const [allTags, setAllTags] = useState<TagType[]>([]);
   // All options
   const [tagOptions, setTagOptions] = useState<TagType[]>([]);
@@ -117,7 +117,7 @@ const TagInput = ({ label, tags, options, onTagsChange, required }: Props) => {
             return (
               <li
                 key={`${option.id}`}
-                onMouseDown={(e) => {
+                onMouseDown={() => {
                   handleSelectTag(option);
                 }}
                 className="w-full p-1 hover:bg-gray-100"

src/components/Form/TextInput.tsx

-import React, { MutableRefObject, useRef } from 'react';
+import React from 'react';
 
 interface Props {
   label: string;

src/components/Notification.tsx

@@ -2,9 +2,7 @@ import React from 'react';
 import { CheckCircleOutline as CheckIcon, X as XIcon, ExclamationOutline as AlertIcon } from 'heroicons-react';
 import { useStore } from '../hooks';
 
-interface Props {}
-
-const Notification: React.FC<Props> = () => {
+const Notification: React.FC = () => {
   const notification = useStore((state) => state.notification);
   const setNotification = useStore((state) => state.setNotification);
 

src/components/Sidebar/SidebarCreateView.tsx

@@ -4,9 +4,7 @@ import { useHistory } from 'react-router-dom';
 import AddPoiForm from '../Form/AddPoiForm';
 import SidebarContainer from './SidebarContainer';
 
-interface Props {}
-
-const SidebarCreateView: React.FC<Props> = () => {
+const SidebarCreateView: React.FC = () => {
   const history = useHistory();
   return (
     <SidebarContainer className="p-5">

src/components/Sidebar/SidebarListView.tsx

@@ -3,9 +3,7 @@ import { usePoiData, useStore } from '../../hooks';
 import ListElement from './ListElement';
 import SidebarContainer from './SidebarContainer';
 
-interface Props {}
-
-const SidebarListView: React.FC<Props> = () => {
+const SidebarListView: React.FC = () => {
   const { data } = usePoiData();
   const hoveredPoi = useStore((state) => state.hoveredPoi);
   const setHoveredPoi = useStore((state) => state.setHoveredPoi);

src/components/Sidebar/SidebarSingleView.tsx

@@ -4,9 +4,7 @@ import { useStore } from '../../hooks';
 import SidebarContainer from './SidebarContainer';
 import Tag from '../Tag';
 
-interface Props {}
-
-const SidebarSingleView: React.FC<Props> = () => {
+const SidebarSingleView: React.FC = () => {
   const selectedPoi = useStore((state) => state.selectedPoi);
   const setSelectedPoi = useStore((state) => state.setSelectedPoi);
   const strippedUrl = selectedPoi?.website?.replace(/(^\w+:|^)\/\//, '');

src/components/Spinner.tsx

 import React from 'react';
 
-interface Props {}
-
-const Spinner: React.FC<Props> = () => {
+const Spinner: React.FC = () => {
   return (
     <svg
       className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"

src/components/SwrWrapper.tsx

@@ -3,9 +3,7 @@ import { SWRConfig } from 'swr';
 import { useStore } from '../hooks';
 import fetcher from '../util/fetcher';
 
-interface Props {}
-
-const SwrWrapper: React.FC<Props> = ({ children }) => {
+const SwrWrapper: React.FC = ({ children }) => {
   const setError = useStore((state) => state.setError);
   const error = useStore((state) => state.error);
   return (

src/hooks/usePoiData.ts

-import type { PointsOfInterestDTO } from 'src/types/PointOfInterest';
+import type { PointOfInterest, PointsOfInterestDTO } from 'src/types/PointOfInterest';
 import useSWR from 'swr';
 
-export const usePoiData = () => {
+interface poiData {
+  data: PointOfInterest[] | undefined;
+}
+
+export const usePoiData = (): poiData => {
   const { data } = useSWR<PointsOfInterestDTO>(
     `{
       pois {

src/hooks/useStore.ts

@@ -2,7 +2,7 @@ import type { Error } from 'src/types/Error';
 import type { PointOfInterest } from 'src/types/PointOfInterest';
 import type { Notification } from 'src/types/Notification';
 import type { LatLngTuple } from 'leaflet';
-import create, { GetState, SetState, State, StateCreator, StoreApi } from 'zustand';
+import create, { State } from 'zustand';
 import { devtools } from 'zustand/middleware';
 
 interface Store extends State {

src/util/array.ts

-export function removeDuplicateObjects<T>(arr: T[], key: keyof T) {
+export function removeDuplicateObjects<T>(arr: T[], key: keyof T): T[] {
   const tagMap = new Map(arr.map((item: T) => [item[key], item]));
   return [...tagMap.values()];
 }

src/util/color.ts

-export function generateRandomHslColor(saturation = 100, lightness = 50) {
+export function generateRandomHslColor(saturation = 100, lightness = 50): string {
   const randomHue = getRandomIntInclusive(0, 360);
   const color = `hsl(${randomHue},${saturation}%,${lightness}%)`;
   return color;