refactor store

components/Card/DesktopCard/DesktopCard.tsx → components/Card/DesktopCard/index.tsx

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

components/Card/components/CardActions.tsx

@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react';
+import { Button, ButtonSize, ButtonType, Icon, IconType } from 'ekb';
+import { useCopyHref } from 'shared/helpers/useCopyHref';
+
+type Props = {
+    coordinates?: [number, number] | number[];
+};
+
+const COPY_RESET_TIMEOUT = 2000;
+
+export function CardActions({ coordinates }: Props) {
+    const { isCopied: isLinkCopied, onCopy: onCopyLink } = useCopyHref(
+        window.location.href,
+        COPY_RESET_TIMEOUT,
+    );
+
+    const coordsString = useMemo(() => {
+        if (!coordinates) {
+            return null;
+        }
+
+        const coords = Array.isArray(coordinates[0]) ? coordinates[0] : coordinates;
+
+        return `${coords[0]?.toFixed(6)}, ${coords[1]?.toFixed(6)}`;
+    }, [coordinates]);
+
+    const { isCopied: isCoordsCopied, onCopy: onCopyCoords } = useCopyHref(
+        coordsString,
+        COPY_RESET_TIMEOUT,
+    );
+
+    return (
+        <>
+            {coordsString && (
+                <Button
+                    type={ButtonType.DEFAULT}
+                    size={ButtonSize.SMALL}
+                    onClick={onCopyCoords}
+                    postfix={<Icon type={IconType.Copy} />}
+                >
+                    {isCoordsCopied ? 'Скопировано' : coordsString}
+                </Button>
+            )}
+            <Button
+                type={ButtonType.DEFAULT}
+                size={ButtonSize.SMALL}
+                onClick={onCopyLink}
+                postfix={<Icon type={IconType.Link} />}
+            >
+                {isLinkCopied ? 'Скопировано' : 'Ссылка на объект'}
+            </Button>
+        </>
+    );
+}

components/Card/components/Sources/Sources.tsx

@@ -6,7 +6,7 @@ import styles from './Sources.module.css';
 export function Sources({ sources }: { sources: SourceInfo[] }) {
     return (
         <div className={styles.sources}>
-            <h3 className={styles.sources__title}>Источники</h3>
+            {/* <h3 className={styles.sources__title}>Источники</h3> */}
             <ul className={styles.sources__list}>
                 {sources.map(({ link, name, data }) => {
                     return (

components/Card/Card.tsx → components/Card/index.tsx

@@ -25,7 +25,6 @@ export function Card({ contentConfig, popupId, popupType }: Props) {
             }
 
             setLoading(true);
-
             const requestFunction = contentConfig[popupType].oneItemRequest;
 
             const data = await requestFunction(popupId);

components/Filters/FilterGrid.tsx

@@ -0,0 +1,53 @@
+import React, { ComponentProps, useCallback, useEffect, useState } from 'react';
+import { Checkbox, ListGrid, ListGridItem } from 'ekb';
+
+export type IFilterGridItem = Partial<ComponentProps<typeof ListGridItem>> & {
+    type: string;
+    color?: string;
+};
+
+interface Props {
+    selectedByDefault?: string[];
+    items?: IFilterGridItem[];
+    onChange?: (state: string[]) => void;
+}
+
+export function FilterGrid({ items, onChange, selectedByDefault = [] }: Props) {
+    const [selected, setSelected] = useState<string[]>(selectedByDefault);
+
+    const toggle = useCallback(
+        (type: string) => {
+            if (selected.includes(type)) {
+                setSelected(selected.filter((s) => s !== type));
+            } else {
+                setSelected(selected.concat(type));
+            }
+        },
+        [selected],
+    );
+
+    useEffect(() => {
+        onChange?.(selected);
+    }, [onChange, selected]);
+
+    return (
+        <ListGrid>
+            {items.map(({ type, subTitle, description, color }) => (
+                <ListGridItem
+                    key={type}
+                    subTitle={subTitle}
+                    description={description}
+                    prefix={
+                        <Checkbox
+                            isSelected={selected.includes(type)}
+                            activeColor={color}
+                            toggle={() => toggle(type)}
+                        />
+                    }
+                >
+                    {type}
+                </ListGridItem>
+            ))}
+        </ListGrid>
+    );
+}

features/App/Content.config.ts

@@ -3,13 +3,13 @@ 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 { LinesCardContent } from 'features/Lines/LinesCardContent';
+import { QuarterCardContent } from 'features/Quarter/QuarterCardContent';
 import { quarter } from 'features/Quarter/quarter';
-import { DesignCodeCardContent } from 'features/DesignCode/CardContent/CardContent';
-import { DTPCardContent } from 'features/DTP/CardContent/CardContent';
-import { HousesCardContent } from 'features/Buildings/CardContent/CardContent';
-import { OKNCardContent } from 'features/OKN/CardContent';
+import { DesignCodeCardContent } from 'features/DesignCode/DesignCodeCard';
+import { DTPCardContent } from 'features/DTP/DtpCardContent';
+import { HousesCardContent } from 'features/Buildings/BuildingCard';
+import { OKNCardContent } from 'features/OKN/OknCardContent';
 
 export const CONTENTS_CONFIG: ContentConfig = {
     [MapItemType.Houses]: {

features/App/Filters.config.tsx

@@ -1,15 +1,13 @@
 import { DTPFilter } from 'features/DTP/Filter/DTPFilter';
-import { DesignCodeFilter } from 'features/DesignCode/Filter/DesignCodeFilter';
 import { HouseAgeFilter } from 'features/HouseAge/HouseAgeFilter';
 import { HouseFloorFilter } from 'features/HouseFloor/HouseFloorFilter';
 import { HouseWearTearFilter } from 'features/HouseWearTear/HouseWearTearFilter';
-import { LinesFilter } from 'features/Lines/Filter/LinesFilter';
 import { OknFilter } from 'features/OKN/Filter/OknFilter';
-import { QuarterFilter } from 'features/Quarter/Filter/QuarterFilter';
+import { QuarterFilter } from 'features/Quarter/QuarterFilter';
 import { SOURCES_BY_TYPE } from 'constants/sources';
 import { SourceType } from 'types/Sources.types';
 import { FilterConfig, FilterType } from 'types/Filters.types';
-import { FacadeFilter } from 'features/Facade/Filter/FacadeFilter';
+import { FacadeFilter } from 'features/Facade/FacadeFilter';
 
 export const FILTERS_CONFIG: FilterConfig = {
     [FilterType.HouseAge]: {
@@ -38,7 +36,6 @@ export const FILTERS_CONFIG: FilterConfig = {
     },
     [FilterType.DesignCode]: {
         title: '«Дизайн-код Екатеринбурга»',
-        component: <DesignCodeFilter />,
         source: [SOURCES_BY_TYPE[SourceType.design_objects_map]],
         isVerified: true,
     },
@@ -50,7 +47,6 @@ export const FILTERS_CONFIG: FilterConfig = {
     },
     [FilterType.Line]: {
         title: 'Туристические маршруты',
-        component: <LinesFilter />,
         isVerified: true,
     },
     [FilterType.Quarter]: {