update eslint & paths

.eslintrc.json

@@ -35,23 +35,27 @@
         ]
       }
     ],
-    
+
     "import/order": [
       "error",
       {
         "groups": ["builtin", "external", "internal", "parent", "sibling", "index"]
       }
     ],
-   
+
     "import/no-restricted-paths": [
       "error",
       {
         "zones": [
           // separate ui and logic
-          { "from": "./components", "target": "./shared" },
-          { "from": "./state", "target": "./shared" },
           { "from": "./constants", "target": "./shared" },
-          { "from": "./pages", "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" }
         ]
       }
     ]

components/Card/Card.tsx

@@ -1,10 +1,14 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { CardLoader } from 'components/Card/components/Loader/Loader';
-import { CONTENTS_CONFIG } from 'components/Layers/Content.config';
-import { MapContext } from 'components/Map/providers/MapProvider';
+import { ContentConfig, MapItemType } from 'types/Content.types';
 
-export function Card() {
-  const { popupId, popupType } = useContext(MapContext);
+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);
 
@@ -16,7 +20,7 @@ export function Card() {
 
       setLoading(true);
 
-      const requestFunction = CONTENTS_CONFIG[popupType].oneItemRequest;
+      const requestFunction = contentConfig[popupType].oneItemRequest;
 
       const data = await requestFunction(popupId);
 
@@ -25,13 +29,13 @@ export function Card() {
     }
 
     fetchData();
-  }, [popupId, popupType]);
+  }, [contentConfig, popupId, popupType]);
 
   const CardContent = useMemo(() => {
     setLoading(true);
 
-    return CONTENTS_CONFIG[popupType]?.cardContent || (() => null);
-  }, [popupType]);
+    return contentConfig[popupType]?.cardContent || (() => null);
+  }, [contentConfig, popupType]);
 
   return loading ? <CardLoader /> : <CardContent placemark={popupData} />;
 }

components/Card/DesktopCard/DesktopCard.tsx

@@ -1,12 +1,17 @@
-import React, { useContext } from 'react';
-import { MapContext } from 'components/Map/providers/MapProvider';
+import React from 'react';
 import { Card } from 'components/Card/Card';
 import { Close } from 'shared/UI/Close';
+import { ContentConfig, MapItemType } from 'types/Content.types';
 import styles from './DesktopCard.module.css';
 
