DEV Community: Walktheworld

How to display your react card components as a grid

Walktheworld — Thu, 21 Jul 2022 23:24:26 +0000

I am working through my software engineering program and there is not a lot of focus on the styling side of things. So I attempted to teach myself how to display my react applications in grid form for my projects. I found there are a lot of fancy customizations you can do in grid formatting. But let's talk about some basics.

When using styled-components, we can do the styling right on the PageList.js file. We define Wrapper as a styled-component and in there we will use our CSS formatting to get the grid.

import PageCard from "./PageCard"
import styled from "styled-components";

const PageList = ({pages, user}) => {
  const renderPages = pages?.map(page => <PageCard key={page.id} page={page} user={user} />)
    return (
      <Wrapper>{renderPages}</Wrapper>
       )
}  
 const Wrapper = styled.section`
  display: grid ;
  grid-template-columns: auto auto auto;
  grid-gap: .5rem;
`;

export default PageList

Here we map through each Page and we render it within our Wrapper component. By setting our grid-template-columns as "auto auto auto" that will set the grid as three columns wide. If we set it to "auto auto" that will make it two columns wide. I prefer the auto formatting but if you would like them at fixed widths just use your CSS tools to set those widths.

That same code works in a CSS file if you prefer styling through a single file.

Thanks for coming to my DEV talk, Happy Coding!

Basics of Custom Routes in Rails

Walktheworld — Wed, 20 Jul 2022 00:10:18 +0000

I am working on a project for my software engineering program. I was required to include a custom route to display some info on a profile page. So here is a little bit on how to build a custom route in a React/Rails Application.

We don't need to do this in any particular order, but the bridge between the frontend and the backend are the routes so let's start there. So we define profile in our routes.rb file.

Rails.application.routes.draw do
  namespace :api do
    get "/users", to: "users#index"
    post "/signup", to: "users#create"
    get "/me", to: "users#show"
    post "/login", to: "sessions#create"
    delete "/logout", to: "sessions#destroy"
    get "/profile", to: "users#profile"

    resources :breweries do
      resources :reviews, shallow: true
    end
  end
end

Next we will declare a has_many relationship through reviews so we can access our custom routes association. You will see here that the user has_many :reviewed_breweries, through: :reviews, source: :brewery.

class User < ApplicationRecord

  has_many :breweries,  dependent: :destroy

  has_many :reviews 

  has_many :reviewed_breweries, through: :reviews, source: 
  :brewery

  has_secure_password

  validates :username, presence: true, uniqueness: true

end

We will define what data our custom route will give us back in the user controller. In this case, we define profile to display all the breweries the user left a review for.

class Api::UsersController < ApplicationController
  skip_before_action :authorized!, only: :create

  def index
    render json: User.all
  end

  def create
    user = User.create!(user_params)
    session[:user_id] = user.id
    render json: user, status: :created
  end

  def show
    render json: @current_user
  end

  def profile
    reviewed = @current_user.reviewed_breweries
    render json: reviewed
  end

  private
  def serialized_user
    @user.to_json(include: :breweries)
  end

  def user_params
    params.permit(:username, :password, 
  :password_confirmation, :image_url, :bio)
  end
end

Next we will make a fetch request on the frontend in our Profile.js file we created and then render the data we want to the page for the user to see. Last, we will add a route to our App.js file to render our Profile.js file.

What we get back is a profile page for the current user logged in and displays a list of all the breweries the user has left a review for. I hope this helps you, as it did for me, retain some of the basics during your learning process.

Happy Coding!

Models, Views, Controllers Ruby on Rails Basics

Walktheworld — Mon, 06 Jun 2022 19:36:40 +0000

I am currently working on my first Rails Application with a React frontend for my online software engineering program. My application is a Yelp/Untapped clone where a client/user can login/signup. Once that user is authenticated they can add a brewery to the database for any valid user to view and leave a review on. I was required to have a many_to_many relationship, so reviews is my join table in this instance. I wanted to share some of the basics of the MVC architecture.

`Models`

Models are in charge of all of the methods we receive through ActiveRecord association (ActiveRecord Associations and Methods). It handles all the business logic, dealing with state of the application. Here is an example of how your User model may look:

class User < ApplicationRecord

  has_many :breweries,  dependent: :destroy

  has_many :reviews 

  has_many :reviewed_breweries, through: :reviews, source: :brewery

  has_secure_password

  validates :username, presence: true, uniqueness: true

end

`Views`

The Views are responsible for generating the GUI (graphic user interface) and presenting the data to the user.

`Controllers`

The controllers are responsible for the communication between the user/views and the backend. Talking through the models to sort the database and send back the appropriate view to the user. Here is an example of how your User controller may look:

