misc_pterodactyl-panel/resources/scripts/components/admin/nodes/DatabaseSelect.tsx
2021-02-17 15:17:37 -07:00

51 lines
1.7 KiB
TypeScript

import React, { useState } from 'react';
import { useFormikContext } from 'formik';
import { Database } from '@/api/admin/databases/getDatabases';
import searchDatabases from '@/api/admin/databases/searchDatabases';
import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
export default ({ selected }: { selected: Database | null }) => {
const context = useFormikContext();
const [ database, setDatabase ] = useState<Database | null>(selected);
const [ databases, setDatabases ] = useState<Database[] | null>(null);
const onSearch = (query: string): Promise<void> => {
return new Promise((resolve, reject) => {
searchDatabases({ name: query }).then((databases) => {
setDatabases(databases);
return resolve();
}).catch(reject);
});
};
const onSelect = (database: Database | null) => {
setDatabase(database);
context.setFieldValue('databaseHostId', database?.id || null);
};
const getSelectedText = (database: Database | null): string => {
return database?.name || '';
};
return (
<SearchableSelect
id="database"
name="Database"
items={databases}
selected={database}
setSelected={setDatabase}
setItems={setDatabases}
onSearch={onSearch}
onSelect={onSelect}
getSelectedText={getSelectedText}
nullable
>
{databases?.map(d => (
<Option key={d.id} selectId="database" id={d.id} item={d} active={d.id === database?.id}>
{d.name}
</Option>
))}
</SearchableSelect>
);
};