DEV Community: sarisgar28

Continuing with React and Redux… I want to talk about REDUCERS!

sarisgar28 — Sun, 11 Apr 2021 22:24:26 +0000

Reducers are functions that take the current STATE and ACTION as arguments returning a NEW STATE.

const expenseReducer = (state = [], action) => {
   switch (action.type){
       case "SET_EXPENSE":
       return action.payload.expense || state
       case "ADD_EXPENSE":
           return [...state,action.payload]
        case "REMOVE_EXPENSE":
           return state.filter(expense => expense !== 
 action.payload)
       default:
       return state

   }   
 };

(Make sure to pass the initial state with the right data structure)

An important thing about reducers is they are pure functions meaning:
Pure functions are only determined by their input values.
Pure functions have no side effects, meaning they don’t have any effect outside the function, it will only return a value.

For separations of concerns you normally do one reducer by component, so if we have more than one (you most likely will) we can use something call “combineReducers()” method and it will go on a separate folder such as index.js

frontend/src/redux/reducer/index.js


import userReducer from './userReducer'
import expenseReducer from './expenseReducer'




export default combineReducers({
   user: userReducer,
   expenses: expenseReducer


})

The structure for redux is to split the state into multiple slices or domains by key and provide a separate reducer to manage each individual slice of data as the redux docs say, combineReducers method is not required but it is useful to put all your data together.

The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore. Passing the state as objects gives them a key and a value, you can control state key names by using different keys in the passed value.

You can read more about it here:
https://redux.js.org/api/combinereducers

HAPPY CODING! :)

REACT-REDUX

sarisgar28 — Sun, 11 Apr 2021 20:10:17 +0000

I've made it! I am graduating as a Full Stack developer! I want to explain one of the most important things I came across with my last project with flatiron.
React provides two mechanisms for providing data to components PROPS and STATE.

Props allow the parent component to pass attributes to a child component.
State is local and encapsulated within the component can change at any time in the component's lifecycle. Redux provides a well structure architecture system for managing state but first... WHAT IS REDUX? Redux is a predictable state container for Javascript. It can be run in different environments such as Client, Server and Native. Let me explain in more depth what these models are. Models are a web development terms that describe where the application runs.
Client side: refers to everything in a web application that is displayed or takes place on the client (end user device) this includes what the user sees such as texts, images and the rest of UI.
Server side: much like client side, server side means everything that happens on the server instead of on the client.
Native: sometimes called a public client, this is intended to be a client app that runs on a pc or device and with which the user interacts.

For more depth on these topics go to these links:

https://www.cloudflare.com/learning/serverless/glossary/client-side-vs-server-side/

https://stackoverflow.com/questions/50338317/what-is-the-difference-between-a-native-application-server-application-when-ta

Taking up from where I left off on redux.
What is Redux Connect?
react-redux package provides react binding for the redux state container making a "GLOBAL STATE" but separating react application component bases on their connections to redux store.

import {connect} from 'react-redux'

Presentational Components: are only concerned with how things look and are not aware of the redux state.
Container Components: are responsible for how things work and are fully aware of the redux state.

They are often created using react-redux and may dispatch redux actions.

Example of Redux actions:

import {ExpenseRequest} from '../../services/api'
 //add 
export const getExpense = () => {
   return (dispatch) => {
       ExpenseRequest().then(response => {
       dispatch({type: 'ADD_EXPENSE', payload: response})
     })
   }
 }

 // remove

export const removeExpense = () => {
   return (dispatch) => {
       ExpenseRequest().then(response => {
       dispatch({type: 'REMOVE_EXPENSE', payload: response})
     })
   }
 }

How to connect actions with react, is very simple you will have to create a mapStateToProps() and mapDispatchToProps() methods in order to connect these two. But first you will have to set up some Middlewares such as:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux'
import reducer from './redux/reducer/index'
import thunk from 'redux-thunk'
import { Navbar } from 'react-bootstrap';
const store = createStore(reducer, applyMiddleware(thunk))
ReactDOM.render(
  <Provider store= {store}>
    <App />
    <Navbar/>
  </Provider>,
  document.getElementById('root')
);
reportWebVitals();

wraps the react app and makes the redux state available to all container components in the application hierarchy.
I hope this blog post was explanatory if you need more information please go to the redux documents.
link = https://react-redux.js.org/introduction/getting-started

Thanks for reading and happy coding!

How to Use Fetch to make Ajax calls in JavaScript

sarisgar28 — Sun, 07 Feb 2021 21:11:57 +0000

Fetch is an interface to make requests and responses from a backend to frontend.

The requests are sent as GET by default.To send POST/PATCH/DELETE/PUT you can use a method property as part of options it can take values such as:

METHOD: GET/POST/PATCH
HEADERS: HEADER OBJECT
MODE: SUCH AS CORS, NO-CORS, SAME ORIGIN(depends on your browser)

EXAMPLE:

postUser = body => fetch(this.usersURL, {
method: "POST",
headers: this.headers,
body: JSON.stringify(body)
}).then(this.parseJSON)

There’s an umbrella called AJAX(Asynchronous Javascript and Xml)
Using Ajax and Fetch IS flexible and easy to use because of its syntax and structure, it’s supported by modern browsers and ES6 Javascript(so make sure to read the requirements)

Some definitions I think are useful to share are:

XML: Lets you convert data to JSON to your device.

JSON: JavaScript Object Notation is a syntax to serializing objects, arrays, numbers, strings, booleans and NULL

Calling Fetch returns a promise for example:

fetchScores = () => fetch(this.scoresURL).then(this.parseJSON)

Some methods you should know are:
JSON(): Resolves the promise

CLONE(): Creates a clone of the response

arrayBuffer(): Returns a promise that resolves with a generic fixed length raw binary data buffer(temporarily stores data while it is being moved from one place to another)

SUMMARY:

Javascript fetch request-responses are used to make asynchronous HTTP requests, using as much clearer code and delivering flexible features to make requests to servers from web browsers.

Thanks for reading!

HAS_MANY THROUGH

sarisgar28 — Fri, 11 Dec 2020 20:57:00 +0000

HAS_MANY THROUGH ASSOCIATIONS!

I finally got to Rails!... I personally feel has_many through associations need a deeper explanation than what you find in https://guides.rubyonrails.org/association_basics.html#the-has-many-through-association

As my project has these types of associations, I thought it would be of great value to whoever reads my blog posts.
Here is my schema:

ActiveRecord::Schema.define(version: 2020_11_23_171000) do

create_table "landmarks", force: :cascade do |t|
t.string "name"
t.string "city"
t.string "country"
t.text "description"
t.datetime "created_at", precision: 6, null: false
t.datetime "updated_at", precision: 6, null: false
end

create_table "reviews", force: :cascade do |t|
t.string "review"
t.integer "landmark_id"
t.integer "user_id"
t.datetime "created_at", precision: 6, null: false
t.datetime "updated_at", precision: 6, null: false
end

create_table "users", force: :cascade do |t|
t.string "username"
t.string "email"
t.string "password_digest"
t.datetime "created_at", precision: 6, null: false
t.datetime "updated_at", precision: 6, null: false
end

end

What has_many through does is create a join table by connecting, in this case, three models which will work as many to many relations. In my join table above is “REVIEWS” containing a “landmark_id” and “user_id” as attributes which are called FOREIGN KEYS. These keys are many to many relations to my other two models “USERS” and “LANDMARKS”.

Once you have your migrations set up, you move into your models by creating the association itself.

LANDMARK CLASS:

class Landmark < ApplicationRecord
has_many :reviews, dependent: :destroy
has_many :users, through: :reviews
scope :find_name, -> (name) {find_by(name: name)}

validates :name, presence: true
validates :city, presence: true
validates :country, presence: true
validates :description, presence: true

end

REVIEW CLASS:

class Review < ApplicationRecord
belongs_to :user
belongs_to :landmark
validates :review, presence: true

end

USER CLASS:

class User < ApplicationRecord

has_secure_password

has_many :reviews
has_many :landmarks, through: :reviews

validates :username, presence: true, uniqueness: :true
validates :email, presence: true, uniqueness: :true

end

The drawing above is my migrations representation, which is what I expressed on my schema.
Active Record is pretty magical and by doing this association, when you see the model USER has_many :landmarks through reviews means that the instances of our USER now responds to a method called Landmarks. This will return a collection of LANDMARKS that share a REVIEW with the USER.

HAPPY CODING!

ActiveRecord Associations

sarisgar28 — Mon, 28 Sep 2020 16:14:16 +0000

Active Record associations are a convenient way to declare methods through different models, from your database to columns and tables.
These examples are based on my last sinatra project with Flatiron School.

class Pet < ActiveRecord::Base
    belongs_to :user
    end

This is displayed as a singular.
Sets up a one on one connection with another Model, in this case PETS to USER
Uses a foreign key user_id

METHODS ADDED BY BELONGS_TO

.association=(associate)

The association= assigns to associate (user) object to the
(pet) object which means extracting the primary key (user_id) from my table and setting the foreign key to the same value.

Pets	User
user_id	username
name	password
age
notes

This table above is an explanation of how my tables are a ONE to ONE relationship as the record contains exactly one instance of another Model.

.build.association(attribute={})

This association returns a new object of the associated type. The object will be an instance from the passed attribute and the link through this object's foreign key will be set but
NOT SAVED.

.create_association

This association returns the new object of the associated type. It will be instantiated from the passed attributes,then linked to the object's foreign key, and finally be set. Once it passes validations it will BE SAVED.

HAS_MANY :PETS

class User < ActiveRecord::Base 

    has_many :pets
end

This is called the collection method and returns a relation of all the associated objects(pets). If there are no associated objects it will return an empty relation.

.collection(object)

This method makes the collection contain only the supplied objects by adding and deleting as appropriate. The changes are persisted to the database.

.collection.build(User.pets.build)

This method returns a single or an array of new objects of the associated type. The objects will be instantiated from the passed attributes and then linked through their foreign key which will be created but NOT SAVED.

.collection.create(User.pets.create)

This method will create a single or an array of new objects. The objects will be instantiated from the passed attributes, and then linked to the foreign key. Once it passes validations IT WILL BE SAVED.

Happy Coding!

RESTful Routes

sarisgar28 — Sun, 27 Sep 2020 22:34:06 +0000

Hi there, I will be writing about RESTFUL ROUTES by explaining each of the verbs and actions within my sinatra web app.

Restful routes are a design pattern that allows easy data manipulation, as developers and users can recognize the code and understand it better.
Restful routes provides mapping between HTTP verbs, such as GET, POST, PUT, PATCH and DELETE to controller actions (Create, Read, Update, Delete) very well known as CRUD.
Instead of depending on URL to indicate where you are in your browser, Restful routes uses HTTP REQUESTS to send and receive actions from the USER. These requests work with my application on receiving a request, examining it, as well as identifying the HTTP method and URL in my controller and executing the code with the action to give a response to the USER.

PUT-PATCH-DELETE

These are hidden requests sent by POST request to the browser, as HTML is stateless which means it supports GET and POST requests only. To perform the three actions above, we use Rack::MethodOverride into your Config.ru file as "use Rack::MethodOverride" middleware. We have to use a post method in the html form to simulate a request with a non supported method in order to make this work, you will have to type

<input type="hidden">

Following an

<input type="hidden" name="_method">

The method's name has to be included as the value.

<form method="post" action="/logout">
  <input  type="hidden" name="_method" value="DELETE">
  <input type="submit" value="Log out">
</form>

I will explain each action I've created on my web app one by one.

INDEX ACTION

get '/pets' do 
        authenticate 
        @pets = current_user.pets.all
        erb :'/pets/dashboard'
    end

This responds to a GET request to the route '/pets' and is the Index Action; it allows the view access to all the User's pets in the database through the instance variable @pets and render it to my erb :'/pets/dashboard'

NEW ACTION

get '/pets/new' do 
      erb :'/pets/new'
    end

This is a GET request to load the form to create a new pet.

CREATE ACTION

post '/pets' do
      @pet = Pet.new(name: params[:name],age: 
          params[:age],notes: params[:notes])
      if @pet.save
        current_user.pets << @pet
        redirect "/pets/#{@pet.id}"
      else  
        erb :'/pets/new'
      end

This responds to a POST request and creates a new pet based on the params and saves it to the database. Once the pet is created this action redirects to show.erb.

SHOW ACTION

 get '/pets/:id' do
      @pet = Pet.find_by(id: params[:id])
      erb :'/pets/show'
    end

The controller action responds to a GET request to the path '/pets/:id' as this route is a dynamic one it will access the pet by its ID in the view through the params hash.

EDIT ACTION

get '/pets/:id/edit' do
        @pet = Pet.find_by(id: params[:id])
        dont_edit 
        erb :'/pets/edit'
    end

This route loads the edit form in the browser by making a GET request.

patch '/pets/:id' do 
        @pet = Pet.find_by(id: params[:id])
       dont_edit
        @pet.update(name: params[:name],age: params[:age],notes: params[:notes])
        @pet.save
        redirect '/pets'
    end

After submitting the form, the PATCH requests to the path '/pets/:id', first it will pull the pet by name, age and notes through params, then saves the pet and redirects to the dashboard '/pets'

DELETE ACTION

delete '/pets/:id' do 
        @pet = Pet.find_by(id: params[:id])
        dont_edit
        @pet.destroy
        redirect '/pets'
    end

This form is submitted via a DELETE request to the path '/pets/:id', this action finds the pet by the ID in the database, deletes it and redirects to '/pets'

Thanks for reading!

Ruby on Sinatra

sarisgar28 — Sun, 20 Sep 2020 20:01:34 +0000

Hi!
what a crazy year... I started this journey with Flatiron School on March 2020 right when the pandemic hit and IT HAS BEEN HARD!
I am very proud of myself I am keeping up with my learning, I created a web app with Ruby with Sinatra and Active Record and it turned out pretty decent
I would like to talk about what I've learned so far with this project.

MVC it's basically separation of concerns where your files are going to go super organized and if you have to debug or come back to your code will be easier to find. Models, Views and Controllers

Models: Where the logic is, they are generally written by Ruby Classes, connecting the databases to persist it.

Views: Where the User and the web app connect, they are written as .erb files by HTML and CSS.

Controllers: Are written in Ruby and consist of 'routes' that take requests sent from the browser, run code based on those requests by using models, and then render the .erb (views) files for the user to see.

PARAMS[:]= It takes your input from a form using a hash to create new objects from my application to my controllers file using HTTP requests.

REST: Representational State of Transfer, an architectural style design for distributed hypermedia.

I also applied many HTTP request methods to my project such as, POST(read), GET(read),UPDATE(edit) and DESTROY.

ACTIVE-RECORD BASE: It gives access to a number of methods to a number of methods that assist in working with the database.

SINATRA ACTIVE-RECORD: Extends Sinatra with methods and Rake Tasks to deal with sqlite3 database.

Validations: I used authenticate so my users have exclusive access to their data, as well as securing my password has_secure_password by using BCRYPT GEM.

I hope this post gives some value.

My project will be available right below

https://github.com/sarisgar28/pet_tracker

Sinatra Ruby Web App

sarisgar28 — Sun, 05 Jul 2020 20:00:48 +0000

Hi Guys!
This has been crazy times, for the world and as a student is been the hardest months in terms of learning to code...
I am a student in Flatiron School and for our second module we need to create a Sinatra Web App using MVC which stands for MODELS, VIEWS AND CONTROLLERS!
I've noticed that my previous post was a little meh on showing my experience doing this application so I will share a little more on this post.
I am going to share some of my files from my app hoping it will be helpful for you. In my application I am using,Sinatra Active Record, MVC, CRUD as well as uniqueness of validation for user login attribute.
First I would like to share my Gemfile...

gem "sinatra", "~> 2.0"

gem "require_all", "~> 3.0"

gem "pry", "~> 0.13.1"

gem "shotgun", "~> 0.9.2"

gem "activerecord", "~> 6.0"

gem "sinatra-activerecord", "~> 2.0"

gem "sqlite3", "~> 1.4"

gem "rake", "~> 13.0"

gem "bundler", "~> 2.1"

gem "bcrypt", "~> 3.1"

You will need to set up your controllers as well as your views to make sure your app is working, make sure you use Session Secret and enable your Sessions just like this code below.

class ApplicationController < Sinatra::Base

set :views, ->{File.join(root,'../views')}
enable :sessions
set :session_secret, ENV["SESSION_SECRET"]

end
Once you have this you can get started with your SINATRA CRUD, which stands for Create, Read, Update and Destroy.

class SessionsController < ApplicationController

get '/login' do 
    erb :"sessions/login"
end 

get '/signup' do 
    erb :'sessions/signup'
end 

post '/signup' do
    @user = User.new(username: params[:username], password: params[:password])
    if @user.save 
        session[:user_id] = @user.id 
        redirect'/cocktails'
    else
     erb :"sessions/signup"
    end
end 

post '/login' do 
     user = User.find_by(username: params[:username])
    if user && user.authenticate(params[:password])
        session[:user_id] = user.id
        redirect'/cocktails'
    else  
        @error = "Invalid Username or Password"
        erb :"sessions/login"

    end 
end 

delete '/logout' do 
    session.clear
    redirect '/home'
    erb :'/cocktails'
end

end
I've been RESTful in my code because is a requirement on my project, I think is a good practice to follow but is your choice to whether you use it or not.
I am happy to share my GitHub page so you guys can see my complete project, I hope this post is somewhat helpful to you.

https://github.com/sarisgar28/sinatra_project

Happy Coding!

MY VERY FIRST CLI APP

sarisgar28 — Tue, 05 May 2020 21:44:38 +0000

I have gotten through my 8th week during my bootcamp experience. Oh man! It’s been a rollercoaster… As I mentioned on my first blog post I started my bootcamp with Flatiron School knowing literally zero about tech and all this different world. Now I know the basics of Ruby, It’s a technical language for sure and I have to say it has not been easy for me to learn this! But I have something really cool to share and that is I have built my first CLI application!

I AM VERY EXCITED!

Now let me tell you how fascinating is my Movie Tracker Command Line Interface Application, let me take a step back and tell you about what were my project requirements.

I Gathered Data from an API (Application Programing Interface)
Create a CLI application(how easy!)

Let’s start! So where did I start? I needed an API so I started my research and found a website called RapidAPI, you can find any type of API you’d like, I thought making a Movie Tracker, I thought is a good idea for my very first CLI app, It was going to be simple and a very good way to provide clean code.

So now the cool stuff begins!

I started with my BUNDLER GEM set up, I went to my XCODE terminal and typed “bundle gem movie_tracker” and it created most of my files, once my workspace opened on my VSCO I created my three class.rb. Once I started putting code on the files I was getting a better idea of what I was creating...Is a very simple not too long application, I tried to be as clean but creative on my code always giving the right commands to it. I feel very accomplished with what i’ve done. My Movie Tracker CLI app, searches for any type of movie you want to see, first you will see a WELCOME message, followed by two more messages “Get ready to find a movie!” and “Enter a movie title or type exit” if you look for a title you will find the movie you want to watch plus some extra information about the movie like Type, Year and IMDb; after you see this information you get to have the option to select one movie from the options you have, you will give the number of the option to the Movie you want to see and more information about it will be display such as Plot, Genres, Director, Actors and Runtime after that my loop keeps going and you can either look for another Movie or Exit the search.

You can see my code here :

sarisgar28 / movie_tracker

CLI PROJECT

Thank you for reading and Happy Coding!

Sara's weekly progress

sarisgar28 — Tue, 28 Jan 2020 15:08:17 +0000

Hi Everyone!
My name is Sara, I am a colombian living in NYC!

I went to school for architecture,I have a big passion about it, it’s my hobby,However when I tried to look for work the expectation I had it was totally different from reality, I learned how to be creative and push my imagination to the highest level, that is why I started to learn about technology as implementing both is a great way to manifest your ideas into incredible applications.I love challenges, languages and I believe I will become great at this. Please take a look at my progress in Flatiron School!