refactor:cleanup code

.eslintrc.js

@@ -0,0 +1,27 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+  ],
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react', 'prettier'],
+  root: true,
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  rules: {
+    'prettier/prettier': 'off',
+  },
+};

.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  trailingComma: 'es5',
+  semi: true,
+  bracketSpacing: true,
+  singleQuote: true,
+};

gatsby-config.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-undef */
+// eslint-disable-next-line no-undef
 module.exports = {
   pathPrefix: process.env.PATH_PREFIX || '/',
   siteMetadata: {
@@ -19,17 +21,19 @@ module.exports = {
   plugins: [
     'gatsby-transformer-json',
     'gatsby-plugin-react-helmet',
+    'gatsby-plugin-offline',
+
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: 'gatsby-plugin-vercel',
       options: {
-        path: './src/static/',
+        // (optional) Prints metrics in the console when true
+        debug: false,
       },
     },
     {
-      resolve: "gatsby-plugin-vercel",
+      resolve: 'gatsby-source-filesystem',
       options: {
-        // (optional) Prints metrics in the console when true
-        debug: false,
+        path: './src/static/',
       },
     },
     {
@@ -41,7 +45,7 @@ module.exports = {
     {
       resolve: 'gatsby-alias-imports',
       options: {
-        rootFolder: './',
+        rootFolder: '.',
       },
     },
     {
@@ -75,31 +79,5 @@ module.exports = {
         icon: 'src/images/favicon.png', // This path is relative to the root of the site.
       },
     },
-    {
-      resolve: `gatsby-plugin-offline`,
-      options: {
-        runtimeCaching: [
-          {
-            urlPattern: /^https?:.*\/icons\/.*\.png/,
-            handler: `CacheFirst`,
-          },
-          {
-            urlPattern:
-              /^https?:.*\.(png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/,
-            handler: `StaleWhileRevalidate`,
-          },
-          {
-            urlPattern: /^https?:\/\/api\.mapbox\.com\//,
-            handler: `StaleWhileRevalidate`,
-          },
-          {
-            urlPattern: /^https?:.*\/page-data\/.*\.json/,
-            handler: `StaleWhileRevalidate`,
-          },
-        ],
-        skipWaiting: true,
-        clientsClaim: true,
-      },
-    },
   ],
 };

gatsby-node.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-undef
 exports.createSchemaCustomization = ({ actions }) => {
   const { createTypes } = actions;
   const typeDefs = `

jsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "target": "ES2020",
+    "jsx": "react",
+    "checkJs": true,
+    "experimentalDecorators": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "baseUrl": ".",
+    "paths": {
+      "src/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "**/node_modules/*"]
+}

package.json

@@ -46,7 +46,7 @@
     "serve": "gatsby serve",
     "serve-prefix": "gatsby serve --prefix-paths",
     "lint": "eslint --ext .js,.jsx src --fix",
-    "check": "npx prettier --write *.{js,jsx,scss,json,md,yaml}",
+    "check": "npx prettier --write {*,src/**/*}.{js,jsx,scss,json,md,yaml}",
     "ci": "yarn run check && yarn run build && yarn run test"
   },
   "engineStrict": true,
@@ -61,13 +61,10 @@
   "devDependencies": {
     "babel-eslint": "^10.1.0",
     "eslint": "^8.17.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.30.0",
-    "eslint-plugin-react-hooks": "^4.6.0"
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "prettier": "2.8.8"
   },
   "volta": {
     "node": "16.18.1",

src/components/Layout/style.module.scss

@@ -1,17 +1,19 @@
-@import "../../styles/variables.scss";
+@import '../../styles/variables.scss';
 
 .body {
   background-color: $dark;
   color: $nike;
+
   p,
   h1,
   h3,
   h4,
   li,
   a {
     color: $nike;
-    text-decoration:none;
+    text-decoration: none;
   }
+
   h1 {
     font-size: 3rem;
     font-weight: 700;

src/components/LocationStat/index.jsx

@@ -3,7 +3,7 @@ import YearStat from 'src/components/YearStat';
 import {
   CHINESE_LOCATION_INFO_MESSAGE_FIRST,
   CHINESE_LOCATION_INFO_MESSAGE_SECOND,
-} from '../../utils/const';
+} from 'src/utils/const';
 import CitiesStat from './CitiesStat';
 import LocationSummary from './LocationSummary';
 import PeriodStat from './PeriodStat';

src/components/RunMap/index.jsx

@@ -36,9 +36,13 @@ const RunMap = ({
         const map = ref.getMap();
         if (map && IS_CHINESE) {
           map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }));
-          if (!ROAD_LABEL_DISPLAY) { 
+          if (!ROAD_LABEL_DISPLAY) {
             // todo delete layers
-            map.on('load', () => {MAP_LAYER_LIST.forEach((layerId) => {map.removeLayer(layerId)})});
+            map.on('load', () => {
+              MAP_LAYER_LIST.forEach((layerId) => {
+                map.removeLayer(layerId);
+              });
+            });
           }
         }
       }
@@ -71,7 +75,7 @@ const RunMap = ({
   return (
     <ReactMapGL
       {...viewport}
-      width='100%'
+      width="100%"
       height={MAP_HEIGHT}
       mapStyle="mapbox://styles/mapbox/dark-v10"
       onViewportChange={setViewport}

src/components/RunMap/style.module.scss

@@ -19,16 +19,16 @@
   cursor: pointer;
   width: 7%;
   padding: 1.3rem;
-  margin-top: .1rem;
+  margin-top: 0.1rem;
   font-size: 1rem;
   text-align: center;
   color: white;
   font-family: $global-font-family;
 }
 
 .fullscreenButton {
-  top:0rem;
-  right:0rem;
+  top: 0rem;
+  right: 0rem;
   opacity: 0.3;
   padding: 1.2rem;
 }

src/components/RunTable/RunRow.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MAIN_COLOR } from 'src/utils/const';
-import { formatPace, titleForRun, formatRunTime  } from 'src/utils/utils';
+import { formatPace, titleForRun, formatRunTime } from 'src/utils/utils';
 import styles from './style.module.scss';
 
 const RunRow = ({ runs, run, locateActivity, runIndex, setRunIndex }) => {

src/components/RunTable/index.jsx

@@ -1,6 +1,10 @@
 import React, { useState } from 'react';
 import { MAIN_COLOR } from 'src/utils/const';
-import { sortDateFunc, sortDateFuncReverse, convertMovingTime2Sec } from 'src/utils/utils';
+import {
+  sortDateFunc,
+  sortDateFuncReverse,
+  convertMovingTime2Sec,
+} from 'src/utils/utils';
 import RunRow from './RunRow';
 import styles from './style.module.scss';
 
@@ -24,11 +28,11 @@ const RunTable = ({
       ? a.average_heartrate - b.average_heartrate
       : b.average_heartrate - a.average_heartrate;
   const sortRunTimeFunc = (a, b) => {
-    const aTotalSeconds = convertMovingTime2Sec(a.moving_time)
-    const bTotalSeconds = convertMovingTime2Sec(b.moving_time)
+    const aTotalSeconds = convertMovingTime2Sec(a.moving_time);
+    const bTotalSeconds = convertMovingTime2Sec(b.moving_time);
     return sortFuncInfo === 'Time'
       ? aTotalSeconds - bTotalSeconds
-      : bTotalSeconds - aTotalSeconds
+      : bTotalSeconds - aTotalSeconds;
   };
   const sortDateFuncClick =
     sortFuncInfo === 'Date' ? sortDateFunc : sortDateFuncReverse;

src/components/RunTable/style.module.scss

@@ -40,4 +40,3 @@
 .runDate {
   color: $light;
 }
-

src/components/YearStat/index.jsx

@@ -3,7 +3,7 @@ import Stat from 'src/components/Stat';
 import useActivities from 'src/hooks/useActivities';
 import useHover from 'src/hooks/useHover';
 import { formatPace } from 'src/utils/utils';
-import styles from './style.module.scss';
+import './style.module.scss';
 
 const YearStat = ({ year, onClick }) => {
   let { activities: runs, years } = useActivities();

src/components/YearStat/style.module.scss

@@ -1,8 +1,7 @@
 .yearSVG {
   height: 65%;
-  width:  65%;
+  width: 65%;
   margin: 1rem 0 0;
   border: 0;
   padding: 0;
 }
-