Skip to content

Commit 3811fa0

Browse files
danielfdsilvadanielfdsilva
committed
Disable item editing and linting/file cleanup
1 parent 0825f9f commit 3811fa0

File tree

26 files changed

+637
-917
lines changed

26 files changed

+637
-917
lines changed

‎packages/client/src/ColorModeSwitcher.tsx‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎packages/client/src/components/HeadingLead.tsx‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎packages/client/src/components/InnerPageHeader.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ export const InnerPageHeader = forwardRef<InnerPageHeaderProps, 'div'>(
2525
</Text>
2626
)}
2727
<Flex gap={4} justifyContent='space-between' alignItems='center'>
28-
<Heading size='md'>{title}</Heading>
28+
<Heading size='md' noOfLines={1}>
29+
{title}
30+
</Heading>
2931
{actions && <Flex gap={2}>{actions}</Flex>}
3032
</Flex>
3133
</Flex>

‎packages/client/src/components/ItemResults/MapView.tsx‎

Lines changed: 60 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,54 @@
1-
import { useCallback, useEffect, useMemo, useState } from "react";
2-
import { Box } from "@chakra-ui/react";
3-
import Map, { type MapRef, type MapLayerMouseEvent, Source, Layer } from "react-map-gl/maplibre";
4-
import { StacItem } from "stac-ts";
5-
import getBbox from "@turf/bbox";
6-
import { BackgroundTiles } from "../Map";
1+
import React, { useCallback, useEffect, useMemo, useState } from 'react';
2+
import { Box } from '@chakra-ui/react';
3+
import Map, {
4+
type MapRef,
5+
type MapLayerMouseEvent,
6+
Source,
7+
Layer
8+
} from 'react-map-gl/maplibre';
9+
import { StacItem } from 'stac-ts';
10+
import getBbox from '@turf/bbox';
11+
import { BackgroundTiles } from '../Map';
712

813
type MapViewProps = {
914
results?: {
10-
type: "FeatureCollection";
11-
features: StacItem[]
15+
type: 'FeatureCollection';
16+
features: StacItem[];
1217
};
1318
highlightItem?: string;
1419
setHighlightItem: (id?: string) => void;
15-
id: string;
16-
hidden: boolean;
17-
}
20+
id?: string;
21+
hidden?: boolean;
22+
};
1823

1924
const resultsOutline = {
20-
"line-color": "#C53030",
21-
"line-width": 1,
25+
'line-color': '#C53030',
26+
'line-width': 1
2227
};
2328

2429
const resultsFill = {
25-
"fill-color": "#C53030",
26-
"fill-opacity": 0.1
30+
'fill-color': '#C53030',
31+
'fill-opacity': 0.1
2732
};
2833

2934
const resultsHighlight = {
30-
"fill-color": "#F6E05E",
31-
"fill-opacity": .7
35+
'fill-color': '#F6E05E',
36+
'fill-opacity': 0.7
3237
};
3338

34-
function MapView({ id, hidden, results, highlightItem, setHighlightItem }: MapViewProps) {
35-
const [ map, setMap ] = useState<MapRef>();
39+
function MapView({
40+
id,
41+
hidden,
42+
results,
43+
highlightItem,
44+
setHighlightItem
45+
}: MapViewProps) {
46+
const [map, setMap] = useState<MapRef>();
3647
const setMapRef = (m: MapRef) => setMap(m);
37-
const highlightFilter = useMemo(() => ["==", ["get", "id"], highlightItem || ""], [highlightItem]);
38-
48+
const highlightFilter = useMemo(
49+
() => ['==', ['get', 'id'], highlightItem || ''],
50+
[highlightItem]
51+
);
3952

4053
// MapLibre doesn't preserve IDs so we're adding the ID
4154
// to the properties so we can identify the items for user interactions.
@@ -51,6 +64,7 @@ function MapView({ id, hidden, results, highlightItem, setHighlightItem }: MapVi
5164
if (map && !hidden) {
5265
map.resize();
5366

67+
// @ts-expect-error results is a STACItem which is geojson compatible.
5468
const bounds = results?.features.length && getBbox(results);
5569
if (bounds) {
5670
const [x1, y1, x2, y2] = bounds;
@@ -59,40 +73,43 @@ function MapView({ id, hidden, results, highlightItem, setHighlightItem }: MapVi
5973
}
6074
}, [hidden, map, results]);
6175

62-
63-
const handleHover = useCallback((e: MapLayerMouseEvent) => {
64-
const interactiveItem = e.features && e.features[0];
65-
if(interactiveItem) {
66-
setHighlightItem(interactiveItem.properties?.id);
67-
}
68-
}, [setHighlightItem]);
76+
const handleHover = useCallback(
77+
(e: MapLayerMouseEvent) => {
78+
const interactiveItem = e.features && e.features[0];
79+
if (interactiveItem) {
80+
setHighlightItem(interactiveItem.properties?.id);
81+
}
82+
},
83+
[setHighlightItem]
84+
);
6985

7086
return (
7187
<Box
72-
h="calc(100vh - 2.5rem)"
73-
maxH="650px"
74-
position="sticky"
75-
top="4"
76-
flexBasis="500px"
88+
h='calc(100vh - 2.5rem)'
89+
maxH='650px'
90+
position='sticky'
91+
top='4'
92+
flexBasis='500px'
7793
id={id}
7894
hidden={hidden}
7995
>
8096
<Map
8197
ref={setMapRef}
8298
onMouseMove={handleHover}
8399
onMouseLeave={() => setHighlightItem()}
84-
interactiveLayerIds={["results-fill"]}
100+
interactiveLayerIds={['results-fill']}
85101
>
86102
<BackgroundTiles />
87-
{ results && (
88-
<Source
89-
id="results"
90-
type="geojson"
91-
data={resultsWithIDs}
92-
>
93-
<Layer id="results-line" type="line" paint={resultsOutline} />
94-
<Layer id="results-fill" type="fill" paint={resultsFill} />
95-
<Layer id="results-hover" type="fill" paint={resultsHighlight} filter={highlightFilter as any} />
103+
{results && (
104+
<Source id='results' type='geojson' data={resultsWithIDs}>
105+
<Layer id='results-line' type='line' paint={resultsOutline} />
106+
<Layer id='results-fill' type='fill' paint={resultsFill} />
107+
<Layer
108+
id='results-hover'
109+
type='fill'
110+
paint={resultsHighlight}
111+
filter={highlightFilter as any}
112+
/>
96113
</Source>
97114
)}
98115
</Map>

‎packages/client/src/components/ItemResults/TableView.tsx‎

Lines changed: 42 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Link, useNavigate } from "react-router-dom";
1+
import React from 'react';
2+
import { Link, useNavigate } from 'react-router-dom';
23
import {
34
TableContainer,
45
Table,
@@ -8,26 +9,26 @@ import {
89
Td,
910
Tbody,
1011
Alert,
11-
AlertIcon,
12-
} from "@chakra-ui/react";
13-
import { StacItem } from "stac-ts";
12+
AlertIcon
13+
} from '@chakra-ui/react';
14+
import { StacItem } from 'stac-ts';
1415

15-
import SortableTh, { Sort } from "../SortableTh";
16-
import { Loading } from "..";
17-
import { LoadingState } from "../../types";
16+
import SortableTh, { Sort } from '../SortableTh';
17+
import { Loading } from '..';
18+
import { LoadingState } from '../../types';
1819

1920
type TableViewProps = {
2021
results?: {
21-
type: "FeatureCollection";
22-
features: StacItem[]
22+
type: 'FeatureCollection';
23+
features: StacItem[];
2324
};
2425
state: LoadingState;
2526
compact: boolean;
2627
sort?: Sort;
2728
handleSort: (sort: Sort) => void;
2829
highlightItem?: string;
2930
setHighlightItem: (id?: string) => void;
30-
}
31+
};
3132

3233
function TableView({
3334
results,
@@ -41,65 +42,77 @@ function TableView({
4142
const navigate = useNavigate();
4243

4344
return (
44-
<TableContainer flex="1">
45-
<Table size="sm">
45+
<TableContainer flex='1'>
46+
<Table size='sm'>
4647
<Thead>
4748
<Tr>
48-
<SortableTh fieldName="id" sort={sort} setSort={handleSort}>ID</SortableTh>
49-
{!compact && <SortableTh fieldName="collection" sort={sort} setSort={handleSort}>Collection</SortableTh>}
50-
<Th aria-label="Actions" />
49+
<SortableTh fieldName='id' sort={sort} setSort={handleSort}>
50+
ID
51+
</SortableTh>
52+
{!compact && (
53+
<SortableTh
54+
fieldName='collection'
55+
sort={sort}
56+
setSort={handleSort}
57+
>
58+
Collection
59+
</SortableTh>
60+
)}
61+
<Th aria-label='Actions' />
5162
</Tr>
5263
</Thead>
5364
<Tbody>
54-
{ (!results || state === "LOADING") && (
65+
{(!results || state === 'LOADING') && (
5566
<Tr>
5667
<Td colSpan={3}>
5768
<Loading>Loading items...</Loading>
5869
</Td>
5970
</Tr>
6071
)}
61-
{ results && results.features.length === 0 && (
72+
{results && results.features.length === 0 && (
6273
<Tr>
6374
<Td colSpan={3}>
64-
<Alert status="warning" borderRadius="5px">
75+
<Alert status='warning' borderRadius='5px'>
6576
<AlertIcon />
6677
No items are matching your query
6778
</Alert>
6879
</Td>
6980
</Tr>
7081
)}
71-
{ results && results.features.length > 0 && (
82+
{results &&
83+
results.features.length > 0 &&
7284
results.features.map(({ id, collection }: StacItem) => (
7385
<Tr
7486
key={id}
7587
onMouseEnter={() => setHighlightItem(id)}
7688
onMouseLeave={() => setHighlightItem()}
77-
onClick={() => navigate(`/collections/${collection}/items/${id}/`)}
78-
bgColor={highlightItem === id ? "gray.50" : "inherit"}
79-
_hover={{ cursor: "pointer" }}
89+
onClick={() => {
90+
navigate(`/collections/${collection}/items/${id}/`);
91+
}}
92+
bgColor={highlightItem === id ? 'gray.50' : 'inherit'}
93+
_hover={{ cursor: 'pointer' }}
8094
>
8195
<Td>{id}</Td>
8296
{!compact && <Td>{collection}</Td>}
83-
<Td fontSize="sm">
97+
<Td fontSize='sm'>
8498
<Link
8599
to={`/collections/${collection}/items/${id}/`}
86100
aria-label={`View item ${id}`}
87-
onClick={e => e.stopPropagation()}
101+
onClick={(e) => e.stopPropagation()}
88102
>
89103
View
90104
</Link>
91-
{" "}|{" "}
105+
{/* |{' '}
92106
<Link
93107
to={`/collections/${collection}/items/${id}/edit/`}
94108
aria-label={`Edit item ${id}`}
95-
onClick={e => e.stopPropagation()}
109+
onClick={(e) => e.stopPropagation()}
96110
>
97111
Edit
98-
</Link>
112+
</Link> */}
99113
</Td>
100114
</Tr>
101-
))
102-
)}
115+
))}
103116
</Tbody>
104117
</Table>
105118
</TableContainer>

0 commit comments

Comments
 (0)