class Api::UsersController < ApplicationController
  skip_before_action :authorized!, only: :create

  def index
    render json: User.all
  end

  def create
    user = User.create!(user_params)
    session[:user_id] = user.id
    render json: user, status: :created
  end

  def show
    render json: @current_user
  end

  def profile
    reviewed = @current_user.reviewed_breweries
    render json: reviewed
  end

  private
  def serialized_user
    @user.to_json(include: :breweries)
  end

  def user_params
    params.permit(:username, :password, :password_confirmation, :image_url, :bio)
  end
end

I know how hard it can be to sift through the endless documents of info out there. I hope this helps you, as it did for me, retain some of the basics during your learning process.

Happy Coding!

Resources:
(https://guides.rubyonrails.org/active_record_basics.html)

Active Record Associations

Walktheworld — Thu, 31 Mar 2022 17:45:00 +0000

I am currently working on my first Ruby/Sinatra Application for my online software engineering program. I wanted to share what I learned about Active Record Associations and all the built in methods we get access to using it.

`has_many`

An instance of one class that owns many instances of another class. This class must pluralize the has many instance method to get access to all the instances it owns. A User has many recipes

class Actor < ActiveRecord::Base
    has_many :characters
end

class Show < ActiveRecord::Base
    has_many :characters
end

The has_many association gives us access to 17 methods

actors
actors<<(object, ...)
actors.delete(object, ...)
actors.destroy(object, ...)
actors=(objects)
actor_ids
actor_ids=(ids)
actors.clear
actors.empty?
actors.size
actors.find(...)
actors.where(...)
actors.exists?(...)
actors.build(attributes = {})
actors.create(attributes = {})
actors.create!(attributes = {})
actors.reload

`belongs_to`

An instance that is owned by the has many class. We will state the belongs to method as singular to retrieve the relationship to the unique owner class. A Recipe belongs to one owner

class Character < ActiveRecord::Base
    belongs_to :actor
    belongs_to :show
end

To ensure reference consistency, add a foreign key to the owner column of the owned table migration.

class CreateRecipes < ActiveRecord::Migration[6.1]
  def change
    create_table :characters do |t|
      t.belongs_to :actor
      t.belongs_to :show
    end
  end
end

The belongs_to association gives us access to 8 methods

character
character=(character)
build_character(attributes = {})
create_character(attributes = {})
create_character!(attributes = {})
reload_character
character_changed?
character_previously_changed?

`has_many through:`

This creates a relationship bridge between two owner classes' and the owned/connecting class

class Show < ActiveRecord::Base
    has_many :characters
    has_many :actors, through: :characters
end

Controlled Components

Walktheworld — Thu, 02 Sep 2021 17:16:24 +0000

A controlled component is a component that renders form elements and controls them by keeping the form data in the component's state.

A controlled form is a form that gets its input values from the state.

Let's take a look at what that looks like:

First, we need to create a component that has an initial state. In this case, I use an empty string as my initial colorInput state:

Then, we render the form to the page to make sure that everything is connected properly (don't forget to import it to your main container and add to to the render lifecycle) :

Next, we need to handle the change of state, so we will implement a handleColorInput function for our in-line onChange event, and tell the style to change the color of the text from the state:

So here is the whole code:

and this is what that code returns:

Persist data with like button React

Walktheworld — Wed, 25 Aug 2021 23:07:51 +0000

I created a like button that I could use in two different routes to persist data to a third route.

First I created the LikeBtn class and set its state of liked to false so I could change that status to change the color after it has been clicked.

Next, I gave the button a handleClick function to change that state of liked from false to true. Then I used a GET request and the POST method to persist that data to my localhost server.

Finally, I use render to change the style color and the onClick functionality and render and all other properties of the button.

Now, let's take a look at the full code.

Key Takeaways From My First JS Project

Walktheworld — Wed, 16 Jun 2021 19:21:45 +0000

Asynchronous requests allow our code to multi-task.

A fetch() request has three statuses; Promise, Response, & Error.

-The promise is the HTML API source.

-The Response is the data from the source.

-Error occurs when no response is returned.

An EventListener takes an action ("click", "submit") and a callback function written as arrow function (()=>{}).

Function() should only be used when it is the start of the code otherwise ES6 is standard (i.e arrow function).

Know your data!

When you change one thing make sure you go through and restructure anything else that references that original location where the change was made. I found myself iterating through one object over and over again with a forEach statement, which I had written initially for an API with multiple objects.

Know your code!

How to Deactivate / Disable Button after Click

Walktheworld — Wed, 26 May 2021 19:51:58 +0000

So I am working on my first Javascript/HTML project for coding school. I made it so that when the user clicks on a button it would render some API data onto the page. But if the user clicked that same button more than once it would add the same data to the page with every click.

First I tried to see if I could find a way to dynamically disable the button with JS code without having to write a whole function. I tried to use the btn.id = "" format with .onclick while dynamically creating the button and that did not work.

The only solution I got to work was to add a disableButton() function, create the button in the HTML file and add an onclick classification inside of its tag activating that JS function.