DEV Community: mthomas7503

A post about progress

mthomas7503 — Fri, 17 Mar 2023 23:46:54 +0000

In my journey to becoming a full-stack developer I have finally reached the point where I am doing some back-end work using Ruby and it is actually quite fun in it's own way.

Using Ruby and React, I was able to create a web application that talks about a game from one of my favorite video game series: Final Fantasy 6.

The web application's design and functionality are pretty simple actually. The idea is that you can take a peak into the type of monsters you can encounter in 3 zones and you can both add to those zones or even update the information of a specific monster in a zone. Nothing incredibly crazy.

This is all accomplished by using Activerecord and Sinatra to handle some key functions.

From the Zones page, you can see the listed Zones and the monsters that exist within them. The monsters each have a small button next to them which allows you to remove the monster not only from the view side, but also from the model side. Here is a snippet of the code:

const zoneMonsters = monsterList.filter(monster => monster.zone_id === area.id)

    return(
            <div id={area.id}>
                <h2><em>{area.name}</em></h2>
                <p>Region: {area.region}</p>
                <p>{area.info}</p>
                 <h3><u>Monsters</u></h3>
                <ul id='monsters'>
                    <li> {zoneMonsters.map((monster,index) => {return (<Monsters key={index} monster={monster} handleDelete={handleDelete}/>)})}</li>
                </ul>
            </div>
    )

