Component Functions

These are the functions of two-way-rest components. They are accessible through the replace component property and the args.get('twr') property available in the actioncycle.

instance
Returns: the immutable instance if it exists

example_1:

<TWRShow tree='users/1' replace={
    user_1=>console.log(user_1.instance())
} />
==> Map {name: 'Jim', tree: List ['users', 1]}

example_2:

<TWRUpdate instance={user_1} replace={
  update_user_1=>console.log(update_user_1.instance())
} />
==> false

note: Mutation components (update, create, destroy) have Substate instances that only become available on errors or successful transactions

custom
Purpose: a custom reducer function that takes the reducer state as an argument and returns a new reducer state

example_1:

<TWRShow tree='users/1' replace={(user_1)=>{
    return <TWRCreate onClick={()=>{
        user_1.custom(state=>state.set('name', 'Example'))
    }} /> 
}} />==>

customAction
Purpose: the action creator for the custom reducer function. It requires a dispatch to trigger it.

example_1:

<TWRUpdate tree='users/1' callforward={(args)=>{
    args.get('dispatch')(
        args.get('twr').customAction(
            (state)=>state.set('name', 'Example')
    ))
    return args

}} />

gex
Returns: instances from the database, and relational instances from the database.
Secondary Purpose: It registers for the component and its parents that whenever the instance is updated, the component should update.

<TWRShow tree='users/1' replace={(user_1)=>{
    const childrenBelongingToUser_1 = user_1.gex('children', user_1.instance())
}}

or

<TWRShow tree='users/1' replace={(user_1)=>{
    const returnASingleObjectIfHasOneRelationship = user_1.gex(['child', 'name'], user_1.instance())
}}

or

<TWRShow tree='users/1' replace={(user_1)=>{
    const allChildrenInState = user_1.gex('children')
}}

submitForm(event)
Purpose: Submits the action of the component (create, update, destroy) while combining the content component property with the form elements within the component. It expects an event argument which it immediately prevents the default action on.
example:

<TWRCreate tree='users' content={{name: 'Sam'}} replace={createUser=> 
  <div>
    <input type='text' name='age' value='12' />
    <button onClick={createUser.submitForm} />
  </div>
}/>
==> Sends {name: 'Sam', age: '12'}

submitContent(content)
Purpose: Submits the action of the component (create, update, destroy) while combining the content argument with the form elements within the component. This will overwrite the default content set in the component property example:

<TWRCreate tree='users' content={{name: 'Sam'}} replace={createUser=> 
  <div>
    <input type='text' name='age' value='12' />
    <button onClick={()=>createUser.submitContent({eyes: 'blue'})} />
  </div>
}/>
==> Sends {eyes: 'blue', age: '12'}

submitAdditionalContent(content)
Purpose: Submits the action of the component (create, update, destroy) while combining the content argument with the form elements within the component and the component content property.

<TWRCreate tree='users' content={{name: 'Sam'}} replace={createUser=> 
  <div>
    <input type='text' name='age' value='12' />
    <button onClick={()=>createUser.submitAdditionalContent({eyes: 'blue'})} />
  </div>
}/>
==> Sends {name: 'Sam', eyes: 'blue', age: '12'}

results matching ""

    No results matching ""