DEV Community: milesbd

Squash and Merge commits within a branch

milesbd — Wed, 30 Mar 2022 22:32:49 +0000

Introduction

So I found myself in a situation where I was unable to merge to main because I had multiple commits within a branch that were not verified (new laptop, forgot to set up gpg commit signing. I was faced with the problem - how do I gather all the unsigned commits into one verified commit?

This is one example use case, however you may want to squash and merge commits within a branch because there are many "changed spelling" or "fixed indentation" commits that are minor changes where retaining a history adds noise to the git commit history.

Steps

Step 1 - Use VS Code!

Why? well lets face it, vim is tough to use!

Stemming from this stack overflow post, ensure you can use the code command in the command line.
Once that's verified, simply run git config --global core.editor "code --wait" to set VS Code as the default editor for git commands.

Step 2 - Git Rebase

This is where it gets both scary and where the stuff is done.

Navigate to the repository in question, and open a terminal instance within the root.
Run git log to see a list of commits (this will still open in vim, hit :q to exit)
Run git rebase -i HEAD~3 in the command line (where the number 3 represents the number of previous commits to look at on your branch).
A new file tab will open in VS Code

Step 3 - Choose your Options

Here you'll be choosing what you want to do with all your previous commits.

Go through the list, choosing the actions as needed (more info available in github docs )
- pick to include it in the rebase (can change the order depending on
- drop to exclude it from the rebase (leave it alone)
- squash to squash/merge the commit
- edit to change/modify the commit
- reword to change the commit message and pick it
- fixup to discard the commit message and squash it
Close the file or hit cmd+a (if using a mac)

As an example, here's what I was choosing to do:

Step 4 - Perform follow-up tasks

Depending on the actions chosen in the previous step there will be some supplementary file tabs that will open.

Follow the steps in each window, closing them as you make changes.

For Example, this is my prompt when I chose to edit a previous commit during rebase.

Step 5 - Pull/Push

This is the last step! Once all the actions have been completed, you'll be prompted to pull from origin, and then push any changes you've made. This can be done via command line, or in the Github desktop client.

Final words

Using rebase can help a resolve a great deal of issues, as well as clean up a commit history. It is "rewriting history" so to speak, so as Uncle Ben in Spiderman says: "with great power comes great responsibility".

I hope that this has been a helpful article! Thanks for reading!

Updating Nested Fields in Firestore with dot notation

milesbd — Mon, 26 Jul 2021 07:36:29 +0000

The context

While developing an extended questionnaire in a React + Rirebase (Firestore as the db) project, I found myself facing looking for a way to write to a field nested in object.

These extended questions were on a dashboard-style page, that had a listener to the user's profile so that it could receive realtime updates and display their data as they modified it. As the listener was present, I was looking to do the smallest write possible, to limit the number of components re-rendering.

The question that I was looking to modify structured like this:

{
  "Questions":{
    "Q11":{
      "Paper":{
        "EF":0.2811,
        "amount":5002,
        "name":"Paper",
      },
      "Furniture":{
        "EF":0.3677,
        "amount":400,
        "name":"Furniture"
      }
    }
  }
}

Where the field to be changed was the amount field. On the page, the questions were presented as inputs, which fire the onChange event as soon as there has been a change to the field - ideal in this case but again making it all the more necessary to make writes as minimal as possible to avoid re-renders.

The initial component:

const ExtendedQuestions = (props) => {
  const { Q11 } = props;
  const [loading, setLoading] = React.useState(null);

  return (
    <React.Fragment>
      {Q11.map((question, i) => {
        const { name, EF, amount } = question;
        return (
          <input
            key={`ExtendedField_${i}`}
            inline
            label={name}
            type="number"
            name={name}
            ef={EF}
            value={amount}
            loading={name === loading}
            min={0}
            max={100000}
            step={1}
          />
        );
      })}
    </React.Fragment>
  );
};

Initial discovery

With the goal in mind of having the onChange event on the form trigger a write to the user's profile modifying their answer, I dove into the Firebase docs looking for a solution. While reading through the docs, I came across the small section on using "dot notation" to do writes to nested objects. This solution seemed ideal, however it seemed that docs required the "dot notation" to be formatted as a string. My first thought, given that my component was written simply, was that I would need to write a function for each input.

The solution

After searching for ways to dynamically set the string for the "dot notation" without finding much in the way of answers, I figured I would simply try creating the object with bracket notation, (i.e. [pathInDotNotation] and test the result.

I wrote it out my onChange function as follows:

const handleChange = (e, data) => {
    const { name, ef, value } = data;
    setLoading(name);
    firebase
      .collection("users")
      .doc(`${authUser}`)
      .update({
        [`Questions.Q11.${name}`]: {
          text: name,
          amount: Number(value),
          EF: Number(ef),
        },
      })
      .then(() => {
        setLoading(null);
      })
      .catch((error) => {
        console.error("Error updating document: ", error);
      });
  };

And wouldn't you know it, it worked!

My full component then became:

const ExtendedQuestions = (props) => {
  const { Q11 } = props;
  const [loading, setLoading] = React.useState(null);

  const handleChange = (e, data) => {
    const { name, ef, value } = data;
    setLoading(name);
    firebase
      .collection("users")
      .doc(`${authUser}`)
      .update({
        [`Questions.Q11.${name}`]: {
          text: name,
          amount: Number(value),
          EF: Number(ef),
        },
      })
      .then(() => {
        setLoading(null);
      })
      .catch((error) => {
        console.error("Error updating document: ", error);
      });
  };

  return (
    <React.Fragment>
      {Q11.map((question, i) => {
        const { name, EF, amount } = question;
        return (
          <input
            key={`ExtendedField_${i}`}
            inline
            label={name}
            type="number"
            name={name}
            ef={EF}
            value={amount}
            loading={name === loading}
            min={0}
            max={100000}
            onChange={handleChange}
            step={1}
          />
        );
      })}
    </React.Fragment>
  );
};

This was great as my component was now able to only write to the field that needed changing. Additionally, as I was using a map function to render all the questions with keys, I was able to keep re-renders to a minimum, only targeting the actual input that was changed.

Thanks for reading! I'd appreciate any feedback you may have :)