DEV Community: arbarrington

Ternary Operators for App with two User Types

arbarrington — Fri, 18 Nov 2022 18:26:02 +0000

I created an app where users are either a farmer or consumer

{!user.producer?
        <h1>Favorite Producers</h1>
      :<>
      <h1>Consumer Analytics</h1>
      <SalesByMonth user={user} partialOrderComplete={partialOrderComplete} myOrders={myOrders} myOrdersOut={myOrdersOut}/>
      </>}

Cookies and Sessions

arbarrington — Thu, 20 Oct 2022 21:20:31 +0000

Since cookies are such an important part of most web applications, Rails has excellent support for cookies and sessions baked in. Unfortunately for us, when you create a new application in API mode with rails new appname --api, the code needed for working with sessions and cookies in the controller is excluded by default.

To add session and cookie support back in, we need to update our application's configuration in the config/application.rb file:

# config/application.rb
module MyApp
  class Application < Rails::Application
    config.load_defaults 6.1
    # This is set in apps generated with the --api flag, and removes session/cookie middleware
    config.api_only = true

    # Must add these lines!
    # Adding back cookies and session middleware
    config.middleware.use ActionDispatch::Cookies
    config.middleware.use ActionDispatch::Session::CookieStore

    # Use SameSite=Strict for all cookies to help protect against CSRF
    config.action_dispatch.cookies_same_site_protection = :strict
  end
end

This will add in the necessary middlewareLinks to an external site. for working with sessions and cookies in our application.

To access the cookies hash in our controllers, we also need to include the ActionController::Cookies module in our ApplicationController:

# app/controllers/application_controller.rb
class ApplicationController < ActionController::API
  include ActionController::Cookies
end

Rails Validation

arbarrington — Wed, 12 Oct 2022 20:43:13 +0000

validates :name, presence: true
validates :name, length: { minimum: 2 }
validates :email, uniqueness: true
validates :not_a_robot, acceptance: true, message: "Humans only!"
validates :year, numericality: {
    greater_than_or_equal_to: 1888,
    less_than_or_equal_to: Date.today.year
  }

def create
  person = Person.create!(person_params)
  render json: person, status: :created
rescue ActiveRecord::RecordInvalid => invalid
  render json: { errors: invalid.record.errors.full_messages }, status: :unprocessable_entity
end

Database activity triggers validation. An Active Record model instantiated with #new will not be validated, because no attempt to write to the database was made. Validations won't run unless you call a method that actually hits the DB, like #save.

The only way to trigger validation without touching the database is to call the #valid? method.

Custom Validation

class Person
  validate :must_have_flatiron_email

  def must_have_flatiron_email
    unless email.match?(/flatironschool.com/)
      errors.add(:email, "We're only allowed to have people who work for the company in the database!")
    end
  end
end

validate :clickbait?

  CLICKBAIT_PATTERNS = [
    /Won't Believe/i,
    /Secret/i,
    /Top \d/i,
    /Guess/i
  ]

  def clickbait?
    if CLICKBAIT_PATTERNS.none? { |pat| pat.match title }
      errors.add(:title, "must be clickbait")
    end
  end

We can clean up this controller action by handling the ActiveRecord::RecordInvalid exception class along with create! or update!:

def create
  bird = Bird.create!(bird_params)
  render json: bird, status: :created
rescue ActiveRecord::RecordInvalid => invalid
  render json: { errors: invalid.record.errors }, status: :unprocessable_entity
end

In the rescue block, the invalid variable is an instance of the exception itself. From that invalid variable, we can access the actual Active Record instance with the record method, where we can retrieve its errors.

def render_not_found_response(exception)
render json: { error: "#{exception.model} not found" }, status: :not_found
end

Representational State Transfer (REST)

arbarrington — Tue, 11 Oct 2022 21:21:37 +0000

Architectural style created by Roy Fielding

You can disable the wrap parameters feature in an individual controller:

class BirdsController < ApplicationController
  wrap_parameters format: []
end

You can also disable it for all controllers if you like, by going into the config/initializers/wrap_parameters.rb file and updating it like so:


ActiveSupport.on_load(:action_controller) do
  wrap_parameters format: []
end

Rails Routing

arbarrington — Tue, 11 Oct 2022 17:33:16 +0000

Routes
Params
Any time Rails receives a request with a Content-Type of application/json, it will automatically load the request body into the params hash
to avoid mass assignmemt, use strong params:
params.permit(:attribute1, :attribute2...)

get '/cheeses/:id', to: 'cheeses#show'

CheesesController

def show 
    byebug
    cheese = Cheese.find_by(id: params[:id])
    render json:cheese
end

The routes.rb file takes in the request to localhost:3000/cheeses/3 and processes it like normal, except this time it also parses the 3 as a URL parameter and passes it to the CheesesController.

From that point, the controller action that you write will parse the 3 parameter and run a query on the Cheese model.

Once we have the correct Cheese instance, we can render a JSON response.

render
By specifically defining what data is being sent via a Rails controller, we have full control over what data our frontend has access to.
Except & Only

  def index
    cheeses = Cheese.all
    render json: cheeses, except: [:created_at, :updated_at]
  end

  # GET /cheeses/:id
  def show
    cheese = Cheese.find_by(id: params[:id])
    render json: cheese, only: [:id, :name, :price, :is_best_seller]
  end`

methods

 render json: cheese, except: [:created_at, :updated_at], methods: [:summary]

conditionally rendering custom error messages

if cheese
    render json: cheese, except: [:created_at, :updated_at], methods: [:summary]
  else
    render json: { error: 'Cheese not found' }, status: :not_found
  end

rails routes [| grep] object-name- review routes for specific object

Example:

resources :pets, only: [:index, :show]

status - including this in your render will not change the json response but will provide additional information for the client. Examples include "ok, not_found"
Status Codes

Postman and byebug
In the byebug session, we can access the entire request object by using the request method:

(byebug) request

This request object has all kinds of info about what was sent in the request. Try some of these methods out in your byebug session:

request.request_method
request.headers["Content-Type"]
request.body.read
The last one, request.body.read, will read the body of the request as a string. Nice! We could take it a step further, and parse that string as json:

(byebug) JSON.parse(request.body.read)
{"name"=>"Monk Parakeet", "species"=>"Myiopsitta monachus"}

render json: movie, serializer: MovieSummarySerializer
render json: movies, each_serializer: MovieSummarySerializer

class BirdsController < ApplicationController
rescue_from ActiveRecord::RecordNotFound, with: :render_not_found_response

Rails CLI Generation

arbarrington — Mon, 10 Oct 2022 19:16:38 +0000

Rails CLI Generation

Thank you Cassidy for the guidance below!

rails new application-name

rails g
-model: creates model and migration
-migration
-controller
-scaffold
-serializer: use singular for corresponding model. Dictates what attributes and json structure that will be returned
ActiveModel::Serializer provides some powerful yet simple-to-use tools for crafting the JSON our app returns, and it does so in a way that's consistent with Rails conventions.
To customize the JSON returned for a resource, create a serializer for that resource and list the desired attributes.
The serializer is used implicitly by Rails based on naming conventions; to override this, custom serializers can be passed explicitly.
AMS enables the use of the belongs_to and has_many macros in serializers to render associated data; these macros should be used sparingly.
By default, AMS will only nest associations one level deep in the serialized JSON. To override this, the include option can be used.
-resource: creates model, migration, controller and view files. Schema is updated/created. Controller will automatically generate 7 routes that follow REST.

rails d (destroy)

rails s (server)

rails db (similar to rake db commands)

rails c (console)

options
--no-test-framework

Nomenclature for models, controllers, and views
-Model names are always singular, and controller names are plural

class-name:belongs_to
updates association in model,
updates schema to
t.belongs_to :class-name, null: false, foreign_key: true

rails routes
A client sends a request to the server (this could be: a user entering a URL in a browser; a JavaScript application using fetch; etc)
That request is sent to the server where the application's router interprets the request and sends a message to the controller mapped to that route
The controller uses the model to access data from the database
The controller then uses that data to render a view (HTML or JSON)
The server returns an HTTP response, which contains the HTML or JSON data

Update a migration
-add a column
rails generate migration add_column-name_to_table-name(s) column-name:data-type
--api
--minimal

***Combine these command templates
npx create-react-app client --use-npm
rails new dvd-shop --api --minimal
rails g resource Movie title year:integer length:integer director description poster_url category discount:boolean female_director:boolean --no-test-framework

Adding foreign keys to join table using CLI
rails g migration AddTaxiToRides taxi:references

React.js

arbarrington — Wed, 21 Sep 2022 17:00:02 +0000

this - description

class Dog {
  showingThis() {
    console.log(this);
  }
}

const fido = new Dog();
fido.showingThis();
// => Dog {}

scope
fetch
-response (r)
--.ok
--.json()

[if res not ok] - setErrors(Object.entries(e.error).flat()

Events and Event Listeners
Looping
JSX

useEffect - triggers code to be run once component mounts
useState
useNavigate
useParams

We can simplify this process of making requests to the correct port by using create-react-app in development to proxy the requests to our APILinks to an external site.. This will let us write our network requests like this:

fetch("/movies");
// instead of fetch("http://localhost:3000/movies")
To set up this proxy feature, open the package.json file in the client directory and add this line at the top level of the JSON object:

"proxy": "http://localhost:3000"
Let's also update the "start" script in the the package.json file to specify a different port to run our React app in development:

"scripts": {
"start": "PORT=4000 react-scripts start"
}

async function handleSubmit(e) {
e.preventDefault();
// fetch returns a Promise, we must await it
const response = await fetch("/movies", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
});
// response.json() returns a Promise, we must await it
const data = await response.json();
if (response.ok) {
console.log("Movie created:", data);
} else {
setErrors(data.errors);
}
}

Projects/GitHub

arbarrington — Mon, 19 Sep 2022 21:22:37 +0000

Best practices for collaborating with a group
-communication is key
-branching, pushing, and merging
-80% planning, 20% coding

https://whimsical.com/phase-3-brainstorming-BM5ooc1X74pNLtxmnZA52i@2bsEvpTYSt1HjGi1reMKufMh9aaSgohub2N

GitHub Lessons Learned

arbarrington — Mon, 19 Sep 2022 19:39:35 +0000

Understanding branches
Commands
Variable naming and task delineation
Git Hub Commands

open a repository and change github.com to github.dev

strategy: open a new branch for each feature. Git add frequently, and git commit after each success. 'git push origin branch-name'. Assign someone in the group to be the merge master. Overcommunicate about what you are working on. Proactively share component/variable names to prepare for interaction.

Ruby

arbarrington — Mon, 19 Sep 2022 19:38:58 +0000

Gems
Rack - wraps HTTP requests to simplify the Application Programming Interface for servers, frameworks, and software
-Sinatra - Domain Specific Language for creating Ruby web applications, built on top of Rack
-CORS
-Rake
--Seeding
--Migration
-Foreman
gem install foreman
Foreman works with a special kind of file known as a Procfile, which lists different processes to run for our application. Some hosting services, such as Heroku, use a Procfile to run applications, so by using a Procfile in development as well, we'll simplify the deploying process later.

In the root directory, create a file Procfile.dev and add this code:

web: PORT=4000 npm start --prefix client
api: PORT=3000 rails s
Then, run it with Foreman:

foreman start -f Procfile.dev
This will start both React and Rails on separate ports, just like before; but now we can run both with one command!

There is one big caveat to this approach: by running our client and server in the same terminal, it can be more challenging to read through the server logs and debug our code. Furthermore, byebug will not work. If you're doing a lot of debugging in the terminal, you should run the client and server separately to get a cleaner terminal output and allow terminal-based debugging with byebug.

You can run each application separately by opening two terminal windows and running each of these commands in a separate window:

npm start --prefix client
rails s

Active Record
-Associations: One to Many vs Many to Many
--timestamps and the schema
The has_many association reference also lets you provide additional optionsLinks to an external site. to customize its behavior. In our case (and in many cases involving a one-to-many relationship), we can use the dependent: :destroyLinks to an external site. option. This will tell Active Record to delete all the associated records when the parent record is deleted

# foreign_key: true establishes a relationship between a review and a dog house
t.belongs_to :dog_house, null: false, foreign_key: true
has_many :reviews, dependent: :destroy

SQL
Database interaction

Self
"Require" - require relative, require all
"pry" - debugging
"colorize"
Symbols
Classes
Instances
Object Oriented Programming
Benefits and Purposes as a Language
-alternatives
attr_accessor
Class::Class-Constant
Object Inheritance
super
Metaprogramming

t.timestamps => created_at, updated_at

class User
  def initialize(attributes)
    attributes.each do |key, value|
      # create a getter and setter by calling the attr_accessor method
      self.class.attr_accessor(key)
      self.send("#{key}=", value)
    end
  end
end

Methods
.order
.pluck
.includes?
.any?
.uniq
.send
.gsub
.detect
.tally
.to_f
.to_i
.split
.strip
.compact
.push
.pop
.shift
.unshift
.each
.sort
.map/.collect
.select
.filter
.filter_by
.max_by
<<

<=>

React Hooks and Component Libraries

arbarrington — Mon, 19 Sep 2022 14:23:40 +0000

To Add:
style components

React
useState - declares a 'state variable' whose value can be preserved between function calls.

const [count, setCount] = useState()

useEffect - call a function (side effect) after the component has rendered

useEffect(() => {
    fetch("http://localhost:4000/leaders")
    .then((r) => r.json())
    .then(setUserResults);
    },[])

React Router DOM Library
useNavigate - navigate the broswer programmatically

Supplementing {Router, Routes, Route}
useParams - returns an object of key/value pairs of the dynamic params from the current URL that were matched by the .
Router, Routes, Route

CSS Resources

arbarrington — Thu, 25 Aug 2022 15:35:00 +0000

Tailwinds
Tachyons
Bootstrap