format code with Prettier (#84)

* reduce StarrySky performance impact

* a bit changes regarding eslint and prettier

* add vscode settings.json

* add ionicons/icons in bundledDependencies

* format code with Prettier

* run Prettier again

.eslintrc.json.airbnb

@@ -0,0 +1,51 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["plugin:react/recommended", "airbnb", "prettier"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "rules": {
+    "prettier/prettier": ["error"],
+    "import/extensions": [
+      "error",
+      "always",
+      {
+        "ts": "never",
+        "tsx": "never",
+        "js": "never",
+        "jsx": "never",
+        "mjs": "never"
+      }
+    ],
+    "react/jsx-filename-extension": [
+      1,
+      { "extensions": [".js", ".jsx", "tsx"] }
+    ],
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "function-expression"
+      }
+    ],
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error"]
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".ts", ".tsx"],
+        "moduleDirectory": ["src", "node_modules"]
+      }
+    }
+  }
+}

package.json

@@ -107,5 +107,8 @@
     "prettier": "^2.7.1",
     "react-scripts": "^4.0.3"
   },
+  "bundledDependencies": [
+    "ionicons/icons"
+  ],
   "description": "An Ionic project"
 }

src/components/CustomToolbar.scss

@@ -18,7 +18,7 @@
 }
 
 .cesium-navigation-help-details {
-  color: var(--ion-color-dark)
+  color: var(--ion-color-dark);
 }
 
 .popover {

src/components/RasterMenu.scss

@@ -10,8 +10,10 @@ $header-height: 3.5rem;
 $title-font-size: 1rem;
 $subtitle-font-size: 0.8rem;
 $arrow-size: 2rem;
-$raster-menu-height: $icon-size + $card-top-margin + $card-bottom-margin + $selected-bar-height + $header-height;
-$chevron-vertical-position: math.div($raster-menu-height - $arrow-size, 2) + $raster-menu-bottom;
+$raster-menu-height: $icon-size + $card-top-margin + $card-bottom-margin +
+  $selected-bar-height + $header-height;
+$chevron-vertical-position: math.div($raster-menu-height - $arrow-size, 2) +
+  $raster-menu-bottom;
 
 .raster-menu-scroll {
   text-align: center;
@@ -50,26 +52,26 @@ $chevron-vertical-position: math.div($raster-menu-height - $arrow-size, 2) + $ra
 
 .map-icon {
   height: $icon-size;
-  width: $icon-size
+  width: $icon-size;
 }
 
 .selected-opt {
   div {
     background-color: var(--ion-color-primary);
     height: $selected-bar-height;
-    width: 100%
+    width: 100%;
   }
 
   ion-card-title {
     font-weight: bolder;
-    color: var(--ion-color-primary)
+    color: var(--ion-color-primary);
   }
 }
 
 .unselected-opt {
   div {
     height: $selected-bar-height;
-    width: 100%
+    width: 100%;
   }
 
   ion-card-title {
@@ -124,5 +126,3 @@ $chevron-vertical-position: math.div($raster-menu-height - $arrow-size, 2) + $ra
     background: rgba(var(--ion-color-light-rgb), 0.25);
   }
 }
-
-

src/components/RasterMenu.tsx

@@ -4,7 +4,8 @@ import {
   IonCardHeader,
   IonCardSubtitle,
   IonCardTitle,
-  IonIcon, useIonLoading
+  IonIcon,
+  useIonLoading,
 } from '@ionic/react'
 
 import './RasterMenu.scss'
@@ -164,7 +165,7 @@ export const RasterMenu: React.FC<ContainerProps> = ({
   isViewerLoading,
 }) => {
   const [isSelectedList, setIsSelectedList] = useState(initialSelection())
-  const [present, dismiss] = useIonLoading();
+  const [present, dismiss] = useIonLoading()
 
   let optionList = []
   for (let i = 0; i < rasterMaps.length; i++) {
@@ -175,7 +176,7 @@ export const RasterMenu: React.FC<ContainerProps> = ({
         onClick={async (e) => {
           if (!isSelectedList[i]) {
             select(i)
-            present({message: 'Loading...'})
+            present({ message: 'Loading...' })
             addLayer(rasterMaps[i].layer)
             await delay(500)
             while (!isViewerLoading()) {