fix dev review issues

visgl · Jan 16, 2024 · cfb0603 · cfb0603
1 parent aa0be78
commit cfb0603
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 51 deletions.
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
@@ -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 (
       <TableHeaderCell
         width={column.width}
-        key={sortDataColumnName ? sortDataColumnName : ""}
+        key={column.id}
       >
         {typeof sortDataColumnName !== "undefined" && (
           <TitleCellContainer onClick={() => onSort(sortDataColumnName)}>
@@ -248,15 +250,15 @@ export const ArcGisImportPanel = ({ onImport, onCancel }: InsertLayerProps) => {
 
   const renderRowCell = (
     column: Column,
-    contentItem: ArcGisContent,
+    contentItem: IArcGisContent,
     isRowSelected: boolean
   ): JSX.Element => {
     const dataColumnName = column.dataColumnName;
     return (
       <TableRowCell
         width={column.width}
         fontWeight={column.fontWeight}
-        key={`${dataColumnName ? dataColumnName : ""}${contentItem.id}`}
+        key={`${column.id}-${contentItem.id}`}
       >
         <CellDiv>
           {dataColumnName ? (
@@ -291,9 +293,7 @@ export const ArcGisImportPanel = ({ onImport, onCancel }: InsertLayerProps) => {
 
       <Table>
         <TableHeader>
-          <TableHeaderRow>
-            {columns.map((column: Column) => renderHeaderCell(column))}
-          </TableHeaderRow>
+          <tr>{columns.map((column: Column) => renderHeaderCell(column))}</tr>
         </TableHeader>
         <TableContent>
           {arcGisContentArray.map((contentItem) => {

diff --git 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<ArcGisContent[]>(
+export const getArcGisContent = createAsyncThunk<IArcGisContent[]>(
   "getArcGisContent",
-  async (): Promise<ArcGisContent[]> => {
-    const response: ArcGisContent[] = await getArcGisUserContent();
+  async (): Promise<IArcGisContent[]> => {
+    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
@@ -368,14 +368,14 @@ export type TilesetMetadata = {
   type?: TilesetType;
 };
 
-export type ArcGisContent = {
+export interface IArcGisContent {
   id: string;
   url: string;
   name: string;
   title: string;
   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
@@ -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<ArcGisContent[]> => {
-  const contentItems: ArcGisContent[] = [];
+export const getArcGisUserContent = async (): Promise<IArcGisContent[]> => {
+  const contentItems: IArcGisContent[] = [];
   const authentication = getArcGisSession();
   if (authentication) {
     const content = await getUserContent({ authentication });
@@ -140,7 +139,7 @@ export const getArcGisUserContent = async (): Promise<ArcGisContent[]> => {
         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);
       }
     }