DEV Community: Cathy Diaz

React-Redux flow

Cathy Diaz — Wed, 05 Jan 2022 21:57:44 +0000

The react-redux flow, how it flows from getting information from your forms to your store state.

On your form, an event handler is triggered.
Once that event has been triggered, it is going to dispatch an action to the redux store.

Dispatching an action is the only way to trigger a state change. dispatch(action)

The store then, is going to run the reducer function

Reducer function passes in state and action. Then it uses the switch statement to change between cases depending on the dispatch type.

Switch statements render one component at a time when you have multiple components to render.

Switching between cases, the state will update accordingly.
And finally the UI will re-render with the new updated data

Root Reducer

Cathy Diaz — Thu, 02 Dec 2021 22:49:35 +0000

In order to create a store for redux, you need to use the createStore method. This method takes in three arguments. One argument, the reducer, is required while the other two (initial state & middleware) are optional.

Today I will be talking about the required argument, the reducer. In my project I only have one reducer but have created a root reducer in case I decide to add more reducers in the future.

A root reducer is necessary when you have more than one model in your code. More than one model is more than one reducer and the create store method does not take in multiple reducers. So what needs to be done is to create a root reducer that holds multiple reducers.

Here I show you how I created my root reducer using the combine reducers method. This method is what allows me to combine multiple reducers to one main reducer.

When I decide to add another model, I will simply import the file to my root reducer and add it inside my combine reducers method, right below the reducer you see there.

And just like that you're able to have multiple reducers in your store.

Class and Constructor

Cathy Diaz — Fri, 30 Jul 2021 20:13:51 +0000

Ohh man! Just when I thought I was getting the hang of Ruby, here comes another language to learn. JavaScript. I don't know if it's because of that reason that JavaScript seemed so hard to learn or simply because my brain could not grasp the new concepts. I choose to believe it's because I felt completely drained and needed a little break to recover.
anyways... sings "I'm back and I'm better" 🗣

for this project refactoring my code into a class and a constructor had me questioning my abilities. And isn't it so funny that 99.9% of the time it's something as small as a misspelled word? (I.did.not.do.that) :>

The first thing I did was to create a separate JS file. Since I will now be having two JS files, I went ahead and put them both in a source folder. Shown below.

The second thing I did was link my new JS file to my index.html file using a script tag. I also had to update my current script tag from <script src='index.js'></script> to <script src='src/index.js'></script>

so far, not so bad

Next in my new JS file I create a class Snack and inside that class a constructor.

The constructor contains the initial data needed to create new instances on the snack class and because I used a constructor function, I will need to pair it with the new keyword which I included in my index.js file

If you are still confused on what classes and constructors do, this next paragraph really helped putting it into perspective.

What we really want to say is something like "Hey, constructor function, when you run, create a new copy of yourself, leaving the original unchanged and on that particular copy, set the properties based on the arguments passed into the function. The keyword new tells the constructor function to do exactly that.

The this keyword is used to reference the instance created.

Lastly, I created a render card that would show the attributes included in the constructor with the updated user input information.
For today, that is all.

Omniauth Authentication with Google

Cathy Diaz — Wed, 05 May 2021 07:00:03 +0000

I have downloaded so many apps that give me the option to login using facebook. I never really gave it much thought, all I knew is that it made my life a little simpler.

After working on my rails project, I now understand how developers were able to do that. With a little bit of rails magic, a little bit of code, and a little bit of patience.

(hehe)

I started with OmniAuth by adding the appropriate gems needed to my Gemfile.

Once these are in your Gemfile, run:

       bundle install

