@fractal-components/random-gif-pair

v1.1.2

Published

2 years ago

A sample UI component built using `fractal-component`

Downloads

0High
0Medium
0Low

javascript redux react saga fractal component encapsulation namespaced action namespaced store multicast action multicast messaging reducer hot loading saga hot loading

A Sample RandomGifPair UI Component

Overview

This is a sample UI Component built by re-using two RandomGif components. Its internal structure is simply as below:

<div className={classes.table}>
    <div className={classes.cell}>RandomGif Pair</div>
    <div className={`${classes.cell}`}>
        <div>
            <RandomGif
                showButton={false}
                apiKey={this.props.apiKey}
                namespacePrefix={`${
                    this.componentManager.fullPath
                }/Gifs`}
            />
        </div>
        <div>
            <RandomGif
                showButton={false}
                apiKey={this.props.apiKey}
                namespacePrefix={`${
                    this.componentManager.fullPath
                }/Gifs`}
            />
        </div>
    </div>
    {this.props.showButton && (
        <div className={`${classes.cell} `}>
            <button
                onClick={() => {
                    this.componentManager.dispatch(
                        actions.requestNewPair()
                    );
                }}
                disabled={this.state.isLoading}
            >
                {this.state.isLoading
                    ? "Loading..."
                    : "Get Gif Pair"}
            </button>
        </div>
    )}
    {/**
        * Use ActionForwarder to throw NEW_GIF out of RandomGifPair container
        * Set namespace to `${this.componentManager.fullPath}/Gifs` in order to listen to
        * all `out of box` actions from two `RandomGif` components
        */}
    <ActionForwarder
        namespacePrefix={`${this.componentManager.fullPath}/Gifs`}
        pattern={RandomGifActionTypes.NEW_GIF}
        relativeDispatchPath="../../../../*"
    />

    {/**
        * Use ActionForwarder to forward LOADING_START & LOADING_COMPLETE actions from `RandomGif`
        * to current component (`RandomGifPair`)'s namespace.
        * i.e. from `${this.componentManager.fullPath}/Gifs` to `${this.componentManager.fullPath}`
        * Thus, `relativeDispatchPath` should be ".."
        */}
    <ActionForwarder
        namespacePrefix={`${this.componentManager.fullPath}/Gifs`}
        pattern={action =>
            action.type === RandomGifActionTypes.LOADING_START ||
            action.type === RandomGifActionTypes.LOADING_COMPLETE
        }
        relativeDispatchPath=".."
    />
</div>

Quick Start

To try it out, simply create a HTML file with the following content (also available on CodePen):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>RandomGifPair Demo</title>
        <!--
            Load `babel-standalone` to support JSX in script tag
        -->
        <script src="https://unpkg.com/@babel/standalone@^7.0.0/babel.min.js"></script>
        <script src="https://unpkg.com/react@~16.8.0/umd/react.production.min.js"></script>
        <script src="https://unpkg.com/prop-types@~15.6.2/prop-types.min.js"></script>
        <script src="https://unpkg.com/react-dom@~16.8.0/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/redux-saga@~1.0.0/dist/redux-saga.umd.min.js"></script>
        <script src="https://unpkg.com/fractal-component@latest/dist/fractal-component.min.umd.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/jss.min.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/jss-preset-default.min.js"></script>
        <script src="https://unpkg.com/@fractal-components/random-gif@latest/dist/@fractal-components/random-gif.min.umd.js"></script>
        <script src="https://unpkg.com/@fractal-components/random-gif-pair@latest/dist/@fractal-components/random-gif-pair.umd.js"></script>
    </head>
    <body>
        <div id="app_root"></div>
        <script type="text/babel">
            const appContainer = new FractalComponent.AppContainer({
                reduxDevToolsDevOnly: false
            });
            ReactDOM.render(
                <FractalComponent.AppContainerContext.Provider
                    value={appContainer}
                >
                    <RandomGifPair.default />
                </FractalComponent.AppContainerContext.Provider>,
                document.getElementById("app_root")
            );
        </script>
    </body>
</html>

You can also use it as ES6 module:

import "@babel/polyfill";

import React from "react";
import ReactDOM from "react-dom";

import { AppContainer, AppContainerContext } from "fractal-component";
import RandomGifPair, { actions, actionTypes } from "@fractal-components/random-gif-pair";

const appContainer = new AppContainer({
    reduxDevToolsDevOnly: false
});

ReactDOM.render(
    <AppContainerContext.Provider value={appContainer}>
        <RandomGifPair />
    </AppContainerContext.Provider>,
    document.getElementById("root")
);

API / Interface

Component Properties

namespacePrefix: String. Optional. Used to extend component's namespace (without impact component's internal namespace) so that two components' namespaces have a common part. It will impact the action multicast dispatch.
apiKey: Giphy.com API key. If not set, default one will be used
showButton: Boolean. Whether a click button should be shown. You will want to hide the button when you reuse this component to create a new component. e.g. RandomGifPairPair
styles: Can used to replace the built-in styling. Accepts JSS styling object

Action Interface

Outgoing Actions

NEW_GIF: Send out when a new gif url has been retrieved from Giphy.com
LOADING_START: Send out when loading is started
LOADING_COMPLETE: Send out when loading is completed

Accepted Actions

REQUEST_NEW_PAIR: Will attempt to get a pair of random Gifs from Giphy.com when receive this action

Giphy.com API key

This comes with a testing Giphy.com API key in order to retrieve random Gifs from https://giphy.com/. The api key is limted to 40 requests per hour.

You can create your own API key from https://developers.giphy.com/ and set the API key by api property. e.g.

<RandomPair apiKey="xxxxxxxx" />

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme