From 4e2d81dcbbd1cf866a314ee7c092f99ffa46b182 Mon Sep 17 00:00:00 2001
From: Wroud <wrouds@gmail.com>
Date: Sat, 29 Aug 2020 19:26:02 +0300
Subject: [PATCH] chore: misc improvements

---
 .../src/Administration/Administration.tsx     |  7 +-
 .../AdministrationItemService.ts              |  5 +-
 .../core-blocks/src/FormControls/Checkbox.tsx | 67 ++++++++++++++-----
 .../src/FormControls/InputField.tsx           | 66 +++++++++++++++---
 .../core-routing/src/RouterService.ts         |  4 +-
 5 files changed, 116 insertions(+), 33 deletions(-)

diff --git a/webapp/packages/core-administration/src/Administration/Administration.tsx b/webapp/packages/core-administration/src/Administration/Administration.tsx
index d406875618..6b5013bd1a 100644
--- a/webapp/packages/core-administration/src/Administration/Administration.tsx
+++ b/webapp/packages/core-administration/src/Administration/Administration.tsx
@@ -65,16 +65,16 @@ const administrationStyles = composes(
   `
 );
 
-type Props = {
+type Props = React.PropsWithChildren<{
   configurationWizard: boolean;
   activeItem: string | null;
   activeItemSub: string | null;
   activeItemSubParam: string | null;
   onItemSelect(name: string): void;
-}
+}>
 
 export const Administration = observer(function Administration({
-  configurationWizard, activeItem, activeItemSub, activeItemSubParam, onItemSelect,
+  configurationWizard, activeItem, activeItemSub, activeItemSubParam, onItemSelect, children,
 }: Props) {
   const controller = useController(AdministrationController);
   const items = controller.getItems(configurationWizard);
@@ -96,6 +96,7 @@ export const Administration = observer(function Administration({
           </TabList>
         </drawer>
         <content as='div'>
+          {children}
           <ItemContent
             activeItemName={activeItem}
             activeItemSub={activeItemSub}
diff --git a/webapp/packages/core-administration/src/AdministrationItem/AdministrationItemService.ts b/webapp/packages/core-administration/src/AdministrationItem/AdministrationItemService.ts
index faa66ccb3f..58910618c9 100644
--- a/webapp/packages/core-administration/src/AdministrationItem/AdministrationItemService.ts
+++ b/webapp/packages/core-administration/src/AdministrationItem/AdministrationItemService.ts
@@ -23,11 +23,10 @@ export class AdministrationItemService {
   getDefaultItem(configurationWizard: boolean) {
     const items = this.items.filter(filterConfigurationWizard(configurationWizard));
 
-    console.log(configurationWizard, items);
-
     if (items.length === 0) {
       return null;
     }
+
     return items.sort(orderAdministrationItems)[0].name;
   }
 
@@ -53,7 +52,7 @@ export class AdministrationItemService {
   }
 
   create(options: IAdministrationItemOptions) {
-    const type = options.type === undefined ? AdministrationItemType.Administration : options.type;
+    const type = options.type ?? AdministrationItemType.Administration;
 
     if (this.items.some(item => item.name === options.name && (
       item.type === type
diff --git a/webapp/packages/core-blocks/src/FormControls/Checkbox.tsx b/webapp/packages/core-blocks/src/FormControls/Checkbox.tsx
index ac4536d3e0..1f20fbda93 100644
--- a/webapp/packages/core-blocks/src/FormControls/Checkbox.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Checkbox.tsx
@@ -6,6 +6,8 @@
  * you may not use this file except in compliance with the License.
  */
 
+import { observer } from 'mobx-react';
+import { useCallback } from 'react';
 import styled, { css, use } from 'reshadow';
 
 import { useStyles } from '@cloudbeaver/core-theming';
@@ -28,38 +30,73 @@ const styles = css`
   }
 `;
 
-type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'value'> & {
+type BaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'value' | 'checked'> & {
   value?: string;
   checkboxLabel: string;
   mod?: 'surface';
-  onChange?(value: boolean): any;
 }
 
-export function Checkbox({
-  name,
-  value,
-  checkboxLabel,
-  children,
-  className,
-  mod,
-  onChange = () => {},
-  ...rest
-}: Props) {
+type ControlledProps = BaseProps & {
+  checked?: boolean;
+  onChange?(value: boolean, name?: string): any;
+
+  state?: never;
+}
+
+type ObjectProps<TKey extends keyof TState, TState> = BaseProps & {
+  name: TKey;
+  state: TState;
+  onChange?(value: boolean, name: TKey): any;
+
+  checked?: never;
+}
+
+type CheckboxType = {
+  (props: ControlledProps): JSX.Element;
+  <TKey extends keyof TState, TState>(props: ObjectProps<TKey, TState>): JSX.Element;
+}
+
+export const Checkbox: CheckboxType = observer(function Checkbox(
+  props: ControlledProps | ObjectProps<any, any>
+) {
+  const {
+    name,
+    value,
+    state,
+    checkboxLabel,
+    children,
+    className,
+    mod,
+    onChange,
+    ...rest
+  } = props;
+
+  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    if (state) {
+      state[name] = event.target.checked;
+    }
+    if (onChange) {
+      onChange(event.target.checked, name);
+    }
+  }, [state, name, onChange]);
+
+  const checked = state ? state[name] : props.checked;
 
   return styled(useStyles(baseFormControlStyles, styles))(
     <field as="div" className={className}>
       <field-label as="div">{children}</field-label>
       <checkbox as='div'>
         <input
+          {...rest}
           name={name}
           id={value || name}
           type='checkbox'
-          onChange={e => onChange(e.target.checked)}
-          {...rest}
+          onChange={handleChange}
+          checked={checked}
           {...use({ mod })}
         />
         <label htmlFor={value || name}>{checkboxLabel}</label>
       </checkbox>
     </field>
   );
-}
+});
diff --git a/webapp/packages/core-blocks/src/FormControls/InputField.tsx b/webapp/packages/core-blocks/src/FormControls/InputField.tsx
index 615988e298..36ad51b805 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputField.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/InputField.tsx
@@ -6,29 +6,73 @@
  * you may not use this file except in compliance with the License.
  */
 
+import { observer } from 'mobx-react';
+import { useCallback } from 'react';
 import styled, { use } from 'reshadow';
 
 import { useStyles } from '@cloudbeaver/core-theming';
 
 import { baseFormControlStyles } from './baseFormControlStyles';
 
-type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+type BaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name' | 'value'> & {
   mod?: 'surface';
-  onChange?(value: string): any;
 }
 
-export function InputField({
-  children,
-  className,
-  mod,
-  onChange = () => {},
-  ...rest
-}: Props) {
+type ControlledProps = BaseProps & {
+  name?: string;
+  value?: string;
+  onChange?(value: string, name?: string): any;
+
+  state?: never;
+}
+
+type ObjectProps<TKey extends keyof TState, TState> = BaseProps & {
+  name: TKey;
+  state: TState;
+  onChange?(value: string, name: TKey): any;
+
+  value?: never;
+}
+
+type InputFieldType = {
+  (props: ControlledProps): JSX.Element;
+  <TKey extends keyof TState, TState>(props: ObjectProps<TKey, TState>): JSX.Element;
+}
+
+export const InputField: InputFieldType = observer(function InputField(
+  props: ControlledProps | ObjectProps<any, any>
+) {
+  const {
+    name,
+    state,
+    children,
+    className,
+    mod,
+    onChange,
+    ...rest
+  } = props;
+
+  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    if (state) {
+      state[name] = event.target.value;
+    }
+    if (onChange) {
+      onChange(event.target.value, name);
+    }
+  }, [state, name, onChange]);
+
+  const value = state ? state[name] : props.value;
 
   return styled(useStyles(baseFormControlStyles))(
     <field as="div" className={className}>
       <field-label as='label'>{children}</field-label>
-      <input onChange={e => onChange(e.target.value)} {...rest} {...use({ mod })} />
+      <input
+        {...rest}
+        onChange={handleChange}
+        name={name}
+        value={value}
+        {...use({ mod })}
+      />
     </field>
   );
-}
+});
diff --git a/webapp/packages/core-routing/src/RouterService.ts b/webapp/packages/core-routing/src/RouterService.ts
index f867f419ee..277c2a154d 100644
--- a/webapp/packages/core-routing/src/RouterService.ts
+++ b/webapp/packages/core-routing/src/RouterService.ts
@@ -8,12 +8,14 @@
 
 import { observable } from 'mobx';
 import createRouter, {
-  Router, SubscribeFn, SubscribeState
+  State, Router, SubscribeFn, SubscribeState
 } from 'router5';
 import browserPlugin from 'router5-plugin-browser';
 
 import { injectable } from '@cloudbeaver/core-di';
 
+export type RouterState = State;
+
 @injectable()
 export class RouterService {