import { useEffect, useState } from 'react'; import { Link, useSearchParams } from 'react-router-dom'; // @ts-ignore import { Button, Table } from '@carbon/react'; import { MdDelete } from 'react-icons/md'; import PaginationForTable from '../components/PaginationForTable'; import HttpService from '../services/HttpService'; import { getPageInfoFromSearchParams } from '../helpers'; export default function SecretList() { const [searchParams] = useSearchParams(); const [secrets, setSecrets] = useState([]); const [pagination, setPagination] = useState(null); useEffect(() => { const setSecretsFromResult = (result: any) => { setSecrets(result.results); setPagination(result.pagination); }; const { page, perPage } = getPageInfoFromSearchParams(searchParams); HttpService.makeCallToBackend({ path: `/secrets?per_page=${perPage}&page=${page}`, successCallback: setSecretsFromResult, }); }, [searchParams]); const reloadSecrets = (_result: any) => { window.location.reload(); }; const handleDeleteSecret = (key: any) => { HttpService.makeCallToBackend({ path: `/secrets/${key}`, successCallback: reloadSecrets, httpMethod: 'DELETE', }); }; const buildTable = () => { const rows = secrets.map((row) => { return ( <tr key={(row as any).key}> <td> <Link to={`/admin/configuration/secrets/${(row as any).key}`}> {(row as any).id} </Link> </td> <td> <Link to={`/admin/configuration/secrets/${(row as any).key}`}> {(row as any).key} </Link> </td> <td>{(row as any).username}</td> <td> <MdDelete onClick={() => handleDeleteSecret((row as any).key)} /> </td> </tr> ); }); return ( <Table striped bordered> <thead> <tr> <th>Id</th> <th>Secret Key</th> <th>Creator</th> <th>Delete</th> </tr> </thead> <tbody>{rows}</tbody> </Table> ); }; const SecretsDisplayArea = () => { const { page, perPage } = getPageInfoFromSearchParams(searchParams); let displayText = null; if (secrets?.length > 0) { displayText = ( <PaginationForTable page={page} perPage={perPage} pagination={pagination as any} tableToDisplay={buildTable()} /> ); } else { displayText = <p>No Secrets to Display</p>; } return displayText; }; if (pagination) { return ( <div> <h1>Secrets</h1> {SecretsDisplayArea()} <Button href="/admin/configuration/secrets/new">Add a secret</Button> </div> ); } return null; }