And for each monster the code looks like this:

    return(
        <div>
            <p>{monster.name} <button class="deleteButton" id={monster.id} onClick={handleDelete}>remove</button></p>
            <p>{monster.info}</p>
        </div>

In another section of the application, you can update the creature information and that looks like this:

        <div id='inputpage'>
            Add a new monster!
            <form onSubmit={handleSubmit} id='newform'>
                <label>
                    Name:
                    <input type="text" value={name} onChange={handleNameAdd}/>
                </label>
               <label>
                    Zone:
                    <input type="text" value={zone} onChange={handleZoneAdd}/>
               </label>
               <label>
                    Info:
                    <input type="text" value={info} onChange={handleInfoAdd}/>
               </label>
            <button type="submit"> Add Monster</button>
            </form>
            Or update an existing one
            <form onSubmit={handleUpdateSubmit} id="updateform">
                <label>
                    Name:
                    <input type="text" value={nameUpdate} onChange={handleNameUpdate}/>
                </label>
                <label>
                    Info:
                    <input type="text" value={infoUpdate} onChange={handleInfoUpdate}/>
                </label>
                <button type="submit">Update Monster</button>
            </form>
        </div>

The code could do with a code smell of course, but that will be once I have an MVP to provide for my project.

These are the three pieces of code that communicate with my Ruby-based backend.

Let's start with Monsters. When a user clicks the remove button, the monster's id gets passed to the fetch which contains the delete endpoint for my API, /monsters/:id,
and it will then send to the back-end a request to the controller to delete the specific monster.

The code for that on my backend looks like this:

  delete "/monsters/:id" do
    deleting_monster = Monster.find(params[:id])
    deleting_monster.destroy
    monsters = Monster.all
    monsters.to_json
  end

To make sure there won't be any hiccups and that it is a smooth deletion, I stored the record in a local variable, used the destroy method to delete the method from the database and then gathered all the monsters again and put them in a neat JSON to serve as a response to the view so that state can be updated and the user can see it instantly.

Following that, I added an end point for the update section which is different from the endpoint for deleting, but still keeps it simple for anyone else who would use the API. The endpoint to update, or patch, is just /monsters. This is both because I am focusing on make an MVP and because the code to write out how to update all of it would require quite a few additional statement that might slow down my application.

This is what it looks like:

patch "/monsters" do
    updating_monster = Monster.find_by(name: params[:name])
    updating_monster.update(:info => params[:info])
    monster = Monster.all
    monster.to_json
  end

When updating the monster, it takes from params the name of the monster, finds it, and then allows the user to update the info. I plan to flush out the ability to update the name and the zone later, but not the name as I don't want the user just putting ANYTHING in there.

All in all, my application looks a little something like this:

The zones part of my web application also pulls from my own database of three zones. The reason for this because the world of final fantasy 6 is so expansive that three zones is enough as the user could easily find dozens of monsters in each zone alone.

To get the zones, there is an useEffect with fetch done to the endpoint /zones which gathers all zones currently in the database for the response, then converts it to JSON for the view to use. The backend for zones look like this:

get "/zones" do
    zones = Zone.all
    zones.to_json
  end

Which is sufficient for a simple page like zones.

My intention however is to allow the user to eventually get a specific zone from amongst many using the .find method on the Zone model. However that will be done at a later date.

Learning Ruby is by far one of the most interesting yet simple lessons by far. This is mainly because of the fact it's so declarative at its core.

By making everything an object that is an instance of a class which has a super class of its own, makes it easy to use the instance because the methods are already written for you and those methods themselves are very intuitive. Their names alone explain their methods.

I intend to build out more functionality by allowing the addition of zones as well as an update in their information which will be very fun indeed.

Happy coding everyone!

use and Effect!

mthomas7503 — Thu, 06 Oct 2022 01:50:46 +0000

Good day if you are reading this. It has been a while since my last post and I am still in the middle of my Software Engineering program with Flatiron School. I have been working with the React library so far.

Between the use of JSX to code in what looks to be an HTML/JS hybrid and React's declarative nature, this has been by far one of my favorite parts of the program.

However, something I struggled with and had to troubleshoot multiple times for this most recent project is state and CRUD. The project that I happen to be working on is just a simple search engine that fetches to an external API for the search and, by selecting the card image, sends a POST or DELETE request to my local API. It's very simple but very effective and pretty user-friendly.

The issue I kept running into in the beginning is the asynchronous nature of all of these parts working together. Because state is asynchronous, when I set my state to an empty array to help my iteration methods recognize the array and continue running the code, like so:

const [userChoice, setUserChoice] = useState([])"

When I finally went to update state, state would update with the empty array as the first item to go into my API and then proceed to add it without adding the item I wanted to add. I would have to double-click in order to add the item to the list in the other component. Furthermore, because state was reset to the blank array whenever the code was re-rendered, this would be a frequent issue. Couple that this useEffect that ends in setting state:

useEffect (() => {fetch(www.myapi.com/v1/cards)
.then(...)...

and I just ended up with an API FULL of blank arrays and the needed data sprinkled throughout. I started troubleshooting the problem by console.log()'ing the values of my state variables at key points, like the final .then() or after the useEffect was run. However, none of that helped me clear up the issues. But in troubleshooting. I did find some order as to how state is updated. That plus some help from my mentor, helped me solve the issue.

I began to notice that if I had state set first, but then tried to change it through the setState function, the setState function run, making sure to set state in React first, then the useEffect would run last after everything rendered and run the fetch request to load everything from the requested API or delete what was needed. The key problem was that while state runs first, it still runs asynchronously to everything so the empty array was set to state first and when the event listener was run, it would run based on the current state first, pulling the empty array, then state would be changed, causing a re-render, the useEffect to run, and then the empty array to be set for state again. Recognizing that helped me see how all the arrays kept getting put in there.

The next step, which was to get rid of all the arrays, wasn't as easy. I still hadn't fully seen the issue until I thought about it from a different angle.

I figured rather than pulling the ENTIRE API selection from the external API, I would instead store the information I need to display on the page in the tags and pull it from there based on event information like so:

   <ul key={cardData.id}>
                <li>
                    <img id={cardData.id} onClick={handleRemoveCard} alt={`${cardData.cardName}`} src={`${cardData.cardImg}`} />
                    <p>Set: {cardData.set}</p>
                </li>
            </ul>

By doing that and using related tags, I was able to both use that to make a RESTful API of my own as well as lower the amount of fetches to an external API. For this bit of code though, I did call from the state function from within the component itself rather than the nearest parent. Testing using it in either the child or the parent did not change the outcome of the onClick event.

In the end, this worked out better than I could have hoped and it made my page run a bit smoother. I did have to add some interesting conditionals to make sure that my CSS loaded properly, like:

className={userChoices.length < 3  ? "decklistholder" : "decklist"}

However, that is a story for a different time.

I feel like I still have a lot to learn in React, but solving that issue was a bit of a first step because knowing something is asynchronous and knowing WHEN exactly it will run are two different things. However, I think I am on the right track.

THIS is my first, subject related, post

mthomas7503 — Wed, 04 May 2022 21:51:09 +0000

I have just started coding pretty recently. I am learning how to code via a bootcamp, Flatiron Schools, and trying to juggle that with work.

So far, I have enjoyed every aspect of coding from learning strings right down to Big O and context. Personally, I think context is my favorite subject so far as the variable this and the overall concept is just incredibly interesting to me.

The way I understand it, as a newbie, is that the context is something created at the START of a program or invocation of a function and this represents an object that is passed onto a function the moment the function context, the memory allocated when the function is invoked, is created. However, the object passed is dependant upon where the function is invoked. If it's invoked globally, it is the global object or browser window, for JS in HTML, that is the object. If it is within an actually object, it is the ENTIRE OBJECT ITSELF. Suffice to say, this can be complicated, but it can also be helpful because you can use it to find out the properties and methods of an object if you call the variable or you can pass it to a function so that the it take the values from another object and work with them. I had a couple labs with this one and struggled particularly with bind() simply because it's built in return is a function that needs to be invoked rather than the invocation of the function it is to which it is attached.

For example:

const sweetSalad = {}

function createSalad() { this.vegetable = "lettuce";
this.fruit = "mandarin oranges"
this.dressing = "balsamic vinegarette"}

If I call this function, this will have the value of the global object of either JS or the window, but ultimately it won't add anything to sweetSalad. Instead it will add, or try to add, it to the global context.

from the browser: window.fruit is now mandarin oranges

Using bind I could explicitly set it like so:

createSalad.bind(sweetSalad)

However, this will just return a functions that needs to be invoked.

The fun part for me comes in tying it together and using context and explicitly setting it to put all the pieces together and filling that object.

So,

const SweetSalad() = {};

function createSalad() { this.vegetable = "lettuce";
this.fruit = "mandarin oranges"
this.dressing = "balsamic vinaigrette"};

const tastySalad = createSalad.bind(sweetSalad);

tastySalad(); (invoking to create the object)

sweetSalad
//=> expect 
{vegetable: 'lettuce', 
fruit: 'mandarin oranges', 
dressing: 'balsamic vinegarette'}

Of course, there is always the easier way of just using createSalad() as a constructor function and taking out the working of making a new variable like so:

const newSalad = new createSalad()
However the long way can also be fun sometimes just to help understand everything.

Regardless, I found myself using this quite often simply because it was better to use when constructing an object because constructor functions are fun, I.e.

const mtgLegendaries = new Color()

and because it just gives me more insight into what JS is doing under the hood. Will I use it more often as I learn code? I don't doubt. As such I will be looking into how to use this a bit more as time goes on because quite frankly, I am happy coding!

Combination of hobby and career changing.

mthomas7503 — Mon, 28 Feb 2022 21:37:13 +0000

I have only recently started coding and I have been looking into just how to practice more when I get the chance. With this in mind, I decided to just write out a simple bit of code that produces a life total message whenever you fall below or at a certain percentage in this game I play called Magic The Gathering. To do this, I decided to incorporate a few of the things I learned in my first phase of the program I'm working with: if...else statements, and just a basic function. I added in the built-in method of .random() just to help see if additional messages would come up.

I wanted to keep it relatively simple given that there are thousands of cards and so many different creatures. So I started by having these variables assigned from the start.

`const damage = (Math.random() * 10) + 10;

const startingLifeTotal = 40

const postCombatLifeTotal = startingLifeTotal - damage`

This way we know how starting total is 40 and our life total after damage, postCombatLifeTotal, is equal to the starting minus the damage.

The next part is where I wanted to get some practice with functions and if...else if statements.

function lifeMessage(cLife) {let message if (cLife === 0) {message = 'You have died'} else if(cLife < startingLifeTotal * .2) {message = 'Engaging Emergency Protocols'} else if (cLife <= startingLifeTotal * .5) {message =${cLife} is pretty bad, but you can come back from it!... Maybe?} else if (cLife <= startingLifeTotal * .75) {message = 'Tis just a flesh wound!'} return message}

I ran a couple of tests and it works, but the issue here is given that the damage only falls into a specific range, it ends up that postCombatLifeTotal never ends up going below 50%. This is the one issue I have run into. I am of course going to work on this and fix this as time goes on. I could use a fetch() to get the power of a specific creature card or have the number be a user input instead. I will of course keep everyone posted when I do that. Until later everyone! Happy coding!