react-tabs#Tabs JavaScript Examples

The following examples show how to use react-tabs#Tabs. 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: sectionsettingcolor.jsx    From razer-macos with GNU General Public License v2.0 6 votes vote down vote up
renderSettings() {
    if (this.deviceSelected.settings.customColor2 != null) {
      return <Tabs>
        <TabList>
          <Tab>Primary custom color</Tab>
          <Tab>Secondary custom color</Tab>
        </TabList>
        <TabPanel>
          <CustomColor deviceSelected={this.deviceSelected} />
        </TabPanel>
        <TabPanel>
          <CustomColor2 deviceSelected={this.deviceSelected} />
        </TabPanel>
      </Tabs>;
    }
    return <div style={{ paddingTop: '10px' }}>
      <CustomColor deviceSelected={this.deviceSelected} />
    </div>;

  }
Example #2
Source File: Switcher.js    From halo-lab with MIT License 6 votes vote down vote up
Switcher = ({ items }) => {
  return (
    <Tabs>
      <TabList className={styles.tabList}>
        {items.map(({ title }, index) => {
          return (
            <Tab
              className={styles.tabListItem}
              key={index}
              style={{ flexBasis: `${100 / items.length}px` }}
            >
              <div className={styles.tabListIcon}>{index + 1}</div>
              <div className={styles.tabListTitle}>{title}</div>
            </Tab>
          );
        })}
      </TabList>

      {items.map(({ message }, index) => {
        return (
          <TabPanel key={index}>
            <div className={styles.tabContent}>{message}</div>
          </TabPanel>
        );
      })}
    </Tabs>
  );
}
Example #3
Source File: index.jsx    From elliot-serverless-ecommerce with MIT License 6 votes vote down vote up
function TabMenu({ content }) {
	const titles = [];
	const panels = [];

	content.map(item => {
		titles.push(item.title);
		panels.push(item.content);
	});

	return (
		<Wrapper>
			<Tabs>
				<TabList>
					{titles.map((item, i) => (
						<Tab key={`tab-${i}`}>{item}</Tab>
					))}
				</TabList>
				{panels.map((item, i) => (
					<TabPanel key={`content-${i}`}>{item}</TabPanel>
				))}
			</Tabs>
		</Wrapper>
	);
}
Example #4
Source File: SelectDeckModal.jsx    From ashteki with GNU Affero General Public License v3.0 5 votes vote down vote up
SelectDeckModal = ({ onClose, onDeckSelected, onChooseForMe }) => {
    const { t } = useTranslation();

    return (
        <>
            <Modal show={true} onHide={onClose}>
                <Modal.Header closeButton>
                    <Modal.Title>{t('Select Deck')}</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <div>
                        <Tabs>
                            <TabList>
                                <Tab>My Decks</Tab>
                                <Tab>Pre-cons</Tab>
                                <Tab>Building Basics</Tab>
                                <Tab style={{ backgroundColor: 'skyblue', color: '#333' }}>
                                    <img
                                        src={igcircle}
                                        alt='Adventuring Party'
                                        height='22'
                                        width='22'
                                    />{' '}Adventuring Party
                                </Tab>
                            </TabList>

                            <TabPanel>
                                <Button onClick={() => onChooseForMe(0)}>
                                    Choose for me
                                </Button>
                                <DeckList onDeckSelected={onDeckSelected} />
                            </TabPanel>
                            <TabPanel>
                                <Button onClick={() => onChooseForMe(1)}>
                                    Choose for me
                                </Button>
                                <DeckList standaloneDecks={1} onDeckSelected={onDeckSelected} />
                            </TabPanel>
                            <TabPanel>
                                <Button onClick={() => onChooseForMe(3)}>
                                    Choose for me
                                </Button>
                                <DeckList standaloneDecks={3} onDeckSelected={onDeckSelected} />
                            </TabPanel>
                            <TabPanel>
                                <Button onClick={() => onChooseForMe(2)}>
                                    Choose for me
                                </Button>
                                <DeckList standaloneDecks={2} onDeckSelected={onDeckSelected} />
                            </TabPanel>
                        </Tabs>
                    </div>
                </Modal.Body>
            </Modal>
        </>
    );
}
Example #5
Source File: Switcher.js    From halo-lab with MIT License 5 votes vote down vote up
Switcher = ({ items }) => {
  return (
    <Tabs>
      <TabList className={styles.tabList}>
        {items.map((item, index) => {
          return (
            <Tab className={styles.tabListItem} key={index}>
              <div className={styles.tabListTitle}>{item.title}</div>
            </Tab>
          );
        })}
      </TabList>

      {items.map(({ items }, index) => {
        return (
          <TabPanel key={index}>
            <ul className={styles.tabContentList}>
              {items.map(({ title, image }, index) => {
                const inlineStyles = { animationDelay: `0.${index}s` };
                return (
                  <li
                    key={index}
                    className={styles.tabContentItem}
                    style={inlineStyles}
                  >
                    <div className={styles.tabContentIcon}>
                      <img
                        src={image.publicURL}
                        alt="technologies item icon"
                        loading="lazy"
                      />
                    </div>
                    <div className={styles.tabContentTitle}>{title}</div>
                  </li>
                );
              })}
            </ul>
          </TabPanel>
        );
      })}
    </Tabs>
  );
}
Example #6
Source File: TabPanels.js    From agility-website-gatsby with MIT License 5 votes vote down vote up
TabPanels = ({ item }) => {

	const moduleItem = item;
	item = item.customFields;


	const tabNav = item.tabPanels.map(function (tab) {

		let key = `${moduleItem.contentID}-${tab.contentID}`;
		tab = tab.customFields;

		return <Tab key={key}>
			{tab.tabIcon &&
				<div className="tab-icon"><img src={tab.tabIcon.href} alt="" /></div>
			}
			<div className="tab-title">{tab.title}</div>
		</Tab>
	})

	//loop all the tabs and render them
	const tabs = item.tabPanels.map(function (tab, index) {

		let key = `${moduleItem.contentID}-${tab.contentID}-panel`;
		tab = tab.customFields;

		return <TabPanel key={key}>
			{tab.image && <div className="img"><img src={tab.image.url} alt={tab.image.label} /></div>}
			<div className="content">
				<h3 className="feature-title">{tab.description}</h3>

				<div dangerouslySetInnerHTML={renderHTML(tab.textblob)}></div>

				{tab.primaryButton && tab.primaryButton.href &&
				<a href={tab.primaryButton.href} target={tab.primaryButton.target} className="btn">{tab.primaryButton.text}</a>
				}
			</div>
		</TabPanel>
	})

	return (

		<section id="sec-3" className="features p-w">

			<h2 className="title-component" dangerouslySetInnerHTML={renderHTML(item.title)}></h2>

			<span dangerouslySetInnerHTML={renderHTML(item.subTitle)}></span>

			<Tabs forceRenderTabPanel={true}>
				<TabList>
					{tabNav}
				</TabList>
				<div className="container-my">
					<div className="features-toggle-tab-items">
						{tabs}
					</div>
				</div>
			</Tabs>
		</section>


	);
}
Example #7
Source File: ExampleItem.js    From Lambda with MIT License 5 votes vote down vote up
scope = { Tabs, Tab, TabList, TabPanel }
Example #8
Source File: shop.js    From muffinsplantshop with BSD Zero Clause License 5 votes vote down vote up
Shop = ({ data, location }) => {
    const [sizesFilter, setSizesFilter] = useState([]);
    const [varietiesFilter, setVarietiesFilter] = useState([]);
    const filteredProducts = productSelector(data.products.edges, { sizesFilter, varietiesFilter });
    const sizes = data.sizes.group.map(({ size }) => size);
    const varieties = data.varieties.group.map(({ variety }) => variety);

    const handleUpdateSizesFilters = (e) => {
        if (e.target.checked) {
            setSizesFilter([...sizesFilter, e.target.id])
        } else {
            setSizesFilter(sizesFilter.filter(size => e.target.id !== size))
        }
    }

    const handleUpdateVarietiesFilters = (e) => {
        if (e.target.checked) {
            setVarietiesFilter([...varietiesFilter, e.target.id])
        } else {
            setVarietiesFilter(varietiesFilter.filter(variety => e.target.id !== variety))
        }
    }

    return (
        <Layout location={location}>
            <SEO title="Shop" />
            <div className="content-container">
                <h2 className="heading-first">Shop</h2>
            </div>
            <div style={{ marginBottom: `2rem`, backgroundColor: `#F8F8F7`, padding: `1rem` }}>
                <h3 className="heading-third">Filter by</h3>
                <Tabs>
                    <TabList>
                        <Tab>Variety</Tab>
                        <Tab>Size</Tab>
                    </TabList>
                    <TabPanel>
                        {varieties.map(variety => (
                            <Checkbox
                                key={variety}
                                isSelected={varietiesFilter.includes(variety)}
                                onChangeHandler={handleUpdateVarietiesFilters}
                                label={variety} />
                        ))}
                    </TabPanel>
                    <TabPanel>
                        {sizes.map(size => (
                            <Checkbox
                                key={size}
                                isSelected={sizesFilter.includes(size)}
                                onChangeHandler={handleUpdateSizesFilters}
                                label={size} />
                        ))}
                    </TabPanel>
                </Tabs>
            </div>
            <div className="content-container">
                <div className={styles.shop__productGrid}>
                    {filteredProducts.map(({ node: product }) => {
                        return (
                            <ProductItem
                                key={product.id}
                                product={{
                                    slug: product.fields.slug,
                                    fluid: product.frontmatter.imageAbs.childImageSharp.fluid,
                                    title: product.frontmatter.title,
                                    minPrice: _minPrice(product.frontmatter.priceBySize)
                                }}
                            />
                        )
                    })}
                </div>
            </div>
        </Layout>
    )
}
Example #9
Source File: NodeDetailCard.js    From orca-ui with Apache License 2.0 5 votes vote down vote up
render() {
    return (
      <div className={`card node-info-card ${this.state.hidden ? 'hidden' : ''} pt-0 ${this.state.floatRight ? "right" : ''}`}>
        <button type="button" className="close mt-1 mr-2 mb-0" aria-label="Close" onClick={this.props.hideDetailCard}>
          <span aria-hidden="true">&times;</span>
        </button>
        <div className="card-body mt-0 pt-0">
          <h4 className="card-title">{this.state.nodeData.properties.name}</h4>
          <h5 className="card-subtitle">{this.state.nodeData.kind.replace('_', ' ')}</h5>
          { this.state.rca === false ?
            <Tabs>
              <TabList>
                <Tab><i class="fa fa-info-circle" aria-hidden="true"></i>Details</Tab>
                <Tab><i class="fa fa-medkit" aria-hidden="true"></i>Analysis</Tab>
              </TabList>
              <TabPanel>
                <div className="card-text node-info-text">
                  <ReactJson src={this.state.displayProperties} name={null} collapsed={2} displayDataTypes={false}/>
                </div>
              </TabPanel>
              <TabPanel className="analysis">
                { this.state.nodeData.kind === 'alert' ?
                <span>
                <p> Perform Root Cause Analysis </p>
                <Link to={`/rca?source=${this.state.nodeData.id}&time_point=${this.state.timestamp}`} >
                  <Button className="rca" size="sm" variant="outline-warning">
                    Analyze
                  </Button>
                </Link>
                </span>
                : <p>Root Cause Analysis not available for {this.state.nodeData.kind} objects</p> }
              </TabPanel>
            </Tabs>
            :
            <div className="card-text node-info-text">
              <ReactJson src={this.state.displayProperties} name={null} collapsed={2} displayDataTypes={false}/>
            </div> 
          }
        </div>
      </div>
    );
  }
Example #10
Source File: viewstatesettings.jsx    From razer-macos with GNU General Public License v2.0 4 votes vote down vote up
render() {

    const customStyles = {
      option: (provided, state) => ({
        ...provided,
        borderBottom: '1px solid grey',
        color: state.isSelected ? '#47e10c' : 'grey',
        padding: '5px 10px',
        border: '1px solid #47e10c',
        borderTop: 'none',
        backgroundColor: state.isSelected ? 'green' : '#000',
        ':last-child': {
          borderBottomLeftRadius: '10px',
          borderBottomRightRadius: '10px',
        },
        ':hover': {
          backgroundColor: state.isSelected ? 'green' : '#002b17',
        }
      }),
      control: (provided, state) => ({
        ...provided,
        backgroundColor: 'black',
        border: '1px solid #47e10c',
        borderRadius: '15px',
        borderBottomLeftRadius: state.menuIsOpen ? '0' : '15px',
        borderBottomRightRadius: state.menuIsOpen ? '0' : '15px',
        color: '#47e10c',
        minHeight: 0,
        boxShadow: 'none',
        transition: 'none',
        ":hover": {
          borderColor: "inherit",
        },
      }),
      menu: (provided, state) => ({
        ...provided,
        backgroundColor: 'transparent',
        margin: 0,
        zIndex: 100,
        padding: 0,
      }),
      menuList: (provided, state) => ({
        ...provided,
        backgroundColor: 'transparent',
        margin: 0,
        padding: 0,
      }),
      dropdownIndicator: (provided, state) => ({
        ...provided,
        color: '#47e10c',
        padding: '0px 8px'
      }),
      indicatorSeparator: (provided, state) => ({
        ...provided,
        backgroundColor: '#47e10c',
      }),
      singleValue: (provided, state) => ({
        ...provided,
        color: '#47e10c',
      }),
      input: (provided, state) => ({
        ...provided,
        color: '#47e10c',
      }),
    };

    return (
      <Tabs>
        <TabList>
          <Tab>States</Tab>
          <Tab>Settings</Tab>
          <Tab>Current devices state (debug)</Tab>
        </TabList>
        <TabPanel>
          <div>
            <div>
              <p>
                State manager allows you to create unique states for all your devices.
                <br />Either choose an existing state to activate or create a new one by:
                </p>
              <ol>
                <li>Set each device in the state you want it to be with the help of the menu</li>
                <li>Focus the dropdown and give your state a name, like "Party" or "Work".</li>
                <li>Press enter or click on the "Create" dropdown item</li>
              </ol>
              <p>
                States defined here can be previewed, activated and used in the "Settings" tab for system / application events.
              </p>
            </div>
            <div className={'control'}>
              <Creatable isLoading={this.state.isLoading} isClearable={true} value={this.state.selection} options={this.state.options} onCreateOption={(item) => this.handleCreate(item)} onChange={(item, action) => this.selectionChange(item, action)} styles={customStyles} />
            </div>
            <div className={'control'}>
              <button disabled={this.state.selection == null} onClick={() => this.handleClick()}>{this.state.selection == null ? 'Activate - Please select a state first' : 'Activate'}</button>
            </div>
            <div className={'state-devices'}>
              {this.renderState()}
            </div>
          </div>
        </TabPanel>
        <TabPanel>
          <div>
            <p>Select a state to be activate on application and system events</p>
          </div>
          <div className={'state-selectors'}>

            <p>This state will be activated whenever Razer macOS starts or refreshes its devices.</p>
            <div className={'state-selector'}>
              <div>On application start</div>
              <div><Select value={this.state.selectionStart} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeStart(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the system goes to sleep ('suspend' event).</p>
            <div className={'state-selector'}>
              <div>On system idle/sleep</div>
              <div><Select value={this.state.selectionSuspend} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeSuspend(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the system wakes up ('resume' event).</p>
            <div className={'state-selector'}>
              <div>On system wake up</div>
              <div><Select value={this.state.selectionResume} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeResume(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the system is plugged in ('on-ac' event).</p>
            <div className={'state-selector'}>
              <div>On system plugged in</div>
              <div><Select value={this.state.selectionAc} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeAc(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the system is on battery ('on-battery' event).</p>
            <div className={'state-selector'}>
              <div>On system on battery</div>
              <div><Select value={this.state.selectionBatt} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeBattery(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the system is about to shutdown ('shutdown' event).</p>
            <div className={'state-selector'}>
              <div>On system shutdown</div>
              <div><Select value={this.state.selectionShutdown} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeShutdown(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the system is about to lock the screen ('lock-screen' event).</p>
            <div className={'state-selector'}>
              <div>On system lock screen</div>
              <div><Select value={this.state.selectionLockscreen} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeLockscreen(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the system is about to unlock the screen ('unlock-screen' event).</p>
            <div className={'state-selector'}>
              <div>On system unlock screen</div>
              <div><Select value={this.state.selectionUnlockscreen} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeUnlockscreen(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the user on the system is about to become active ('user-did-become-active' event).</p>
            <div className={'state-selector'}>
              <div>On system user become active</div>
              <div><Select value={this.state.selectionUserDidBecomeActive} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeUserDidBecomeActive(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the user on the system is about to resign active ('user-did-resign-active' event).</p>
            <div className={'state-selector'}>
              <div>On system user resign active</div>
              <div><Select value={this.state.selectionUserDidResignActive} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeUserDidResignActive(item)} styles={customStyles} /></div>
            </div>

          </div>
        </TabPanel>
        <TabPanel>
          <div className={'state-devices'}>
            {this.stateManager.devices.map(device => this.getDeviceStateFor(device, device.state))}
          </div>
        </TabPanel>
      </Tabs>
    );
  }
Example #11
Source File: Switcher.js    From halo-lab with MIT License 4 votes vote down vote up
Switcher = ({ items, location, page }) => {
  const [numberOfRendered, setNumberOfRendered] = useState(
    INITIAL_AMOUNT_OF_POSTS
  );
  const defaultIndex = getDefaultTabIndex(location.pathname);
  const itemsAgency = [];
  const itemsCaseStudies = [];
  const itemsNews = [];
  const allCategories = [
    { title: "All", link: "/blog", items },
    { title: "#Agency", link: "/blog/agency", items: itemsAgency },
    { title: "#Case Studies", link: "/blog/case-studies", items: itemsCaseStudies },
    { title: "#News", link: "/blog/news", items: itemsNews }
  ];

  items.forEach(item => {
    const categories = item.categories.map(item => item.slug);

    if (categories.indexOf("agency") !== -1) {
      itemsAgency.push(item);
    }

    if (categories.indexOf("case-studies") !== -1) {
      itemsCaseStudies.push(item);
    }

    if (categories.indexOf("news") !== -1) {
      itemsNews.push(item);
    }
  });
  useEffect(() => {
    if (defaultIndex !== 0) {
      const value = numberOfRendered + LOAD_MORE_POSTS_AMOUNT * (page - 1);
      setNumberOfRendered(value > items.length ? items.length : value);
    }
  }, [page]);
  const handleClick = () => {
    const value = numberOfRendered + LOAD_MORE_POSTS_AMOUNT;
    setNumberOfRendered(value > items.length ? items.length : value);
  };
  return (
    <div className={styles.container}>
      <Tabs defaultIndex={defaultIndex} className={styles.tabsContainer}>
        <TabList className={styles.tabList}>
          {allCategories.map(({ title, link }) => {
            return (
              <Link to={link} className={styles.link} key={title}>
                <Tab key={title} className={styles.tabItem}>
                  <div>{title}</div>
                </Tab>
              </Link>
            );
          })}
        </TabList>

        {allCategories.map(({ title, items }) => {
          const newItems = items.slice(0, numberOfRendered);
          return (
            <TabPanel key={title} className={styles.tabsContentContainer}>
              <ul className={styles.tabContentList}>
                {newItems.map(item => {
                  const tabItemClass = classNames(styles.tabContentItem);
                  return (
                    <li
                      data-list-item="articles"
                      key={item.id}
                      className={tabItemClass}
                    >
                      <PostThumbnail {...item} />
                    </li>
                  );
                })}
              </ul>
              {numberOfRendered >= items.length ? null : (
                <button className={styles.button} onClick={handleClick}>
                  Load more
                </button>
              )}
            </TabPanel>
          );
        })}
      </Tabs>
    </div>
  );
}
Example #12
Source File: ProductPage.js    From ecomloop.github.io with MIT License 4 votes vote down vote up
ProductPage = ({ data }) => {
    const product = data.shopifyProduct
    console.log(product)

    //find posts corresponding to current product
    const productBlogTagMap = {
      "ecommerce-platform-strategy-plan" : "digital commerce",
      "conversion-rate-optimization" : "conversion rate optimization",
      "shopify-help" : "Shopify",
      "gatsbyjs" : "gatsby",
      "paid-search-help" : "search"
    };
    const searchTag = productBlogTagMap[product.handle];
    console.log("******* searchTag = "+searchTag)
    console.log("******* product.handle = "+product.handle)
    const filterdPostEdges = [];
    const filterdProjectEdges = [];
    if(searchTag){
      //Filtering Posts as per the tag
      const postEdges = data.allPosts.edges;      
      postEdges.map((edge)=>{
        if(edge.node.frontmatter.tags) {
          edge.node.frontmatter.tags.map((tag)=>{
            if(tag && tag.toLowerCase().includes(searchTag.toLowerCase()))
              {
                filterdPostEdges.push(edge.node)
                return;
              }
          });        
        }
      });
      //console.log(filterdPostEdges)
      //Filtering Projects as per the tag
      const projectEdges = data.allProjects.edges;      
      projectEdges.map((edge)=>{
        if(edge.node.frontmatter.tags) {
          edge.node.frontmatter.tags.map((tag)=>{
            if(tag && tag.toLowerCase().includes(searchTag.toLowerCase()))
              {
                filterdProjectEdges.push(edge.node)
                return;
              }
          });        
        }
      });
      console.log(filterdProjectEdges)
    }

    const thisEdge = data.allServices.edges.find(edge => edge.node.id === product.id);
  
    const solutionEdge = data.allSolutions.edges.find(edge => edge.node.fileAbsolutePath.indexOf(product.handle)>=0)
    let solutionMetaTitle = "";
    let solutionMetaDescription = "";
    let solutionContent = null;
    if(solutionEdge){
      solutionMetaTitle = solutionEdge.node.frontmatter.meta_title;
      solutionMetaDescription = solutionEdge.node.frontmatter.meta_description;
      solutionContent = solutionEdge.node.html;
    }
    //console.log("**** solutionEdge = ",solutionEdge)

    return (
        <Layout title={product.title || false} description={solutionMetaDescription || product.description || false} meta={{title: solutionMetaTitle}}>
            <article
                className="SingleService section light"
                itemScope
                itemType="http://schema.org/BlogPosting"
            >
                <div className="container skinny">
                    <Link className="SingleService--BackButton" to="/solutions/">
                        <ChevronLeft /> BACK
                    </Link>
                    <div className="SingleService--Content relative">

                        <ProductGalleryThumbnails productimages={product.images} />

                        {product.title && (
                            <h1 className="SingleService--Title" itemProp="title">
                                {product.title}
                            </h1>
                        )}

                        <div className="SingleService--InnerContent">
                            <ProductForm product={product} />
                            <Tabs>
                              <TabList>
                                <Tab>Description</Tab>
                                {solutionContent &&
                                  <Tab>Guide</Tab>
                                }
                                <Tab>Blog Posts</Tab>
                                <Tab>Projects</Tab>
                              </TabList>
                              <TabPanel>
                                <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} />
                              </TabPanel>
                              {solutionContent &&
                                <TabPanel>
                                  <div dangerouslySetInnerHTML={{__html:solutionContent}} />                                  
                                </TabPanel>
                              }
                              <TabPanel>
                                {!!filterdPostEdges.length && (
                                  <div className="ProductPostSection--Grid" style={{gridGap: "1rem"}}>
                                    {filterdPostEdges.map((post, index) => (
                                      <PostCard key={index}
                                        featuredImage={`../${post.frontmatter.featuredImage}`}
                                        localImage={post.frontmatter.localImage}
                                        title={post.frontmatter.title}
                                        excerpt={post.excerpt}
                                        date={post.frontmatter.date}
                                        slug={post.fields.slug}
                                      />
                                    ))}
                                  </div>
                                )}
                              </TabPanel>
                              <TabPanel>
                                {!!filterdProjectEdges.length && (
                                  <div className="ProductPostSection--Grid" style={{gridGap: "1rem"}}>
                                    {filterdProjectEdges.map((post, index) => (
                                      <PostCard key={index}
                                        featuredImage={`../${post.frontmatter.featuredImage}`}
                                        localImage={post.frontmatter.localImage}
                                        title={post.frontmatter.title}
                                        excerpt={post.frontmatter.excerpt}
                                        date={post.frontmatter.date}
                                        slug={post.fields.slug}
                                      />
                                    ))}
                                  </div>
                                )}
                              </TabPanel>
                            </Tabs>
                        </div>

                        <div className="SingleService--Pagination">
                            {thisEdge && thisEdge.previous && thisEdge.previous.handle && (
                                <Link
                                    className="SingleService--Pagination--Link prev"
                                    to={`/solution/${thisEdge.previous.handle}`}
                                >
                                    Previous Service
                                </Link>
                            )}
                            {thisEdge && thisEdge.next && thisEdge.next.handle && (
                                <Link
                                    className="SingleService--Pagination--Link next"
                                    to={`/solution/${thisEdge.next.handle}`}
                                >
                                    Next Service
                                </Link>
                            )}
                        </div>
                    </div>
                </div>
            </article>
        </Layout >
    )
}
Example #13
Source File: singleitem.jsx    From emprezzo with MIT License 4 votes vote down vote up
SingleItem = ({ data, pageContext, location }) => {
  const { next, prev } = pageContext;
  let {
    AlexaURL,
    InstaFollowers,
    InstaFollowing,
    GlobalRank,
    LocalRank,
    TOS,
    ProfileImage,
    emprezzoID,
    UserName,
    category,
    tags,
    FBLikes,
    PinFollowers,
    PinFollowing,
    TTFollowers,
    TTFollowing,
    TTLikes,
    TwitterFollowers,
    TwitterFollowing,
    YTSubs,
    name,
    about,
    signup_promos,
    AmazonPay,
    ApplePay,
    ShopifyPay,
    PaypalShopID,
  } = data.mysqlMainView;
  if (AlexaURL.slice(-1) != '/') AlexaURL += "/";

  const clearbitLogoURL = getClearbitLogoURL(AlexaURL);

  const allMysqlMainViewEdges = data.allMysqlMainView.edges;
  const rowallMysqlCrunchBaseViewEdges = data.allMysqlCrunchBaseView ? data.allMysqlCrunchBaseView.edges : [];
  const rowallMysqlPayNShipEdges = data.allMysqlPayNShip ? data.allMysqlPayNShip.edges : [];
  const rowSocialIDViewEdges = data.allMysqlSocialIdView.edges;
  const filteredSocialIDView = _.filter(rowSocialIDViewEdges, ({ node }) => node.Instagram == UserName);
  const { Facebook, Instagram, Pinterest, TikTok, Twitter, URL, YouTube } = filteredSocialIDView.length > 0 ? filteredSocialIDView[0].node : [];

  //Creating Social IDs Data to pass to header for displaying
  let socialDetails = {
    InstagramLink: Instagram ? 'https://www.instagram.com/' + Instagram : null,
    FacebookLink: Facebook ? 'https://www.facebook.com/' + Facebook : null,
    PinterestLink: Pinterest ? 'https://www.pinterest.com/' + Pinterest : null,
    TikTokLink: TikTok ? 'https://www.tiktok.com/' + TikTok : null,
    TwitterLink: Twitter ? 'https://www.twitter.com/' + Twitter : null,
    YouTubeLink: YouTube ? 'https://www.youtube.com/c/' + YouTube : null,
  };

  const maxVisibleItems = 10;
  const [visibleItems, setVisibleItems] = React.useState(maxVisibleItems);
  const [showMore, setShowMore] = React.useState(true);
  const increaseLimit = () => {
    setVisibleItems(visibleItems + maxVisibleItems);
  }

  const [sortBy, setSortBy] = React.useState("UpdateDate");
  const [sortOrder, setSortOrder] = React.useState("DESC");
  const changeSortBy = (e) => { setSortBy(e.target.value) }
  const changeSortOrder = (e) => { setSortOrder((sortOrder == "DESC") ? "ASC" : "DESC") }

  const isMobile = useMediaQuery({ query: '(max-width: 600px)' });
  //console.log("****** isMobile = " + isMobile)

  const removeTimeFromDate = (datawithtime) => {
    return _.map(datawithtime, el => {
      let datetime = _.split(el.trim(), ' ');
      return datetime && datetime.length > 0 ? datetime[0] : el;
    });
  }

  //converting comma seperated tags to tags map
  const tagsList = tags ? tags.split(',') : [];

  //Extracting Posts from MySQL Data
  const maxPosts = 3;
  const rowDataViewEdges = data.allMysqlDataView.edges;
  //filtering top 3 for current instagram id
  const filteredDataView = _.filter(rowDataViewEdges, ({ node }) => node.AlexaURL == AlexaURL || node.AlexaURL == AlexaURL.substring(0, AlexaURL.length - 1));
  const listPostEdges = _.slice(filteredDataView, 0, maxPosts);
  let firstRowDataView = listPostEdges && listPostEdges.length ? listPostEdges[0] : [];
  //adding profileimage to firstrow
  var crunchBaseData = _.filter(rowallMysqlCrunchBaseViewEdges, ({ node }) => node.URL == AlexaURL || node.URL == AlexaURL.substring(0, AlexaURL.length - 1))
  var crunchBaseRow = crunchBaseData.length > 0 ? crunchBaseData[0] : [];
  //adding PayNShip data to firstrow
  var payNShipData = _.filter(rowallMysqlPayNShipEdges, ({ node }) => node.URL == AlexaURL || node.URL == AlexaURL.substring(0, AlexaURL.length - 1))
  var payNShipRow = payNShipData.length > 0 ? payNShipData[0] : [];
  firstRowDataView = {
    node: {
      ...firstRowDataView.node,
      ...crunchBaseRow.node,
      ...payNShipRow.node,
    }
  }

  //Now filtering instagram posts if the image or caption is not present
  const listInstaPostEdges = _.filter(listPostEdges, ({ node }) => node.PhotoLink);

  //Creating a new dataset with original nodes and required columns from DataView
  let combinedMainDataEdges = [];
  allMysqlMainViewEdges.map((edge) => {
    let newNode = {
      name: edge.node.name,
      slug: edge.node.emprezzoID,
      ...edge.node
    }
    const inputID = edge.node.AlexaURL;
    var filteredDataViewEdge = _.filter(rowDataViewEdges, ({ node }) => (node.AlexaURL == inputID))
    if (filteredDataViewEdge.length > 0) {
      newNode = {
        ...newNode,
        ...filteredDataViewEdge[0].node
      }
    }
    combinedMainDataEdges.push(newNode);
  })
  const relatedShops = getRelatedShops(data.mysqlMainView, combinedMainDataEdges);
  const combinedRelatedShops = [];
  relatedShops.map(({ shop, points }) => {
    //filter for profileimage
    var crunchBaseData = _.filter(rowallMysqlCrunchBaseViewEdges, ({ node }) => node.URL == AlexaURL)
    var crunchBaseRow = crunchBaseData.length > 0 ? crunchBaseData[0] : [];
    let newNode = {
      points,
      shop: {
        ...shop,
        ...crunchBaseRow.node,
      }
    }
    combinedRelatedShops.push(newNode);
  })

  //Extracting Products from MySQL Data
  const maxProducts = 10;
  const rowShopifyViewEdges = data.allMysqlShopifyView.edges;
  //filtering top 3 for current AlexaURL
  const filteredProductView = _.filter(rowShopifyViewEdges, ({ node }) =>
    node.AlexaURL == AlexaURL &&
    node.Price > 5 &&
    node.Title.toLowerCase().indexOf('gift') < 0 &&
    node.Title.toLowerCase().indexOf('test') < 0 &&
    node.Title.toLowerCase().indexOf('shipping') < 0
  );
  const listProductEdges = _.slice(filteredProductView, 0, maxProducts);
  //console.log("*****++listProductEdges+++********")
  //console.log(listProductEdges)

  const rowallMysqlShopifyProductsAllEdges = data.allMysqlShopifyProductsAll ? data.allMysqlShopifyProductsAll.edges : [];

  //Extracting bestseller products
  const filteredShopifyBestSellers = _.sortBy(_.filter(rowallMysqlShopifyProductsAllEdges, ({ node }) => node.Position != null && node.Title.toLowerCase().indexOf("gift card") < 0 && node.Title.toLowerCase().indexOf("shipping") < 0 && node.Title.toLowerCase().indexOf("insurance") < 0), ({ node }) => node.Position);
  const listShopifyBestSellersEdges = _.slice(filteredShopifyBestSellers, 0, maxProducts);

  //Extracting classic products
  let filteredShopifyClassicProducts = _.sortBy(_.filter(rowallMysqlShopifyProductsAllEdges, ({ node }) => node.Title.toLowerCase().indexOf("gift card") < 0 && node.Title.toLowerCase().indexOf("shipping") < 0 && node.Title.toLowerCase().indexOf("insurance") < 0), ({ node }) => node.PublishedDate);
  //Now applying sorting
  if (sortBy != "UpdateDate") {
    filteredShopifyClassicProducts = _.sortBy(filteredShopifyClassicProducts, ({ node }) => sortOrder != "DESC" ? node[sortBy] : -node[sortBy])
  } else {
    filteredShopifyClassicProducts = _.sortBy(filteredShopifyClassicProducts, ({ node }) => sortOrder != "DESC" ? new Date(node[sortBy]) : -(new Date(node[sortBy])))
  }
  //Now limiting the items as per limit
  const visibleShopifyClassicProductsEdges = _.slice(filteredShopifyClassicProducts, 0, visibleItems);
  if (showMore && visibleShopifyClassicProductsEdges.length >= filteredShopifyClassicProducts.length) setShowMore(false);
  //Now checking if 'Position' and 'DiscountPct' data is present in the list, if yes then only show 'Position' and 'DiscountPct' in the sorting options
  const isPositionPresent = _.filter(visibleShopifyClassicProductsEdges, ({ node }) => node.Position != null).length > 0;

  //Extracting new products
  const filteredShopifyNewProducts = _.sortBy(_.filter(rowallMysqlShopifyProductsAllEdges, ({ node }) => node.Title.toLowerCase().indexOf("gift card") < 0 && node.Title.toLowerCase().indexOf("shipping") < 0 && node.Title.toLowerCase().indexOf("insurance") < 0), ({ node }) => -node.PublishedDate);
  const listShopifyNewProductsEdges = _.slice(filteredShopifyNewProducts, 0, maxProducts);

  //Extracting sale products
  const filteredShopifySaleProducts = _.sortBy(_.filter(rowallMysqlShopifyProductsAllEdges, ({ node }) => node.DiscountPct > 0.10 && node.DiscountPct < 1 && node.Title.toLowerCase().indexOf("gift card") < 0 && node.Title.toLowerCase().indexOf("shipping") < 0 && node.Title.toLowerCase().indexOf("insurance") < 0), ({ node }) => -node.DiscountPct);
  const listShopifySaleProducts = _.slice(filteredShopifySaleProducts, 0, maxProducts);

  //Extracting gift cards
  const filteredShopifyGiftCards = _.filter(rowallMysqlShopifyProductsAllEdges, ({ node }) => node.Title.toLowerCase().indexOf("gift card") >= 0);
  const listShopifyGiftCards = _.slice(filteredShopifyGiftCards, 0, maxProducts);

  //Extracting emails
  const maxEmails = 3;
  const rowallMysqlEmailsEdges = data.allMysqlEmails ? data.allMysqlEmails.edges : [];
  const filteredEmails = _.filter(rowallMysqlEmailsEdges, ({ node }) => AlexaURL.toLowerCase().indexOf(node.domain.toLowerCase()) >= 0);
  const listEmails = _.slice(filteredEmails, 0, maxEmails);
  //console.log("***** listEmails", AlexaURL.toLowerCase(), listEmails)

  //Generating the data for chart
  let chartRankData = null;
  let chartTOSData = null;
  let globalRank_Dates = _.split(data.mysqlMainView.GlobalRank_Dates, ',') || [];
  let globalRank_Dates_NoTime = removeTimeFromDate(globalRank_Dates)

  //Rank data
  if (data.mysqlMainView.GlobalRank_List) {
    chartRankData = {
      labels: globalRank_Dates_NoTime,
      datasets: [
        {
          name: 'alexa global rank',
          type: 'line',
          values: _.split(data.mysqlMainView.GlobalRank_List, ','),
        },
      ],
      yMarkers: [
        {
          label: 'Low rank is better',
          value: '01',
        },
      ],

    };
  }
  //TOS data
  if (data.mysqlMainView.TOS_List) {
    chartTOSData = {
      labels: globalRank_Dates_NoTime,
      datasets: [
        {
          name: 'Time on site',
          type: 'line',
          values: _.split(data.mysqlMainView.TOS_List, ','),
        },
      ],
    };
  }

  //Social chart data
  const chartSocialFollowerLabels = [];
  const chartSocialFollowerValues = [];
  if (InstaFollowers && InstaFollowers != 0) {
    chartSocialFollowerLabels.push('Instagram');
    chartSocialFollowerValues.push(InstaFollowers);
  }
  if (FBLikes && FBLikes != 0) {
    chartSocialFollowerLabels.push('Facebook');
    chartSocialFollowerValues.push(FBLikes);
  }
  if (TwitterFollowers && TwitterFollowers != 0) {
    chartSocialFollowerLabels.push('Twitter');
    chartSocialFollowerValues.push(TwitterFollowers);
  }
  if (YTSubs && YTSubs != 0) {
    chartSocialFollowerLabels.push('Youtube');
    chartSocialFollowerValues.push(YTSubs);
  }
  if (PinFollowers && PinFollowers != 0) {
    chartSocialFollowerLabels.push('Pinterest');
    chartSocialFollowerValues.push(PinFollowers);
  }
  if (TTFollowers && TTFollowers != 0) {
    chartSocialFollowerLabels.push('TikTok');
    chartSocialFollowerValues.push(TTFollowers);
  }

  const chartSocialFollowingValues = [];
  if (InstaFollowing && InstaFollowing != 0) {
    chartSocialFollowingValues.push(InstaFollowing);
  }
  if (TwitterFollowing && TwitterFollowing != 0) {
    chartSocialFollowingValues.push(TwitterFollowing);
  }
  if (PinFollowing && PinFollowing != 0) {
    chartSocialFollowingValues.push(PinFollowing);
  }
  if (TTFollowing && TTFollowing != 0) {
    chartSocialFollowingValues.push(TTFollowing);
  }

  const chartSocialData = {
    labels: chartSocialFollowerLabels,
    datasets: [
      {
        name: 'followers',
        values: chartSocialFollowerValues,
      },

    ],
  };

  //Extracting social history
  const rowSocialHistoryEdges = data.allMysqlSocialHistory.edges;
  //filtering top 3 for current AlexaURL
  const filteredSocialHistory = _.filter(
    rowSocialHistoryEdges,
    ({ node }) => node.Instagram == UserName
  );

  let facebookChartData = null;
  let instagramChartData = null;
  let pinterestChartData = null;
  let tiktokChartData = null;
  let twitterChartData = null;
  let youtubeChartData = null;
  if (filteredSocialHistory && filteredSocialHistory.length > 0) {
    if (filteredSocialHistory[0].node.FacebookLikesList) {
      facebookChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.FacebookCreateDates, ',')),
        datasets: [
          {
            name: 'Facebook',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.FacebookLikesList,
              ','
            ),
          },
        ],
      };
    }
    if (filteredSocialHistory[0].node.InstagramFollowersList) {
      instagramChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.InstagramCreateDates, ',')),
        datasets: [
          {
            name: 'Instagram',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.InstagramFollowersList,
              ','
            ),
          },
        ],
      };
    }
    if (filteredSocialHistory[0].node.PinterestFollowersList) {
      pinterestChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.PinterestCreateDates, ',')),
        datasets: [
          {
            name: 'Pinterest',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.PinterestFollowersList,
              ','
            ),
          },
        ],
      };
    }
    if ((filteredSocialHistory[0].node.TiktokFollowersList) && (filteredSocialHistory[0].node.TiktokFollowersList) != '#') {
      tiktokChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.TiktokCreateDates, ',')),
        datasets: [
          {
            name: 'Tiktok',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.TiktokFollowersList,
              ','
            ),
          },
        ],
      };
    }
    if (filteredSocialHistory[0].node.TwitterFollowersList) {
      twitterChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.TwitterCreateDates, ',')),
        datasets: [
          {
            name: 'Twitter',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.TwitterFollowersList,
              ','
            ),
          },
        ],
      };
    }
    if (filteredSocialHistory[0].node.YoutubeSubscribersList) {
      youtubeChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.YoutubeCreateDates, ',')),
        datasets: [
          {
            name: 'Youtube',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.YoutubeSubscribersList,
              ','
            ),
          },
        ],
      };
    }
  }

  /*
  let allSocialChartsData = null;
  if (filteredSocialHistory && filteredSocialHistory.length > 0) {
    let socialLabels = [];
    let socialDataSet = [];
    if (filteredSocialHistory[0].node.FacebookLikesList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.FacebookCreateDates, ',')))
      socialDataSet.push({
        name: 'Facebook',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.FacebookLikesList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }

    if (filteredSocialHistory[0].node.InstagramFollowersList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.InstagramCreateDates, ',')))
      socialDataSet.push({
        name: 'Instagram',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.InstagramFollowersList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }
    if (filteredSocialHistory[0].node.PinterestFollowersList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.PinterestCreateDates, ',')))
      socialDataSet.push({
        name: 'Pinterest',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.PinterestFollowersList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }
    if (filteredSocialHistory[0].node.TiktokFollowersList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.TiktokCreateDates, ',')))
      socialDataSet.push({
        name: 'Tiktok',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.TiktokFollowersList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }
    if (filteredSocialHistory[0].node.TwitterFollowersList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.TwitterCreateDates, ',')))
      socialDataSet.push({
        name: 'Twitter',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.TwitterFollowersList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }
    if (filteredSocialHistory[0].node.YoutubeSubscribersList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.YoutubeCreateDates, ',')))
      socialDataSet.push({
        name: 'Youtube',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.YoutubeSubscribersList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }
  }
  */

  const rowShopifyProductSummary = data.mysqlShopifyProductSummary || [];
  let productSummary_Dates = _.split(rowShopifyProductSummary.DateListActive, ',') || [];
  let productSummary_Dates_NoTime = _.map(productSummary_Dates, el => {
    let datetime = _.split(el.trim(), ' ');
    return datetime && datetime.length > 0 ? datetime[0] : el;
  });

  let subtitle = '';
  let FreeShipText = '';

  const get100Words = text => {
    let calculatedText = _.join(_.split(text, ' ', 100), ' ');
    return calculatedText;
  };

  const renderProduct = (node, key) => {
    return (
      <ProductCategoryItem
        key={key}
        cover={getProductImage(node)}
        path={`/shops/${node.emprezzoID}/`}
        vendorname={node.VendorName}
        title={node.Title}
        price={node.Price}
        node={node}
      />
    );
  };

  const renderProductList = (edges, key) => {
    const limitedEdges = edges //_.slice(edges, 0, maxProducts)
    return (
      <>
        {/* below renderer for desktop version */}
        { !isMobile && limitedEdges && limitedEdges.length > 0 && (
          <CategoryWrapper>
            {limitedEdges.map(({ node }, index) => {
              return renderProduct(node, key + "-" + index)
            })}
          </CategoryWrapper>
        )}
        {/* below renderer for mobile version */}
        { isMobile && limitedEdges && limitedEdges.length > 0 && (
          <Carousel
            showThumbs={false}
            infiniteLoop
            showIndicators={false}
            selectedItem={1}
            showArrows={true}
            showStatus={false}
          >
            {limitedEdges.map(({ node }, index) => {
              return renderProduct(node, key + "-" + index);
            })}
          </Carousel>
        )}
      </>
    );
  }

  const renderPost = (node, ismobile) => {
    return (
      <ViewCard
        key={node.PhotoLink}
        style={{ padding: ismobile && '15px', width: !ismobile && '30%' }}
      >

        <ViewImage style={{ height: '200px' }}>
          <a href={node.ShortCodeURL} target="_blank">
            {node.mysqlImage && (
              <Image
                fluid={node.mysqlImage.childImageSharp.fluid}
                alt={node.Caption && node.Caption.substring(0, 140) + '...'}
                style={{ height: '200px', width: '100%', margin: 'auto' }}
              />
            )}
            {!node.mysqlImage && (
              <img
                src={node.PhotoLink}
                alt={node.Caption && node.Caption.substring(0, 140) + '...'}
                style={{
                  objectFit: 'cover',
                  height: '200px',
                  width: '100%',
                  margin: 'auto',
                }}
              />
            )}
          </a>
        </ViewImage>

        <ViewInfo className="info" style={{ color: ismobile && 'white' }}>
          {node.Caption && node.Caption.substring(0, 140) + '...'}
        </ViewInfo>
      </ViewCard>
    );
  };

  const defaultImageOnError = (e) => { e.target.src = "/logo/logo.png" }

  const renderProfilePicURL = (node, name) => {
    if (node.mysqlImages && node.mysqlImages.length > 0) {
      return (
        <Image fluid={node.mysqlImages[0].childImageSharp.fluid} style={{ width: '100px', height: '100px' }} title={name} alt={name} />
      );
    } else if (ProfileImage) {
      return (
        <img src={ProfileImage} className="profileimage" onError={defaultImageOnError} style={{ width: '100px', height: '100px', 'border-radius': '100%', margin: '3%' }} title={name} alt={name} />
      );
    } else if (node.ProfilePicURL) {
      return (
        <img src={node.ProfilePicURL} className="profileimage" onError={defaultImageOnError} style={{ width: '100px', height: '100px', 'border-radius': '100%', margin: '3%' }} title={name} alt={name} />
      );
    } else if (node.profile_image_url) {
      return (
        <img src={node.profile_image_url} className="profileimage" onError={defaultImageOnError} style={{ width: '100px', height: '100px', 'border-radius': '100%', margin: '3%' }} title={name} alt={name} />
      );
    } else {
      return (
        <img src={"/logo/logo.png"} className="profileimage" style={{ width: '100px', height: '100px' }} title={name} alt={name} />
      );
    }
  }

  const getProductImage = (node) => {
    let productImage = node.VariantImageURL;
    if (!productImage) productImage = node.ImageURL;
    return productImage;
  }

  return (
    <Layout>
      <SEO
        title={`Discover ${name}: Best Sellers, Social Media, & Stats `}
        description={`${name} is a ${category} brand that sells products related to ${tags} direct to consumers on its website. Prices range from ${rowShopifyProductSummary.PriceMin} - ${rowShopifyProductSummary.PriceMax} with an average price of ${rowShopifyProductSummary.PriceAvg}. See product data about ${name} at emprezzo. `}
        pathname={AlexaURL}
      />
      <Header
        description={`${category}: ${tags}`} children={subtitle} likeEnabled={{ storeName: name, storeURL: AlexaURL, storeProfileImage: clearbitLogoURL || ProfileImage || (firstRowDataView && firstRowDataView.node.ProfilePicURL) }} />
      <Container>
        <div className="profileimage" style={{ display: 'flex' }}>
          {/*firstRowDataView && renderProfilePicURL(firstRowDataView.node, name)*/}
          <div style={{ paddingLeft: '5px' }}>

            <Title>
              <AddShopToCartButton
                details={{
                  storeName: name,
                  storeURL: AlexaURL,
                  storeProfileImage: clearbitLogoURL || ProfileImage || (firstRowDataView && firstRowDataView.node.ProfilePicURL),
                  emprezzoID: emprezzoID,
                  description: about,
                }}
              />
              {name}
            </Title>
            <Subtitle><b>{category}</b> {tags}<br /></Subtitle>
            <Stat>{rowShopifyProductSummary.PriceMin &&
              rowShopifyProductSummary.PriceMax && (
                <span>
                  ${rowShopifyProductSummary.PriceMin}-${rowShopifyProductSummary.PriceMax} (${rowShopifyProductSummary.PriceAvg} avg)</span>
              )}
              &nbsp;
              {PaypalShopID && PaypalShopID != '#' &&
                <span style={{ paddingRight: "0.25rem" }}><FaPaypal size="16" color="#666" /></span>
              }
              {AmazonPay == '1' &&
                <span style={{ paddingRight: "0.25rem" }}><FaAmazon size="16" color="#666" /></span>
              }
              {ShopifyPay && ShopifyPay == '1' &&
                <span style={{ paddingRight: "0.25rem" }}><FaShopify size="16" color="#666" /></span>
              }
              {ApplePay && ApplePay == '1' &&
                <span style={{ paddingRight: "0.25rem" }}><FaApple size="16" color="#666" /></span>
              }
            </Stat>



            <Stat>


            </Stat>


            <Stat>

              {firstRowDataView &&
                <div>

                  {firstRowDataView.node.FreeShipMin != null && firstRowDataView.node.FreeShipMin != 0 &&
                    <span><FaTruck size="16" color="#666" class="icon" title="free shipping info" /> Free shipping ${firstRowDataView.node.FreeShipMin}+ &nbsp;</span>
                  }
                  {firstRowDataView.node.FreeShipMin == 0 &&
                    <span><FaTruck size="16" color="#666" class="icon" title="free shipping on most orders" /> Most orders ship free! &nbsp;</span>
                  }
                  {firstRowDataView.node.BaseShipRate > 1 &&
                    <span><FaBoxOpen size="16" color="#666" class="icon" title="shipping rates" /> Rates ${firstRowDataView.node.BaseShipRate}+ &nbsp; </span>
                  }
                  <br />
                  {firstRowDataView.node.ReturnDays != null && firstRowDataView.node.ReturnDays != "0" &&
                    <span><FaUndoAlt size="16" color="#666" /> {firstRowDataView.node.ReturnDays} day returns</span>
                  }
                  {firstRowDataView.node.ReturnShipFree != "." && firstRowDataView.node.ReturnShipFree == "Yes" &&
                    <span><br /><FaRegStar size="16" color="#666" /> Returns ship free!</span>
                  }

                </div>
              }

            </Stat>
            <br />








          </div>
        </div>





        <Tabs>
          <TabList>
            <Tab style={TabStyle}>Shop {name}</Tab>
            {/* {listShopifyBestSellersEdges &&
              listShopifyBestSellersEdges.length > 0 && (
                <Tab style={TabStyle}>Best sellers</Tab>
              )}
            {listShopifyNewProductsEdges &&
              listShopifyNewProductsEdges.length > 0 && (
                <Tab style={TabStyle}>New products</Tab>
              )}
            {listShopifySaleProducts &&
              listShopifySaleProducts.length > 0 && (
                <Tab style={TabStyle}>Sale</Tab>
              )}
            {listShopifyGiftCards &&
              listShopifyGiftCards.length > 0 && (
                <Tab style={TabStyle}>Gift Cards</Tab>
              )} */}
          </TabList>

          <TabPanel>
            <AlgoliaProductList
              defaultFilter={`emprezzoID:"${emprezzoID}"`}
              hideLeftPanel={true}
              facetsToShow={'onsale,giftcard'}
              showSearchBox={false}
              showClearFilter={false}
              hideCTAButton={true} f
              enableCart={true}
              currentShop={{ name: name, link: AlexaURL }}
              location={location}
              noResultMessage={`Shop direct at <a href=${AlexaURL} target="_blank">${name}</a>`}
            />
          </TabPanel>

          {/* {listShopifyBestSellersEdges && listShopifyBestSellersEdges.length > 0 && (
            <TabPanel>
              {renderProductList(listShopifyBestSellersEdges, 'listShopifyBestSellersEdges')}
            </TabPanel>
          )}
          {listShopifyNewProductsEdges && listShopifyNewProductsEdges.length > 0 && (
            <TabPanel>
              {renderProductList(listShopifyNewProductsEdges, 'listShopifyNewProductsEdges')}
            </TabPanel>
          )}

          {listShopifySaleProducts && listShopifySaleProducts.length > 0 && (
            <TabPanel>
              {renderProductList(listShopifySaleProducts, 'listShopifySaleProducts')}
            </TabPanel>
          )}
          {listShopifyGiftCards &&
            listShopifyGiftCards.length > 0 && (
              <TabPanel>

                <PostSectionGrid>
                  {listShopifyGiftCards.map(({ node, index }) => {
                    return renderProduct(node, 'Giftcard-' + index);
                  })}
                </PostSectionGrid>
              </TabPanel>
            )} */}
        </Tabs>


        <Tabs>
          <TabList>
            <Tab style={TabStyle}>Recent emails</Tab>
            {/* {listShopifyBestSellersEdges &&
              listShopifyBestSellersEdges.length > 0 && (
                <Tab style={TabStyle}>Best sellers</Tab>
              )}
            {listShopifyNewProductsEdges &&
              listShopifyNewProductsEdges.length > 0 && (
                <Tab style={TabStyle}>New products</Tab>
              )}
            {listShopifySaleProducts &&
              listShopifySaleProducts.length > 0 && (
                <Tab style={TabStyle}>Sale</Tab>
              )}
            {listShopifyGiftCards &&
              listShopifyGiftCards.length > 0 && (
                <Tab style={TabStyle}>Gift Cards</Tab>
              )} */}
          </TabList>





          <TabPanel>

            <EmailGrid>
              {listEmails && listEmails.map((emailNode) => (
                <EmailsItem email={emailNode} emprezzoID={emprezzoID} />
              ))}
            </EmailGrid>
          </TabPanel>


        </Tabs>
        <br />

        {listInstaPostEdges && listInstaPostEdges.length > 0 && (
          <h3>See recent posts from @{firstRowDataView.node.UserName}</h3>
        )}




        {/* Show carousel for mobile version */}
        {isMobile && (
          <Carousel
            showThumbs={false}
            infiniteLoop
            showIndicators={false}
            selectedItem={1}
            showArrows={true}
            showStatus={false}
          >
            {listInstaPostEdges &&
              listInstaPostEdges.map(({ node }) => {
                return renderPost(node, true);
              })}
          </Carousel>
        )}
        {/* Show carousel for mobile version */}
        {!isMobile && (
          <ViewContainer>
            {listInstaPostEdges &&
              listInstaPostEdges.map(({ node }) => {
                return renderPost(node);
              })}
          </ViewContainer>
        )}

        <br />

      
        <h3>About {name}</h3>
        <b>{name}</b> produces and sells {category} products {tags} and more. The company sells direct-to-consumer on its website.

      {rowShopifyProductSummary.PriceMin &&
          rowShopifyProductSummary.PriceMax && (
            <span>
              &nbsp;Prices range from ${rowShopifyProductSummary.PriceMin} - ${rowShopifyProductSummary.PriceMax} with an average price of ${rowShopifyProductSummary.PriceAvg}.</span>
          )}
        {socialDetails && (
          <span>
            &nbsp;The {name} brand can be found on
            {socialDetails.InstagramLink && (
              " Instagram, "
            )}
            {socialDetails.FacebookLink && (
              " Facebook, "
            )}
            {socialDetails.PinterestLink && (
              " Pinterest, "
            )}
            {socialDetails.TikTok && (
              " TikTok, "
            )}
            {socialDetails.TwitterLink && (
              " Twitter, "
            )}
            {socialDetails.YouTubeLink && (
              " Youtube, "
            )}
               and here on Emprezzo.&nbsp;
          </span>
        )}
        <div class="shopButtons" style={{ 'margin-top': '1em' }}>
          <a href={AlexaURL} className="button" target="_blank">
            shop {name}
          </a>{' '}
          <a href="/randomshop" className="button buttonalt">
            Discover another shop
      </a>
        </div>
        <div>
          <br />
          {!!combinedRelatedShops.length && (
            <>
              <h3>Discover shops similar to {name}</h3>
              <PostSectionGrid>
                {combinedRelatedShops && combinedRelatedShops.map(({ shop }, index) => (
                  <span key={index}>
                    <PostSectionImage>
                      <Link key={index} to={`/shops/${shop.emprezzoID}/`}>
                        <img src={getClearbitLogoURL(shop.AlexaURL) || shop.ProfileImage || shop.ProfilePicURL || shop.profile_image_url || "/logo/logo.png"} title={shop.name} alt={shop.name} onError={defaultImageOnError} style={{ height: 'inherit', 'textAlign': 'center', 'borderRadius': '5%' }} />
                      </Link>
                    </PostSectionImage>
                    <PostSectionContent>
                      <Link key={index} to={`/shops/${shop.emprezzoID}/`}>
                        {shop.name && <b>{shop.name}</b>}
                      </Link>

                    </PostSectionContent>
                  </span>
                ))}
              </PostSectionGrid>
            </>
          )}
          <br />
        </div>
        <h3 style={{ 'top-margin': '1rem' }}>{name} data and charts</h3>
        <Tabs>
          <TabList>
            <Tab style={TabStyle}>Fans</Tab>
            <Tab style={TabStyle}>Breakdown</Tab>

            {rowShopifyProductSummary.PriceListActive && (<Tab style={TabStyle}>Prices</Tab>)}
            <Tab style={TabStyle}>Traffic</Tab>
            {chartTOSData && (<Tab style={TabStyle}>Time</Tab>)}


          </TabList>
          <TabPanel>
            <div style={{ flex: '60%' }}>
              <Tabs >
                <TabList>
                  {facebookChartData && <Tab style={TabStyle}>Facebook</Tab>}
                  {instagramChartData && <Tab style={TabStyle}>Instagram</Tab>}
                  {pinterestChartData && <Tab style={TabStyle}>Pinterest</Tab>}
                  {tiktokChartData && <Tab style={TabStyle}>TikTok</Tab>}
                  {twitterChartData && <Tab style={TabStyle}>Twitter</Tab>}
                  {youtubeChartData && <Tab style={TabStyle}>Youtube</Tab>}
                </TabList>
                {facebookChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      colors={['#743ee2']}
                      title="Facebook"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      data={facebookChartData}
                    />
                  </TabPanel>
                )}
                {instagramChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      title="Instagram"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      lineOptions={{ spline: 1 }}
                      data={instagramChartData}
                    />
                  </TabPanel>
                )}
                {pinterestChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      title="Pinterest"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      lineOptions={{ spline: 1 }}
                      data={pinterestChartData}
                    />
                  </TabPanel>
                )}
                {tiktokChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      title="Tiktok"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      lineOptions={{ spline: 1 }}
                      data={tiktokChartData}
                    />
                  </TabPanel>
                )}
                {twitterChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      title="Twitter"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      lineOptions={{ spline: 1 }}
                      data={twitterChartData}
                    />
                  </TabPanel>
                )}
                {youtubeChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      title="Youtube"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      lineOptions={{ spline: 1 }}
                      data={youtubeChartData}
                    />
                  </TabPanel>
                )}
              </Tabs>
            </div>
          </TabPanel>
          <TabPanel>

            <div style={{ flex: '100%' }}>

              {chartSocialData && chartSocialData.labels && chartSocialData.labels.length > 0 && (
                <ReactFrappeChart
                  type="donut"
                  title="Total fans by platform"
                  height={300}
                  data={chartSocialData}
                />
              )}
            </div>
          </TabPanel>

          {rowShopifyProductSummary.PriceListActive && (
            <TabPanel>

              {rowShopifyProductSummary && (
                <ReactFrappeChart
                  title="Product prices by release date"
                  type="axis-mixed"
                  colors={['#743ee2']}
                  height={250}
                  axisOptions={{ xAxisMode: 'tick', xIsSeries: 1 }}
                  lineOptions={{ hideLine: 1 }}
                  tooltipOptions={{
                    formatTooltipX: d => d,
                    formatTooltipY: d => '$ ' + parseFloat(d || 0).toFixed(2),
                  }}
                  data={{
                    labels: _.split(productSummary_Dates_NoTime, ','),
                    datasets: [
                      {
                        name: 'Product prices',
                        type: 'line',
                        values: _.split(
                          rowShopifyProductSummary.PriceListActive,
                          ','
                        ),
                      },
                    ],
                    yMarkers: [
                      {
                        label: 'Avg Price',
                        value: rowShopifyProductSummary.PriceAvg,
                      },
                    ],
                  }}
                />
              )}
            </TabPanel>
          )}
          <TabPanel>
            {chartRankData && (
              <ReactFrappeChart
                title="Alexa traffic rank over time"
                type="axis-mixed"
                colors={['#743ee2']}
                height={250}
                axisOptions={{ xAxisMode: 'tick', xIsSeries: 1 }}
                lineOptions={{ spline: 1 }}
                data={chartRankData}
              />
            )}
          </TabPanel>
          <TabPanel>
            {chartTOSData && (
              <ReactFrappeChart
                type="axis-mixed"
                title="Average time spent on site"
                colors={['#743ee2']}
                height={250}
                axisOptions={{ xAxisMode: 'tick', xIsSeries: 1 }}
                lineOptions={{ spline: 1 }}
                data={chartTOSData}
                tooltipOptions={{
                  formatTooltipX: d => d,
                  formatTooltipY: d => d + " seconds",
                }}
              />
            )}
          </TabPanel>



        </Tabs>




      </Container>
      <SuggestionBar>
        <div style={{ margin: '2rem 2rem 2rem 4rem', 'max-width': '60%' }}>



        </div>

        <div style={{ float: 'right', margin: '2rem', }}>

        </div>
      </SuggestionBar>

    </Layout>
  );
}
Example #14
Source File: App.js    From esri-loader-hooks with MIT License 4 votes vote down vote up
function App() {
  return <div className="container">
    <Tabs>
      <h1>esri-loader-hooks</h1>
      <p>
        Custom React <a href="https://reactjs.org/docs/hooks-intro.html">hooks</a> for using the <a href="https://developers.arcgis.com/javascript/">ArcGIS API for JavaScript</a> with <a href="https://github.com/Esri/esri-loader">esri-loader</a>.
        See the documentation and source on <a href="https://github.com/tomwayson/esri-loader-hooks">github</a>.
      </p>
      <TabList>
        <Tab>Web Map</Tab>
        <Tab>Web Scene</Tab>
        <Tab>Map</Tab>
        <Tab>Scene</Tab>
        <Tab>Events</Tab>
        <Tab>Graphics</Tab>
        <Tab>FeatureTable</Tab>
      </TabList>

      <TabPanel>
<pre><code>{`  const [ref] = useWebMap(id);
  return <div style={{ height: 400 }} ref={ref} />;
`}</code></pre>
        <WebMap id="e691172598f04ea8881cd2a4adaa45ba" />
        <p>
          Based on the{" "}
          <a href="https://developers.arcgis.com/javascript/latest/sample-code/webmap-basic/index.html">
            Load a basic WebMap
          </a>{" "}
          sample.
        </p>
      </TabPanel>
      <TabPanel>
        <pre><code>{`  const [ref] = useWebScene(id);
  return <div style={{ height: 400 }} ref={ref} />;
`}</code></pre>
        <WebScene id="3a9976baef9240ab8645ee25c7e9c096" />
        <p>
          Based on the{" "}
          <a href="https://developers.arcgis.com/javascript/latest/sample-code/webscene-basic/index.html">
            Load a basic WebScene
          </a>{" "}
          sample.
        </p>
      </TabPanel>
      <TabPanel>
        <pre><code>{`  const [ref] = useMap({basemap: "streets"}, {view: {center, zoom}});
  return <div style={{ height: 400 }} ref={ref} />;
`}</code></pre>
        <MapView />
        <p>
          Based on the{" "}
          <a href="https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/index.html">
            Intro to MapView
          </a>{" "}
          sample.
        </p>
      </TabPanel>
      <TabPanel>
        <pre><code>{`  const [ref] = useScene({basemap, ground}, {view: {center, zoom});
  return <div style={{ height: 400 }} ref={ref} />;
`}</code></pre>
        <SceneView />
        <p>
          Based on the{" "}
          <a href="https://developers.arcgis.com/javascript/latest/sample-code/intro-sceneview/index.html">
            Intro to SceneView
          </a>{" "}
          sample.
        </p>
      </TabPanel>
      <TabPanel>
        <pre><code>{`  const [ref, view] = useScene({basemap, ground}, {view: {center, zoom});
  useEvent(view, "click", onClick);
  useWatch(view, 'zoom', onZoomChange);
  return <div style={{ height: 400 }} ref={ref} />;
`}</code></pre>
        <EventsMap />
        <p>
          Based on the{" "}
          <a href="https://developers.arcgis.com/javascript/latest/sample-code/event-explorer/index.html">
            Event explorer / watch properties
          </a>{" "}
          sample.
        </p>
      </TabPanel>
      <TabPanel>
        <pre><code>{`  const [ref, view] = useMap({basemap: "hybrid"}, {view: {center, zoom});
  useGraphics(view, [pointJson, lineJson, polygonJson]);
  return <div style={{ height: 400 }} ref={ref} />;
`}</code></pre>
        <GraphicsMap />
        <p>
          Based on the{" "}
          <a href="https://developers.arcgis.com/javascript/latest/sample-code/intro-graphics/index.html">
            Intro to graphics
          </a>{" "}
          sample.
        </p>
      </TabPanel>
      <TabPanel>
<pre><code>{`  const [ref] = useFeatureTable(layer, { visibleElements: { selectionColumn: false } });
  return <div style={{ height: 600 }} ref={ref} />;
`}</code></pre>
        <FeatureTable
          layer="https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CollegesUniversities/FeatureServer/0"
          tableOptions={{ visibleElements: { selectionColumn: false } }}
        />
        <p>
          Based on the{" "}
          <a href="https://developers.arcgis.com/javascript/latest/sample-code/widgets-featuretable/index.html">
            Use a stand alone FeatureTable
          </a>{" "}
          sample.
        </p>
      </TabPanel>
    </Tabs>
  </div>;
}