Update CI steps to include linter

Signed-off-by: Oleg S <[email protected]>
instructlab · May 15, 2024 · 0266297 · 0266297
1 parent a0507eb
commit 0266297
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 48 deletions.
diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml
@@ -7,7 +7,7 @@ name: Deploy Next.js site to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["dev", "main"]
+    branches: ['dev', 'main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -24,7 +24,7 @@ permissions:
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: false
 
 jobs:
@@ -37,7 +37,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: '20'
           cache: yarn
       - name: Setup Pages
         uses: actions/configure-pages@v4
@@ -60,6 +60,8 @@ jobs:
             ${{ runner.os }}-${{ github.ref }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
       - name: Install dependencies
         run: yarn install
+      - name: Lint check
+        run: yarn lint
       - name: Build with Next.js
         run: yarn build
       - name: Upload artifact

diff --git a/src/components/HowItWorks/InfographicAnimation/index.tsx b/src/components/HowItWorks/InfographicAnimation/index.tsx
@@ -1,4 +1,4 @@
-import { FC, Fragment, useEffect, useState } from 'react';
+import { FC, Fragment, useEffect, useCallback, useState } from 'react';
 import { infographicList } from './constant';
 
 import styles from './InfographicAnimation.module.scss';
@@ -27,43 +27,49 @@ const LayerImg: FC<{
   const [animList, setAnimList] = useState<any[] | null>(null); // eslint-disable-line
   const Img = layer.img;
 
-  const resetAnimation = (left: string, top: string, width: string) => {
-    setTargetStyle({ left: left, top: top, width: width });
-    animList?.map(d => clearTimeout(d));
-    setAnimList(null);
-  };
-
-  const setAnimation = (left: string, top: string, width: string) => {
-    if (layer.animation) {
-      setTargetStyle({
-        ...layer.animation[0], //base style to create transition
-        left: getPos('left', layer, originalSize, layer.animation[0].left),
-        top: getPos('top', layer, originalSize, layer.animation[0].top),
-        width,
-      });
-
-      const animList = [layer.animation].flat();
-      animList.map((d, i) => {
-        const animation = setTimeout(
-          () => {
-            setTargetStyle({
-              ...d,
-              left: d.left
-                ? getPos('left', layer, originalSize, d.left)
-                : `${left}%`,
-              top: d.top
-                ? getPos('top', layer, originalSize, d.top)
-                : `${top}%`,
-              width,
-            });
-          },
-          (layer?.delay || 0) * (i + 1),
-        );
-
-        setAnimList(prev => (prev ? [...prev, animation] : [animation]));
-      });
-    }
-  };
+  const resetAnimation = useCallback(
+    (left: string, top: string, width: string) => {
+      setTargetStyle({ left: left, top: top, width: width });
+      animList?.map(d => clearTimeout(d));
+      setAnimList(null);
+    },
+    [animList],
+  );
+
+  const setAnimation = useCallback(
+    (left: string, top: string, width: string) => {
+      if (layer.animation) {
+        setTargetStyle({
+          ...layer.animation[0], //base style to create transition
+          left: getPos('left', layer, originalSize, layer.animation[0].left),
+          top: getPos('top', layer, originalSize, layer.animation[0].top),
+          width,
+        });
+
+        const animList = [layer.animation].flat();
+        animList.map((d, i) => {
+          const animation = setTimeout(
+            () => {
+              setTargetStyle({
+                ...d,
+                left: d.left
+                  ? getPos('left', layer, originalSize, d.left)
+                  : `${left}%`,
+                top: d.top
+                  ? getPos('top', layer, originalSize, d.top)
+                  : `${top}%`,
+                width,
+              });
+            },
+            (layer?.delay || 0) * (i + 1),
+          );
+
+          setAnimList(prev => (prev ? [...prev, animation] : [animation]));
+        });
+      }
+    },
+    [layer, originalSize],
+  );
 
   useEffect(() => {
     if (!layer) return;
@@ -89,7 +95,7 @@ const LayerImg: FC<{
     const width = `${layer.size || 100}%`;
 
     if (animList === null) setAnimation(left, top, width);
-  }, [animList]);
+  }, [animList, layer, originalSize, setAnimation]);
 
   return (
     <Img
@@ -117,11 +123,11 @@ const InfographicAnimation: FC<InfographicAnimationProps> = ({
   const [isAnimOn, setIsAnimOn] = useState(false);
   const [animWidth, setAnimWidth] = useState(size);
 
-  const resetAnim = () => {
+  const resetAnim = useCallback(() => {
     const delays =
       Math.max(...infographicList[kind].layers.map(d => d.delay || 0)) + 5000;
     setTimeout(() => setIsAnimOn(false), delays);
-  };
+  }, [kind]);
 
   useEffect(() => {
     setTimeout(() => setIsAnimOn(true), 3000);
@@ -138,7 +144,7 @@ const InfographicAnimation: FC<InfographicAnimationProps> = ({
       setAnimList(() => ({ ...infographicList[kind] }) as any); // eslint-disable-line
       resetAnim();
     }
-  }, [kind, size]);
+  }, [kind, resetAnim, size]);
 
   useEffect(() => {
     if (!!infographicList[kind]) {
@@ -150,7 +156,7 @@ const InfographicAnimation: FC<InfographicAnimationProps> = ({
         resetAnim();
       }
     }
-  }, [isOn, isAnimOn]);
+  }, [isOn, isAnimOn, kind, resetAnim]);
 
   return (
     <>

diff --git a/src/components/Leadspace/graphics/Logo.tsx b/src/components/Leadspace/graphics/Logo.tsx
@@ -1,7 +1,8 @@
 import { FC } from 'react';
+import Image from 'next/image';
 
 const Logo: FC = () => {
-  return <img src="logo.png" alt="A cute dog" />;
+  return <Image src="logo.png" alt="A cute dog" />;
 };
 
 export default Logo;
diff --git a/src/components/Taxonomy/TaxonomyTree/Node.tsx b/src/components/Taxonomy/TaxonomyTree/Node.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { Variants, motion } from 'framer-motion';
 import Link from './Link';
-import { FC, ReactNode, RefObject, useEffect, useRef } from 'react';
+import { FC, ReactNode, RefObject, useRef } from 'react';
 import { NODE_DELAY, LINE_DRAW_SPEED } from './TaxonomyTree';
 
 import styles from './TaxonomyTree.module.scss';