DEV Community: lycho33

Redux vs Ruby

lycho33 — Thu, 16 Dec 2021 20:33:24 +0000

There are two parts to redux: a reducer and action. An action is where you can fetch data from an API and get access to the backend's current state. A reducer on the otherhand gets to determine how the state will be updated on the frontend.

For my project, I was trying to create a mini-ecommerce website. The project was simple. I was going to have a store with projects and have a button that could add a product to a cart. It should have been simple until I reached the reducer.....

In RUBY my settings were:

An API, which had...

Routes:

resources :cart do
--resources :purchase_carts
end
resources :products

In REDUX...

the ACTION fetched to get products, get a cart and ADD a product to the cart

   export const addProductToCart = (obj) => {
    return (dispatch) => fetch("http://localhost:4000/cart/1/purchase_carts", {
        method: "POST",
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(obj),
    })
        .then(r => r.json())
        .then(addedProducts => {
            dispatch({
                type: "ADD_PRODUCTS",
                payload: addedProducts
            })
        })
}

REDUCER contained this code...

export default function reducer(state= intialState, action){
    switch (action.type){
        case "GET_PRODUCTS":
            return {...state, products: [...action.payload]}
        case "GET_CART":
            return {...state, cart: [...action.payload]}
        case "ADD_PRODUCTS":
            const updatedCart = {
                ...state.cart[0],
                purchase_carts: [...state.cart[0].purchase_carts, action.payload]
            }
            return {
                ...state,
                cart:[updatedCart]
            }
        default:
            return {...state}
    }
}

Everything looks okay.... but when testing... the product would not add more than 1 to the cart.

On the frontend, everything in REDUX and in my components were coded to function the way I designed it. In the reducer, the would return with all the state already included, plus a key-value pair of cart and updatedCart. This updatedCart would show everything in the state's first cart, then create another key-value pair for purchase_carts and create an array with all the state's first cart's purchase_carts and all information from the component's form which was posted into the backend's API and retranslated as the "action.payload."

So what was wrong?

What I discovered was the problem was so..... simple. In RUBY, my routes had purchase_carts inside of cart. So to see this on localhost:3000, I needed to:

include: :purchase_cart ---> in the index and show methods
include :purchase_cart in the attributes for my models

THAT'S IT!

Why did I have to do this?
In my reducer, I wanted to add all information from my form into purchase_cart which was my joins table so that my cart could have access to the product (which was also inside the joins table). But to access purchase_cart it needed to show it was properly posted in my API before the state could be properly updated on the frontend.

LESSON?

Before you play with the frontend, check the backend!

Fetch Boi

lycho33 — Sat, 05 Jun 2021 18:38:43 +0000

The concept of Fetch is simple.

Get data from an API address
Parse the response into JSON
From the given data, iterate to manipulate in the backend and frontend and render it on DOM.
Just in case, console an error to see on the browser any possible errors

If you just practice fetch a few times, the concept is easier than you think. So why did I struggle so much on something so simple?

FIRST: Flow

After doing Ruby, I was confident that this would be easy. However, I ran into confusion of the flow. What is the order to events?

Scenario

The browser listens for an event
Call a function to listen for a click
Manipulate to either CRUD or display on the browser
fetch!

What did I struggle with? All the functions leading up to fetch.

SECOND: functions

When you create variables to find an ID or create an element. The most confusing thing is trying to figure out when to put the variable inside the callfunction.

For example:

const li = document.getElementById(`image-${this.id}`) const ul = document.createElement(`ul`) this.vocabularies.forEach(v => ul.innerHTML += v.render()) li.append(ul)

Yes it's obvious now that I include 'ul' in "append" but for some reason it took a while for me to figure out that I wanted to put in new bullet points and not new "li".

THIRD: JS Objects

static handleSubmit(event){ event.preventDefault() const input = event.target let obj = [...input.elements] let args = {image: {}} args.image.category = obj[0].value args.image.url = obj[1].value fetchAll.createImage(args) }

This code right above is showing how to transform your input into an object, then call on the values for when you fetch. For the variable "args", I needed "image" as a key because the fetch wouldn't not work otherwise. In order to create a new Image, I would need the object to have the key "image" recognized, THEN I can add input for the columns for the Image model.

FOURTH: Show up on the Page!

When creating the delete image functions/fetch, it was difficult to figure how to get the browser to also delete the image without need to refresh the page.

The problem?
For fetch, I put li.remove(). So wouldn't it "remove" the picture from the page? Apparently not. I needed to put this code again in my function for handling the delete. The very function that would find the "delete" button and call the fetch function.

Solution

