import Head from "next/head"; import HeaderTitle from "../components/header-title" import { Grid, GridColumn as Column, GridDetailRowProps, GridExpandChangeEvent, } from "@progress/kendo-react-grid"; import { Physician } from "../models/Physician"; import { useMemo, useState } from "react"; import axios from "axios"; const PhysicianDetailComponent = (props: GridDetailRowProps) => { const data = props.dataItem.details; if (data) { return ( ); } return (
); }; export default function Physicians(props: any) { const [physicians, setPhysicians] = useState(); console.log("props.physicians") console.log(props.physicians) useMemo(() => { setPhysicians(props.physicians) }, []) const expandChange = (event: GridExpandChangeEvent) => { event.dataItem.expanded = event.value; let physicianId = event.dataItem.physicianId; if (!event.value || event.dataItem.details) { return; } fetch(process.env.API_BASE_URL + `physicians/getPhysicianCases?$physicianId=${physicianId}`) .then((response) => response.json()) .then((json) => { let data: any = physicians?.slice(); let index = data.findIndex((d: any) => d.physicianId === physicianId); data[index].details = json.value; setPhysicians(data); }); }; return ( <> Physicians

Physicians ({physicians?.length})

); } export async function getServerSideProps() { let physicians: Physician[] = []; await axios.get(`${process.env.API_BASE_URL}physicians/get`) .then(function (response) { physicians = response.data as Physician[]; console.error(physicians); }) .catch(function (error) { console.error(error); }) return { props: { physicians: physicians } } };