Global refactor 2 (#124)

.eslintrc.json

@@ -55,6 +55,7 @@
                     { "from": "./pages", "target": "./shared" },
                     { "from": "./types", "target": "./shared" },
                     { "from": "./state", "target": "./components" },
+                    { "from": "./constants", "target": "./components" },
                     { "from": "./features", "target": "./components" }
                 ]
             }

components/Card/Card.tsx

@@ -1,13 +1,19 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { CardLoader } from 'components/Card/components/Loader/Loader';
+import styled from 'styled-components';
 import { ContentConfig, MapItemType } from 'types/Content.types';
+import { Loader } from 'shared/UI/Loader/Loader';
 
 interface Props {
     contentConfig: ContentConfig;
     popupId?: string;
     popupType: MapItemType | null;
 }
 
+const CardLoaderContainer = styled.div`
+    position: relative;
+    height: 600px;
+`;
+
 export function Card({ contentConfig, popupId, popupType }: Props) {
     const [popupData, setPopupData] = useState<any>();
     const [loading, setLoading] = useState<boolean>(false);
@@ -37,5 +43,11 @@ export function Card({ contentConfig, popupId, popupType }: Props) {
         return contentConfig[popupType]?.cardContent || (() => null);
     }, [contentConfig, popupType]);
 
-    return loading ? <CardLoader /> : <CardContent placemark={popupData} />;
+    return loading ? (
+        <CardLoaderContainer>
+            <Loader radius={180} />
+        </CardLoaderContainer>
+    ) : (
+        <CardContent placemark={popupData} />
+    );
 }

components/Card/components/ConstructionInfo/ConstructionInfo.tsx

@@ -1,10 +1,12 @@
 import React, { useMemo } from 'react';
-
 import { getYearNameByValue } from 'shared/helpers/getYearNameByValue';
 import { Info } from 'components/Card/components/Info/Info';
 
-import { YEAR_RE } from './ConstructionInfo.constants';
-import { ConstructionInfoProps } from './ConstructionInfo.types';
+const YEAR_RE = /\d{4}/;
+
+type ConstructionInfoProps = {
+    date: string;
+};
 
 export function ConstructionInfo({ date }: ConstructionInfoProps) {
     const constructionDateInfo = useMemo(() => {

components/Card/components/Header/Header.tsx

@@ -1,11 +1,14 @@
 import React, { useMemo } from 'react';
-
 import { IconType } from 'shared/UI/Icons/Icons.types';
 import { useCopyHref } from 'shared/helpers/useCopyHref';
 import { Label } from 'shared/UI/Label/Label';
-
 import styles from './Header.module.css';
-import { HeaderProps } from './Header.types';
+
+export type HeaderProps = {
+    coordinates?: [number, number] | number[];
+    title?: string;
+    description?: string;
+};
 
 const COPY_RESET_TIMEOUT = 2000;
 

components/Card/components/Sources/Sources.tsx

@@ -1,19 +1,14 @@
 import React from 'react';
-
-import { SOURCES_BY_TYPE } from 'constants/sources';
 import { Link } from 'shared/UI/Link/Link';
-import { SourcesProps } from './Sources.types';
-
+import { SourceInfo } from 'types/Sources.types';
 import styles from './Sources.module.css';
 
-export function Sources({ sources }: SourcesProps) {
+export function Sources({ sources }: { sources: SourceInfo[] }) {
     return (
         <div className={styles.sources}>
             <h3 className={styles.sources__title}>Источники</h3>
             <ul className={styles.sources__list}>
-                {sources.map((source) => {
-                    const { link, name, data } = SOURCES_BY_TYPE[source];
-
+                {sources.map(({ link, name, data }) => {
                     return (
                         <li key={link} className={styles.sources__listItem}>
                             <Link href={data || link} text={name} />

components/Card/index.ts

@@ -1,2 +1,2 @@
 export { DesktopCard } from './DesktopCard/DesktopCard';
-export { MobileCard } from './MobileCard/MobileCard';
+export { MobileCard } from './MobileCard';

features/Filters/Filters.tsx → components/Filters/Filters.tsx

@@ -1,24 +1,16 @@
-import React, { useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { FilterConfig, FilterConfigItem, FilterType } from 'types/Filters.types';
-import { Toggle } from 'features/Filters/components/Toggle/Toggle';
-import { Filter } from 'features/Filters/components/Filter/Filter';
-import { activeFilterSelector } from 'state/features/selectors';
-import { toggleData } from 'state/features/dataLayers';
+import React from 'react';
+import { FilterConfigItem, FilterType } from 'types/Filters.types';
+import { Toggle } from 'components/Filters/components/Toggle/Toggle';
+import { Filter } from 'components/Filters/components/Filter/Filter';
 import styles from './Filters.module.css';
 
-export function Filters({ filters }: { filters: FilterConfig }) {
-    const dispatch = useDispatch();
-
-    const onToggleClick = useCallback(
-        (type: FilterType) => {
-            dispatch(toggleData({ type }));
-        },
-        [dispatch],
-    );
-
-    const activeFilter = useSelector(activeFilterSelector);
+interface Props {
+    filters: Record<FilterType, FilterConfigItem>;
+    activeFilter: FilterType;
+    onToggleClick: (type: FilterType) => void;
+}
 
+export function Filters({ filters, activeFilter, onToggleClick }: Props) {
     return (
         <div className={styles.filters__body}>
             {(Object.entries(filters) as [FilterType, FilterConfigItem][]).map(

components/Filters/index.ts

@@ -0,0 +1 @@
+export { Filters } from './Filters';

components/LeftSidebar/LeftSidebar.module.css → components/LeftSidebar.tsx

@@ -1,4 +1,6 @@
-.leftSidebar {
+import styled from 'styled-components';
+
+export const LeftSidebar = styled.div`
     width: 29%;
     min-width: 340px;
     max-width: 435px;
@@ -10,4 +12,4 @@
     flex-direction: column;
     gap: 8px;
     max-height: calc(100vh - 120px);
-}
+`;

components/RightSidebar/RightSidebar.module.css → components/RightSidebar.tsx

@@ -1,4 +1,6 @@
-.rightSidebar {
+import styled from 'styled-components';
+
+export const RightSidebar = styled.div`
     width: 50%;
     max-width: 400px;
     position: fixed;
@@ -9,4 +11,4 @@
     flex-direction: column;
     gap: 8px;
     max-height: calc(100vh - 120px);
-}
+`;

constants/colors.ts

@@ -4,6 +4,4 @@ export const MARKER_COLOR = {
     [MapItemType.DTP]: '#05B506',
 };
 
-export const MARKER_FILTER_COLOR = MARKER_COLOR;
-
 export const DEFAULT_BULDING_COLOR_NORMAL = '#0c1021';

constants/sources.ts

@@ -1,47 +1,49 @@
-export const SOURCES_BY_TYPE = {
-    osm: {
+import { SourceType, SourcesConfig } from 'types/Sources.types';
+
+export const SOURCES_BY_TYPE: SourcesConfig = {
+    [SourceType.osm]: {
         name: 'OpenStreetMap',
         link: 'https://www.openstreetmap.org/',
         data: null,
     },
-    okn: {
+    [SourceType.okn]: {
         name: 'Объекты культурного наследия Свердловской области',
         link: 'https://okn.midural.ru/kategorii/obekty-kulturnogo-naslediya-sverdlovskoy-oblasti',
         data: null,
     },
-    howoldthishouse: {
+    [SourceType.howoldthishouse]: {
         name: 'Карта возраста домов',
         link: 'https://how-old-is-this.house/',
         data: 'https://how-old-is-this.house/dataset?p=h-ekb',
     },
-    domaekb: {
+    [SourceType.domaekb]: {
         name: 'Жилые дома Екатеринбурга',
         link: 'https://domaekb.ru',
         data: null,
     },
-    mingkh: {
+    [SourceType.mingkh]: {
         name: 'МинЖКХ',
         link: 'https://mingkh.ru',
         data: null,
     },
-    ekaterinburgdesign: {
+    [SourceType.ekaterinburgdesign]: {
         name: 'Дизайн-код Ектеринбурга',
         link: 'https://ekaterinburg.design',
         data: 'https://ekaterinburg.design',
     },
-    dtp: {
+    [SourceType.dtp]: {
         name: 'Карта ДТП',
         link: 'https://dtp-stat.ru/',
         data: 'https://dtp-stat.ru/opendata',
     },
-    ekb_quarter: {
+    [SourceType.ekb_quarter]: {
         name: 'екатеринбург.рф',
         link: 'https://екатеринбург.рф/справка/квартальные',
         data: null,
     },
-    design_objects_map: {
+    [SourceType.design_objects_map]: {
         name: 'Карта объектов «Дизайн-кода»',
         link: 'https://map.ekaterinburg.design',
         data: 'https://map.ekaterinburg.design',
     },
-} as const;
+};

features/About/AboutProjectIcons/AboutProjectIcons.tsx

@@ -9,30 +9,28 @@ export function AboutProjectIcons() {
     const { open } = useContext(AboutProjectContext);
 
     return (
-        <>
-            <div className={styles.aboutProjectIcons}>
-                <a
-                    className={styles.aboutProjectIcons__gh}
-                    href="https://github.com/ekaterinburgdev/map"
-                    target="_blank"
-                    rel="noreferrer"
-                >
-                    <Image src={githubLogo} alt="github" />
-                </a>
-                <Button
-                    text="О проекте"
-                    type={ButtonType.BLACK}
-                    size={ButtonSize.SMALL}
-                    onClick={open}
-                />
-                <Button
-                    text="Фидбек"
-                    type={ButtonType.YELLOW}
-                    size={ButtonSize.SMALL}
-                    onClick={() => {}}
-                    link="https://tally.so#tally-open=wLzxEG&tally-width=650&tally-overlay=1&tally-emoji-animation=none"
-                />
-            </div>
-        </>
+        <div className={styles.aboutProjectIcons}>
+            <a
+                className={styles.aboutProjectIcons__gh}
+                href="https://github.com/ekaterinburgdev/map"
+                target="_blank"
+                rel="noreferrer"
+            >
+                <Image src={githubLogo} alt="github" />
+            </a>
+            <Button
+                text="О проекте"
+                type={ButtonType.BLACK}
+                size={ButtonSize.SMALL}
+                onClick={open}
+            />
+            <Button
+                text="Фидбек"
+                type={ButtonType.YELLOW}
+                size={ButtonSize.SMALL}
+                onClick={() => {}}
+                link="https://tally.so#tally-open=wLzxEG&tally-width=650&tally-overlay=1&tally-emoji-animation=none"
+            />
+        </div>
     );
 }

features/Index/Content.config.ts → features/App/Content.config.ts

@@ -2,14 +2,13 @@ import { ContentConfig, MapItemType } from 'types/Content.types';
 import { designCode } from 'features/DesignCode/designCode';
 import { dtp } from 'features/DTP/dtp';
 import { okn } from 'features/OKN/okn';
-
 import { lines } from 'features/Lines/lines';
 import { LinesCardContent } from 'features/Lines/CardContent/CardContent';
 import { QuarterCardContent } from 'features/Quarter/CardContent/CardContent';
 import { quarter } from 'features/Quarter/quarter';
 import { DesignCodeCardContent } from 'features/DesignCode/CardContent/CardContent';
 import { DTPCardContent } from 'features/DTP/CardContent/CardContent';
-import { HousesCardContent } from 'features/Houses/CardContent/CardContent';
+import { HousesCardContent } from 'features/Buildings/CardContent/CardContent';
 import { OKNCardContent } from 'features/OKN/CardContent';
 
 export const CONTENTS_CONFIG: ContentConfig = {