add types to table

src/containers/domains-page/domains-page-filters/domains-page-filters.tsx

@@ -1,6 +1,5 @@
 "use client"
 import { Input } from "baseui/input";
-import { LabelLarge } from 'baseui/typography';
 import { Cell, Grid } from "baseui/layout-grid";
 import { Select } from "baseui/select";
 import { FormControl } from 'baseui/form-control';
@@ -13,6 +12,7 @@ import { Button } from "baseui/button";
 import { useMemo, useState } from "react";
 import CLUSTERS_CONFIGS from "@/configs/clusters/clusters-configs";
 
+const clustersOptions = CLUSTERS_CONFIGS.map(({ clusterName }) => ({ label: clusterName, id: clusterName }));
 export default function DomainPageHeader() {
   const [queryParams, setQueryParams] = usePageQueryParams(domainPageQueryParamsConfig, { pageRerender: false });
   const { cls, theme } = useStyletronClasses(cssStyles);
@@ -23,7 +23,6 @@ export default function DomainPageHeader() {
           .reduce((result, { key, defaultValue }) => queryParams[key] === defaultValue ? result : result + 1, 0); */
   }, [/* queryParams */]);
 
-  const clustersOptions = CLUSTERS_CONFIGS.map(({ clusterName }) => ({ label: clusterName, id: clusterName }));
   const clusterValue = clustersOptions.filter(({ id }) => id === queryParams.clusterName)
   return (
     <section>
@@ -54,7 +53,7 @@ export default function DomainPageHeader() {
                   size="compact"
                   value={clusterValue}
                   options={clustersOptions}
-                  onChange={(params) => setQueryParams({ clusterName: params.value[0].id })}
+                  onChange={(params) => setQueryParams({ clusterName: params.value[0]?.id })}
                 />
               </FormControl>
             </div>

src/containers/domains-page/domains-page.types.ts

@@ -1,24 +1,7 @@
-export type DomainCluster = {
-  clusterName: string;
-};
-
-export type DomainInfo = {
-  name: string;
-  uuid: string;
-};
-
-export type ReplicationConfiguration = {
-  activeClusterName: string;
-  clusters: Array<DomainCluster>;
-};
-
 export type DomainData = {
   //ClientDashboardHref: string;
   clusters: [{ clusterName: string }];
   id: string;
   name: string;
 };
 
-
-export type SortingOrder = 'ASC' | 'DESC';
-

src/containers/domains-page/domains-table-cluster-cell/domains-table-cluster-cell.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React from 'react';
 
-import type { DomainData, SortingOrder } from '@/containers/domains-page/domains-page.types';
+import type { DomainData } from '@/containers/domains-page/domains-page.types';
 import TableLink from '@/containers/domains-page/domains-table-link/domains-table-link';
 
 import useStyletronClasses from '@/hooks/use-styletron-classes';

src/containers/domains-page/domains-table/domains-table.config.ts

@@ -1,4 +1,4 @@
-import { TableColumn } from "@/layout/table";
+import { TableColumn } from "@/layout/table/table";
 import { DomainData } from "../domains-page.types";
 import DomainsTableClusterCell from "../domains-table-cluster-cell/domains-table-cluster-cell";
 import DomainsTableDomainNameCell from "../domains-table-domain-name-cell/domains-table-domain-name-cell";

src/containers/domains-page/domains-table/domains-table.tsx

@@ -2,7 +2,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Cell, Grid } from 'baseui/layout-grid';
 
-import Table from '@/layout/table';
+import Table from '@/layout/table/table';
 import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params';
 import sortBy, { SortByReturnValue, toggleSortOrder } from '@/utils/sort-by';
 import useStyletronClasses from '@/hooks/use-styletron-classes';
@@ -11,7 +11,8 @@ import domainPageQueryParamsConfig from '../domains-page-query-params';
 
 import { domainTableColumns } from './domains-table.config';
 
-import type { DomainData, SortingOrder } from '../domains-page.types';
+import type { DomainData } from '../domains-page.types';
+import { SortingOrder } from '@/layout/table/table.types';
 import { Props } from './domains-table.types';
 import { cssStyles } from './domains-table.styles';
 import { useInView } from 'react-intersection-observer';

src/containers/domains-page/domains-table/domains-table.types.ts

@@ -1,4 +1,4 @@
-import { TableColumn } from "@/layout/table";
+import { TableColumn } from "@/layout/table/table";
 import { DomainData } from "../domains-page.types";
 
 export type DomainTableColumns = Array<TableColumn<DomainData>>;

src/layout/table.tsx → src/layout/table/table.tsx

@@ -15,7 +15,7 @@ import {
 import ChevronUp from 'baseui/icon/chevron-up';
 import ChevronDown from 'baseui/icon/chevron-down';
 
-import { SortingOrder } from '@/containers/domains-page/domains-page.types';
+import { SortingOrder } from './table.types';
 
 const SortableHeaderContainer = styled('div', ({ $theme }) => ({
   display: 'flex',

src/layout/table/table.types.ts

@@ -0,0 +1 @@
+export type SortingOrder = 'ASC' | 'DESC';