How to Survive Phase 2 of Flatiron School Software Engineering

As an aspiring web developer, my journey with the Flatiron School has been both challenging and fulfilling. In Phase 1 of the program, I learned JavaScript, which was a difficult but necessary foundation for what was to come in Phase 2.

In Phase 2, we delved into ReactJS, a popular JavaScript library for building user interfaces. To my surprise, learning ReactJS went much smoother than learning JavaScript in Phase 1. Perhaps it was because I had a better grasp of the basics, or maybe it was because the Flatiron instructors had honed their teaching techniques. Either way, I was excited to dive deeper into the world of web development.

During Phase 2, I particularly enjoyed learning about the most efficient ways to store code to manage it. This involved breaking up different JavaScript files and utilizing components in React. It was fascinating to see how everything could be organized and streamlined to make it easier to read and maintain.

However, even with these newfound skills, I still had some challenges to overcome. In the first challenge, I struggled to weave everything together. While I had picked up the concepts, I found it difficult to apply them in a practical setting. As a result, I had to retake the challenge.

But here's the thing: I thrived on the code challenge retake. I took what I had learned and applied it with renewed vigor. And it paid off. I was particularly proud of my code for the form because I had to do some troubleshooting for it. It was a small victory, but it gave me the confidence boost I needed to continue on.

An interesting issue I ran into, which I have not encountered before, came with the form component of the challenge. For the life of me, I could not get the entries of the form to appear in the transactions list without refreshing the page. It was not until the last 10 minutes of the challenge that I solved the problem. Below is a list of the steps I took to solve it, and the code that was produced:

• Adding a new state variable latestTransactionId that initially has a value of 0
• Updating the useEffect that fetches the transactions to also set the latestTransactionId state variable to the ID of the latest transaction
• Updating the addTransaction function to also set the latestTransactionId state variable to the ID of the newly added transaction
• Adding a new useEffect that fetches transactions whenever the latestTransactionId state variable changes
• In the new useEffect, checking that latestTransactionId is greater than 0 before fetching transactions, to avoid fetching transactions unnecessarily on the initial render
• In the new useEffect, fetching transactions from the API using the _start parameter to only get transactions with an ID greater than latestTransactionId, and updating the state with any new transactions fetched

import React, { useState, useEffect } from "react";
import TransactionsList from "./TransactionsList";
import Search from "./Search";
import AddTransactionForm from "./AddTransactionForm";

function AccountContainer() {
  const [transactions, setTransactions] = useState([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [latestTransactionId, setLatestTransactionId] = useState(0);

  useEffect(() => {
    fetch("http://localhost:8001/transactions")
      .then((response) => response.json())
      .then((data) => {
        setTransactions(data);
        setLatestTransactionId(data[data.length - 1].id);
      });
  }, []);

  const addTransaction = (formData) => {
    fetch("http://localhost:8001/transactions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
    })
      .then((response) => response.json())
      .then((data) => {
        setTransactions([...transactions, data]);
        setLatestTransactionId(data.id);
      });
  };

  useEffect(() => {
    if (latestTransactionId > 0) {
      fetch(`http://localhost:8001/transactions?_start=${latestTransactionId}`)
        .then((response) => response.json())
        .then((data) => {
          if (data.length > 0) {
            setTransactions([...transactions, ...data]);
            setLatestTransactionId(data[data.length - 1].id);
          }
        });
    }
  }, [latestTransactionId]);

  const handleSearch = (searchTerm) => {
    setSearchTerm(searchTerm);
  };

  const filteredTransactions = transactions.filter((transaction) =>
    transaction.description.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <Search handleSearch={handleSearch} />
      <AddTransactionForm addTransaction={addTransaction} />
      <TransactionsList transactions={filteredTransactions} />
    </div>
  );
}

export default AccountContainer;

import React, { useState } from "react";

function AddTransactionForm({ addTransaction }) {
  const [formData, setFormData] = useState({
    date: "",
    description: "",
    category: "",
    amount: "",
  });

  const handleInputChange = (event) => {
    setFormData({ ...formData, [event.target.name]: event.target.value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const { date, description, category, amount } = formData;
    const newTransaction = { date, description, category, amount: Number(amount) };
    addTransaction(newTransaction);
    setFormData({
      date: "",
      description: "",
      category: "",
      amount: "",
    });
  };

  return (
    <div className="ui segment">
      <form className="ui form" onSubmit={handleSubmit}>
        <div className="inline fields">
          <input
            type="date"
            name="date"
            value={formData.date}
            onChange={handleInputChange}
          />
          <input
            type="text"
            name="description"
            placeholder="Description"
            value={formData.description}
            onChange={handleInputChange}
          />
          <input
            type="text"
            name="category"
            placeholder="Category"
            value={formData.category}
            onChange={handleInputChange}
          />
          <input
            type="number"
            name="amount"
            placeholder="Amount"
            step="0.01"
            value={formData.amount}
            onChange={handleInputChange}
          />
        </div>
        <button className="ui button" type="submit">
          Add Transaction
        </button>
      </form>
    </div>
  );
}

export default AddTransactionForm;

All in all, Phase 2 of the Flatiron course has been a valuable learning experience for me. I'm excited to see what's next in store and can't wait to continue honing my skills as a web developer.