Skip to content

Instantly share code, notes, and snippets.

@tmbtech

tmbtech/Fake.jsx

Forked from ryanflorence/Fake.jsx
Created March 11, 2019 02:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tmbtech/e794bc8434a1a80b1eea04520af5638b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tmbtech/e794bc8434a1a80b1eea04520af5638b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @ryanflorence ryanflorence renamed this gist Oct 19, 2017. 1 changed file with 0 additions and 0 deletions.
    0 Fake.js → Fake.jsx
    View file
    File renamed without changes.
  2. @ryanflorence ryanflorence created this gist Oct 19, 2017.
    199 changes: 199 additions & 0 deletions Fake.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,199 @@
    /* eslint no-undef: 0*/
    /* eslint react/jsx-no-undef: 0*/
    import React from "react"

    const chart = {
    id: "purchase",
    initial: "fetchingWorkshopData",
    states: {
    fetchingWorkshopData: {
    on: {
    SUCCESS: "tickets",
    ERROR: "fetchingWorkshopDataError"
    }
    },
    fetchingWorkshopDataError: {
    on: {
    TRY_AGAIN: "fetchingWorkshopData"
    }
    },
    tickets: {
    on: {
    SUBMIT: "paymentDetails"
    }
    },
    paymentDetails: {
    initial: "getStripeToken",
    on: {
    REGISTER_STUDENTS: "register",
    CANCEL: "quantity"
    },
    states: {
    getStripeToken: {
    on: {
    SUCCESS: "processingPurchase",
    ERROR: "stripeTokenError"
    }
    },
    stripeTokenError: {
    on: {
    TRY_AGAIN: "getStripeToken"
    }
    },
    processingPurchase: {
    on: {
    SUCCESS: "purchaseComplete",
    ERROR: "processPurchaseError"
    }
    },
    processPurchaseError: {
    on: {
    TRY_AGAIN: "getStripeToken"
    }
    },
    purchaseComplete: {}
    }
    },
    register: {
    initial: "registrationForm",
    on: {
    START_OVER: "tickets"
    },
    states: {
    registrationForm: {
    on: {
    SUBMIT: "reviewRegistration"
    }
    },
    reviewRegistration: {
    on: {
    APPROVE: "processingRegistration",
    CHANGE: "registrationForm"
    }
    },
    processingRegistration: {
    on: {
    SUCCESS: "registrationComplete",
    ERROR: "registrationError"
    }
    },
    registrationComplete: {},
    registrationError: {
    on: {
    TRY_AGAIN: "reviewRegistration"
    }
    }
    }
    }
    }
    }

    const defaultState = {
    quantity: null,
    stripeToken: null,
    stripeError: null,
    paymentError: null,
    workshopData: null,
    workshopDataError: null,
    studentData: null,
    registrationError: null
    }

    const reducer = (state = defaultState, action) => {
    const { type, name, data } = action
    console.log(name, type, data)

    if (name === "fetchingWorkshopData.SUCCESS") {
    return { ...state, workshopData: data }
    }

    if (name === "fetchingWorkshopData.ERROR") {
    return { ...state, workshopDataError: data }
    }

    if (name === "tickets.SUBMIT") {
    return { ...state, quantity: data }
    }

    if (name === "paymentDetails.getStripeToken.ERROR") {
    return { ...state, stripeError: data }
    }

    if (name === "paymentDetails.getStripeToken.SUCCESS") {
    return { ...state, stripeToken: data }
    }

    if (name === "paymentDetails.processingPurchase.ERROR") {
    return { ...state, paymentError: data }
    }

    if (name === "register.registrationForm.SUBMIT") {
    return { ...state, studentData: data }
    }

    if (name === "register.processingRegistration.ERROR") {
    return { ...state, registrationError: data }
    }
    }

    const PurchaseMachine = () => (
    <FiniteMachine
    chart={chart}
    reducer={reducer}
    render={({ state, transition }) => (
    <div>
    <Progress />
    <SwitchMatch>
    <Match
    state="fetchingWorkshopData"
    component={FetchingWorkshopData}
    />
    <Match
    state="fetchingWorkshopDataError"
    component={FetchingWorkshopDataError}
    />
    <Match state="tickets" component={Tickets} />
    <Match
    state="paymentDetails.getStripeToken"
    component={GetStripeToken}
    />
    <Match
    state="paymentDetails.stripeTokenError"
    component={StripeTokenError}
    />
    <Match
    state="paymentDetails.processingPurchase"
    component={ProcessingPurchase}
    />
    <Match
    state="paymentDetails.processPurchaseError"
    component={PurchaseError}
    />
    <Match
    state="paymentDetails.purchaseComplete"
    component={PurchaseComplete}
    />
    <Match state="register.registrationForm" component={Register} />
    <Match
    state="register.reviewRegistration"
    component={ReviewRegistration}
    />
    <Match
    state="register.processingRegistration"
    component={ProcessRegistration}
    />
    <Match
    state="register.registrationError"
    component={RegistrationError}
    />
    <Match
    state="register.registrationComplete"
    component={RegistrationComplete}
    />
    </SwitchMatch>
    </div>
    )}
    />
    )

    export default PurchaseMachine