react-i18next#NamespacesConsumer JavaScript Examples

The following examples show how to use react-i18next#NamespacesConsumer. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: hero.js    From AzureEats-Website with MIT License 6 votes vote down vote up
render() {
        return (
            <NamespacesConsumer>
                {t => (
                    <div className="hero">
                        <div className="hero__banner">
                            <div className="hero__inner">
                                <Freeshipping />
                                <span className="hero__text  hero__text--strong">
                                    {t("home.hero.shiping")}
                                </span>
                                <span className="hero__text">&#8226;</span>
                                <span className="hero__text hero__text--light">
                                    {t("home.hero.orders")}
                                </span>
                            </div>
                        </div>
                        <div className="hero__image-wrapper">
                            <div className="hero__image" ref={this.bgImg} />
                        </div>
                    </div>
                )}
            </NamespacesConsumer>
        );
    }
Example #2
Source File: checkboxContainer.js    From AzureEats-Website with MIT License 6 votes vote down vote up
render() {
        const { data, title } = this.props;
        const dataType = this.props.id;

        return (
            <NamespacesConsumer>
                {t => (
                    <div className="filter">
                        <legend className="filter__title">{title}</legend>
                        {data &&
                            data.map((item, key) => (
                                <div className="filter__item" key={key}>
                                    <Checkbox
                                        name={item.name}
                                        checked={this.state.checkedItems.get(item.name)}
                                        onChange={(e)=>{
                                            this.handleChange(e, dataType)
                                        }}
                                        code={`${item.code || item.id}`}
                                    />
                                    <label className="label" htmlFor={`${item.code || item.id}`}>
                                        {item.name}
                                    </label>
                                </div>
                            ))}
                        <div className="filter__more">{t("list.aside.more")}</div>
                    </div>
                )}
            </NamespacesConsumer>
        );
    }
Example #3
Source File: listAside.js    From AzureEats-Website with MIT License 6 votes vote down vote up
render() {
        const { typesList, brandsList } = this.props;
        return (
            <NamespacesConsumer>
                {t => (
                    <aside className="list__aside">
                        <button className="btn btn--secondary btn--float" onClick={this.openFilterPanel}>
                            <FilterImg />
                            <span>{t("list.aside.filtersTitle")}</span>
                        </button>
                        {this.state.showComponent && (
                            <div className={ this.state.isopened ? "list__panel is-opened" : "list__panel" } ref={this.filterPanel}>
                                <CheckboxContainer
                                    onFilterChecked={this.props.onFilterChecked}
                                    data={typesList}
                                    title="Cordless Power Tools"
                                    id="type"
                                />

                                <CheckboxContainer
                                    onFilterChecked={this.props.onFilterChecked}
                                    data={brandsList}
                                    title="Brands"
                                    id="brand"
                                />

                                <button className="btn btn--primary" onClick={this.toggleClass}>
                                    {t("list.aside.close")}
                                </button>
                            </div>
                        )}
                    </aside>
                )}
            </NamespacesConsumer>
        );
    }
Example #4
Source File: shoppingCart.js    From AzureEats-Website with MIT License 6 votes vote down vote up
render() {
        const { shoppingCart, loading, isPulling } = this.state
        return (
            <NamespacesConsumer>
                {t => (
                    <Fragment>
                        {loading && isPulling ? <LoadingSpinner /> : <Fragment>
                            <h2 className="shopping-card__title grid__heading">{t("shoppingCart.title")}</h2>
                            <div className="shopping-card__grid">
                                {shoppingCart && shoppingCart.map((shoppingCart, index) => (
                                    <ShoppingCartCard {...shoppingCart} updateQty={this.updateQty} key={index} />
                                ))}
                            </div>
                        </Fragment>}
                    </Fragment>
                )}
            </NamespacesConsumer>
        );
    }
Example #5
Source File: suggestedProductsList.js    From AzureEats-Website with MIT License 6 votes vote down vote up
render() {
        const productsReceived = this.state.suggestedProductsList;
        return (
            <NamespacesConsumer>
                {t => (
                    <Fragment>
                        <div className="banner">
                            <span className="banner__item">{t("shared.banner.disclaimer")}</span>
                            <div className="banner__item">
                                <span>{t("shared.banner.info")}</span>
                            </div>
                            <UploadFile title={t("shared.banner.uploadPhotoTitle")} />
                        </div>
                        <div className="suggestedproductslist">
                            {productsReceived && productsReceived.map((suggestedProductsListInfo, index) => (
                                <Card {...suggestedProductsListInfo} key={index} />
                            ))}
                        </div>
                    </Fragment>
                )}
            </NamespacesConsumer>
        );
    }
Example #6
Source File: loginComponent.js    From AzureEats-Website with MIT License 6 votes vote down vote up
render() {
        return (
            <NamespacesConsumer>
                {t => (
                    <div className={this.state.isModalOpened ? 'modal-overlay is-opened' : 'modal-overlay'}>
                        <Alert stack={{ limit: 1 }} />
                        <div className="modal">
                            <Close onClick={this.toggleModalClass} />
                            <Logo />
                            {this.state.useB2c
                                ? <LoginB2c onLoginClick={this.handleLoginB2CClick} />
                                : <LoginForm
                                    handleSubmit={this.handleSubmit}
                                    keepInputEmail={this.keepInputEmail}
                                    keepInputPassword={this.keepInputPassword}
                                />
                            }
                        </div>
                    </div>
                )}
            </NamespacesConsumer>
        );
    }
