header-ui/src/components/documentation/cloudQueue.jsx

Header UI

import React from 'react';
import {
    Card,
    CardHeader,
    CardContent
} from '@material-ui/core';

class CloudQueue extends React.Component {
    constructor() {
        super()
        this.state = {

        }
    }

    copyToClipboard(element) {
        const range = document.createRange();
        const selection = window.getSelection();

        // Clear selection from any previous data.
        selection.removeAllRanges();

        // Make the range select the entire content of the contentHolder paragraph.
        range.selectNodeContents(document.querySelector(element));

        // Add that range to the selection.
        selection.addRange(range);

        // Copy the selection to clipboard.
        document.execCommand('copy');

        // Clear selection if you want to.
        selection.removeAllRanges();
    }


    handleExpandChange = (expanded) => {
        this.setState({ expanded: expanded });
    };

    handleToggle = (event, toggle) => {
        this.setState({ expanded: toggle });
    };

    handleExpand = () => {
        this.setState({ expanded: true });
    };

    handleReduce = () => {
        this.setState({ expanded: false });
    };

    render() {
        return (
            <div>
                <div className="method">
                    <a id="CloudQueue-constructor" name="CloudObject-constructor" className="section-anchor" />
                    <Card style={{marginBottom:16}}>
                        <CardHeader
                            title="Initialise a Cloud Queue"
                            style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
                        />
                        <CardContent>
                            <div className="method-example" id="api-summary-example">

                                <span className="pull-right flag fa fa-clipboard" title="Copy.." onClick={this.copyToClipboard.bind(this, "#pre_queue")}>

                                </span>
                                <pre id="pre_queue">
                                    <span className="code-red">{`var`}</span>{` queue = `}<span className="code-red">{`new`}</span>{` CB.CloudQueue(`}<span className="code-yellow">{`"queueName" , "queueType"`}</span>{`);`}
                                </pre>
                            </div>{/* method-example */}
                        </CardContent>
                        <CardHeader title="CloudQueue( queueName, queueType )" subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Instantiate a Cloud Queue for your Application." />
                        <CardContent>
                            <div className="method-description">
                                <div className="method-list">
                                    <h6>Argument</h6>
                                    <dl className="argument-list">
                                        <dt>queueName</dt>
                                        <dd className>string <span>The name of the queue you want to initialise.</span></dd>
                                        <div className="clearfix" />
                                        <dt>queueType</dt>
                                        <dd className>string <span>The type of the queue can be either push or pull.</span></dd>
                                        <div className="clearfix" />
                                    </dl>
                                    <h6>Returns</h6>
                                    <p>A Queue Object, which defines the property of new Queue.</p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                    <a id="CloudQueue-add" name="CloudObject-constructor" className="section-anchor" />
                    <Card style={{marginBottom:16}}>
                        <CardHeader
                            title="Add a new message to your Queue"
                            style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
                        />
                        <CardContent>
                            <div className="method-example" id="api-summary-example">

                                <span className="pull-right flag fa fa-clipboard" title="Copy.." onClick={this.copyToClipboard.bind(this, "#pre_qadd")}>

                                </span>
                                <pre id="pre_qadd">
                                     <span className="code-red">{`var`}</span>{` queue = `}<span className="code-red">{`new`}</span>{` CB.CloudQueue(`}<span className="code-yellow">{`"queueName" , "queueType"`}</span>{`);
 queue.addMessage( `}<span className="code-yellow">{` "Hi, There!!" `}</span>{`, {
    success: `}<span className="code-red">{`function`}</span>{`(obj) {
        //adds message to Queue
    },
    error: `}<span className="code-red">{`function`}</span>{`(err) {
        //error in adding
    }});`
                                    }
                                </pre>
                            </div>{/* method-example */}
                        </CardContent>
                        <CardHeader title="CloudQueue.addMessage( queueMessage, callback )" subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Adds a message to a Queue" />
                        <CardContent>
                            <div className="method-description">
                                <div className="method-list">
                                    <h6>Argument</h6>
                                    <dl className="argument-list">
                                         <dt>queueMessage</dt>
                                        <dd className>string <span>The message you want to enter.</span></dd>
                                        <div className="clearfix" />
                                        <dt>callback</dt>
                                        <dd className>object <span>The callback actions you want to perform.</span></dd>
                                        <div className="clearfix" />
                                    </dl>
                                    <h6>Returns</h6>
                                    <p>void</p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                    <a id="CloudQueue-getMessage" name="CloudObject-constructor" className="section-anchor" />
                    <Card style={{marginBottom:16}}>
                        <CardHeader
                            title="Get the first message from the Queue"
                            style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
                        />
                        <CardContent>
                            <div className="method-example" id="api-summary-example">

                                <span className="pull-right flag fa fa-clipboard" title="Copy.." onClick={this.copyToClipboard.bind(this, "#pre_gmsg")}>

                                </span>
                                <pre id="pre_gmsg">
                                     {`queue.getMessage( {
    success: `}<span className="code-red">{`function`}</span>{`(queueMessage) {
        //queueMessage is an instance of CB.QueueMessage class.
        console.log(queueMessage.id);
    },
    error: `}<span className="code-red">{`function`}</span>{`(err) {
        //error in retrieving
    }});`
                                    }
                                </pre>
                            </div>{/* method-example */}
                        </CardContent>
                        <CardHeader title="CloudQueue.getMessage( callback )" subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Adds a message to a Queue" />
                        <CardContent>
                            <div className="method-description">
                                <div className="method-list">
                                    <h6>Argument</h6>
                                    <dl className="argument-list">
                                        <dt>callback</dt>
                                        <dd className>object <span>The callback actions you want to perform.</span></dd>
                                        <div className="clearfix" />
                                    </dl>
                                    <h6>Returns</h6>
                                    <p>void</p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                    <a id="CloudQueue-delMessage" name="CloudObject-constructor" className="section-anchor" />
                    <Card style={{marginBottom:16}}>
                        <CardHeader
                            title="To delete a message from the Queue"
                            style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
                        />
                        <CardContent>
                            <div className="method-example" id="api-summary-example">

                                <span className="pull-right flag fa fa-clipboard" title="Copy.." onClick={this.copyToClipboard.bind(this, "#pre_delmsg")}>

                                </span>
                                <pre id="pre_delmsg">
                                     {`queue.deleteMessage(`}<span className="code-yellow">{` messageId`}</span>{`, {
    success: `}<span className="code-red">{`function`}</span>{`(queueMessage) {
        //message deleted
    },
    error: `}<span className="code-red">{`function`}</span>{`(err) {
        //error
    }});`
                                    }
                                </pre>
                            </div>{/* method-example */}
                        </CardContent>
                        <CardHeader title="CloudQueue.deleteMessage( messageId, callback )" subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Adds a message to a Queue" />
                        <CardContent>
                            <div className="method-description">
                                <div className="method-list">
                                    <h6>Argument</h6>
                                    <dl className="argument-list">
                                        <dt>messageId</dt>
                                        <dd className>string <span>The ID of the message you want to delete.</span></dd>
                                        <div className="clearfix" />
                                        <dt>callback</dt>
                                        <dd className>object <span>The callback actions you want to perform.</span></dd>
                                        <div className="clearfix" />
                                    </dl>
                                    <h6>Returns</h6>
                                    <p>void</p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                    <a id="CloudQueue-delete" name="CloudObject-constructor" className="section-anchor" />
                    <Card style={{marginBottom:16}}>
                        <CardHeader
                            title="Delete a Cloud Queue"
                            style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
                        />
                        <CardContent>
                            <div className="method-example" id="api-summary-example">

                                <span className="pull-right flag fa fa-clipboard" title="Copy.." onClick={this.copyToClipboard.bind(this, "#pre_qdel")}>

                                </span>
                                  <pre id="pre_qdel">
                                     <span className="code-red">{`var`}</span>{` queue = `}<span className="code-red">{`new`}</span>{` CB.CloudQueue(`}<span className="code-yellow">{`"queueName" , "queueType"`}</span>{`);
 queue.delete( {
    success: `}<span className="code-red">{`function`}</span>{`(obj) {
        //deletes Queue
    },
    error: `}<span className="code-red">{`function`}</span>{`(err) {
        //error in delete
    }});`
                                    }
                                </pre>
                            </div>{/* method-example */}
                        </CardContent>
                        <CardHeader title="CloudQueue.delete( callback )" subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Deletes a Cloud Queue" />
                        <CardContent>
                            <div className="method-description">
                                <div className="method-list">
                                    <h6>Argument</h6>
                                    <dl className="argument-list">
                                        <dt>callback</dt>
                                        <dd className>object <span>The callback actions you want to perform.</span></dd>
                                        <div className="clearfix" />
                                    </dl>
                                    <h6>Returns</h6>
                                    <p>void</p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                    <a id="CloudQueue-clear" name="CloudObject-constructor" className="section-anchor" />
                    <Card style={{marginBottom:16}}>
                        <CardHeader
                            title="Clears a Cloud Queue"
                            style={{backgroundColor:"#f4f4f4", padding:"10px 16px"}}
                        />
                        <CardContent>
                            <div className="method-example" id="api-summary-example">

                                <span className="pull-right flag fa fa-clipboard" title="Copy.." onClick={this.copyToClipboard.bind(this, "#pre_qclear")}>

                                </span>
                                  <pre id="pre_qclear">
                                     <span className="code-red">{`var`}</span>{` queue = `}<span className="code-red">{`new`}</span>{` CB.CloudQueue(`}<span className="code-yellow">{`"queueName" , "queueType"`}</span>{`);
 queue.clear( {
    success: `}<span className="code-red">{`function`}</span>{`(obj) {
        //clears Queue
    },
    error: `}<span className="code-red">{`function`}</span>{`(err) {
        //error in clearing
    }});`
                                    }
                                </pre>
                            </div>{/* method-example */}
                        </CardContent>
                        <CardHeader title="CloudQueue.clear( callback )" subheaderTypographyProps={{ style: { fontSize: '12px !important' }  }} subheader="Clears a Cloud Queue" />
                        <CardContent>
                            <div className="method-description">
                                <div className="method-list">
                                    <h6>Argument</h6>
                                    <dl className="argument-list">
                                        <dt>callback</dt>
                                        <dd className>object <span>The callback actions you want to perform.</span></dd>
                                        <div className="clearfix" />
                                    </dl>
                                    <h6>Returns</h6>
                                    <p>void</p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </div>
        );
    }
}

export default CloudQueue;