Learn how to use GraphQL and GraphCMS by building a Next.js Disney+ Clone! In this 2hr tutorial I show you how to use a Headless CMS in order to build a working streaming app. You must sign up here to follow along with the tutorial: https://go.graphcms.com/
hello everyone so I'm super excited for this we're going to learn how to build a Disney clone using
a Content management system but not just any content management system one that is based on graphql
okay so a lot to learn in this video we're going to learn how to create schemas and models and then we're going
to use that in order to upload data such as MP4 files and jpo files and strings
onto our content management system and then we're going to learn how to retrieve that data back using queries
and mutations okay so queries retrieve all data and mutations to edit delete
and create a new data too okay so this is what the finished product will look like by the end as you
can see there is a page like a home page where you can view all the videos based on category and if you click through
into a card you will see the individual item and if you click play a video will
appear there's a lot happening behind the scenes there is a mutation happening here but don't worry we will cover that
as we go wonderful now the only prerequisites that I asked of you before starting this
course is to have a basic understanding of JavaScript HTML CSS and react and
whilst next year s is nice it is not necessary for this video so it is going
to be a long one but loads to learn so I hope you're super excited I can't wait to get going let's get to it as always
please do give me that sub if you do like my channel as this really is the way this channel can grow and I can
continue to create free content for everyone here okay so let's get to it the first thing
I do is obviously just log in to my graph CMS now I've already signed in but
if you haven't used this before then please do take the time to sign up just post here and do so until you see this
dashboard right here so now the first thing I'm going to do is just create a new project I'm going
to start off with a blank project as I want to be doing this completely from scratch of course if you ever want to
come back here there are plenty of templates for you to make your life easier too
so I'm just going to click here and what shall we call this I'm going to call this
Disney plan a clone of Disney
for educational purposes just in case I get sued for educational purposes
great and I'm just going to click Europe because that is where I am
and create a project so that should get my project set up in
order for me to start working on my schema okay first off I'm just gonna select
free forever so I'm just going to select that plan
and I'm going to select invite later okay great so here we are on the dashboard I mean I
know what to do the first thing we're going to do is set up some schema the next thing we're going to do is create some content and then we're going to
make our API accessible so that we can use it in our project so let's go ahead and do that we will be
using the interactive playground as well I'm going to show you how to do that so we're going to cover all these four points essentially
so just in here here is the first thing we're going to do is going to create some schema
now the schema that I want to make I think the first thing we should make is the video as that's the first thing we
need to create really so I'm just going to go ahead and create a model and I'm just going to call it a video like so
I'm gonna let these Auto populate because I'm happy with that this is looking great plural of videos videos
and the API ID that looks good to me too we can put a description but I'm not
going to for now if you are using this in teams then perhaps that is wise as it does make your work more readable to
everyone else and just create
okay so now that we are here perhaps this click don't show again all I'm
going to do is create my video model so what do we want our video to have well I
wanted to have a title so that is going to be a single line text I'm going to put title uh
again description I don't really want this and do we want to allow multiple
values no we don't want any of that and then we can also put make this field required okay so that we have to put a
title in for our video so that's just what I'm going to select and this looks good and I'm just going to click create
okay so I'm going to do this first and then we'll talk through a little bit so I've just added a title to my video
model the next thing I want to do is put a description so maybe let's make this a
multi-line text let's call this description and then shall we make this required
let's make a required so I'm saying that anytime I want to create a video in my
uh I guess content manager it has a title and I
have to put in a description I also have to put in an mp4 file right because that is the main Crux of a video so I'm
actually going to go to asset picker and let's call this an mp4 and then let's
also make this a required field and just click create
so this is looking good now what else do I want I can also have a Boolean so I
can actually select a Boolean of if this video has been seen or not so I'm just
going to put a scene and this does not need to be required I'm just going to put those optional
and the next thing we need to do is have a slug for those of you who don't know what a slug is a slug is simply a uh way
a URL identifier okay so that if we visit the slug that we will visit the video itself so let's call this slug
like so and again I'm going to make it required and it's already set as unique
that is good and wonderful I'm not sure if we do need to
do anything else here we've got the display name we've got this we can also
have generate slug from template let's just have that and let's generate this slug based on the title okay that we
give the video so that is the Syntax for doing that I can of course generate this by whatever I wish I'm choosing to
generate it by the title and it's going to be lower case
okay and this is looking good and create
great I need to do two more things so I also want to add a thumbnail so that is
going to be an image so once again I'm just going to select the asset picker and I'm going to make it a thumbnail
like so spinning thumbnail correctly and I am going to say
that this is not required and I'm just going to create and the last thing I want to do is
actually add some tags to this too so I'm just going to select this so I can
essentially put tags to the video so that you know like on uh Disney plus you probably have a video that belongs to
family comedy and so on so that's exactly what I want to do let's call this tags making sure that it's capital
and this time well I want to allow this to have multiple values so I'm just
going to select this and create okay great so that is our video model
wonderful okay so our video model is going to have a title description MP4 we're going to allow it to be seen or
not seen it's also going to generate a slug for US based on the title and then we're also going to request a thumbnail
to add it to the video and some tags wonderful okay we have to actually reference this
but I think let's continue first because that is something I'm going to do last I essentially want to reference it to a
specific user or platform but let's get to creating the usual platform first so
we've got the video the next thing I want to do is
create a unique platform okay so just imagine that each platform has its
specific ID because you want to know exactly what videos have been seen on that platform so say it's the Smith's
family's platform they're going to watch some videos if it's someone else's platform they're going to watch some different videos and so on so let's go
ahead and do that so once again I'm creating a new model so we've got a video model and our platform model I'm
just gonna click that like so okay and what do we want in our platform
model well we could have a title sure let's give it a title just so we
can sort of identify you know as the Smith's families or so on and let's make this required
so make required field I'm also going to generate a slug for it so once again a
slug the display name is going to be a slug
and then again let's make this required but also setfield is unique and great
let's go ahead and create that
and one last thing each platform is going to consist of multiple videos however I want to reference this video
okay I don't want it to be the video itself I want to reference the video so
to make a reference I'm just going to show you how to do that I'm just going to click and click here sorry and I'm
going to say that I want to define the relationship allow multiple models to be
referenced so this one right here and I'm going to the model I want to reference is the video model so just
like so it's going to be a two-way reference with one two
many like so
okay great so one to many that looks good
allow multiple videos per platform but don't allow multiple platforms per video
okay so that makes sense one platform uh has multiple videos not the other way
around and finally okay so this is good let's continue
let's give it a display now so I'm just going to call this video reference like
so and give it the API ID of video reference
and wonderful that we're going to leave as it is and click create
okay great so this is looking good we've got the platform we have the video the last
thing I'm going to do is just create accounts so let's go ahead and do this again I'm going to call I'm going to
create a model for an account just like so and click create model
and what would we like our account models look like well I want it to have a username so that each account has a
username which is going to be a required field to make required and that's about
it the next thing that I'm going to do is run an avatar because each account comes with this little picture so let's
call this Avatar just like so and okay this is looking good do we want allow
multiple presence no so let's just create that okay so there we go and one last thing each
account is of course going to be linked with you guessed a platform
so let's do that we want the model to reference platform and it's going to be a one-way reference one two one
and we don't want to allow multiple platforms per account we just want it as
it is so it's going to be a one-to-one relationship and continue create
wonderful okay so I think that is all we need to get started in putting our data
and assets into this platform Okay so we've created our models we've defined
the relationships between the models now let's get to using what we have built so
let's get to it so we've completed this part the schema let's move down content
wonderful okay so now that we have done that I'm
just going to create my first item so let's make this a video I'm just going to select here and ta-da so everything
that we created in the first part so in the schema part you will see I'm being asked for a title which is required a
description which is required and then before file which is required the booleant associated with an account or a
platform and then to create a slug which is auto-generated and add some tags as
well as a thumbnail that is crazy I've literally just built this and it's in front of my face I'm being asked to put
this data and only this data nothing else so let's do it what should we call my first film let's
call it Jaws a film about a shark
let's maybe make a little bit longer just real so we have something to work with a thumb bat shark uh this is a
classic film that is pretty scary at times
and just great in other times okay
I mean I'm not I'm not a copywriter don't hire me as a copywriter clearly
Okay so we've got a title a description let's add an existing MP4 so I'm just
going to actually upload the trailer because I don't want to be here forever so all I'm going to do is drag it in
from my downloads I'm probably going to speed this up
because you don't really want to watch this so boom
great and now seeing I'm actually going to just leave it I'm not going to leave it true or false I'm just going to leave
it as null the slug has been generated from the title for me as we requested
and I'm just going to add a thumbnail so I'm just going to upload a thumbnail for
this one that I have also just downloaded
and just click upload okay so there we go and tags what we're going to put I'm
gonna put classic what else can we do we can put Thriller
I'm not sure this is a Disney's one but just bear with me I'm sure it's fine let's also is it family it's not really
family is it let's put scary or let's put uh drama
and let's put animals
okay I'm just gonna try to do four for each again probably shouldn't work at Disney plus because these tags don't
really make sense but I'm liking them anyway okay so hopefully you get the gist okay and then once we have
everything we can we also do need to link this to a platform we don't have one yet so I can actually choose to
create a new platform from here so let's go ahead and do that let's call this
platform Smith's family so it's whatever they chose to
call this platform when they signed up to Disney and then let's generate a slug perhaps let's make it random this time
let's go ahead and just make it quite random so this is something that
let's say we just generated okay and
wonderful so this is looking good and then of course
um we would have to add video references so this is essentially saying which videos the family Can See For example
maybe they're in a different region like Europe that's different to America and I know that Netflix doesn't allow certain
videos on certain networks so so we would then have to add an existing document but we haven't published this
one yet so I'm just going to save and publish this everything that we've made so far
and great so now our video is published and
if we go to platforms oops now we need to publish this too so we just published the platform now we need to publish this
and let's publish all of these as well so everything is now published great and if we go into
the platform let's edit the platform and wonderful so we have a video that is
referenced to as well okay and if we edit it you will see it's Jaws great
wonderful and now let's just create an account so I'm going to create an account my username for the Smith family
for some reason I'm called Anya Smith so maybe let's do that Ania Smith oh one that's the username and then it's
given me an avatar so I'm just going to upload an image of myself
there we go and upload great so username and a headshot and
which platform do I want to associate myself with well I want to associate myself with the Smith family so let's go
ahead and do that and save and publish great okay so Anya Smith part of the
Smith family can see jaws okay because that is what we have done we've linked all this up Jaws is available on the
Smith family platform that I as Anya Smith have access to wonderful
so ideally we would have a lot of data here however I don't want this to be all about data uploading
um so I'm gonna upload four videos just to get to the coding part and then at the end I'll show you what the platform
looks like with a bunch of other data but like I said I don't want you to sit here while I just upload uh you know
dozens of videos so let's just do four Mulan a Disney
classic in which uh girl or young woman goes to fight for
China okay
now um once again let's add this to an existing platform so the
Smith family platform they can watch Mulan let's put an existing MP4 so I'm going
to upload one two here of the Mulan
trailer once again
great so we've got the MP4 trailer c not seen I'm gonna leave that as blank the slug has been generated for me from the
title so it's really good or lowercase and let's add a thumbnail so once again I'm simply going to drag that in from my
downloads and then Tags I'm going to put classic
here I do think it's a classic I'm also going to put family
I'm also going to put drama and I'm also going to put Disney because that is a Disney classic
so I'm gonna put Disney in there too okay great and save and publish let me just
check that we've done all of this okay tip and publish
select all save and publish correct okay two two more that we're going to
make publish
create item this time Moana is story
don't really know the story very well of a young girl who meets a demi
what and saves the
world okay I'm not sure if you saved the world but you know what I uh I just needed
something she saved something okay add an existing platform once again the Smith family platform's gonna be linked
to this they can watch Moana existing MP4
let's upload Moana official trailer so there we go and once again I'm gonna speed this up
great and add an existing thumbnail
so I'm just going to select that one that looks good and tags once again let's put family
this is a Disney film so once again I'm going to put Disney it's not like Marvel or anything
Star Wars uh let's also put what can we put here we need some more tags comedy
and let's also have what's your nose because it's quite hard
to think of these it's not really a drama Adventure
great so we have all of these filled in and we're dissociated with a platform great
save and publish select or save and publish okay wonderful one last one I promise uh
Four's really not enough but you'll get the gist of what we are doing so eternals we're gonna have a Marvel one I
don't really know what this is about either I just saw it when I was Googling a Marvel film
with I think it's Angelina Jolie so I'm going to put that calming
um this is a great film everyone should
see it immediately I mean no one Cena I think it's it's not
really even out yet okay
great so we have that once again at an existing platform The Smith's family can
see this you could replace the Smiths with like Europe or something you know and then have a Associated account with
Europe that have users if you want if you want to add in that extra layer if you really are as big as Disney uh but
this is just to give you an example of what you can do add an existing MP4 okay so I'm just
gonna upload and just upload that MP4
okay great and I think we're nearly done once again let's generate a slug and an
existing thumbnail so I'm just going to upload one again very last one now
so just there we go upload
and the tags we're gonna have for this well this is Marvel and then it's also our family I'm gonna
have Adventure again and let's maybe have
action um or let's put Thriller Just because I
want to have multiple tags okay so save and publish and we are done let's carry
on great so we have created our schema we've then done the content Parts we've
used our content manager to upload assets and data you know MP4 files and
jpegs and next we can actually see all the assets that we have so there we go you can see all
the images and the MP4s this is looking cool and then let's have a play around
in our API playground to see if our data actually comes back to us now for those of you who are the familiar with graphql
I'm going to show you how it works in a very crash course sort of way so let's
do it so to us dispersal we actually have the docs so this has been generated based on
the schema we wrote okay this is really clever so if you look here well you will recognize videos okay and
each video so we can query for all the videos so if you look here let's just go
a step back actually here is what I can do I can query for things so in other words I can search
for things in my data using the query word here or I can add stuff or edit
stuff or delete stuff using the mutation so I'm going to choose to query and this
is really helpful these docs have been essentially generated for us so if I want to query for videos I'm simply
going to write query open up some curly braces and if I want to search for videos
okay if I want to search for all the videos I can do so just like this and
then if I search for all the videos well what do I want to come back I want a video to come back and this video is
made up of we can have an idea you can also choose for these extra
things to come back so obviously we added the title
we also added a description we also added scene we also added a slug and we
also added tags but look at all the stuff we didn't add so created by updated by published thumbnail we did
add um so let's have a thumbnail thumbnail actually is part of an asset so these
okay let's go back to step one again so I didn't add an ID but this one's been generated for me which has the type of
ID we added a title which was a string we did choose for that to be a string same as the description a string scene
was a Boolean that's right slug was a string again a required string hence the uh I guess what's it called exclamation
point and the title strings in an array so that's also defined for us that's what's going to come back but all these
extra things such as created that updated that's that's extra stuff that we can get so
I'm just gonna go for it let's get created at let's see what that returns and then also a thumbnail now a
thumbnail is actually an asset okay because we did choose an asset and the asset comes with all of this as well so
I could just get the file name I could also get a height and width of the asset which is quite cool and then I can also
get the URL so that is one of the things I wanted so now if I run this
this is what returns so here is my data here are all the videos let's have a
look at the first object in here so that is one object you will see that the film
Jaws or the video draw as well that gave me the timestamp that I created this it also generated an ID for me so I can
pick it out there's the title I gave it there's the description I gave it we didn't set scene so that is null is this
slug that got generated for us the tags as an array of strings and the thumbnail URL so that I can get the thumbnail
wonderful and of course we have four of these objects because we made four videos
so that is how you would use a query to return all the data that we have okay so
maybe let's save this query we can of course like I said get more we can get the size of the thumb we can get all of
that one thing we did forget is to get the MP4 actually and what does the MP4 come with let's
see let's go back
as the MP4 it's an asset that comes with once again I think I just want the URL
yeah let's just grab the URL so there we go so this is what I want to
save let's save this query um
okay so here we go those are my queries and then let's make a new query so once
again query and this time I just want one video so let's go back to here let's
look at queries and I just want one video so here we go
video so now I need to open up these and I need to put where and for where
I need to get the unique identifier video so if I want let's just say I want the eternals
eternals have this ID so I'm going to grab that string I'm going to paste it
here okay and then what do I want to return well I can also do it by slug by
the way I didn't have to do ID that's what the documentation told me and then
foreign what do I want to return well I can
actually just return the same things so if I look at this query and I just take all of these
and whack them in here and run this
Oops why is that wrong uh okay we wrote this incorrectly where
I'm going to open up some curly braces and ID you have to give the ID like so
and now run it okay and there we go what is returned back to us is just the one video the
eternals video with all the information that we requested so all of this okay and I can also do it by slug
which is probably a lot more memorable so Slug and then I'm just going to put the string of
eternals a video not eternals how did I spell it
slug and see what this slug is for tunnels
tunnels
and there we go wonderful so we have created some schema we've
added content based on the schema we defined we have then had a look at all the assets and then we've played around
in the playground to check if our queries work and we've saved our queries so we can use them when we start
building our project so now I think this time start building our project let's do it
okay so to do this I am going to make a next JS app
so to do this I'm just going to get up my terminal I'm going to go into webstorm projects
and I'm just going to use the next command which is next.js
next to us create app just making sure I get the right command
because I can never remember it
okay this one right here npx create next app and let's call this
Disney clone and just click enter
okay so that is now at work it's going to essentially return back with a project that's been configured for us
with a template as well oops we need to install the Lotus so
let's just go ahead and do that
okay great so now let's get up webstorm or whatever code editor or ID you are
using it's going to get it up
I'm just going to open the Disney clown project
okay wonderful
okay so this is the command that I need to start this
I'm going to copy that go to that get the terminal and just
use npm run Dev and now I'm going to visit here
and wonderful so this is the boilerplate that it comes with I don't really like it we can obviously get rid of all of
this uh perhaps let's do that okay I'm just going to keep this running down here and actually no let's just make it
smaller we don't need it now so now it comes with a bunch of stuff a bunch of
stuff that I don't really want so let's go ahead and delete it in the pages in the index.js file I'm just going to get
rid of all of this so I'm literally just going to get all of this and delete it
okay so now we just have one div let's put hello to see if this has worked but
I'm pretty sure what it has and now we don't need any of these for now even though we might need the next image
later on so I'm just going to delete all of this
okay so that is now gone in the app.js file
the only file I want to keep for styling is this one we're not going to have that much styling so I think that's enough
and I'm just going to delete this file right here
okay so just the one style sheet now and we don't really need these either so I'm
going to delete this uh let's keep the fabric on why not so in here we've got a
fresh start and in here we've got a fresh start too um I'm just going to rename this just
because this is I prefer functional expressions okay so that is looking good and
index.js oops oh so we need to export default my
app okay and just in here too so I'm just
gonna once again change this to a functional expression so const
um equals it's just my preference you could have
kept it as it is export default wonderful
okay so now there we go we see the word hello I'm
just going to inspect this so we can see a little bit better what is going on
okay so now that we have done that I think the first thing we should do is
worry about getting our data and see if our data is coming in here correctly before we do anything else so let's do
that okay so the first thing I'm gonna do is
uh get the data so I'm going to do this like so the first thing that we need is
actually well because I will be making graphql queries I need to import the gql
tag to allow us to write in a subject like gql language and format and the
graph ql client
from a package called graph request
I can only spell things correctly request okay graphql request sorry that's the
correct package and this is what it looks like
so this is what we need okay and it comes with a bunch of really useful things if you want to have a look
at it then please do essentially we are going to be using this syntax to request
our data and pass through queries into as well so let's do it let's go ahead and
install this package so we can use it so let's get our terminal up I'm just going
to make a new a tab and do npm eye for install graphql
request okay so there we go that's installing I'm pretty sure that's the
only package we need but we'll see okay so now that we've done that I need to
this is the Syntax for getting static props we're going to get static props we're not going to get server-side props
uh so get static props
equals maybe let's make this bigger I don't know if you can read it get status products equals and this is going to be
an async function um right so to make a essentially if I
want to get this data right here well I would need to visit this URL and I'd also need a
token okay so because we are in here and
this essentially we don't need a token for this because we're signed in if I was just to visit this URL without a
token it wouldn't let me access this data okay so let's get a token so all I'm going to do is go to settings
I need to create a token so I'm just going to
click here and what should we call this Ania Dev token of course please feel
free to call this whatever you wish uh and then yes publish so create like so
okay
tunnels
and there we go wonderful
so now that we have that and I have access to the published stuff it's going
to create copy this because that is a token that we need and I am just going to
save it so for now I'm actually just going to put it as a
string here we should really save this to a NV file but let's just check it works here first of course I will be
deleting this so please don't go ahead and use it it won't work by the time I publish this
so exporting get okay and then I'm going to use the graphql client so
this is how you would use it I've just gotten this from the documentation of graphql request the npm page that I
showed you new graphql client like so and I'm just
going to pass in so we're going to pass a URL as well as a header so we can communicate with
um our data so headers I'm going to pass through the header
and this is our token I'm just going to cut that and whack it in here of course it's just
try to keep everything consistent okay so maybe let's make this a little bit smaller so you can see
well it's a long token okay so I've got a graphql client uh by
making a new graphql client so I've imported graphql client from graphql requests I made a new one and I thought it's worth your client I made a new one
by passing in a URL and some headers so you can communicate with that database and as I said this is the URL that we
need to communicate with our database so let's go back to here this is it so I'm
going to grab that if you need this with a header so we can communicate with our
database so let's save that as well hopefully you see
how this works so let's save this as const URL equals
once again just makeup string okay why am I getting curly braces
oh whoops okay okay great
so now we should be able to communicate with our database but let's try it out
so what's the query we were making well const let's just call it query for now
so I'm going to use the gql tag so I can literally use the Syntax for queries however we want
to get all the videos don't we so I'm going to use this I'm just going to copy that that we made I'm just going to
paste it in here okay so all I've done okay so there we go if you want to
format it a little bit better then please do I will be doing this all later I don't want to focus on it too much for
now but there we have it so that is our query
making sure that this is all inside get static props Okay so
why is this not closed off okay so here is get static props and inside
we are creating new graphql token where we're passing through the URL and the
header so we can communicate with our database great our saving it as graphql
client and then we also have a query okay so that is good we've got a query the next thing we need to do is uh
actually get our data so we get our data so I'm going to save it as let's save it as just data for now
and then I'm going to use await graphql client
let's make this a small G just to differentiate a way to graphql client
requests so this is exactly what I showed you here this core way of requesting
data okay I'm gonna pause through a URL pass
through a query and then get our data
okay request and then I'm actually going to pass through
query because we don't need to do any of this other stuff because we've sort of already done it there
so just request the query like so so we're going to get these data and then once the data comes back to us
um well actually maybe let's just console log data see what comes back to see if
it works
huh
module not found okay wouldn't be let's stop this from running and just install
all the packages again
okay and just on the project
ah okay it's strange this apparently solves the issue let's try it out
okay once again
see if that's worked npm install and Save graphql as a dependency
okay great so this is looking good we did not add a return so let's go ahead and do that I thought it could just work
with me consoling the data but it won't let's return some data well perhaps
let's just try without any of this hard stuff let's just take let's just see if it works on these so closing tag
closing tag so all I'm going to do
is return and let's return props
okay so I want to return the videos um and I think
okay let's have a look at the response here
so if I make this query this will return data
and that has videos so I undergo data videos so let's just try that
const videos equals data dot videos so it's gonna return an array of videos and
then let's just console log out videos so we can see what is being returned so
if I then pass through videos I'm going to de-structure videos like so and go console log
videos I should get all the videos coming back to me so let's check it out
and great okay so we have all four of the videos
this is looking good I'm just going to replace my full query again so we can
get all the data so just here I'm just going to replace it back to what it was and have it out
okay so this is now working brilliantly we're getting our data so
now that's worked I'm actually I'm going to put this in a DOT EMV file I think it's always good to check in here first so just in the root of my project I'm
going to create a new file called dot Envy
and then I'm just going to grab my token
and what shall we call this maybe let's call it uh graph
CMS token
and then I'm just going to save it
and then also we need the end point so let's just save this as endpoint and
then let's grab the end point
put it in our EMV file and then let's replace it in the index file so to
access this I need to write process EnV that's how we access EnV variables and
I'm going to put endpoint exactly how I spelled it in the EnV file and then the same
for this process EnV and what do we call this oh yes that was it graphs you must took and
a thank you webstorm okay so hopefully that should work and we
didn't break anything let's rerun this
we need to inject the variables
okay and there we go everything is fine let's carry on so we're getting the data
we're getting all the data that we need for our uh I guess home page the next
thing I want to do is create a individual page so this is how you would do so in next.js I'm actually going to
create a folder um let's make it on the same level as API
so pages in Pages yeah that's correct okay and then I'm going to make
a new directory called video
and then I'm going to create a new file and then it's just going to say slug
dot Js so just like so add okay so in here we're essentially going
to build a another query we're going to write another query but this time to get one
fill based on the slug okay so that is what we need uh let's
actually just put some boilerplate in here so all I'm going to do is what should we call this let's
uh call it comes to video
export default video just like so and then just let's
return for now let's just return his div it really doesn't matter
okay cool now to the fun part uh once again I'm gonna have to use these two
things so let's copy that and just whack them in there and then this time I need to get server-side props okay because we
need to get slug so export cons get server
side props
okay this is also going to be an async function and then we're going to have to pass through the page context
okay so this is what the page context does I think it's always worth showing you instead of explaining this
so if I want to get the page slug wow
um actually maybe just let's consult console log
page context so if I console log the page context and then I visit uh so we made a
directory called video didn't we and then the slug that we used was just two
jaws because I remember how to spell that uh we need to do a return always get all
the time actually maybe it would have worked anyway without return let's look in the terminal ah okay so it did what so we just
console log the page context and that's what's returning to us this is all of the page context all of this
stuff right here but we need to get the page context query slug see query slug
so I want the query
slug okay that's what I want and I'm gonna say this as the
page slug so if I console log
page slug now let's visit a different one what else do we have we had Moana
enter and then we go back to here and look in
the terminal Moana it's been returned back to us we are
getting the page like we are essentially getting this uh okay so that works we're getting the
page slug now let's get to using the page looks we can pass it into our queries we can get the data back
hopefully that makes sense let's do it so once again I'm actually going to have
to get the URL so const URL in fact I'm actually just going to copy it from here
so we get the URL and then also once again I'm just going to copy this from here because this is how we interact
with our database uh and then we've got the slug the next thing we need is the queries so const
query equals and I'm going to use the gql tag that we imported so we can write like
gql and I'm just going to get this whole query right here
and paste it but of course we need to um replace some of these things so I'm
going to show you how to do that now so in the query part I'm just going to
maybe tap this out to some more leaderboard
so if I want to replace this I can't simply go you know page
Slug it won't work we need to pass it through as a variable so to do this I'm
going to open up some parenthesis and page slog is going to be
a string okay that's required and then I'm going to pass through the slug as
page slug but this comes from a variable so I need to put const variables
page so so if I was to show you how this goes It goes oh we assign Pages like a value and
it goes here or what page slug is now a variable and then when we do this
graph your client request so once again this is just from the npm page
documentation I'm gonna pass through a query which is the query wrote along with the variables okay so that's how
you do it that's how you pass through the variables into this query and then await this
and then let's save this as data cool so now once again this data
data videos that's what I need to do data videos to get my videos so what should we call this
const video singular data video
so that's what I was gonna come on
yeah data video okay good thought I was going crazy though okay dirty video cool so we're getting our
video back and now we need to return it so to do this I'm just going to go return
props video we can return different things as well but for now we just have
videos so we've only query for the videos and once again I'm going to pause through a video as a destructured prop
and it's console of the video to see if everything we want returns back to us so now here
ta-da we got Moana and if I change the Jaws
we get Jaws and if I change this to Mulan we get Mulan so we now have enough data
to populate this individual page two wonderful okay so I think now perhaps it's time to
actually start building our upfront and Visually with the data that we have so let's do it
okay so which page shall we start with let's start with the main page
so this is going to be a bunch of jsx what but jsx but by the way so the first
thing that I'm going to do is I should just get rid of all this
and I'm just gonna maybe add some more spaces so we can see things a little bit better
so the first thing that I'm going to do is actually just create a div and let's
just call it app so we're just going to give it the standard name of app so we can style this later on
and how do we want to style our app well first of all let's get some details in here and then probably let's go to
styling so the first thing so we're going to have a big video so let's maybe make a big a div
um and let's call it it's also given the class name of
main video and in it let's put an image so I'm just going to open up my image uh
let's make a closing tag and then in here the source and my image is going to
be well we just want a random video for my
videos right so perhaps we could do that should we do that now yeah okay let's do
that now so I'm going to write a function here that's going to help us do this it's going to help us get a random video
so I'm simply going to go const I'm going to write a function const random video oops not in here
here and then whatever I pass through into
here which can be all the videos uh I am going to essentially what I'm going to
do is check the videos or use return then this is math random
multiplied by the videos length of course you've got loads of videos this probably isn't the best way to do it but
we're not working with huge volumes here and then I'm going to use math floor to round this down to the nearest uh
integer okay so that is what I'm doing so the
math roundabout math random multiply the number will give me uh anything up to
just under the number itself so if I round that down it will literally come back with a zero or one a two or a three
and I'm going to pass that back into my videos array to bring back a random
video okay so that's what's being returned uh so now if I use
for example math math video run random video and pass through the video so all
the videos okay so whatever returns back whichever video turns back I'm gonna get its thumbnail and I'm gonna get the
thumbnail URL so that gets displayed okay and of
course we need some alternative text because we're not monsters and we need
to make this uh accessible to everyone so I'm just gonna get these videos titled okay that's going to be our
alternative text great and this needs to be a closing tag
here not up here
okay so this is looking good um of course
okay let's check that out let's see if that works I'm just going to go back on the main page
and wonderful so the random film that got returned back to us is a turn oil and if I click it again
it's a random film each time
okay great so that is looking
good I don't know why it's shouting at me but we'll figure that out later
okay so let's carry it on
so we've got a random image the next thing I want to do is actually create a feed so I'm going to do that let's
okay let's make a div and then let's give it the class name of feed
or video feed and in the root of my project I'm going
to create a new directory called components and then in
my components I'm going to create a new Javascript file I'm going to call this section okay so I'm creating essentially
a section component so const section uh
and then export default section just like so and what's it going
to return well it's going to return something that looks like a section so let's do that now
so what it's going to return is um I'm just gonna make something for now
I'm going to return a div that has a H3 tag the essentially is going to just
display a genre okay um and then a video for now let's just
do one genre and see how that works so I'm gonna pass through a genre like so and I'm going to go back here
and we need to decide what genres we're going to have so let's import
section from components section okay thank you
for that very much uh and then here so I'm going to use the component I've just made
like so and then I'm going to pass through a genre
and what should the fashion review what genres did we actually make we have like family I remember that one so perhaps
maybe let's start with that's
um okay family I know is the genre so let's
put that in here
let's have one two three four five six
uh family is a genre we also have you know
star Wars
uh Disney
it's what else do they have National Geographic
um Marvel of course
Pixar and then let's have some more of this you know once we've got family uh what
else do we have we had Thriller I think and we had classic
okay oh oops we misspelled section this needs
to be a capital
okay so we're importing this section we're passing through a genre as this
section and then we're just gonna show the genre okay so there we go
Tada is just showing up as uh header ties at the moment let's actually stir this up because it's really big and it's
a bit pixelated and I'm not really enjoying looking at it so I'm just going to start this up a little bit before we
move on that is called the main video so let's do some styling
so in here um we can delete this and I'm just going to go main video
and how should we style it well the width we do want to be a hundred view
width and then the height let's say it's going to be like 30 viewport height
uh and then any overflow is going to be hidden
and then let's also give it some margin at the bottom so there's a bit of space
between the image and when the other films start and also position
now let's overflow hidden
okay so that's what it's going to look like for now I mean I'm happy with that uh I
think it's fine we'll obviously like when we adjust all this a little bit later and position it maybe a little bit better the thumbnails I chose weren't
great but you know what can you do okay
so we've got these let's carry on actually while we're here let's also
maybe give the app some padding so I'm just going to grab the app uh actually just give it a some margin
20 pixels just like so and then the whole body well the whole body I actually want to have a different color
so I'm going to keep the fonts like this I really don't mind or the background
color um I'm actually going to give it a hex code that I found earlier one three one
five one f okay so that's what I want and all the
text from now on is going to be White
I feel like this isn't in okay so that's outside of that I want it to be inside
the app
okay so we're passing through the sections genres however I also want to
pass through these videos so I want to pass through videos into the genre of uh family however I want to
filter these videos I just I don't want to just pass through all the videos so I'm gonna do so by filtering out the
ones I want so I'm just gonna do so here to const filter
const filter
videos equals I'm going to pass through videos and I'm
also going to post through this genre that we want to filter by and then
I'm going to return so this is how you filter I'm going to grab these videos array this is an array
of videos I'm going to filter each video okay so whatever so each item in the
video array I'm going to look at each item I'm going to look at that items tags and if there's tags because the
tags are an array remember an array of four things and if that includes if that
array includes the genre pass through then return the videos so now
if I do filter videos and pass through obviously the videos videos and then
also pass through the genre of family I can't remember how we spelled it but I
think that was fine let's see family so that should work
so let's now check the videos
okay so now let's check the videos let's see if this has worked I'm just going to console log the videos and see if the
ones with family have been filtered out
oops it is
okay and they have I've got three that have the tag of family
wonderful this is looking great I'm getting about the videos so now
that that's worked I'm actually going to make some videos make some little video cards so once again in the components
I'm just going to create a new component let's call it a video or should we call
it a card whatever you want to call it maybe let's call it a card
card Js ad and then in the section I'm actually just going to copy this
paste that and then place this with card and replace this with a card
and into the card well what do we want to pass through well I actually just want to pass through the
what do we need a thumbnail to be fair that's all we really need so thumb now
okay and what I want to return is it doesn't need to be this long I just want to
return an image actually that has the
source of the thumbnail URL okay and then also as
an alternative the thumb does the thumbnail have a title
I hope so otherwise we don't have anything to put for the alternative text we'll have a look in a bit okay I know
we didn't add one but perhaps it comes with one if that makes sense with all the ones that we got added and let's
style the card in a specific way so card
and let's style it up so I'm just going to move this all up a little bit
I'm gonna grab the card and then what how do we want to store
the card um well I'm gonna make it responsive so I'm gonna say that the card has a width of
20 and a height of Auto based on the uh
thumbnail itself let's actually also give it a border radius to sort of round it off so border radius uh let's say
five percent and a margin around it so they're not all squash together and then
let's also give it a little bit of a drop shadow Rob shadow
drop shadow 5 pixels 5 pixels 10 pixels and make the
color just black okay so now let's go so we've got a card
let's go to using our card in this section so I'm going to import card
from it's in the same place so consciousness
okay so in this section what do we want to do well I think
we should map over all the videos that come back right so maybe let's get rid
of or we can let's just keep that for now um
we're gonna have to start this up so I'm just going to give this the class now section for now
because we're going to want the cards to uh appear next to each other and not
unblock so we've got an H3 tag so let us know which genre is and then I'm going to have a video feed again
okay so I'm just going to give this the
styling of video feed because we have we've used it okay so I'm just going to
give this the class name of a video feed um just so we can see each video
and what I'm gonna do is I'm going to grab all the videos and
I'm going to use map and for each video in our videos array I
want to well essentially I want uh to link the card itself so let's link the card I need to give
this a key an individual key so I'm just going to give it the video ID and then I'm going to link it so I'm going to use
href yes thank you very much I'm going to go to the videos or videos sorry because that's what we called it video
Slug and the slug is going to be the video slug okay so hopefully you can see how
that makes sense I passed through the videos and for each video I'm essentially mapping over each item and
I'm creating an a tag that has a reference to this
URL which we've also just created okay so that is looking good let me just make
sure that I am okay so that looks good and then inside
I'm going to use the card component to self-closing component and I'm just
going to well we want to pass through these thumbnail don't we that's what we decided so video
thumbnail and I think that's what we pass through yeah that's correct that's all we're
positive great ah okay I don't think we're passing
through videos into this section so let's do that let's go back in here
and we need to pass through videos for all of them so videos
for now I'm just going to do all the videos we can of course replace this later
so one two three four five six seven
and there we go how good is that looking I am loving this so
far we and it's looking pretty responsive
woohoo um
wonderful okay this isn't being responsive but we can fix that
let's go back to here
so the main video main video uh if any image exists in
that which it does just make sure uh to make the width a hundred percent
okay there we go how good is that looking in a family we've already filtered out all the
videos that are that have the tag family however let's do the rest so this should
be easy now because we've already done all the grunt work so let's go back to index and I'm just going to
filter videos I'm going to pass through videos and the genre I want to filter by
is Thriller making sure to spell it like I did right
here okay so under the tags right here on the video
and once again I can just actually copy paste this probably that should be a lot
easier I'm going to filter by classic
I'm going to filter by Pixar
oops videos
the filter by I mean I know we don't have any National Geographic but
it's gonna be an m a sad row uh
filter by Disney
and filter by Star Wars so unfortunately some of these will be empty we just don't have enough
data but again I'll show you what this looks like after I've populated with all the data so now it's going to look a lot sadder
unfortunately but at least we know it's working this is looking
good Pixar has nothing natural geographic has nothing so that's why it looks a bit weird and Star Wars has
nothing but all the rest have a few okay uh one more thing I'm actually going to
have another section and this time I'm going to do recommended
for you and this is going to be based on what you have seen so how to do this well I'm gonna use
another function to help me do so and all I'm going to do is do unseen videos
seeing videos
and then I'm gonna pass through these videos and then
I want to return back so once again I'm going to filter I'm going to grab grab the videos array and filter and look at
each video in the array and if the video is seen
so if it's
video scene okay if the video is seen
equals false or video scene equals Knox we had no it's
just going to return all the ones that aren't same basically they're not true so unseen
and I'm just going to do it for this one unseen
and I'm just going to pass through these videos so now
I'm seeing videos that should be plural
ta-da because none is seen we're returning all four videos how cool is that uh we are going to I'm
going to show you how to change scene uh with a mutation in a bit but for now
let's actually carry on so we've done that we've created some sections the
next thing that I'm gonna do is actually create a
what to ask me to do on this page well we should probably have a nav bar I know there's a nav bar on here so I'm just
going to create a component new
Javascript file let's call it navbar to s add
and once again I'm just gonna have const nav
bar equals and then export
default nav bar
and return
div a div that we're going to style as a nav bar but what do we want inside it
um actually let's throw this class name now
oh let's just do that for now however you want to spell it it really doesn't matter and then well let's just what
should we do I'm going to actually use Link for this because I'm going to show you how to link to another page so I'm going to use Link from next Js
and what I want to do is link an image which is going to be our Disney logo so
image
and the source of this is going to be uh the Disney logo
uh the alt for this is going to just say Disney
yoga doesn't need to be in these
width I can set the width if we use these images from next so I can set the width in here to
be 90 and the height uh I don't know so let's just say 50 for now
okay so we've got our image that's actually imported so we can use it so import
link from
next link
and also import image so import image next image great and now I'm going to
show you how to work with images in your next JS project so I'm just going to go into public this
is where you're gonna have to store it so with the favicon
I'm just going to drag that in here
add so now that's in there I can actually import it to use it so I can import
let's call it logo I can call it whatever I wish from and then we just need the path to it so I'm going to go
into public and then I'm just going to grab the Disney PNG okay and I'm just going to
use it here
great so that's our navboss so far um let's actually also
well let's get to using it first so in my page here I'm just going to import the navbar
and then import it oh so that's already been done for me so now if I look here
okay so we need we forgot to do this I'm just going to make this go to the home
page so I'm just going to put them but that is how you would link it to the
home page and there we go we have a logo let's actually start this navbar up so I'm
just going to grab that and just place it up here I think that's
where a nail bar should go
and I'm just going to give a height of let's say let's just hard code AS 80 pixels
and width of 100 cents
again I'm not going to go wild on The Styling I don't really think this is a styling lesson this is more a lesson
about using uh the graphql content management system
okay so that looks good um sort of
uh okay we will fix that uh I don't know we should we should we add the account now too okay let's add the account
so actually maybe let's leave that to last
so at the moment we've got a navbar and everything looks a bit bad but we'll fix it uh I want to display a single
move if I click on one of these so this is working it's going to the correct thing but now let's actually populate
this page with some stuff so let's go ahead and do that so I'm just going to shut down some of these
I'm Gonna Keep the CSS file and get the slug page up
okay so we've got the video what do we want
to happen with it well let's keep that up there for now
so I just want to return essentially an image
and the uh source of this image is going to be
well it's going to be the video whatever the video is thumbnail URL so I'm just going to start
with a thumbnail and then as an alternative let's have the video title for the
visually impaired
okay so that's our image with all of its stuff inside
oops so we've got an image the next thing we want is uh
I guess the info right so let's make another div that's going
to hold a we could show all the tags so video
tags and then we can also show another let's
have another paragraph with the video description
okay and then just a little tag to go back so just go back a page because we
don't have a navbot in this there's not one on the actual Disney site so we're not gonna have one here we're just gonna
have a little a tag that says go back uh okay so we've got that and then we're
gonna have a button that says play so have a button that says play
Okay so there we go if you look at this it won't look too exciting for now there's our
thumbnail and there's like all the information and stuff let's format this a little bit better let's get the tags
and on the tags I'm just going to use join to make this a string that's joined together by commas
like looks okay so that's looking a lot better I've got the description we've
got to go back and we've got play it's a button play button button great
okay maybe let's do some styling so let's go ahead and do that how we're
going to do this well the first image um let's give this a class name so we can
figure out of video image
just gonna get rid of this for now and put the star shape over here
so just get the video image like so
now the video image well obviously is going to have a width of 100 and then also a position of absolute
okay because we don't want it to move and we want the info to go on top of it so I'm just going to fix it to the top
okay and now let's grab the rest of this so I'm just going to grab this and call it
the info it's a class name info
and let's style up info so info
it's gonna actually have a position of relative this time and margin from the top so it's always
going to be 30 from the top and margin I've used view widths and View Heights
and percentages I should actually clean this up I will clean this up when I actually share the code so just be aware
of that or at the end we'll do a little cleanup session so margin left 50 pixels
and then let's also have a Max width of it so it doesn't go all the way across the screen but it's always going to be
just 50 percent okay so that we go that looks a lot
better again sorry about the pixelated image I should really use better images but there we go so that looks really
good so far let's carry on a little bit with the styling
I'm just going to make this a P tag so that it's consistent with everything else and then we've got the button the
button well okay the button is going to do quite a lot uh let's give it the class name of
video overlay
it's gonna grab it here so dot video over play
and I'm going to give it a position of absolute
okay so at the moment doesn't do anything but what I want to happen is if I click on
the button it will essentially show me a pop-up with the video so just like in the real app so all I'm going to do is
write on click just like so and then write a function of what
happens when we click on this button and what I want to happen is essentially I
want to set so I'm going to use use state for this uh I'm going to say so const watching
set watching equal and then use State and
it's going to start off as fast because we're not watching okay we're not watching when we start this off is you
state imported now we need to import import use state
from react
okay so hopefully you know how to use use State essentially all I am saying is
that to start off the state is false so this gets set to false watching is false but to change watching to true I can use
set watching and what I'm going to do is say
if watching is true so if we are currently watching are we watching I'm gonna set watching
to false okay so if we're watching and I click this button then I'm going to
click it to false change it to false sorry and otherwise if it's before not
watching and I click it I'm going to set watching to true okay
so I have done that I've done that because I want to essentially show a another
component if watching is true so if watching is true then we want to show
this component or these elements I want to show the video tag
okay this is how you use the video tag and the source for the video tag is going to
be well I'm going to use source video MP4 URL and then we need to set
the type to be video MP4
okay and then we're going to actually have
the video uh so we have okay yeah let's make it
with a hundred percent you can set that in here or we can set
it in the CSS it is up to you so 100 and uh I'm gonna give it some control so
you can see you can play it and so on and stop it from playing
okay so let's check that out now if I click play
the trailer shows up wonderful
how good is that we of course need some styling and we need to figure out a way to you know hide it so let's carry on
values this works this is looking good we don't need that much space for the styling so when we are watching we want
to show this however when we are not watching but we don't want this to show up we
have to do two because of the way I've done this so if we're not watching
then we want the image to show up and also if we are not watching
I'm not watching bang watching essentially not watching then we also we're not watching that we want this to
show up otherwise when we are watching we want that to show up okay
so that looks fine uh and then do we need to style this
yeah okay fine
let's refresh that play we're watching we're watching and then we want to click
off it so let's do it if we click off it like off the image then it should disappear so for this I'm actually just
going to add a footer
so just below here let's make it a div uh class name
info footer and then
let's style it up so let's make it quite large in the
footer let's give it a height of
100 VH now if we click so on click of this
well what do we want to happen well once again if watching this time of
watching for watching then set watching to
false otherwise null okay we don't want to start the video if we click the photo
okay we don't want anything to happen so that is looking good let's check it out again play play the video we
couldn't make it autoplay if we want and if we click here then we go off it video no video video no video looking
great I mean this is looking so good I'm really happy with it so far
um okay wonderful so we've done this now it's time to do
two more things before you really get to styling this up fully so I need to do two things let's get the uh account info
up and then let's I'm going to show you how to make a mutation to change the scene from fossil null to true so let's
do the Avatar bit first
so we don't need this for now
I'm gonna make a new query in here so we need to rename this uh something let's
change this to oops not in this one
this is where we need to make a new query so we've got a query but I'm going to change this to videos
query and don't forget to change it
here too so we've got one query however we need
another query and that's to get the Account Details so const account
query equals gql I'm going to use the tag
now how do we query an account let's go back here and I'm just going to just make a new query so again we can use the
documentation for this so let's look at the queries available to us so I'm just going to write query
and this time we need to query an account
okay so I'm going to query an account and then where
so this time we're going to search for an account where
ID is and then we need to get the ID of my account okay so this is how we're
choosing to do this of course you could do it however you wish so if I actually look in here in my content and I look at
the accounts and I just have a look at this one I can see that this is my platform that I'm associated with
however what is my ID here is my ID so I've just copied that
let's go back in here I'm going to paste that and what do I
want return back to me well I really just want my username and other time
so I think that should be it username
and advertise an asset so I need it URL
so if I search for that there we go so that is the correct query let's carry on
so all I'm going to do is paste that query like so
so we've got our query so I'm just going to use this again I'm going to essentially get our data except we
shouldn't call it data again we can't use data let's maybe call it account data
and I'm going to use the weight graphql client and request this time I'm going to request the account query okay and
whatever comes back well we know that it's going to be account data
dot account because we just saw it here account data which we've saved to data
which we saved as account data account and that's what we need okay so now that we have that
let's actually return it and pass it through into our component so account
okay great so we have the account however I'm
actually going to pass through this account into the nav bar so account
just like so because that's where we want to use it we want to use it in the Napa
so now let's get our nav bar I'm going to pass through the account
and now let's actually uh use it so here we have our navbot again we've got this
link but then let's also have
some account info so I'm just going to make another div
um and then maybe let's call this count info oops
account info and inside the stiff well I just
want to P tag oops
uh that says welcome account username
and then maybe let's have an image as well so I'm just going to do
image class name
avatars gonna have to style it up and the source of the image is going to
be the account Avatar
you are up okay
this needs to be curly braces okay so this is looking good
let's see what that looks like let's go back to the main page
okay so there we are let's get to style this up a lot smaller than it is now
so once again I'm just going to get my CSS file
let's get the account info I'm just going to use display Flex on it
let's also give it a height of 50 and the Avatar itself about Tara well I want
the Avatar to save you 50 pixels width uh and height also 50 pixels
and then border radius uh 50 and I think that should be fine let's
maybe space it out a bit as well so I'm going to give it a margin the left of 10
pixels order radius okay
okay so that's looking good and now let's actually just space this out in between so what is that in that is in a
nav bar so let's find the nav bar and I'm going to do justify content
space between wonderful and of course that could do with some
more styling but we're going to leave that because we have one more thing to do before doing the refactoring the
tidying up and the final pieces of styling and that is do mutation
so
to make a mutation I'm just going to shut all this down because we're going to be doing this in the slug page so to
make a mutation I actually need to make this in the API I'm going to create a
new Javascript file and I'm going to call it change to scene
just like that and this is how we would do this so here
is the syntax um export default async
and then I'm gonna have to pass through a body and a resp response if you're used to
doing uh you know serverless functions this is kind of similar
so there we go uh here we are and then I'm also going to import the graph
ql client from graph
ql Quest because we're gonna need it okay
so once again we're going to make a new graphql client and I'm going to pass through the end point again so the URL
so process EnV end point so just like we were doing before URL and then the uh
token so the headers with the token and then process Envy
graph CMS token okay so that we can communicate with our database and now we're going to
have to do this so oh wait once again I'm just getting this from the graphql request documentation if you want to
check it out um graph CMS request
and the request I need to make is the mutation so the mutation that I need to
do to edit a let's make a new thing so the mutation that I need to do is looks
like this so I'm going to go into the mutations
okay because we just use the documentation for this so mutation
and what I'm doing is overriding one of the video uh I guess
elements that I have one of the video objects to have seen from fossil not to
true so all I'm going to do is essentially use update video
which videos I'm going to use where
and I'm gonna do it by slug so if I do Jaws
oops okay so if I do chores
and the data that I want to pass through is seen
true
and then I'm just going to return the ID and and the scene
okay and the title okay so if I do that
we've changed the video to have seen as true I can change it by defaults if I
want cool but of course we just need to send it CO2 because you can't unsee something
so this is all that matters I'm going to take that I'm just going to put it in here
so that's a mutation but of course we need to pass through this slug so I'm just going to this is how you would do
it uh and I'm also going to get this slug which is the body Slug and then I'm
going to replace it in here with the slug so I'm just going to pass through the
variable so slug is going to be a string
and I'm just going to replace it here with slug so now whatever I pass through in
here okay will be changed so that is looking good I'm just gonna
do 201 is going to return with adjacent
okay so this is looking
good uh graph CMS we didn't Define graph CMS oh yes constant graph CMS
of course so that's called CMS okay okay and now we just need to write mutation
to publish the video so it's just the same as above it's just a different mutation so I'm going to write a weight
graph CMS requests mutation publish video which is the mutation that we need
and I'm going to pass to a slug as we're going to find the video by its slug so
we can publish it okay so I'm defining this I'm saying this slug is a string and then I'm just going to write the
mutation that I need to do I already know it because I have done this before so publish video I will show you where I
found this mutation though so don't worry publish video and I'm just going to put where slug and this is going to
be the slug that we pass through from the body so just like above from the
body and then I'm going to say to publish and
just to check this has worked I'm going to return the
so just in between here I'm going to return these slug okay so that is really it once again we need
to pass through the variable slug so we're going to take it from the body and pass it through as a variable
and I'm going to say that the slug we pass through from the body I'm gonna
assign this to slug so I can use it in the mutation okay so this is looking good don't
forget the comma great great so that is the mutation to publish
the video okay and this is where I got it from so just in here on the mutations
I'm just going to search for it there we go that's it okay
wonderful great so we've got the chain C now let's get to using it in here
foreign so let's write a function for this I'm just going to do it above here so const
change to scene
async it's going to be an async function and whatever slug I pass through
the one that we're going to send to the mutation okay so I'm going to use a
weight patch for this and I'm just going to pass through the URL that goes to my API change to scene so make sure you've
spotted exactly the way that you've spelled it here change to scene
uh the method it's going to be a post and headers
well we're going to have to say it's content
type application
making sure just to keep everything a bit more consistent okay
and then of course we need to also posture the body
Jason stringify on the slug
okay so we've written the function that essentially will use our mutation and
then on click so when we click the play button well we're just going to change scene change the scene and we're going
to pass through the video slug great
so now that should work let's check it out
okay so at the moment we have four films which are unseen and recommended for me if I click on one of them however and I
click play so there we go we're watching Moana watching Moana it's a great film love
Moana whoa and now let's go back to the home page
okay so now we can only see three films in the recommended this is because we
changed the scene from false or no to True okay so there's only three films in
here now this wouldn't work if we didn't publish the video just an FYI that's why
we need to publish the video uh and now if we want to change this back I'm just going to do this in the graph CMS so the
playground I'm going to once again just grab the mutation that we wrote before
and then I'm going to change this to scene false
okay just because I want all four to return back but hopefully you understand how this works now uh if I played the
video on any one of these cards again it would change scene to True again okay
so hopefully that explains that let's carry on with some styling
so all I'm going to do is actually get a div let's make some divs uh and I'm
going to actually make a div and give her the class name of a franchise because I want to then link to other
sections in here so on this page so class name franchise and then I'm going
to give this the ID of Disney so we can style it up
as we need and then let's actually wrap this up in
something so we can use an a tag
I'm just going to grab this stick that in here and use the H Rev
in order to go to Disney okay so now I'm going to give this the
ID of Disney ID equals Disney so then if you click on that it
will take us to that genre and I'm going to do these same so we've got one for Disney I need five two three four oops
four five we've got Disney let's have Pixar
let's have Star Wars let's have Nat Geo
and let's have Marvel
oh once again Pixar
Star Wars not
Geo Marvel and let's give some ideas
so ID not Geo
ID waffle
ID Pixar an ID
Style horse it's great so that should link to those
things whenever we click on it and of course let's actually style it up so I'm
gonna get a show you how to make a little franchise one so I've got franchise
let's give it a width of 20 percent a height of 100 pixels
a background color of
Gray is that 8080 18.
margin 5 pixels water radius
10 pixels
okay and then in here what does that belong to video feed
dot video feed display Flex
I'm actually just going to change these to Links just to make it more uh friendly
and then import link import link from
next
okay so that is actually going to be part of a video feed like so
now let's get the class name of section I'm just going to go back here and
actually delete this I don't think we need it okay there we go
wonderful so this is looking a lot better one last thing to do and let's sort this out and
then maybe make some images for these so I'm just gonna go back in here
get the nav bar and make a div here called
logo
Rapha stick that in there
logo wrapper I'm giving a pattern of 10 pixels and 30
pixels
so 10 from the top and 30 from this side great
and finally the navbar itself and I'm just going to give it a
padding pop with 30 pixels
you count info margin
top and pick
and pick 20 pixels
margin 20 pixels okay
so what I'm going to do is just drag in some image that I'm going to use just drag them in like we did before so here
they are just some logos just going to get rid of this and all I'm going to do is use the image
from next image and then the source and pass through the image okay which we're
going to import into this file so again just like we did before so let's import
the image import image from next image okay great and I'm just going to get rid
of these semicolons great now we need to import the logo so
let's do Disney first import Disney logo from and then the path to where I store
the PNG file so public Disney button okay this actually doesn't need to be in
color braces it's the only thing in there that we need and then I'm going to do it for all of them so Marvel Marvel
button then we have then we have not Geo not geobutton then
we have what else Pixar this is actually just this this is just Pixar PNG that's
what we saved it as and then let's also have Star Wars so Star Wars logo okay
just like that and we saved this file as Star Wars button PNG
so they're imported now let's use them so the image uh this actually needs to
be in between the two divs sorry so the image for that should go here and
wonderful okay this is looking good let's carry on so we've got one logo in
let's do the others before we move on though the div that we
are currently in the height is fixed I don't want that so I'm just going to get rid of that from here so I'm going to go
here and enfranchise because that is the class name that the div has I'm just going to delete the height and great
okay so we have that done let's do the next one in between these two divs I'm going
to put in a logo in between here as well and in between here and what should we call this well that's
Marvel logo and now we just need to pass through the Marvel logo pass through the internet
Geo logo the Star Wars logo and the Pixar logo great and I'm just going to
format so reformat the code I can do so super easily in webstorm I can actually
just reformat the whole project by clicking here and then going under the
tab code we format the code great and now my whole project has been
reformatted um it also tells me started spelling mistakes so that's handy thank you very
much Geographic and what else can we do
sometimes I feel like I put the class name in Cali braces and I don't want
that I just want the class name to be a string so let's find where I did that
because I definitely did somewhere
out there okay so I like to keep class names like this but again it's just my preference it is totally up to you
so great this is looking good okay it's final look
wonderful um and delete any console logs as well so let's just get rid of this console
log here great okay
okay and finally let's do some final styling so I'm just going to do a little bit of this
I mean it's essentially all fine I'm just doing some final touches so
and that's it thank you so much for following on to the tutorial please go ahead and take this project make your
own improve on it really take it to the Max uh I can't wait to see what you build with it and I'm really excited to
see the results so thanks so much again for watching and I'll see you soon
No comments:
Post a Comment