-export function DesktopCard() {
-  const { popupId, closePopup } = useContext(MapContext);
+interface Props {
+  contentConfig: ContentConfig;
+  popupId?: string;
+  popupType: MapItemType | null;
+  closePopup: () => void;
+}
 
+export function DesktopCard({ contentConfig, popupId, popupType, closePopup }: Props) {
   if (!popupId) {
     return <></>;
   }
@@ -16,7 +21,7 @@ export function DesktopCard() {
       <div className={styles.DesktopCard__header}>
         <Close close={closePopup} />
       </div>
-      <Card />
+      <Card popupId={popupId} popupType={popupType} contentConfig={contentConfig} />
     </div>
   );
 }

components/Card/MobileCard/MobileCard.tsx

@@ -1,19 +1,23 @@
 import Sheet from 'react-modal-sheet';
 import * as React from 'react';
-import { useContext } from 'react';
 import { Card } from 'components/Card/Card';
-import { MapContext } from 'components/Map/providers/MapProvider';
+import { ContentConfig, MapItemType } from 'types/Content.types';
 
-export function MobileCard() {
-  const { popupId, closePopup } = useContext(MapContext);
+interface Props {
+  contentConfig: ContentConfig;
+  popupId?: string;
+  popupType: MapItemType | null;
+  closePopup: () => void;
+}
 
+export function MobileCard({ contentConfig, popupId, popupType, closePopup }: Props) {
   return (
     <Sheet isOpen={Boolean(popupId)} onClose={closePopup} snapPoints={[0.5]}>
       <Sheet.Container>
         <Sheet.Header />
         <Sheet.Content>
           <Sheet.Scroller>
-            <Card />
+            <Card popupId={popupId} popupType={popupType} contentConfig={contentConfig} />
           </Sheet.Scroller>
         </Sheet.Content>
       </Sheet.Container>

components/Card/components/Header/Header.tsx

@@ -2,8 +2,7 @@ import React, { useMemo } from 'react';
 
 import { IconType } from 'shared/UI/Icons/Icons.types';
 import { useCopyHref } from 'shared/helpers/useCopyHref';
-
-import { Label } from '../Label/Label';
+import { Label } from 'shared/UI/Label/Label';
 
 import styles from './Header.module.css';
 import { HeaderProps } from './Header.types';

components/Card/components/Sources/Sources.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { SOURCES_BY_TYPE } from 'constants/sources';
-import { Link } from 'components/Card/components/Link/Link';
+import { Link } from 'shared/UI/Link/Link';
 import { SourcesProps } from './Sources.types';
 
 import styles from './Sources.module.css';

components/LeftSidebar/LeftSidebar.tsx

@@ -1,11 +1,6 @@
-import React from 'react';
-import { Filters } from 'components/Filters/Filters';
+import React, { ReactNode } from 'react';
 import styles from './LeftSidebar.module.css';
 
-export function LeftSidebar() {
-  return (
-    <div className={styles.leftSidebar}>
-      <Filters />
-    </div>
-  );
+export function LeftSidebar({ children }: { children: ReactNode }) {
+  return <div className={styles.leftSidebar}>{children}</div>;
 }

components/RightSidebar/RightSidebar.tsx

@@ -1,11 +1,6 @@
-import React from 'react';
-import { DesktopCard } from 'components/Card';
+import React, { ReactNode } from 'react';
 import styles from './RightSidebar.module.css';
 
-export function RightSidebar() {
-  return (
-    <div className={styles.rightSidebar}>
-      <DesktopCard />
-    </div>
-  );
+export function RightSidebar({ children }: { children: ReactNode }) {
+  return <div className={styles.rightSidebar}>{children}</div>;
 }

constants/colors.ts

@@ -1,4 +1,4 @@
-import { MapItemType } from 'types/map-item';
+import { MapItemType } from 'types/Content.types';
 
 export const MARKER_COLOR = {
   [MapItemType.DTP]: '#05B506',

constants/map.ts

@@ -1,3 +1,4 @@
 export const MIN_ZOOM = 11;
 export const MAX_ZOOM = 20;
 export const BUILDING_LAYER_ID = 'building';
+export const CENTER_COORDS: [number, number] = [60.605, 56.838011];

components/AboutProjectIcons/AboutProjectIcons.tsx → features/About/AboutProjectIcons/AboutProjectIcons.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import Image from 'next/image';
 import { Button, ButtonSize, ButtonType } from 'shared/UI/Button/Button';
-import { AboutProjectContext } from 'state/providers/AboutProjectProvider';
+import { AboutProjectContext } from 'features/About/AboutProjectProvider';
 import styles from './AboutProjectIcons.module.css';
 import githubLogo from './github-icon.svg';
 

components/AboutProjectModal/AboutProjectModal.tsx → features/About/AboutProjectModal.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect } from 'react';
-import { AboutProjectContent } from 'components/AboutProjectModal/AboutProjectContent';
-import { AboutProjectContext } from 'state/providers/AboutProjectProvider';
+import { AboutProjectContent } from 'features/About/AboutProjectContent';
+import { AboutProjectContext } from 'features/About/AboutProjectProvider';
 import { Close } from 'shared/UI/Close';
 import styles from './AboutProjectModal.module.css';
 

components/AboutProjectModal/MobileAboutProject.tsx → features/About/MobileAboutProject.tsx

@@ -1,8 +1,8 @@
 import Sheet from 'react-modal-sheet';
 import * as React from 'react';
 import { useContext } from 'react';
-import { AboutProjectContent } from 'components/AboutProjectModal/AboutProjectContent';
-import { AboutProjectContext } from 'state/providers/AboutProjectProvider';
+import { AboutProjectContent } from 'features/About/AboutProjectContent';
+import { AboutProjectContext } from 'features/About/AboutProjectProvider';
 
 export function MobileAboutProject() {
   const { isOpened, close } = useContext(AboutProjectContext);

components/AboutProjectModal/Team/TeamGrid.tsx → features/About/Team/TeamGrid.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames/bind';
-import teamMock from 'components/AboutProjectModal/Team/team-mock.json';
+import teamMock from './team-mock.json';
 import TeamPerson from './TeamPerson';
 import styles from './TeamGrid.module.css';
 import { ITeam } from './types';

components/Map/layers/BuildingSource.tsx → features/Building/BuildingSource.tsx

@@ -6,18 +6,18 @@ import {
 import { useEffect } from 'react';
 import { useMap } from 'react-map-gl';
 import { useSelector } from 'react-redux';
-import { getLayerStyle } from 'components/Map/helpers/getFeatureState';
-import { colorLuminance } from 'components/Map/helpers/colorLuminance';
+import { getLayerStyle } from 'features/Map/helpers/getFeatureState';
+import { colorLuminance } from 'features/Map/helpers/colorLuminance';
 import {
   AGE_FILTERS_DATA,
   FLOOR_FILTERS_DATA,
   WEAR_TEAR_FILTERS_DATA,
-} from 'components/Layers/Houses/Houses.constants';
+} from 'features/Houses/Houses.constants';
 import { activeFilterParamsSelector, activeFilterSelector } from 'state/features/selectors';
 import { FilterType } from 'types/Filters.types';
-import { MapItemType } from 'types/map-item';
-import useMapObjectState from 'components/Map/providers/useMapObjectState';
-import { usePopup } from 'components/Map/providers/usePopup';
+import { MapItemType } from 'types/Content.types';
+import useMapObjectState from 'features/Map/helpers/useMapObjectState';
+import { usePopup } from 'features/Map/providers/usePopup';
 
 const BUILDING_LAYER_ID = 'building';
 

components/Copyright/Copyright.tsx → features/Copyright/Copyright.tsx

@@ -1,15 +1,14 @@
 import { useContext } from 'react';
 import { useSelector } from 'react-redux';
-import { MapContext } from 'components/Map/providers/MapProvider';
 import { activeFilterSelector } from 'state/features/selectors';
-import { FILTERS_CONFIG } from '../Layers/Filters.config';
-
+import { MapContext } from 'features/Map/providers/MapProvider';
+import { FilterConfig } from 'types/Filters.types';
 import styles from './Copyright.module.css';
 
-export function Copyright() {
+export function Copyright({ filters }: { filters: FilterConfig }) {
   const { loading } = useContext(MapContext);
   const activeFilter = useSelector(activeFilterSelector);
-  const copyright = FILTERS_CONFIG[activeFilter]?.source;
+  const copyright = filters[activeFilter]?.source;
 
   return (
     <div className={styles.copyright} hidden={loading}>

components/Layers/DTP/CardContent/CardContent.types.tsx → features/DTP/CardContent/CardContent.types.tsx

@@ -1,4 +1,4 @@
-import { DTPObject } from 'components/Layers/DTP/dtp';
+import { DTPObject } from 'features/DTP/dtp';
 
 export type DTPCardContentProps = {
   placemark: DTPObject;

components/Layers/DTP/CardContent/components/Participants/Participant/Participant.tsx → features/DTP/CardContent/components/Participants/Participant/Participant.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 
-import { DTPParticipant } from 'components/Layers/DTP/dtp';
+import { DTPParticipant } from 'features/DTP/dtp';
 
 import { Info } from 'components/Card/components/Info/Info';
-import { Label } from 'components/Card/components/Label/Label';
+import { Label } from 'shared/UI/Label/Label';
 import { getYearNameByValue } from 'shared/helpers/getYearNameByValue';
 import { HealthStatusType } from '../Participants.types';
 import styles from './Participant.module.css';

components/Layers/DTP/CardContent/components/Participants/Participants.tsx → features/DTP/CardContent/components/Participants/Participants.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Label } from 'components/Card/components/Label/Label';
+import { Label } from 'shared/UI/Label/Label';
 
 import { Section } from 'components/Card/components/Section/Section';
-import { DTPParticipant, DTPVehicle } from 'components/Layers/DTP/dtp';
+import { DTPParticipant, DTPVehicle } from 'features/DTP/dtp';
 import { healthStatusToType, HEALTH_STATUS_COLOR, Participant } from './Participant/Participant';
 import { ParticipantsProps, HealthStatusType } from './Participants.types';
 

components/Layers/DTP/CardContent/components/Participants/Participants.types.ts → features/DTP/CardContent/components/Participants/Participants.types.ts

@@ -1,4 +1,4 @@
-import { DTPObjectProperties } from 'components/Layers/DTP/dtp';
+import { DTPObjectProperties } from 'features/DTP/dtp';
 
 export type ParticipantsProps = {
   participants: DTPObjectProperties['participants'];

components/Map/layers/DtpSource.tsx → features/DTP/DtpSource.tsx

@@ -4,12 +4,12 @@ import type { CircleLayer, HeatmapLayer } from 'react-map-gl';
 import { useSelector } from 'react-redux';
 import { activeFilterSelector, activeFilterParamsSelector } from 'state/features/selectors';
 import { FilterType } from 'types/Filters.types';
-import { SEVERITY_CONFIG } from 'components/Layers/DTP/DTP.constants';
-import { MapItemType } from 'types/map-item';
+import { SEVERITY_CONFIG } from 'features/DTP/DTP.constants';
+import { MapItemType } from 'types/Content.types';
 import { MAX_ZOOM, MIN_ZOOM } from 'constants/map';
 import dtp from 'public/ekb-dtp.json';
-import { usePopup } from 'components/Map/providers/usePopup';
-import useMapObjectState from 'components/Map/providers/useMapObjectState';
+import { usePopup } from 'features/Map/providers/usePopup';
+import useMapObjectState from 'features/Map/helpers/useMapObjectState';
 
 const DTP_LAYER_ID = 'dtp-point';
 const DTP_LAYER_HEATMAP_ID = 'dtp-point-heatmap';