CHORE: Upgrade deps

.eslintrc.js

@@ -1,11 +1,6 @@
 module.exports = {
   parser: '@typescript-eslint/parser', // Specifies the ESLint parser
-  extends: [
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
-    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
-    'plugin:prettier/recommended',
-  ],
+  extends: ['plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
   parserOptions: {
     ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
     sourceType: 'module', // Allows for the use of imports
@@ -15,7 +10,15 @@ module.exports = {
   },
   rules: {
     'react/prop-types': 'warn',
+    'react/react-in-jsx-scope': 'off',
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/ban-ts-comment': 'off',
     // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
     // e.g. "@typescript-eslint/explicit-function-return-type": "off",
   },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
 };

.github/workflows/main.yml

@@ -9,31 +9,37 @@ jobs:
   run_audit:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
+      - name: Checkout
         uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
         with:
-          persist-credentials: false
-          fetch-depth: 0
+          node-version: 18
 
-      - name: Use node 12
-        uses: actions/setup-node@v1
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
         with:
-          node-version: 12.x
+          version: 8
+          run_install: false
 
-      - name: Get yarn cache
-        id: yarn-cache
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
-      - name: Cache Node.js modules
-        uses: actions/cache@v1
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
         with:
-          path: ${{ steps.yarn-cache.outputs.dir }}
-          key: ${{ runner.OS }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.OS }}-yarn-
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: yarn install
+        run: pnpm install
 
       - name: Updating last update timestamp
         run: |
@@ -57,7 +63,7 @@ jobs:
           force: true
 
       - name: Run web perf job
-        run: yarn run job:webtest
+        run: pnpm run job:webtest
         env:
           PSI_API_KEY: ${{ secrets.PSI_API_KEY }}
           LIGHTHOUSE_API_KEY: ${{ secrets.LIGHTHOUSE_API_KEY }}
@@ -78,14 +84,3 @@ jobs:
           github_token: ${{ secrets.GIT_TOKEN }}
           directory: ./reports
           force: true
-
-      # - name: Build Web UI
-      #   run: yarn export
-
-      # - name: Deploy UI to surge.sh
-      #   uses: dswistowski/surge-sh-action@v1
-      #   with:
-      #     domain: "webperf-ecommerce-id.surge.sh"
-      #     project: "./out"
-      #     login: ${{ secrets.surge_login }}
-      #     token: ${{ secrets.surge_token }}

components/ChartTimeline.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Chart from 'react-apexcharts';
+
 interface ChartProps {
   data: any[];
   title: string;
@@ -29,12 +30,6 @@ const ChartTimeline = ({ data, title, dataKey }: ChartProps): React.ReactElement
   ];
 
   const options = {
-    chart: {
-      type: 'line',
-      toolbar: {
-        show: false,
-      },
-    },
     xaxis: {
       type: 'datetime',
     },
@@ -45,18 +40,20 @@ const ChartTimeline = ({ data, title, dataKey }: ChartProps): React.ReactElement
     },
     stroke: {
       curve: 'smooth',
-      width: 4,
+      width: 2,
     },
     dataLabels: {
       enabled: false,
     },
-    colors: ['#4299e1', '#48bb78'],
+    colors: ['#84cc16', '#c026d3'],
   };
 
   return (
     <>
       <div className="text-gray-600">{title}</div>
-      <Chart options={options} series={series} width="100%" />
+      {/*
+// @ts-ignore */}
+      <Chart options={options} series={series} width="100%" type="line" />
     </>
   );
 };

cronjob/lh.ts

@@ -15,7 +15,7 @@ export default async (name: string, url: string, device: string): Promise<LHResp
       },
     });
 
-    const result = await resp.json();
+    const result: any = await resp.json();
 
     if (result) {
       const loadingExperience = result?.loadingExperience || {};

cronjob/report.ts

@@ -11,7 +11,17 @@ export const updateReport = (name: string, device: string, response: any): void
       const objectData = JSON.parse(data);
       const newValue = modifyLatestData(objectData, response, name, device);
 
-      writeNewReport(newValue);
+      const currentYear = new Date().getFullYear();
+      const onlyCurrentYear = {};
+      const allDates = Object.keys(newValue);
+      for (let index = 0; index < allDates.length; index++) {
+        const theDate = allDates[index];
+        if (theDate.indexOf(`${currentYear}-`) >= 0) {
+          onlyCurrentYear[theDate] = newValue[theDate];
+        }
+      }
+
+      writeNewReport(onlyCurrentYear);
     } catch (e) {
       console.error(`> [REPORT] - failed write report`, e);
     }

