search

debsishu / Miyou

An anime discovery, streaming site made with React.js. It uses AniList API and video data from GogoAnime. No ads and no VPN required.
https://miyouanime.vercel.app/
73 stars 31 forks source link

Dynamic Page Title #5

Closed Jeydin closed 2 years ago

Jeydin commented 2 years ago

Is there a way to change the page title (like in the tab bar at the top, the name of the page) to reflect what page the user is on? Right now it just says Miyou - Watch Anime For Free on every page and it's weird when I want to save a bookmark or when I'm trying to navigate all my tabs to look for a specific show.

Jeydin commented 2 years ago

This could also be changed for the metadata embed as well, when sharing links, it's aesthetically pleasing when the embed is dynamic and changes according to whatever link was posted.

debsishu commented 2 years ago

Is there a way to change the page title (like in the tab bar at the top, the name of the page) to reflect what page the user is on? Right now it just says Miyou - Watch Anime For Free on every page and it's weird when I want to save a bookmark or when I'm trying to navigate all my tabs to look for a specific show.

you can add document.title = "Your Desired Title" inside every page's useEffect. If you want to show the name of the anime use it inside the function where it is calling the API.

Jeydin commented 2 years ago 
async function getAnimeDetails() {
    setLoading(true);
    setExpanded(false);
    window.scrollTo(0, 0);
    let res = await axios.get(
      `https://api.miyou.me/api/getanime?link=/category/${slug}`
    );
    setLoading(false);
    setAnimeDetails(res.data);
    getLocalStorage(res.data);
    document.title = animeDetails[0].gogoResponse.title
  }

I did it like this in AnimeDetails.js but it didn't do anything

debsishu commented 2 years ago 
async function getAnimeDetails() {
    setLoading(true);
    setExpanded(false);
    window.scrollTo(0, 0);
    let res = await axios.get(
      `https://api.miyou.me/api/getanime?link=/category/${slug}`
    );
    setLoading(false);
    setAnimeDetails(res.data);
    getLocalStorage(res.data);
    document.title = animeDetails[0].gogoResponse.title
  }

I did it like this in AnimeDetails.js but it didn't do anything

you cannot access the animeDetails state because the async call has not been returned yet. So you can use document.title = res.data[0].gogoResponse.title

Jeydin commented 2 years ago

That worked... thank you so much!