ekaterinburgdev · gcor · Dec 27, 2023 · Dec 26, 2023 · Dec 26, 2023 · Dec 26, 2023
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,43 +1,63 @@
 {
-  "extends": ["next/core-web-vitals", "airbnb", "airbnb-typescript"],
-  "parserOptions": {
-    "project": "./tsconfig.json"
-  },
-  "rules": {
-    "indent": ["error", 4, { "SwitchCase": 1 }],
-    "no-param-reassign": ["error", { "props": false }],
-    "no-plusplus": "off",
-    "implicit-arrow-linebreak": "off",
+    "extends": [
+        "next/core-web-vitals",
+        "plugin:prettier/recommended",
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:jsx-a11y/recommended",
+        "plugin:react-hooks/recommended"
+    ],
+    "ignorePatterns": ["next.config.js", "scripts/**/*.*js"],
+    "parserOptions": {
+        "project": "./tsconfig.json"
+    },
+    "rules": {
+        "@next/next/no-img-element": "off",
 
-    "@typescript-eslint/indent": ["error", 4],
+        // TODO: remove this rule
+        "@typescript-eslint/no-explicit-any": "off",
+        // TODO: remove this rule
+        "@typescript-eslint/ban-ts-comment": "off",
+        // TODO: remove this rule
+        "jsx-a11y/click-events-have-key-events": "off",
+        // TODO: remove this rule
+        "jsx-a11y/no-static-element-interactions": "off",
 
-    "react/jsx-indent": ["error", 4],
-    "react/jsx-indent-props": ["error", 4],
-    "react/jsx-props-no-spreading": "off",
-    "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
-    "react/require-default-props": "off",
-    "react/jsx-no-useless-fragment": "off",
-    "react/jsx-one-expression-per-line": "off",
-    "react/react-in-jsx-scope": "off",
-
-    "import/extensions": ["error", "never", { "svg": "always", "json": "always", "css": "always" }],
-    "import/prefer-default-export": "off",
-    "import/order": [
-      "error",
-      {
-        "groups": ["builtin", "external", "internal", "parent", "sibling", "index"]
-      }
-    ],
+        "no-irregular-whitespace": "off",
+        "no-restricted-imports": [
+            "error",
+            {
+                "patterns": [
+                    {
+                        "group": ["../../"],
+                        "message": "Relative imports are not allowed."
+                    }
+                ]
+            }
+        ],
+
+        "import/order": [
+            "error",
+            {
+                "groups": ["builtin", "external", "internal", "parent", "sibling", "index"]
+            }
+        ],
 
-    "jsx-a11y/click-events-have-key-events": "off",
-    "jsx-a11y/no-static-element-interactions": "off",
-    "object-curly-newline": "off",
-    "@next/next/no-img-element": "off",
-    "max-len": "off",
-    "function-paren-newline": "off",
-    "operator-linebreak": "off",
-    "linebreak-style": "off"
-
-  },
-  "ignorePatterns": ["next.config.js", "scripts/**/*.*js"]
+        "import/no-restricted-paths": [
+            "error",
+            {
+                "zones": [
+                    // separate ui and logic
+                    { "from": "./constants", "target": "./shared" },
+                    { "from": "./state", "target": "./shared" },
+                    { "from": "./components", "target": "./shared" },
+                    { "from": "./features", "target": "./shared" },
+                    { "from": "./pages", "target": "./shared" },
+                    { "from": "./types", "target": "./shared" },
+                    { "from": "./state", "target": "./components" },
+                    { "from": "./features", "target": "./components" }
+                ]
+            }
+        ]
+    }
 }
diff --git a/.github/workflows/vercel-deploy.yml b/.github/workflows/vercel-deploy.yml
@@ -1,41 +1,41 @@
 name: Vercel Deploy
 on: [push]
 jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Extract branch name
