{"id":302,"date":"2017-10-31T11:17:17","date_gmt":"2017-10-31T18:17:17","guid":{"rendered":"http:\/\/peterbreen.info\/wp\/?p=302"},"modified":"2017-10-31T11:17:17","modified_gmt":"2017-10-31T18:17:17","slug":"cider-form","status":"publish","type":"post","link":"http:\/\/peterbreen.info\/wp\/cider-form\/","title":{"rendered":"Cider Form"},"content":{"rendered":"<p>After refactoring my cider site a while ago, the next step was making input a little easier. Sure, I <em>could<\/em> just write JSON by hand, but why do that when I could write a React app to help?<br \/>\n<!--more--><\/p>\n<p>I defined this project with the following goals:<\/p>\n<ul>\n<li>I wanted a web form that I could use which would render the output as JSON and on the DOM.<\/li>\n<li>I wanted to copy and paste that output without cleaning into my JSON data.<\/li>\n<li>I wanted to be able to submit the form multiple times so I could copy and paste once no matter how many entries I added.<\/li>\n<li>I wanted to write it in React.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-303\" src=\"http:\/\/peterbreen.info\/wp\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-31-at-10.04.38-AM-1024x796.png\" alt=\"\" width=\"604\" height=\"470\" srcset=\"http:\/\/peterbreen.info\/wp\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-31-at-10.04.38-AM-1024x796.png 1024w, http:\/\/peterbreen.info\/wp\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-31-at-10.04.38-AM-300x233.png 300w, http:\/\/peterbreen.info\/wp\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-31-at-10.04.38-AM-768x597.png 768w, http:\/\/peterbreen.info\/wp\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-31-at-10.04.38-AM.png 1382w\" sizes=\"auto, (max-width: 604px) 100vw, 604px\" \/><\/p>\n<p>I considered writing an app which could update my cider site directly; pushing entries straight into the live file. I chose not to do this, primarily because it would&#8217;ve been overengineering the solution. I don&#8217;t update the site that often, so I didn&#8217;t need to write something which would&#8217;ve held my entire ciderlist data and done sorting and updating along with the necessary security and authentication.<\/p>\n<p>However, I did make sure to pay attention to that as a <em>possibility<\/em> in the future; what I wrote could be adapted to the purpose if my needs change in the future. Plus it would let me write about CRUD, one of my favorite acronyms.<\/p>\n<p>I wrote the app in React using the Create React App bootstrap. And rather than reinvent the wheel, I found and pulled in <a href=\"https:\/\/github.com\/mozilla-services\/react-jsonschema-form\">react-jsonschema-form<\/a> to render my form. I knew there would be a better approach than trying to hand write it, and this worked perfectly. All I had to do was define a schema for the form data, a second schema for the form UI and it would render the actual HTML form for me as a React component. Once I got it working as a component it was very easy to work with and I appreciated the distinction between the form schema and the form UI schema; it made it very easy to create a form which both worked how I wanted and <em>looked<\/em> how I wanted it to look. <\/p>\n<p>I wrote the &#8220;append to DOM&#8221; code myself &#8211; it takes the data submitted to the form, pretty-prints it, and attaches it to the correct DOM node encased in &lt;pre&gt; tags. About the only problem I ran into here was the trailing comma after each entry &#8211; I originally added that via CSS using an :after psuedo-selector, but when trying to copy and paste the output, my browser didn&#8217;t copy the comma character that way. I erased that and just made my output to DOM function append it instead, simple fix.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-305\" src=\"http:\/\/peterbreen.info\/wp\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-31-at-10.04.48-AM-1024x434.png\" alt=\"\" width=\"604\" height=\"256\" srcset=\"http:\/\/peterbreen.info\/wp\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-31-at-10.04.48-AM-1024x434.png 1024w, http:\/\/peterbreen.info\/wp\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-31-at-10.04.48-AM-300x127.png 300w, http:\/\/peterbreen.info\/wp\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-31-at-10.04.48-AM-768x325.png 768w, http:\/\/peterbreen.info\/wp\/wp-content\/uploads\/2017\/10\/Screen-Shot-2017-10-31-at-10.04.48-AM.png 1128w\" sizes=\"auto, (max-width: 604px) 100vw, 604px\" \/><\/p>\n<p>Of course, the acid test was actually using it, so I took my notes from a recent trip to Indianapolis (there&#8217;s a pretty nice cidery and meadery there, who knew?) and went ahead and gave it a test run. I was pleasantly surprised to only find two minor formatting problems &#8211; I had to change my pretty-print from indenting 4 spaces to 2, and I had to change how it output the rating numbers from 1-3; as you can see in the example it&#8217;s a string instead of a numerical value. I think that second one is an artifact of the automated XML to JSON conversion <a href=\"http:\/\/peterbreen.info\/wp\/cider-tasting-refactor\/\">I did for the cider site<\/a> a while ago and I might revisit that to clean it up later &#8211; numbers should be numbers in this case, not strings.<\/p>\n<p>Still, to sum up, a nice simple app that does exactly what I want and nothing I don&#8217;t. It saves me the trouble of hand-writing JSON to update a website, produces correctly formatted results, and lets me concentrate on reviewing cider instead of repetitive coding.<\/p>\n<p>As usual, my code is available on Github: <a href=\"https:\/\/github.com\/PeterBreen\/cider-form\">https:\/\/github.com\/PeterBreen\/cider-form<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After refactoring my cider site a while ago, the next step was making input a little easier. Sure, I could just write JSON by hand, but why do that when I could write a React app to help?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-302","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/peterbreen.info\/wp\/wp-json\/wp\/v2\/posts\/302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/peterbreen.info\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/peterbreen.info\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/peterbreen.info\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/peterbreen.info\/wp\/wp-json\/wp\/v2\/comments?post=302"}],"version-history":[{"count":4,"href":"http:\/\/peterbreen.info\/wp\/wp-json\/wp\/v2\/posts\/302\/revisions"}],"predecessor-version":[{"id":308,"href":"http:\/\/peterbreen.info\/wp\/wp-json\/wp\/v2\/posts\/302\/revisions\/308"}],"wp:attachment":[{"href":"http:\/\/peterbreen.info\/wp\/wp-json\/wp\/v2\/media?parent=302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/peterbreen.info\/wp\/wp-json\/wp\/v2\/categories?post=302"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/peterbreen.info\/wp\/wp-json\/wp\/v2\/tags?post=302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}