Firebase storage with ClojureScript (+ Re-Frame)

hey what's up guys in this video we're going to learn how to store data and retrieve it from Firebase in our reframe project so that sounds pretty cool let's get [Music] started so I'm working up a project I made in my previous video the link to that is in the description below so the first thing I want to do is just start my ripple so I'm going to use Culver and start a project rle I'm going to connect to Shadow tjs select the app build cool and this is the project let's close this I want to go to our views and I want to just create what this is going to look like so basically what we're going to do is we're going to have a list of food items we're going to be able to add to that list of food items and that is going to be persisted on Firebase so first thing I want to do is create a component where we can list food items so I'm going to define the component here I'm going to call it um food list and I'm going to create a lip binding and right now I'm just going to hard code the data so we'll have our Foods here and let's say apples and oats and here we want to just render out some hiccups so it'll be a UL element and we're going to map over those foods and we're going to just return each food item as An Li element so we'll run a function we'll get our food and we'll just return An Li element with the name of the food and we'll give it the key and the key will just be the food name cool let's save that and we'll just add it let's add it here on the inside of our main div our main div so we'll just add it to the end of that and we can render it with square brackets so food list save that and if we go back cool we have our food list here now what I want to do is create an input where we can well actually before we do that let's retrieve this data instead of hardcoding it let's let's retrieve it from our database so from our reframe database so what I'm going to do is I'm going to create a new key here I'm going to call it food items and it's is going to be a blank Vector for now actually no I'm going to hard code these here so oats and let's say bananas b a n a n s y cool and I want to fetch that as a subscription so by using reframe subscribe and then we don't have the subscription yet but we'll add it so it'll just be like Subs uh Foods cool so let's go to our subs Nam space and under user loading let's just copy this and we'll create a new um a new key here and we'll call it foods and we'll just retrieve the foods from our DB save this now this is going to fail because like I said before we have to dreference uh our our values that we get from reframe so we can just dreference that here if we save this we're going to have nothing because we just have to refresh to get that new database and we still have nothing and we probably got ourselves a console error h no let's see what's going on so we're getting our Foods we're subbing to Foods foods and it's because we're using the wrong and you using the wrong key so let's do that come back here and yeah we rendering out our list awesome so now let's create an input where we can add items to this list so let's go back to views and I'm going to create a new component here and then Define it I'm going to call it food input and I just want to return a div with an input field so an input and the type here will be let just scroll down a bit type will be text and let's have a placeholder of of into food and then yep now that should be okay and then I want a button underneath this I think it'll be placed the along side a button and the button we'll just say um let say save food and we'll just have no attributes for now but we're going to add an onclick Handler just now and we also want to add an unchange Handler for our input so let's just go back make sure it's here it's not there because we have to add it to our main panel so above food list let's just add food input let's go back cool and we have our food input awesome so let's go back here and now basically want to handle the onchange event of this food input so we can run on change and this event handle is going to work like if you're familiar with react it works very similar so we we'll take a function it will get an event and we want to off of that event get from the target its value so let's just console log this to show you what we got so we can go console.log JS console.log and if we go back here let's just make clear this out enter food we can see that we're getting the value from this input this is essentially the same as going e . target. value so now instead of logging this out I actually want to dispatch a reframe event which stores this in our reframe DB so we'll go reframe dispatch and this will be part of an event will be the second argument and let's call it food from our events name space which I don't think we're importing it's import it here so we got our subs name space that let's import from our events name space events and we'll import okay we don't let's say um set food input and let's go to our event name space so we can go here and let's create that so I'm just going to copy out previous set user event and it's going to work very similar so we're not going to use the event name but we are going to use the value here so here instead of setting user we'll food input and we'll associate food input with our value and we can also just initialize this food input as like a blank string save this go back to our views so now we should actually be able to see this update in rrisk we go back here and we pull out rrisk could we let's just refresh so we get that initial value of a blank string and here's our food input so if we type in here it updates cool and we can see that event um being dispatched here so let's minimize that now let's make a way where we can add this to our list of existing food items so here on the unclick Handler of this button I want to fire off a function I'm just going to make it an anonymous function and we don't need all these brackets and here we want to run reframe and we're going to dispatch and this is also going to be an event so from our events we'll say add food item and we don't need to pass through a food item because we're just going to get it from our database where it's being set so let's go underneath set food item and we'll create a new event called add food item we don't need any of this so we can actually get rid of this and just put an underscore here and we'll associate food input with blank so it will reset that so right now we can see if that works save for item it doesn't that's because we're not actually associating the value of this input with what the input is so let's make sure that when we update this value we use that value so the value of this will be a reframe subscription subscribe and we are going to subscribe to food input subscribe so Subs SL food input we don't have the subscription so let's make it we can just go to our subs namespace and here we'll create a food input subscription and it will just return us the food input field from our database go back to our views and we also want to dreference this save this and this should work yeah cool now it's we want to actually add that item to our food list so let's go back to events and let's make like a new food list so we'll create a left binding and we'll say new food list that will be populated in our database so we'll say food what did I call it man I need to remember these things food items food items will be Associated to our new food list and what we really want to do with our nude food list is we want to add this food input value to the end of our existing food items list so we can use conjoin and you'll get our food items from our database and then we want to get the food input from our database and we also want this assour to be inside of this left binding and that's it so essentially what this is going to do is let's say we con and we had apples and we wanted to add banana our food input would be same like banana and our food items would be a vector let's say contained apples if we evaluate this then we get apples with banana awesome so let's save this and this should work let's just get knen it up a little bit here go to views I think it'll work let's type something in save it yeah and now we're storing stuff to our reframe database that of course if we refresh this app none of our stat is persisted so what I want to do is persist this data in Firebase and then fetch it from Firebase when we're working with it so the first thing I want to do is go to our reframe project in Firebase and I want to add the fire store database to it so let's set this up it's really simple we just need to create a database cool go next and I'm going to start this in test mode I'm not going to look at the Firebase store rules in this video now it's provisioning Cloud store let's just carry on from here so I'm going to go back to our project and I'm going to go to F base and I'm going to create a new file here called db. cljs and in this file we're going to be working with uh storing um updating and retrieving documents that we store in Firebase but before we can work with Firebase as like the fire store in Firebase we actually need to initialize our fire store so to do to do that I'm going to be using the new light module in uh the Firebase package so Firebase fire store light include this as fire store and uh just above all state change this is where I want to initialize our fire store so to do that we just need to call fire store initialize fire store and this takes in our Firebase application so instead of running GI apps we can just call GI app and this will initialize fire store for us so let's refresh our application to make sure that works cool initialize fire base we can even print line here initialize fire score spit it nicely so if we ref refresh initialize fire Bas initialize fire no errors cool then what I want to do is go and let's go to DB and let's require the same package so let's go up here and require this [Applause] package and now we can make a a function which will allow us to create a document so I'm going to Define um store [Applause] Doc and right now it's not going to take any arguments oh actually let's make it take some data so we'll call fir store set Doc and this is going to set a document for us and we need a fire store document to set so let's create that here fir store doc that's the function and this needs to take an instance of our fire store as well as a part on way to save it so we can go fir store get fir store and a path on where to save so let's just actually also pass through this path and the path is um like we'll have a collection of users and the user ID will be one and it will store this data to there and we'll see that now so let's also pass through this data but this data has to be JavaScript so we can run CJs tojs uh and that we'll convert our closure map into a JavaScript object and this is not cljs it's actually just clj let's evaluate this and let's test if it works so we can run comment and let's store oh instead of hard coding the path here let's just use the path that we pass pass in so path and it's run store Doc and the path will be users one and we'll just pause through test data and let's evaluate this this and we get a promise back let's see don't get any errors here let's see if we have any data in our fire stol refresh this yeah users and then we should have a user one with some test data great so now we have a way to store a document let's create a function to update a document so I'm going to create a function here called update Doc and it's also going to take path and data and it's pretty much going to do this whole thing so we can actually just cut this out and make a function called um I don't know git git Doc and it can take a path and let Define that function here defin get dark it takes a path and it return F St doc get F stall that's cool so this is can just be kneed up a bit and we can run pretty much the same thing except with the function here we're going to call is update doc so now we can copy this and run update doc users and then let's make this data data 2 that's run this H we get M back I think they run the right thing let's evaluate everything evaluate get this get doc store doc okay everything's evaluated let's try again cool there was a problem with the evaluation now if we go to our f app cool we've updated our document now we just need a way to retrieve that document so I'm going to create a function here called Fitch Doc and it's just going to take a path we don't need to pass data and here we'll run fire store get doc get the path and then what I want to do is actually want to be able to run a function after we get the after we fetch the document so I'm just going to pass through a function here called like on success and then I want to call after so after this promise is resolved I want to then handle the return value so we can use promiser for that so let's import promiser as P evaluate this well it's actually promiser call as P let's evaluate this and if we go down then what we can do after after we fetch this document is we can run P then and then we can posture a function a function to handle the success result so function and what we will get here is a document but I want this doc I want the document to instead of being handled it's going to be a JavaScript object I want it to be closured so what I'm going to do is um transfilm this document to a closure script map and then pass that new map to the unsuccess Handler so we can create a let binding and get data here and we'll convert JavaScript to clj and we'll get the data off of this document because that's where the data is going to be and then I want to set keyword eyes keys to true and this will change string keys to uh closure to closure keys so we can handle it like we can use the keyword functions and now what I want to run is UN success with the data we passed through don't know why this isn't there we go evaluate this and now what we can run is like Fitch Doc and we want to Fitch users one and let's just Foster a function which prints what we get out of it so we can run print line with the value returned let's run this and if we go to our console here we should see something nope let's evaluate this function and run this yeah okay we're getting it it's fetching the data and we're seeing it in our console so now we can fetch data from Firebase and use it so let's instead of using users one let's create a store with our users uid and we'll create the food instead of the test keyword and data we'll create the food list there so what I want to do is I want to just when we initialize this app with a user I'm going to create a store and if that store is already created then nothing will happen otherwise it will create it so install user if there is a user here then what I want to do is I want to create a document that we can start working with with that user what I'm going to do is we're going to check when there's as a user to store run store doc this store Doc and the path will be uh the string users slash and then I want to use this uid so we can get the uid from the user and we just want to store like a blank document and we need to import the store doc from our database so we're going to import this name space into init and I'm just going to refer to that store dock function cool so when we store our user and the user exists we're going to just make sure that this document exists so we can just update it while using our app so if we refresh this and go to our Firebase store we should see a new document added here and we don't because we're not logged in so let's log in okay and we see an error invalid document reference document references must have an even number of segments but the user has but users has one so let's see what happened let's see what this user path evaluates to [Applause] and if we refresh this application it should try again and that's CU we don't have a uid oh and that's because I'm referring to user not user to stall so user to stall we save this we refresh this cool now if we go back to our F stall we have a blank document so this store doc function is actually overriding the user store inside a Firebase so what I want to do is just check if the user uh already has a store if it's uh nil then we'll create one otherwise we'll continue so what I'm going to do here is when we have a user to store I'm going to try fetch the user so we'll go we'll use this get doc or fetch dock function fetch Dock and user path so instead of you doing this we'll get the user path [Applause] here pass through our user so when user to store what we'll do is we'll Fitch the doc and that will be our user and we'll have a function here let's call a new and if n u then we will well when n u we will create a blank document oh and we need the path here so let's just also let's create a finding for this user path uh and we'll call it user maybe user FB path and then we'll fetch stock from the user FB path cool this way we won't overwrite data that's stored for the user cool and we also just need to use this user to store not the user from Firebase so cool let's check this out I'm going to add some data here let's refresh application and we should still see that data here fing y it doesn't override it cool so now what we can do is in our views when we fetch a doc we'll have our user data and what we want to do is get our foods from user data so we'll have like let's have a food list and that's from user data and I want to call a function well I want to dispatch an event to set set the foods so we have set food input but I want to set the whole um the whole food items array so instead of setting food input I'm going to say set food items and here we'll have items and we'll say sit we'll have food items and that will be our items and so if we go back here we will set food items with our food list so we kind of want to default this we'll say it's either going to be there or not and if it's not there we'll default it to a blank array so we can say get from user data food list otherwise return nothing well this blank vector and then we'll dispatch that to reframe we'll use reframe uh dispatch function and then the event name will be the one we just created which is set food items and then we'll sub foods and then I think what do we have enough initial database let's open our initial DB and we have this blank Vector let's keep it as blank and let's just see that work so let's refresh this and check we got no issue isues cool we don't have any food items because there's nothing here so if we just added a field called food items and set it to an array and let's just add a food item here let's add apples if we refresh this we should see apples here that'ss H that's cuz I called this food list set food items and this is food food items and let's rename this let's just use food items instead of food list keep it consistent so we'll call this food items refresh and now we should see something so let's refresh this page come on let's see our food item there we go apples cool so now we're loading data from Firebase let's store data in Firebase so when we add a food item cool we can turn on newb but what we can also do is push this to fire base so we can inside of here uh we just grab from oh here we'll just grab this DB namespace we'll go back to our events and we'll include this Nam space here and let's just refer to the um update the update doc function and let's also refer to this what do we call it this user path function doc user path and then what we can do is before we return our DB we can update our document and get the user PA from our user in the database and we can set food items to our new food list so let's refresh this loading okay we could also just have some State here it shows that this is loading let's say pairs save food we see it here and it should be added here then we refresh awesome and it's loading so we can actually let's just add some loading State quickly we go back to our views DV if we can set the to n and we can go back to our can go back to our component here and we can say if n add Foods so we're basically still loading them then we can return div loading foods items otherwise we can return the list of food items and let's see that in action loading cool loading food items and we have our food items and now we can add a new one new item save food refresh it should still be there cool and that's that's integrating Firebase into our reframe application I hope you guys enjoyed this one uh sorry about the confusing names but it is what it is code is down below hope you have a good one cheers guys bye all [Music] right

Unlock the potential of Firebase in your ClojureScript re-frame app! Dive into this tutorial and learn how to effortlessly store data in Firebase from your ClojureScript application. Follow along as we guide you through the process of integrating Firebase, setting up data storage, and seamlessly interacting with Firebase from your re-frame app. Elevate your app's capabilities and streamline data management with this comprehensive guide! Starting Project: https://github.com/danownsthisspace/re-frame-firebase-auth Final Project: https://github.com/danownsthisspace/re-frame-with-firebase Get started with a re-frame project using this re-frame Template: https://calva.io/re-frame-template/ Debug and monitor your re-frame applications with re-frisk: https://github.com/flexsurfer/re-frisk Set up and manage your Firebase project via the Firebase Console: https://console.firebase.google.com/u/0/ Utilize Promesa for promise-based asynchronous operations: https://github.com/funcool/promesa Implement Google Sign-In with Firebase using the Google Sign-In - Firebase Documentation: https://firebase.google.com/docs/auth/web/google-signin Learn about Firebase's method for managing authentication state changes: https://firebase.google.com/docs/auth/web/manage-users Understand and configure authentication state persistence in Firebase: https://firebase.google.com/docs/auth/web/auth-state-persistence Explore Sakura for classless CSS styling in your web projects: https://oxal.org/projects/sakura/