[OmniAuth can be set up with other websites, so these gems
might look a little different, some examples:

From here, I went to my config/routes.rb file and added the line of code below

  get '/auth/:provider/callback', to: 'sessions#omniauth'

The best way I can explain this is by letting someone else explain it. 😅

"Now let’s return to the Callback URL. This is the URL
where a user will be redirected to inside the app after
successful authentication and approved authorization
(the request will also contain user’s data and token).
All OmniAuth strategies expect the callback URL to equal
to “/auth/:provider/callback”. :provider takes the name
of the strategy (“twitter”, “facebook”, “linkedin”,
etc.) as listed in the initializer."

In case anyone is interested in reading more:
https://www.sitepoint.com/rails-authentication-oauth-2-0-omniauth/

Next.
In my config/initializers/omniauth.rb
I registered a new provider, google, by providing a key pair that will identify the app to the provider.

The two keys "GOOGLE_CLIENT_ID" and "GOOGLE_CLIENT_SECRET" are then saved in an .env file which I stored in a .gitignore file to keep them from being pushed to my GitHub.

The website I added right above also explains how to get
these keys from different apps

Lastly, in my views/sessions/login.html.erb
I add the button necessary to let my user sign in using their Google account. Show below:

And TADAHHHH✨

I have a working login from another provider

I Finally Finished My First Website!

Cathy Diaz — Tue, 06 Apr 2021 22:57:02 +0000

After what feels likes forever to me, I finally finished my Sinatra Project. I can finally say I have OFFICIALLY made my first website, how exciting is that!

The idea behind my website is that the user loves to travel so they have a bucket list of all the places that they want to travel to. So on the website, they create their account and are allowed to create travel destinations that they wish to go and can take notes on those specific places. The notes include the name of the destination, a description of that place, and a rating from 1 to 5 stars. Once they have traveled to that place they can either edit it to say they have checked it off of their bucket list or can simply delete the place from the list.

I started my project by creating migrations to create my schema. One of the migrations I ran was
rake db:create_migration NAME=create_travel_destinations.rb

As you can see, in this file I used the create_table method to create my travel_destinations table with columns called location, description, rating, and user_id.

I then continued on with my models. I create my classes and had them inherit from ActiveRecord::Base. The last thing I do in the class is give them Active Record Associations.
Now that was the easy part. Creating the controllers and views files is where all the fun is at.

Here I show my application controller, which is also the parent controller (or we can say, the main one).

In my parent controller, I have a configure block that is used to make sure my views or erb files will show, that the data for a specific user is saved by enabling sessions, and finally set those sessions secret by using an ENV file that contains an intricate string. I also render my welcome page here, although if I wanted I could also add it to one of my other controllers. Instead of setting my routes and rendering my erb files here, I simply have helper methods to make the rest of my code more DRY.

DRY: DON'T REPEAT YOURSELF

As long as my helper methods are created in the parent controller and all the other controllers inherit from the parent controller, the helper methods can be used. Making my code for CRUD more DRY.

CRUD: CREATE, READ, UPDATE, DELETE

Here I am showing my READ all route. It has my helper method redirect_if_not_logged_in and right below that I set an instance variable equal to the current user and all travel destinations. Which then is rendered to the erb file travel_destinations/index.

The last thing I want to mention is that the erb file will be what the user can see in the browser through forms that will require their input. Anything that I want the user to see will be set in html code and/or erb tags to see or evaluate ruby code.

Finishing this project was tough, but it only made me feel that much closer to getting to the finish line.

Building a CLI with an API✨

Cathy Diaz — Tue, 02 Mar 2021 01:38:23 +0000

Building a CLI from scratch has been a headache and a blessing at the same time. I now understand more about coding and feel 100% more comfortable with continuing on with this journey. But let me tell you, it didn’t come easy. I spent days working on this project, thinking, how will I ever graduate in five months if I can’t even understand the beginning concepts, but as the time passed and I went over the material more and more, it all became easier. I would find myself saying “ahhhhh” more often. Like a 💡 went on and it all finally made sense.

Something I originally had trouble with was metaprogramming. In Wikipedia, this is defined as a programming technique in which computer programs have the ability to treat other programs as their data. In other words, metaprogramming is the practice of writing code that writes code for us. Making it easier to work with our programs.

For example, if we take a look at the codes below, we can see the difference between not using and using metaprogramming.

The first image shows how you can create attribute accessors of the data you want your objects to have. You then would initialize with those attribute accessors (creating writer and reader methods) and save the instance. It then shows how you would shovel that instance method into the @@all array.

As you can see below, metaprogramming is used to create easier and more manageable code. Here you can initialize with a hash and iterate over that hash using the #each method to return the key and value of that hash. Then using the method #send to create the key of the attributes named and their value.

Coding this way is better in the long run because I can always return to this section to get the values I am essentially looking for. It makes managing my API easier by creating new objects using that hash.

The last thing I want to mention is that using the concept of separations of concerns has been a life saver. It makes your code so much easier to read and handle. It is having a file that only deals with your CLI, a file that only deals with your API, having a file that only deals with your objects, and having a file that only deals with your execution code and another for your required environment.

You know when you want to execute your code you place that in your run file. And it's the same concept for all your other files.

In order for code to become easier, practice, practice, practice.

Why Software Engineering?

Cathy Diaz — Sun, 14 Feb 2021 10:32:24 +0000

Beginning a new career is never easy. You need to be determined to learn new skills and dedicated to contributing many hours to learn this new skill.

My next career move, I wanted it to be something I enjoyed doing. I had no idea what it was that I wanted to do. I was working full-time and going to school, but I wanted something different, I wanted to be challenged. I was going to the University of Nevada, Las Vegas and needed one more year to finish and get my degree in Business Administration, Information Management but that did not stop me from taking this leap in faith.

While I was attending UNLV, I had a course on JAVA. I was so intrigued and interested. That's the first time, I decided that my end goal would be a career in the coding industry. Before that, I had never had any experience with coding, but it was a game changer.

I kept going to school because I thought that was the right path to get to where I wanted to get but I quickly realized that there were other, better methods to get there.

One day I was scrolling through TikTok, an online app, and I saw a video of this girl talking about Flatiron School. She had no previous experience and within five months she knew enough to start a new career. It was then, when I had to make the decision between attending the new school or staying in the same one.

I was a hard decision, but after going back and forth with myself for days, I finally decided to leave UNLV and attend Flatiron School. It has been two weeks now, and it's been intense, but I always remind myself that today I know more than I did when I started. I'm excited to keep learning more, to the finish line!