https://full-time.learnhowtoprogram.com/assets/js/9acce61e.dbb0a646.js

1"use strict";(self.webpackChunklhtp=self.webpackChunklhtp||[]).push([[5417],{30876:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>m});var i=n(2784);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function r(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,i,a=function(e,t){if(null==e)return{};var n,i,a={},o=Object.keys(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=i.createContext({}),s=function(e){var t=i.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):r(r({},t),e)),n},d=function(e){var t=s(e.components);return i.createElement(c.Provider,{value:t},e.children)},u="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return i.createElement(i.Fragment,{},t)}},k=i.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),u=s(n),k=a,m=u["".concat(c,".").concat(k)]||u[k]||p[k]||o;return n?i.createElement(m,r(r({ref:t},d),{},{components:n})):i.createElement(m,r({ref:t},d))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,r=new Array(o);r[0]=k;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l[u]="string"==typeof e?e:a,r[1]=l;for(var s=2;s<o;s++)r[s]=n[s];return i.createElement.apply(null,r)}return i.createElement.apply(null,n)}k.displayName="MDXCreateElement"},33508:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>r,default:()=>p,frontMatter:()=>o,metadata:()=>l,toc:()=>s});var i=n(7896),a=(n(2784),n(30876));const o={title:"\ud83d\udcd3 Updating and Deleting Tickets in Firestore",id:"updating-and-deleting-tickets-in-firestore",slug:"updating-and-deleting-tickets-in-firestore",hide_table_of_contents:!0,sidebar_position:14,day:"weekend",type:"lesson",url:"https://github.com/epicodus-curriculum/react-full-stack/blob/main/0n_updating_and_deleting_tickets_with_firestore.md"},r=void 0,l={unversionedId:"react/react-with-nosql/updating-and-deleting-tickets-in-firestore",id:"react/react-with-nosql/updating-and-deleting-tickets-in-firestore",title:"\ud83d\udcd3 Updating and Deleting Tickets in Firestore",description:"We're ready to get our edit and delete functionality working again. We will continue to refactor code in TicketControl.js to update the edit and delete functionality to alter tickets directly in Firestore. We'll also make use of three Firestore functions:",source:"@site/docs/react/5_react-with-nosql/0n-updating-and-deleting-tickets-with-firestore.md",sourceDirName:"react/5_react-with-nosql",slug:"/react/react-with-nosql/updating-and-deleting-tickets-in-firestore",permalink:"/react/react-with-nosql/updating-and-deleting-tickets-in-firestore",draft:!1,tags:[],version:"current",sidebarPosition:14,frontMatter:{title:"\ud83d\udcd3 Updating and Deleting Tickets in Firestore",id:"updating-and-deleting-tickets-in-firestore",slug:"updating-and-deleting-tickets-in-firestore",hide_table_of_contents:!0,sidebar_position:14,day:"weekend",type:"lesson",url:"https://github.com/epicodus-curriculum/react-full-stack/blob/main/0n_updating_and_deleting_tickets_with_firestore.md"},sidebar:"react",previous:{title:"\ud83d\udcd3 Viewing Tickets from Firestore",permalink:"/react/react-with-nosql/viewing-tickets-from-firestore"},next:{title:"\ud83d\udcd3 Structuring Data in Firestore",permalink:"/react/react-with-nosql/structuring-d

1ata-in-firestore"}},c={},s=[{value:"Updating Tickets",id:"updating-tickets",level:2},{value:"Deleting Tickets",id:"deleting-tickets",level:2},{value:"What's Next",id:"whats-next",level:2}],d={toc:s},u="wrapper";function p(e){let{components:t,...n}=e;return(0,a.kt)(u,(0,i.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"We're ready to get our edit and delete functionality working again. We will continue to refactor code in ",(0,a.kt)("inlineCode",{parentName:"p"},"TicketControl.js")," to update the edit and delete functionality to alter tickets directly in Firestore. We'll also make use of three Firestore functions:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"updateDoc()")," will allow us to update a document in Firestore."),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"deleteDoc()")," will allow us to delete documents in Firestore. "),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"doc()")," will allow us to reference a document in the firestore database. With ",(0,a.kt)("inlineCode",{parentName:"li"},"doc()"),", we can specify the location of a new document or the location of an existing document.")),(0,a.kt)("h2",{id:"updating-tickets"},"Updating Tickets"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"To update tickets in Firestore, we'll refactor the ",(0,a.kt)("inlineCode",{parentName:"p"},"handleEditingTicketInList()")," function in the ",(0,a.kt)("inlineCode",{parentName:"p"},"TicketControl")," component. "),(0,a.kt)("p",null,"First, we need to import ",(0,a.kt)("inlineCode",{parentName:"p"},"updateDoc")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"doc")," from ",(0,a.kt)("inlineCode",{parentName:"p"},"firebase/firestore"),":"),(0,a.kt)("div",{class:"filename"},"src/components/TicketControl.js"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'import { collection, addDoc, onSnapshot, doc, updateDoc } from "firebase/firestore";\n')),(0,a.kt)("p",null,"Next, we need to refactor the ",(0,a.kt)("inlineCode",{parentName:"p"},"handleEditingTicketInList()")," function. Here's the new code:"),(0,a.kt)("div",{class:"filename"},"src/components/TicketControl.js"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'...\nimport { collection, addDoc, onSnapshot, doc, updateDoc } from "firebase/firestore";\nimport db from \'./../firebase.js\'\n\nfunction TicketControl() {\n  ...\n\n  const handleEditingTicketInList = async (ticketToEdit) => {\n    const ticketRef = doc(db, "tickets", ticketToEdit.id);\n    await updateDoc(ticketRef, ticketToEdit);\n    setEditing(false);\n    setSelectedTicket(null);\n  }\n\n  ...\n\n  return (\n    ...\n  );\n}\n\nexport default TicketControl;\n')),(0,a.kt)("p",null,"While this code is new, it's rather similar to the process we followed when adding a ticket to Firestore:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"First, we create a document reference with the ",(0,a.kt)("inlineCode",{parentName:"li"},"doc()")," function for the ticket that we want to update:",(0,a.kt)("ul",{parentName:"li"},(0,a.kt)("li",{parentName:"ul"},"The ",(0,a.kt)("inlineCode",{parentName:"li"},"doc()")," function takes 3 arguments: the database instance, the collection name, and the unique document identifier."),(0,a.kt)("li",{parentName:"ul"},"The ",(0,a.kt)("inlineCode",{parentName:"li"},"doc()")," function returns a ",(0,a.kt)("inlineCode",{parentName:"li"},"DocumentReference")," object, which as its name suggests, is an object that acts as a reference to a document within our Firestore database. "))),(0,a.kt)("li",{parentName:"ul"},"Next, we call the ",(0,a.kt)("inlineCode",{parentName:"li"},"updateDoc()")," function. The first argument we pass into this function is the document reference for the ticket we want to update, and the second argument is the new data that the ticket should be updated with."),(0,a.kt)("li",{parentName:"ul"},"Finally, take note that the ",(0,a.kt)("inlineCode",{parentName:"li"},"updateDoc()")," function is asynchronous, so we need to make our ",(0,a.kt)("inlineCode",{parentName:"li"},"handleEditingTicketInList()")," function ",(0,a.kt)("inlineCode",{parentName:"li"},"async")," and apply the ",(0,a.kt)("inlineCode",{parentName:"li"},"await")," keyword before the ",(0,a.kt)("inlineCode",{parentName:"li"},"updateDoc()")," function call.")),(0,a.kt)("p",null,"Note that we can optionally rewrite the above function like so:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const handleEditingTicketInList = async (ticketToEdit) => {\n  await updateDoc(doc(db, "tickets", ticketToEdit.id), ticketToEdit);\n  setEditing(false);\n  setSelectedTicket(null);\n}\n')),(0,a.kt)("p",null,"Since we've set up the listener in the last lesson, this means that anytime we update a ticket with the ",(0,a.kt)("inlineCode",{parentName:"p"},"updateDoc()")," function, our listener will be triggered and the ",(0,a.kt)("inlineCode",{parentName:"p"},"mainTicketList")," state variable in the ",(0,a.kt)("inlineCode",{parentName:"p"},"TicketControl")," component will be updated."),(0,a.kt)("h2",{id:"deleting-tickets"},"Deleting Tickets"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"To delete documents in Firestore, we'll update the ",(0,a.kt)("inlineCode",{parentName:"p"},"handleDeletingTicket()")," function in the ",(0,a.kt)("inlineCode",{parentName:"p"},"TicketControl")," component. We'll also need the Firestore function ",(0,a.kt)("inlineCode",{parentName:"p"},"deleteDoc()"),", so let's start by updating our import statement from ",(0,a.kt)("inlineCode",{parentName:"p"},"firebase/firestore"),":"),(0,a.kt)("div",{class:"filename"},"src/components/TicketControl.js"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'import { collection, addDoc, onSnapshot, doc, updateDoc, deleteDoc } from "firebase/firestore";\n')),(0,a.kt)("p",null,"Next, let's update ",(0,a.kt)("inlineCode",{parentName:"p"},"handleDeletingTicket()"),". Here's the new code:"),(0,a.kt)("div",{class:"filename"},"src/components/TicketControl.js"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'...\nimport { collection, addDoc, onSnapshot, doc, updateDoc, deleteDoc } from "firebase/firestore";\nimport db from \'./../firebase.js\'\n\nfunction TicketControl() {\n  ...\n\n  const handleDeletingTicket = async (id) => {\n    await deleteDoc(doc(db, "tickets", id));\n    setSelectedTicket(null);\n  } \n\n  ...\n\n  return (\n    ...\n  );\n}\n\nexport default TicketControl;\n')),(0,a.kt)("p",null,"The ",(0,a.kt)("inlineCode",{parentName:"p"},"deleteDoc()")," function is nearly identical to the ",(0,a.kt)("inlineCode",{parentName:"p"},"updateDoc()")," function:"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"It's asynchronous and uses ",(0,a.kt)("inlineCode",{parentName:"li"},"async")," and ",(0,a.kt)("inlineCode",{parentName:"li"},"await")," to manage the asynchrony."),(0,a.kt)("li",{parentName:"ul"},"It takes a document reference as an argument that specifies which document in the Firestore database should be deleted. ")),(0,a.kt)("p",null,"The only difference from the ",(0,a.kt)("inlineCode",{parentName:"p"},"updateDoc()")," function is that ",(0,a.kt)("inlineCode",{parentName:"p"},"deleteDoc()")," does not take a second argument for data."),(0,a.kt)("p",null,"And with that, we've completed CRUD functionality for our Help Queue application! "),(0,a.kt)("h2",{id:"whats-next"},"What's Next"),(0,a.kt)("hr",null),(0,a.kt)("p",null,"In the next lesson, we'll wrap up our introduction to Firestore by reviewing how to structure data in Firestore."),(0,a.kt)("p",null,"In upcoming coursework, we'll expand the functionality of our Help Queue: "),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"We'll add authentication and basic authorization."),(0,a.kt)("li",{parentName:"ul"},"We'll use the react-router library to create routes."),(0,a.kt)("li",{parentName:"ul"},"We'll host our project with Firebase."),(0,a.kt)("li",{parentName:"ul"},"We'll learn about Firestore Queries, styled components, and other further exploration opportunities."),(0,a.kt)("li",{parentName:"ul"},"Finally, we'll incorporate a wait time into our Help Queue.")))}p.isMDXComponent=!0}}]);