chore: add eslint and cleanup (#118)

* refactor: modified existing react imports to conform with the recommended approach of not using the default export directly, since it will be deprecated in one of the future releases. see https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html for more info. note: react types don't require importing of react.
refactor: cleaned up some of the imports

* feat: added eslint and fixed all the errors/warning. eslint can now be invoked by running "npm run lint".
chore: updated .gitignore not to include unnecessary artefacts.
refactor: re-organized some of the imports.

* refactor: converted remaining few typed functional components to proper prop argument structure.

* fix: fixed small react-query invalidation bug for the FilterDetails component.

Co-authored-by: anonymous <anonymous>

web/src/components/inputs/input.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Field } from "formik";
 import { classNames } from "../../utils";
 import { EyeIcon, EyeOffIcon } from "@heroicons/react/solid";
@@ -11,11 +10,16 @@ interface TextFieldProps {
     label?: string;
     placeholder?: string;
     columns?: COL_WIDTHS;
-    className?: string;
     autoComplete?: string;
 }
 
-const TextField: React.FC<TextFieldProps> = ({ name, label, placeholder, columns, className, autoComplete }) => (
+export const TextField = ({
+    name,
+    label,
+    placeholder,
+    columns,
+    autoComplete
+}: TextFieldProps) => (
     <div
         className={classNames(
             columns ? `col-span-${columns}` : "col-span-12"
@@ -55,14 +59,22 @@ interface PasswordFieldProps {
     label?: string;
     placeholder?: string;
     columns?: COL_WIDTHS;
-    className?: string;
     autoComplete?: string;
     defaultValue?: string;
     help?: string;
     required?: boolean;
 }
 
-const PasswordField: React.FC<PasswordFieldProps> = ({ name, label, placeholder, defaultValue, columns, className, autoComplete, help, required }) => {
+export const PasswordField = ({
+    name,
+    label,
+    placeholder,
+    defaultValue,
+    columns,
+    autoComplete,
+    help,
+    required
+}: PasswordFieldProps) => {
     const [isVisible, toggleVisibility] = useToggle(false)
 
     return (
@@ -113,17 +125,13 @@ interface NumberFieldProps {
     name: string;
     label?: string;
     placeholder?: string;
-    className?: string;
-    required?: boolean;
 }
 
-const NumberField: React.FC<NumberFieldProps> = ({
+export const NumberField = ({
     name,
     label,
-    placeholder,
-    required,
-    className,
-}) => (
+    placeholder
+}: NumberFieldProps) => (
     <div className="col-span-12 sm:col-span-6">
         <label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
             {label}
@@ -155,5 +163,3 @@ const NumberField: React.FC<NumberFieldProps> = ({
         </Field>
     </div>
 );
-
-export { TextField, PasswordField, NumberField };