static handleDelete(e){ const li = e.target.parentElement if (e.target.dataset.action === 'delete'){ fetchAll.deleteImage(li) li.remove() }

So here it is. A simple fetch that is easy to learn but difficult to implement on a single-page. I probably struggled since it was my first time trying JavaScript but all these roundabout problems taught me that I really need to work on logic flow. If I thought about each step slowly, perhaps I wouldn't have struggled with fetch as much as I did. But now I know and despite hours/days of struggle, I'm still excited to continue using JavaScript. For me, I feel like these problems are evolving me. Hope it does the same for you guys.

Associations

lycho33 — Tue, 04 May 2021 19:58:31 +0000

After learning Ruby on Rails, I learnt that associations was the most crucial aspect, without it...nothing works.

Original Project

The first project I created was supposed to be website where the user could be a student or mentor. If the user was a mentor, the mentor could create lessons but if the user was as student, the student would complete lessons. Simple?

For an idea I thought was so simple, turned out to be far too complicated for me to handle.

Problem 1

It was unnecessary to have 2 separate models for Students and Mentors.

So I decided to combine them into Users. But this did not work because I was bypassing Separation of Concerns. A User model was supposed to only deal with login/signout/logout. Instead I created a separated model called Role so the User could choose it's role as either a mentor or student

Next Problem

I wanted to create a many-to-many association but I had to combine my Student/Mentor model. By doing so I would have to create custom associations so that the Roles model could have a has_many association for Mentor and Student.

This would not have been a problem but this would have taken a lot longer to understand and figure out. The project had to be completed in a week. What's worse was that I did not know how to use these custom associations in my controllers. Additionally, my primary/foreign keys were not working (due to my lack of understanding) which made my nested resources break and my routes not be designed correctly.

So... I decided to SCRAP this project

THE NEW PROJECT

The new project ended up being a website about an international violin competition called the Menuhin Competition 2021. This website would allow users to upload ongoing performances and blog about it.

The benefit of these associations is that I can have a many-to-many association.

For example:

Users has many performances they can upload but each uploaded performance belongs to a user
A user can comment on any uploaded performance. Because comments is the joins table, user has many performances through comments. -A user can post a blog. So each blog belongs to a user but a user can post many blogs.

For me, this new project ended up have far simpler associations that I could comprehend. But I still hope as I continue to try deepen my understanding on associations that I can come back to the original project and try complete it. For now, I learnt the hard way how important associations are.

I'm finally making a website!

lycho33 — Wed, 31 Mar 2021 02:07:33 +0000

FINALLY!

After working on a CLI app, I was still feeling murky, struggling to visualize how it's like creating a website. BUT finally I am creating a website like a full-stack developer!

Honestly, this website was not easy since the learning curve was steep for me. What I struggled with.

REST
For some reason this was confusing for me. For example, I was creating a post for the get "/lesson/new". So I named it post "/lesson/new," but later I am told that this does not match REST. I was told that the post route was supposed to be "/lesson." Honestly, I am still confused about this.
Associations
I initially created a many-to-many relationship. But to stick to MVP, I decided to only have has-many and belongs-to relationships. By doing so, the tables I also initially migrated had become mixed up. I did notice this mistake until I was trying to create a "current_users" method. When trying to use this method, I would get an error on the browser saying "cannot find table 'join'." It was only then, I realized I had to go back and fix my tables and associations, which made me feel like I had to go back to square one.
Forms
Forms shouldn't have been that hard but I learned the hard way that if you do not have the params and right variable, then your forms will not post the way it should. In my controllers, my local or instance variables would be called "lesson" while the params would be called "lessons." At one point, this became too confusing to the point the mix up gave me constant errors I would have to debug.
Styling
I wanted to stay true to Separation of Concerns, but unfortunately CSS styling became difficult to do. In my public folder, I tried to create CSS files for each Views page but for some reason the style would not show on the browser, requiring me to directly style in HTML.

Here are all my struggles. Despite all of the challenges, I learnt so much more on debugging and how to become a better detective. More importantly, I became a better Googler. Instead of relying on my current knowledge, I solidified my habit to look up what I was unsure on and this helped a lot.

Knowing that the next project will be another website makes me so excited and I can't wait to make a better one that will look more professional.

Cautionary Iterarty Tale

lycho33 — Thu, 11 Mar 2021 04:39:29 +0000

For Flatiron, I was in Phase 1 starting to go through labs and learn about Ruby. Of course loops and conditionals had their own challenges to adjust to, iterations seemed simple. You iterate through an array so that the block of code is executed for each array's element. But only after finalizing my CLI project do I now understand the importance of iterators.

Here is a list of iterators
1) .each
2) .map/.collect
3) .select
4) .detect
5) .delete_if
6) .find/.find_all

OUT of all of these arrays I had to learn which iterators would be most helpful for my code. And this is what I learned.

.each

This was deceivingly the most simple method. From numerous labs, I found that this method would be the most versatile to pass the labs. It allowed me to execute anything in the iteration bloc, while not easily breaking my program.

I already knew that the return for .each was the original array. But despite knowing this, I used this method in my class to extract my API methods and gather specific data. By doing so, I was not keeping my code DRY and putting in .each iterations that weren't doing anything for my program.

So the key lesson I needed to learn:

.each iterates over each array's element and executes the block's code BUT still returns the original array

   ##IF each was not going to do anything what should I use?

.map/.collect

After calling my API and making it into a hash, my goal was to iterate to extract only a specific key and its associated values. So my next go-to would have been these methods. I was going to iterate to get the specific key-value pairs. And when I did... IT DIDN'T WORK!

What does it return?
.map/.collect returns a new array BUT + collect/map TRANSFORMS every array's element and doesn't extract the specific key-value pairs I needed.

   ##SO what did I need?

.select

IT was this! Select returns a new array of elements that are true to the condition set in within the block. So if the key I needed matched the element, then it was TRUE and would be included in the new array.

  ##Question: Would .find_all had worked?

.find_all

After investigating further, .find_all might not have worked because when iterating through a hash, find_all would return an array whereas select would return a hash still.

 ##What's the verdict of this challenge?

Lesson: What return you want dictates what iterator you choose to use. It will be lesson not to forget. Though .each is versatile, it will not return a new array. So here is my cautionary tale that I hope others do not fall into. Heed my mistake and happy programming!

Struggles to build a Ruby Project

lycho33 — Sat, 27 Feb 2021 23:47:37 +0000

Debugging is such a journey. At the final leg of my project, I smirked that the code was running smoothly until my instructor found a small problem.

My project's goal is to use the API's data to help you find the right type of brewery in your state and city. When you enter in the state you live in, it prints out 5 sample breweries in the state.

Like this:

However, after going through the whole code. The user is given the choice to return to "menu" or "exit." If the user chooses "menu," then the user can enter in a different state, city or type of brewery.

The problem my instructor discovered was that the first 5 breweries you listed after typing in your state would stay on the list. So when you return to "menu" and enter another state, it would give the original 5 breweries, PLUS the next 5 breweries from the new state.

-------------------HOW TO DEBUG THIS---------------------------------------
For several hours, I used binding.pry to see where it would create a new list. In my API folder, I was using an instance method to grab the API's data as an array and separate the array into nested hashes. I used this method 3 times to grab data from the API's base URL, state URL and city URL.

1st suspicion:

I used this instance method 3 times in my CLI. Once in my initializer. Second time when I was creating a list for the state the user entered. Third time was when I created a list for the city the user entered.

Approach:

Delete the instance method with the base URL because we are starting by looking for breweries in a specific state.
Keep the instance method for the state
Delete the instance method with the URL with the city because we are going to use the state URL to find the city, then the breweries in that city.

SO it ends up looking like this:

Since I got rid of the other 2 API instance methods, I got rid of the methods in my CLI and Brewery class folder, which used the deleted API instance methods.

Afterwards...Still the same problem
After doing all of this, the problem remains.
So I debug again. I put a binding.pry all over my CLI file
to see where my API method was repeating or being called
again so that the list of breweries for state is
duplicated.

Discovered:

In my Brewery class, I had an instance method called "self.find_or_create_by_state" This method was creating objects from each nested hash and keeping the list. Basically creating a list and adding more created lists to the initial list.

                      SOLUTION!!!!!

The solution was so simple. Clear the original list before creating a new list.

Lesson Learnt

Use binding.pry for each line of code to understand what the terminal is printing and how the code is printing that line.

Why I'm studying Software Engineering

lycho33 — Sat, 13 Feb 2021 17:58:37 +0000

From the start the Pandemic changed everything. I had just graduated from grad school and was looking forward to finding a job right after. There was no doubt in my mind that this was the next step but there was always a fear lurking in the back of my mind that I wasn't ready or qualified to work. What the Pandemic did in the beginning was amplify my worries and shrivel my confidence in myself. With constant rejections and no direction, I began drown in my fears and no matter how much comfort others gave me, it was blocked by the negativity.

After that phase, I stopped to rethink my goals. First, I had to remind myself that I went to grad school because I wanted to be in education. Second, I had review what interests I leaned towards by the end of graduation. Third, I had to look at why and for whom I wanted to help.

During the Pandemic, I began to tutor English to kids residing in Asia. From an underprivileged background, I could feel that they had vigor and motivation to study online. More importantly, they knew how important English was to their future. Working with them required me to expand my creativity in sustaining their motivation and help me learn the real beauty of learning online. By creating a hybrid of online and analogue pedagogy, I could see the students motivation never faltering. It was surprisingly personable experience that was almost as real. Soon my thought lingered to the questions:

Could these virtual lessons help them in the real world? How? And do they leave tangible impact on the student?

These were all questions that begun to re-spark my passion.

It was from tutoring that I could solidify that I want to join the Education Technology field. So what's my goal? I'd like to enhance the online learning experience. My experience showed me that online learning has the potential to connect unexpected people together and even have a meaningful experience.

Why software engineering?

For the short-term goal, I want to create websites that enhance my student's learning experience. But for the long term, I would like to continue discovering how web design can cater more towards the human experience in online learning and transfer the virtual experience into the real world.