- 00:00:01 welcome to this video over this whole
- 00:00:04 series about beautifying firebase we
- 00:00:07 achieved a lot we built a whole
- 00:00:09 application with sign up sign in the
- 00:00:13 ability to create meetups register for
- 00:00:15 them to edit them date and time Pickers
- 00:00:16 so much stuff now
- 00:00:19 our store file also grew quite a bit
- 00:00:22 it's really long and it's already a bit
- 00:00:25 unmaintainable to be honest now it would
- 00:00:27 make sense to split it up into modules
- 00:00:29 and this is exactly what we'll do in
- 00:00:31 this video
- 00:00:36 so let's split our store fall into
- 00:00:38 modules now let's first analyze which
- 00:00:40 modules would make sense well in my
- 00:00:44 opinion we got mainly two topics in this
- 00:00:46 application we got user related stuff
- 00:00:48 sign up sign in and so on and we got
- 00:00:51 meetup related stuff now of course there
- 00:00:53 are some overlapping but in general this
- 00:00:56 is how I see it
- 00:00:57 so it would make sense to probably
- 00:00:59 create these two modules the question of
- 00:01:02 course always is what is something like
- 00:01:04 registering is that user or is that
- 00:01:08 meetup related because the user
- 00:01:10 registers for a media not really either
- 00:01:12 of the two right so maybe we need a
- 00:01:14 fourth third module deregistration
- 00:01:17 module let's go with that I'll create
- 00:01:20 three new folders in the store user
- 00:01:26 registration and of course meetup and in
- 00:01:32 these folders there I want to store my
- 00:01:35 modules now you could go super granular
- 00:01:38 and outsource your actions and your
- 00:01:40 rotations in two different files now
- 00:01:42 I'll see if I do that I'll start by
- 00:01:45 creating different pieces so a file with
- 00:01:49 all actions and mutations for the user
- 00:01:51 part a file with all actions and
- 00:01:53 mutations for the meetup part and so on
- 00:01:55 so I'll create new index.js file in all
- 00:02:00 of these folders like that here in the
- 00:02:10 user and now let's split it up no
- 00:02:12 splitting it up can be yeah not really
- 00:02:15 difficult but you have to be careful
- 00:02:17 that you don't mess things up because
- 00:02:19 handling or working with the state can
- 00:02:21 differ from how you did it before
- 00:02:24 depending on how interweaved your
- 00:02:25 different parts are but we'll see how it
- 00:02:27 goes so I'll take the cheap approach
- 00:02:31 here and copy everything in my main
- 00:02:34 index.js fault and copy it into the
- 00:02:36 meetup file and now I'll simply start
- 00:02:38 removing stuff so let's start at the top
- 00:02:41 in this state loaded meetups make sense
- 00:02:44 to have it here user not so much
- 00:02:47 loading probably yes err
- 00:02:50 or yeah do we even use that I don't
- 00:02:52 think so so still let's leave it in
- 00:02:54 there ah
- 00:02:55 we'll see if we use it here register
- 00:02:58 user for Meetup and unregister
- 00:02:59 definitely can't get rid of these
- 00:03:01 mutations loaded meetups make sense
- 00:03:03 create meetup and update meetup these
- 00:03:05 are all mutations which makes sense in a
- 00:03:06 meetup store set user doesn't make sense
- 00:03:10 said loading make sense at error well
- 00:03:13 let's see if we use it but make sense
- 00:03:15 clear error as well
- 00:03:17 now here actions register user for
- 00:03:21 meetup and unregister definitely don't
- 00:03:23 need that here load meetups make sense
- 00:03:27 to have it here create me that makes
- 00:03:29 sense and update meetup also makes sense
- 00:03:33 sign user up nope that definitely
- 00:03:36 doesn't belong here the same for a sign
- 00:03:38 user in and for auto sign in fetch user
- 00:03:42 data all the sounds like a user later
- 00:03:44 tasks to me so why don't we get rid of
- 00:03:47 that too
- 00:03:47 the same with log out clear error I'll
- 00:03:51 leave it here seems like we use it
- 00:03:53 somewhere I must have forgotten where so
- 00:03:55 I'll leave it here so dad is now my my
- 00:03:58 setup here much leaner already the
- 00:04:01 gathers of course also need to be
- 00:04:02 cleaned up loaded meetups make sense
- 00:04:04 feature loaded makes all sense the user
- 00:04:07 doesn't make sense here so now I get my
- 00:04:10 meetup store set up here though in the
- 00:04:15 end it will all be merged into one
- 00:04:16 central store so it's not really
- 00:04:18 different stores it's just one part let
- 00:04:21 me continue I'll copy everything from
- 00:04:23 the main index file again and go to
- 00:04:25 registrations now there again what's
- 00:04:29 inside the state here now one thing we
- 00:04:32 have is that in mutation for the
- 00:04:36 register user meetup
- 00:04:37 we of course access the user so that is
- 00:04:41 something which makes me lean towards
- 00:04:43 using this in our users module because
- 00:04:48 it is connected to it we need access to
- 00:04:50 the users state here so maybe we don't
- 00:04:53 really need a registration module
- 00:04:55 maybe that robber belongs to the user
- 00:04:57 module because we change the user when
- 00:05:00 we do register or unregistered we don't
- 00:05:02 change the meetups
- 00:05:03 so I'll get rid of registration and
- 00:05:06 instead copy everything into the user
- 00:05:08 index.js file now there let's move
- 00:05:12 through it noted meetups we don't need
- 00:05:14 that here the user we need it a loading
- 00:05:17 an error yeah let's leave it here
- 00:05:18 registering we need that loaded meetups
- 00:05:21 create meetup update meetup we don't
- 00:05:23 need that here in the user file set user
- 00:05:27 that makes sense set loading probably
- 00:05:29 same for the errors actions create a
- 00:05:33 registry users make sense load meetups
- 00:05:36 we don't need that create we don't need
- 00:05:39 that an update we also don't need that
- 00:05:41 so now oops we have just as a next
- 00:05:47 method sign user up and in and all the
- 00:05:50 sign-in and fetch user data so quite a
- 00:05:53 lot of user related actions here but now
- 00:05:56 we at least focus on that in this file
- 00:05:58 and as I said you could go more granular
- 00:06:01 and even outsource the actions into
- 00:06:02 their own file and so do for the
- 00:06:05 mutations with that let's go down to the
- 00:06:08 gathers loaded meetups we don't need add
- 00:06:10 featured and loaded we also do any debt
- 00:06:12 we need the user and I'll leave loading
- 00:06:14 an error here so now we get cue state
- 00:06:17 felt in the two different modules of
- 00:06:20 course we now need to merge them
- 00:06:22 together we did it in the main index
- 00:06:25 chase fall now in the main index.js fall
- 00:06:28 let's remove everything in this view X
- 00:06:31 store constructor everything so that we
- 00:06:34 only pass an empty object to it and we
- 00:06:36 don't need firebase in this file now
- 00:06:38 here we now instead add modules as a key
- 00:06:42 and this is a JavaScript object where we
- 00:06:44 now merge these modules you can now a
- 00:06:46 define any names you want maybe meetup
- 00:06:49 for your meetup module and the value now
- 00:06:52 needs to be of course a reference to
- 00:06:54 your exported meetup module so there
- 00:06:57 I'll import meetup from / Meetup and
- 00:07:04 that's not that will automatically pull
- 00:07:07 the index.js file scientists as a value
- 00:07:10 and the same for user there are import
- 00:07:14 user
- 00:07:15 from user and store it here and this
- 00:07:19 will map it into this now one problem
- 00:07:21 we'll have is that in these files we
- 00:07:25 export stores and that is wrong
- 00:07:28 we shouldn't export stores in these
- 00:07:30 files we should export JavaScript files
- 00:07:34 objects like this export may be a
- 00:07:38 default object which then has state and
- 00:07:42 so on that is okay but not new view X
- 00:07:44 story for that reason we can get rid of
- 00:07:47 view X in here and also of view we don't
- 00:07:50 need to register that that's simply a
- 00:07:52 empty file where we just registered or
- 00:07:54 export a JavaScript object so that's all
- 00:07:58 just a JavaScript object we export the
- 00:08:01 same for the user fault get rid of all
- 00:08:03 the imports and off the initialization
- 00:08:05 not all the imports we need firebase but
- 00:08:07 off the initialization and then simply
- 00:08:10 export a default JavaScript object not
- 00:08:14 more
- 00:08:15 now we merge these objects into our
- 00:08:18 store together here the question just is
- 00:08:21 does it now work like this let's save it
- 00:08:24 and see if it works it compiled but now
- 00:08:28 we get an error duplicate Keter gallery
- 00:08:31 loading and error the problem we have is
- 00:08:35 that in both index and user we have a
- 00:08:39 getter named loading and error and that
- 00:08:42 of course is suboptimal now the question
- 00:08:47 is which of these do we really use well
- 00:08:51 we need it actually in both we want to
- 00:08:53 show a loading bar or a loading spinner
- 00:08:54 whilst you are signing in signing up and
- 00:08:57 we also want to show one when we're
- 00:08:59 fetching meetups or creating meetups so
- 00:09:02 just splitting up like this will
- 00:09:04 generate new problems what we will have
- 00:09:07 to do is be clear about which gathers we
- 00:09:10 want to access and how we use them now
- 00:09:13 to fix that issue with loading an error
- 00:09:15 we can basically create like a shared
- 00:09:18 state so let's create shared because
- 00:09:21 loading an error are basically not
- 00:09:23 really connected to either a user or a
- 00:09:26 meet-up we have operations in both
- 00:09:28 modules which can make this relevant so
- 00:09:32 here I'll copy this code from the meetup
- 00:09:37 in XJS fault and add it to a new
- 00:09:39 index.js file which is stored in the
- 00:09:41 shared folder now here I'll paste it in
- 00:09:45 and now I want to get rid of all this
- 00:09:47 state except for loading an error and
- 00:09:49 I'll get rid of all new mutations except
- 00:09:51 for the mutations setting loading and
- 00:09:54 error and you guessed it the same for
- 00:09:56 the actions only the actions relating to
- 00:09:59 errors and so on should be set so I
- 00:10:02 think we have no action which is called
- 00:10:05 set loading or stuff like that so we
- 00:10:08 only have clear error as action like
- 00:10:10 that and finally in the gathers we also
- 00:10:14 only have loading and error and I can
- 00:10:18 now go to the user actually to both to
- 00:10:20 the meetup module to you and get rid of
- 00:10:23 error and loading there make sure to get
- 00:10:26 rid of all the actions and all the
- 00:10:28 getters and so on all the mutations
- 00:10:30 related to loading an error so
- 00:10:32 everything here in the mutations as well
- 00:10:34 as well as in this state because we will
- 00:10:37 now manage this in a shared folder the
- 00:10:39 same for the user get rid of user and
- 00:10:42 excuse me of error and loading of clear
- 00:10:45 error and in mutations clear error set
- 00:10:50 error set loading and of our two states
- 00:10:54 now let's add it to our store shared
- 00:10:59 here should be imported from the shared
- 00:11:03 folder so I'll assign it here and let's
- 00:11:07 now save it and see if this works well I
- 00:11:11 got an error let's see which it is
- 00:11:13 linting problem firebase is never used
- 00:11:17 in the shared index.js file which makes
- 00:11:21 sense because there are just copied
- 00:11:23 everything in but of course the firebase
- 00:11:25 import is needed there we don't reach
- 00:11:26 out to firebase in there that's wrong
- 00:11:29 file shared index here we never reach
- 00:11:32 out to firebase so with that let's save
- 00:11:36 it and let's reload our application and
- 00:11:39 now this should work really fine Farage
- 00:11:42 stur confirm this seems to work the
- 00:11:47 reason for this is that view che s view
- 00:11:49 X exposes our state we merge together
- 00:11:53 here your whole application so we can
- 00:11:56 still commit to set loading and so on
- 00:11:58 even though that's in a different view X
- 00:12:01 module because again it's merged
- 00:12:02 together globally so if in the index
- 00:12:05 Ches fault in the meetup folder we call
- 00:12:08 it set loading or we commit this we're
- 00:12:10 actually committing this to set loading
- 00:12:12 in these shared in X J's file because
- 00:12:15 again view X behind-the-scenes merges it
- 00:12:17 all together into one global store we
- 00:12:20 only split it up for readability reasons
- 00:12:23 in the end you could merge that all
- 00:12:25 together into one file again and have
- 00:12:27 the same result as before so now with
- 00:12:29 that we got a finished application we
- 00:12:31 cleaned up our store as I said you could
- 00:12:33 split it up even more by splitting these
- 00:12:35 files into different files where you
- 00:12:37 have just the actions just mutations but
- 00:12:39 then in the end you would just have
- 00:12:41 JavaScript objects with for example this
- 00:12:43 content in an extra file import it and
- 00:12:47 assign your import as a value for
- 00:12:49 mutations here this is the finished
- 00:12:52 project feel free to enhance it to
- 00:12:55 continue working on it to practice with
- 00:12:57 it it's not perfect there are things you
- 00:12:59 can improve there are things you can add
- 00:13:01 but I hope it was a great practice and I
- 00:13:03 hope you enjoyed working with it we
- 00:13:06 added a lot of features I hope you
- 00:13:07 learned a lot about beautiful view KS
- 00:13:10 and firebase and there will be more
- 00:13:13 projects in the future I'm really
- 00:13:15 looking forward to dead and I can't wait
- 00:13:17 to see you again bye
