fix: code smells

inspectIT · Nov 11, 2024 · d9ba070 · d9ba070
1 parent 1b9f2a2
commit d9ba070
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 22 deletions.
diff --git a/frontend/src/components/features/connections/filter/ConnectionAttributesFilter.tsx b/frontend/src/components/features/connections/filter/ConnectionAttributesFilter.tsx
@@ -16,7 +16,7 @@ export default function ConnectionAttributesFilter<TData>({
   column,
   columnFilterValues,
   sortedUniqueValues,
-}: ConnectionAttributesFilterProps<TData>) {
+}: Readonly<ConnectionAttributesFilterProps<TData>>) {
   const [open, setOpen] = useState(false);
   console.log(sortedUniqueValues);
   const [attributes, setAttributes] = useState<Attribute[]>([]);

diff --git a/frontend/src/components/features/connections/filter/ConnectionFilters.tsx b/frontend/src/components/features/connections/filter/ConnectionFilters.tsx
@@ -11,7 +11,7 @@ interface ConnectionFiltersProps {
 export default function ConnectionFilters({
   className,
   table,
-}: ConnectionFiltersProps) {
+}: Readonly<ConnectionFiltersProps>) {
   // Define columns that are filterable
   const filterableColumnIds = [
     "serviceName",

diff --git a/frontend/src/components/features/connections/table/ConnectionStatusBadge.tsx b/frontend/src/components/features/connections/table/ConnectionStatusBadge.tsx
@@ -7,7 +7,7 @@ interface ConnectionStatusBadgeProps {
 
 export default function ConnectionStatusBadge({
   status = "DISCONNECTED",
-}: ConnectionStatusBadgeProps) {
+}: Readonly<ConnectionStatusBadgeProps>) {
   let variant: "default" | "secondary" | "destructive";
   let additionalClasses = "";
 

diff --git a/frontend/src/components/features/connections/table/ConnectionTable.tsx b/frontend/src/components/features/connections/table/ConnectionTable.tsx
@@ -15,7 +15,6 @@ import {
 } from "@tanstack/react-table";
 import { Dispatch, SetStateAction, useState } from "react";
 import { Table } from "@/components/ui/shadcn/table";
-import React from "react";
 import { Connection } from "@/types/Connection";
 import ConnectionTableHeader from "./ConnectionTableHeader";
 import ConnectionTableBody from "./ConnectionTableBody";
@@ -47,7 +46,7 @@ export default function ConnectionTable({
     pageSize: 10,
   });
   const [sorting, setSorting] = useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([
     { id: "connectionStatus", value: ["CONNECTED"] },
   ]);
 

diff --git a/frontend/src/components/features/connections/table/ConnectionTableBody.tsx b/frontend/src/components/features/connections/table/ConnectionTableBody.tsx
@@ -6,11 +6,13 @@ import React from "react";
 import ConnectionDetails from "./details/ConnectionDetails";
 import { ConnectionsTableColumns } from "./ConnectionsTableColumns";
 
+interface ConnectionTableBodyProps {
+  table: Table<Connection>;
+}
+
 export default function ConnectionTableBody({
   table,
-}: {
-  table: Table<Connection>;
-}) {
+}: Readonly<ConnectionTableBodyProps>) {
   const isExpanded = (row: Row<Connection>) => {
     return row.getIsExpanded();
   };

diff --git a/frontend/src/components/features/connections/table/ConnectionTableHeader.tsx b/frontend/src/components/features/connections/table/ConnectionTableHeader.tsx
@@ -2,11 +2,13 @@ import { TableHead, TableHeader, TableRow } from "@/components/ui/shadcn/table";
 import { Connection } from "@/types/Connection";
 import { flexRender, Table } from "@tanstack/react-table";
 
+interface ConnectionTableHeaderProps {
+  table: Table<Connection>;
+}
+
 export default function ConnectionTableHeader({
   table,
-}: {
-  table: Table<Connection>;
-}) {
+}: Readonly<ConnectionTableHeaderProps>) {
   return (
     <TableHeader className="sticky top-0 bg-secondary">
       {table.getHeaderGroups().map((headerGroup) => (

diff --git a/frontend/src/components/ui/filter/ComboFilter.tsx b/frontend/src/components/ui/filter/ComboFilter.tsx
@@ -25,7 +25,7 @@ export default function ComboFilter<TData, TValue>({
   columnFilterValues,
   sortedUniqueValues,
   withSearch = false,
-}: SearchFilterProps<TData, TValue>) {
+}: Readonly<SearchFilterProps<TData, TValue>>) {
   const [open, setOpen] = useState(false);
 
   const handleOnItemSelect = (value: string) => {
@@ -62,13 +62,7 @@ export default function ComboFilter<TData, TValue>({
             aria-expanded={open}
             className="w-[200px] justify-between"
           >
-            {!columnFilterValues
-              ? "All"
-              : columnFilterValues.length == 1 && columnFilterValues[0] != ""
-              ? columnFilterValues[0]
-              : columnFilterValues.length == 1 && columnFilterValues[0] == ""
-              ? "None"
-              : "Multiple"}
+            {getTriggerText(columnFilterValues)}
             <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
           </Button>
         </PopoverTrigger>
@@ -98,3 +92,16 @@ export default function ComboFilter<TData, TValue>({
     </>
   );
 }
+
+function getTriggerText(columnFilterValues: string[] | undefined) {
+  if (!columnFilterValues) {
+    return "All";
+  }
+  if (columnFilterValues.length === 1 && columnFilterValues[0] === "") {
+    return "None";
+  }
+  if (columnFilterValues.length === 1) {
+    return columnFilterValues[0];
+  }
+  return "Multiple";
+}
diff --git a/frontend/src/components/ui/filter/Filter.tsx b/frontend/src/components/ui/filter/Filter.tsx
@@ -7,7 +7,9 @@ interface FilterProps<TData> {
   column: Column<TData>;
 }
 
-export default function Filter<TData>({ column }: FilterProps<TData>) {
+export default function Filter<TData>({
+  column,
+}: Readonly<FilterProps<TData>>) {
   const { filterVariant } = column.columnDef.meta ?? {};
 
   const columnFilterValue = column.getFilterValue() as
@@ -21,7 +23,7 @@ export default function Filter<TData>({ column }: FilterProps<TData>) {
       return [];
     } else {
       const values = Array.from(column.getFacetedUniqueValues().keys())
-        .sort()
+        .sort((a: string, b: string) => a.localeCompare(b))
         .slice(0, 5000);
       return values as string[];
     }

diff --git a/frontend/src/components/ui/table-pagination.tsx b/frontend/src/components/ui/table-pagination.tsx
@@ -1,7 +1,13 @@
 import { Table } from "@tanstack/react-table";
 import { Button } from "@/components/ui/shadcn/button";
 
-export default function TablePagination<T>({ table }: { table: Table<T> }) {
+interface TablePaginationProps<T> {
+  table: Table<T>;
+}
+
+export default function TablePagination<T>({
+  table,
+}: Readonly<TablePaginationProps<T>>) {
   return (
     <div className="flex items-center justify-end space-x-2 py-4">
       <Button