7 Самсонов Иван

userProfile/src/index.tsx

@@ -1,5 +1,146 @@
 import './style.css';
+import React, { FC, useState } from 'react';
+import ReactDom from 'react-dom';
+import { Button, Input, Select, Gapped, Modal } from '@skbkontur/react-ui';
 
+const items = [
+    'Москва',
+    'Екатеринбург',
+    'Санкт-Петербург',
+    'Новосибирск',
+    'Казань',
+    'Нижний Новгород',
+    'Челябинск',
+    'Самара',
+    'Омск',
+    'Ростов-на-Дону',
+    'Уфа'
+];
+
+type FormData = {
+    name: string;
+    surname: string;
+    city: string;
+};
+
+type DataState = {
+    saved: FormData;
+    current: FormData;
+};
+
+const defaultForm = {
+    name: '',
+    surname: '',
+    city: undefined
+};
+
+const Form: React.FC = () => {
+    const [data, setData] = useState({
+        saved: { ...defaultForm },
+        current: { ...defaultForm }
+    });
+    const [saved, setSaved] = useState(false);
+    const [opened, setOpened] = useState(false);
+    const [panel, setPanel] = useState(false);
+    function changeValue(value: string, field: string) {
+        setData({ ...data, current: { ...data.current, [field]: value } });
+    }
+
+    function renderModal() {
+        const listItems = [];
+        if (data.current.name !== data.saved.name)
+            listItems.push(
+                <p>
+                    Имя: было {data.saved.name} стало {data.current.name}
+                </p>
+            );
+        if (data.current.surname !== data.saved.surname)
+            listItems.push(
+                <p>
+                    Фамилия: была {data.saved.surname} стала {data.current.surname}
+                </p>
+            );
+        if (data.saved.city !== data.current.city)
+            listItems.push(
+                <p>
+                    Город: был {data.saved.city} стал {data.current.city}
+                </p>
+            );
+        return (
+            <Modal onClose={close}>
+                <Modal.Header>Пользователь сохранен</Modal.Header>
+                <Modal.Body>{listItems.length !== 0 && saved && <div>Измененные данные: {listItems}</div>}</Modal.Body>
+                <Modal.Footer panel={panel}>
+                    <Button
+                        onClick={() => {
+                            close();
+                        }}
+                    >
+                        Закрыть
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+        );
+    }
+
+    function open() {
+        setOpened(true);
+    }
+
+    function close() {
+        setOpened(false);
+        setData({ ...data, saved: data.current });
+        setSaved(true);
+    }
+
+    return (
+        <>
+            <form>
+                <h1>Информация о пользователе</h1>
+                <Gapped gap={14} vertical>
+                    <label>
+                        <div className="name">Имя</div>
+                        <Input
+                            placeholder="Введите имя пользователя"
+                            value={data.current.name}
+                            onValueChange={name => changeValue(name, 'name')}
+                        />
+                    </label>
+                    <label>
+                        <div className="surname">Фамилия</div>
+                        <Input
+                            placeholder="Введите фамилию пользователя"
+                            value={data.current.surname}
+                            onValueChange={surname => changeValue(surname, 'surname')}
+                        />
+                    </label>
+                    <label>
+                        <div className="city">Город</div>
+                        <Select
+                            placeholder="Выберите город"
+                            items={items}
+                            value={data.current.city}
+                            onValueChange={city => changeValue(city, 'city')}
+                            search
+                        />
+                    </label>
+                    <Button
+                        use="primary"
+                        size="large"
+                        onClick={() => {
+                            open();
+                        }}
+                    >
+                        Сохранить
+                    </Button>
+                </Gapped>
+            </form>
+            {opened && renderModal()}
+        </>
+    );
+};
+
+ReactDom.render(<Form />, document.getElementById('userForm'));
 /**
  *  Итак, перед тобой пустой проект. Давай его чем-то заполним. Не стесняйся подсматривать в уже сделанные задачи,
  *  чтобы оттуда что-то скопировать.
@@ -55,5 +196,3 @@ import './style.css';
  *      гражданство, национальность, номер телефона и адрес электронной почты.
  *      Придумай, как избежать излишнего дублирования.
  */
-
-console.log('Hi from script!');

userProfile/src/style.css

@@ -1,3 +1,8 @@
 body {
     font-family: "Segoe UI", Helvetica, sans-serif;
 }
+
+.name, .surname, .city {
+    display: inline-block;
+    width: 120px;
+}