[lint][lg]: fix lint errors

.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
     'react/react-in-jsx-scope': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
     'jsx-a11y/label-has-associated-control': [
       'error',
       {

__tests__/components/search/Form.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import renderer from 'react-test-renderer';
 import Form from '../../../components/search/Form';
 
 const useRouter = jest.spyOn(require('next/router'), 'useRouter');

__tests__/components/search/Item.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { render } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 import Item from '../../../components/search/Item';
 
@@ -10,6 +9,8 @@ test('📸 of Input component with empty', () => {
     organization: null,
     __typename: 'Package',
   };
-  const tree = renderer.create(<Item datapackage={fixture} key={0} />).toJSON();
+  const tree = renderer
+    .create(<Item datapackage={fixture} key={0} />)
+    .toJSON();
   expect(tree).toMatchSnapshot();
 });

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;

lib/apolloClient.ts

@@ -1,10 +1,16 @@
 import { useMemo } from 'react';
 import getConfig from 'next/config';
 import { ApolloClient } from 'apollo-client';
-import { InMemoryCache } from 'apollo-cache-inmemory';
+import {
+  InMemoryCache,
+  NormalizedCache,
+  NormalizedCacheObject,
+} from 'apollo-cache-inmemory';
 import { RestLink } from 'apollo-link-rest';
 
-let apolloClient;
+let apolloClient:
+  | ApolloClient<NormalizedCache>
+  | ApolloClient<NormalizedCacheObject>;
 
 const restLink = new RestLink({
   uri: getConfig().publicRuntimeConfig.DMS + '/api/3/action/',
@@ -17,11 +23,7 @@ const restLink = new RestLink({
     }/posts/`,
   },
   typePatcher: {
-    Search: (
-      data: any,
-      outerType: string,
-      patchDeeper: RestLink.FunctionalTypePatcher
-    ): any => {
+    Search: (data: any): any => {
       if (data.result != null) {
         data.result.__typename = 'SearchResponse';
 
@@ -36,11 +38,7 @@ const restLink = new RestLink({
       }
       return data;
     },
-    Response: (
-      data: any,
-      outerType: string,
-      patchDeeper: RestLink.FunctionalTypePatcher
-    ): any => {
+    Response: (data: any): any => {
       if (data.result != null) {
         data.result.__typename = 'Package';
         if (data.result.organization != null) {
@@ -65,8 +63,13 @@ function createApolloClient() {
   });
 }
 
-export function initializeApollo(initialState = null) {
-  const _apolloClient = apolloClient ?? createApolloClient();
+export function initializeApollo(
+  initialState = null
+): ApolloClient<NormalizedCache> | ApolloClient<NormalizedCacheObject> {
+  const _apolloClient:
+    | ApolloClient<NormalizedCache>
+    | ApolloClient<NormalizedCacheObject> =
+    apolloClient ?? createApolloClient();
 
   // If your page has Next.js data fetching methods that use Apollo Client, the initial state
   // gets hydrated here
@@ -81,7 +84,9 @@ export function initializeApollo(initialState = null) {
   return _apolloClient;
 }
 
-export function useApollo(initialState) {
+export function useApollo(
+  initialState = null
+): ApolloClient<NormalizedCache> | ApolloClient<NormalizedCacheObject> {
   const store = useMemo(() => initializeApollo(initialState), [initialState]);
   return store;
 }

package.json

@@ -15,7 +15,7 @@
     "format": "prettier --single-quote --write .",
     "pre-commit": "yarn lint:fix && prettier --single-quote --write",
     "lint": "eslint . --ext .ts,.tsx",
-    "lint:fix": "yarn lint -- --fix"
+    "lint:fix": "yarn lint --fix"
   },
   "dependencies": {
     "@apollo/client": "^3.0.2",

pages/[org]/[dataset]/index.tsx

@@ -8,7 +8,7 @@ import Org from '../../../components/dataset/Org';
 import Resources from '../../../components/dataset/Resources';
 import { GET_DATASET_QUERY } from '../../../graphql/queries';
 
-function Dataset({ variables }) {
+const Dataset: React.FC<{ variables: any }> = ({ variables }) => {
   const { data, loading } = useQuery(GET_DATASET_QUERY, { variables });
 
   if (loading) return <div>Loading</div>;
@@ -31,7 +31,7 @@ function Dataset({ variables }) {
       </main>
     </>
   );
-}
+};
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const apolloClient = initializeApollo();

pages/[org]/[dataset]/r/[resource]/index.tsx

@@ -7,7 +7,7 @@ import About from '../../../../../components/resource/About';
 import DataExplorer from '../../../../../components/resource/DataExplorer';
 import { GET_RESOURCES_QUERY } from '../../../../../graphql/queries';
 
-function Resource({ variables }) {
+const Resource: React.FC<{ variables: any }> = ({ variables }) => {
   const { data, loading } = useQuery(GET_RESOURCES_QUERY, { variables });
 
   if (loading) return <div>Loading</div>;
@@ -32,7 +32,7 @@ function Resource({ variables }) {
       </main>
     </>
   );
-}
+};
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const apolloClient = initializeApollo();

pages/_app.tsx

@@ -6,9 +6,14 @@ import { applyTheme } from '../themes/utils';
 
 import '../styles/app.css';
 
-export default function MyApp({ Component, pageProps }) {
+type Props = {
+  Component: any;
+  pageProps: any;
+};
+
+const MyApp: React.FC<Props> = ({ Component, pageProps }) => {
   const apolloClient = useApollo(pageProps.initialApolloState);
-  const [theme, setTheme] = useState(DEFAULT_THEME);
+  const [theme] = useState(DEFAULT_THEME); // setTheme
 
   useEffect(() => {
     /**
@@ -24,4 +29,6 @@ export default function MyApp({ Component, pageProps }) {
       <Component {...pageProps} />
     </ApolloProvider>
   );
-}
+};
+
+export default MyApp;

pages/blog/[post]/index.tsx

@@ -5,20 +5,22 @@ import Nav from '../../../components/home/Nav';
 import Post from '../../../components/static/Post';
 import { GET_POST_QUERY } from '../../../graphql/queries';
 
-function PostItem({ variables }) {
-  return (
-    <>
-      <Head>
-        <title>Portal | {variables.slug}</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <Nav />
-      <main className="p-6">
-        <Post variables={variables} />
-      </main>
-    </>
-  );
-}
+type Props = {
+  variables: any;
+};
+
+const PostItem: React.FC<Props> = ({ variables }) => (
+  <>
+    <Head>
+      <title>Portal | {variables.slug}</title>
+      <link rel="icon" href="/favicon.ico" />
+    </Head>
+    <Nav />
+    <main className="p-6">
+      <Post variables={variables} />
+    </main>
+  </>
+);
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const variables = {

pages/blog/index.tsx

@@ -5,22 +5,20 @@ import Nav from '../../components/home/Nav';
 import List from '../../components/static/List';
 import { GET_POSTS_QUERY } from '../../graphql/queries';
 
-function PostList() {
-  return (
-    <>
-      <Head>
-        <title>Portal | Blog</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <Nav />
-      <main className="p-6">
-        <List />
-      </main>
-    </>
-  );
-}
+const PostList: React.FC = () => (
+  <>
+    <Head>
+      <title>Portal | Blog</title>
+      <link rel="icon" href="/favicon.ico" />
+    </Head>
+    <Nav />
+    <main className="p-6">
+      <List />
+    </main>
+  </>
+);
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
+export const getServerSideProps: GetServerSideProps = async () => {
   const apolloClient = initializeApollo();
 
   await apolloClient.query({

pages/index.tsx

@@ -6,37 +6,35 @@ import Recent from '../components/home/Recent';
 import Form from '../components/search/Form';
 import { SEARCH_QUERY } from '../graphql/queries';
 
-function Home() {
-  return (
-    <div className="container mx-auto">
-      <Head>
-        <title>Portal</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <Nav />
-      <section className="flex justify-center items-center flex-col mt-8 mx-4 lg:flex-row">
-        <div>
-          <h1 className="text-4xl mb-3 font-thin">
-            Find, Share and Publish <br /> Quality Data with{' '}
-            <span className="text-orange-500">Datahub</span>
-          </h1>
-          <p className="text-md font-light mb-3 w-4/5">
-            At Datahub, we have over thousands of datasets for free and a
-            Premium Data Service for additional or customised data with
-            guaranteed updates.
-          </p>
-          <Form />
-        </div>
-        <div className="mt-4">
-          <img src="/images/banner.svg" className="w-4/5" />
-        </div>
-      </section>
-      <Recent />
-    </div>
-  );
-}
+const Home: React.FC = () => (
+  <div className="container mx-auto">
+    <Head>
+      <title>Portal</title>
+      <link rel="icon" href="/favicon.ico" />
+    </Head>
+    <Nav />
+    <section className="flex justify-center items-center flex-col mt-8 mx-4 lg:flex-row">
+      <div>
+        <h1 className="text-4xl mb-3 font-thin">
+          Find, Share and Publish <br /> Quality Data with{' '}
+          <span className="text-orange-500">Datahub</span>
+        </h1>
+        <p className="text-md font-light mb-3 w-4/5">
+          At Datahub, we have over thousands of datasets for free and a Premium
+          Data Service for additional or customised data with guaranteed
+          updates.
+        </p>
+        <Form />
+      </div>
+      <div className="mt-4">
+        <img src="/images/banner.svg" className="w-4/5" alt="banner_img" />
+      </div>
+    </section>
+    <Recent />
+  </div>
+);
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
+export const getServerSideProps: GetServerSideProps = async () => {
   const apolloClient = initializeApollo();
 
   await apolloClient.query({

pages/p/[page]/index.tsx

@@ -5,20 +5,22 @@ import Nav from '../../../components/home/Nav';
 import Page from '../../../components/static/Page';
 import { GET_PAGE_QUERY } from '../../../graphql/queries';
 
-function PageItem({ variables }) {
-  return (
-    <>
-      <Head>
-        <title>Portal | {variables.slug}</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <Nav />
-      <main className="p-6">
-        <Page variables={variables} />
-      </main>
-    </>
-  );
-}
+type Props = {
+  variables: any;
+};
+
+const PageItem: React.FC<Props> = ({ variables }) => (
+  <>
+    <Head>
+      <title>Portal | {variables.slug}</title>
+      <link rel="icon" href="/favicon.ico" />
+    </Head>
+    <Nav />
+    <main className="p-6">
+      <Page variables={variables} />
+    </main>
+  </>
+);
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const variables = {

pages/search.tsx

@@ -8,22 +8,24 @@ import Total from '../components/search/Total';
 import List from '../components/search/List';
 import { SEARCH_QUERY } from '../graphql/queries';
 
-function Search({ variables }) {
-  return (
-    <>
-      <Head>
-        <title>Portal | Search</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <Nav />
-      <main className="p-6">
-        <Form />
-        <Total variables={variables} />
-        <List variables={variables} />
-      </main>
-    </>
-  );
-}
+type Props = {
+  variables: any;
+};
+
+const Search: React.FC<Props> = ({ variables }) => (
+  <>
+    <Head>
+      <title>Portal | Search</title>
+      <link rel="icon" href="/favicon.ico" />
+    </Head>
+    <Nav />
+    <main className="p-6">
+      <Form />
+      <Total variables={variables} />
+      <List variables={variables} />
+    </main>
+  </>
+);
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const query = context.query || {};

themes/index.ts

@@ -4,7 +4,7 @@ import { IThemes } from './utils';
 /**
  * The default theme to load
  */
-export const DEFAULT_THEME: string = 'base';
+export const DEFAULT_THEME = 'base';
 
 export const themes: IThemes = {
   base,