DEV Community: Bianca Charlotin

useParams and Dynamic Routes

Bianca Charlotin — Thu, 09 Dec 2021 23:17:52 +0000

Intro

This post will discuss how to use useParams to create dynamic routes with your React application. While working on my first React application, I had a complex time understanding useParams and its use, even with my trusty friend Google. So I'm writing this blog post to help the next person who goes down this rabbit hole.

What is `useParams`?

In the most basic definition useParams is a React Hook that allows you to extract parameters from the URL in one line.

How To Use `useParams`

I will be using examples from my react App. to demonstrate how I used the hook. So let me clue you in on it:

I built a task manager App that has projects, and those projects have tasks.

I had a "/project" route with the child component of Tasks. I wanted each of these projects to render its own tasks using dynamic URLs. Meaning, I wanted Project 1's Tasks to display a URL that looks like this "/projects/1/tasks" without having to do so explicitly.

App.js File Declaring my Routes

import { Route, Routes } from 'react-router-dom';
import PageLayout from './components/layout/PageLayout';

export default function App() {
    return (
     <div >
      <Routes>
       <Route path="projects/*" element={<PageLayout />} />    
      </Routes>
    </div>
      );
    }

In the code above, I have declared my routes "projects/*", which will render the <PageLayout />component. Looking at the path carefully, you see an /* at the end. The asterisk at the end means that all routes that look like projects/ will be handled by the PageLayout component

PageLayout Component: Setting Up Dynamic Routes

<PageLayout /> display is where I have the layout template used for all other routes declared and components imported, which means this component is the template for my other pages.

PageLayout Component:

import { Route, Routes } from 'react-router-dom';
import ProjectDisplay from '../projects/ProjectDisplay';
import ProjectInput from '../projects/ProjectInput'
import ProjectUpdate from '../projects/ProjectUpdate';
import TaskDisplay from '../tasks/TaskDisplay'


export default function PageLayout() {

return(
<div>
 <Routes>  
  <Route path="/" element={<ProjectDisplay />} />
  <Route path="new" element={<ProjectInput />} />
  <Route path=":id/edit" element={<ProjectUpdate />} />
  <Route path=":id/tasks" element={<TaskDisplay />} />        
 </Routes>
</div>
)
}

Let look at each route

<Route path="/" element={<ProjectDisplay />} /> . I have declared this URL structure: "projects/". renders all my projects.
<Route path="new" element={<ProjectInput />} /> I have declared this URL structure: "projects/new", renders my project form for new project creation.

Dynamic Routes:

<Route path=":id/edit" element={<ProjectUpdate />} />
<Route path=":id/tasks" element={<TaskDisplay />} />
The colon indicates to React that this will be a dynamic route, I put "id" after because I decided that is what I'm passing in, but it can be called anything, ex: :name, :project_id. Just make sure you're consistent.

Where are Dynamic Routes Getting Their Parameters?

Naturally, where I'm displaying all my projects is the most natural choice for me. I linked all project names to their corresponding tasks and sent the parameters through those links.

Below is my <ProjectDisplay /> code:


export default function ProjectDisplay() {

return(
 <div>
  {projects.map(p => {
   <Link to={`/projects/${p.id}/tasks`}>{p.title}
    </Link> 

 })}
 </div>
)}

Above I am iterating over a projects array in this code to display all projects. I have established a link. Looking at the links pathway /projects/${p.id}/tasks you see that for <Route path=":id/tasks" element={<TaskDisplay />} /> that we declared earlier we are passing in the full URL, but instead of the :id we are passing in the projects id. Passing in this information is how your URLs go from: /projects/:id/tasks to /projects/1/tasks

Extracting The Parameters Sent!

I'm going to be calling the hook useParams on whichever component I have established the dynamic route for. In the example above, I linked my project page to go to the task page/<TaskDisplay /> component.

TaskDisplay Component:
The reason I sent the id of my projects is because each project has a different set of tasks. To find and display these tasks:

I need to know what project URL im on, and find that projects task

import { useParams } from 'react-router';

export default function TaskDisplay() {

const { id } = useParams()
const useParamsProjectId = parseInt(id)
const allTasks = useSelector(state => state.tasks)
const projectTasks =  allTasks.filter((task) => (task.project_id === useParamsProjectId))

 return(
 )
...
}

const { id } = useParams(): Declared a variable using the destructured value of useParmas. { id } is the name I gave my dynamic route `.
const useParamsProjectId = parseInt(id): Declared a variable which returns id that has been converted into an integer to use to compare later.
const allTasks = useSelector(state => state.tasks): Here I am Grabbing all tasks from state (independent of the project) and setting it equal to a variable called alltasks
const projectTasks = allTasks.filter((task) => (task.project_id === useParamsProjectId)): I'm using the method filter() to return a new array with all tasks that's project_id matches the useParams id aka useParamsProjectId and setting it equal to a variable called projectTasks.

There you have it useParams in full circle !

React Hooks and Fetch

Bianca Charlotin — Mon, 06 Dec 2021 15:51:25 +0000

This blog will be detailing how to use React Hooks with Fetch to get data.

"Note that all React packages need to be 16.8.0 or higher to enable Hooks. Hooks won't work if you forget to update".

Backend

Let's first look at the database I used for this demonstration. I used a rails API, but we won't be getting any deeper than this; all you need to know are the attributes that are set up in the table to understand the examples.

  create_table "projects", force: :cascade do |t|
    t.string "title"
    t.string "description"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

This code snippet shows a table called "Projects" that has 2 attributes "Title" and "Description".

Frontend

Project Display Component

Displayed is the "project display functional component". The goal. heere. is to have this component fetch all the projects from my backend so that it can be displayed.

Let's first take a look at the "imports"

import { useEffect } from 'react';
import { fetchProjects } from './projectAction';
import { useSelector, useDispatch } from 'react-redux'

useEfect is similar to componentDidMount() which runs additional code before React has updated the DOM. This is important because we want to get our data before the page loads. No data means no projects can be displayed on the DOM. How do we get our data? Yes, Fetch!
This is where the fetch request is happening.
fetchProjects is a functional component I created just to handle get request.
useDispatch is similar to connect. useDispatch is React Hooks' way to trigger a state change.
useSelector is similar to how we would call "this.props.projects" to get data from the redux store; now we have useSelector.

Putting It All Together

Project Display Component Functions and Declarations

export default function ProjectDisplay() {

  const projects = useSelector(state => state.projects)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(fetchProjects())
  }, [])
}

const declaration of "projects" is the return value of useSelector. How you set up your reducer(s) and store reflects how you call your state. Typically if you only passed in 1 reducer component in my redux store, you would just use const projects =useSelector(state => state), but I passed in a combineReducer, which like it says, combines all the different reducer components, so you have to specify which one you want. How the Store looks like ...

import { applyMiddleware, createStore, combineReducers } from "redux";

import thunk from "redux-thunk"
import userReducer from "./reducers/userReducer";
import projecReducer from "./reducers/projectReducer"
import taskReducer from "./reducers/taskReducer"


let rootReducer = combineReducers({user: userReducer, projects: projecReducer, tasks:taskReducer  })

export default createStore(rootReducer, applyMiddleware(thunk))

2.const declaration of "dispatch" gives us access to the usDispatch function by just calling Dispatch

useEffect takes in 2 arguments. The first argument takes in a function. In this example, we created a call-back function with dispatch to trigger a change instate. Then in our function dispatch we call on our fetch function (fetchProject). The second argument in useEffect takes in an array of dependencies. In this example, we have none, so we left the array empty.

Fetch Function (fetchProject)

You should already be familiar with how to write a fetch function, so I will only be getting into how it changes our state.

export function fetchProjects(){
    return dispatch => {
        fetch('http://localhost:3000/projects')
        .then(r => r.json())
        .then( projects => { 

            dispatch({type:"SET_PROJECTS", payload: projects})})
    }
}

What is fetch doing? Fetch is going to the url provided, in this case the route of my backend and 'GET'/getting all the projects.
The new addition to this fetch request is dispatch({type:SET_PROJECTS, payload: projects}. In the second promise of our function. We call dispatch to change the state, which we still need to do within the fetch request. dispatch takes in an action, an object that describes what happened ({type:SET_PROJECTS, payload: projects}). type is a string used to match our case in the switch statement (located in the reducer which changes our store's state). payload in this example is the data retrieved.

Change state with Reducers

Remember that we are passing in reducers to our redux store, so to change our state inside of our store, we must modify the information in our reducers. After the fetch request, the second dispatch accesses the reducer.

This is the Project Reducer:

export default function projectReducer(state=[], action) {
    switch(action.type){
        case "SET_PROJECTS":

            return action.payload; 
    }
}

The project reducer takes in 2 arguments. 1. the state, which is being defaulted to an empty array, and 2. action, which is what refers to the object that was sent through dispatch (dispatch({type:SET_PROJECTS, payload: projects}).

2.With switch the value of the expression (action.type) is compared with the values of each case. in this example, we used action.type, which renders out to be "SET_PROJECTS" because it is what was passed through in our dispatch. In the case statement, we are returning the state. By calling action.payload the state is snow equal to the data we got from our fetch, which is an array of Project objects .

Back to Project Display Component to render

const projects = useSelector(state => state.projects)

Now that our state is an array of project objects We can render them in our DOM. remember our useSelector function declared earlier in the project component? We can use the const project like this ...

return(
 <div>
            <h1>Projects</h1>
            <ul>

                {projects.map(p =>{
                return(
                    <li key={p.id}>


                        <p>{p.description}</p>
                        <p>{p. completion_rate}</p>
                        <button onClick={()=>{handleClick({p})}}>Delete</button>

                    </li>
                )})}
            </ul>
        </div>             
)

As you can see we are mapping through projects and displaying each project in an unordered list on the DOM.

Javascript's "This" Keyword Class Context

Bianca Charlotin — Tue, 05 Oct 2021 22:00:37 +0000

While building my first application with a Rails API I built, and a Javascript frontend, I ran into a lot of trouble figuring out This. In this blog post, I will break down This from a Class context with examples from my project, and show you how to always find out what This is, using Debugger.

What is`This`?

Thisis almost like the Ruby Keyword Self, but unlike Self, This can be a lot more fickle. Just like in writing context is import. "this"can refer to many different things based of the sentence written. In Javascript This is defined based on where it is being used.

Code along with me:

Create an index.html file, and an index.js file, and add the js file to the HTML file. Then place a debugger in an empty javascript file, open your index.html file in your browser and the inspect tool. You should automatically hit your debugger. Then write. This in your console.

This is defined as the window object represents an open window in a browser. *Important: This always references an object *

Class Context:

It's important to remember that a class is an object, and from what we have already learned about This,This` within a Class will point to the Class object.

This is a Pets Class I created within it is a class function called constructor *(if you are familiar with ruby constructor is like initializer)

This is the value of This inside a constructor (using console to type in This to get the value). As you can see it's referring to a Pets object, which is an instance of the Pets Class(currently, has no attributes since we didn't pass any in).

What About Static Class Functions?

Here are where things can change. Unlike regular methods within a Class, static methods are not called on an instance of a Class, but on the Class itself ex: Pets.create()

As you can see in the image below, This is now referring to the Class (Not an Instance of the class)

**Important: It is important to note that This can also change based on the way you write your functions. If we were to use arrow functions on our static method This would return undefined

This is because Arrow functions inherit their This from the outer scope rather than their This depending on their calling context. So in the example This is trying to refer to the static method of create() which is not an Instance of the class object.

Static Method:- there is no need to create an object in order to use static method. means "instance" or object creation doesn't any sense with "static" as per Java rule

Tips and Tricks to Find `This`:

debugger,debugger, debugger! You cna use debugger jsut about anywhere in you javascript code, this will alwaa you to use the browser console to check out what This is.

Example of how to find this for a Javascript event:

This is more of an advanced example but was surely helpful in my project.

playGameButton is a DOM element I set in my index.js for a button I have on my Html file. I have an event listener for a "click", When the event occurs, an event object is passed to the function, and that object is now. what This is equal to. An EventListener is an object that handles an event.

** For more help please refer to this : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

My First Rails App

Bianca Charlotin — Sat, 07 Aug 2021 18:20:47 +0000

This blog post will be discussing the process of completing my third flatiron coding project. It will go into detail on the project I created and the difficulties I encountered.

This project focused on using Rails (a Ruby framework) and developing a web application. Since my last project was more social media-focused, I wanted to create something game-related this time around. So I developed a Game review site.

Just like in Sinatra we were introduced to ULR's, GET and POST requests, etc. However, this time around, since Rails is fitted for a larger web application we got cool new features like its generator property that pre-populated your rails app with models, migrations, views, and helpers needed for the project, my favorite was "rails g resource ...".

This project consisted of building an app that had Rails associations, which is a connection between two Active Record models. Allowing users to signup, log in through the app, or through a third-party signup/login (OmniAuth), and the ability to log out. Some methods required were the use of Scope and helper methods within the app. I will be going into each of these requirements below.

Rails associations: This part was what I wrote out first to make sure I had models that could create the associations needed for this project -Include at least one has_many relationship -Include at least one belongs_to relationship -Include at least two has_many through relationships

Log In/Sign Up: This was one of the harder requirements
because we needed to include a way to log in or sign up
through a third party. I used Omniauth to include this
feature. This article helped me set it up, and retrieve the

user information need to log/sign them.

Omniauth Article Link:
https://medium.com/@jenn.leigh.hansen/google-oauth2-for-rails-ba1bcfd1b863
Helper Methods: A helper is a method that has reusable code,

which can be applied to many different places in your rails
app (primarily Controllers and Views).Rails also come with
a set of built-in helper methods. I used 2 helper methods,
which I defined in my Rails-App/app/helpers/application_helper.rb file.

Then I placed a line of code in my Applications Controller, to make sure my helper method could be used on all controllers or views "include ApplicationHelper"

Here is an example of how the current_user is being used. The screenshot below is of my navigation. I used an if statement to call current_user to make sure there was a current user or user was logged in (I could have also used the logged_in? helper too). This is so that users can see a different nav depending on if you are logged in or not.

Scope: Adds a class method for retrieving and querying objects. I use Scope to alphabetize my games by their titles. Scopes are defined in the model that they are used for. Below is an examples of a scope in the games model.

This is how the scope is being called in the games controller

This is the Result: The games are now in alphabetic order

One of the most difficult things about learning Rails is that there are a lot of moving parts, so things can get messy quickly. With so many views, and models, and associations it can get confusing at times. So some tips that I learned along the way are 1. stay organized by tackling one model and it's views at a time. 2. byebug and binding.pry are lifesavers, so be sure to uses these gems if you are stuck.

Sinatra Web APP

Bianca Charlotin — Sun, 28 Mar 2021 21:21:40 +0000

This blog post will be discussing the process of completing my second flatiron coding project. It will go into detail on the project I created and the difficulties I encountered.

This project focused on using Sinatra (which is an alternative to other Ruby web application frameworks such as Ruby on Rails) and developing a web application. As soon I heard the word "web application" my mind went to the many social media sites I've encountered. So it was then that I decided that I would be building the inner workings of a social media site( currently this is nowhere near a fully functional social media site, yet).

Sinatra was an eye-opener to the world of servers, ULR's, GET and POST requests, etc. Working with Sinatra also help to fortify my attention to detail, specifically when it came to creating forms (in HTML using erb files). While making forms it was important to make sure we understood the name attribute in those forms, so that we could collect users' input on the back end. Essentially, grasping all of this new information and applying it to our labs was difficult and tedious.

This project consisted of building Models, Controllers, and Views.
Models are where I created my objects( Users, and Posts) with that I had to establish their relationship (belongs to, has many, etc.) because that would determine where my foreign-key would go or if I need a Join table. Then I created my tables for my database (all done using Active records).

Next, I used my controllers to handle the GET and POST request from the URL. Also within my controller was the majority of my Ruby code, so I had to:
Validate the uniqueness of the user login attribute (username or email).
Ensure that the user was signed in and can view certain view pages
Ensure that users can edit and delete only their own resources - not resources created by other users.
create my objects so that I may access them on my view. fils (AKA HTML/erb files)
and much more...
In conjunction with my controller actions, I had to build corresponding Views. This is where the HTML and some minor ruby code would go (Fun Fact: erb files allow you to uses ruby code inside HTML). The View is also what the user will be interacting with, and inputting data for us to collect in our controllers.

End Result:
I created the beginnings of a social media site called The Hive, where users are able to:

Sign Up
Login
Logout
Create, Edit, or Delete Post
(hope to add more features like a profile View, and add some CSS. to provide for a better UX experience )

Link to my GitHub coming soon.

Anime CLI Project

Bianca Charlotin — Wed, 27 Jan 2021 23:42:12 +0000

This blog post will be discussing the rollercoaster I was on while completing my first flatiron coding project. It will go into detail on the project I created and the difficulties I encountered.

When it came to the ideation of this project, I wanted to create a personal aspect that would keep me motivated throughout the process. Since I'm an avid watcher of Anime shows so I decided to use an Anime API, specifically, the one by Jikan. From this API. I created a command-line interface(CLI) that acted as a library and would provide the user information for a particular anime.

After entering the name of the anime you wanted to know about, displayed in the terminal would be basic information, like title, id, and a synopsis of the show. Then the user would be prompted and asked if they would like more information, if so, the user would be provided with further details on the show like when it started and when it ended. Lastly, the user would have the option to look at a recommended list of shows based on the anime they searched for.

Surprisingly, the most difficult part of this project was getting started. Writing the pseudo-code for how this project would interact/work, and understanding the relationships the 3 classes would have was challenging. This is because typically we would have a spec file that would let us know what was going wrong and if we passed the test. This time around we had to check every step of the way that everything we were returning was accurate.

Snippet of the pseudo-code:

"CLI class" gets an input -> calls on the "API class" and sends it off a request to get information -> "API class" calls on the anime class to create a new object -> that new object is what the "CLI Class" will use /output/do something to

Link to my Github CLI Project: https://github.com/Bcharlotin1/anime_cli_project

Why I Want to Become a Developer

Bianca Charlotin — Mon, 14 Dec 2020 16:42:48 +0000

I would like to say that my interest in programming began in college. I was introduced to the many different languages of programming in a web design course where I learned to uses HTML and CSS, and Object-Oriented Programming where I learned the concepts of abstraction, encapsulation, inheritance, and Polymorphism

With Web Design, I was filled with immediate gratification. You would write a paragraph in HTML, change the background color using CSS, and like magic it appeared on the screen. I couldn't say the same for Object-Oriented Programming. the course was a whole new world for me, it consisted of building many parts for a desired function. It wasn't as visually striking as web design and that took some to get used to.

The reason I enjoyed both these classes was because of that feeling you get the moment you made the code to work, it is nothing short of enchanting, and satisfying at the same time. The reason I kept learning these languages long after college was because, besides a grade, I had something tangible, something I created from lines of code that without a text editor would just be syntax. My passion for coding and technology comes from the simple pleaser of finding how to stop your loop from looping to infinity and beyond, or changing how we collaborate by creating web applications like Google Docs. These are the many different reasons why I want to become a software developer.