Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Connect a keyed logic to an 'unkeyed' one #163

Open
lucaleoni73 opened this issue Apr 10, 2024 · 0 comments
Open

Connect a keyed logic to an 'unkeyed' one #163

lucaleoni73 opened this issue Apr 10, 2024 · 0 comments

Comments

@lucaleoni73
Copy link

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}
            onClose={closeCreateBookingModal}
            title={<>Crea prenotazione</>}
            width={600}
            children={
                <div>
                    <UpsertBookingFormContent logicKey={key} />
                </div>
            }
            footer={
                <>
                    <LemonButton type="secondary" onClick={closeCreateBookingModal}>
                        Annulla
                    </LemonButton>
                    <LemonButton type="primary" onClick={() => 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,
...
@lucaleoni73 lucaleoni73 changed the title Connect 'unkeyed' logic to a keyed one Connect a keyed logic to an 'unkeyed' one Apr 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant