DEV Community: Colin McDermott

Git Submodules

Colin McDermott — Tue, 30 Mar 2021 14:48:42 +0000

This week I have been learning about Git Submodules.
Submodules is a tool built into git. It's designed to make working with repos within repos a lot easier. Why would you be working with repos within repos? Well, let's talk about that.

Repo-ception

Why would you use a repo inside another repo?
There are several reasons you might want to do this. For example, if you have your own component library you use across multiple projects, and you want to work on both the component library and the app itself side by side. Or on a larger project containing multiple pieces worked on by multiple teams, when you don't want code from the various sections of the project interfering with one another during the development process.

Setting up your repo

So to give a simplified example of this set up we are going to have a parent repo, and 2 child repos, childA and childB.
First off, we need to clone the parent repo. To add the two child repos as submodules of parent we are going to go into the parent and run

git add submodule <repo-address>

for each of the children, replacing <repo-address> with the address for the repo.

Once you've done this, you'll notice a new file has been created: .gitmodules Inside .gitmodules you will notice entries for both childA and childB. Something like this:

[submodule "childA"]
    path = childA
    url = https://github.com/path/to/childA
[submodule "childB"]
    path = childB
    url = https://github.com/path/to/childB

Running git status, you should see an entry for childA and childB being created. We can now commit and push these changes.

Congratulations! You have now set up childA and childB as submodules of your parent repo.

Using your submodules

Cloning

Now that you have the submodules set up, next time you clone parent you will see 2 empty directories, 1 for each of the children. Here is where you will start to see the benefits of using submodules.

Before using submodules, to clone any child repos, you needed to go through and run a git clone for each repo. In this example that would mean only 2 commands, but in a large project where there could be 5 or 6 child repos, it could mean quite a few commands. But with submodules, all we need to do is run one single command:

git submodule update --init

This will then go and clone all the submodule repos into their respective directories.

Installing

Now we have all our code checked out, we need to install it. Working with multiple repos this can be a pain, and very time-consuming, moving in and out of each of the repos to run npm install.

Submodules has a solution! As part of the submodules suite of functionality, git contains a foreach command. To use it, we need to pass the command we want to run to it, in this case npm install, and it will then run that command in each of the submodules.

git submodule foreach 'npm install'

In summary, we're going to replace all of those commands, moving in and out of repos, and using npm install in each one, with a single command executed in the parent.

foreach

Let's take a second now and talk about foreach. This is an incredibly useful little command as you can see.

Want to run npm install in each child?

git submodule foreach 'npm install'

Want to switch each child to the dev branch and pull the latest code?

git submodule foreach 'git checkout dev && git pull'

Want to stash all changes?

git submodule foreach 'git add . && git stash'

I'm sure you get the idea. Anything you want to do in every child repo can be done with 1 command.

Summary

Going back to our example, we now have a fully working version of our project, including all sub-repos, and all we needed to do is the following:

git clone https://github.com/path/to/parent
cd parent
git submodule update --init
npm install
git submodule foreach 'npm install'
npm start

This was just a simple example showcasing what git submodules can do. There are plenty more useful features that I would encourage you to check out. Git themselves have some great documentation on submodules available here

Faking Disabled Dropdowns

Colin McDermott — Wed, 27 Jan 2021 15:57:29 +0000

Creative problem solving is key in a corporate environment

Working in the corporate world things are not as easy as when you're working on your own little project in your spare time. This is not news to anyone. Sooner or later we all end up in a situation where the simple solution to a problem is not workable due to the large and complex nature of these companies. Whether its being unable to update a package, working with legacy code, or having to use internal tools or component libraries; There are always challenges working for a big company that you won't find anywhere else. That is when you have to get creative with your problem solving.

Recently I ran into one of these issues myself, working for a big company, having to use an internally built component library that was sorely lacking in features. In this case, I was using a dropdown component built using <div> and <ul> tags, without an input element. This meant that, obviously, the component will be missing out on getting certain features for free that come as part of the input element. This included the disabled feature.

For those unaware, a html input can take a disabled prop:

A Boolean attribute which, if present, indicates that the user should not be able to interact with the input.

We were using these dropdowns to allow users to filter data on the page. My task was to include a switch on the page, which would disable the dropdowns, preventing the user from changing the filters until the switch was turned off again. A simple problem in a different place. Since the component we were using did not have use of the input element's built in disabled function, and the developer who built it, had not replicated it, there was no way to disable these dropdowns.

I did not have access to the component library to make a change and try to add this feature in, nor did I have time to try to find who is in charge of this library and ask them to change it. I needed to get creative. So I faked it.

Faking it

Let's start off with the filters ready and working, and the new switch added next to them.

At this point the dropdowns work, and the switch does nothing. Since we can't just pass a disabled prop to the component and watch it work, we need a new solution. I decided that if I can't stop the dropdowns from working, I could stop the user from clicking them. So I decided to add a blocker between the user and component.

I added a <span> that will be added to the dropdown container whenever the switch is turned on. The <span> fills the container and sits on top of the component, so the user is clicking the <span> and not the actual component.

.dropdown-disabled {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

I then added a colour to the span, and made it transparent. This combined with changing the cursor to cursor: not-allowed makes it look the dropdowns are greyed out, and unusable. And voilá, the user cannot use the dropdowns, so for all intents and purposes, they are now disabled, using little more than some creative problem solving and some css.

  box-shadow: inset 100px 100px rgba(0, 0, 0, 0.25);
  cursor: not-allowed;

How would you solve this issue? Have you any similar stories? Let me know in the comments, I'd love to hear them!

Drag & Drop re-ordering using HTML and React

Colin McDermott — Tue, 13 Oct 2020 17:05:09 +0000

Working with javascript these days, you will often run into a scenario where you want to render a list of items. But what happens when you want your user to be able to re-order those items on the fly? Well here I'm going to show you how to use HTML5's Drag and Drop (DnD) API, with React to easily let your users move things around 'til their heart's content.

First, we're going to need a list of things to render!

We'll start with a simple React App that renders 3 colourful boxes on the screen.

App.js



import React, { useState } from "react";
import Box from "./Box";
import "./styles.css";

const App = () => {
  const [boxes, setBoxes] = useState([
    {
      id: "Box-1",
      color: "red",
      order: 1
    },
    {
      id: "Box-2",
      color: "green",
      order: 2
    },
    {
      id: "Box-3",
      color: "blue",
      order: 3
    }
  ]);

  return (
    <div className="App">
      {boxes
        .sort((a, b) => a.order - b.order)
        .map((box) => (
          <Box
            key={box.id}
            boxColor={box.color}
            boxNumber={box.id}
          />
        ))}
    </div>
  );
}

export default App;

Box.js



import React from "react";

const Box = ({ boxColor, boxNumber }) => {
  return (
    <div
      id={boxNumber}
      style={{
        backgroundColor: boxColor,
        border: "1px solid",
        borderColor: boxColor,
        borderRadius: "5px",
        color: "#FFF",
        width: "30%",
        height: "100px"
      }}
    >
      {boxNumber}
    </div>
  );
};

export default Box;

This should render your boxes like the ones in the picture above. But they don't do anything yet!

Note the way the boxes are sorted to be rendered based on the order attribute in their objects

Next step is going to be introducing the DnD API into our boxes.

To do this, we're going to go back into Box.js and add some attributes to the <div>. We're going to change it to:



const Box = ({ boxColor, boxNumber, handleDrag, handleDrop }) => {
  return (
    <div
      draggable={true}
      id={boxNumber}
      onDragOver={(ev) => ev.preventDefault()}
      onDragStart={handleDrag}
      onDrop={handleDrop}
      style={{
        backgroundColor: boxColor,
        border: "1px solid",
        borderColor: boxColor,
        borderRadius: "5px",
        color: "#FFF",
        width: "30%",
        height: "100px"
      }}
    >
      {boxNumber}
    </div>
  );
};

First thing to note is that we are now taking in two extra props, handleDrag and handleDrop. These are just functions we are going to pass down from App.js to handle what happens when you drag and drop the box respectively.

We've also added some attributes to the <div>.
I'm not going to do into too much detail about what each of these attributes does, but briefly:

draggable sets whether the element can be dragged or not;
onDragStart is an event listener triggered when you start dragging the element;
onDrop is an event listener triggered when you drop the element;
onDragOver is an event listener triggered when you drag the element over something else;

We're going to set onDragStart to the handleDrag prop we've just passed in, and onDrop to the handleDrop prop.

For onDragOver we're going to set a function to prevent the browser's default action, which is usually to attempt to navigate to a link or something like that.

Now for App.js.

Here we're going to add in the handleDrag and handleDrop functions, and then we're going to pass them down into the Box component.

So we'll take these one at a time, starting with handleDrag:



  const [dragId, setDragId] = useState();

  const handleDrag = (ev) => {
    setDragId(ev.currentTarget.id);
  };

We've added a new state variable called dragId to keep track of which box it is we're currently dragging. Inside the handleDrag function itself all we're doing is getting the box id from the event and setting it to state.

handleDrop is the more complicated of the two functions, and this is where we will handle all of our 'switching' code.



  const handleDrop = (ev) => {
    const dragBox = boxes.find((box) => box.id === dragId);
    const dropBox = boxes.find((box) => box.id === ev.currentTarget.id);

    const dragBoxOrder = dragBox.order;
    const dropBoxOrder = dropBox.order;

    const newBoxState = boxes.map((box) => {
      if (box.id === dragId) {
        box.order = dropBoxOrder;
      }
      if (box.id === ev.currentTarget.id) {
        box.order = dragBoxOrder;
      }
      return box;
    });

    setBoxes(newBoxState);
  };

Here, we first want to identify which box is being dragged and which box it has been dropped on. We do this using the array find() method and comparing each box id with the dragId (that we set in handleDrag) for the box being dragged, and with the id of the element emitting the event for the box being dropped on.

Because we're going to change the order of the boxes, we don't want the original order of our two boxes to be changed, so we're going to take note of that in the dragBoxOrder and dropBoxOrder variables.

Finally, we're going to the actual switch.



    const newBoxState = boxes.map((box) => {
      if (box.id === dragId) {
        box.order = dropBoxOrder;
      }
      if (box.id === ev.currentTarget.id) {
        box.order = dragBoxOrder;
      }
      return box;
    });

We're going to use the array map() function to allow us to rearrange the boxes order and return as a new array. Inside the map() function we'll check if the current box's id is equal to the dragId. If it is, set its order to be the dropBoxOrder. If not, check if it is equal to the id of the box being dropped on, and if that is true set its order to be the dragBoxOrder.

So when the map() function has stopped running we should have a new array in the newBoxState variable where the order variable for the two boxes involved has been swapped. We can then set this new array of box objects to state, and trigger the re-render.

To see the complete code, or play with the completed demo, check out this codesandbox:
https://codesandbox.io/s/react-drag-drop-reorder-mxt4t?fontsize=14&hidenavigation=1&theme=dark