Notes

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import CircularProgress from '@mui/material/CircularProgress';

interface PeopleList {
id: string;
name: string;
firstName: string;
lastName: string;
title: string;
}

interface Props {
placeholder?: string;
onSearch?: (query: string) => void;
//onChange?: (newValue: string, event?: SearchTextFieldChangeEvent) => void;
value?: string;
debounceTime?: number;
options?: [];
}

function sleep(delay = 0) {
return new Promise((resolve) => {
setTimeout(resolve, delay);
});
}

const PeopleAutocomplete = ({
placeholder,
onSearch,
//onChange: propOnChange,
value: propValue = '',
debounceTime = 200
}: Props) => {
const [open, setOpen] = React.useState(false);
const [options, setOptions] = React.useState([]);
const loading = open && options.length === 0;

React.useEffect(() => {
let active = true;

if (!loading) {
return undefined;
}

(async () => {
await sleep(1e3); // For demo purposes.

if (active) {
setOptions([...TopFilms]);
}
})();

return () => {
active = false;
};
}, [loading]);

React.useEffect(() => {
if (!open) {
setOptions([]);
}
}, [open]);

console.log(options, 'options');

return (
<Autocomplete
id="asynchronous-demo"
sx={{ width: 300 }}
open={open}
onOpen={() => {
setOpen(true);
}}
onClose={() => {
setOpen(false);
}}
getOptionLabel={(option) =>
typeof option === 'string' ? option : option.title
}
filterOptions={(x) => x}
//isOptionEqualToValue={(option, value) => option.person.name === value.name}
// getOptionLabel={(option) => option.name}
options={options}
loading={loading}
renderInput={(params) => (
<TextField
{...params}
label="Asynchronous"
InputProps={{
...params.InputProps,
endAdornment: (
<React.Fragment>
{loading ? (
<CircularProgress color="inherit" size={20} />
) : null}
{params.InputProps.endAdornment}
</React.Fragment>
)
}}
/>
)}
/>
);
};

export default PeopleAutocomplete;