next-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -6,9 +6,9 @@
 	"scripts": {
 		"dev": "next",
 		"build": "next build",
-		"export": "yarn build && next export",
+		"export": "pnpm run build && next export",
 		"start": "next start",
-		"lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
+		"lint": "eslint 'components/**/*.{js,ts,tsx}' 'constants/**/*.{js,ts,tsx}' 'cronjob/**/*.{js,ts,tsx}' 'pages/**/*.{js,ts,tsx}' --quiet --fix",
 		"test": "echo \"Error: no test specified\" && exit 0",
 		"job:webtest": "ts-node ./cronjob/run.ts"
 	},
@@ -23,52 +23,40 @@
 	},
 	"homepage": "https://github.com/mazipan/webperf-ecommerce-id#readme",
 	"dependencies": {
-		"@octokit/rest": "18.7.2",
-		"@types/prop-types": "^15.7.3",
-		"apexcharts": "^3.27.3",
+		"@types/prop-types": "^15.7.5",
+		"apexcharts": "^3.41.0",
 		"app-root-dir": "^1.0.2",
 		"cors": "^2.8.5",
-		"next": "10.2.3",
-		"node-fetch": "2.6.1",
-		"prop-types": "^15.7.2",
-		"react": "16.13.1",
-		"react-apexcharts": "^1.3.7",
-		"react-dom": "16.13.1",
-		"ts-node": "9.1.1",
-		"typescript": "4.3.5"
+		"next": "^12.3.4",
+		"node-fetch": "^3.3.1",
+		"prop-types": "^15.8.1",
+		"react": "18.2.0",
+		"react-apexcharts": "^1.4.1",
+		"react-dom": "18.2.0",
+		"ts-node": "10.9.1",
+		"typescript": "5.1.6"
 	},
 	"devDependencies": {
-		"@fullhuman/postcss-purgecss": "^3.0.0",
-		"@types/node-fetch": "2.5.7",
-		"@types/react": "^16.9.49",
-		"@typescript-eslint/eslint-plugin": "^4.3.0",
-		"@typescript-eslint/parser": "^4.3.0",
-		"autoprefixer": "9.8.6",
-		"chalk": "4.1.0",
-		"cli-table3": "0.6.0",
-		"eslint": "^7.10.0",
-		"eslint-config-prettier": "^6.12.0",
-		"eslint-plugin-prettier": "^3.1.4",
-		"eslint-plugin-react": "^7.21.2",
-		"husky": "^4.3.0",
-		"lint-staged": "^10.4.0",
-		"ora": "^5.1.0",
-		"postcss-import": "^12.0.1",
-		"prettier": "^2.1.2",
-		"rustywind": "0.6.7",
-		"tailwindcss": "1.8.10"
+		"@fullhuman/postcss-purgecss": "^5.0.0",
+		"@types/node-fetch": "2.6.4",
+		"@types/react": "^18.2.16",
+		"@typescript-eslint/eslint-plugin": "^6.2.0",
+		"@typescript-eslint/parser": "^6.2.0",
+		"autoprefixer": "10.4.14",
+		"chalk": "5.3.0",
+		"cli-table3": "0.6.3",
+		"eslint": "^8.45.0",
+		"eslint-config-prettier": "^8.8.0",
+		"eslint-plugin-prettier": "^5.0.0",
+		"eslint-plugin-react": "^7.33.0",
+		"ora": "^6.3.1",
+		"postcss": "^8.4.27",
+		"postcss-import": "^15.1.0",
+		"prettier": "^3.0.0",
+		"rustywind": "0.16.0",
+		"tailwindcss": "3.3.3"
 	},
-	"husky": {
-		"hooks": {
-			"pre-commit": "lint-staged"
-		}
-	},
-	"lint-staged": {
-		"*.{js,ts,tsx}": [
-			"eslint --fix"
-		]
-	},
-        "engines": {
-          "node": ">=16"
-       }
-}
+	"engines": {
+		"node": ">=18"
+	}
+}

pages/_document.js

@@ -1,13 +1,17 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document';
 
 export default class MyDocument extends Document {
-  render () {
+  render() {
     return (
       <Html lang="id">
         <Head />
         <meta name="google-site-verification" content="6MAhMl8DETJAEL6vwD4RIf4QOprJYS-Vwsz9f2LKaNk" />
         <script async src="https://www.googletagmanager.com/gtag/js?id=G-C7BKLRFC53"></script>
-        <script data-ad-client="ca-pub-5442972248172818" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+        <script
+          data-ad-client="ca-pub-5442972248172818"
+          async
+          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
+        ></script>
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -16,7 +20,7 @@ export default class MyDocument extends Document {
               gtag('js', new Date());
 
               gtag('config', 'G-C7BKLRFC53');
-              `
+              `,
           }}
         />
 
@@ -48,13 +52,13 @@ export default class MyDocument extends Document {
               });
               setTheme(preferredTheme || (darkQuery.matches ? 'dark' : 'light'));
             })();
-              `
+              `,
             }}
           />
           <Main />
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }