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 |
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 |
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 |
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 |
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 |
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 |
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 |
scope = { Tabs, Tab, TabList, TabPanel }
Example #8
Source File: shop.js From muffinsplantshop with BSD Zero Clause License | 5 votes |
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 |
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">×</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 |
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 |
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 |
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 |
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>
)}
{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}+ </span>
}
{firstRowDataView.node.FreeShipMin == 0 &&
<span><FaTruck size="16" color="#666" class="icon" title="free shipping on most orders" /> Most orders ship free! </span>
}
{firstRowDataView.node.BaseShipRate > 1 &&
<span><FaBoxOpen size="16" color="#666" class="icon" title="shipping rates" /> Rates ${firstRowDataView.node.BaseShipRate}+ </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>
Prices range from ${rowShopifyProductSummary.PriceMin} - ${rowShopifyProductSummary.PriceMax} with an average price of ${rowShopifyProductSummary.PriceAvg}.</span>
)}
{socialDetails && (
<span>
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.
</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 |
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>;
}