Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feature] [APPROXIMATION] Keep search bar filter when switching tabs #11

Closed

Conversation

manuartero
Copy link

@manuartero manuartero commented Jul 20, 2020

#10

calling the filtering function on

  • EnableDLCPokemon()
  • DisableDLCPokemon()

note: Please keep in mind that I'm not familiar with this code base;
consider this only an approximation, something like "ey, I think this could be the way when I read your code, but you know it better ^^"


NOT READY TO MERGE

This isn't working as expected: it is needed to double tab for getting the filtered pokemon list.

suggestion

If I may, I have a suggestion: you can use React.useState() hook for doing some refactoring:

On component creation you fetch both Pokemon lists and store them:

const [baseGamePoke, setBaseGamePoke] = React.useState([]);
const [armorPoke, setArmorPoke] = React.useState([]);
React.useEffect(() => {
        let isSubscribed = true;
        fetchPokemon().then(items => {
            if (isSubscribed) {
              // some coding here for obtaining both arrays
              setBaseGamePoke( /* [....] */ );
              setArmorPoke( /* [...] */ );
            }
        });
        const cleanUp = () => {
            isSubscribed = false;
        };
        return cleanUp;
    }, []); // will execute on component did mount

having that working will grant you the simplest filtering ever !!!! :), something like:

 const [filterValue, setFilterValue] = React.useState('');
const [filteredBaseGamePokemon, setFilteredBaseGamePokemon] = React.useState([])
const [filteredArmourPokemon, setFilteredArmourPokemon] = React.useState([])

    React.useEffect(() => {
        if (filterFn && arePokemonReady) {
                const filteredBaseGamePokemon = [
                    ....filter(pk => filterFn()),
                ];
                ...
                setFilteredBaseGamePokemon(filteredBaseGamePokemon);
                ....
            } 
        }
    }, [filterValue]); // execute when the search bar changes

Now, you may show in the list filteredBaseGamePokemon and filteredArmourPokemon (instead of baseGamePoke which you want to keep fresh for filtering)

calling the filtering function on
 - EnableDLCPokemon()
 - DisableDLCPokemon()

note: Please keep in mind that I'm not familiar with this code base;
consider this only an approximation.
@manuartero manuartero changed the title [feature] [WIP] Keep search bar filter when switching tabs [feature] [APPROXIMATION] Keep search bar filter when switching tabs Jul 20, 2020
@kikisaints kikisaints self-requested a review July 20, 2020 17:28
@kikisaints
Copy link
Owner

This is awesome! Thanks for the suggestion - I have a few changes I forgot to push that fixes that list refresh issue. I'm getting a work break coming up soon so I think I'll be able to put some time into fixing and adding this feature!

@manuartero manuartero marked this pull request as draft November 19, 2020 09:45
@manuartero
Copy link
Author

I'm going to close this pr if you don't mind :)

@manuartero manuartero closed this Mar 17, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants