DEV Community: Gianni Castellano

Redux the beginners guide!

Gianni Castellano — Thu, 22 Aug 2024 21:46:28 +0000

Hi everyone! I am here to give a small guide explaining on how to use Redux within to manage state within your react application. There are five key concepts to understand in order to incorporate redux in your react application:

Store
Actions
Reducers
Dispatch
Selectors

Store
The purpose of store is to have a central hub where all the state within the app is managed. After creating a Store.jsx file, you need to first import configureStore at the top of the file. Then you need to import the files within your app that are modifying states from the slice files. Lastly, you need to combine the reducers from all the slice files into a single root reducer.

Actions
Within your slice files it is necessary to use actions in order to send data from within your app to the Store file. They are generic Javascript objects that require a type property in order to perform the needed action. In the context of my latest project I used them in order to fetch, delete, create, and post data to my backend server.

Reducers
Reducers work hand in hand with actions. They are functions that take the current state and an action as arguments and return a new state without mutating the original data. They state how the app's state will change due to an action.

Dispatch
Just like reducers, dispatch, is a function that works with reducers to send actions to the store file. The dispatch function is used to trigger the reducer which in turn triggers action in order to update the state.

Selectors
Selectors are used in order to grab the data from the state within files in order to update the data accordingly.

Here is code snippets from my latest project in order to give a visual demonstration on the above information

Store.jsx:

import { configureStore } from "@reduxjs/toolkit"
import clanReducer from './ClanSlice'
import eventReducer from './EventSlice'
import clanFormReducer from './ClanFormSlice'
import eventFormReducer from './EventFormSlice'

const store = configureStore({
    reducer: {
        clan: clanReducer,
        event: eventReducer,
        clanForm: clanFormReducer,
        eventForm: eventFormReducer,
    },
})

export default store

ClanSlice.jsx

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import axios from 'axios'

export const fetchClan = createAsyncThunk('clans/fetchClan', async (id) => { 
  const response = await axios.get(`http://127.0.0.1:5555/clans/${id}`)
  return response.data
})

export const deleteClan = createAsyncThunk('clans/deleteClan', async (id) => {
    await axios.delete(`http://127.0.0.1:5555/clans/${id}`)
    return id
})

export const fetchClans = createAsyncThunk('clans/fetchClans', async () => { 
    const response = await axios.get('http://127.0.0.1:5555/clans')
    return response.data
  })

export const createClan = createAsyncThunk('clans/createClan', async (clanData, { dispatch }) => {
      const response = await axios.post('http://127.0.0.1:5555/clans', clanData)
      dispatch(fetchClans())
      return response.data
    })

const clanSlice = createSlice({
    name: 'clan',
    initialState: {
        clans: [],
        clan: [],
        status: 'idle',
        error: null,
    },
    reducers: {
        resetClan: (state) => {
            state.clan = []
            state.status = 'idle'
            state.error = null
        },
        resetStatus: (state) => {
            state.status = 'loading'
        }
    },
    extraReducers: (builder) => {
        builder
        .addCase(fetchClan.pending, (state) => {
            state.status = 'loading'
        })
        .addCase(fetchClan.fulfilled, (state, action) => {
            state.status = 'succeeded'
            state.clan = action.payload
        })
        .addCase(fetchClan.rejected, (state, action) => {
            state.status = 'failed'
            state.error = action.error.message
        })
        .addCase(fetchClans.pending, (state) => {
            state.status = 'loading'
        })
        .addCase(fetchClans.fulfilled, (state, action) => {
            state.status = 'succeeded'
            state.clans = action.payload
        })
        .addCase(fetchClans.rejected, (state, action) => {
            state.status = 'failed'
            state.error = action.error.message
        })
        .addCase(deleteClan.fulfilled, (state, action) => {
            state.clans = state.clans.filter(clan => clan.id !== action.payload)
        })
        .addCase(createClan.fulfilled, (state, action) => {
            state.status = 'succeeded'
            state.clans.push(action.payload)
        })
    },
    })

export const { resetClan, resetStatus } = clanSlice.actions

export default clanSlice.reducer

ClanSlice.jsx

import React, { useEffect } from "react"
import { useDispatch, useSelector } from "react-redux"
import { fetchClans, resetStatus } from "./ClanSlice"
import { Link } from "react-router-dom"
import './Clans.css'

