Back button is not working

When the user search for a movie it gives them a list of movies grabbing data from OMDBAPI that matches the search term So when they click on the movie it takes them to another page that contains information about that movie. In this pages I have back button so when you click on that button it should take you to the last page where you left but in my case it takes you to the first page. for instance: if you click on the movie on third page and then press the back button on that page to go back to the third page instead it takes you to the first page.

My Search class where I make API call for the movie.

export default class Search {

    constructor(query) {

        this.query = query

    }

    async getResults(page = 1) {

        const moviesList = [];

        try {

            while (page >= 1 && page <= 4) {

                const res = await axios(`${proxy}http://www.omdbapi.com/?apikey=${apiKey}&s=${this.query}&type=movie&page=${page}`);

                this.responseData = res.data.Response;

                const response = res.data;

                response.Search.forEach(movies => moviesList.push(movies));
                page++;
                this.result = moviesList;
                this.page = page
            }
        } catch (error) {
            console.log(error);
        }

    }

}

search Controller

const searchController = async(type, page) => {

    if (type === 'newSearch') {

        //1-GET SEARCH QUERY FROM SEARCHVIEW

        const query = searchView.getInput();
        if (query) {

            //2-CREATE SEARCH OBJECT
            state.search = new Search(query);
            try {
                //4-SEARCH FOR MOVIES  
                await state.search.getResults();
                //5-RENDER the results on UI
                searchView.renderResults(state.search.result);
            } catch (error) {
                console.log(error)
            }
        }

    } else if (type === 'oldSearch') {
        try {

            //4-SEARCH FOR MOVIES  passing current page
            await state.search.getResults(page);

            //5-RENDER the results on UI
            searchView.renderResults(state.search.result);

        } catch (error) {
            console.log(error)

        }
    }
}

when I want to go back to the previous after clicking on a movie I invoke searchController and pass the current page to it and tell its old Search searchController('oldSearch', state.search.page); but instead it takes me to the first page.

Any help or direction is appreciated.

Hi again!

Since you haven’t received any responses yet, you might look into throwing your code into codesandbox

That way you can share the link with people and it might increase your chances of someone responding.

Codesandbox supports multiple files.

Thanks for replying.
This is the link to my GitHub repository https://github.com/Hamidsq/MovieLibrary/blob/master/src/js/index.js . I would highly appreciate if you could tell me where I am going wrong in the code.

If you have paginated results, you need to store which page of results you are on then back button should point to that, not just the search screen. So for example, you can store in state the page a user is on and what the query was. When you go back, if the user is on a search results page, run the query again passing in the previous page number rather than the default 1.

I don’t have time to look at the code, as @jwilkins.oboe says a simplified example on Codesandbox that shows the issue would he useful

Also, please don’t request mod help for this kind of thing, there are loads of people in the forum who have the knowledge to help with your programming issues, and there are also loads of other people on the forum who also need help

Thanks for the reply.
I store the page as property of search object when the user wants to go back to the search results or the last page I pass the page to search controller. The search controller essentially render the results on the screen.

I will try to put my app liv on github so you can see what’s going on.

One of the FCC staff told me to contact the mod if you feel yours question has not been answered after 7 days.

I read through that message where the moderator made that suggestion and they said to reach out of a specific moderator for help. So they probably meant privately.

I think you are misunderstanding how codesandbox works.
You don’t need to create a github pages or worry about deployment.

The beauty of codesandbox is that you can sign in for free, temporarily copy and paste all of the files into codesandbox and have it up in running. Then you can share the link.
It will probably take you like 10 minutes to copy everything over and have it up and running.

Here is a screenshot of what I mean. I just copied one of your files to demonstrate how easy it is.

I am still a beginner (7 months in) so I doubt I will be able to assist you that much with the code.

But if you create that codesandbox link, then I really do think the professionals will be able to see the problem and find it quicker in the code.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.