feat: adjust eslint config

.eslintrc.json

@@ -3,7 +3,7 @@
   "parserOptions": {
     "project": "./tsconfig.json"
   },
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "unused-imports"],
   "extends": [
     "next",
     "next/core-web-vitals",
@@ -49,6 +49,22 @@
         "warnOnUnassignedImports": true
       }
     ],
+    "arrow-body-style": ["warn", "as-needed"],
+    "eqeqeq": [
+      "error",
+      "always",
+      {
+        "null": "ignore"
+      }
+    ],
+    "no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "unused-imports/no-unused-imports": "warn",
     "@typescript-eslint/naming-convention": [
       "error",
       {

components/404/404.tsx

@@ -2,8 +2,7 @@ import Image from "next/image";
 
 import styles from "./404.module.scss";
 
-export const Custom404 = () => {
-  return (
+export const Custom404 = () => (
     <div className={styles.wrapper}>
       <div className={styles.image}>
         <Image src="/img/avatars/pissed-off.png" alt="pissed off memoji" width="421" height="421" />
@@ -12,4 +11,3 @@ export const Custom404 = () => {
       <p className={styles.description}>The page you are looking for does not exist.</p>
     </div>
   );
-};

components/about/components/experience/Experience.tsx

@@ -8,8 +8,7 @@ interface ExperienceProps {
   readonly positions: readonly Position[];
 }
 
-export const Experience = memo<ExperienceProps>(({ positions }) => {
-  return (
+export const Experience = memo<ExperienceProps>(({ positions }) => (
     <section className={styles.experience}>
       <h2 className={styles.title}>Experience</h2>
       <p className={styles.description}>
@@ -28,7 +27,6 @@ export const Experience = memo<ExperienceProps>(({ positions }) => {
         ))}
       </ol>
     </section>
-  );
-});
+  ));
 
 Experience.displayName = "Experience";

components/about/components/hero/Hero.tsx

@@ -5,8 +5,7 @@ import { normalizeViewsCount } from "utils/functions";
 
 import styles from "./hero.module.scss";
 
-export const Hero = ({ views }: { views: number }) => {
-  return (
+export const Hero = ({ views }: { views: number }) => (
     <section className={styles.hero}>
       <div className={styles.text}>
         <h2 className={styles.title}>Hi, I&#39;m Bartosz Zagrodzki&nbsp;👋</h2>
@@ -40,4 +39,3 @@ export const Hero = ({ views }: { views: number }) => {
       </div>
     </section>
   );
-};

components/blog/featuredPosts/featuredPost/FeaturedPost.tsx

@@ -25,8 +25,7 @@ interface FeaturedPostProps {
   readonly post: Post;
 }
 
-export const FeaturedPost = memo<FeaturedPostProps>(({ post }) => {
-  return (
+export const FeaturedPost = memo<FeaturedPostProps>(({ post }) => (
     <Link href={`/blog/${post.slug}`}>
       <motion.div className={styles.post} whileHover="hover">
         <motion.div className={styles.image} variants={imageVariants}>
@@ -44,7 +43,6 @@ export const FeaturedPost = memo<FeaturedPostProps>(({ post }) => {
         <h3 className={styles.title}>{post.title}</h3>
       </motion.div>
     </Link>
-  );
-});
+  ));
 
 FeaturedPost.displayName = "FeaturedPost";

components/blog/popularPosts/PopularPosts.tsx

@@ -11,8 +11,7 @@ interface PopularPostsProps {
   readonly posts: Post[];
 }
 
-export const PopularPosts = memo<PopularPostsProps>(({ posts }) => {
-  return (
+export const PopularPosts = memo<PopularPostsProps>(({ posts }) => (
     <section className={styles.wrapper}>
       <h2 className={styles.title}>popular posts</h2>
       <ul className={styles.posts}>
@@ -28,7 +27,6 @@ export const PopularPosts = memo<PopularPostsProps>(({ posts }) => {
         ))}
       </ul>
     </section>
-  );
-});
+  ));
 
 PopularPosts.displayName = "PopularPosts";

components/blog/postsListing/postThumbnail/PostThumbnail.tsx

@@ -13,42 +13,40 @@ interface PostThumbnailProps {
   readonly post: Post;
 }
 
-export const PostThumbnail = memo<PostThumbnailProps>(({ post }) => {
-  return (
-    <Link href={`/blog/${post.slug}`}>
-      <motion.article className={styles.post} layout>
-        <motion.h2
-          className={styles.title}
-          layoutId={`title-container-${post.slug}`}
-        >
-          {post.title}
-        </motion.h2>
-        <motion.p
-          className={styles.excerpt}
-          layoutId={`excerpt-container-${post.slug}`}
-        >
-          {post.excerpt}
-        </motion.p>
-        <div className={styles.info}>
-          <div className={styles.mainInfo}>
-            <span className={styles.category}>
-              {allCategories.find((c) => c.slug === post.category)?.name}
-            </span>
-            •
-            <span className={styles.time}>
-              {Math.round(post.timeToRead)} minutes
-            </span>
-          </div>
-          <div className={styles.more}>
-            Read more
-            <span className={styles.arrow}>
-              <Arrow />
-            </span>
-          </div>
+export const PostThumbnail = memo<PostThumbnailProps>(({ post }) => (
+  <Link href={`/blog/${post.slug}`}>
+    <motion.article className={styles.post} layout>
+      <motion.h2
+        className={styles.title}
+        layoutId={`title-container-${post.slug}`}
+      >
+        {post.title}
+      </motion.h2>
+      <motion.p
+        className={styles.excerpt}
+        layoutId={`excerpt-container-${post.slug}`}
+      >
+        {post.excerpt}
+      </motion.p>
+      <div className={styles.info}>
+        <div className={styles.mainInfo}>
+          <span className={styles.category}>
+            {allCategories.find((c) => c.slug === post.category)?.name}
+          </span>
+          •
+          <span className={styles.time}>
+            {Math.round(post.timeToRead)} minutes
+          </span>
         </div>
-      </motion.article>
-    </Link>
-  );
-});
+        <div className={styles.more}>
+          Read more
+          <span className={styles.arrow}>
+            <Arrow />
+          </span>
+        </div>
+      </div>
+    </motion.article>
+  </Link>
+));
 
 PostThumbnail.displayName = "PostThumbnail";

components/category/categoriesList/CategoriesList.tsx

@@ -9,8 +9,7 @@ interface CategoriesListProps {
   readonly categories: Category[];
 }
 
-export const CategoriesList = memo<CategoriesListProps>(({ categories }) => {
-  return (
+export const CategoriesList = memo<CategoriesListProps>(({ categories }) => (
     <section className={styles.wrapper}>
       <h2 className={styles.title}>categories</h2>
       <div className={styles.categories}>
@@ -19,7 +18,6 @@ export const CategoriesList = memo<CategoriesListProps>(({ categories }) => {
         ))}
       </div>
     </section>
-  );
-});
+  ));
 
 CategoriesList.displayName = "CategoriesList";

components/category/categoriesList/categoryCard/CategoryCard.tsx

@@ -11,16 +11,14 @@ interface CategoryCardProps {
   readonly category: CategoryType;
 }
 
-export const CategoryCard = memo<CategoryCardProps>(({ category }) => {
-  return (
+export const CategoryCard = memo<CategoryCardProps>(({ category }) => (
     <Link
       href={`/blog?category=${category}`}
       key={category}
       className={styles.category}
     >
       {allCategories.find((c) => c.slug === category)?.name}
     </Link>
-  );
-});
+  ));
 
 CategoryCard.displayName = "CategoryCard";

components/common/analytics/Analytics.tsx

@@ -2,6 +2,4 @@
 
 import { Analytics as VercelAnalytics } from "@vercel/analytics/react";
 
-export const Analytics = () => {
-  return <VercelAnalytics />;
-};
+export const Analytics = () => <VercelAnalytics />;

components/common/grid/Grid.tsx

@@ -4,6 +4,4 @@ interface GridProps {
   readonly children: React.ReactNode;
 }
 
-export const Grid = ({ children }: GridProps) => {
-  return <div className={styles.grid}>{children}</div>;
-};
+export const Grid = ({ children }: GridProps) => <div className={styles.grid}>{children}</div>;

components/common/hero/Hero.tsx

@@ -2,18 +2,16 @@ import { memo } from "react";
 
 import styles from "./hero.module.scss";
 
-type HeroProps = {
+interface HeroProps {
   readonly title: string;
   readonly description: string;
-};
+}
 
-export const Hero = memo<HeroProps>(({ title, description }) => {
-  return (
+export const Hero = memo<HeroProps>(({ title, description }) => (
     <div className={styles.hero}>
       <h1 className={styles.title}>{title}</h1>
       <p className={styles.description}>{description}</p>
     </div>
-  );
-});
+  ));
 
 Hero.displayName = "Hero";

components/common/input/Input.tsx

@@ -8,8 +8,7 @@ import styles from "./input.module.scss";
 export const Input = forwardRef<
   HTMLInputElement,
   JSX.IntrinsicElements["input"] & { isError?: boolean }
->(({ isError, children, ...props }, ref) => {
-  return (
+>(({ isError, children, ...props }, ref) => (
     <label className={styles.wrapper}>
       {children}
       {props.type === "search" && <SearchIcon className={styles.icon} />}
@@ -23,7 +22,6 @@ export const Input = forwardRef<
         type={props.type ?? "text"}
       />
     </label>
-  );
-});
+  ));
 
 Input.displayName = "Input";

components/common/loader/LoaderRing.tsx

@@ -1,7 +1,6 @@
 import styles from "./loaderRing.module.scss";
 
-export const LoaderRing = () => {
-  return (
+export const LoaderRing = () => (
     <div className={styles.loader}>
       <span className="sr-only">loading</span>
       <div className={styles.ring}>
@@ -12,4 +11,3 @@ export const LoaderRing = () => {
       </div>
     </div>
   );
-};

components/contact/contactForm/ContactForm.tsx

@@ -1,11 +1,11 @@
 import clsx from "clsx";
-import { useForm } from "react-hook-form";
 import { useState, useEffect } from "react";
+import { useForm } from "react-hook-form";
 
 import { Input } from "components/common/input/Input";
 import { LoaderRing } from "components/common/loader/LoaderRing";
-import { fetcher } from "utils/fetcher";
 import { EMAIL_REGEX } from "utils/consts";
+import { fetcher } from "utils/fetcher";
 
 import styles from "./contactForm.module.scss";
 
@@ -19,7 +19,7 @@ export const ContactForm = ({ handleIsSent }: { handleIsSent: (val: boolean) =>
   } = useForm();
   const [promiseStatus, setPromiseStatus] = useState<PromiseStatus>("pending");
 
-  const handleFormSubmit = async ({ name, email, message }: { [key: string]: string }) => {
+  const handleFormSubmit = async ({ name, email, message }: Record<string, string>) => {
     setPromiseStatus("loading");
     try {
       await fetcher("/api/contact", { method: "POST", body: { name, email, message } });

components/layout/header/Header.tsx

@@ -8,8 +8,7 @@ import PaperPlane from "public/svg/paper-plane.svg";
 import styles from "./header.module.scss";
 import { Navbar } from "./navbar/Navbar";
 
-export const Header = () => {
-  return (
+export const Header = () => (
     <header className={styles.header}>
       <Link href="#main" className={styles.skip}>
         skip to content
@@ -30,4 +29,3 @@ export const Header = () => {
       </div>
     </header>
   );
-};

components/mdx/Mdx.tsx

@@ -54,12 +54,10 @@ export const Mdx = memo<MdxProps>(({ resource, content }) => {
   const [views, setViews] = useState(0);
 
   const getHeadingProps = useCallback(
-    ({ children }: HeadingComponentProps) => {
-      return {
+    ({ children }: HeadingComponentProps) => ({
         slug: children,
         url,
-      };
-    },
+      }),
     [url],
   );
 

components/mdx/author/Author.tsx

@@ -6,9 +6,9 @@ import { Link } from "../link/Link";
 
 import styles from "./author.module.scss";
 
-type AuthorProps = {
+interface AuthorProps {
   readonly name: typeof allAuthors[number]["name"];
-};
+}
 
 export const Author = memo<AuthorProps>(({ name }) => {
   const author = allAuthors.find((c) => c.name === name)!;