Although I have been coding for longer than 100 days now, I wanted to recap my first #100DaysOfCoding from earlier this year. I’ve bolded resources that I would highly recommend to anyone wanting to learn how to code, become a developer, or try something new. Stack Overflow and YouTube tutorials were also key in completing projects and tying smaller lessons together.
I currently have the following React component ``` callApi = () => { console.log(‘a’) const credentials = { user_id: JSON.parse(localStorage.getItem(‘user’)).id } const request = new Request(API_URL+’images’, { method: ‘POST’, headers: new Headers({ ‘Content-Type’: ‘application/json’ }), body: JSON.stringify({image: credentials}) }); fetch(request) .then(response => { console.log(‘b’) return response.json() }) .then(data => console.log(‘c’,data)) console.log(‘d’) console.log(‘e’) }
When starting this React/Redux project, I first created static components that rendered successfully. Although this was not taking advantage of React’s abilities - much less Redux! - working with one static route and data was critical to creating this app.
When starting this part of the Rails project, I appended the HTML from the partials or forms to the show and index pages. While this utilizes JQuery, it falls short of creating stable data in the JSON format. APIs utilize JSON format instead of HTML because of the access and logic with hashes. By accessing hashes of recipe and item data, I was then able to create Javascript Model Objects.
// JS Model Object
function Item(item) {
this.id = item.id
this.name = item.name
this.measurement = item.measurement
this.quantity = item.quantity
}
// Prototype method
Item.prototype.formatItem = function() {
let recipeHTML = `<li data-id=${this.id}>${this.quantity} ${this.measurement} - ${this.name}</li>`
return recipeHTML
}
Once JSON responses were translated into JS model objects, side effects were the next priority. Rendering data with clicks sans page refresh meant that a lot of attribute values needed to prevent duplication and be replaced. The has-many relationship between Recipe and Items on the recipe page kept rendering the same instance of Items with repeated clicks. I also ended up seeing all the items of previous recipes when sifting through the recipes. Therefore, on both Recipes and Items.js files, the href attribute of “See The Items” link was altered to have no value or the value of ${nextRecipeId}/items.
During my Rails project, I wanted the Recipe form to write to the Cuisine model. I tried the following originally while whitelisting the parameters and building the associations in the controller: ``` class Cuisine < ApplicationRecord has_many :recipes has_many :users, through: :recipes ** validates :name, uniqueness: true** end