function Clans() {
    const dispatch = useDispatch()
    const clans = useSelector((state) => state.clan.clans)
    const status = useSelector((state) => state.clan.status)
    const error = useSelector((state) => state.clan.error)

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

    useEffect(() => {
        return () => {
            dispatch(resetStatus())
        }
    }, [])

    let content

    if (status === 'loading') {
        content = <p>Loading...</p>
    } else if (status === 'succeeded') {
        content = (
            <div className="clans-wrapper">
                {clans.map((clan) => (
                    <div key={clan.id} className="clan-box">
                        <h3>
                            <Link to={`/clans/${clan.id}`}>{clan.name}</Link>
                        </h3>
                        <p>{clan.description}</p>
                        <h4>Members:</h4>
                        <div className="members-container">
                            <ul>
                                {clan.members.map((member) => (
                                    <li key={member.id}>
                                        <span className="username-text">Username:</span>{member.username} <span className="role-text">Role:</span> {member.role}
                                        <ul>
                                            {member.participations.map((participation) => (
                                                <li key={participation.id}>
                                                    <span className="event-text">Event:</span> {participation.event.event}
                                                    <br />
                                                    <span className="status-text">Status:</span> {participation.participation_status}
                                                </li>
                                            ))}
                                        </ul>
                                    </li>
                                ))}
                            </ul>
                        </div>
                        <h4>Events:</h4>
                        <div className="events-container">
                            <ul>
                                {clan.events.map((event) => (
                                    <li key={event.id}>
                                        <Link to={`/events/${event.id}`}>{event.event}</Link> - {event.date} - {event.location} - {event.details}
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>
                ))}
            </div>
        )
    } else if (status === 'failed') {
        content = <p>{error}</p>
    }

    return (
        <div className="container">
            <h2>Welcome to the Clans Page</h2>
            {content}
        </div>
    )
}

export default Clans

Introduction to Routing in Flask

Gianni Castellano — Fri, 02 Aug 2024 07:47:15 +0000

Hello readers, I am going to give a brief introduction on an important concept in Flask, routing. It is used to direct incoming HTTP requests to the relevant parts of your application. Flask is a flexible and easy to use web framework designed to support the development of web applications. I will be using examples from my most recent Oldschool RuneScape Quest tracker application. There are four different methods used when creating your routes: GET, POST, PATCH/PUT, DELETE. The GET method will retrieve/view data from your API. POST will allow you to submit data via forms. PUT/PATCH allows you to update existing data. Lastly, DELETE, allows you to delete data.

This is done using the decorator @app.route followed by "/(specific route)", methods=["method"].

@app.route('/players', methods=["GET"])
def players_route():
    players = []
    for player in Player.query.all():
        player_dict = {
            "level": player.level,
            "id": player.id,
            "name": player.name,
        }
        players.append(player_dict)

    response = make_response(
        players,
        200,
        {"Content-Type": "application/json"}
    )

    return response

As you can see at the top of this code we have the decorator followed by the route and the method we want to use on it. For this example we want to GET/Read/View the data from my players table in my API.

You might now be wondering what all the code under the decorator does. Well lets break it down! Our decorator tells flask to call the function "def players_route()" whenever a GET request is made the /players URL.

"players = []" is an empty list to store our player data. Next, we use a for loop to fetch all the players by using Player.query.all(). We then create a dictionary inside to loop in order to store our data in a JSON format. Lastly, we append the data using make_response to convert the player list to a JSON response. The 200 lets us know if the request was successful or not.

I hope you enjoyed this short introduction on Flask routing!

Classes in Python (Introduction)

Gianni Castellano — Thu, 11 Jul 2024 21:41:40 +0000

In Python, classes are the foundation of object-oriented programming. In simple terms, they are essentially a template for creating objects with similar attributes.

Creating Classes

Class definition syntax is extremely straightforward. All you need is the keyword: class followed by the ClassName: (the class name is always in UpperCamelCase). I have provided an example below:
class Shop:
Well done you have successfully created a class! Now we will take a deeper dive into how you can use them. I will be using a class to create and store different shops throughout this blog.

Using Classes

The first step after creating your class is to use a constructer method know as the init method to initialize instance attributes that will be used when instantiating objects.

class Shop:
    def __init__(self, name, location, owner):
        self.name = name
        self.location = location
        self.owner = owner

Now whenever we create or instantiate a new store/shop object within this class it will share these attributes we initialized! Now lets create some shops:

class Shop:
    def __init__(self, name, location, owner):
        self.name = name
        self.location = location
        self.owner = owner

   #method for displaying our stores
   def display_store_info(self)
       return f"Shop: {self.name}, Location: {self.location}, Owner: {self.owner}"

#creating shop instances
first_shop = Shop("FoodMart", "Main Street", "John Smith")
second_shop = Shop("ClothingStore", "Billybob Avenue", "Billy Bob")

Now in our python shell if we type print(first_shop.display_store_info()) we will see this display:

Shop: FoodMart, Location: Main Street, Owner: John Smith

We could also do the same for the second_shop! We created a method or function in our class called display_store_info that allowed us to inject the attributes defined in our init. Now we could make limitless shop objects that include the name, location, and owner as a reusable template.

This is just the beginning when it comes to classes. The possibilities and reusability is incredible when it comes to using classes in Python. I would love to go into more detail in a future blog post but this is just a small little intro.

A Guide to Better Understand Props in React.js!

Gianni Castellano — Thu, 20 Jun 2024 21:21:31 +0000

Props are essential in any React.js application as they simplify the flow of data! They allow you to pass data from parent to child, thus making your code more dynamic as well as reusable.

What are they?

As mentioned briefly in the intro, props, is how data is passed from one component to another. It is crucial to understand that they are uni-directional, meaning they could only be passed down from a parent component to a child component. They *cannot * be passed from sibling to sibling.

Here is a basic example:

function ParentComponent() {
  const data = "Hello from Parent!";
  return <ChildComponent greeting={data} />;
}

function ChildComponent(props) {
  return <p>{props.greeting}</p>;
}

These functions are two different components in an React app. The parent component has data that the other component cant access without it being passed down. the props parameter allows the child component have access to that data. But what if you had another component that wanted to use that data? Simple! You pass it down to that component as well!.

You might be wondering, "What else can I do with props?" and the answer to that is a lot. You can even pass down functions as props which allows child components to communicate with parent components by invoking the passed down functions.

Here is an example from my personal project I did this week:

function App() {
  const [characters, setCharacters] = useState([]);

  useEffect(() => {
    fetch(API)
      .then(resp => resp.json())
      .then(data => setCharacters(data))   
  }, [])

  function addCharacter(character) {
    fetch(API, {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json', 
      },
      body: JSON.stringify(character)
  })
  .then(response => response.json())
  .then(json => setCharacters([...characters, json]))}

  return (
     <Router>
      <div className="container">
        <Header />
        <Routes>
          <Route path="/" element={<CharacterPage characters={characters} />} />
          <Route path="/create" element={<CreateCharacter addCharacter={addCharacter} />} />
          <Route path="/search" element={<Search />} />
          <Route path="/search/:searchTerm" element={<Results />} />
        </Routes>
      </div>
     </Router>
  )
}

function CreateCharacter ({ addCharacter }) {
    const [characterInfo, setCharacterInfo] = useState(initialCharcterInfo)

    function handleSubmit(e) {
        e.preventDefault()

        addCharacter(characterInfo)
        setCharacterInfo(initialCharcterInfo)}

    function handleChange(e) {
        const key = e.target.name
        const newCharacterInfo = {
            ...characterInfo,
            [key]: e.target.value
        }
        setCharacterInfo(newCharacterInfo)}

    return (
        <div className="form-container">
            <form onSubmit={handleSubmit}>
                <input type="text" name="fullName" placeholder="Enter Full Name" value={characterInfo.fullName} onChange={handleChange}/>
                <input type="text" name="title" placeholder="Enter Title" value={characterInfo.title} onChange={handleChange}/>
                <select name="family" value={characterInfo.family} onChange={handleChange}>
                    <option value="House Stark">House Stark</option>
                    <option value="House Lannister">House Lannister</option>
                    <option value="House Baratheon">House Baratheon</option>
                    <option value="House Greyjoy">House Greyjoy</option>
                    <option value="House Tyrell">House Tyrell</option>
                    <option value="House Bolton">House Bolton</option>
                    <option value="Free Folk">Free Folk</option>
                    <option value="House Targaryen">House Targaryen</option>
                    <option value="House Mormont">House Mormont</option>
                    <option value="misc">misc</option>
                </select>
                <input type="text" name="imageUrl" placeholder="Enter Image URL" value={characterInfo.imageUrl} onChange={handleChange}/>
                <input type="text" name="bio" placeholder="Enter Bio" value={characterInfo.bio} onChange={handleChange}/>
                <button type="submit" className="character-submit">Create Character</button>
            </form>
        </div>
    )}
export default CreateCharacter;

As you can see the function addCharacter that was used in order to post data to my db.json file was passed down from my App.jsx (parent) component to my CreateCharacter.jsx (child) via some {} curly brackets. And I wanted to use this again elsewhere in another child component I can! That's the beauty of Props in React.js.

Hoped you enjoyed my beginner guide for Props in React.js!

Keydown Event Listener and Focus

Gianni Castellano — Thu, 30 May 2024 20:24:17 +0000

Hello readers! Welcome to my first blog where I will be discussing the issues and resolution I had with the "Keydown" event listener in JavaScript. When trying to implement my last event listener I struggled for an hour trying to understand why it was not working although the logic was all there. Here is the original HTML, JavaScript, and CSS for my code:
HTML

<img src="https://pbs.twimg.com/profile_images/1364220282790109188/uT0fQV56_400x400.jpg" alt="blue party hat" id="easterEgg" tabindex="0">
    <div>

JavaScript

const easterEggImage = document.getElementById('easterEgg') 

easterEggImage.addEventListener("keydown", handleKeyDown);

function handleKeyDown(event) {
  if (event.key.toLowerCase() === "h") {
    easterEggImage.style.display = "block";
  }
}

CSS

#easterEgg {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0px;
    margin-left: 5%;
    max-width: 90%;
}

The idea of this was to make an image appear whenever the user pressed the "h" key. Unfortunately it was not working and I could not understand why. After doing research I became more familiar with the concepts of "Event Delegation" and "direct event attachment". When I was using the descendant element easterEggImage I was only giving instruction for to apply the event to that element only. This is not what I intended so in order to fix this I attached the addEventListener to the document instead. Here is the working code below:

document.addEventListener("keydown", handleKeyDown);

Now my keydown event will trigger anywhere in the document! So after my hour long struggle I was able to get my image to appear with this function.