Hi guys! I have a trouble with loadable content filtering. Could you help me?
Here's a video showing my trouble, and code of the files.
Vid:
import React, { Component,Fragment } from 'react'
import './index.css'
import {Link} from 'react-router-dom'
import gsap from 'gsap'
import ScrollMagic from "../../../scrollMagic";
import { reactTranslateChangeLanguage } from "translate-components";
class PortolioPost extends Component {
constructor(props) {
super(props);
this.state = {
itemId: [],
lang: ''
};
this.portitemTl = new gsap.timeline({paused: true});
}
componentDidMount() {
}
componentDidUpdate() {
this.portitemTl.pause(0);
this.portitemTl.kill();
this.portitemTl.clear();
let trigger = '.postitem';
this.portitemTl
.staggerFrom('.postitem', .3, { backgroundColor: 'transparent', opacity:0, ease: 'Power0.EaseIn'}, .15)
.staggerFrom('.postanim', .5, {y: -180, autoAlpha: 0, opacity: 0, ease: 'Back.EaseIn'}, .25, "-=0.75");
let controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({triggerElement: trigger, triggerHook: .6, reverse: false})
.setTween(this.portitemTl)
.reverse(false)
.addTo(controller);
const postitems = document.querySelectorAll('.postitem');
postitems.forEach(function(item) {
// Select the correct elements within our scope
const heading = item.querySelectorAll('.postanim'),
itemimg = item.querySelectorAll('.itemimg'),
itemhead = item.querySelectorAll('.itemhead'),
itemsubhead = item.querySelectorAll('.itemcat'),
itemlink = item.querySelectorAll('.montelink'),
hovertl = gsap.timeline({paused: true});
hovertl.from(itemimg, .4, {scale: 1.1, ease: 'Power4.easeInOut', yoyo:true})
.from(itemhead, .14, {y: 20, opacity: 0, ease: 'Back.easeIn', yoyo:true},"-=0.4" )
.from(itemsubhead, .24, {y: 5, opacity: 0, ease: 'Back.easeIn', yoyo:true},"-=0.36")
.from(itemlink, .24, {y: 5, opacity: 0, ease: 'Back.easeIn', yoyo:true},"-=0.36");
item.addEventListener("mouseenter", function() {
hovertl.play();
});
item.addEventListener("mouseleave", function() {
hovertl.reverse();
});
});
this.portitemTl.resume();
console.log('Did Update', this);
}
render() {
return (
<Fragment> {
this.props.dataDside.map((item, key) => {
return(
<div className="grid" >
<figure className="postitem">
<div className="postanim">
<Link to={`/${this.state.lang}/portfolio/${item.CURL}`}>
<img className="itemimg" src={`${process.env.REACT_APP_DOMAIN}/${item.thumbnail}`}
alt={item.name}/>
<figcaption className="figcaption">
<h2 className="itemhead">{item.name}</h2>
{
<span className="itemcat">{item.category.name}</span>
}
</figcaption>
</Link>
</div>
<noindex><a href={item.projectlink} className="montelink" rel="nofollow" target="_blank">{item.projectlink}</a></noindex>
</figure>
</div>
)
})
}
</Fragment>
)
}
}
export default PortolioPost
At portfolio page:
import React, { Component, Fragment } from 'react'
import './index.css'
import Helmet from 'react-helmet-async'
import withDsideApi from "../../../HOC/Fetch";
import withLanguage from "../../../HOC/withLanguage";
import CategoryItem from './CategoryItem';
import PortolioPost from '../Header__Post/Portfolio__Post';
import gsap from 'gsap'
import Arrow from '../../Basic/Footer/arrow.svg';
import Ad from '../Main/About__block/chess.png';
import Translate, { reactTranslateChangeLanguage } from "translate-components";
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import Footer from '../../Basic/Footer';
class Portfolio extends Component {
constructor(props) {
super(props)
this.state = {
dataItems: [],
dataItemsStatic: [],
activeFilter: null,
category: null,
}
}
async componentDidMount() {
window.scrollTo(0, 0);
return await fetch(`${process.env.REACT_APP_API}/${this.props.language}/portfolio/getPortfolioItems/`).then((response) => {
return response.json()
}).then((items) => {
this.setState({dataItems: items});
this.setState({dataItemsStatic: items})
})
}
setFilteringCategory = async (selectFilterId, category) => {
await this.setState({
activeFilter: selectFilterId,
category: category
});
await this.getCategoryData();
}
setFilteringCategoryNull = async (selectFilterId, category) => {
await this.setState({
activeFilter: selectFilterId,
category: category
});
await this.getCategoryDataNull();
}
isActiveCategory = (id) => {
return this.state.activeFilter == id
}
getCategoryData = () => {
return fetch(`${process.env.REACT_APP_API}/${this.props.language}/portfolio/getPortfolioItems/${this.state.category.tag}/`).then((response) => {
return response.json()
}).then((items) => {
this.setState({dataItems: items})
})
}
getCategoryDataNull = () => {
return fetch(`${process.env.REACT_APP_API}/${this.props.language}/portfolio/getPortfolioItems/`).then((response) => {
return response.json()
}).then((items) => {
this.setState({dataItems: items})
})
}
componentDidUpdate(){
console.log('LOL', this.state);
}
render() {
return (
<Fragment>
<div>
<section className="portfolio__items-category">
<Helmet>
<title>Dside Portfolio</title>
</Helmet>
<div className="wrapper-row">
<h2><Translate>We'll make it best. They have already tried it.</Translate></h2>
<div className="sorting__items-container">
<div className="sorting__items-left">
<div className="sortby__category">
<ul className="portfolio-category__list">
<li class="portfolio-category__item" onClick={this.setFilteringCategoryNull}><p class=""><Translate>Everything</Translate><sup>({this.state.dataItemsStatic.length})</sup></p></li>
{this.props.dataDside.map((category, index) => {
return (
<CategoryItem
key={index}
{...this.state}
category={category}
isActiveCategory={this.isActiveCategory(index)}
onActiveFilteringCategory={this.setFilteringCategory.bind(this,index, category)}
{...this.props}/>
)
})}
</ul>
</div>
</div>
<div className="sorting__items-right">
<div className="sortby__type">
<div className="portfolio-sort__title"><Translate>Sort by:</Translate></div>
<div className="sorting-portfolio__wrapper">
{/* <div className="portfolio-sorting__date">Date</div> */}
<div className="portfolio-sorting__date"><Translate>Category</Translate></div>
</div>
</div>
</div>
</div>
</div>
<div className="portfolio__items-container">
{this.props.loading ? (
<PortolioPost {...this.props} dataDside={this.state.dataItems} />
) : null}
</div>
<div className="advantages">
<div className="advantage-item right">
<div className="advitem-image-holder small rodrigo">
<img src={Ad} width={460} className="a2"/>
</div>
<div className="advitem-inner right">
<div className="adv-heading a2">Понравились наши работы?</div>
<div className="adv-text a2">Самое время рассчитать приблизительную стоимость Вашего проекта. Для рассчета точной стоимости, пожалуйста, оставьте заявку через форму "Заказать", либо при помощи калькулятора цен.</div>
<div className="adv-btn a2">Рассчитать<img src={Arrow} width={16} alt=""/></div>
</div>
</div>
</div>
</section>
<Footer/>
</div>
</Fragment>
)
}
}
export default withLanguage(withDsideApi(Portfolio, '/portfolio/getAllCategories/', null))
And of "design" page, where it works properly:
import React, {Fragment} from 'react'
import './index.css'
import Translate from "translate-components";
import PortolioPost from "../../../../DynamicContent/Header__Post/Portfolio__Post";
function CaseService(props) {
return(
<Fragment>
<div id='case__wrapper' style={{background: '#fff'}}>
<div className="container__case-studies">
<div className="row">
<div className="case-title">
<h3><Translate>Case Studies</Translate></h3>
</div>
<div className="case-description">
<p><Translate>Evaluate our previous experience in</Translate> <Translate>{props.name}</Translate>. <Translate>Each case in our portfolio perfectly shows the way we work.</Translate></p>
</div>
</div></div>
<div className="case__service">
<section className="portfolio__posts">
<div className="relative__content">
<div className="content__posts">
{props.loading ? (
<PortolioPost {...props} />
) : null}
</div></div></section>
</div>
</div>
</Fragment>
)
}
export default CaseService;
The main problem is that I don't understand why it works improperly ?
