From 300a55be96dc8f65bad31dde28489bbe4fcf8916 Mon Sep 17 00:00:00 2001
From: Lucas Morais <lucascdemorais@gmail.com>
Date: Sun, 21 Jan 2024 20:51:08 -0300
Subject: [PATCH] fixing lint errors

---
 .eslintrc                                | 14 +++++------
 src/components/CertificateCard/index.tsx |  9 ++++---
 src/components/LanguageChart/index.tsx   |  4 +--
 src/components/Loading/Loading.tsx       | 21 ----------------
 src/components/Loading/styled.ts         |  9 -------
 src/components/ProjectCard/index.tsx     |  2 +-
 src/components/ProjectGrid/index.tsx     | 12 ++++-----
 src/components/Scroll/index.tsx          |  6 ++---
 src/components/Timeline/Item/index.tsx   | 30 +++++++++++------------
 src/components/Timeline/index.tsx        | 12 ++++-----
 src/layouts/Block.tsx                    |  4 ++-
 src/layouts/Meta.tsx                     |  8 +++---
 src/layouts/Row.tsx                      |  6 +++--
 src/pages/index.tsx                      | 31 ++++++++++--------------
 src/templates/Main.tsx                   |  8 +++---
 15 files changed, 72 insertions(+), 104 deletions(-)
 delete mode 100644 src/components/Loading/Loading.tsx
 delete mode 100644 src/components/Loading/styled.ts

diff --git a/.eslintrc b/.eslintrc
index d744f3b..364cfed 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -7,7 +7,7 @@
   ],
   "rules": {
     "prettier/prettier": [
-      "error",
+      "warn",
       {
         "singleQuote": true,
         "endOfLine": "auto"
@@ -35,12 +35,13 @@
       },
       "rules": {
         "prettier/prettier": [
-          "error",
+          "warn",
           {
             "singleQuote": true,
             "endOfLine": "auto"
           }
         ],
+        "no-continue": "off",
         "react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
         "react/require-default-props": "off", // Allow non-defined react props as undefined
         "react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form
@@ -49,7 +50,7 @@
         "@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier
         "@typescript-eslint/consistent-type-imports": "error", // Ensure `import type` is used when it's necessary
         "no-restricted-syntax": [
-          "error",
+          "warn",
           "ForInStatement",
           "LabeledStatement",
           "WithStatement"
@@ -58,11 +59,8 @@
         "simple-import-sort/imports": "error", // Import configuration for `eslint-plugin-simple-import-sort`
         "simple-import-sort/exports": "error", // Export configuration for `eslint-plugin-simple-import-sort`
         "@typescript-eslint/no-unused-vars": "off",
-        "unused-imports/no-unused-imports": "error",
-        "unused-imports/no-unused-vars": [
-          "error",
-          { "argsIgnorePattern": "^_" }
-        ]
+        "unused-imports/no-unused-imports": "warn",
+        "unused-imports/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }]
       }
     },
     // Configuration for testing
diff --git a/src/components/CertificateCard/index.tsx b/src/components/CertificateCard/index.tsx
index 4d2eab5..d3034ea 100644
--- a/src/components/CertificateCard/index.tsx
+++ b/src/components/CertificateCard/index.tsx
@@ -1,7 +1,8 @@
-import ExportOutlined from "@ant-design/icons/ExportOutlined";
-import Tooltip from "antd/lib/tooltip";
-import React from "react";
-import Link from "../Link";
+import ExportOutlined from '@ant-design/icons/ExportOutlined';
+import Tooltip from 'antd/lib/tooltip';
+import React from 'react';
+
+import Link from '../Link';
 
 interface Props {
   name: string;
diff --git a/src/components/LanguageChart/index.tsx b/src/components/LanguageChart/index.tsx
index 1bbe8c7..852726b 100644
--- a/src/components/LanguageChart/index.tsx
+++ b/src/components/LanguageChart/index.tsx
@@ -41,7 +41,7 @@ const buildState = (
       textAnchor: 'end',
       offsetX: 0,
       offsetY: 0,
-      formatter(v) {
+      formatter(v: number) {
         return `${v.toFixed(0)} h`;
       },
       dropShadow: {
@@ -59,7 +59,7 @@ const buildState = (
           return `${val.toFixed(0)} hours worked`;
         },
         title: {
-          formatter(s) {
+          formatter() {
             return '';
           },
         },
diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
deleted file mode 100644
index 0db85fe..0000000
--- a/src/components/Loading/Loading.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { LoadingOutlined } from '@ant-design/icons';
-import { Spin } from 'antd';
-import { SpinProps } from 'antd/lib/spin';
-
-import * as S from './styled';
-
-interface Props extends SpinProps {}
-
-const Loading: React.FC<Props> = props => {
-  const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
-
-  return (
-    <S.Container>
-      <Spin indicator={antIcon} {...props} />
-    </S.Container>
-  );
-};
-
-export default Loading;
diff --git a/src/components/Loading/styled.ts b/src/components/Loading/styled.ts
deleted file mode 100644
index 8d92431..0000000
--- a/src/components/Loading/styled.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  width: 100vw;
-`;
diff --git a/src/components/ProjectCard/index.tsx b/src/components/ProjectCard/index.tsx
index f5d1309..e8f9ee2 100644
--- a/src/components/ProjectCard/index.tsx
+++ b/src/components/ProjectCard/index.tsx
@@ -21,7 +21,7 @@ export default function ProjectCard({
   url,
 }: Props) {
   return (
-    <div className="w-46 flex h-28 flex-row items-center justify-center  border p-4 shadow-lg">
+    <div className="flex h-28 w-44 flex-row items-center justify-center  border p-4 shadow-lg">
       <div className="w-full">
         <div className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-base font-semibold text-black">
           <Tooltip title={name}>
diff --git a/src/components/ProjectGrid/index.tsx b/src/components/ProjectGrid/index.tsx
index d17784b..e34c945 100644
--- a/src/components/ProjectGrid/index.tsx
+++ b/src/components/ProjectGrid/index.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
 
-import type { Props as CardProps } from "@/components/ProjectCard";
-import ProjectCard from "@/components/ProjectCard";
+import type { Props as CardProps } from '@/components/ProjectCard';
+import ProjectCard from '@/components/ProjectCard';
 
 interface Props {
   items: CardProps[];
@@ -22,7 +22,7 @@ export default function ProjectGrid({
 
   return (
     <div className="flex flex-col items-center">
-      <div className="flex flex-wrap justify-items-start gap-1.5 w-full">
+      <div className="flex w-full flex-wrap justify-items-start gap-1.5">
         {items.slice(0, visibleItems).map((item, index) => (
           <ProjectCard key={index} {...item} />
         ))}
@@ -30,9 +30,9 @@ export default function ProjectGrid({
       {visibleItems < items.length && (
         <button
           onClick={handleShowMore}
-          className="mt-4 rounded bg-blue-500 px-4 py-4 text-white"
+          className="mt-4 rounded bg-blue-500 p-4 text-white"
         >
-          {"Show more projects..."}
+          {'Show more projects...'}
         </button>
       )}
     </div>
diff --git a/src/components/Scroll/index.tsx b/src/components/Scroll/index.tsx
index fff83b9..e0ebc57 100644
--- a/src/components/Scroll/index.tsx
+++ b/src/components/Scroll/index.tsx
@@ -1,6 +1,6 @@
-import React from "react";
-import type { ScrollbarProps } from "react-custom-scrollbars-2";
-import { Scrollbars } from "react-custom-scrollbars-2";
+import React from 'react';
+import type { ScrollbarProps } from 'react-custom-scrollbars-2';
+import { Scrollbars } from 'react-custom-scrollbars-2';
 
 interface Props extends ScrollbarProps {}
 
diff --git a/src/components/Timeline/Item/index.tsx b/src/components/Timeline/Item/index.tsx
index bb3c6a7..b83d775 100644
--- a/src/components/Timeline/Item/index.tsx
+++ b/src/components/Timeline/Item/index.tsx
@@ -1,24 +1,24 @@
-import CaretRightOutlined from "@ant-design/icons/CaretRightOutlined";
-import Tooltip from "antd/lib/tooltip";
-import moment from "moment";
-import React from "react";
+import CaretRightOutlined from '@ant-design/icons/CaretRightOutlined';
+import Tooltip from 'antd/lib/tooltip';
+import moment from 'moment';
+import React from 'react';
 
 interface Props {
   title: string;
   open: boolean;
   startDate: string;
-  endTime?: string;
+  endDate?: string;
   hasChildren?: boolean;
   onClickToOpen?: (isOpen: boolean) => void;
 }
 export default function Item(props: Props) {
-  const DATE_FORMAT = "MMM YYYY";
+  const DATE_FORMAT = 'MMM YYYY';
 
   const { title, open, startDate, endDate, hasChildren, onClickToOpen } = props;
 
   function onClick() {
     const v = !open;
-    onClickToOpen && onClickToOpen(v);
+    if (onClickToOpen) onClickToOpen(v);
   }
   function formatDuration() {
     const start = moment(startDate);
@@ -28,24 +28,24 @@ export default function Item(props: Props) {
 
     const years = duration.years();
     const months = duration.months();
-    const days = duration.days();
+    // const days = duration.days();
 
-    let formattedString = "";
+    let formattedString = '';
 
     if (years > 0) {
-      formattedString += `${years} ${years === 1 ? "year" : "years"}`;
+      formattedString += `${years} ${years === 1 ? 'year' : 'years'}`;
     }
 
     if (months > 0) {
-      formattedString += ` ${months} ${months === 1 ? "month" : "months"}`;
+      formattedString += ` ${months} ${months === 1 ? 'month' : 'months'}`;
     }
 
     formattedString = formattedString.trim();
-    return !formattedString ? "" : `(${formattedString.trim()})`;
+    return !formattedString ? '' : `(${formattedString.trim()})`;
   }
 
   const period = `${moment(startDate).format(DATE_FORMAT)} - ${
-    endDate ? moment(endDate).format(DATE_FORMAT) : "Now"
+    endDate ? moment(endDate).format(DATE_FORMAT) : 'Now'
   } ${formatDuration()}`;
 
   return (
@@ -66,13 +66,13 @@ export default function Item(props: Props) {
 
       <div
         className={` ml-5 items-end justify-center ${
-          !hasChildren ? "hidden" : ""
+          !hasChildren ? 'hidden' : ''
         }`}
         onClick={onClick}
       >
         <CaretRightOutlined
           className={`text-base font-extrabold  text-black ${
-            open ? "rotate-90" : ""
+            open ? 'rotate-90' : ''
           }`}
         />
       </div>
diff --git a/src/components/Timeline/index.tsx b/src/components/Timeline/index.tsx
index 3f92afe..5761580 100644
--- a/src/components/Timeline/index.tsx
+++ b/src/components/Timeline/index.tsx
@@ -32,7 +32,7 @@ export default function Timeline({ data }: Props) {
   function nodesMapToList(map: Map<string, ItemNode>): ItemNode[] {
     const result: { [k: number]: ItemNode } = {};
 
-    for (const item of map.values()) {
+    for (const item of Array.from(map.values())) {
       result[item.order] = item;
     }
     return Object.values(result);
@@ -71,9 +71,9 @@ export default function Timeline({ data }: Props) {
         order: count,
         open: true,
       });
-      count++;
+      count += 1;
 
-      if (hasChildren) {
+      if (hasChildren && parent.children?.length) {
         for (const child of parent.children) {
           key = `${i}.${j}`;
           newNodeMap.set(key, {
@@ -83,11 +83,11 @@ export default function Timeline({ data }: Props) {
             hasChildren: false,
             isChild: true,
           });
-          j++;
-          count++;
+          j += 1;
+          count += 1;
         }
       }
-      i++;
+      i += 1;
     }
     setNodeMap(newNodeMap);
     setNodes(nodesMapToList(newNodeMap));
diff --git a/src/layouts/Block.tsx b/src/layouts/Block.tsx
index f1b961c..1df6ad6 100644
--- a/src/layouts/Block.tsx
+++ b/src/layouts/Block.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 
-interface Props {}
+interface Props {
+  children: React.ReactNode;
+}
 
 export default function Block({ children }: Props) {
   return <div className="flex flex-1 p-5">{children}</div>;
diff --git a/src/layouts/Meta.tsx b/src/layouts/Meta.tsx
index 5c3cbe1..0bce2c9 100644
--- a/src/layouts/Meta.tsx
+++ b/src/layouts/Meta.tsx
@@ -1,8 +1,8 @@
-import Head from "next/head";
-import { useRouter } from "next/router";
-import { NextSeo } from "next-seo";
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import { NextSeo } from 'next-seo';
 
-import { AppConfig } from "@/utils/AppConfig";
+import { AppConfig } from '@/utils/AppConfig';
 
 type IMetaProps = {
   title: string;
diff --git a/src/layouts/Row.tsx b/src/layouts/Row.tsx
index b050857..0489f1a 100644
--- a/src/layouts/Row.tsx
+++ b/src/layouts/Row.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 
-interface Props {}
+interface Props {
+  children: React.ReactNode;
+}
 
 export default function Row({ children }: Props) {
-  return <div className="flex w-full  flex-1 flex-row py-10">{children}</div>;
+  return <div className="flex w-full flex-1 flex-row py-10">{children}</div>;
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4f63029..add2565 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -35,9 +35,8 @@ const LanguageChart = dynamic(() => import('@/components/LanguageChart'), {
 
 const Index = () => {
   const router = useRouter();
-  const [data, setData] = useState([]);
-  const [githubProfile, setGithubProfile] = useState<any>({});
-  const [pinnedRepos, setPinnedRepos] = useState([]);
+  const [data, setData] = useState<any[]>([]);
+  const [pinnedRepos, setPinnedRepos] = useState<any[]>([]);
 
   const {
     name,
@@ -58,30 +57,30 @@ const Index = () => {
       .then((responses) => {
         return responses.map((r) => r.json());
       })
-      .then(async ([repos, codingTime, languages]) => {
-        repos = await repos;
-        codingTime = await codingTime;
-        languages = await languages;
+      .then(async ([repos, codingTime, languages]: any[]) => {
+        const r = (await repos) as any;
+        const c = (await codingTime) as any;
+        const lang = (await languages) as any;
         setPinnedRepos(
-          repos.map((v: any) => ({
+          r.map((v: any) => ({
             ...v,
             url: GITHUB_REPO(username, v.name),
             name: capitalize(v.name?.replace(/-/g, ' ')),
           }))
         );
         const totalSeconds =
-          codingTime.data?.grand_total
-            ?.total_seconds_including_other_language || 0;
+          c.data?.grand_total?.total_seconds_including_other_language || 0;
 
         // Fixing data percentage
         const totalPercentage =
-          languages.data?.reduce((acc: number, curr: any) => {
-            if (isProgrammingLanguage(curr.name)) acc += curr.percent;
-            return acc;
+          lang.data?.reduce((acc: number, curr: any) => {
+            let a = acc;
+            if (isProgrammingLanguage(curr.name)) a = curr.percent;
+            return a;
           }, 0) || 100;
 
         const langData = [];
-        for (const l of languages.data || []) {
+        for (const l of lang.data || []) {
           if (!isProgrammingLanguage(l.name) || !l.percent) continue;
           langData.push({
             ...l,
@@ -96,7 +95,6 @@ const Index = () => {
       .getJsonP()
       .then((r) => r.json())
       .then((d) => {
-        console.log('profile', d.data);
         setGithubProfile(d.data);
       })
       .catch((e) => console.error(e));
@@ -254,9 +252,6 @@ const Index = () => {
               </div>
             </Block>
           </Row>
-          <Row>
-            <Block></Block>
-          </Row>
         </div>
       </Main>
     </>
diff --git a/src/templates/Main.tsx b/src/templates/Main.tsx
index 5bc0976..04ad43a 100644
--- a/src/templates/Main.tsx
+++ b/src/templates/Main.tsx
@@ -1,7 +1,7 @@
-import type { ReactNode } from "react";
+import type { ReactNode } from 'react';
 
-import Navbar from "@/components/Navbar";
-import Scroll from "@/components/Scroll";
+import Navbar from '@/components/Navbar';
+import Scroll from '@/components/Scroll';
 
 type IMainProps = {
   meta: ReactNode;
@@ -13,7 +13,7 @@ const Main = (props: IMainProps) => (
     {props.meta}
     <Navbar logoTitle="LucasHeartcliff" />
     <div
-      style={{ height: "calc(100% - 77px)" }}
+      style={{ height: 'calc(100% - 77px)' }}
       className="max-h-screen w-full text-gray-700 antialiased"
     >
       <div className="h-full text-xl">