admin(ui): fix up SearchableSelect.tsx

resources/scripts/components/admin/nodes/DatabaseSelect.tsx

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
-import SearchableSelect from '@/components/elements/SearchableSelect';
+import SearchableSelect, { Option } from '@/components/elements/SearchableSelect';
 import searchDatabases from '@/api/admin/databases/searchDatabases';
 import { Database } from '@/api/admin/databases/getDatabases';
-import tw from 'twin.macro';
 
-export default () => {
-    const [ database, setDatabase ] = useState<Database | null>(null);
+export default ({ selected }: { selected?: Database | null }) => {
+    const [ database, setDatabase ] = useState<Database | null>(selected || null);
     const [ databases, setDatabases ] = useState<Database[]>([]);
 
     const onSearch = (query: string): Promise<void> => {
@@ -21,47 +20,26 @@ export default () => {
         setDatabase(database);
     };
 
+    const getSelectedText = (database: Database | null): string => {
+        return database?.name || '';
+    };
+
     return (
         <SearchableSelect
             id="database"
             name="Database"
             items={databases}
+            selected={database}
             setItems={setDatabases}
             onSearch={onSearch}
             onSelect={onSelect}
+            getSelectedText={getSelectedText}
             nullable
         >
             {databases.map(d => (
-                d.id === database?.id ?
-                    <li key={d.id} id={'listbox-item-' + d.id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={(e) => {
-                        e.stopPropagation();
-                        // selectItem(d);
-                    }}
-                    >
-                        <div css={tw`flex items-center`}>
-                            <span css={tw`block font-medium truncate`}>
-                                {d.name}
-                            </span>
-                        </div>
-
-                        <span css={tw`absolute inset-y-0 right-0 flex items-center pr-4`}>
-                            <svg css={tw`h-5 w-5 text-primary-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                                <path clipRule="evenodd" fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
-                            </svg>
-                        </span>
-                    </li>
-                    :
-                    <li key={d.id} id={'listbox-item-' + d.id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={(e) => {
-                        e.stopPropagation();
-                        // selectItem(d);
-                    }}
-                    >
-                        <div css={tw`flex items-center`}>
-                            <span css={tw`block font-normal truncate`}>
-                                {d.name}
-                            </span>
-                        </div>
-                    </li>
+                <Option key={d.id} id={d.id} item={d} active={d.id === database?.id}>
+                    {d.name}
+                </Option>
             ))}
         </SearchableSelect>
     );

resources/scripts/components/admin/nodes/LocationSelect.tsx

@@ -13,10 +13,10 @@ const Dropdown = styled.div<{ expanded: boolean }>`
     ${props => !props.expanded && tw`hidden`};
 `;
 
-export default ({ defaultLocation }: { defaultLocation: Location }) => {
+export default ({ defaultLocation }: { defaultLocation: Location | null }) => {
     const [ loading, setLoading ] = useState(false);
     const [ expanded, setExpanded ] = useState(false);
-    const [ location, setLocation ] = useState<Location>(defaultLocation);
+    const [ location, setLocation ] = useState<Location | null>(defaultLocation);
     const [ locations, setLocations ] = useState<Location[]>([]);
 
     const [ inputText, setInputText ] = useState('');
@@ -48,7 +48,7 @@ export default ({ defaultLocation }: { defaultLocation: Location }) => {
     };
 
     useEffect(() => {
-        setInputText(location.short);
+        setInputText(location?.short || '');
         setExpanded(false);
     }, [ location ]);
 
@@ -58,7 +58,7 @@ export default ({ defaultLocation }: { defaultLocation: Location }) => {
                 return;
             }
 
-            setInputText(location.short);
+            setInputText(location?.short || '');
             setExpanded(false);
         };
 
@@ -100,7 +100,7 @@ export default ({ defaultLocation }: { defaultLocation: Location }) => {
                         :
                         <ul tabIndex={-1} role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-item-3" css={tw`max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm`}>
                             {locations.map(l => (
-                                l.id === location.id ?
+                                l.id === location?.id ?
                                     <li key={l.id} id={'listbox-item-' + l.id} role="option" css={tw`text-neutral-200 cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-neutral-700`} onClick={(e) => {
                                         e.stopPropagation();
                                         selectLocation(l);

resources/scripts/components/admin/nodes/NodeEditContainer.tsx

@@ -48,7 +48,7 @@ const NodeEditContainer = () => {
     useEffect(() => {
         clearFlashes('node');
 
-        getNode(Number(match.params?.id))
+        getNode(Number(match.params?.id), [ 'database_host', 'location' ])
             .then(node => setNode(node))
             .catch(error => {
                 console.error(error);

resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx

@@ -1,3 +1,4 @@
+import DatabaseSelect from '@/components/admin/nodes/DatabaseSelect';
 import React from 'react';
 import AdminBox from '@/components/admin/AdminBox';
 import tw from 'twin.macro';
@@ -17,6 +18,7 @@ interface Values {
     name: string;
     description: string;
     locationId: number;
+    databaseHostId: number | null;
     fqdn: string;
     listenPortHTTP: number;
     publicPortHTTP: number;
@@ -57,6 +59,7 @@ export default () => {
                 name: node.name,
                 description: node.description || '',
                 locationId: node.locationId,
+                databaseHostId: node.databaseHostId,
                 fqdn: node.fqdn,
                 listenPortHTTP: node.listenPortHTTP,
                 publicPortHTTP: node.publicPortHTTP,
@@ -95,7 +98,11 @@ export default () => {
                                 </div>
 
                                 <div css={tw`mb-6`}>
-                                    <LocationSelect defaultLocation={{ id: 1, short: 'local', long: '', createdAt: new Date(), updatedAt: new Date() }}/>
+                                    <LocationSelect defaultLocation={node?.relations.location || null}/>
+                                </div>
+
+                                <div css={tw`mb-6`}>
+                                    <DatabaseSelect selected={node?.relations.databaseHost}/>
                                 </div>
 
                                 <div css={tw`mb-6`}>