20240706

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

interface MuniData {
  serviceName: string;
  updatedAt: string;
  region: string;
  status: string;
  message: string;
  expandedRow: ExpandedRowData[];
}

interface ExpandedRowData {
  marketDataName: string;
  marketDataType: string;
  urn: string;
  desc: string;
  asOf: string;
}

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://your-api-endpoint.com' }),
  endpoints: (builder) => ({
    getMuniData: builder.query<MuniData[], void>({
      query: () => '/muniItrs/status',
    }),
  }),
});

export const { useGetMuniDataQuery } = api;

import { configureStore } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { api } from './services/api';

export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
});

setupListeners(store.dispatch);

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

import React, { useMemo } from 'react';
import { useGetMuniDataQuery } from '../services/api';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const Muni: React.FC = () => {
  const { data, error, isLoading } = useGetMuniDataQuery();

  const columnDefs = useMemo(() => [
    { headerName: "Status", field: "status", width: 120, cellRenderer: (params: any) => <span>{params.value}</span> },
    { headerName: "Service Name", field: "serviceName", width: 200, sortable: true },
    { headerName: "Region", field: "region", width: 200 },
    { headerName: "Updated At", field: "updatedAt", width: 200 },
    { headerName: "Message", field: "message", width: 300 },
  ], []);

  const detailCellRendererParams = useMemo(() => ({
    detailGridOptions: {
      columnDefs: [
        { headerName: 'Market Data Name', field: 'marketDataName', sortable: true },
        { headerName: 'Market Data Type', field: 'marketDataType' },
        { headerName: 'URN', field: 'urn' },
        { headerName: 'Desc', field: 'desc' },
        { headerName: 'AsOf', field: 'asOf' },
      ],
      defaultColDef: { flex: 1, minWidth: 100 },
    },
    getDetailRowData: (params: any) => {
      params.successCallback(params.data.expandedRow);
    },
  }), []);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading data</div>;

  return (
    <div className="ag-theme-alpine" style={{ height: 600, width: '100%' }}>
      <AgGridReact
        rowData={data}
        columnDefs={columnDefs}
        masterDetail={true}
        detailCellRendererParams={detailCellRendererParams}
      />
    </div>
  );
};

export default Muni;