Block not updating on page change

Plone Support Customizing Plone
, , ,
1

I have a block that creates cards to show news, for that, it uses all events from a selected path. I get the events with the redux searchContent function. On my website, I use the same block but with different paths to get different events in two places. The first block is on the home page, and the second is on a news page. The problem I have is that if I switch from the home page to the news page, the events won't change it just shows the same events I had on the home page. If I first go to another page, then on the news page, it updates the events. I think the problem here is that the URL is not "replaced", it just adds the /news. Has anyone an idea how to force the update on page change?

const getNewsContent = (array = []) =>
  array.map((obj, item) => {
    obj[0] = item;
    return obj;
  }, {}
);

const NewsBoxView = ({ data }) => {
  const dispatch = useDispatch();
  const news = useSelector((state) => getNewsContent(state.search.subrequests.content?.items, ));
  const content = useSelector((state) => state.workflow.transition);

  var contentUrl = data.newsurl;
  var results = [];

  useEffect(() => {
      dispatch(
        searchContent(
          contentUrl,
          {
            portal_type: ['Event'],
            fullobjects: true,
            b_size: 1000,
            sort_on: "start",
            sort_order: "descending",
          },
          'content',
        ),
      );
  },[dispatch, content]);

  news.forEach((elem) => {
    results.push([elem.title, format(new Date(elem.start), 'dd.MM.yyyy'), elem['preview_image']?.download, elem['@id'], elem.UID]);
  })

  return(
    <>
      <Box sx={{ flexGrow: 1 }}>
        <Grid container spacing={1}>
          <Grid className='newsContainer' justifyContent="center" container item spacing={4}>
            {results.map((result) => (
              <Grid item className='gridItem' key={result[4]}>
                <a className='newsBoxA' href={result[3]}>
                  <div className="newsBox">
                    <div className="newsTop">
                      <div className="newsImg" style={{ backgroundImage: `url(${result[2]})` }}></div>
                      <svg xmlns="http://www.w3.org/2000/svg" className="newsSvg" viewBox="0 0 210.051 28.785">
                        <path d="m.001 29.03.018-1.983c.729-.008 24.531.373 35.78.282 15.811-.129 30.114-.113 45.118-1.22 15.439-1.14 30.813-3.171 46.106-5.574 16.23-2.55 32.433-5.452 48.386-9.373 9.159-2.25 18.174-5.081 27.107-8.107 2.48-.84 7.346-2.786 7.346-2.786l.19 28.784z"
                          style={{fill: "#293619", fillOpacity: 1, stroke: "none", strokeWidth: 0.154, strokeOpacity: 1,}} transform="translate(-.001 -.269)"
                        />
                      </svg>
                    </div>
                    <div className="newsBottom">
                      <p className="newsTitle">{result[0]}</p>
                      <p>{result[1]}</p>
                    </div>
                  </div>
                </a>
              </Grid>
            ))}
          </Grid>
        </Grid>
      </Box>
    </>
);
};
2

useEffect is executed if and only if the dependencies change. So the dependencies should include something that changes on navigating from one page to another, for example the location.

The other thing that will pop up, is that two blocks on the same page will show the same results. To prevent this, the subrequest key should differ from block to block. data.block ist the block id, which is unique for each block. Your subrequest key is the string 'content', which is fix and will therefore take the same redux store slot for all blocks.

3

So I should add the contentUrl variable which changes on each block to the useEffect function like this?

useEffect(() => {
},[dispatch, content, contentUrl]);

props.block has an Id , but if I add the Id instead of 'content' it won't show anything.

4

The searchContent action should be dispatched whenever needed. This is controlled by the dependencies. So yes 'contentUrl' is fine.

'contentUrl' can also be your subrequest key, cause this is the only parameter of your block type.

1 Like
5

Now i understand it! Thank you very much :grin: