Create a Movie Watchlist with React Hooks, Context API and localStorage

hey guys how's it going I'm Matt the dev in this tutorial we're gonna be building a movie watch list with react we're gonna make use of the react hoops the context API we're gonna store watch lists in local storage so we're able to persist the data and we're going to obviously be using an external API to be able to grab information about the movies so this is the the app that we'll be building it's just a basic react app where we can kind of look into the hooks and how we're gonna store that data with the content we're gonna access data with the context API store the data and the local storage and even you kind of learn about fetching from external API so the the app works kind of as follows it's a watch list for you to add your kind of the movies you want to watch and to the watch list you can mark these movies as watched so I've watched the movies then appear in our watch lists so that appears on the watch list there we can mark them as um watch to get them back into our normal watch list here and then we can add other movie movies from online so if I search for a movie here it's gonna use an external API the movie database API to be exact to fetch the film's for our search and then we can add them to our watch list so let's add this one to our watch list for example I'll go back to the watch this page now you can see it's been added in there we can remove it from the list if we don't want to and things like that so before we get started there's a few kind of prerequisites the obvious one no js' we need that installed so that we can make use of create react app and use the packages from in there this tutorial is kind of gonna have an expectation that you know the the basics of react if you're looking into how using react tooks and react context API so you should have some kind of experience of setting up a basic react app with components and stuff like that but obviously we'll go through that as we kind of go on you are gonna have to sign up to the movie database and request an API key that's really easy I'll put a link down in the description in the description to the the movie database what you need to do is you need to create an account you need to go into your profile once you create an account go to settings and then you can go to API on the left hand side and you can request an API key is pretty much instant you kind of got put in a few details about what kind of app you're making it might ask for the app URL just type in localhost that means that they'll know that it's kind of a rapid development and you can request you can request the API key from this website so yeah we'll be needing that this API key won't be obviously active at the time of the video bye it's on the video's launch so we'll be removing that and then there's a few other things so we're gonna be using vs code I strongly suggest you install this es7 react Redux snippets we'll be using these snippets to quickly build stuff like components yeah throughout the tutorial so that pretty much kind of covers the prerequisites what I have done is I've created a github page it will be linked down in the description again and in the video when we start getting coding will be we'll be going to the github repo so we'll be pulling stuff like the styles from the final product up basic ladders up as a final code up on a github repo yes stuff like this this isn't a CSS tutorial or anything like that so there's just some basic CSS that I've made in here we won't go through that in the video though so you have to go to the github repo just to copy and paste the CSS from there into your file into your project but we'll go through that during the actual tutorial and we'll copy all the code we kind of need we'll also be using font awesome so I'll go to the font awesome website the what we'll be doing is we'll be serving up our own font awesome - Brent you guys are kind of having to sign up and request a kit code and so for that so we're gonna serve the we're gonna look at serving font also myself again this will be in the github repo so you can either download it from there or download it from this website we'll cover that in this tutorial but we use an alpha stuff like the icons the basic icons and I'm sure I'm sure many of you are very familiar with font awesome but if you're not you know it's not anything too concrete it just allows us to get that icons that we need for our design so yeah that covers up the kind of prerequisites in what will be what we would be building so I'll see you in the code aspect Cheers before we get started with this video I'd like to take the opportunity to quickly plug the platform that I've created loop red blue pro is a platform for you to get social about the projects you're working on you can create new projects and share regular updates during project progression as well as follow your favorite creators and your feet of their updates unlike the other portfolio platforms blue prose about sharing the entire journey of a project from concept to completion not just the final products at the end looper is the perfect place for you guys to get social about the projects you're working on and it's entirely free to use and you can get started in Luke procom ok so let's get start with the tutorial for this what we're gonna this tutorial what we're gonna be using is create react app which is basically start a template for reacts to get going with all the modules and the files we need so to get going with this because we've got node installed we can open up a terminal and our computers I'm personally using a git bash terminal you can use whatever terminal is on your computer then we can run MPX create react app and then the name of the directory wants to do install and so I'm going to make mine watchlist Tut so we're also already in the fart folder we want to save that and so I'm already in the kind of code folder I want to save all of my work to so I'm gonna run that and what I'm gonna do is I'm gonna get back to you guys once that's already run because for some reason on my computer my internet is quite slow at the moment so that takes a few seconds so I'll be back in a minute okay SATs finished installing so what I'm gonna do is I'm gonna CD into that folder so I called that watch list that's cut and then I'm gonna Road and then I'm gonna run code and dots that opens up vs code a vs code initiation basically so that we can open up our code straight away in our editor so I'm gonna pop this on the side here I'm gonna get a browser here so that when we're coding we can see the changes live and it's and we're basically in the correct folder already so to get started what I'm first going to do is I'm going to install another another module that we need for this tutorial we're gonna be having a few pages so we need to be able to basically move around those pages so to do that I'm going to install Reax ruta Dom so I've done em p.m. I so npm install that stands for and then reactor rooted on so we're out through dom if you guys aren't aware yeah it's gonna basically allow us to route around the route around the application move around to certain pages that we need to and cover all our routing basically so that's an easy package to get us going with that I'll fast forward this bit and wait for it to be installed properly and then I'll get back to you guys again okay so we finished installing rat root Saddam now I'm just gonna make my terminal slightly smaller in vs code so that we that doesn't take up most of our screen and now we're just going to go through and basically clean up some of these files we don't really need so we don't really need the test or J s so I'm going to remove that index dot CSS we don't really need that he verse I'm gonna delete that then inside our index J s we're gonna remove this line so it's obviously importing the CSS file we're just deleted I'm gonna delete the logo because that's the reality we don't need and some the test files as well we don't really need those okay so that's kind of done a little bit of cleanup what I want to do is I want to import some CSS I'm not gonna go through the CSS in this video because you guys most likely if you're watching this tutorial know everything about CSS we're not gonna waste any time on that so inside the repo inside the final code repo that I'll share in the description below and go go into the source I'm going to go into the app dot CSS I'm not gonna do is I'm going to copy this contents here and just paste that in so we've got all of our Styles sorted for the application straight away so I'd recommend you guys doing is if you wanted to you could download this repo if we just move across the bit you can clone or download it and then we can also then access inside of our lib folder we've got the font awesome files that we're serving ourselves rather than using their CDN so I'm gonna pull over this code in this right-hand side this is the final code repo here and then grab the Lib folder here which contains all of our font awesome stuff and I'm gonna move that into the source folder as well so that we have access to icons and stuff like that from font awesome so that is some of the SAB done so inside this we now kind of want to just remove some of this code here it's made me zoom out just a tad there so you guys can see my other screen and so inside this I'm gonna just remove this I'm gonna replace this for now for the main app just with a hello world hello world h1 in there just just go again with last resort out or other components so we're gonna make inside of our source directory we're gonna make a new folder called components and inside there I'm gonna create stock crates and pages that we we're gonna need so we're gonna need a watch list so that's gonna be our main page with our watch list and and as I said kind of during the set up we're gonna use a Chrome extension not Chrome extensions or AVS Co extension called es and react snippets and that's here I recommend installing that this basically allows us to create kind of components quickly I'll mute my phone as well and it allows us to create components quickly so after we've got that installed I can just type in our AFC and then tab and that's gonna make a es7 functional component for us that we can use so inside these I'm just gonna snap all the pages we need to get the kind of reactor routing done to begin with so this is I'm just gonna make some basic just some basic components to begin with so that we will have them ready so we need an add page so I'm gonna make a new component called a das same thing going to create a functional component and then it's gonna be the add page and then another component called watched ojs that's going to be our watched page so the movies that we've watched watched page and then also what else do we need to do down here we need a header file so that's gonna be our nav bar and stuff for that and what we're gonna do make another functional component in here and we're actually gonna we're gonna just start filling this out to begin with and start building this header so what we want to do is we want to import link from racks routed Dom which will allow us to move around and create nav links that work properly and then inside of our component we're gonna return our codes our markup so we're gonna make a header element and then we're gonna have a div with the class of container in there so we're gonna put everything in a container and we can have inner content and then we're gonna have another div with brand with the class of brand and then we're gonna make a link component and this is just basically gonna take us to the home page so I'm going to do a link to slash that's just gonna be our kind of logo which is watchlist and then we're gonna make an unordered list with a class name of laughs links and then inside there we're gonna make our and some list items and then link in here to this just gonna be slash as well because this is just gonna be another way to get to our name watchlist then I'm gonna copy this down a couple of times so one two so we got three nav links this one is going to be going to watched so the slash needs to be two watched here and this one is going to be answer it's going to allow us to add movies to our lists so we're gonna then give it a class name of button so if we now go back to our app yes we can then sort out some routing so we can store our now that we've got a header element we can sort out some routing so inside of our app jas we need to import so we need to first remove this logo to SVG that's being removed with the that's the react logo that was there originally we don't need that anymore and then we're gonna report the browser Rueter adds Reuter switch and routes from reacts merita dom and then underneath here we're gonna start importing our components that we just made so we didn't need to import the header component that's going to be from components and then head up and then the all the pages so watchlist from components us watch lists all us that watched one going on that one watch list and then import watched from component slash watched and then we're going to an awesome poor add from components sash and okay so that's sort of our components imported what I'm also going to import is our font awesome from the Lib folder that we just added so we need to enforce that CSS there so /lib /font awesome slash CSS flash all all dot min dot CSS should do the trick there okay so inside of here now we need to delete this kind of hello world starter and we need to start working on our Rooter so reacts Morita I'm sure if you guys have made applications before you guys kind of where of how reactive to DOM work so I won't explain it too much but we want a header element at the top because that's gonna be appearing on every single page we want and then we're gonna make a switch component which basically allows us to move around our application to route around our application and then we're gonna make some routes so our first one is going to have an exact path of sash so this is gonna be our car home route and that's gonna return the watchlist component there then we're gonna create another route and this path is going to be slash washed and that's going to return our watched component and then finally a never routes here with the path of add the skill allows to add movies so we want to return our add component here so this basically gets to start with the last should give us a basic markup for the application so inside of our terminal that I've opened up envious code I'm gonna run NPM star to hopefully get a development process running of our react app so we'll wait for it to start up it's going a bit slow a moment so as you can see we've got our nice basic kind of starter ready so we've got our header in here we're on the watch list page because we're at home if we get too watched we go to the watch page we get to add we get to the add page that's all of our routing already set up and done nicely so what I think we want to do first is we want to start working on the add page because inside the add page we need to basically search the movie database we're going to use the API to fetch some results as we search their database and we're going to return some movies so if we go into our art we're gonna work on some markup first so we're going to make let's delete all of this kind of default stuff in here so we're gonna make it first a div with the class name of add page we're going to add a container inside there and then we're gonna make another div which is add content and then inside that we're gonna make an input wrapper this is now be our kind of input where we search for the movies so we're gonna make an input that's gonna have the type of text we also want a placeholder which is going to be searched for a movie search with a movie and that kind of gets us started there so first of all the first thing we want to do is when we've got stuff like inputs we need to attribute a state to that input so that we can change the we can change the text as we type in our input so we're using reactors so typically when you're using state basically react books allows us to create xu state in functional components rather than class-based components previously you'd have to make a large class-based component then you'd have to make a constructor and do super props and this dot state and that kind of thing with react tips we now don't need to do that we can after when we're important react at the top we can also incur lis braces import use State so this basically allows us to create state inside of a functional component here so the main one we want to begin with is a query state so we want a query string that's going to be the value of our input so we're gonna so to do that we do comps we create a new variable and then we are gonna so the first one is going to be what are what our state is called so it's going to be query and then we have another parameter that basically is called set query which allows us to change our state's and then we're going to use the function new state and then we need to give it the initial state to begin with here so on initial state we just want an empty string so we're just gonna put an empty string like that and then inside of our input here so if I go back here I'm gonna make this a bit nice to see you guys can see it we're gonna then going to set the value of our input to query so it's equal to the query state and then we are going to make a non change event so when we change the when we change the value in here we're going to do is we're actually gonna make a a function in here to tell what to tell the input what do when we do change the value or tell the tell the component what to do when we change the value so unchanged we're gonna make it equal to unchanged and then we're gonna make a function up here called Const unchanged it's gonna have the event set set as a parameter there and then first of all we're gonna prevent defaults and then what we're gonna do is we're going to set the query so this is using this set query here to set the state equal to the dot target dot value so we make it equal to the value that we've typed in on that so now if I search in here hello world you can see that it's changing our input is changing nicely there which is perfect so what do we want to do here so what we want to do here is we basically every time we search in this area here we want to do a search on the movie database and return some movies so if I open up the tmdb API up here so we go to the API I'm not sure how nice it's going to look on this screen we basically want to go down to search so we're using their API here and we want to search their movies so we're gonna use this search endpoint here to search their movies and sort of going to return us some movies so what we want to do here is first of all we need our environment variable set up so as I told you guys as a prerequisite we basically need to we need you need to generate your own API key for the movie database it's it's fairly easy and it's quick to do so hopefully you guys have done that and if you haven't you guys need to do that now and then what we're gonna do is we've created a dot e MV dot local file in the root of our application and we're going to make an environment variable called react app tmdb key and this is gonna be equal to your API key so I'm going to paste in my API key here and now we've got we can access that and then this environment variable inside the application so you guys need to put your own key in here this key won't work if you guys are following along with the tutorial so every time we make a new environment key or via variable we need to stop running the server we need to restart the server basically start the application so I've just cancelled it there with control see they're gonna run NPM star games I'm gonna restart that so that we have access to that variable so you need to if you're not able to access it because you need to restart the page there so now we're gonna go back to our add a s so basically every single time we changed I'm going to close all the other files actually possible here so close em files that's not too busy on the screen so every time we want to work every time we type something in here we want to send a search request or we want to fetch fetch from the movie database API some movies so what we're gonna do is we're gonna make a fetch and here we're gonna use the JavaScript fetch and we're gonna put some back ticks in here which are template literals which allow us to add our own kind of variables into a string so if we go back to the API endpoint here you can see here in the search area it kind of tells us what the endpoint is so we go to the tryout tab we can see here that it gives us the whole string that we need to use the endpoint that we need to hit to be able to search the database but what we're gonna do will type in manually so you guys can follow along so we're gonna be hitting their endpoint which is HTTP for stash API dot the movie DB org 4/3 forward slash search so if you guys want to pause this as you're typing in following along that's fine then we're going to search for and then we can hit movie cuz we're searching for movies and the first thing we need to do is provide our API key so this is where we can then add we can add a dollar sign and curly braces and we're able to add our own variables to this string now so we're gonna access our environment variable so processor MV dot react app tmdb key just what we saved our key us and then we need to add a few extra things in here as well so the first thing is we were on the language so we're gonna make an and and then and language if I'm excite properly I'm trying to make sure that all of these are spelled correctly because it might mess up our search otherwise we'll do English én us returning in english basically i'm going to add a page and page equals one so that's returning the first page of results and then we're gonna put include adult we're gonna set that to false because we most definitely do not want adult films being returned especially not for this tutorial so that keeps everything safe for work and then the query here as well so we're gonna use our dollar sign and then curly braces again and we're going to provide it with that targets dot value so that the value that is added to the that's added to the input and then from here we're then gonna put after this curly braces we're gonna make it then so we're gonna it's gonna return a promise and then we're gonna be returned with the results with the response then we're going to turn that response into Jason so we're gonna be restoration save that and hopefully gives us a nice a formatting it does there and then we want to make another then so I'm gonna make a new line number then and then we're gonna be returned with data and that's console.log this data for now okay so let's make a search then let's just type in Harry Potter for example that's nice and easy let's make this bigger so as we search every time we searched as let's combats yes clear that here so that's such a Harry Potter again clear that so every time we change your value in here you can see that it's calling making a call to the array cool it's re cool to the API and then it's returning some results here which is returning the movies so that's working perfectly it's returning the movies we want so we now need to basically store this somewhere so we need to make another state to store our results to store the API results so we're gonna make another another state variable this is gonna be constants and then set results so we can stat that state and then we're gonna use stay and this is our initial state so it needs to be an array of results we're gonna return an array of results so we're gonna to begin with the initial the initial state value is going to be an empty array and then inside of here first of all we're gonna check if there's any errors so data errors we're gonna add to mark here so if there are no errors we are then going to set results to data results which is going to set it to these results that we can see here in the console there so that's gonna then set our set our results properly in there and set it to basically our state so we're gonna set the return to a P I stuff to the state and if there is an error we're just gonna simply reset resolves to an empty array because there's no results that something's gone wrong there's an error there so if we then so let's close this tap here and then go back to here we then want to we then want to basically display these results so underneath our input wrapper div we're gonna map through laughs actually first of all going to do is we're going to check that the results dot length is more than 0 so check that we've got results so if there are results and then do an and and we can return some code if there are if the length of our results array is more than 0 so we got some results so we're gonna make an unordered list with the class name of results and they're going to return so we're gonna map through the results so we could do result results dot map and then we can get the movie access this is targeting an individual movie and then we're going to return something in here so li and then just for this example just to show you what we're returning we're just going to return the movie title inside curly braces there so we're accessing the movie object and return the title so let's type in Harry Potter and you can see that all of our results are now nicely being displayed here which is perfect but obviously we want some better formatting so to do that what we're gonna do is we're going to make a new component called result card and we're we're gonna do that works we make that so let's make a new component inside our components called result card jeaious we're gonna do our AFC again and in tab sort of functional component again and what we wanna do is let's think so to begin with we just basically want some nice formatting so we're gonna pass to this result card we're gonna pass on the object as a prop so we can access this by destructuring inside the parameter up here and then what we're going to do is we're going to return a div with the class in Resort card and then a postal wrapper inside of there to contain our poster so the first thing we need to do is make sure that a poster is returned so movie poster path that's kind of our variable there so if we do have something returned in there we are then going to create an image element with the source of okay so we're gonna have to do some typing in here so the source we need to do HTTP slash slash image tmdb org so this is basically hitting their media CDN so we're able to display the image because the poster path has just returned as forward slash and then a random string so it doesn't return the full kind of URL so we need to make a bit of the URL we're going to do slash P and then W 200 to us and providing us an image with a width of 200 and then because we're using again template literals we're using the back ticks we can do the dollar curly braces then we can put in our movie poster path in here and that will return our movie in there so then we also need to make an alt we also need to put an all element old value so we're gonna make some curly braces again some backticks for template literals and then we're gonna do movie title poster so that's going to turn that the the movie title and then poster as the alt tag and then we want to put a colon in here and today so if there is no movie path we can return instead we're gonna return a just a div with a class in a filler poster which is just going to be kind of a blank image that displays on the front end so that's what happens if there's a movie a movie in there so if we then go back to we can test this out so we can pour into this into our address so we've gone back to our J's file here we're gonna import the result card component from the results card and then inside here when we map from the results we are going to we're going to first of all we're gonna make let's just delete this and make our li again and if you're mapping through stuff on react you have to give everything a when you're mapping from JavaScript you basically need to give everything a unique key so we're gonna add a key to our li element to our child of the map and we're going to make that key movie ID since every movie is unique every movie ideas were unique that's a sensible key and then we're gonna make a we're gonna use our result card component and then as a prop we're gonna pass it movie Somu there's the movie probably gonna pass it the movie object here so let's save that and now when we type in Harry Potter you can see that the nice poster puffs those posters are returned and the gray ones here you can see it basically is what return is what is returned if there is no poster provided so that's our phillip poster div in there so that works perfectly so we need to go back to our result card and pad this out a little bit so what do we need so we're gonna make underneath the poster wrapper I'm gonna make a new div the class name of info and then that's gonna have inside of it a div called header and that div inside the header we're gonna have a h3 the class name of title and then inside this title we're gonna return the movie title page for dot we're gonna make another we're gonna make a h4 element underneath just with the release date and then we're gonna return movie dot release date in there so in our final project we did actually clean up this day a bit so it just returns the the initial just the kind of year on the side of that so maybe we could do something like we can make a substring so it just returns the movie just so it just returns the year sorry in there instead so in fact let's just do that so we can do this and move it up release date substring and then naught and four I believe should give us a nice so there you are so naught 4 so we make a substring and it's just gonna return the year then so it's nicely formatted in there which is perfect what we might want to do it because this may actually return an error if there's no release date provide I mean all of these have a proper a nice day but I'm slightly worried it might break the application in case of one of our results doesn't so I'm gonna first make a check I'm gonna well let's make this a bit nicer to read so let's pop this down here so serve doing that so if there is a movie release date so if this value is not null we're gonna return this I'm gonna return that or if there isn't one active we're just going to return a - there so that basically covers us in case there isn't a release date in there so yeah that all works nicely so now we want to work on some controls as well so from here we want to be able to add it to our watch list so let's go to our header and here under sorry underneath our header here I'm gonna make a new difficult controls and inside here we're gonna make a button with the class name of button and then we are going to make em add to watch list button in here so if we put that in there every time underneath our results now we get a add to watch this button so this is when we kind of want to start working on the context API aspect we've looked at react hooks in terms of using the state but we now kind of we need a global state so what we learnt so basically what we need to do is when we add this to watch list it adds it to a contact it adds it to our context API and we're able to access the arm watch list from any component across the application so typically the reason we do this is because normally you only have a way to do this is by passing stuff through to components as props which we don't really want to do you want to be able to just easily access all of our data from any component and we can do that with the contacts API so inside of our source folder here we're going to make a new folder and we're going to call that context and this is where we're going to start working on a new file a file called global state j/s and we're gonna create our context inside of here which will allow us to basically access our data from any component so to begin we're going to import react and then we're gonna put some curly braces and there's a few things we're gonna make use of we're gonna use create context we're going to also need use reducer and we're also going to need to use effect from react so there there's the proper things important there we won't use all these straightaway we'll kind of use them as we need them when it comes to it up there so the first thing you need to do when you're working on some kind of context is you need to make an initial state so what the initial value is going to be of your your store so inside we're gonna make a and we're gonna make a constant variable with the called initial state and what we're gonna need in here is gonna need a watch list and that's going to be an array of movies so to begin with we're gonna put an empty array in here and then we're gonna make a watched component in here and we are going to also that's gonna be some movie and array of movies as well so that kind of sets up our initial state inside of here so what we also want to do is we want to under here we would now need to create our context so we're gonna create context and then we're gonna export this as well so it's gonna be export kant's so that we can access it from other variables and then that's gonna be called global context and it's gonna use and we're gonna use create context and then we're gonna pass in the initial state inside there Oh instead they're like this okay so spirits provide to be able to provide this to other components we need to make something called a provider which basically allows us to access that global context from other variables so we're gonna make work on the provider component here so ultimately what we're doing is we're building a component down here so going to export Const and it's going to be called global provider which basically is going to be it's going to take in some props and then we're going to do some stuff inside of here to make it function as a provider so the first thing we want to do inside of here is we're gonna make a Const off state and we're gonna we need to put state in dispatch inside these square brackets and and then we're gonna use the reducer and we need now basically need to create a reducer which is going to be called app reducer and then initial state in here so we've got this app so before we even say this we need to make a new fire file inside of our constant context called use called a producer which is this element here and we'll import this in a minute so a producer in here so if you guys aren't aware ultimately when it comes to common context and you're looking at these kind of things it works similarly to redux if you use redux before but what we basically do is we build a store which stores all of our state data and it holds the store holds the object which holds the application state data we then need a reducer which is what we're about to build now and what this reducer does is it creates basically a function that returns some state data so it basically describes how your your state is transferred into the next state this is it basically when we build out you'll get a better explanation or a better understanding of what that looks like but ultimately what this does is basically tells us that tells our store what to do with the data when something is happened so to begin with we're just gonna make a default we're just going to make a empty kind of reducer before we build any kind of actions so this is gonna take some variables which are so export default we're gonna pass in state and action and then we're gonna return it with curly braces here like this and then we're gonna make a switch state so action type so we then open curly braces and by default we're going to return the state so basically what happens is as we get more actions as we make actions so actions are basically they're an object that tells the reducer how to change the state so basically we dispatch a type which then passes it to this reducer here so to begin with before we build any with our default state is just a return state and you'll get a better understanding as we build more in here so inside of this global state component since we're using the use reducer a producer initial state here we then need to import this too let's import this a producer we just made cause import a producer from a producer so then when we save this here we don't get any errors we're importing a producer properly and then we're also gonna so now we kind of need to build this out a bit more so basically what this does is we're then able to access the state variable inside here so we're gonna return to with this with this component here we're gonna return with uh provide a component global context dot provider so this dot provider tells us it's a provider and then inside of here we're gonna make some curly braces and we're just simply going to return props or children so we're gonna wrap this we're gonna use this global provider to wrap all of the elements on our application so that we can access the global context from every component so when you've got this provider we need to provide it with a value so these are the values are available from the from our provider so inside of here we want to provide as two curly braces then we're gonna add provide the watch list which is gonna be states dot watch list so it's basically returning the watch list from the state and then we are also want to provide it with the watched and then that's gonna be a watched state which gonna be watched state dot watched so then that gives us access to the watch list and watched from our store so as I was talking about we needs actions so when we click this Add to watch this button we need we basically want to tell the provider to - we give it we basically use a action to tell it what to do with once we've clicked this button so this action what we're gonna do is so when we what we're going to do with this at - watch this button is we want to create a function here and we're gonna call it add movie to watch lists and that's good it's gonna be provided with our movie data in here so we've got a function here providing a movie data and what we're gonna do is we're gonna dispatch an action dispatch a well yeah we're so we're gonna dispatch a type so this type is going to be whatever we want to call it so ad movie to watch list and by practice you make your types other case that's as best practice for reducer types action types and then the payload of our dispatch is going to be the movie data so basically now this is dispatch what happens when we dispatch this is we we dispatch a type of a movie to watch this and inside that we provide the payload of movie so we now move to our reducer and we tell our reducer tells us how to store that data inside of our store so what we're going to do is we want to make a new case and this case is going to be called add movie to watch list because it's the type so that action dot type is the type we just passed it in that action and then by default we're gonna so we're gonna return now what we want to do is return the the existing state so what the state currently is and then we want to make some changes to the state in terms of the watch list so we're gonna then we're gonna tie get our watch list array inside of the store and we're gonna put some curly braces and we're gonna make an array basically we're gonna make a new array and we're gonna pass it the action dot payload so that's gonna be our movie data that's the payload we just passed it and then we need comma and we're gonna spread the original state so spread we spread using dot dot and then States dot watch list so what this is going to do is when we click the add to movie it's gonna add this Harry Potter movie to the to the array of the existing watch list because we've spread it the existing watch list here so I think the best thing to do now is to show that in practice how we kind of get our global context and need to be able to show it in here so to begin with the first thing we need to do is we also need to provide this action to the global context provider in here so we're gonna do add a comma and we're just gonna add movie to watch list on here as a value if you aren't aware this is the same as writing add movie to watch list is equal to movies add movie to watch this but since they're both the same variables we don't need to type that we can just type it more simply at this so we made our now made our provider we've got our first action in here a bad movie to watch list we need to wrap all of our components in that provider so let's open up the app j/s let's go back to s here so inside is we need to import the global provider the component we just made from context from context slash global state and here and then what we can do is we can wrap our whole our whole application in this global provider here so that it will has access to the context so a producer is not exported from dot slash a producer so what we got wrong there so inside of a global state we've got our one of our imports here ok so I put curly braces around here it shouldn't be curly braces it should just be normal of that suffixes are there so now to test this I can prove to you that we now have our context by going inspecting our element I've got reacts the react dev tools installed on Chrome which again I'd recommend you guys do if you haven't already I'm going to components in here and when I click on the global provider inside here it might be a bit small for you guys I don't know if Suman is gonna help them that doesn't seem to help in here this No okay and that's fine so inside of here inside of the hooks so we've created a hooks inside of our hooks we've got our reducer in here which you can see we have the watch list and the watched which is our initial state so that's basically showing that our provider is is working we've got our context set up so let's make this smaller again so now we need basically kind of map up our button make sure it actually does something so what we need to do is we need to go to our result cards component and inside of our result card we need to make a few changes here so we're not just important react now we also want to in curly braces use context because we're going to make use of the context and then underneath here as well we're going to import the global context and that's going to be imported from context slash global state so we now have access to that global context and then from this we can we can basically grab our action the action we created which was add movie to watch this so we can D structure here and grab the add movie to watch list and then that's gonna be from not from sorry it's equal to use context and then global context inside him so we now have access to this add movie to watch this action that we've created which basically means we can use it and we can tie it up to our button so if we go to on click so we're willing to make an on click event so when we click on this on this on this button we want to trigger add movie to watch list and then we're gonna send it movie so the movie object all of the which we have access to here in the props so let's test this out and let's see if we were getting the results we want so let's go to Harry Potter again I'm just using Harry Potter because and easy film everyone or understand and then when I click at to watch list here you can see that it just updated the reducer here and the movie is now added to the watch list which is perfect but the trouble is this button is now not grayed out if I was to add to watch list again you can see that adds it twice as we click on it which we don't really want we want to fix that so I'm just going to refresh the page so it clears the context and then let's add some a little bit of functionality to prevent you adding a movie twice for example so at the top of this component for what we're gonna do is make this a lot smaller and here so let's make a constant variable a lack thereof or even less stored movie so what we're gonna do is we're gonna search the watch list what we want to do is we want to search the watch list store and see if the movie is already in that so from our context we want to and we want access to the watchlist so we want access the watchlist array here and then what we're going to do is we're going to search the watchlist so I'm going to watch it stuff find so we're going to search for any objects which have an equal ID to the object we're trying to add so we're going to search any movies we're going to search through the array and see if the movie is already in the watchlist basically this is so if a movie is that it's going to return a stored this is going to return a stored movie it's gonna return an object here so basically we don't want them to we don't want our users to be able to add a movie if it's already in there so let's make a new variable called watchlist disabled and this is going to be equal to true or false if there is a movie on us in that if there is a stored movie to store the movie so if this is not equal to null if something is returned from our store movie it's gonna be troops it because it's gonna return true we want to disable our button which is what we're a user this variable wants disabled it's because there is a movie if nothing is returned basically if the movie is not in the watch this we can return false and then what we can do is on our button down here we can add a disabled element and then we can make that equal to this variable here so creating that equal to that variable there seem gonna it's gonna disable the button if that the movies audio and then watch this so let's add Harry Potter so I'll watch this again and as you can see straight away there so now disabled our button because it's recognized our store has been updated and the movie is in there so if I even take away our search and search again it's still in there so the problem we have at the moment is that we're not actually persisting any data our data is basically lost if we if we were to refresh the page or something like this so if i refresh the page here so our first of Austria I'll inspect the element we'll go back to our components in here if we go to global provider inside here inside of our reducer if you guys to watch this here you can see that our watch this is full it's got a movie in it if i refresh the page we lose that watch list it's not persisted the data isn't persisted which is a problem so we want a bit we want to stop that basically we want to every time we refresh the page we want our watch this to stay where it is so there's a few things you could do first we could do we could build a database if we can store all that stuff in the database but we're not going to do that for this tutorial what we're actually going to do is going to make use of local storage so we're gonna store our values in local storage store our movies and local storage so that when the application is opened again it's gonna a can access those movies stored in our local storage so what I'm gonna do is going to go back to global stay in here and what we did inside of our global state component is we imported use effect which we're going to make use of now so inside of our provider here we're going to make use of use effect so what this does use effect is basically triggered whenever the state is changed inside of our provider so whenever an item is added to our movie when whenever an item is added to the movie it does that it adds it straight to the sorry whenever a movie is added to our watch list watchlist this use effects think this use effects function here is triggered so what we want to do is basically saying whenever this is triggered we want to save to our local storage our watch list so what we're gonna do is we're going to do local storage set item watch list and then if you're not where local storage has to be a string so what we're gonna do is we're gonna do Jason dot stringify because at the moment we've got an array which obviously isn't a string so we can do json stringify and we can do state dot watch list which converts our watch list array into a string and then we'll store it in the in our local storage as watch list and then we pass it the state here as well since we're accessing that state so we do a comma and stay in there so basically what this now does is if we make a change here so if I go to if I type in Harry Potter I add it to a watch list it's now added it to our local storage which we can check in chrome by going on the drop-down here and go to application when you're in the dev tools and we can look inside of the local storage here so if you go to the local storage tab here and it's local storage here we've now got a watch list item which has a Harry Potter movie inside of it inside of here it has our array stored but as a string inside here so it's got a movie store in here which is brilliant but at the moment this still doesn't let me inspect it here if we refresh the page again it's we're not making use of that local storage yet so photo time and Harry Potter again it's not come up it's not a bit dated our provider it's still stored in our local storage it's still our okay it's not because we've asked that we've used a fact there so it's deleted our local storage at the moment but what we're going to do is basically when the application first loads is we want to we want our initial state to take the value off our local storage items so inside of our we're gonna make it basically we're going to do is we're gonna make a few changes here so we're gonna go into the watch list here and we're gonna check if there is anything stored in our local storage so we're gonna do the local storage dot gets item watch list so this basically checks if there is anything in our in our local storage as the watch this so if there is stuff in that if we do have a local storage item called watch list what we want to return is json.parse so it turns it back from a string to an array so we're gonna basically return our local storage as I watch lis return our local storage to the initial state of our store and if there isn't any so what when is ooh so at the moment if there is a local storage variable we're returning the JSON dope-ass but if there isn't anything we can just return our empty array again and what we're gonna do is whilst we're here we're gonna do exactly the same for our watch list so I'm going to copy this down paste this here I'm gonna change these variable to watched in here and we're gonna change this to watched and this to watch also so we're just setting this up for when we make our watched list as well and I'm gonna do exactly the same here so I'm gonna score our so I'm gonna do it make a novel local storage it's called watched and then we're gonna Jason dot stringify poop states dot watched this time so that's gonna store our watched items when we get to the functionality of that as well in our in our store probably that so that's in less feeling the best way to do this now is for Harry Potter so it's adding to our watch list and now if we refresh the page you can see that it's kept our state it's now used our local storage is as the initial state in our watch list so we have now persisted that data because it's grabbing it from the local storage which is brilliant that means we can now refresh the application we could stop the application start again and we'd remain and keep our data in there whilst it's still in local storage which is brilliant so yes so that basically sums up our add to watch list kind of functionality in here which is perfect when our persisting it so we now want to display that watch this basically so we're gonna go to our watch so we're gonna make some changes to our watch list component in here so inside of our watch list let's make a let's make some changes in here so we want access to our movies now that we've got stored in our context so it inside this component so that we can display them in a nice grid so we're gonna import use context from from react there we're gonna import the global context from context context touch global state and then inside of our component here we can access our watch list using context use context global context so we're accessing our watch this array from here so as a quick demonstration I'll watch this stock map and then movie and then we'll just return a h1 with movie title so there you can see the the film we added to the watch list is now is now we're now accessing it from our watch list files to one another films another Harry Potter film at its watchlist go back to our watch this component here you can now see two titles and here because we've accessed it from the store which is brilliant so what we want to do is we're gonna Pat out this page you're gonna give some proper styling and some proper markup so I'm going to make a div with the class of movie page and then gonna put it inside of a container and then we're gonna have a header element h1 the class name of heading and that's going to be my watchlist and then underneath this header we're going to add some more to the header Onis and kind of shortly but then we want to do we want to basically return our watch list so I think the main thing we want to do first is probably we want to make a movie cart component so we're gonna make a new component that kind of displays our movies so we're gonna make a new component called you can put in there called movie car drop Jess I'm gonna make a functional component again and then we're gonna give inside here a class name of movie part you know give it a div of overlay inside there that's just for some styling don't worry too much about that and then from the result we're gonna bring back to the result card we want to basically display the poster so we're gonna copy this this bit here in fact we can copy these two lied this whole bit of lining lines here and we're gonna paste this in here cuz we want the same kind of thing to access the movie we need to put movie and curly braces up here I forgot to do that other starts we're gonna pass in as a prop again and we're also gonna have a prop called type as well so this type is gonna be even even equal to watchlist if it's in the watch list or it's gonna be equal to watched if it's in the watched list there so we're gonna we're gonna work on that functionality in a second but so basically for now if we go back to our watch list what we won't want to do is we want to map through our watch list and we're gonna make a movie grid and we're gonna map through our watch lists a watch list dot map movie so we're gonna grab there it's gonna be cool movie the individual elements going to cool movie and then the individual object I'll say sorry and then that's gonna be we're gonna use our movie card and then we're gonna pass it the prop of movie so it's got access to the movie data and then the type is gonna be equal to watch list as we said that with the tight property equal to watch this as we just explained so we need to import the movie card up here as well to import movie card from movie Carla there and then oh okay so what we're done wrong here ah okay so I've done curly braces there and I should have done round braces which is my mistake there so if we replace these with round braces still us and Nelson I need to remove that semi code on there and now you can see that our movies are returned as nice posters which is brilliant I'm actually gonna change this slightly though I'm gonna return a we're gonna check if the watch list so is empty so if it's empty we're gonna return something that says like no movies and your watch list if it's not empty then we're gonna return obviously our movie grid here so let's add that functionality and so we're gonna make curly braces and then we watch length watch list length is more than zero so if it is more than zero we're gonna return this movie grid with our movies inside this I'm going to copy and paste that inside that and then if not so we're gonna do : so if that's not true if there are no movies we're gonna return a h2 with the class name of no movies and then we're gonna put no movies in your list add some so basically a fat is empty with no return nice little string in there to actor tell people to add it to that watch list so it's not there at the moment but we can't say that string because there's movies in there the length is more than zero but if we have no movies in here it would work properly so now what we want to do is we want to work on some controls so from here we want some controls to basically remove it from our watch list we want like a little cross to remove it or maybe and then an icon to add it to our watch list so if we watch the movie wanna click an icon and I'll move it to our watch list so we're gonna work on that now so what we're gonna do is we are going to go into a movie card component if I were going to make a new component called unless the new component is going to be called movie controls and then we're gonna do our AFC again so I'm gonna have access so we're gonna basically make some make a movie controls functional component and then this is going to have the variables of movie and type so we're also going to pass these props down to this these movie controls again as well so we're gonna make a new div called inner card controls because these are gonna overlay the card and then we're gonna make some buttons so depending if it's in the watch list we want different controls to them so if it's in the already already watched list so if the type is equal to watch list we're gonna return the following we're gonna return so we're gonna use react fragments which is just which is just brackets with no kind of no element inside there and we're gonna return a button which is going to have the class of control button or ctrl button and then inside there we're gonna use some fun awesome icons so we're gonna give a class I with the class of FA FW so that gives it a fixed width and then we're gonna do FA r dot FA I so you if that wasn't that clear you can follow that now and this basically gives us the like an eye icon and then we're gonna copy this down and we're going to have a icon which is FA and then it's gonna be f8 x which is going to give us our cross item which is going to allow us to remove it from our watch list so let's go to our movie card we need to import these controls now so we're gonna import movie controls from movie controls and then underneath our poster we're gonna return movie controls and then we're gonna have a type of type so I'm gonna pass it the types and the controls know what type is where it's in the watch list or watched list movie there so we're gonna pass a movie there so as we can see now when we hover over we've got our nice controls so we can add it to our watch list when we click this button or we can remove it from the watch list if we click this button obviously there's no functionality yet at the moment we're gonna work on that at the moment so let's get a look inside of here let's remove that so as we click each button it's gonna add some effects now I'm not quite sure why we've got some different hover effects on here these one on it on the original value I'm not sure if it's cuz we've inspected but whatever the controls still work nicely they still look good at the moment okay so the first thing I think we'll do is we'll work on the functionality to remove the movie from our watch list so what we need to do is we need to go back to our global stay it's mainly smaller and we need to make a action to remove a movie from the watch list so if we go to global stay up here again so what we're gonna do is I'm gonna make a new action and this action is gonna be called remove from watch list so const remove movie from watch list and what we're gonna do this time is just pass an ID we don't need the full movie we just need the ID to work out which movie we're gonna remove so we're gonna pass it the movie ID and then we're gonna dispatch a type of so in curly braces type of remove movie from watch list and then it's gonna have a payload of ID so we're gonna pass that idea as a payload there so we then need to pass this remove movie from watch list function here to our global context provider so that we can access it from other components and then what we need to do is we need to go under close all our other tabs cuz it's getting slightly confusing at the moment so then inside of our a producer we need to tell it what to do when this when this dispatch is called we need to tell our reducer tells us what to do with that data what to do with our payload so inside of our a producer we're going to make a new case which is remove movie from watchlist and this time what we're doing is returning again the existing state but then we want to modify watchlist and this and this one we added added to our array on this next one we want to filter the array so that it removes a movie so we're gonna do state don't watch list dot filter and then movie inside of here and then what we're gonna do is if the movie dot ID is not equal to action dot payloads so what this is going to do it's going to filter through the array and it's going to return all of the movies that are not equal to the ID we just passed it so it's basically gonna remove the ID we passed it the movie that we pass it from the state so we can go into arm so now that we've done this so we've made our action would pass it through we can now use our action inside of our movie controls so simple have our movie controls element here and inside the controls now so we now want to use as well as use it as react we want to import use context and then we also want to import global context and there from the context as as previously and then global state inside here so basically we now need to grab that action that we created so you do const curly braces and remove movie from watchlist and then that's going to use the context and that's gonna be global context and then we can on our remove button which is this element here we're gonna make an on-click event where we use the remove from watchlist action and we pass in the movie ID the ID that we provided it so let's try this out this should now all be working so if we click the cross on the I bought a film here you can see that it was immediately removed from the watch list which is perfect we've got the functionality working there properly so now we want to make some changes to we want to basically add it to a watch list so we've got a watched I watched page here we want to be able to move movies to our watch page to see what movies we've watched so what I'm gonna do is we're going to basically make basically we're gonna use what's we'll do first letter Sri Sri Pat out I think maybe we'll pad out the watch page to begin with so it's ready to go so inside of our watch page we need to use the context we need to import use context from react then the global context from global to the global state variable - and then context / global state and then we're going to put the movie card because we're gonna use a movie card again from movie card and then actually what I'm gonna do is I'm going to copy the the code that we used for the watch list and make some change it's the watch list and make some changes to it so it's gonna be a similar page but we just want a few changes so let's copy this from our return statement on the watch list let's paste this in here so instead of my watch list is going to be watched movies and then from our global context instead of importing the watch list we're going to import watched this time so it's going to be the movies we've already seen not from equals use context label context so we're going to use our global context to access it there and then inside of here instead of doing watched list length we need this is why we got errors here we're doing watched so we need to change the watch list variable to watched and then we're gonna return a movie card it's gonna be the same movie card but this time the type isn't watchlist it's watched and then if we say that we should have also our functionality all going so we go to our watch page now there's no movies in the moment so we get this string saying no movies in your watchlist add more so this is all basically set up to show our movies and our watch list once we move them let's go back to our let's go back to our global state we need to make an action to move a movie from our watch list to watch two watched if that makes sense so inside of our global state here we are going to do a Const add movie to watched and that's going to be equal to movie so what this is going to do so we're going to pass it a movie - well this is gonna do it's gonna move it from our watch list to our watched lip to our other list so type add movie to watch we're gonna pull out that the payload is going to be movie and then we need to remember to pass this to our value and in our global context or add movie to watched pass that in there and then we need to go to our app producer again and inside of our a producer we need to make a new case called add movie - watched and inside of that case we're gonna return the stake and then the watch so this time what we're going to do is we want to do okay this is a writer server look let's think what we need to do in here so we need to remove it from the watch list so we need to so what we're gonna do is we're gonna copy down this filter here so you to remove our movie from the watch list and then we need to add it to the watch component so we're not passing the ID this time so action dot payload isn't enough we need to do action dot pay node ID here just going to search for movies it's gonna return the movies that aren't equal to the new movie we're adding so it's removing it from the watch list with this filter here and then we want to add it to the watch so action doc a load so similar to this up here but we're gonna do dot o lost up race there state dots watched so that should be it that's the functionality for moving into the watch list so if we go back to our movie controls now we can import I can't remember what we called it what do we call it add movie to watched so we can as next to the remove movie from watch this we can also import add movie to watched from our context and then we can add the functionality here so let's look so inside of our button here on click we're going to so when we click on the function we are going to add movie to watch in here and we're gonna pass it the whole movie so let's give that a go then so if we click this here you should see that it's removed it from our watch list which is perfect and then we go to our watched movies and it's added it to our watched watched bit here which is perfect so exactly what we wanted so we've got no controls on here at the moment because on our movie controls here we've made a type of watch lists that this has a type of watched so it's different so we need to make some controls for this watched items as well so what do we want in the controls to there so let's have a thing we want to basically we want to be able to move it back to our watch list so let's make it type is equal to watched and then when the type is equal to that we're gonna return the following controls so we're gonna make do our triangular brackets again we're at fragment and then we're gonna have a button here and that's this one so just copy the button from above just with magic facts let's write our own button that's got some extra date we're down a so we're gonna make a new button with a class of control button and then this one is going to have a FA so gonna make another icon and this icon is gonna be FA our FA I slash so if you guys want to copy that it's easier to copy once I've extend the component there so now when we hover over something on our watched movies you can get you get this little this little slash icon which was basically we're gonna add some functionality to move it back to our watch list so our watch list we can move it from our botched or watch this in case we've accidentally added it in there or something like that and then we want another one here as well which is going to be the FA times again so I'm going to copy these classes here so this one's going to allow us to remove it from the watched list as well so not just from the so not just from the watch list we need to be able to remove it from this list as well okay so we need to work on some actions then some more actions let's go to global State so we're going to work on two new actions so what do we need to have got add movie to watch we also need move back to watch lists and move to watch lists and then we need remove from watched so let's work on this one first we're gonna make a new constand it's gonna be moved to watch list it's gonna be equal to movie and then we're gonna scratch a type of move to was gonna move to watch list and then the payload in this it's gonna be the movie again and then we'll work so we need to pass this to our global context provider here as well so move to watch list and is that what's oh I've touched a movie that move to watch list and then let's make the remove from watch so let's make an action for that so remove from watched so this action is just going to take in an idea again when we're removing we don't need all the other data so we're going to dispatch and make it tight remove from watched and then the payload of ID so the payload of ID there let's make this smaller so you guys can copy along properly and then again we need to add this this action here to our global context provider so we can use it from our other components so we need to go to our reducer again so our a producer and we need to make some cases for these so move to watch list one will do first so case move to watch list and we're going to return I usually we're going to return the initial state and then the what we're going to do is this time basically doing the opposite of this so this one we're going to do watch we want to remove it from the watched so we're gonna do state dot watched dot filter so we're gonna filter through this array and only return movies are not equal to the one we want to remove so movie ID is not equal to the action dot payload the ID so it's literally the same as this one above just basically swapped around so this one is watched and sort of watchlist and this one's gonna be watchlist and step that makes sense so we're just doing the opposites here so I could've just copied this down but we'll type out anyway and then so our watch list we need to then do action got payload so it's adding our movie back to the front of our watch list which is exactly what we want okay so stayed or watch this that should be working absolutely fine there and then we can do a case and we could do remove from watch so this is our second action that we need to do and then we're gonna return done a lot of state and then watched so we're just gonna filter out this array so basically using this one again so we're gonna filter out the array movie movie dydy a is not equal to action payload so this actual payload because we're sending the ID we can just access action dot payload over the reason we use action dot payload ID in this one is because we're passing the whole movie so we need to access the ID from the whole movie this one we're just passing the ID so we can just do action dot payload so this should now give us the proper functionality for us to go back to our controls so we can get all this what's going on there snot resizing with it okay so let's go to our movie controls again so inside here now we can import what they call this everything Mori forget and what would call them so we move to watch list and then remove from watched so there are the new actions we is created from the context there and we want to basically add this functionality to our buttons properly here so on click here want to move to watch list I'm gonna pass it the movie so when we click this button here it's going to be added add it to our watch list again and then this one is going to add it and remove it from the watch list in total all together sorry so we're gonna just pass it this one we're passing the ID so we're gonna pass and remove the ID so let's give this a go so if I click this it should remove it from our watched this which is perfect and it's added into our watched so we can add it back from our watch list to our watch so it's all working perfectly the functionality there and then I can just delete this from my watch list all together so it's deleted from both lists which is perfect so we've got pretty much all of our functionality working now we've just got some things we need to tidy up in terms of adding more movies so that's all of our basic functionality done but when we go to add so let's add a and let's have the movie back again doesn't add a different movie still Avengers the Avengers so let's add it to the watch list so if we've got this movie on our watch list and then let's say we decide to add it we've watched it we're gonna add it to our other list we're gonna click this button it's now on our watch list but if we go to add you can see that we can still add it to our watch list now we don't want that we don't want to be able to add it to our watch list if it's already you know if if we've already got it watched we don't want to be able to Alex well watch list so we need to make some changes to the add component it's basically add some rules in there to say actually no it's already in the other list so we need to check our watched list not just our normal list so not add we need to get a result card that's where it's stored and rizal cards so this one is basically checking the result card so we yeah if you remember previously would disabled the button depending on you know whether or not it was appearing in the watch list but we also want to check if it's in the watch list as well so we're gonna make another one so we're going to make another variable here stored movie watched and we're gonna look we're gonna look for inside the watched array we're gonna look for the movie and see if it's in there so we can check inside this one as well as it's checking to watch this this time but you can see we've got a undefined error we forgot to import there we haven't imported the movie we haven't imported the watched array from the context here so if we turn than that that should fix it perfectly up there just go back to the Avengers oh there are still Avengers from there so we need to make some changes to this so we want to disable the button if the stored movie is if it's stored so if it's inside the watchlist we obviously want to stable the button but we also want to check if it's stored in the watched list so we're going to add we're gonna change this we're going to add another if statement in here saying stored movie washed so if this returns a value we're gonna return true and then false from here so we're extending this functionality a little bit here so it checks both of the arrays in here so now it disables the button as you can see because it's not in our watch list but it is in our watched list list so this perfect we now we're now to saving the button so it doesn't just do it from here which is great and I think what we also want to do is we want to add another button down here to not just add it to our watch list but we can also add them straight to our watched already so let's make a new button I've copy and paste of this one down let's move this to add to watch and then we need to import the action up here so add movie to watch is that what it was oh no it were ya know add movie to watched in here and then we can pass add movie to watched in here so you can see inside here also we need to make some another one here so we need some slightly different rules inside the watched disabled button so on this we need to make another variable here so this one is watch this disabled gonna make another variable here so watched disable to warn us if we disable the button here so we're gonna check the stored movie watched here so I'm gonna use this variable here and if it is in there and we return true it's not false and then we can pass this in here so instead of watched list disabled room watch disabled so this basically means if say I have a film in the watchlist it won't now disabled this button as well but what I can do is if I add it to watched it disables both buttons if it's in the watch watch if that makes sense so I watched movies we've still got we've got two in the Avengers there so let's let's just test this out a bit more so if I add the Avengers if I want to add the Avengers again I can't do it but let's say I want to add whatever movie comes next to sit Iron Man just add that to the watchlist it appears and then watch this which is perfect and then if I go to Iron Man in here you can see that this button is still one we can still add it to the watch bit which is great so let's go back to this watch this has add it to watched so it appears now and I watched and we can check that it disables both buttons which is working perfectly so this pretty much sums up our sums up our application that's add a few movies to the watch lists and a few that watched to fill out a bit and you see we've got our nice watch list we've got our watched list I can mark something as watched and appear in the watch thing I can move it back to our watch list using this which it does they're perfectly me so it's all working really nicely and that basically sums up the tutorial I'm gonna do a little bit of a little bit of some nicer kind of display on here some bit more UI basically let's make a kind of count counter in the top rights that's how many movies are in there so inside of our header element in our watch list I'm gonna mad spam with the class of count pill and then I'm gonna do watch dot length and then movies Oh watch list got length sorry we're using the watch list so there's four movies but what I'm gonna do is and here I'm gonna make a an operator in here because if the watched length is equal to one we want to return is equal to one we're going to return the string movie rather than movies you've got one movie in there not one movies and then leave now so this is just that kind of making sure I've done it again watch lists in here so you kind of make sure it displays nicely so I'm going to copy this and I'm going to go over to our watched component here so go into the watch component and I'm gonna paste it down here change these to watch list for watching here so we have a nice little counter on both of our things we've got six movies in our watch list for movies in there and that pretty much sums up the tutorials so we have a let's expand this we have a fully for a fully functioning watch list so I hope you liked the tutorial I hope it explained things properly if you need any extra help just post it in the description on the description sorry the comments below I'll be able to help follow me on Twitter that's down in the description below Matt Dobson web and again if you would have seen the video earlier explaining Luke my platform loot bro but you can post your project on loop row the platform that I've created for creators to get social about what they're working on so post your stuff like your tutorials and your outcome on to that platform that'd be great and let me know what other tutorials you want to see I'm willing to work on more I'm thinking I might do a vanilla JavaScript version of this so we don't use react could just be vanilla JavaScript and then you know there's a few more a few more bit so I can I can do so a few more kind of tutorials I can work on they're kind of in the works already so yeah just let me know what you want to see so thank you very much for watching and I'll see you in the next tutorial

Channel: Matt The Dev

Views: 79,205

Keywords: react, react hooks, react context api, movie watchlist, code, project, tutorial, watchlist, movie, api, fetch, local storage, tmdb, movie database, how to, guide, react redux, redux, store, context, state, vscode, extensions, beginner

Id: 1eO_hNYzaSc

Length: 86min 38sec (5198 seconds)

Published: Wed May 27 2020