Twitch App - Search bar & Online/Offline button [solved]

Twitch App - Search bar & Online/Offline button [solved]
0

#1

Hi,

I have two final issues with my Twitch TV app that I cannot solve.

  1. When I switch between the Online and Offline button, there is a delay where the browser refreshes with all the results before then filtering out the relevant results. I know why its happening as I remove the class to reveal all the channels and then apply the class again, but can’t get another solution to work at all, any ideas as to a way around this?

  2. This is the bigger issue, I’m trying to filter out the channels as I type in the search bar, but I’m way off of solving this. I don’t know how to select the title text of each channel (#title), I think I’m supposed to stringify it maybe, but It’s still out of scope and I don’t know how solve this. Even once this is done, I’m not 100% sure what to do after.

Thanks for your help,


#2

The refreshes are inevitable presumably because you are making an API call each time any of the filtering buttons is pressed. One way around the refreshes is to simply make the call when your page loads and simply assign it to a variable—that way you avoid making unnecessary API calls and will avoid the refreshes.

I don’t think there is anything wrong with hiding and showing the channels by adding and removing classes, but I think a better way is to simply filter out the unwanted channels before parsing into HTML. This way you only need a few functions to do the filtering (you can actually already filter them and just store the filtered data after the initial API call as described above), and then you can use the same function for parsing the channels into HTML.

I won’t spoil this for you for now—if you figure out how to implement the filtering described above, you should also be able to implement this.

If it seems difficult to begin with, start a new Pen and use a simplified set of data to practise first (for example, just the names of the channels ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "Miss_Rage", "Pandagirl91", "RobotCaleb", "noobs2ninjas"]).

I hope that helps. :slight_smile:

EDIT: your code is nice and clean to read, thank you for having meaningful variable and function names, too!


#4

If it seems difficult to begin with, start a new Pen and use a simplified set of data to practise first (for example, just the names of the channels [“ESL_SC2”, “OgamingSC2”, “cretetion”, “freecodecamp”, “Miss_Rage”, “Pandagirl91”, “RobotCaleb”, “noobs2ninjas”]).

I hope that helps. :slight_smile:

Yeah, I think I’ve got the process right in my head, but the thing I’m struggling with is that I can’t search the title of each channel as it’s from the API, which is out of scope, I’ve tried to declare it globally with the variable userTitle but it doesn’t work. I think this touches on the other point you said about assigning the API call on load to a variable. I’m trying to keep the calls to the API to a minimum but my attempt with the userTitle doesn’t work.

EDIT: your code is nice and clean to read, thank you for having meaningful variable and function names, too!

Thanks, that means alot, good to know I’m on the right track, still a few tweaks that I need to make but trying to get this working correctly first.


#5

Yeah, I think I’ve got the process right in my head, but the thing I’m struggling with is that I can’t search the title of each channel as it’s from the API, which is out of scope, I’ve tried to declare it globally with the variable userTitle but it doesn’t work. I think this touches on the other point you said about assigning the API call on load to a variable. I’m trying to keep the calls to the API to a minimum but my attempt with the userTitle doesn’t work.

Just researching this a bit more, would I be correct in thinking a closure would help solve this issue?


#6

I think you may be going slightly off-track. Consider the following example where I have already collected some API responses into a list and want to find all channels containing 'sauce':

const apiResponse = [
    {
        channel: 'awesomesauce'
    },
    {
        channel: 'chickennoodle'
    },
    {
        channel: 'jellylamington'
    },
    {
        channel: 'frimframsauce'
    }
];

const sauce = apiResponse.reduce((accumulator, response, index) => {
    if (response.channel.match('sauce')) {
        accumulator.push(response);
    }
  
    return accumulator;
}, []);

console.log(sauce); /* returns [{ channel: 'awesomesauce'}, {channel: 'frimframsauce'}] */

I hope that clarifies what I said earlier! Let us know how you get on with it. :slight_smile:


#7

Thanks for the help on this, finally managed to complete it today. Pretty pleased with how its turned out!

https://kubix90.github.io/twitch-app/