[Music]
hi everybody welcome back I believe this
should be episode six and hey look I got
a new shirt
so yay since since the time we have been
doing this I finally went out and got a
second shirt so now you get to see me in
my second shirt for probably the
remainder of these episodes now since we
are back and it did take me a while to
come back here there's there's a couple
things I want to point out first I don't
know if you saw this email but at some
point I you're probably gonna get an
email that says hey make sure you
upgrade to the latest firebase tools in
order to keep using any callable cloud
functions the reasoning has to do with
sort of some security stuff that the
cloud functions folks are changing and
the firebase CLI folks are changing in
response to those changes
long story short make sure you have at
least I think version seven seven zero
of the firebase twelve so let me see
what firebase version I have here do
alright so I got seven seven zero make
sure you have that at least that or
later or else like when you try and call
your callable cloud functions in the
last video it's not gonna work and
you're gonna like complain to me in the
comments and stuff second thing I want
to point out is that since we kind of
took a little break since that the last
episode and this one or at least I did
maybe you're just binge watching these
we have to remember to restart the
emulator so I'm gonna go in here into my
command line and I'm going to type
firebase emulators colon start is that
the right command it is and it's going
to start up again both sort of the local
server and the local cloud functions as
well as the local instance of cloud fire
store and you have to remember that in
the local when when cloud fire store
starts up again it basically starts up
empty so all those restaurants I had
before all sort of my my user
preferences all that stuff is probably
gone and so because remember right now
we're sort of hacking in our array of
favorite restaurants I need to make sure
that that is still going to be
up-to-date or at least reflect some
accurate restaurants when I go ahead and
start doing that within my web app so
I'm gonna go ahead and open up my
browser here and let's look at localhost
5,000 as you can see here I have no more
data because you know my local fire
store has been deleted let me click add
mock data and now we got a whole bunch
of data all right but let's see I'm
gonna check two things here
I'm pretty sure this is still the same
user ID so that has been retained from
session to session as it should be but
it does look like I no longer my my
array of favorite restaurants like if we
jump into I believe it's under friendly
eats data remember how we sort of hacked
in this favorites array of like totally
fake data well basically this now
reflects restaurants that no longer
exist because we had to regenerate that
entire list of restaurants let me pick
two that look good let's pick these two
with the chef looking guy so we got
place best I'm going to basically just
go ahead and sort of copy those
constants into here and drive through
fire let me copy that into here we'll
save this let's go ahead and sort of
reload our front page and now I think if
everything is still working the way it
did before if I click on my favorites
we're going to take a look at our
favorites array and we're gonna get back
that's right this JSON II looking object
that has our two favorite restaurants
looks like place best and drive-through
fire as our favorites array and we get
that back it's json e data so yeah i'm
back up to where i was in the last video
like I said if you're you know if you
were just sort of binge watching these
then you probably don't have to do this
but if at any point you're like alright
I'm done for now I'm gonna ctrl C out of
these emulators and get back into my app
you're gonna have to do this too
so um turns out that for most users
getting to see data in like the
JavaScript console is not the right
approach they actually need to sort of
make some changes in our webpage so
let's get this data and actually get it
showing up into our app now as you
recall what we're getting back from a
cloud function kind of looks like
document data but as far as
our sort of local code is concerned it's
not a document it's not a cloud fire
store document it's just a bunch of JSON
e data but that's okay we're gonna show
you how to sort of take that json e data
and basically sort of turn it into again
another restaurants list so let's jump
into our code here and i'm gonna go
under my friendly eats view so i have
this function called view list that you
can see right now takes sort of the the
list of filters and a filter description
and goes ahead and generates this whole
page of restaurant tiles panels or I
guess cards is what we call them now I
think probably what I'm gonna do here
and this is a little bit of a hack is
I'm gonna go ahead and copy view list
and basically turn it into another
function that's called view favorites
and then once I have this all sort of
looking nice or at least working then
I'll figure out how to sort of combine
them and remove all that duplicate code
but for right now kind of a bit of a
giant hack where there's gonna be a lot
of duplicate code in our app and you
know we'll fix that at a later point so
let's see here
let's go ahead and we're gonna create
this thing we're gonna call it view
favorites
we don't need look we don't need our
filters or a filter description
basically we'll just say our filter
description here is uh we'll call it my
favorites my favorite your favorite
foods at least for now we're only
looking at the foods of the currently
logged in user to do oh alright it's
probably there you it didn't like the
fact that got rid of that second
parenthesis the next thing I'm going to
need to do is probably go down here and
it's going to complain because I no
longer and passing in filters so all
this is going to be broken and I'm no
longer you getting all restaurants I'm
gonna probably want to call this like
get favorites
and there you go so the way for instance
this get all restaurants call works in
sort of the original function is we
create this whole other sort of helper
function called render results that
takes in a document and then basically
you know does a whole bunch of stuff
this code actually is all basically what
to do if there is no data in our results
and then this basically sort of takes
that data massages it a little bit to
what we need and then sends it off or
basically that sort of creates this
restaurant card out of out of that data
well that's that's kind of mostly it and
then sort of adds it into sort of our
main page and then this sort of stuff
basically just kind of adjusts the way
our filters look so we're kind of going
to do the same thing here we have this
render results function right now it's
expecting a document but I think we can
basically change that so that instead of
expecting a document it will go ahead
and expect like a json e looking thing
first thing i want to do is well let's
see let's go let's just kind of go
through this top to bottom so this query
selector that says hey let's look at
your favourites most likely when we're
looking at her favorites the chanels be
something like let's we should stop
viewing favorites we'll figure out what
did you hear in a bit and you know let's
just kind of try this and see where
we're at so far all right so our main
page of looking at all documents that
still works fine because we didn't
really mess with that I'm gonna click on
this and well actually I guess nothing
has really happened because we are not
calling this function right now so maybe
let's do that
here well replace get favorites with
view favorites you'll notice that there
is kind of a view favorites and get
favorites the get favorites is actually
the call that talks to the database the
view favorites is sort of the call that
actually makes it display in our HTML so
okay there we go so now I am clicking on
it it's calling our view favorites call
that has essentially cleared out all of
our all of our data and it's kind of
started the part of fetching our
restaurants but I actually think for
starters our restaurant is not even
looking at this render results function
yet so that's why we're getting nothing
so let's fix some of that we go into our
get data function and get favorites
looks like yeah see it's a function that
then kind of just makes this call to our
cloud function if we're to look at for
instance get all restaurants you can see
here it's actually kind of calling this
render function a little later so let's
do some of that so we're gonna take a
function that's called render and but
then here sure we can still log our
result but then let's call render on our
result or you know what sorry our result
here what was that noise all sorts of
weird stuff going on in the studio so I
take that back our result as you recall
is actually an array of objects so what
I need to do is let's take our result
data and we'll call for each and in here
we're gonna get a restaurant they spell
restaurant right looks like I did and
now we'll call render on that individual
restaurant all right so we're making
some progress here our get favorites
call is actually going head and
rendering our restaurant but I'm pretty
sure if we were to reload this and run
it yeah we're gonna we're gonna run into
problems because the render function
that we have copied and pasted is
basically still kind of expecting a
document and it's hoping to be able to
call you know date
on it and as you recall we just have
JSON II stuff so let's go back here and
fix this so just to clear things up I'm
just gonna instead of calling this doc
I'm gonna call this data and we'll sort
of replace it in places where it causes
trouble so basically all this is like
it's basically saying hey if for some
reason I'm not getting data back in you
know my restaurant it might might get
restaurants function all this really
just kind of shows like hey you have no
restaurants result that's all it does so
I don't really need to call data equals
dot dot dot dot data because we already
have the data so I'm gonna go ahead and
delete this and here it looks like we
are grabbing our document ID and storing
that and we do kind of need that so
later on when we want to sort of have a
link that goes to that specific
restaurants details we know where to go
but I don't think we have that right now
so maybe we need to update our cloud
function let's see here so here we are
we've got our we're taking our snapshots
and we're returning our snapshot data I
think probably why don't you do here is
let's expand this a little bit let's see
we're gonna say ah how about let's Const
snap data equals snapshot dot data and
then what we can do is like snap data
and here we're sort of this is there's
nothing special really about this sort
of field that is called period ID in
quotes this is basically just sort of a
special thing that we added with the
assumption that like we're probably not
going to have a lot of fields that have
a dot period at the beginning of the
name therefore it's probably safe to
kind of you know overwrite for hard code
in the inner code here and this will
actually be our snapshot dot ID and why
is this giving me an error because
object is possibly undefined
we'll need to return data sap data what
we do here I suppose what we should do
is let's just we could force unwrap it
but you know let's just say if snap data
then we'll do this and return that I
think we might need to be smarter about
this I'm going to put in a little to do
here or something to do make sure we're
not completely broken if a snapshot is
null we might be sort of making some
assumptions that we're always going to
have data that might cause problems
later on I'm just gonna add a little
reminder myself of let's go back and
double check that this all works but all
right we got our document ID for now so
should be pretty simple here let me go
back into my in the right place go into
functions and call npm run build all
right that all looks good and in fact
you know what let me just reload this
and see what happens still an error but
this time now I bet you in my array now
look at that we got that dot ID field
alright so that worked so now I think it
should be fairly simple to sort of fix
up our render call so we actually don't
really need data dot ID equals doc ID
because this is basically this has
already included our cloud function so
I'm just going to kind of going to
delete that but we do need to now call
it here so now let's just say Const doc
ID equals data dot ID and then we'll
call doc ID here and let's see and then
I think we can also just swap in that
constant here as well doc ID and the
rest of this looks like it should just
kind of work all right well let's try it
gonna reload this click my favorites hey
like that
we got like data and stuff and it's our
it's our favorite restaurants
wow that was and actually I think I
could still like click on this and I get
details about place best we had some
ratings let's add a couple ring oh
that's right oh there we go that's cool
alrighty double check one more time
whoops I don't want to add a filter I
want to get my favorites cool alright um
how we doing on time how much time we
got so far 14 minutes all right you know
what we got time to do a little bit of
refactoring so let's do some of that
alright so there's a bunch of places
here we sort of have some some duplicate
code I think one thing I kind of want to
extract is this bit here we're sort of
rendering a restaurant so let's see here
alright let's create a function call
will call it friendly eats dot prototype
dot o render restaurant card and we're
gonna pass in it's gonna be a function
that's going to take in like I think
we're going to need a reference to this
mean element so we know sort of where to
put our restaurant card and then we'll
pass in our data and our doc ID as two
separate arguments and then I think what
we can do here is let's look at this so
we're creating our function to go to the
restaurant we are checking to see if the
restaurant card is already exists we're
sort of adding in our ratings and the
price we're adding that on and then
we're basically appending all of that to
our main element so you know what I
think I can just cut this paste it in
here
and now whoops I think actually don't
need that anymore this can now be this
that can now be this if this were any
other language that would sound very
confusing but it probably still does but
yeah now our Oliver that's can be this
again don't let's check my note to see
that'll work might
and so now I think we can just call this
function for up here so we're gonna say
that render restaurant render restaurant
card we're gonna pass it in the main
element the our data and our duck ID and
let's see if this works let's reload
this hmm
seems to work except we're getting a
cannot read property router of undefined
Oh huh this is another that is this
error basically router here
I believe refers to sort of the oh boy
essentially I think this is another that
is this where this function now this has
no longer defined two sort of friendly
eats the larger friendly eats object I
think it's sort of a local this we're
basically representing the closure in
this function like I said this is not
stuff I'm like super expert in but
basically I think this can be fixed with
a bar that equals this oh my gosh and
then I think if we just have that router
navigate this should all work now let's
try it one more time so I click on her
favorites I see drive through fire I
click on that we can't get to details
about drive through fire alright looking
pretty good that seems to be working
pretty well so you know let's double
check and make sure we can call render
restaurant card within our view list
basically we're gonna replace all of
that with main element data and docked
ID here doc ID is not a separate
variable and I think it should all still
look good so let's reload looks like our
main page is still rendering okay so
yeah we we refactor it a little bit
honestly you can probably see how we
could sort of do a little more
refactoring that you know does this
repeated times right like maybe we
decide that this is probably a function
that could be you know extracted a you
know show empty state function and
probably a you know show the main header
function and you know show the filter
description function and I actually
think probably the right thing to do
would be to keep extracting sort of
chunks of logic out of this view list or
view favorites function into smaller
functions and then just kind of have
them called from both of these that's
the right thing to do but I'm gonna do
the lazy thing which is like I think at
this point these functions are similar
enough that I could probably just add in
like is favorites argument into my main
view list and kind of do a little bit of
if-then statements all over the place
and that'll get us there as well just
because you know this is really this is
not necessarily a video about
refactoring and chopping up your
functions in a lot of little ones but
I'm pretty sure the who's that author
it's not code complete I don't know
there's an author who would be very
proud of me for chopping this up in
little functions instead he's gonna be
very embarrassed that I'm not going to
do that for the rest of this I think
basically probably the right thing to do
or not the right thing but the thing I'm
going to do is you know we'll just pass
in a third argument called favorites
and essentially do some if-then
statements throughout our view list to
make that work but you know what maybe
this is a good stopping point we're at
the point now where we actually have our
our favorites well how are we doing on
time all right yeah you know what
they're at a point where we can now view
our favorites within our web app and
that's pretty exciting and so yeah we'll
kind of finish up our refactoring in the
next video and then maybe move on to
some other things so thanks for staying
around and we'll see you on the next
episode of firebase in my life
[Music]
you
[Music]