Blog posts can't be shared by their URL about iscsc.fr HOT 9 CLOSED

Probably related to #15

from iscsc.fr.

tried to just copy paste this code from Blog.js to Article.js (with and without an if statement checking article==null) but:

I concur that doing this does not work, also tried and did not work either (I just forgot to mention it).

from iscsc.fr.

that is really true and smart 😮

from iscsc.fr.

Adding my findings after some investigation, but basically seems like there is an issue with either the Article.js page; or the routing.

If you access a blog page directly from its url, and look at the console, you have the following log: iscsc.fr-1670535866067.log, with an error, from which you can deduce what I commented, on the states of everything in Article:

const Article = () => {
  let { id } = useParams();
  const { articles } = useArticlesContext(); //After this line, articles is null
  const article = articles.filter((a) => a._id === id)[0]; //So this line generates the error
  return <ArticleView article={article} />;
};

Except that if you look at the log when accessing a blog post from the main page, articles is not null (you can check by using console.log(articles) if you wish to reproduce), the log is clean.

Furthermore, if you go on the main page, open an article, then refresh the page, you will find the same empty page, same error. And this error is also there for #15.

So I can deduce the following:

• #15 and this issue are the same issue
• It seems like articles are fetched from the database only if you first go through the main page

from iscsc.fr.

@gbrivady

So I can deduce the following:
Opening an article in a new tab or window displays a blank page #15 and this issue are the same issue

Actually I came to the the same conclusion while performing my own tests 😕
However check https://iscsc.fr/api/articles/638fdec624bc362fff7a2d18 it doesn't seem to have a problem with the routes in the backend for sure. I'd probably blame the ArticleContext.js file because at some point it "creates a context" (whatever that means in React) and initialize what will be returnes to null. But I can't find what's missing

from iscsc.fr.

Ol I think I got it
In Article.js the code get articles from the context.
However if we access the post by URL the context is initialize at null: dispatch SET has never been sent and articles have not been fetched from teh API, when accessing from /blog, this Blog.js code is executed:

  const { articles, dispatch } = useArticlesContext();

  useEffect(() => {
    const fetchArticles = async () => {
      const response = await fetch(`/api/articles`);
      const json = await response.json();

      if (response.ok) {
        dispatch({ type: "SET", payload: json });
      }
    };

    fetchArticles();
  }, [dispatch]);

and articles from context is not null

I tried to just copy paste this code from Blog.js to Article.js (with and without an if statement checking article==null) but:

• I don't think this is the best solution, instead we maybe should define a Hook useFetchArticles (is that really the intended use of hooks, I don't know)
• it doesn't work (but maybe I didn't try hard enough)

With these new elements @atxr you maybe could have a look/indicate to us the right direction/ressources?

from iscsc.fr.

Well I think we need @atxr help here

from iscsc.fr.

Aha good work @ctmbl and @gbrivady you spotted and summarize the issue!
We basically have a context array which is shared between the pages. On the / page, we initialize it with the SET method, that will fetch all the articles from the database. (BTW we will need to optimize this later because if there are too many articles it can be very slow)
So when you directly browse to an URL with the id of an article, the context array is empty and it doesn't find the article.
A quick and clean fix could be

const Article = () => {
  let { id } = useParams();
  const { articles } = useArticlesContext();
  const article = articles.filter((a) => a._id === id);
  if (!article.length) {
    const response = await fetch(`/api/articles/${id}`);  // fetch the article (only this one) from the database
    if (response.ok) {
      const article = await response.json();
      dispatch({ type: "ADD", payload: article });       // if it exists, add it to the ArticlesContext
    }
    else {
      // error, 404 not found redirection
    }
  }
  return <ArticleView article={article} />;
};

This should work! I can let you try by your side and open a PR if you want to solve this! Otherwise just ping me back and I'll do it.

from iscsc.fr.

Thanks @atxr! Indeed we were close to the solution 🥲 but I'm glad, I learned a lot about the website code!

from iscsc.fr.