diff --git a/src/components/layers-panel/arcgis-import-panel/arcgis-import-panel.tsx b/src/components/layers-panel/arcgis-import-panel/arcgis-import-panel.tsx index a2e377ee..4af11e31 100644 --- a/src/components/layers-panel/arcgis-import-panel/arcgis-import-panel.tsx +++ b/src/components/layers-panel/arcgis-import-panel/arcgis-import-panel.tsx @@ -15,7 +15,7 @@ import { resetArcGisContentSelected, } from "../../../redux/slices/arcgis-content-slice"; import { - ArcGisContent, + IArcGisContent, ArcGisContentColumnName, ExpandState, CollapseDirection, @@ -44,8 +44,6 @@ const TableHeader = styled.thead` overflow: hidden; `; -const TableHeaderRow = styled.tr``; - const TableHeaderCell = styled.th<{ width: number }>` width: ${({ width }) => `${width}px`}; padding: 0; @@ -154,6 +152,36 @@ const IconContainer = styled.div<{ enabled: boolean }>` visibility: ${({ enabled }) => (enabled ? "visible" : "hidden")}; `; +type Column = { + id: string; + width: number; + fontWeight?: number; + dataColumnName?: ArcGisContentColumnName; + sortDataColumnName?: ArcGisContentColumnName; + columnName?: string; +}; + +const columns: Column[] = [ + { + id: "radio", + width: 44, + }, + { + id: "title", + width: 343, + fontWeight: 700, + dataColumnName: "title", + columnName: "Title", + }, + { + id: "created", + width: 149, + dataColumnName: "createdFormatted", + sortDataColumnName: "created", + columnName: "Date", + }, +]; + type InsertLayerProps = { onImport: (object: { name: string; url: string; token?: string }) => void; onCancel: () => void; @@ -190,39 +218,13 @@ export const ArcGisImportPanel = ({ onImport, onCancel }: InsertLayerProps) => { } }; - type Column = { - width: number; - fontWeight?: number; - dataColumnName?: ArcGisContentColumnName; - sortDataColumnName?: ArcGisContentColumnName; - columnName?: string; - }; - - const columns: Column[] = [ - { - width: 44, - }, - { - width: 343, - fontWeight: 700, - dataColumnName: "title", - columnName: "Title", - }, - { - width: 149, - dataColumnName: "createdFormatted", - sortDataColumnName: "created", - columnName: "Date", - }, - ]; - const renderHeaderCell = (column: Column): JSX.Element => { const sortDataColumnName = column.sortDataColumnName || column.dataColumnName; return ( {typeof sortDataColumnName !== "undefined" && ( onSort(sortDataColumnName)}> @@ -248,7 +250,7 @@ export const ArcGisImportPanel = ({ onImport, onCancel }: InsertLayerProps) => { const renderRowCell = ( column: Column, - contentItem: ArcGisContent, + contentItem: IArcGisContent, isRowSelected: boolean ): JSX.Element => { const dataColumnName = column.dataColumnName; @@ -256,7 +258,7 @@ export const ArcGisImportPanel = ({ onImport, onCancel }: InsertLayerProps) => { {dataColumnName ? ( @@ -291,9 +293,7 @@ export const ArcGisImportPanel = ({ onImport, onCancel }: InsertLayerProps) => { - - {columns.map((column: Column) => renderHeaderCell(column))} - + {columns.map((column: Column) => renderHeaderCell(column))} {arcGisContentArray.map((contentItem) => { diff --git a/src/redux/slices/arcgis-content-slice.ts b/src/redux/slices/arcgis-content-slice.ts index f671afeb..e9f7cf38 100644 --- a/src/redux/slices/arcgis-content-slice.ts +++ b/src/redux/slices/arcgis-content-slice.ts @@ -1,12 +1,12 @@ import { createSlice, PayloadAction, createAsyncThunk } from "@reduxjs/toolkit"; -import { ArcGisContent, ArcGisContentColumnName } from "../../types"; +import { IArcGisContent, ArcGisContentColumnName } from "../../types"; import { RootState } from "../store"; import { getArcGisUserContent } from "../../utils/arcgis"; // Define a type for the slice state interface ArcGisContentState { /** Array of user's content items taken from ArcGIS */ - arcGisContent: ArcGisContent[]; + arcGisContent: IArcGisContent[]; /** Content item selected in UI */ arcGisContentSelected: string; /** Column name to sort the list by */ @@ -28,7 +28,7 @@ const initialState: ArcGisContentState = { const sortList = (state: ArcGisContentState) => { const column = state.sortColumn; if (column) { - state.arcGisContent.sort((a: ArcGisContent, b: ArcGisContent) => { + state.arcGisContent.sort((a: IArcGisContent, b: IArcGisContent) => { let ac = a[column]; let bc = b[column]; if (ac === undefined || bc === undefined || ac === null || bc === null) { @@ -99,15 +99,15 @@ const arcGisContentSlice = createSlice({ }, }); -export const getArcGisContent = createAsyncThunk( +export const getArcGisContent = createAsyncThunk( "getArcGisContent", - async (): Promise => { - const response: ArcGisContent[] = await getArcGisUserContent(); + async (): Promise => { + const response: IArcGisContent[] = await getArcGisUserContent(); return response; } ); -export const selectArcGisContent = (state: RootState): ArcGisContent[] => +export const selectArcGisContent = (state: RootState): IArcGisContent[] => state.arcGisContent.arcGisContent; export const selectArcGisContentSelected = (state: RootState): string => diff --git a/src/types.ts b/src/types.ts index 8a2d2cef..c55a1f6f 100644 --- a/src/types.ts +++ b/src/types.ts @@ -368,7 +368,7 @@ export type TilesetMetadata = { type?: TilesetType; }; -export type ArcGisContent = { +export interface IArcGisContent { id: string; url: string; name: string; @@ -376,6 +376,6 @@ export type ArcGisContent = { token?: string; created: number; createdFormatted: string; -}; +} -export type ArcGisContentColumnName = keyof ArcGisContent; +export type ArcGisContentColumnName = keyof IArcGisContent; diff --git a/src/utils/arcgis.ts b/src/utils/arcgis.ts index d6d6fcca..1f57666c 100644 --- a/src/utils/arcgis.ts +++ b/src/utils/arcgis.ts @@ -1,7 +1,6 @@ import { ArcGISIdentityManager } from "@esri/arcgis-rest-request"; - import { getUserContent, IItem } from "@esri/arcgis-rest-portal"; -import { ArcGisContent } from "../types"; +import { IArcGisContent } from "../types"; import { formatTimestamp } from "../utils/format/format-utils"; const ARCGIS_REST_USER_SESSION = "__ARCGIS_REST_USER_SESSION__"; @@ -102,7 +101,7 @@ export const arcGisRequestLogout = async () => { return await updateSessionInfo(); }; -class ArcGisContentClass implements ArcGisContent { +class ArcGisContent implements IArcGisContent { id = ""; url = ""; name = ""; @@ -127,8 +126,8 @@ class ArcGisContentClass implements ArcGisContent { * Gets the ArcGIS user's content list. * @returns The content list containig the necessay info to load the content items. */ -export const getArcGisUserContent = async (): Promise => { - const contentItems: ArcGisContent[] = []; +export const getArcGisUserContent = async (): Promise => { + const contentItems: IArcGisContent[] = []; const authentication = getArcGisSession(); if (authentication) { const content = await getUserContent({ authentication }); @@ -140,7 +139,7 @@ export const getArcGisUserContent = async (): Promise => { item.typeKeywords.includes("Hosted Service") ) { const token = await authentication.getToken(item.url); - const contentItem: ArcGisContent = new ArcGisContentClass(item, token); + const contentItem: ArcGisContent = new ArcGisContent(item, token); contentItems.push(contentItem); } }