10000 Connect a keyed logic to an 'unkeyed' one · Issue #163 · keajs/kea · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
Connect a keyed logic to an 'unkeyed' one #163
Open
@lucaleoni73

Description

@lucaleoni73

I have a logic that has no key nor props. Within this one I want to connect a logic that handles a form and it has props and keys.
In React I generated a key string and used that as initial props in useActions or useValues. But when I try to run the code I got an error because in the logic.ts file in the connect I declare the keyed logic without specifying the key.
I don't have the key because the logic does not have any props or anything. How can I do? But first of all, is this even possible to achieve?

Here a piece of my code (this component is within a view and on an event occurring this modal opens):

export function CreateBookingModal() {
    const key = useRef(uuid()).current
    debugLog('CreateBookingModal', key)
    const { createBookingModalVisible } = useValues(calendarLogic)
    const { closeCreateBookingModal } = useActions(calendarLogic)
    const { submitAddBookingForm } = useActions(addBookingFormLogic({ logicKey: key }))

    return (
        <LemonModal
            {...props}
            isOpen={createBookingModalVisible}
            
            title={<>Crea prenotazione</>}
            width={600}
            children={
                <div>
                    <UpsertBookingFormContent logicKey={key} />
                </div>
            }
            footer={
                <>
                    <LemonButton type="secondary" 
                        Annulla
                    </LemonButton>
                    <LemonButton type="primary"  => submitAddBookingForm()}>
                        Crea
                    </LemonButton>
                </>
            }
        />
    )
}

Here the unkeyed logic:

export const calendarLogic = kea<calendarLogicType>([
    path(['views', 'calendarLogic']),
    connect({
        actions: [
            experiencesLogic,
            ['loadExperiencesWithVariants'],
            addBookingFormLogic,
            ['setAddBookingFormValue', 'resetAddBookingForm'],
        ],
        values: [experiencesLogic, ['experiencesWithVariants']],
    }),
...

Here the keyed logic:

export const addBookingFormLogic = kea<addBookingFormLogicType>([
    props({} as AddBookingFormLogicProps),
    key((props) => props.logicKey),
    connect({
        values: [experiencesLogic, ['globalExperiences as availableExperiences']],
    }),
    // FORM LOGIC
    forms(({ values }) => ({
        addBookingForm: {
            defaults: {
                customerName: null,
                customerEmail: null,
                customerPhone: null,
                experience: values.availableExperiences[0]?.slug ?? null,
...

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      0