-        id: extract_branch
-        run: |
-          branch_name=${GITHUB_REF#refs/heads/}
-          branch_formatted=${branch_name//\//-}
-          echo $branch_name
-          echo $branch_formatted
-          echo ::set-output name=branch::$branch_formatted
-      - name: Checkout Code
-        uses: actions/checkout@v2
+    deploy:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Extract branch name
+              id: extract_branch
+              run: |
+                  branch_name=${GITHUB_REF#refs/heads/}
+                  branch_formatted=${branch_name//\//-}
+                  echo $branch_name
+                  echo $branch_formatted
+                  echo ::set-output name=branch::$branch_formatted
+            - name: Checkout Code
+              uses: actions/checkout@v2
 
-      - name: Deploy to Staging
-        id: deploy-vercel-staging
-        uses: amondnet/vercel-action@v20
-        if: github.ref != 'refs/heads/main'
-        with:
-          vercel-token: ${{secrets.VERCEL_TOKEN}}
-          github-token: ${{secrets.VERCEL_GITHUB_TOKEN}}
-          vercel-org-id: ${{secrets.VERCEL_ORG_ID}}
-          vercel-project-id: ${{secrets.VERCEL_PROJECT_ID}}
-          alias-domains: >-
-            ${{ format(
-              '{0}-{1}.vercel.app',
-              secrets.VERCEL_DOMAIN,
-              steps.extract_branch.outputs.branch)
-            }}
-      - name: Deploy to Production
-        id: deploy-vercel-production
-        uses: amondnet/vercel-action@v20
-        if: github.ref == 'refs/heads/main'
-        with:
-          vercel-token: ${{secrets.VERCEL_TOKEN}}
-          vercel-org-id: ${{secrets.VERCEL_ORG_ID}}
-          vercel-project-id: ${{secrets.VERCEL_PROJECT_ID}}
-          vercel-args: "--prod"
+            - name: Deploy to Staging
+              id: deploy-vercel-staging
+              uses: amondnet/vercel-action@v20
+              if: github.ref != 'refs/heads/main'
+              with:
+                  vercel-token: ${{secrets.VERCEL_TOKEN}}
+                  github-token: ${{secrets.VERCEL_GITHUB_TOKEN}}
+                  vercel-org-id: ${{secrets.VERCEL_ORG_ID}}
+                  vercel-project-id: ${{secrets.VERCEL_PROJECT_ID}}
+                  alias-domains: >-
+                      ${{ format(
+                        '{0}-{1}.vercel.app',
+                        secrets.VERCEL_DOMAIN,
+                        steps.extract_branch.outputs.branch)
+                      }}
+            - name: Deploy to Production
+              id: deploy-vercel-production
+              uses: amondnet/vercel-action@v20
+              if: github.ref == 'refs/heads/main'
+              with:
+                  vercel-token: ${{secrets.VERCEL_TOKEN}}
+                  vercel-org-id: ${{secrets.VERCEL_ORG_ID}}
+                  vercel-project-id: ${{secrets.VERCEL_PROJECT_ID}}
+                  vercel-args: '--prod'
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -11,7 +11,7 @@ module.exports = {
         {
             files: ['*.json', '*.yaml'],
             options: {
-                tabWidth: 2,
+                tabWidth: 4,
             },
         },
     ],

diff --git a/README.md b/README.md
@@ -6,34 +6,33 @@
 
 <img src="https://github.com/ekaterinburgdev/map/assets/22644149/da549cf5-e54b-4984-b763-1d757d711bae" alt="" width="65%">
 
-
 ## About
 
 The map contains layers of data about objects in the city so that urbanists can easily access them to work with them.
 
 ### Features
 
-- Speed and performance map with [Maplibre GL](https://github.com/maplibre/maplibre-gl-js) and [React-mapbox-gl](https://github.com/alex3165/react-mapbox-gl)
-- Visualization for [Ekaterinburg opendata](https://github.com/ekaterinburgdev/map-api)
-- Detailed object cards
+-   Speed and performance map with [Maplibre GL](https://github.com/maplibre/maplibre-gl-js) and [React-mapbox-gl](https://github.com/alex3165/react-mapbox-gl)
+-   Visualization for [Ekaterinburg opendata](https://github.com/ekaterinburgdev/map-api)
+-   Detailed object cards
 
 ## Map data
 
-| Data layer                              | GeoJSON | Objects | Sources | Auto-update | Status |
-|-----------------------------------------|---------|---------|---------|------------|--------|
-| Design code objects                     | ⬇️ [design‑code](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-design-code.json) | | [map.ekaterinburg.design](https://map.ekaterinburg.design) | 🔄 | ✅ |
-| Traffic collision                       | ⬇️ [dtp](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-dtp.json) | ⬇️ [dtps](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-dtps.json) | [dtp-stat.ru](https://dtp-stat.ru) | 🔄 | ✅ | 
-| Touristic route (points)                | ⬇️ [color-points](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-color-points.json) | | [tourism.ekburg.ru](http://tourism.ekburg.ru) | — | ✅ |
-| Touristic route (lines)                 | ⬇️ [color-lines](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-color-lines.json) | | [ekbredline.ru](http://ekbredline.ru) | — | ✅ |
-| Quarter inspectors                      | ⬇️ [quarter_inspectors](https://github.com/ekaterinburgdev/map/blob/main/public/quarter_inspectors.json) | | [екатеринбург.рф](https://екатеринбург.рф/справка/квартальные) | — | ✅ |
-| Cultural heritage sites (objects)       | ⬇️ [okn‑objects](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-okn-objects.json) | ⬇️ [okn](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-okn.json) | [okn.midural.ru](https://okn.midural.ru/karta-obektov-kulturnogo-naslediya-sverdlovskoy-oblasti.html) | — | 🚧 |
-| Cultural heritage sites (protect zone)  | ⬇️ [okn‑protect](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-okn-protect.json) | | [okn.midural.ru](https://okn.midural.ru/karta-obektov-kulturnogo-naslediya-sverdlovskoy-oblasti.html) | — | 🚧 |
-| Cultural heritage sites (security zone) | ⬇️ [okn‑security](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-okn-security.json) | | [okn.midural.ru](https://okn.midural.ru/karta-obektov-kulturnogo-naslediya-sverdlovskoy-oblasti.html) | — | 🚧 |
-| Houses data                             | _Not available for download now.<br />We use [these recommendations](https://github.com/kachkaev/tooling-for-how-old-is-this-house#tooling-for-how-old-is-thishouse)_ | | [openstreetmap.org](https://www.openstreetmap.org/)<br />[how-old-is-this.house](https://how-old-is-this.house/)<br />[mingkh.ru](https://mingkh.ru/)<br />[domaekb.ru](https://domaekb.ru) | — | 🚧 |
-
-- ✅ — Verified source
-- 🚧 — Under construction. Contains inaccuracies, be careful!
-- 🔄 — [Autoupdate from sources](https://github.com/ekaterinburgdev/map-updater) (**now disabled**)
+| Data layer                              | GeoJSON                                                                                                                                                               | Objects                                                                          | Sources                                                                                                                                                                                     | Auto-update | Status |
+| --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------ |
+| Design code objects                     | ⬇️ [design‑code](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-design-code.json)                                                                        |                                                                                  | [map.ekaterinburg.design](https://map.ekaterinburg.design)                                                                                                                                  | 🔄          | ✅     |
+| Traffic collision                       | ⬇️ [dtp](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-dtp.json)                                                                                        | ⬇️ [dtps](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-dtps.json) | [dtp-stat.ru](https://dtp-stat.ru)                                                                                                                                                          | 🔄          | ✅     |
+| Touristic route (points)                | ⬇️ [color-points](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-color-points.json)                                                                      |                                                                                  | [tourism.ekburg.ru](http://tourism.ekburg.ru)                                                                                                                                               | —           | ✅     |
+| Touristic route (lines)                 | ⬇️ [color-lines](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-color-lines.json)                                                                        |                                                                                  | [ekbredline.ru](http://ekbredline.ru)                                                                                                                                                       | —           | ✅     |
+| Quarter inspectors                      | ⬇️ [quarter_inspectors](https://github.com/ekaterinburgdev/map/blob/main/public/quarter_inspectors.json)                                                              |                                                                                  | [екатеринбург.рф](https://екатеринбург.рф/справка/квартальные)                                                                                                                              | —           | ✅     |
+| Cultural heritage sites (objects)       | ⬇️ [okn‑objects](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-okn-objects.json)                                                                        | ⬇️ [okn](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-okn.json)   | [okn.midural.ru](https://okn.midural.ru/karta-obektov-kulturnogo-naslediya-sverdlovskoy-oblasti.html)                                                                                       | —           | 🚧     |
+| Cultural heritage sites (protect zone)  | ⬇️ [okn‑protect](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-okn-protect.json)                                                                        |                                                                                  | [okn.midural.ru](https://okn.midural.ru/karta-obektov-kulturnogo-naslediya-sverdlovskoy-oblasti.html)                                                                                       | —           | 🚧     |
+| Cultural heritage sites (security zone) | ⬇️ [okn‑security](https://github.com/ekaterinburgdev/map/blob/main/public/ekb-okn-security.json)                                                                      |                                                                                  | [okn.midural.ru](https://okn.midural.ru/karta-obektov-kulturnogo-naslediya-sverdlovskoy-oblasti.html)                                                                                       | —           | 🚧     |
+| Houses data                             | _Not available for download now.<br />We use [these recommendations](https://github.com/kachkaev/tooling-for-how-old-is-this-house#tooling-for-how-old-is-thishouse)_ |                                                                                  | [openstreetmap.org](https://www.openstreetmap.org/)<br />[how-old-is-this.house](https://how-old-is-this.house/)<br />[mingkh.ru](https://mingkh.ru/)<br />[domaekb.ru](https://domaekb.ru) | —           | 🚧     |
+
+-   ✅ — Verified source
+-   🚧 — Under construction. Contains inaccuracies, be careful!
+-   🔄 — [Autoupdate from sources](https://github.com/ekaterinburgdev/map-updater) (**now disabled**)
 
 ## Development
 
@@ -52,4 +51,5 @@ pnpm dev
 ```
 
 ## Activity
-![Alt](https://repobeats.axiom.co/api/embed/5c6cd2ad59ea3b7fde917c1aa66a1914235c84af.svg "Repobeats analytics image")
+
+![Alt](https://repobeats.axiom.co/api/embed/5c6cd2ad59ea3b7fde917c1aa66a1914235c84af.svg 'Repobeats analytics image')
diff --git a/components/App.tsx b/components/App.tsx
diff --git a/components/Card/Card.tsx b/components/Card/Card.tsx
@@ -0,0 +1,41 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { CardLoader } from 'components/Card/components/Loader/Loader';
+import { ContentConfig, MapItemType } from 'types/Content.types';
+
+interface Props {
+    contentConfig: ContentConfig;
+    popupId?: string;
+    popupType: MapItemType | null;
+}
+
+export function Card({ contentConfig, popupId, popupType }: Props) {
+    const [popupData, setPopupData] = useState<any>();
+    const [loading, setLoading] = useState<boolean>(false);
+
+    useEffect(() => {
+        async function fetchData() {
+            if (!popupId || !popupType) {
+                return;
+            }
+
+            setLoading(true);
+
+            const requestFunction = contentConfig[popupType].oneItemRequest;
+
+            const data = await requestFunction(popupId);
+
+            setPopupData(data);
+            setLoading(false);
+        }
+
+        fetchData();
+    }, [contentConfig, popupId, popupType]);
+
+    const CardContent = useMemo(() => {
+        setLoading(true);
+
+        return contentConfig[popupType]?.cardContent || (() => null);
+    }, [contentConfig, popupType]);
+
+    return loading ? <CardLoader /> : <CardContent placemark={popupData} />;
+}
diff --git a/...I/Card/DesktopCard/DesktopCard.module.css → ...s/Card/DesktopCard/DesktopCard.module.css b/...I/Card/DesktopCard/DesktopCard.module.css → ...s/Card/DesktopCard/DesktopCard.module.css
@@ -5,12 +5,12 @@
     max-height: calc(90vh - 2vw) !important;
     overflow-y: auto;
     overflow-x: hidden;
-    
+
     @mixin scroll;
 }
 
 .DesktopCard__header {
     position: absolute;
     right: 0;
     top: 0;
-}
+}