DEV Community: dandanthemanman

How to render data from multiple models using a serializer

dandanthemanman — Tue, 05 Jul 2022 12:47:13 +0000

If you've already learned how to relate models in rails using macro associations like:
belong_to
has_many
or
has_many, through:

You may be wondering how these relationships manifest themselves when you actually pull data from your models. The answer is: they don't. That is, unless you use a serializer with your model.

A serializer is a separate file that kind of acts like a filter to its model. It determines what attributes from the model's records will be rendered or not rendered.

So, for example, we could have a model whose records have 100 attributes, but in a specific fetch request, we only want to render 3 of them. We would program that using a serializer.

To create a serializer file, use the command:
$ rails g serializer Model_name

By default, the serializer will be linked to the model that shares its name.

Once the serializer is created, enter the file Model_name_serializer.rb and add the macro associations you want to use when rendering data.

class ModelNameSerializer has_many :other_models end

Now, when you pull a record from "Model_Name," it will not only render that specific record, but also the nested records of "Other_model" that belong to it.

This can be useful if you want to use data from various related models in a single fetch statement.

How to add Bootstrap to your React app

dandanthemanman — Sun, 12 Jun 2022 16:32:57 +0000

When I started building projects and wanted to make them look good, I soon learned Bootstrap was an efficient way to style them. It's also pretty intuitive (which is a godsend).

Unfortunately, I got stuck at the first step: installing Bootstrap.

Hopefully this will save you from getting stuck at the installation too.

run $npm install bootstrap react-bootstrap in your React app's directory.
Now, it's time to ask yourself specifically what you want to style: buttons, the navbar, do you want to add cards? Browse through what bootstrap has to offer here: https://react-bootstrap.github.io/components/alerts/
Once you've perused through all the components Bootstrap has, and some have caught your eye, navigate to the file where you want to use them. Here, you'll import the specific component at the top of the file by writing: import { Component } from "react-bootstrap" (include the name of the component you want)
Underneath that, include: import "bootstrap/dist/css/bootstrap.min.css";
Now you're free to include that component in your file.
If you want to add different components, simply add them to the curly braces at the import at the top of the file:

import { Component1, Component2 } from "react-bootstrap"

Congrats! You've installed Bootstrap and included components in your app. Now, you can focus on styling the components to your preference.

... how do you do that?

The styling in Bootstrap is done primarily through the component's attributes. For example:

<Component variant="primary">

... will give you the pre-styled "primary" version of this component.

You can find these attributes and examples of what styles they offer in the "components" section of the Bootstrap docs we looked at before:
https://react-bootstrap.github.io/components/alerts/

Hope this helped. For a great tutorial on how to use basic Bootstrap components: https://www.youtube.com/watch?v=8pKjULHzs0s

Write an API patch route in Sinatra

dandanthemanman — Fri, 03 Jun 2022 20:49:28 +0000

While learning to write Sinatra API routes, the PATCH route was the most confusing for me. If you're in the same boat, the following 5 steps should help.

Before we start, you need to make a ruby file called "application_controller.rb" in app/controllers.

First: In the new file declare the class ApplicationController.

class ApplicationController < Sinatra::Base

end

Second: Write the method "patch"
Add the model where the instance you're changing lives.
Add "/:id" to the end.

class ApplicationController < Sinatra::Base

patch "/table/:id" do

end

end

Third: Use find() and the params id to locate the instance in the model, and declare a variable with it.

class ApplicationController < Sinatra::Base

patch "/desiredtable/:id" do
desiredRecord = DesiredModel.find(params[:id])
end

end

Fourth: Now, we'll update this variable's attribute.
Update it with the value we pull from the params.

class ApplicationController < Sinatra::Base

patch "/desiredtable/:id" do
desiredRecord = DesiredModel.find(params[:id])
desiredRecord.update(attribute: params[:attribute])
end

end

Fifth: (last but certainly not least) Convert the variable to JSON.

class ApplicationController < Sinatra::Base

patch "/desiredtable/:id" do
desiredRecord = DesiredModel.find(params[:id])
desiredRecord.update(attribute: params[:attribute])
desiredRecord.to_json
end

end

Done!