[lint][lg]: fix lint errors

components/_shared/CustomLink.tsx

@@ -0,0 +1,15 @@
+type LinkProps = {
+  url: string;
+  format: any;
+};
+
+const CustomLink: React.FC<LinkProps> = ({ url, format }: LinkProps) => (
+  <a
+    href={url}
+    className="bg-white hover:bg-gray-200 border text-black font-semibold py-2 px-4 rounded"
+  >
+    {format}
+  </a>
+);
+
+export default CustomLink;

components/_shared/Error.tsx

@@ -1,4 +1,4 @@
-export default function ErrorMessage({ message }) {
+const ErrorMessage: React.FC<{ message: any }> = ({ message }) => {
   return (
     <aside>
       {message}
@@ -12,4 +12,6 @@ export default function ErrorMessage({ message }) {
       `}</style>
     </aside>
   );
-}
+};
+
+export default ErrorMessage;

components/_shared/Table.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface TableProps {
   columns: Array<any>;
   data: Array<any>;

components/_shared/index.ts

@@ -1,4 +1,5 @@
 import Table from './Table';
 import ErrorMessage from './Error';
+import CustomLink from './CustomLink';
 
-export { Table, ErrorMessage };
+export { Table, ErrorMessage, CustomLink };

components/dataset/About.tsx

@@ -34,7 +34,7 @@ const columns = [
   },
 ];
 
-export default function About({ variables }) {
+const About: React.FC<{ variables: any }> = ({ variables }) => {
   const { loading, error, data } = useQuery(GET_DATAPACKAGE_QUERY, {
     variables,
     // Setting this value to true will make the component rerender when
@@ -48,4 +48,6 @@ export default function About({ variables }) {
 
   const { result } = data.dataset;
   return <Table columns={columns} data={[result]} />;
-}
+};
+
+export default About;

components/dataset/Org.tsx

@@ -3,7 +3,7 @@ import { useQuery } from '@apollo/react-hooks';
 import { ErrorMessage } from '../_shared';
 import { GET_ORG_QUERY } from '../../graphql/queries';
 
-export default function Org({ variables }) {
+const Org: React.FC<{ variables: any }> = ({ variables }) => {
   const { loading, error, data } = useQuery(GET_ORG_QUERY, {
     variables,
     // Setting this value to true will make the component rerender when
@@ -26,8 +26,10 @@ export default function Org({ variables }) {
               'https://datahub.io/static/img/datahub-cube-edited.svg'
             }
             className="h-5 w-5 mr-2 inline-block"
+            alt="org_img"
           />
           <Link href={`/@${organization.name}`}>
+            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
             <a className="font-semibold text-primary underline">
               {organization.title || organization.name}
             </a>
@@ -38,4 +40,6 @@ export default function Org({ variables }) {
       )}
     </>
   );
-}
+};
+
+export default Org;

components/dataset/Resources.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable react/display-name */
 import Link from 'next/link';
 import { useQuery } from '@apollo/react-hooks';
 import { Table, ErrorMessage } from '../_shared';
@@ -36,7 +38,7 @@ const columns = [
   },
 ];
 
-export default function Resources({ variables }) {
+const Resources: React.FC<{ variables: any }> = ({ variables }) => {
   const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, {
     variables,
     // Setting this value to true will make the component rerender when
@@ -62,4 +64,6 @@ export default function Resources({ variables }) {
       />
     </>
   );
-}
+};
+
+export default Resources;

components/home/Nav.tsx

@@ -1,7 +1,8 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import Link from 'next/link';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-export default function Nav() {
+const Nav: React.FC = () => {
   const [open, setOpen] = useState(false);
 
   const handleClick = (event) => {
@@ -44,6 +45,7 @@ export default function Nav() {
           href="http://tech.datopian.com/frontend/"
           className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-6"
           target="_blank"
+          rel="noreferrer"
         >
           Docs
         </a>
@@ -51,10 +53,13 @@ export default function Nav() {
           href="https://github.com/datopian/portal"
           className="inline-block text-tiny px-4 py-2 leading-none border rounded text-primary bg-primary-background border-black hover:border-gray-700 hover:text-gray-700 hover:bg-white mt-4 lg:mt-0"
           target="_blank"
+          rel="noreferrer"
         >
           GitHub
         </a>
       </div>
     </nav>
   );
-}
+};
+
+export default Nav;

components/home/Recent.tsx

@@ -1,9 +1,10 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import Link from 'next/link';
 import { useQuery } from '@apollo/react-hooks';
 import { ErrorMessage } from '../_shared';
 import { SEARCH_QUERY } from '../../graphql/queries';
 
-function Recent() {
+const Recent: React.FC = () => {
   const { loading, error, data } = useQuery(SEARCH_QUERY, {
     variables: {
       sort: 'metadata_created desc',
@@ -47,6 +48,6 @@ function Recent() {
       </div>
     </section>
   );
-}
+};
 
 export default Recent;

components/resource/About.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import { useQuery } from '@apollo/react-hooks';
 import { Table, ErrorMessage } from '../_shared';
 import { GET_RESOURCES_QUERY } from '../../graphql/queries';
@@ -46,7 +47,7 @@ const columns = [
   },
 ];
 
-export default function About({ variables }) {
+const About: React.FC<{ variables: any }> = ({ variables }) => {
   const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, {
     variables,
     // Setting this value to true will make the component rerender when
@@ -63,4 +64,6 @@ export default function About({ variables }) {
     (item) => item.name === variables.resource
   );
   return <Table columns={columns} data={[resource]} />;
-}
+};
+
+export default About;

components/resource/DataExplorer.tsx

@@ -2,7 +2,7 @@ import { useQuery } from '@apollo/react-hooks';
 import { ErrorMessage } from '../_shared';
 import { GET_RESOURCES_QUERY } from '../../graphql/queries';
 
-export default function DataExplorer({ variables }) {
+const DataExplorer: React.FC<{ variables: any }> = ({ variables }) => {
   const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, {
     variables,
     // Setting this value to true will make the component rerender when
@@ -20,4 +20,6 @@ export default function DataExplorer({ variables }) {
   );
 
   return <>{JSON.stringify(resource)}</>;
-}
+};
+
+export default DataExplorer;

components/search/Form.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useRouter } from 'next/router';
 
-export default function Form() {
+const Form: React.FC = () => {
   const router = useRouter();
   const [q, setQ] = useState(router.query.q);
   const [sort, setSort] = useState(router.query.sort);
@@ -48,6 +48,7 @@ export default function Form() {
           id="field-order-by"
           name="sort"
           onChange={handleChange}
+          onBlur={handleChange}
           value={sort}
         >
           <option value="score:desc">Relevance</option>
@@ -59,4 +60,6 @@ export default function Form() {
       </div>
     </form>
   );
-}
+};
+
+export default Form;

components/search/Item.tsx

@@ -1,12 +1,15 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import Link from 'next/link';
 
-export default function Item({ datapackage }) {
+const Item: React.FC<{ datapackage: any }> = ({ datapackage }) => {
   return (
     <div className="mb-6">
       <h3 className="text-xl font-semibold">
         <Link
           href={`/@${
-            datapackage.organization ? datapackage.organization.name : 'dataset'
+            datapackage.organization
+              ? datapackage.organization.name
+              : 'dataset'
           }/${datapackage.name}`}
         >
           <a className="text-primary">
@@ -30,4 +33,6 @@ export default function Item({ datapackage }) {
       </div>
     </div>
   );
-}
+};
+
+export default Item;

components/search/List.tsx

@@ -3,7 +3,7 @@ import Item from './Item';
 import { ErrorMessage } from '../_shared';
 import { SEARCH_QUERY } from '../../graphql/queries';
 
-export default function List({ variables }) {
+const List: React.FC<{ variables: any }> = ({ variables }) => {
   const { loading, error, data } = useQuery(SEARCH_QUERY, {
     variables,
     // Setting this value to true will make the component rerender when
@@ -22,4 +22,6 @@ export default function List({ variables }) {
       ))}
     </ul>
   );
-}
+};
+
+export default List;

components/search/Total.tsx

@@ -2,7 +2,7 @@ import { useQuery } from '@apollo/react-hooks';
 import { ErrorMessage } from '../_shared';
 import { GET_TOTAL_COUNT_QUERY } from '../../graphql/queries';
 
-export default function Total({ variables }) {
+const Total: React.FC<{ variables: any }> = ({ variables }) => {
   const { loading, error, data } = useQuery(GET_TOTAL_COUNT_QUERY, {
     variables,
     // Setting this value to true will make the component rerender when
@@ -21,4 +21,6 @@ export default function Total({ variables }) {
       {result.count} results found
     </h1>
   );
-}
+};
+
+export default Total;

components/static/List.tsx

@@ -3,7 +3,7 @@ import { useQuery } from '@apollo/react-hooks';
 import { ErrorMessage } from '../_shared';
 import { GET_POSTS_QUERY } from '../../graphql/queries';
 
-export default function List() {
+const List: React.FC = () => {
   const { loading, error, data } = useQuery(GET_POSTS_QUERY, {
     // Setting this value to true will make the component rerender when
     // the "networkStatus" changes, so we are able to know if it is fetching
@@ -34,4 +34,6 @@ export default function List() {
       ))}
     </>
   );
-}
+};
+
+export default List;

components/static/Page.tsx

@@ -3,7 +3,7 @@ import { useQuery } from '@apollo/react-hooks';
 import { ErrorMessage } from '../_shared';
 import { GET_PAGE_QUERY } from '../../graphql/queries';
 
-export default function Page({ variables }) {
+const Page: React.FC<{ variables: any }> = ({ variables }) => {
   const { loading, error, data } = useQuery(GET_PAGE_QUERY, {
     variables,
     // Setting this value to true will make the component rerender when
@@ -23,8 +23,10 @@ export default function Page({ variables }) {
         {title}
       </h1>
       <p className="mb-6">Edited: {modified}</p>
-      <img src={featured_image} className="mb-6" />
+      <img src={featured_image} className="mb-6" alt="featured_img" />
       <div>{parse(content)}</div>
     </>
   );
-}
+};
+
+export default Page;

components/static/Post.tsx

@@ -3,7 +3,7 @@ import { useQuery } from '@apollo/react-hooks';
 import { ErrorMessage } from '../_shared';
 import { GET_PAGE_QUERY } from '../../graphql/queries';
 
-export default function Post({ variables }) {
+const Post: React.FC<{ variables: any }> = ({ variables }) => {
   const { loading, error, data } = useQuery(GET_PAGE_QUERY, {
     variables,
     // Setting this value to true will make the component rerender when
@@ -23,8 +23,10 @@ export default function Post({ variables }) {
         {title}
       </h1>
       <p className="mb-6">Edited: {modified}</p>
-      <img src={featured_image} className="mb-6" />
+      <img src={featured_image} className="mb-6" alt="featured_img" />
       <div>{parse(content)}</div>
     </>
   );
-}
+};
+
+export default Post;