Example #7
Source File: detail.js    From AzureEats-Website with MIT License 5 votes vote down vote up
render() {
        const { name, price, imageUrl, stockUnits } = this.props.detailProductData;
        const type = Object.assign({}, this.props.detailProductData.type);
        const { features } = this.props.detailProductData;

        const relatedDetailProducts = this.props.relatedDetailProducts;
        const hasRelatedDetailProducts = relatedDetailProducts && relatedDetailProducts.length;

        const bgImage = {
            backgroundImage: `url(${imageUrl})`,
        };

        const { loadingRelated, loggedIn } = this.props;


        return (
            <NamespacesConsumer>
                {t => (
                    <div className="detail">
                        <div className="detail__wrapper">
                            <div className="detail__image" style={bgImage} />
                            <div className="detail__info">
                                <p className="detail__label">{type.name}</p>
                                <div className="detail__data">
                                    <span className="detail__title">{name} (${price})</span>
                                    {stockUnits > 0 ? 
                                        <span className="detail__tag">{t("detail.inStock")}</span> :
                                        <span className="detail__tag nostock">{t("detail.outStock")}</span>
                                    }
                                    <span className="detail__tag">{t("detail.tagName1")}</span>
                                    <span className="detail__tag">{t("detail.tagName2")}</span>
                                </div>
                                {stockUnits > 0 && loggedIn && <div className="detail__buttons">
                                    <button className={`btn btn--primary btn--cart`} onClick={this.addToCart}>{t("detail.addToCart")}</button>
                                    <Link className="btn btn--secondary" to="/shopping-cart">{t("detail.shoppingCart")}</Link>
                                </div> }
                                <div className="detail__description">
                                    <ul>
                                        {features &&
                                            features.map((feature, index) => (
                                                <li className="detail__feature" key={index}>
                                                    <span className="detail__feature-title">{`${feature.title}:`}</span>
                                                    <span className="detail__feature-description">{feature.description}</span>
                                                </li>
                                            ))}
                                    </ul>
                                </div>
                            </div>
                        </div>
                        {loadingRelated ? <LoadingSpinner /> : null}
                        {hasRelatedDetailProducts ? <Popular relatedDetailProducts={relatedDetailProducts} /> : null}
                    </div>
                )}
            </NamespacesConsumer>
        );
    }
Example #8
Source File: profileContainer.js    From AzureEats-Website with MIT License 5 votes vote down vote up
render() {
        const { coupons } = this.state
        const { purchaseHistory, recommendedProducts, favoriteCatregories, profile } = this.state
        const isSmallCouponsAvailable = coupons && coupons.smallCoupons.length;
        return (
            <NamespacesConsumer>
                {t => (
                    <div className="profile">
                        <div className="grid-container">
                            <Profile {...profile} />
                            <aside className="aside">
                                <div className="profile__heading">
                                    <h2 className="profile__heading-title">{t("profile.cupons.title")}</h2>
                                    {isSmallCouponsAvailable ?
                                        <Link className="btn  btn--secondary" to="/coupons">
                                            <span>{t("profile.cupons.seeAll")}</span>
                                        </Link> : null}
                                </div>
                                {isSmallCouponsAvailable ? <SmallCoupons smallCoupons={coupons.smallCoupons} /> :
                                    <div className="profile__data--empty">
                                        <span className="profile__title profile__info">{t("profile.cupons.noCupons")}</span>
                                    </div>}
                            </aside>

                            <div className="history">
                                <h2 className="profile__heading-title profile__heading-history">{t("profile.history.title")}</h2>
                                {purchaseHistory && purchaseHistory.map((purchaseHistoryItem, index) => (
                                    <PurchaseHistory {...purchaseHistoryItem} key={index} />
                                ))}
                            </div>
                        </div>
                        <h2 className="profile__heading-title profile__heading-recommended">{t("profile.recommended.title")}</h2>
                        <div className="cards">
                            {recommendedProducts && recommendedProducts.map((recommendedProducts, index) => (
                                <Card {...recommendedProducts} key={index} />
                            ))}
                        </div>
                        <h2 className="profile__heading-title">{t("profile.favorite.title")}</h2>
                        <div className="favorite">
                            {favoriteCatregories && favoriteCatregories.map((favoriteCatregory, index) => (
                                <FavoriteCategories {...favoriteCatregory} key={index} />
                            ))}
                        </div>
                    </div>
                )}
            </NamespacesConsumer>
        );
    }
Example #9
Source File: header.js    From AzureEats-Website with MIT License 5 votes vote down vote up
render() {
        const { profile } = this.state;
        const { loggedIn } = this.props.userInfo;
        return (
            <NamespacesConsumer>
                {t => (
                    <header className="header">
                        <Link to="/">
                            <Logo />
                        </Link>
                        <nav className={this.state.isopened ? 'main-nav is-opened' : 'main-nav'}>
                            <Link className="main-nav__item" to="/list/mooncheese">
                                {t('shared.header.homeAppliances')}
                            </Link>
                            <Link className="main-nav__item" to="/list/brewdragon">
                                {t('shared.header.sink')}
                            </Link>
                            <Link className="main-nav__item" to="/list/meteorflower">
                                {t('shared.header.home')}
                            </Link>
                            <Link className="main-nav__item" to="/list/cometflakes">
                                {t('shared.header.gardening')}
                            </Link>
                            <Link className="main-nav__item" to="/list/localbubblegum">
                                {t('shared.header.decor')}
                            </Link>
                            <Link className="main-nav__item" to="/list/gazeuse">
                                {t('shared.header.kitchen')}
                            </Link>
                            <Link className="main-nav__item" to="/list/marsbars">
                                {t('shared.header.diytools')}
                            </Link>
                            <div className="main-nav__actions">
                                <Link className="main-nav__item" to="/profile">
                                    {t('shared.header.profile')}
                                </Link>
                                <button className="u-empty main-nav__item">
                                    {t('shared.header.logout')}
                                </button>
                            </div>
                            <button className="u-empty btn-close" onClick={this.toggleClass}>
                                <Close />
                            </button>
                        </nav>
                        <nav className="secondary-nav">
                            {/* <Search /> */}
                            {loggedIn && <Link to="/profile"><UserPortrait {...profile} /></Link>}
                            {loggedIn ? <div className="secondary-nav__login" onClick={this.onClickLogout}>{t('shared.header.logout')}</div>
                                : <div className="secondary-nav__login" onClick={this.toggleModalClass}>{t('shared.header.login')}</div>}
                            {loggedIn && <Link className="secondary-nav__cart" to="/shopping-cart">
                                <Cart />
                                <div className="secondary-nav__cart-number">
                                    {this.props.quantity}
                                </div>
                            </Link>}
                            <button className="u-empty" onClick={this.toggleClass}>
                                <Hamburger />
                            </button>
                        </nav>
                        {this.state.ismodalopened ?
                            <Login UseB2C={this.state.UseB2C} toggleModalClass={this.state.ismodalopened} onClickClose={this.onClickClose} />
                            : null}
                    </header>
                )}
            </NamespacesConsumer>
        );
    }
Example #10
Source File: header.js    From DevOpsLabARM with MIT License 5 votes vote down vote up
render() {
        const { profile } = this.state;
        const { loggedIn } = this.props.userInfo;
        return (
            <NamespacesConsumer>
                {t => (
                    <header className="header">
                        <Link to="/">
                            <Logo />
                        </Link>
                        <nav className={this.state.isopened ? 'main-nav is-opened' : 'main-nav'}>
                            <Link className="main-nav__item" to="/list/homeappliances">
                                {t('shared.header.homeAppliances')}
                            </Link>
                            <Link className="main-nav__item" to="/list/sink">
                                {t('shared.header.sink')}
                            </Link>
                            <Link className="main-nav__item" to="/list/home">
                                {t('shared.header.home')}
                            </Link>
                            <Link className="main-nav__item" to="/list/gardening">
                                {t('shared.header.gardening')}
                            </Link>
                            <Link className="main-nav__item" to="/list/decor">
                                {t('shared.header.decor')}
                            </Link>
                            <Link className="main-nav__item" to="/list/kitchen">
                                {t('shared.header.kitchen')}
                            </Link>
                            <Link className="main-nav__item" to="/list/diytools">
                                {t('shared.header.diytools')}
                            </Link>
                            <div className="main-nav__actions">
                                <Link className="main-nav__item" to="/profile">
                                    {t('shared.header.profile')}
                                </Link>
                                <button className="u-empty main-nav__item">
                                    {t('shared.header.logout')}
                                </button>
                            </div>
                            <button className="u-empty btn-close" onClick={this.toggleClass}>
                                <Close />
                            </button>
                        </nav>
                        <nav className="secondary-nav">
                            {/* <Search /> */}
                            {loggedIn && <Link to="/profile"><UserPortrait {...profile} /></Link>}
                            {loggedIn ? <div className="secondary-nav__login" onClick={this.onClickLogout}>{t('shared.header.logout')}</div>
                                : <div className="secondary-nav__login" onClick={this.toggleModalClass}>{t('shared.header.login')}</div>}
                            {loggedIn && <Link className="secondary-nav__cart" to="/shopping-cart">
                                <Cart />
                                <div className="secondary-nav__cart-number">
                                    {this.props.quantity}
                                </div>
                            </Link>}
                            <button className="u-empty" onClick={this.toggleClass}>
                                <Hamburger />
                            </button>
                        </nav>
                        {this.state.ismodalopened ?
                            <Login UseB2C={this.state.UseB2C} toggleModalClass={this.state.ismodalopened} onClickClose={this.onClickClose} />
                            : null}
                    </header>
                )}
            </NamespacesConsumer>
        );
    }