![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/04\/Making-Dumb-Components-Smart-Refactoring-square-300x300.png\")
<\/a><\/p>\nA popular backend JavaScript framework, MeteorJS (Meteor), recently decided to expand its front-end templating frameworks to include ReactJS (React) and Angular. This was a huge and welcoming change. React is one of the more popular front-end frameworks. It was also a great framework for my new gig, so it was high time that I broadened my skill set by learning this new JavaScript framework.<\/p>\n
To help start my learning, I turned to a great resource for Meteor called TheMeteorChef.com. This group published a boilerplate for Meteor\/React projects called Pup<\/a>. It is a great starter application, but like most boilerplate code bases, the interactivity that I needed my application to have wasn\u2019t built in. I had to expand my knowledge of React so that I could satisfy all stakeholders in this project.<\/p>\n I was lucky enough to not only land this gig, but it was small enough that I was able to choose the technology stack. I\u2019ve been developing in Meteor for over a year and have come to really like how quick a working prototype can be up and running. So I jumped at the chance to do this project in Meteor and its new support of React.<\/p>\n Let me tell you how I went about making React\u2019s presentational, or \u201cdumb\u201d components, into React\u2019s \u201csmart\u201d components so that my project would succeed.<\/p>\n It\u2019s a lot easier to understand what dumb and smart React components are when referring to these unofficial descriptive names.<\/p>\n Dumb components are how your application presents HTML. They\u2019re how your website looks. You feed them some data (via props) and they spit out that formatted data to the browser. They\u2019re not very smart. They\u2019re a one-trick pony. They do their job and go away.<\/p>\n Smart components, on the other hand, are what make your application work. Not only do smart components accept data (via props as well) like dumb components, they also monitor and capture any change in data that has been initiated by the end user.<\/p>\n The real-time monitoring that React would capture includes, for example, updates in an admin section, a change to the product quantity in a shopping cart, or even just clicking on a drop down description box. You use smart components to update databases, keep track of the state of objects, and bind actions to one another.<\/p>\n The following is a very basic, or dumb, component that takes in a value (via props) as an object that contains the year, which is then output in the HTML code. Nothing extraordinary here. It\u2019s a good old-fashioned function.<\/p>\n You might recognize this same functionality in the older, although still valid, ES5 JavaScript syntax:<\/p>\n Just because a component is dumb, doesn\u2019t mean it can\u2019t be complex. Here\u2019s an example that not only spits out data fed to it, but it can loop over database records, calculate values, and provide a very slick and functional application. But it is not smart.<\/p>\n <\/p>\n So let\u2019s walk through this dumb component and see how it\u2019s more complex than the previous example. Just because it\u2019s a dumb component, doesn\u2019t mean that it\u2019s not useful. Far from it.<\/p>\n This is a prime example of a product page: a list of product attributes retrieved from a database. Now instead of some \u201csmart\u201d interactivity, this type of output would usually link to a product description page where one could actually place the product in a shopping cart, for example.<\/p>\n It\u2019s just a basic function that is fed some data (the \u2018loading’ and \u2018images’ objects) and returns some formatted HTML to the browser\u2019s Document Object Model (DOM), which the end user sees.<\/p>\n The name of this function is \u2018Output’ and the values within the \u2018loading’ (typically a Boolean), \u2018images’ (an array of objects), and counter (a number) objects are passed to the function so that they can be placed in the HTML that is returned. Collectively, these inputs are referred to as \u2018props’ in the React framework vernacular. This is the ES6 syntax for a function, sometimes called a \u201cfat arrow function.\u201d In the old way of ES5, it would be written as:<\/p>\n The first parameter being passed into the function is the \u2018loading’ object. This is a pretty common design pattern. As your application is loading this view, or page, it\u2019s making an asynchronous call to the database to fetch all of the image data and package it up in a nice array of objects.<\/p>\n This page\/view\/component is also retrieving all of the images and other elements to display on the page. While this action is happening, \u2018loading=true’, which tells your application that it doesn\u2019t have all of the necessary building blocks of your current page\/view\/component.<\/p>\n Therefore, display a spinner until it has all of the information, at which point the \u2018Loading Component’ (<Loading \/>) changes the value of \u2018loading’ from true to false (it\u2019s up to you to determine if you should use a percentage progress bar or a plain spinner<\/a>).<\/p>\n The second parameter, or prop, passed to the function is the \u2018images’ object, which, as noted, is an array of objects that was returned from the database. These could be products, comments, blog posts, or any list of items that have the same data structure. Let\u2019s check out what this data might look like.<\/p>\n Each object contains a unique database record identifier (_id), a name for the image file (fileName), the size of the image, in bytes (size), and the Universal Resource Identifier (URI) where the image can be accessed over the internet (src).<\/p>\n Those are two objects containing individual image data. It\u2019s probably coming from a database call in a different function, which will take all of the resultant database objects and \u201cgroup\u201d them into an array, which is then passed into our \u2018Output’ function.<\/p>\n Or you could create the array manually. You\u2019ll see manually created database objects in many boilerplate frameworks, because their creators don\u2019t hook up a database and provide filler data for various, albeit in my opinion, bogus, reasons. This shortcut can be very frustrating when you are trying to learn a new language<\/a> or framework.<\/p>\n So, if you see something like the code below, it\u2019s usually because there\u2019s no database connected.<\/p>\n Both results provide the function of an array looking like this:<\/p>\n If you wanted to access each database record, or object, you could call each like:<\/p>\n <\/p>\n So now we know what data to expect when the function is called and its output returned and rendered by the DOM. When we refactor this dumb component into a smart container, we\u2019ll use the same data, but enhance what the component can do as well as what the component allows the end user to accomplish with a better User Experience (UX).<\/p>\n Now that the function has the data, let\u2019s use the \u2018loading’ variable and see if we should show the HTML output or the spinner. This is an if-else shorthand statement in the form of:<\/p>\n condition ? if true do this : if false do this<\/p>\n x == 2 ? \u2018Yes\u2019 : \u2018No\u2019;<\/p>\n We\u2019ll read it as: \u201cnot loading,\u201d is this true or false?<\/p>\n This syntax might make a bit more sense in the more verbose ES5 syntax: If the database has returned the dataset, show it; otherwise, show the spinner.<\/p>\n So now that the function has some parameters to work with, let\u2019s start to construct the HTML (or in this case, JSX, React\u2019s XML preprocessor to JavaScript) to output to the DOM for rendering. If we can understand how this dumb output works, our process for converting to a smart container will be much easier.<\/p>\n The code has some basic Bootstrap \u2018<table>’ tags (actually, the table is a ReactJS component, as identified by the capitalized word). Then common HTML \u2018<tr>’ and header tags \u2018<th>Original File Name<\/th>’, etc.<\/p>\n Then comes the database output. This code is pretty typical and not unique to React; it just outputs one database record per row. There are many ways in the older ES5 JavaScript syntax to iterate through a set of database records (\u2018for’, \u2018while’ etc.), but in ES6, we use the \u2018map()’ method.<\/p>\n This section of code is pretty important for this function. It tells the JavaScript engine in your browser that you are going to loop over a set of database records. The outermost curly-brackets \u2018{}’ denote that this is dynamic code.<\/p>\n Let\u2019s take the \u2018images’ object that was passed into our function and deconstruct it\u2014we are going to pull out the individual data points (_id, fileName, size, src) from each object (imageObject1, imageObject2, etc.) in the array. We can then use these as output in the HTML\/JSX.<\/p>\n This dynamic \u2018<tr>’ block within the \u2018map()’ method will be output to the DOM once for every record returned from that database within the result set \u2018images’.<\/p>\n <\/p>\n Now that we fully understand what this dumb component does, let\u2019s think for a moment about what it doesn\u2019t do.<\/p>\n Why do we output a simple table with rows and columns? To convey information, right?<\/p>\n Think baseball scores; stock equity data; warehouse inventory. Now, how often do we just ingest that data? Don\u2019t we want to watch that game? Trade that stock? Update the inventory with a new shipment?<\/p>\n Most of the time, you\u2019d like to offer CRUD (Create, Read, Update, Delete) methods for each row so that end users can interact with the data. Today\u2019s technologies allow end users the ability to be more productive, and web technologies are no different.<\/p>\n Ten years ago, all of the interactivity had to take place on the server, so you\u2019d click a product from a list, and that would tell the server to send a product detail page to the browser where the user could then put the product in their shopping cart. Modern web technologies have the ability to go to the product detail page like before, but now we can also just add it to the shopping cart right from the listing page. That\u2019s more complex, and smart.<\/p>\n I needed to have my rows of image data to be acted upon by the end user. Rows would need to be deletable, but there is also a date field that the user could alter.<\/p>\n Here\u2019s a screenshot of the User Interface (UI). There\u2019s a simple Delete button that upon clicking, will, obviously, delete the row from the database.<\/p>\n <\/p>\n The design specs required the date to be displayed as text and not in an \u2018input’ box (see first row). To indicate that it could be edited, a pencil icon would be clickable and turn the text into an \u2018input’ tag that could then be editable (see the second row, and note that the pencil icon is replaced with a clickable check mark that would submit the changed date).<\/p>\n The code for the Delete button is relatively easy. You just need to associate the unique row identifier, in many cases the database record number, with the \u2018onClick’ event.<\/p>\n When the Button component (<Button \/>) is clicked, it calls a new function, \u2018handleDelete()’, which actually does the deleting from the database.<\/p>\n Notice that by adding the functionality of the Delete button, we\u2019ve started our refactoring of the dumb component. This action is \u201csmart\u201d because we are binding the action of the Delete button to the function that does something: tells the database to remove a record.<\/p>\n Recall our definition of a smart container: code that makes your application work. It\u2019s doing something. It\u2019s deleting a record.<\/p>\n To be honest, this functionality was included in the boilerplate code. It\u2019s not that hard, you\u2019re just having your code call another function that talks to the database and gives some feedback to the user upon completion, like an alert box.<\/p>\n Now, let\u2019s step it up a notch. When we click on a button (the pencil icon), we\u2019re not going to talk to the database from some other abstracted piece of code; instead, we are altering the DOM, what the end user sees right then and there.<\/p>\n There\u2019s a bit of noise in the above code snippet, but it\u2019s just the same dynamic <tr> block that we\u2019ve been using to output a row of the database result. What we added are two icons (Font Awesome Pencil and CheckCircle). A basic if-then shorthand statement (\u2018this.state.editDate ? x : y’) separates them and determines which to show.<\/p>\n \u2018this.state.editDate’ is a \u201csmart\u201d way to keep track of what\u2019s happening in your application. It\u2019s called State. Basically, it\u2019s a session variable. \u2018editDate’ is initialized with \u2018false’ because the date is not being edited. Notice in the Pencil icon component, there is an \u2018onClick’ event that calls the function \u2018changeFontAwesome()’, which changes this state.<\/p>\n Behind the scenes, built into the React Framework, this \u201csmart\u201d component will notice that the value changed, because it\u2019s listening for all sorts of changes. The component will then re-evaluate the if-then shorthand statement and show the \u2018then’ statement based on the new value (\u2018true’).<\/p>\n So in the code above, the appearance of the row changes from looking like the top row with the Pencil icon, to the second row with the \u2018input’ text box and CircleCheck icon.<\/p>\n In addition to the change in the Font Awesome icon, we\u2019ve enhanced the \u2018input’ box to show a calendar (\u2018<DatePick \/>’) when it has focus, to aid in changing the date. This is a pretty common enhancement in applications today.<\/p>\n I saved this code and ran the application. It looked great. All of the date fields were displayed as text, and each had a pencil icon next to it. But then, guess what happened?<\/p>\n I clicked on the pencil and all of the dates changed over to \u2018input’ boxes\u2014not just the row I\u2019d clicked on. Ugh. Makes sense in hindsight. The \u2018changeFontAwesome()’ function wasn\u2019t bound to any specific row. It didn\u2019t know which row to target, which row to change. Not what the specs called for. I really needed a \u201csmarter\u201d component so it would know which pencil was clicked and, therefore, which \u2018input’ box to show.<\/p>\n One of the nice aspects of modern day frameworks is the tendency to create small chunks of code that do one thing, and only one thing. Like this code\u2019s \u2018handleDelete()’ function.<\/p>\n As we\u2019ve been refactoring our dumb component, we\u2019ve been adding more functionality. Our code base is doing more than one thing, more than just outputting database rows. We\u2019re deleting rows and changing dates.<\/p>\n So what are we going to do? Let\u2019s have our \u2018Output’ component handle the non-dynamic output. It\u2019ll contain all of the HTML that sets up the <Table \/>. And then, between the <tbody> tags where the dynamic database rows would go, we\u2019ll call a new function (<CustomRow \/> Component) that deals with just one row of data.<\/p>\n <\/p>\n All of that code that we moved remained the same. We just moved it. A nice benefit is that code in the CustomRow component is now self-contained.<\/p>\n So what now, you ask? Well now, when we click on the Pencil icon, there\u2019s only one possible <FontAwesome \/> component to change, because the <CustomRow \/> component doesn\u2019t know about any other rows, just the one row with the one <FontAwesome \/> component to change.<\/p>\n Even though this component is called many times over, each output is self-contained. Yay.<\/p>\n Let\u2019s finish this refactoring. Recall that the \u2018handleDelete()’ function we called, which was outside of the \u2018Output’ function, made this component \u201csmart.\u201d Since the <CustomRow \/> component is self-contained, we\u2019ll need to move any functions that do something on a row, into the <CustomRow \/> component.<\/p>\n A common way to group the functions, which is now available with ES6 syntax, is to convert the component to a Class. This is the final step in making a smart container. A Class allows all of the interior functions and components to easily talk to each other, pass data around, get and set things (getters\/setters), and keep track of State.<\/p>\n Refactoring a dumb component into a smart one isn\u2019t too difficult once you understand the differences between the two. There are some boilerplate sections that are needed, like custom methods and functions that add functionality as well as keep track of props and state, for example.<\/p>\n Expanding your skill set can be very frustrating when tools and learning aids don\u2019t go into enough explanation. I know that when I tried to make a boilerplate code base fit my project, the basic explanation wasn\u2019t enough for me.<\/p>\n Going through the exercise I outlined above helped me complete my new project and learn a lot more about how React keeps your complex codebase simpler without sacrificing UX.<\/p>\n If you\u2019re looking to expand your skills<\/a>, learn a new framework. And if you\u2019re looking to turn dumb components into smart ones, I hope my experience helps you find your way, too.<\/p>\n If you are interested in the full before and after code bases, please visit these Github Gists:<\/p>\n Before, Dumb Component (link 1).<\/p>\n After, Smart Component (link 2).<\/p>\nThe Difference Between \u201cSmart\u201d and \u201cDumb\u201d Components<\/h2>\n
\r\n const Footer = (props) => { \r\n return (\r\n <div>Footer Info<\/div>\r\n <div>© 2004 - {props.year}<\/div>\r\n )\r\n};<\/pre>\n \r\n function Footer(props){\r\n var year = props.year;\r\n var output = \"\r\n <div>Footer Info<\/div>\r\n <div>© 2004 - \" + year + \"<\/div>\";\r\n return output;\r\n}<\/pre>\n<\/a><\/p>\n \r\nconst Output = ({ loading, images, counter, }) => (\r\n !loading ? (\r\n <div>\r\n <Table responsive>\r\n <thead>\r\n <tr>\r\n <th \/>\r\n <th>Image<\/th>\r\n <th>File Name<\/th>\r\n <th>Size<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n {images.map(({ _id, fileName, size, src, counter, }) => {\r\n counter++;\r\n (<tr key={_id}>\r\n <td>{counter}.<\/td>\r\n <td><img src={src}{fileName} \/><\/td>\r\n <td>{fileName}<\/td>\r\n <td>{size}<\/td>\r\n <\/tr>\r\n )})}\r\n <\/tbody>\r\n <\/Table> : <Alert bsStyle=\"warning\">No Images<\/Alert>}\r\n <\/div>\r\n ) : <Loading \/> );\r\n )<\/pre>\nBreaking Down Complex Dumb Components<\/h2>\n
\r\nconst Output = ({ loading, images, counter, }) => {}<\/pre>\n \r\nfunction Output(loading, images, counter) {}<\/pre>\nRetrieving and Displaying Database Records<\/h3>\n
\r\nimageObject1 = {\r\n _id: 01,\r\n fileName: 'MyImage.jpg',\r\n size: 168,\r\n src: 'http:\/\/example.com\/images\/',\r\n } \r\n \r\n imageObject2 = {\r\n _id: 02,\r\n fileName: 'AnotherImage.png',\r\n size: 1450,\r\n src: 'http:\/\/imgfiles.net\/',\r\n }<\/pre>\n \r\n\/\/ database call which returns the `images` object which contains an array of objects\r\n images: ImagesCollection.find().fetch()<\/pre>\n
\r\nimages = [];\r\nimages.push(imageObject1);\r\nimages.push(imageObject2);<\/pre>\n
\r\n images = [\r\n { _id: 01, fileName: 'MyImage.jpg', size: 168, src: 'http:\/\/example.com\/images',}\r\n { _id: 02, filename: 'AnotherImage.png', size: 1450, src: 'http:\/\/imgfiles.net\/',}\r\n ];<\/pre>\n \r\nlet imageName1 = images[0].fileName;\r\nlet imageName2 = images[1].fileName;<\/pre>\n
<\/a>
\nThe third prop passing to the \u2018Output’ function is \u2018counter’. This prop is just a number, in this case, a zero. There are other, more elegant ways to count the iterations of a loop, but for illustrative purposes, it is included so that I can show how a dumb component can still do advanced procedures.<\/p>\n \r\n!loading ? (<\/pre>\n
\r\n\/\/ Old ES5 syntax\r\n if( loading === false ) {\r\n return (\r\n \/\/ HTML\/JSX output here with database contents\r\n )\r\n } else {\r\n return <Loading \/>\r\n }<\/pre>\nDumb Output<\/h2>\n
\r\n{images.map( ({_id, fileName, size, src, }) => ()\r\n \/\/ HTML\/JSX here\r\n)};<\/pre>\n \r\n {images.map( ({_id, fileName, size, src, }) => {\r\n counter++;\r\n (<tr key={_id}>\r\n <td>{counter}.<\/td>\r\n <td><img src={src}{fileName} \/><\/td>\r\n <td>{fileName}<\/td>\r\n <td>{size}<\/td>\r\n <\/tr>\r\n ) }\r\n }<\/pre>\n<\/a><\/p>\nThat\u2019s Great, But You Can\u2019t Interact With It (It\u2019s Dumb)<\/h2>\n
Let\u2019s Make This Component Smart!<\/h2>\n
<\/a><\/p>\n \r\n{images.map( ({_id, fileName, size, src, }) => (\r\n <tr key={_id}>\r\n <td><img src={src}{fileName} \/><\/td>\r\n <td>{fileName}<\/td>\r\n <td>{size}<\/td>\r\n <td><Button onClick={() => handleDelete(_id)} > Delete <\/Button><\/td>\r\n <\/tr>\r\n) }<\/pre>\n \r\n const handleDelete = (imageId) => {\r\n if (confirm('Are you sure? This is permanent!') ) {\r\n \/\/ call to database to delete and catch any errors\r\n try {\r\n images: ImagesCollection.remove(imageId);\r\n } catch (exception) {\r\n throw new Error('500', exception);\r\n }\r\n }\r\n}<\/pre>\nEnhancing End-User Experience<\/h3>\n
\r\n<tr key={_id}>\r\n <td><img src={src}{fileName} height=50\" \/> {fileName}<\/td>\r\n <td>{src}<\/td>\r\n <td>{createdAt}<\/td>\r\n <td>{deleteDate}\r\n { this.state.editDate \r\n ? <FontAwesomeIcon icon={faPencilAlt} onClick={() => this.changeFontAwesome()} \/>\r\n : <span>\r\n <DatePicker\r\n onChange={(event) => this.handleDateChange(event)}\r\n selected={moment(this.state.startDate)}\r\n \/> <FontAwesomeIcon icon={faCheckCircle} onClick={() => this.saveNewDeleteDate()} \/><\/span> }\r\n <\/td>\r\n <td><Button bsStyle=\"danger\"\r\n onClick={() => this.handleRemove(_id)}\r\n Block\r\n > Delete <\/Button>\r\n <\/td>\r\n<\/tr><\/pre>\n \r\nchangeFontAwesome() {\r\n \tthis.setState({ editDate: !this.state.editDate });\r\n}<\/pre>\nRefactoring Into Self-Contained Smart Code<\/h2>\n
\r\n <tbody>\r\n {images.map(({ _id, fileName, createdAt, src, deleteDate, }) => (\r\n <CustomRow id={_id} key={_id}\r\n fileName={fileName}\r\n createdAt={createdAt}\r\n url={src}\r\n deleteDate={deleteDate}\r\n \/>\r\n ))}\r\n<\/tbody><\/pre>\n<\/a>
\nThis is still the same dynamic <tr> tag within the \u2018map()’ method that we\u2019ve been dealing with. We\u2019ve just abstracted it out to its own code base. This new snippet is much easier to read: We have a loop going over a database record set and passing the values to a component called CustomRow, which would seem like it would return a row of data (which it does).<\/p>\nHousekeeping and Final Steps<\/h2>\n
Now That\u2019s a Smart Component<\/h2>\n
\r\n const Output = ({ loading, images, counter, }) => (\r\n !loading ? (\r\n <div>\r\n <Table responsive>\r\n <thead>\r\n <tr>\r\n <th \/>\r\n <th>Image<\/th>\r\n <th>File Name<\/th>\r\n <th>Size<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n {images.map(({ _id, fileName, size, src, counter, }) => {\r\n counter++;\r\n (<tr key={_id}>\r\n <td>{counter}.<\/td>\r\n <td><img src={src}{fileName} \/><\/td>\r\n <td>{fileName}<\/td>\r\n <td>{size}<\/td>\r\n <\/tr>\r\n )})}\r\n <\/tbody>\r\n <\/Table> : <Alert bsStyle=\"warning\">No Images<\/Alert>}\r\n <\/div>\r\n ) : <Loading \/> );\r\n )<\/pre>\n \r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Table, Alert, Button } from 'react-bootstrap';\r\nimport { Meteor } from 'meteor\/meteor';\r\nimport { withTracker } from 'meteor\/react-meteor-data';\r\nimport UploadsCollection from '\/api\/Uploads\/Uploads'; \/\/ mongo schema\r\nimport DatePicker from 'react-datepicker';\r\nimport 'react-datepicker\/dist\/react-datepicker.css';\r\n\r\nimport Loading from '..\/..\/components\/Loading\/Loading';\r\nimport FontAwesomeIcon from '@fortawesome\/react-fontawesome';\r\nimport { faPencilAlt } from '@fortawesome\/fontawesome-pro-light';\r\nimport { faCheckCircle } from '@fortawesome\/fontawesome-pro-light';\r\nimport { faTimesCircle } from '@fortawesome\/fontawesome-pro-light';\r\n\r\nimport '.\/Images.scss';\r\n\r\nclass Images extends React.Component {\r\n constructor(props){\r\n super(props);\r\n }\r\n\r\n render(){\r\n let { loading, match, images, history } = this.props;\r\n return(\r\n <CollectionDisplay\r\n loading={loading} match={match} images={images} history={history}\r\n \/>\r\n )\r\n }\r\n}; \/\/ end class\r\n\r\nclass CollectionDisplay extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render(){\r\n let { loading, match, images, history, state, onDeleteClick, } = this.props;\r\n return (\r\n <div className=\"Images\">\r\n {images.length ?\r\n <Table responsive>\r\n <thead>\r\n <tr>\r\n <th>Original File Name<\/th>\r\n <th>URL Link<\/th>\r\n <th>Created<\/th>\r\n <th>Delete<\/th>\r\n <th \/>\r\n <th \/>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n {images.map(({\r\n _id, originalFilename, createdAt, url, deleteDate,\r\n }) => (\r\n\r\n <CustomRow id={_id} key={_id}\r\n originalFilename={originalFilename}\r\n createdAt={createdAt}\r\n url={url}\r\n deleteDate={deleteDate}\r\n \/>\r\n ))}\r\n <\/tbody>\r\n <\/Table> : <Alert bsStyle=\"warning\">No images yet!<\/Alert>}\r\n <\/div>\r\n )\r\n } \/\/ end render\r\n} \/\/ end class\r\n\r\nclass CustomRow extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n startDate: props.deleteDate,\r\n editDate: true,\r\n dbDate: props.deleteDate,\r\n };\r\n this.changeFontAwesome = this.changeFontAwesome.bind(this);\r\n this.handleRemove = this.handleRemove.bind(this);\r\n this.saveNewDeleteDate = this.saveNewDeleteDate.bind(this);\r\n this.cancelNewDeleteDate = this.cancelNewDeleteDate.bind(this);\r\n this.handleDateChange = this.handleDateChange.bind(this);\r\n\r\n }\r\n\r\n changeFontAwesome(){\r\n this.setState({editDate:!this.state.editDate});\r\n }\r\n \r\n handleRemove(imageId) {\r\n if (confirm('Are you sure? This is permanent!\\n' + imageId)) {\r\n Meteor.call('images.remove', imageId, (error) => {\r\n if (error) {\r\n Bert.alert(error.reason, 'danger');\r\n } else {\r\n Bert.alert('Image deleted!', 'success');\r\n }\r\n });\r\n };\r\n };\r\n\r\n saveNewDeleteDate(imageId) {\r\n this.setState({editDate:!this.state.editDate});\r\n let imageObj = {_id: imageId,\r\n owner: Meteor.userId(),\r\n deleteDate: this.state.startDate, }\r\n\r\n Meteor.call('images.update', imageId, this.state.startDate, (error) => {\r\n if (error) {\r\n Bert.alert(error.reason, 'danger');\r\n console.log('Error uploads.keeper: ' + error.reason);\r\n } else {\r\n Bert.alert('Delete Date updated.', 'success');\r\n }\r\n })\r\n }\r\n\r\n cancelNewDeleteDate(imageId) {\r\n this.setState({startDate: this.state.dbDate, editDate:!this.state.editDate});\r\n }\r\n\r\n handleDateChange(value) {\r\n this.setState({startDate:value});\r\n }\r\n\r\n render(){\r\n let { id, originalFilename, createdAt, url, deleteDate, } = this.props;\r\n return(\r\n <tr key={id}>\r\n <td><img src={url} height=\"50\" \/> {originalFilename}<\/td>\r\n <td>{url}<\/td>\r\n <td>{dateSlash(createdAt)}<\/td>\r\n <td>{daysUntil(deleteDate)}\r\n { this.state.editDate\r\n ? <FontAwesomeIcon icon={faPencilAlt} onClick={() => this.changeFontAwesome()} \/>\r\n : <span>\r\n <DatePicker\r\n onChange={(event) => this.handleDateChange(event)}\r\n selected={this.state.startDate}\r\n minDate={Date()}\r\n maxDate={Date().add(90, \"days\")}\r\n \/> <FontAwesomeIcon icon={faCheckCircle} onClick={() => this.saveNewDeleteDate(id)} \/>\r\n <FontAwesomeIcon icon={faTimesCircle} onClick={() => this.cancelNewDeleteDate()} \/>\r\n <\/span> }\r\n <\/td>\r\n <td>\r\n\r\n <\/td>\r\n <td>\r\n <Button\r\n bsStyle=\"danger\"\r\n onClick={() => this.handleRemove(_id)}\r\n block\r\n >\r\n Delete\r\n <\/Button>\r\n <\/td>\r\n <\/tr>\r\n\r\n )\r\n }\r\n};\r\n\r\n\r\nImages.propTypes = {\r\n loading: PropTypes.bool.isRequired,\r\n images: PropTypes.arrayOf(PropTypes.object).isRequired,\r\n match: PropTypes.object.isRequired,\r\n history: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default withTracker((props) => {\r\n const subscription = Meteor.subscribe('images');\r\n return {\r\n loading: !subscription.ready(),\r\n images: ImagesCollection.find().fetch(),\r\n };\r\n})(Images);<\/pre>\n