31:[] 2f:{"title":"Chat application with Firebase on Observable (Twitch)","cells":[{"id":0,"value":"md`# Chat application with Firebase on Observable (Twitch)\n\nThis is the notebook I used when doing an Observable Twitch stream! None of this will work unless you signin at the bottom because we added security :) However, I had added the option to signin in anonymously so you don't need to give up your email address.\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"import { firebase, listen, viewof user } with {\n firebaseConfig\n} from '@tomlarkworthy/firebase'","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"// Copy and paste the config object from the Firebase project settings for a web application\nfirebaseConfig = ({\n apiKey: \"AIzaSyBN4bxw6d0cM0CGPNzRrkRlBqwFQnPLdN4\",\n authDomain: \"larkworthy-dfb11.firebaseapp.com\",\n databaseURL:\n \"https://larkworthy-dfb11-default-rtdb.europe-west1.firebasedatabase.app\",\n projectId: \"larkworthy-dfb11\",\n storageBucket: \"larkworthy-dfb11.appspot.com\",\n messagingSenderId: \"786910701676\",\n appId: \"1:786910701676:web:8d7dd002acf3b78c74d049\",\n uiConfig: {\n // https://github.com/firebase/firebaseui-web#configuration\n signInOptions: [\"google.com\", \"anonymous\"]\n // tosUrl: '', // Terms of service url.\n // privacyPolicyUrl: '', // Privacy policy url.\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"md`Its useful to assign SDK services to variable so autocomplete works`","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"firestore = firebase.firestore()","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"firestore","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`## Basics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"md`Write some data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"firestore.doc(\"messages/5h126rZvETtk4U010ueQ\").set({\n by: user.uid,\n msg: \"Hello\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"md`Read a snapshot in time:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"(await firestore.doc(\"messages/5h126rZvETtk4U010ueQ\").get()).data()","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`Read a collection at a snapshot in time`","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"(await firestore.collection(\"messages\").get()).docs.map(d => d.data())","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"md`Read a doc AND update in realtime. Use list to bind a location to a cell, and have all the nice dataflow features of dependant recomputing nicely.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"listen(firestore.collection(\"messages\").limit(2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`## Lets Build a chat app`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"import { html } from '@observablehq/htl'","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"import { reconcile } from '@tomlarkworthy/reconcile-nanomorph'","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"messages = listen(\n firestore\n .collection(\"messages\")\n .orderBy(\"t\")\n .limitToLast(20)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"md`When we add Firebase storage we need to convert the filepaths do download URLs which is a little awkward as they are promises`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"messagesWithURL = promiseRecursive(\n messages.map(row => ({\n ...row,\n ...(row.path && { url: storage.ref(row.path).getDownloadURL() })\n }))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"// Thanks you trincot!\n// https://stackoverflow.com/a/44072329/862295\n// A wonderful peice of code contralises all promises in a nexted object to the root.\nfunction promiseRecursive(obj) {\n const getPromises = obj =>\n Object.keys(obj).reduce(\n (acc, key) =>\n Object(obj[key]) !== obj[key]\n ? acc\n : acc.concat(\n typeof obj[key].then === \"function\"\n ? [[obj, key]]\n : getPromises(obj[key])\n ),\n []\n );\n const all = getPromises(obj);\n return Promise.all(all.map(([obj, key]) => obj[key])).then(\n responses => (\n all.forEach(([obj, key], i) => (obj[key] = responses[i])), obj\n )\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"ui = {\n return reconcile(\n this,\n html`\n ${messagesWithURL.map(row =>\n row.url\n ? html``\n : html``\n )}\n

${row.by}
${row.by}	${row.msg}

\n {\n mutable msgEvt = evt;\n }}>
\n\n {\n mutable fileEvt = evt;\n }}>\n\n`\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"mutable msgEvt = undefined","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"msgEvt.key","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"proccessMessage = {\n if (msgEvt.key == \"Enter\") {\n firestore.collection(\"messages\").add({\n by: user.uid,\n msg: msgEvt.target.value,\n t: firebase.firebase_.firestore.FieldValue.serverTimestamp()\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"msgEvt.target.value","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"mutable fileEvt = undefined","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"storage = firebase.storage()","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"sRef = storage.ref(`/examples/chat/${randomId()}`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"processFiles = {\n const file = fileEvt.target.files[0];\n const sRef = storage.ref(`/examples/chat/${randomId()}`);\n const result = await sRef.put(file);\n const path = result.ref.fullPath;\n firestore.collection(\"messages\").add({\n by: user.uid,\n path: path,\n t: firebase.firebase_.firestore.FieldValue.serverTimestamp()\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"import { randomId } from '@tomlarkworthy/randomid'","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`## Security`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"viewof user","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"user.uid","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"import { footer } from \"@tomlarkworthy/footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}