Как правильно создать layout страницы с изменяемым состоянием?

Question

[Kentavr16]

Пишу проектик на на laravel+react(inertia). Создал главную страницу. Погодя решил из нее сделать лейаут(шаблон для переиспользования)

export default function MainLayout({children}){

    const { props } = usePage();
    //стейт для поп-апа
    const [isVisiblePopup,setIsVisiblePopup] = useState(false)
    const [typePopup,setTypePopup] = useState("")
    const [textPopup,setTextPopup] = useState("");
    //функция для отображения поп-апа
    function showPopup(type,text){
        setTypePopup(type)
        setTextPopup(text)
        setIsVisiblePopup(true)
        setTimeout(()=>{
            setIsVisiblePopup(false)
        },3000)
    }
    return(

        <div className=" flex flex-col justify-between h-screen">
            <Header user={props.auth.user.name}/>
            <div className="flex h-4/6">
                {children({showPopup})}
            </div>
            <Popup text={textPopup}
                   isVisible={isVisiblePopup}
                   type={typePopup}
            />
            <Footer/>
        </div>
    )
}

Как вы можете видеть, здесь есть попап, который тригерится функцией showpopup. Ее я передаю в дочерний элемент.
Использовать его приходится как-то так

export default function BranchPage(){
    return(
        <MainLayout>
            {({showPopup})=>(
                <>
                    <button onClick={()=>showPopup("success","i did it again")}>popup</button>
                </>)}
        </MainLayout>

    )
}

Не уверен что это правильное решение. Как отрефакторить код? Возможно есть стандартное решение моего вопроса от inertia, которого я не увидел? Или штатные средства реакта?

Comments

[szQocks]

что ты пытаешься сделать Кентавр ? фигню какую-то придумал и спрашиваешь)

[Kentavr16]

szQocks, Есть компонент всплывающего сообщения. Он расположен в родителе, и запускается функцией showPopup. То есть я могу передать эту функцию в дочерние элементы и из них показывать всплывающие сообщения родителя. Пока компренде?)
Дальше. Приложение - не SPA. И я хочу вынести этого родителя с попапом в отдельный элемент, чтобы в него заворачивать другие страницы. Все просто - если бы не стейт, которым нужно управлять из дочерних компонентов.
Все работает. Но мозолит глаза способ которым передаю пропсы внутрь этого "лейаута" -

<MainLayout>
            {({showPopup})=>(
                <>
                    <button onClick={()=>showPopup("success","i did it again")}>popup</button>
                </>)}
        </MainLayout>

Ищу способ убрать эти крякозябры в jsx. Переписывать попап неохота. Да и чувствую что истина где-то рядом)

[szQocks]

Kentavr16, в общем ты из children хочешь вызывать логику в хоке, и для этого ты придумал прокидывать пропсы в children - тут я вижу несколько проблем, представь что где-то в дальнем нижнем компоненте за 3 горами, нужно будет вызвать эту логику с модалкой - будешь через каждый компоненты прокидывать пропсы ? или так же делать - children({showPopup}) - тут на самом деле я даже не знаю какой результат будет, добавятся ли пропсы или полностью изменятся, да и сам факт вызова компонента когда он уже смонтирован, в общем лучше так не делай) children({showPopup})

лучше нужно было сделать хотя бы так

React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { showPopup});
    }
    return child;
  });

пример взят со стека

либо через контекст

я вот например вообще не парюсь о модалках, кастомным хуком из компонентов любых вызываю модалку какую-нужно и всё

[szQocks]

Kentavr16, а туплю, у тебя же там функция простая children({showPopup})

[szQocks]

Kentavr16, в общем я понял, ты за место того хука который я тебе предложил, в общем решил через хок сделать, понял туплю) тогда мои вопросы не актуальны) спать мне кароч над идти, башка не варит xDD

Ищу способ убрать эти крякозябры в jsx

- я бы в хук это всё вынес

[Kentavr16]

szQocks, Нет, все актуально! спасибо за внимание - я понимаю, что сформулировано мягко говоря не совсем понятно. Скорее всего в итоге все сделаю через хук. Сейчас мне интересно прощупать те возможности/подходы реакта, которые еще не юзал. Действительно, щупаю компоненты высшего порядка(хоть в коде вопроса не совсем о хок, но близко ). Еще раз спасибо - выручаешь не первый раз!

Answer 1

[iljaGolubev]

Не работаю с react, но есть проекты на inertia+vue. Думаю, общий подход от этого не изменится.

Вы уже используете inertia state (`props.auth.user.name`) - можно использовать и для popup. Props реактивные. Добавьте нужные значения (textPopup,isVisiblePopup,typePopup) в shared-data.
Изменяете значение на странице с кнопкой - в шаблоне отобразится popup.
function showPopup можно вынести в отдельный файл и импортировать на нужных страницах. showPopup изменяет prop.popup.textPopup и прочие.

Плюс подхода - можно с сервера сразу передать нужные значения в попап из контроллера.

Comments

[Kentavr16]

Спасибо за ответ. Действительно, в данном слечае разницы реакт или вью -никакой. Смотрел в сторону shared-data,но случился конфуз с добавлением данных через Inertia::share, решил отложить внедрение этой фичи. Пока решил все стандартными средствами реакта. По факту практически продублировав то что делает shared-data) Попробую еще раз использовать. подскажите на будущее- вы используете расшаривание через мидлвер?

[iljaGolubev]

Kentavr16,

используете расшаривание через мидлвер

Ну, шаред - это только для значений которые нужны для каждого запроса инертии. Так что шарю только общее. (auth.user например).
Но можно и из контроллера добавить/изменить Inertia::share('appName', config('app.name'));, хотя лучше не делать так - запутаться можно.