const TopFilms = [
{
person: {
id: 'a0m0rq2',
name: 'Abhisek Mishra',
firstName: 'Abhisek',
lastName: 'Mishra',
title: 'Staff Software Engineer',
isManager: false,
isConfirmed: true
},
status: {
id: 'active',
name: 'Active',
description: 'Active'
},
type: {
id: 'fullTimeAssociate',
name: 'Full Time Associate'
},
role: {
id: 3,
name: 'Engineering',
updatedAt: '2021-09-16T00:00:00-07:00'
},
allocation: 100
},
{
person: {
id: 'a0g0kiz',
name: 'Abhishek Kumar Gupta @MINT',
firstName: 'Abhishek',
lastName: 'Gupta',
title: 'Principal Software Engineer',
isManager: false,
isConfirmed: true
},
status: {
id: 'active',
name: 'Active',
description: 'Active'
},
type: {
id: 'fullTimeAssociate',
name: 'Full Time Associate'
},
role: {
id: 21,
name: 'Enterprise Architect',
updatedAt: '2022-01-12T00:00:00-08:00'
},
allocation: 100
},
{
person: {
id: 'a0k00ln',
name: 'Adithya Khamithkar',
firstName: 'Adithya',
lastName: 'Khamithkar',
title: 'Staff Systems Engineer',
isManager: false,
isConfirmed: true
},
status: {
id: 'active',
name: 'Active',
description: 'Active'
},
type: {
id: 'fullTimeAssociate',
name: 'Full Time Associate'
},
role: {
id: 3,
name: 'Engineering',
updatedAt: '2020-08-05T02:44:12-07:00',
subRole: {
id: 7,
name: 'Systems Engineer'
}
},
allocation: 81
},
{
person: {
id: 'a0l0hts',
name: 'Aditya Lahiri',
firstName: 'Aditya',
lastName: 'Lahiri',
title: 'Software Engineer III',
isManager: false,
isConfirmed: true
},
status: {
id: 'active',
name: 'Active',
description: 'Active'
},
type: {
id: 'fullTimeAssociate',
name: 'Full Time Associate'
},
role: {
id: 3,
name: 'Engineering',
updatedAt: '2022-08-23T00:00:00-07:00'
},
allocation: 100
},
{
person: {
id: 'a0m11n7',
name: 'Ahal Martin v',
firstName: 'Ahal',
lastName: 'Martin',
title: 'Data Analyst II',
isManager: false,
isConfirmed: true
},
status: {
id: 'active',
name: 'Active',
description: 'Active'
},
type: {
id: 'fullTimeAssociate',
name: 'Full Time Associate'
},
role: {
id: 19,
name: 'Data Scientist',
updatedAt: '2022-07-13T00:00:00-07:00'
},
allocation: 100
},
{
person: {
id: 'a0g0nf7',
name: 'Akshay Goel',
firstName: 'Akshay',
lastName: 'Goel',
title: 'Associate Product Manager',
isManager: false,
isConfirmed: true
},
status: {
id: 'active',
name: 'Active',
description: 'Active'
},
type: {
id: 'fullTimeAssociate',
name: 'Full Time Associate'
},
role: {
id: 12,
name: 'Product Manager',
updatedAt: '2022-08-24T00:00:00-07:00'
},
allocation: 100
},
{
person: {
id: 'a0h0j5r',
name: 'Al Amin Hosain',
firstName: 'Al amin',
lastName: 'Hosain',
title: 'Sr Data Scientist',
isManager: false,
isConfirmed: true
},
status: {
id: 'active',
name: 'Active',
description: 'Active'
},
type: {
id: 'fullTimeAssociate',
name: 'Full Time Associate'
},
role: {
id: 19,
name: 'Data Scientist',
updatedAt: '2021-11-10T00:00:00-08:00'
},
allocation: 100
},
{
person: {
id: 'a0r0ish',
name: 'Alisha Ranka',
firstName: 'Alisha',
lastName: 'Ranka',
title: 'Software Engineer III',
isManager: false,
isConfirmed: true
},
status: {
id: 'active',
name: 'Active',
description: 'Active'
},
type: {
id: 'fullTimeAssociate',
name: 'Full Time Associate'
},
role: {
id: 3,
name: 'Engineering',
updatedAt: '2021-10-06T00:00:00-07:00',
subRole: {
id: 7,
name: 'Systems Engineer'
}
},
allocation: 100
},
{
person: {
id: 'a0p02cd',
name: 'Anil Patel',
firstName: 'Anil',
lastName: 'Patel',
title: 'Senior Software Engineer',
isManager: false,
isConfirmed: true
},
status: {
id: 'active',
name: 'Active',
description: 'Active'
},
type: {
id: 'fullTimeAssociate',
name: 'Full Time Associate'
},
role: {
id: 3,
name: 'Engineering',
updatedAt: '2020-02-03T08:10:49-08:00'
},
allocation: 100
},
{
person: {
id: 'a0v06u1',
name: 'Anshika Varshney',
firstName: 'Anshika',
lastName: 'Varshney',
title: 'Software Engineer III',
isManager: false,
isConfirmed: true
},
status: {
id: 'active',
name: 'Active',
description: 'Active'
},
type: {
id: 'fullTimeAssociate',
name: 'Full Time Associate'
},
role: {
id: 3,
name: 'Engineering',
updatedAt: '2021-10-31T00:00:00-07:00',
subRole: {
id: 7,
name: 'Systems Engineer'
}
},
allocation: 100
},
{
person: {
id: 'a0a0jm5',
name: 'Anu Agarwal',
firstName: 'Anu',
lastName: 'Agarwal',
title: 'Senior Data Anlayst',
isManager: false,
isConfirmed: true
},
status: {
id: 'active',
name: 'Active',
description: 'Active'
},
type: {
id: 'fullTimeAssociate',
name: 'Full Time Associate'
},
role: {
id: 14,
name: 'Analyst',
updatedAt: '2022-02-14T00:00:00-08:00',
subRole: {
id: 12,
name: 'Business Operations Analyst'
}
},
allocation: 100
}
];