fix eslint and updates react types used

Author: deep-c

package.json

@@ -15,7 +15,7 @@
     "docker:down": "docker compose down",
     "docker:up": "docker compose up -d",
     "lint": "npm run -s lint:eslint && npm run -s lint:prettier && npm run -s lint:ts",
-    "lint:eslint": "eslint --ext=.js,.jsx,.mjs,.ts,.tsx --ignore-path .gitignore --max-warnings 0",
+    "lint:eslint": "eslint --ext=.js,.jsx,.mjs,.ts,.tsx --ignore-path .gitignore --max-warnings 0 .",
     "lint:prettier": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config .prettierrc",
     "lint:ts": "tsc",
     "pre-commit": "lint-staged && npm run -s lint:ts",

src/components/ActiveLink/ActiveLink.tsx

@@ -11,11 +11,11 @@ export interface ActiveLinkProps extends LinkProps {
   nested?: boolean;
 }
 
-const ActiveLink: React.FC<ActiveLinkProps> = ({
+const ActiveLink = ({
   children,
   nested,
   ...linkProps
-}) => {
+}: ActiveLinkProps): React.ReactElement => {
   const { asPath } = useRouter();
   const isActive =
     asPath === linkProps.href ||

src/components/Auth/Auth.tsx

@@ -11,13 +11,19 @@ export interface AuthSettings {
   allowedRoles?: Role[];
   loginUrl?: Url;
 }
-export type AuthProps = AuthSettings;
+export interface AuthProps extends AuthSettings {
+  children: React.ReactNode;
+}
 export type Session = ReturnType<typeof useSession>[0];
 export interface AuthChildProps {
   session: Session;
 }
 
-const Auth: React.FC<AuthProps> = ({ allowedRoles, children, loginUrl }) => {
+const Auth = ({
+  allowedRoles,
+  children,
+  loginUrl,
+}: AuthProps): React.ReactElement => {
   const [session, loading] = useSession();
   const hasAuth = isAuthenticated(session?.user);
   const router = useRouter();

src/components/Notifications/Notifications.tsx

@@ -21,13 +21,13 @@ export interface SimpleNotificationProps extends Toast {
   state: SimpleNotificationState;
 }
 
-const SimpleNotification: React.FC<SimpleNotificationProps> = ({
+const SimpleNotification = ({
   content,
   icon,
   id,
   state,
   visible,
-}) => (
+}: SimpleNotificationProps) => (
   <>
     <Transition
       as={Fragment}

src/components/UserAdminForm/UserAdminForm.tsx

@@ -16,7 +16,9 @@ import type { UpdateUserInput } from 'types/graphql/globalTypes';
 
 export type UserAdminFormProps = Pick<User, 'id'>;
 
-const UserAdminForm: React.FC<UserAdminFormProps> = ({ id }) => {
+const UserAdminForm = ({
+  id,
+}: UserAdminFormProps): React.ReactElement | null => {
   const { data, loading: queryLoading } = useQuery<GetUserForAdmin>(
     getUserForAdminQuery,
     { variables: { id } }

src/components/UserAvatar/UserAvatar.tsx

@@ -7,7 +7,7 @@ export interface AvatarProps {
   size?: [number, number];
 }
 
-const Avatar: React.FC<AvatarProps> = ({ image, name, size }) => (
+const Avatar = ({ image, name, size }: AvatarProps): React.ReactElement => (
   <span className="flex items-center justify-between min-w-0 space-x-3">
     {image ? (
       <Image

src/components/UserGeneralSettingsForm/UserGeneralSettingsForm.tsx

@@ -13,7 +13,7 @@ import type { GetMe } from 'types/graphql/GetMe';
 import type { UpdateUser } from 'types/graphql/UpdateUser';
 import type { UpdateMeInput } from 'types/graphql/globalTypes';
 
-const UserSettingsForm: React.FC = () => {
+const UserSettingsForm = (): React.ReactElement | null => {
   const { data, loading: queryLoading } = useQuery<GetMe>(meQuery);
   const [updateUserSettings, { loading: mutationLoading }] =
     useMutation<UpdateUser>(updateMeMutation);

src/components/UserProfileDropdown/UserProfileDropdown.tsx

@@ -7,7 +7,7 @@ import React, { Fragment } from 'react';
 import ActiveLink from 'src/components/ActiveLink';
 import { ACCOUNT_SETTINGS, ADMIN_LOGIN } from 'src/routes';
 
-const AccountDropdown: React.FC = () => (
+const AccountDropdown = (): React.ReactElement => (
   <Menu as="div" className="relative ml-3">
     {({ open }) => (
       <>

src/layouts/AdminLayout/AdminLayout.tsx

@@ -8,42 +8,46 @@ import Sidebar from './Sidebar';
 
 import type { AuthChildProps } from 'src/components/Auth';
 
-export const AdminLayout: React.FC<AuthChildProps> = ({
+export interface AdminlayoutProps extends AuthChildProps {
+  children: React.ReactChild;
+}
+
+export const AdminLayout = ({
   children,
   session,
-}) => {
+}: AdminlayoutProps): React.ReactElement => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   return (
-    <div className="h-screen flex overflow-hidden bg-white">
+    <div className="flex h-screen overflow-hidden bg-white">
       <Sidebar
         handleState={setSidebarOpen}
         open={sidebarOpen}
         session={session}
       />
       {/* Main column */}
-      <div className="flex flex-col w-0 flex-1 overflow-hidden">
+      <div className="flex flex-col flex-1 w-0 overflow-hidden">
         {/* Search header */}
-        <div className="relative z-10 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 lg:hidden">
+        <div className="relative z-10 flex flex-shrink-0 h-16 bg-white border-b border-gray-200 lg:hidden">
           <button
-            className="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500 lg:hidden"
+            className="px-4 text-gray-500 border-r border-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500 lg:hidden"
             onClick={() => setSidebarOpen(true)}
             type="button"
           >
             <span className="sr-only">Open sidebar</span>
-            <MenuAlt1Icon aria-hidden="true" className="h-6 w-6" />
+            <MenuAlt1Icon aria-hidden="true" className="w-6 h-6" />
           </button>
-          <div className="flex-1 flex justify-between px-4 sm:px-6 lg:px-8">
-            <div className="flex-1 flex">
-              <form action="#" className="w-full flex md:ml-0" method="GET">
+          <div className="flex justify-between flex-1 px-4 sm:px-6 lg:px-8">
+            <div className="flex flex-1">
+              <form action="#" className="flex w-full md:ml-0" method="GET">
                 <label className="sr-only" htmlFor="search_field">
                   Search
                 </label>
                 <div className="relative w-full text-gray-400 focus-within:text-gray-600">
                   <div className="absolute inset-y-0 left-0 flex items-center pointer-events-none">
-                    <SearchIcon aria-hidden="true" className="h-5 w-5" />
+                    <SearchIcon aria-hidden="true" className="w-5 h-5" />
                   </div>
                   <input
-                    className="block w-full h-full pl-8 pr-3 py-2 border-transparent text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-0 focus:border-transparent focus:placeholder-gray-400 sm:text-sm"
+                    className="block w-full h-full py-2 pl-8 pr-3 text-gray-900 placeholder-gray-500 border-transparent focus:outline-none focus:ring-0 focus:border-transparent focus:placeholder-gray-400 sm:text-sm"
                     id="search_field"
                     name="search_field"
                     placeholder="Search"

src/layouts/AdminLayout/Sidebar.tsx

@@ -28,7 +28,11 @@ const navigation = [ADMIN_DASHBOARD, ADMIN_USERS, ADMIN_SESSIONS];
 
 const userNavigation = [ACCOUNT_SETTINGS];
 
-const Sidebar: React.FC<SidebarProps> = ({ handleState, open, session }) => {
+const Sidebar = ({
+  handleState,
+  open,
+  session,
+}: SidebarProps): React.ReactElement => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const filterRoutes = useCallback(filterRoutesForRole(session?.user), [
     session,

src/pages/_app.tsx

@@ -8,7 +8,7 @@ import { AppInitialState, useApollo } from 'src/graphql/client';
 
 import type { Session } from 'next-auth';
 import type { AppProps } from 'next/app';
-import type { FC, FunctionComponent } from 'react';
+import type { FunctionComponent } from 'react';
 
 import '../styles/globals.css';
 
@@ -27,7 +27,7 @@ export interface MyAppProps extends AppProps {
   };
 }
 
-const MyApp: FC<MyAppProps> = ({ Component, pageProps }) => {
+const MyApp = ({ Component, pageProps }: MyAppProps): React.ReactElement => {
   const client = useApollo(pageProps.initialApolloState);
   const Layout = Component.layout ?? (({ children }) => <>{children}</>);
   return (

src/pages/index.tsx

@@ -2,7 +2,7 @@ import { signIn, signOut, useSession } from 'next-auth/client';
 import Head from 'next/head';
 import React from 'react';
 
-const Home: React.FC = () => {
+const Home = (): React.ReactElement => {
   const [session] = useSession();
 
   return (

src/routes.ts

@@ -14,7 +14,7 @@ import { isAuthorized } from 'src/utils/auth';
 
 import type { NextPage } from 'next';
 import type { ReactNode } from 'react';
-import type { AuthProps, AuthSettings } from 'src/components/Auth';
+import type { AuthSettings } from 'src/components/Auth';
 import type { AuthSessionUser } from 'src/types/next-auth';
 
 export type Url = string;
@@ -26,7 +26,7 @@ export interface AppRoute {
   path: Url;
 }
 export type NextRoutePage<P> = NextPage<P, P> & {
-  auth?: AuthProps | boolean;
+  auth?: AuthSettings | boolean;
   layout?: ReactNode;
 };