first.js

import React, {Suspense, useEffect, useMemo, useRef, useState} from "react";
import ReactDOM from 'react-dom';

import Slider from "react-slick";
import CardBig from "../Catalog/CardBig";
import {default as axios} from "axios";
import {connect, useSelector} from "react-redux";
import Test from "../Test";
import Context from './../../Context'



function CitySelectorManualItemSelect(props) {

    const [selected, setSelected] = useState(props.selected)
    const [items, setItems] = useState(null)
    let renderedItems;

    props.items.then((data)=> {
        if(items === null){
            setItems(data)
        }
    })

    if(items){
        renderedItems = items.map((item) => {

            return <div key={item.id} style={{margin: "5px"}}>
                <div style={{cursor: "pointer"}}>
                    <span onClick={() => setSelected({id:item.id, name:item.name})}>{item.name}</span>
                    {selected && selected.id === item.id && <span>*</span>}
                </div>
            </div>;

        })

    }

    return (
        <div>
            <div>{renderedItems}</div>
            <div style={{display: "flex", justifyContent: "space-between"}}>
                <button onClick={() => props.onCancel()}>Отменить</button>
                <button disabled={!selected} onClick={() => props.onApply(selected)}>Применить</button>
            </div>
        </div>
    );
}


function CitySelectorManualItemSelectTitle(props) {

    return (
        <div>
            <div style={{display: "flex", padding: "10px 0 "}}>
                <div style={{flexGrow: 1}}>{props.name}</div>
                <span onClick={() => !props.disabled && props.handleOpen(props.field)} style={{cursor: "pointer", opacity: props.disabled? 0.5:1}} >
                    { props.selected !== null ? props.selected.name :'выбрать > '}
                </span>
            </div>
        </div>
    )
}



export default function Home() {

    const [mode, setMode] = useState('list')
    const [selectedValues, setSelectedValues] = useState({
        country: null,
        region: null,
        city: null,
    })


    const config = {
        country: {
            name: "Страна",
            data: () => {
                return new Promise(function (resolve, reject) {
                    resolve([{id: 3, name: 'Беларусь',},
                        {id: 2, name: 'Россия',},
                        {id: 1, name: 'Украина',},])
                });
            },
            isDisabled: () => false,
            apply(selected){
                console.log('setState')
                setSelectedValues({
                    country: selected,
                    region: null,
                    city: null,
                })
            }
        },
        region: {
            name: "Регион",
            data: () => {
                return new Promise((resolve,reject) => {
                    axios.get('https://dev.instalove.one/api/parameters/regions?country='+selectedValues['country'].id).then((response)=>{
                        resolve(response.data);
                    })
                })
            },
            isDisabled: () => {
                return selectedValues['country'] === null;
            },
            apply(selected){
                setSelectedValues({
                    ...selectedValues,
                    region: selected,
                    city: null,
                })
            }
        },

        city: {
            name: "Город",
            data: () => {
                return new Promise((resolve,reject) => {
                    axios.get('https://dev.instalove.one/api/parameters/cities  ?region='+selectedValues['region'].id).then((response)=>{
                        resolve(response.data);
                    })
                })
            },
            isDisabled: () => {
                return selectedValues['region'] === null;
            },
            apply(selected){
                setSelectedValues({
                    ...selectedValues,
                    city: selected,
                })
            }
        },


    };


    function cancel() {
        console.log('cancel')
        setMode('list')
    }

    function apply(selected) {

        config[mode].apply(selected);
        setMode('list')

    }

    function handleOpen(key){
        console.log('handleOpen')
        setMode(key);

    }

    //
    let result
    console.log('mode' + mode);

    if (mode === 'list') {
        result = [];
        for (const [key, cfg] of Object.entries(config)) {
            const selectedVal = selectedValues[key];

            result.push(<CitySelectorManualItemSelectTitle disabled={cfg.isDisabled()} key={key} field={key} name={cfg.name} selected={selectedVal}  handleOpen={handleOpen}/>);
        }
    } else {
        result = <CitySelectorManualItemSelect onCancel={cancel} onApply={apply} items={config[mode].data()} selected={selectedValues[mode]} />
    }


    return (
        <div>
            {result}
        </div>
    );
}