DEV Community: h8moss

I turned an old laptop into a NAS, here's what I learned.

h8moss — Thu, 26 Feb 2026 20:41:06 +0000

Introduction

About a month ago, I came across a couple of old laptops just gathering dust in my basement. I took a look at them and, while I decided they were absolutely not in conditions to run windows, I figured they were worth rescuing.
In this post I will detail my journey to turn one of them into a truly useful NAS system for me and my family members, the problems I came across, the solutions I reached, and the lessons I learned along the way.

What even is a NAS

A NAS, in it's most basic form, is just a relatively simple computer that does two things:

Stores a lot of data.
Makes that data available to the network.

So in simple terms, it's just an external HardDrive you can access from any PC as long as you are in the same network, pretty handy, no?
This may or may not sound exiting to you depending on who you are, but here is where it gets interesting:
Since a NAS is a computer, it can also run certain software that allows it to do much more than a simple HDD would, there even is specific software purpose-built with these systems in mind.

Choosing an Operating System

There are hundreds of Operating systems designed to turn a normal computer into a NAS. The most popular choice by far is a little thing called TrueNAS.
Here's why I didn't go with it:

TrueNAS is a spectacular OS, it's powerful, easy to use, and secure, but what it has in convenience, it loses in customization.
It does not really expect you to see it for what it is: A linux distro. It doesn't want you SSHing, setting ACLs, or really doing anything the web interface does not allow you to do.
TrueNAS is also designed from the ground-up with the objective of preventing data-loss, a noble objective, but one that is very outside of the scope of a 500GB, single-drive NAS experiment.
On the other hand, OpenMediaVault, or OMV, is an open source NAS operating system built on top of Debian, it has a very nice webUI, not as nice as TrueNAS, but what it lacks in polish it makes up for in transparency: Nothing is obscured from me as the admin, and if I ever need to do anything that is not possible to do from the WebUI, it encourages me to SSH into it at any time.
OMV is also designed in a way that allows it to run from a USB, which is nice, as it means I don't have to install the OS in the 500GB SSD, and instead can dedicate that to storage.

Setting everything up

After going through the installation process of OMV, which was remarkably simple, I now have a completley bare system ready to be setup.
A complete explanation of the setup process is beyond the scope of this article, but suffice it to say, it was pretty simple, if you are interested, I urge you to read OMV's documentation.

The general process was to first setup the main 500GB disk for general usage, then setup a simple file system on it, and enable a shared folder in it.
Then I created a user for each member of my family, including myself, whom I gave admin and ssh privileges.

This left me with a nice shared 500GB of storage for my entire family, and the possibility of installing the software I mentioned earlier, specifically, I installed Jellyfin for watching movies, Immich for storing important pictures and various other things.
FileBrowser was also a nice additon, as it allowed me to access the shares from a phone, it also helped my family quite a bit, as they kept forgetting how SMB shares work.

Now this is a pretty nice build already, however it does have the one issue that it is only possible to access it from my family home, which poses a problem when anybody is doing literally anything other than staying home. This setup was usable, but it wasn't solving any real problems.

Crossing the out-of-home hurdle

The hardest part of this whole build was allowing access the server from outside home. I care quite a bit about privacy and security; as such, it did not seem to me like a good idea to give the internet unrestricted access to my family's most important files.

If you ask around online, people will tell you that the perfect solution to this problem is a VPN. It allows you to access a machine, in this instance, the NAS, as if it was in the same network as you from anywhere in the world. It would be exactly what I need, except for one problem: While I am one of the users of this machine, I would not be the only one, and while I could easily figure out a VPN, could my sister? Could my mom? What about their work laptops? They already had trouble with normal SMB shares, now I wanted them to install and run a completley new program to access it? On all their devices? Forever?

Another popular idea is to simply port-forward the services, this meant that I could setup the NAS so it was accessible by visiting my public IP address, then there are services like DuckDNS that would've allowed me to map the IP into an easy-to-remember domain. This opens a whole new can-of-worms in the sense of cybersecurity. And I knew I could not trust my users (my family) to setup good passwords.

The final idea I saw actually had some merit; using a cloudflare tunnel, which would allow me the same power as port-forwarding, with the added security of going through cloudflare, which offers pretty good security. The only problem with this approach is that some services, mainly Jellyfin, Syncthing, and Immich, were not designed work through a tunnel, and they would cause problems.

The solution I found was, in hindsight, pretty obvious, I did not have to choose between any of the options, I could use them in conjunction, specifically, using a VPN for me, my devices, and some select family devices (like my sister's iPad, so she can watch Jellyfin), and also exposing FileBrowser to the internet through a cloudflare tunnel, which would allow my family members to access their files from anywhere, at any time, and without having to remember some obscure feature that they don't otherwise use.

Lessons learned

This little NAS experiment went from shitz-and-giggles to genuenly useful piece of hardware at home, now all of mine and my family's most important documents are backed up in our very own cloud.

While I learned a lot of system administration and linux during this month-long journey, my main takeaway is that not because something is scuffed, or weird, it isn't useful.

The whole thing is running on a laptop under my desk that, I assure you, is much less powerful than your run of the mill Synology NAS. But it works.
The Web UI is not as pretty as one from a store-bought NAS, but it works.
I have setup three completely redundant ways to access the files, but it works.
Sometimes I need to SSH into the machine and manually edit the ACLs, but it works.

It works so well, in fact, that after a few tweaks, I ended up almost completely ditching my laptop in favour of my tablet. But that's a story for another day.

Build an instagram clone with react, next 13 and firebase part 1: Setup

h8moss — Wed, 10 May 2023 21:38:28 +0000

Introduction

Good day everyone! Today we are gonna start working on a new tutorial series on firebase.

In this series we will use firebase and nextjs 13 to build a clone of instagram, complete with the following functionality:

Google and email sign in (with Firebase auth)
CRUD functionality for posts and comments (with Firebase firestore)
Hosting of our own images and gifs (with Firebase storage)
Simple automatic banning of undesired content (with Firebase functions)

I'll even throw in hosting in vercel (NextJs is easier to host in vercel than in firebase)

Hopefully this all sounds exiting, this first part of our project will focus on setting up firebase, and our NextJs project.

Little shameful advertising time! I actually will upload this series in my own personal website over at daniel-armenta.com. I will post parts there first, so consider checking it out and letting me know when you inevitably find bugs in my website.

Create a NextJs 13 project

To begin, let's create a new project with NextJs version 13.
To do this, run the following command inside your projects directory:

npx create-next-app@latest --ts instagram-tutorial

For this project I will be using typescript, so I added the --ts flag, but I will also share the javascript code here for you to use if you don't like typescript, so feel free to remove that flag.

Running this command will give you the following output if you haven't installed create-next-app:

Need to install the following packages:
  create-next-app@13.3.2
Ok to proceed? (y)

Go ahead and press enter and now you will be given a few options, I'll show what I set up, but if you have some different preference, feel free to change your answers.

Would you like to use ESLint with this project? ... No / Yes
Would you like to use Tailwind CSS with this project? ... No / Yes
Would you like to use src/ directory with this project? ... No / Yes
Would you like to use experimental app/ directory with this project? ... No / Yes
What import alias would you like configured? ... @/*

Warning! keep in mind that if you decide not to use the experimental app directory, your project and mine will look very different

After running this command and waiting a bit, you should see a message like the following:

Success! Created instagram-tutorial at D:\Users\h8moss\projects\instagram-tutorial

Go ahead and open the project in your favorite code editor and run npm run dev to start debugging on localhost:3000

Open localhost:3000 and you should see something like this:

Now over at our code editor, we can see our project looks like this:

The .next, .vscode and node_modules folders can be ignored. We can also ignore .gitignore, README.md, next.env.d.ts, package.json and package-lock.json

The public folder includes static files for our app, like the logo or a robots.txt file if we wanted.
The next.config.js file contains configuration for our nextJs project, we can leave it be for now.
tsconfig.json has simple typescript configuration for the project.

Finally, the src directory will contain all of our code. The app directory inside it determines the routing of our app.

We can see there is a page.tsx and a layout.tsx at the root of our app, there is also a route.ts at /api/hello. If you are new to nextjs 13, I will explain what all of these routes are shortly.

Inside the app directory, there are special files identified by their names, we currently have the following:

The page.tsx file, which defines a page inside of our app.
The layout.tsx file, which defines code that every child page will have.
The route.ts file which defines an API handler route.

There are also other special files we will come to know later down the tutorial series.

For now, the route.ts file inside /api/hello folder means that localhost:3000/api/hello works as an API directory, we don't actually need this behaviour, so let's remove the entire /api folder.

We also have a layout.tsx file at the root of our app folder, this means that every route will share the code inside this layout file. The layout file looks like this:

import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

This file first imports the globals.css file, which contains our general css.
Then imports and defines Inter which is the font used in the example.
Next we export a metadata object, which has head related information like the title and description.
It finally, exports a component, which just defines an html tag with a body and the {children} property, which will be replaced with the actual code of our pages.

All of this is pretty basic stuff, so we won't change much, let's just change the metadata object to align more with what we are trying to make:

export const metadata = {
  title: "Instagram clone",
  description:
    "A simple website for a tutorial, showcasing the capabilities of Nextjs and firebase",
};

Let's also go over to globals.css and replace all of the default styles with something much more simple:

* {
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

a {
  color: inherit;
}

If we need more global styles, we can add them later.

This is not a CSS tutorial, so the styles we will be using will not be explained and they will be very rudamentary, I will give you the styles but I won't explain them, so feel free to experiment with your own styles.

The next file we have to take a look at is the page.tsx file.

This file, as it is in the root of our app directory, defines the root of our website, it currently has a lot of code for the website we saw earlier, so let's replace it with something far more simple:

const Root = () => {
  return (
    <div>
      <h1>Hello world</h1>
      <p>Welcome to NextJs 13</p>
    </div>
  );
};

export default Root;

We can also delete the page.module.css file for now, as we don't have any page specific styles.

Do keep in mind we will probably create it again later, so you can just delete the contents if you want.

Setting up a firebase project

Now that we have a basic NextJs project, let's go ahead and create a firebase project.

To do this, I took the liberty of making a scribe document

If you can't see, or don't want to use the scribe, the actual steps are as follows:

Go to the firebase console
Sign in or create an account
Click on "Add project"
Give the project a name
Select continue until asked about google analytics account
Select default account.
Select continue again
Wait for the project to be created.
Press continue

Now that we have a firebase project, we are gonna set up the following things:

Authentication
Database
Storage

So first, over to the left there are some menus, under the build menu we will find the authentication option, go ahead and click it.

Setting up authentication

You know what to do, let's go over to the authentication page:

Now that we are on the authentication page, let's click on the "get started" button, which after a while will take you to the following page:

This page has a list of all the different sign in options a user can have. There are 3 categories:

Native providers: The most basic providers, like email and password or phone authentication
Additional providers: Providers that use some different website to sign in, like twitter or google.
Custom providers: These providers allow you to use some special features of authentication, but have different pricing, you can read more here

For our project, we only want the email/password provider and the google provider

Let's first register the email provider, which requires the least configuration of all, go ahead and click on the email/password button.

You will see 2 options, the first enables normal email/password sign in, the second enables password-less sign in. We only want email/password sign in, so let's only enable that one

Now it is possible to sign in to our website using an email and a password, let's continue by activating google sign in, which requires a "public-facing name" and a "support email".

So go click on the new "add new provider" button and add the google provider:

With this, we now have activated the possibility of signing in with either google or a username and password.

Challenge

With the google and email sign in we have more than enough providers, but would you like to add a different provider into your app? You could try to add a facebook sign in option or a twitter sign in option, both of which require a developer account with either facebook or twitter, which I don't have by principle, but nothing is stopping you from making them.

Here are some resources:

Setting up a database in firebase

Firebase also comes with two different databases we could use, the realtime database and the firestore database. We are gonna be using the firestore database for this project.

Go ahead and click on the firestore button on your build menu:

You should see a button to create a database, go ahead and click it, you will be asked 2 questions.

The first question asks about "production" vs "test" mode, this sets the rules for accessing the database, production mode defaults all operations to false, so you have to manually set rules while test mode sets them to true for a few days and changes them to false later.

We are gonna write our own rules later down the line, but for now, pick test mode.

The second question asks you where should the database be set up, for most projects you are gonna want either nam5 (US) or eur3 (Europe) depending on when you live. I live in Mexico, so I picked the US as that is closer.

We have now created a working database, from this page we can view and edit the database's values, we will come back to this page in the firestore chapter, but for now, let's setup the storage system.

Setting up storage

One last time, go over to the menu, this time click on storage:

You will be asked the same questions as when setting up firestore, but this time you won't be able to change the region as both firestore and storage must use the same region.

Go ahead and put the same values in.

With that, our firebase storage should be working, we could start uploading stuff to it right now.

Adding Firebase to our NextJS project

Now that we have created a firebase repository, we should try to add firebase to our NextJS project, to do that, let's install the firebase dependency:

npm install firebase

In order to use firebase, we need some information about our firebase project, this information is private and so we are gonna put it inside of a .env.local file. NextJS automatically reads any .env.local files in our repository and sets them as the keys of the process.env object.

Note that, in reality, the data we are gonna store is not so sensitive that we need to use a .env.local file to hide it. Still, it is a good idea to do so, just in case.

So create a .env.local file at the root of the project And fill it with the following:

NEXT_PUBLIC_FIREBASE_API_KEY=...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=...
NEXT_PUBLIC_FIREBASE_PROJECT_ID=...
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=...
NEXT_PUBLIC_FIREBASE_MESSAGE_SENDER_ID=...
NEXT_PUBLIC_FIREBASE_APP_ID=...
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=...

Make sure to add the NEXT_PUBLIC prefix, as it will allow us to read these variables from the client

Also remember to add the file into your .gitignore file if you are using git. If you want, I recommend creating a .env.example file for keeping example data to describe what the actual .env.local file has.

I'll explain in a second where we can find all this information, but first, let's put this information to use in our project.

Inside any folder where you want to keep your utility code, create a firebase file to put all of our firebase SDK related code

Personally, I like to create a src/common/services/firebase folder, inside of which I make a single file for each of the SDKs we are gonna use (for now only the main firebase SDK, but we will add more) and then a single index.ts file that imports all of them and exports them, so we can import directly from the folder.

Inside this file, we are gonna initialize the firebase app SDK, which will be required by all other firebase SDKs.

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
};

const app = initializeApp(firebaseConfig);
export default app;

Now, the firebaseConfig object is the one that will take all of our variables, so let's go ahead and fill our object:

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

Great! Now, let's go over to the firebase console to get our data for our .env file.

First, go over to the firebase console menu and click on "Project overview"

Here we can see information about our project, including all of the apps that use our firebase project.

We are gonna add a new web app, So click on the web simbol, from there, give your app a name.

You should now be able to see the data that we need to add to our .env file

Go ahead and copy that information over to your .env file, that should be enought to initialize firebase.

Conclusion

And we are done! I know that was a lot of setup to end up barely writing any code, but the good news is that we are done setting up and we can now focus on writing code.

Next part in the series will focus on using all of the auth setup we did to create a simple sign in page and display the username of whoever is signed in.

Build a reorderable list in react

h8moss — Sun, 08 Jan 2023 22:17:54 +0000

What are we building?

Hello all! In this tutorial I want to take you through the process of building a reorderable list in react. The list we are gonna be building is probably far too simple for usage in real-world apps, but it should serve as a good starting point.

Here is a demo of what we are gonna be building:

Here is a code sandbox demo aswell for you to play around in:

(In the demo, we are reordering the lyrics of the song tiptoe through the true bits by Los Campesinos! it's a great song, so go give it a listen!)

Writing the HTML

Ok, before we start writing some logic, let's get some HTML up and running:



const App = () => {
  const items = [
    "You asked if",
    "you could see me",
    "before I went to",
    "Spain, you didn't",
    "give a reason didn't",
    "know what you would",
    "say. But I was hoping",
    "that my breath on your",
    "face would blow every",
    "last thing into place",
  ];

  return (
    <div className='list'>
      {items.map((value, index) => (
        <div key={value} className="list-item">
          {value}
        </div>
      ))}
    </div>
  );
};

I put the list of items in a constant variable, but let's actually move it into a useState hook so we can edit it later:



const App = () => {
  const [items, setItems] = useState([
    "You asked if",
    "you could see me",
    "before I went to",
    "Spain, you didn't",
    "give a reason didn't",
    "know what you would",
    "say. But I was hoping",
    "that my breath on your",
    "face would blow every",
    "last thing into place",
  ]);
  ...
};

Adding some CSS

As you can see, I already added the classes .list and .list-item, so let's use those to style our items:



.list {
  display: flex;
  flex-direction: column;

  justify-content: center;
  text-align: center;

  border: 1px black solid;

  width: min-content;
  margin: auto;
}

.list-item {
  padding: 0.3rem;
  white-space: nowrap;
  cursor: pointer;
  height: 1.5rem;
  background-color: white;
}

We now have something that looks like the demo, but with no functionality. Let's get started with some of the actual logic:

Adding drag logic.

Ok, for our drag-n-drop behaviour, we are gonna first have to be able to drag any given item in our list, this should be simple enough, first, we have to keep track of a dragged item inside some variable, so let's make such a variable:



const App = () => {
  const [items, setItems] = useState([...]);
  const [dragged, setDragged] = useState<number | null>(null); // storing the dragged item as an index

  ...
};

Now, we have to do three things:

Set the currently dragged item when clicking on an object.
Not render the dragged item
Make a copy of the dragged item that follows the mouse.

The first and second are pretty straight forward, we have to use the onMouseDown event for the first one.
For the second one, we just need to use good ol' conditional rendering:



{items.map((value, index) => (
        <>
          {dragged !== index && (
            <div
              key={value}
              className="list-item"
              onMouseDown={(e) => {
                e.preventDefault();
                setDragged(index);
              }}
            >
              {value}
            </div>
          )}
        </>
      ))}

Now clicking in any given item makes it disappear, in order to render a floating item, let's first add another div with an absolute position, we'll worry about how to make it follow the mouse later



return (
    <>
      {/* ----------FLOATING ITEM---------- */}
      {dragged !== null && (
        <div className="floating list-item">{items[dragged]}</div>
      )}

      {/* ----------MAIN LIST---------- */}
      <div className="list">
        ...
      </div>

The .floating css class just looks like this:



.floating {
  position: absolute;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

Now, in order to properly render the item below the mouse, we are gonna have to listen to the mousemove event on the entire document. We can use a useEffect for that:



  const [items, setItems] = useState([...]);
  const [dragged, setDragged] = useState<number | null>(null);

  const [mouse, setMouse] = useState<[number, number]>([0, 0]);

  // get mouse coordenates
  useEffect(() => {
    const handler = (e: MouseEvent) => {
      setMouse([e.x, e.y]);
    };

    document.addEventListener("mousemove", handler);

    return () => document.removeEventListener("mousemove", handler);
  }, []);
...

Now that we are tracking the mouse, we can set the floating div's top and left properties to make it follow the mouse:



      {/* ----------FLOATING ITEM---------- */}
      {dragged !== null && (
        <div className="floating list-item"
        style={{
          left: `${mouse[0]}px`,
          top: `${mouse[1]}px`,
        }}
        >{items[dragged]}</div>
      )}

Amazing, we have now a dragging functionality, but no way to drop any item, so let's work on that now:

Putting the 'drop' in 'drag-n-drop'

When we drop an item, we are given a place to drop it between two different items, for example, here:

We are putting 'you could see me' between 'say. But I was hoping' and 'that my breath on your', so we need to have some sort of dropbox element between each item:



{/* ----------MAIN LIST---------- */}
<div className="list">
  <div className="list-item drop-zone" /> {/* Drop zone before all items */}
  {items.map((value, index) => (
    <>
      {dragged !== index && (
        <>
          <div
            key={value}
            className="list-item"
            onMouseDown={(e) => {
              e.preventDefault();
              setDragged(index);
            }}
          >
            {value}
          </div>
          <div className="list-item drop-zone" /> {/* drop zone after every item */}
        </>
      )}
    </>
  ))}
</div>

This boxes kinda break the app because they are visible all of the time, so let's make them only visible while we are dragging something, to do that, we can replace their className with the following line:



className={`list-item drop-zone ${dragged === null ? "hidden" : ""}`}

Now it should look like this:



<div
  className={`list-item drop-zone ${dragged === null ? "hidden" : ""}`}
/>
  {items.map((value, index) => (
    <>
      {dragged !== index && (
        <>
          <div
            ...
          >
            {value}
          </div>
          <div
            className={`list-item drop-zone ${
              dragged === null ? "hidden" : ""
            }`}
          />
        </>
      )}
    </>
  ))}
</div>

Now we should write some CSS for .drop-zone and .drop-zone.hidden



.list-item.drop-zone {
  background-color: #ccc;
  transition-property: height padding;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  overflow: hidden;
}

.list-item.drop-zone.hidden {
  height: 0px;
  padding: 0px
}

That would be good, except for the fact that all of the drop-zones are visible at the same time, in reality, only the closest one to the mouse should be.

The simplest way to fix that is to use some good ol' javascript to figure out which of the items is closest to us, so inside a new useEffect hook, we'll check the distance to the mouse for every drop-zone element:



  const [dropZone, setDropZone] = useState(0);

  // get closest drop zone
  useEffect(() => {
    if (dragged !== null) {
      // get all drop-zones
      const elements = Array.from(document.getElementsByClassName("drop-zone"));
      // get all drop-zones' y-axis position
      // if we were using a horizontally-scrolling list, we would get the .left property
      const positions = elements.map((e) => e.getBoundingClientRect().top);
      // get the difference with the mouse's y position
      const absDifferences = positions.map((v) => Math.abs(v - mouse[1]));

      // get the item closest to the mouse
      let result = absDifferences.indexOf(Math.min(...absDifferences));

      // if the item is below the dragged item, add 1 to the index
      if (result > dragged) result += 1;

      setDropZone(result);
    }
  }, [dragged, mouse]);

The code and the comments should be pretty self-explanatory, with, maybe, the exception of this line:



// if the item is below the dragged item, add 1 to the index
if (result > dragged) result += 1;

We have to add 1 to the items dragged because this code does not account for the box right below the currently dragged item, as that box is currently non-existant (because of the conditional rendering we added earlier), our index will be 1 number too low if we are above the currently dragged item.

Now that we have figured out the closest item, we can make sure only said item is rendered, so we are gonna change the className line again, this time, from this:



className={`list-item drop-zone ${dragged === null ? "hidden" : ""}`}

to this:



className={`list-item drop-zone ${dragged === null || dropZone !== index+1 ? "hidden" : ""}`}

Now, our code looks like this:



<div className="list">
  <div
    className={`list-item drop-zone ${
      dragged === null || dropZone !== 0 ? "hidden" : ""
    }`}
  />
  {items.map((value, index) => (
    <>
      {dragged !== index && (
        <>
          <div
            ...
          >
            {value}
          </div>
          <div
            className={`list-item drop-zone ${dragged === null || dropZone !== index + 1 ? "hidden" : ""}`}
          />
        </>
      )}
    </>
  ))}
</div>

As you can see, I used index+1 to account for the '0th' zone before all items.

Ok, this leaves us with the following:

Yep, it's still impossible to drop an item, but the rendering works as expected, now, to drop an item, we just need to add a mouseup listener to the document to know when we are dropping the item, so let's do just that inside a new useEffect



// drop item
  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (dragged !== null) {
        e.preventDefault();
        setDragged(null);
      }
    };

    document.addEventListener("mouseup", handler);
    return () => document.removeEventListener("mouseup", handler);
  });

This allows us to drop items, but it doesn't really reorder the list just yet, once we figure out how to reorder the list, the component will be finished.

Reordering the list.

Before we can write a function for reordering the list, we need to figure some stuff out:

When should we reorder the list
What information about the list do we need.
Where we can get that information
How to actually use that information to reorder the list.

Ok, so number one is pretty simple, we should reorder the list after we drop an item, so inside the mouseup handler.

Number two should be pretty simple too, we should just need two numbers, the index of the item's original position and the index of the item's final position.

Number 3 has also already been solved, the dragged variable has the original index and the dropZone variable has the new index.

So now, let's solve number 4 by looking at two examples:

Example 1, simple movement:

If we have a list like this:

Start of the list
- dropzone 0
[0] ITEM A
- dropzone 1
[1] ITEM B
- dropzone 2
[2] ITEM C
- dropzone 3
[3] ITEM D
- dropzone 4
[4] ITEM E
- dropzone 5

If we drag 'ITEM B' to 'dropzone 4', our dragged variable will be 1 and our dropZone variable will be 4.
The new order should be:

[0] ITEM A
[1] ITEM C
[2] ITEM D
[3] ITEM B
[4] ITEM E

So index 1 now has what was on index 2, index 2 now has what was on index 3 and index 3 now has what was on index 1, knowing what our variables should be, this function should do the trick:



const reorderList = <T,>(l: T[], start: number, end: number) => {
  const temp = l[start];

  for (let i=start; i<end; i++) {
    l[i] = l[i+1];
  }
  l[end - 1] = temp;

  return l;
};

We can plug this item into our handler like so:



// drop item
  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (dragged !== null) {
        e.preventDefault();
        setDragged(null);

        setItems((items) => reorderList([...items], dragged, dropZone));
      }
    };

    document.addEventListener("mouseup", handler);
    return () => document.removeEventListener("mouseup", handler);
  });

Ok, we can now push items forward on the list, except in a very specific case, let's look at example number 2 for that case:

Example 2: Backward movement

Now, let's look at the exact opposite situation, let's say, using the example list we defined above, that we want to move "ITEM D" into "dropzone 1" (dragged=3 and dropZone=1). The resulting list should look like this:

[0] ITEM A
[1] ITEM D
[2] ITEM B
[3] ITEM C
[4] ITEM E

The item in index 1 has what was in index 3, item in index 2 has what was in index 1 and item in index 3 has what was in index 2.

So it is similar but not quite the same, let's separate the algorithm into moving the items backward and forward.

First, move all of the previous reordering code into a new function and call it _reorderListForward (or something), now we'll redefine our reorderList function like so:



const reorderList = <T,>(l: T[], start: number, end: number) => {
  if (start < end) return _reorderListForward([...l], start, end);
  else if (start > end) return _reorderListBackward([...l], start, end);

  return l; // if start == end
};

Now, for the _reorderListBackward function, as I said, any item in a given index should be equal to what used to be in the list on the previous index:



const _reorderListBackward = <T,>(l: T[], start: number, end: number) => {
  for (let i = start; i > end; i--) { // backward for-loop for backward movement
    l[i] = l[i - 1];
  }

  return l;
};

Except for the end index, which should have the same value as start.



const _reorderListBackward = <T,>(l: T[], start: number, end: number) => {
  const temp = l[start];

  for (let i = start; i > end; i--) {
    l[i] = l[i - 1];
  }

  l[end] = temp;

  return l;
};

Amazing! We can now reorder any item in any direction at any time! Yay!

Conclusion

Now the element is complete, it isn't perfect and I wouldn't call if production ready, but I think it's a really good starting place.

If you wanted to make this into a bigger project, why not try adding drag-handles? Or packaging this whole thing into a reusable component?

Or, you know, stop reinventing the wheel and just use a premade library that can do all that and more? Yeah, probably should have done that from the beginning... ¯\_(ツ)_/¯

Understanding null-safety in flutter

h8moss — Wed, 12 Jan 2022 02:54:18 +0000

Introduction

Null-safety has caused a series of problems for developers, especially in dart, where it was introduced as an optional feature and developers have had to slowly migrate to it usually not fully understanding it. This post is here to change that.

What exactly does null-safe mean?

To understand what null-safety is, first we need to understand what null is.

Null is a keyword in dart that means nothing, it is used to describe a variable with no value assigned. It should be used for variables that don't always have a value (for example a currentUser variable could be null if no user is signed in), a nullable variable is different from a late variable in that a late variable starts with no value but once it gets a value it can never go back to having no value at all.

Late variables are also different in that they are never null, an uninitialized null variable will not be null, and trying to check if it is will throw an error

class MyClass {
  late int myVar;

  void myMethod() {
    if (myVar != null) { // this if is reading an unasigned late variable
      print(myVar);
    }
  }
}

void main() {
  final myClass = MyClass();
  myClass.myMethod();
}

The above will throw an error while attempting to read myVar to see if it's null, you will also get a lint warning letting you know that myVar == null will never be true.

On the other hand, a nullable variable can be used when planning to read the value before assigning it or when planning to assign null to it more than once.

Null-safety then, makes sure we only ever add null checks when necesary. Please take a look at the following example:

void main() {
  int x = someFunction();
  if (x != null) {
    print(x);
  } else {
    print('x is null');
  }
}

In the example above, the code if (x != null) is redundant, because we declared x to be a null-safe variable (int, not int?), meaning that either someFunction will never return null, or we already got some sort of compilation error when assigning, either way, we don't need an if statement to know x will never be null.

In case we want to work with a nullable variable, we can make it so by adding a ? after the type declaration:

void main() {
  int? x = someFunction(); // some function might return null
  if (x != null) {
    print(x);
  } else {
    print('x is null');
  }
}

Above x could be null assuming someFunction can return null, so the if statement is no longer redundant.

Null-safety operators

Along with nullable variables, we have some useful operators, namely ?., ?? and !, (the last one was added with null-safety, but the rest already existed).

The null aware operator

The first of the three operators I want us to take a look at is the ?. operator, we'll call it the null-aware operator. The null aware operator can be used to access a nullable variable's instance fields, take a look at the following example:

String? myString = myFunction();
if (myString.isNotEmpty) {
  print("My string wasn't empty");
}

The above code will not compile. myString could be null, yet we are trying to get isNotEmpty but if myString is null, we will get an error, so we can't possibly compile this, this is where the ?. operator comes into play, the ?. operator will return null when used on a null value and it will read a property when used on a non-null value, take a look:

String? myString = myFunction();
if (myString?.isNotEmpty == true) {
  print("My string wasn't empty and it wasn't null either!");
}

In the new example, we used ?., which means isNotEmpty will be null if myString is also null. With that in mind, I added a == true after it to make sure that the if statement doesn't run if myString is null

The if-null operator

The next operator is the ?? or if-null operator. It is quite a simple operator and as the name implies it can be used to provide a default value in case of null, take a look at this simplified example:

int? a = someNullableFunction();
int b = a ?? 0;

The above code can also be understood like this:

int? a = someNullableFunction();
int b;
if (a == null) {
  b = 0;
} else {
  b = a;
}

That is to say, the if-null operator will return the left operand if it isn't null and the right operand if the left is.
Of course, the operand can be linked together to form some confusing looking code:

int? a = someFunction();
int? b = someFunction();
int? c = someFunction();
int d = a ?? b ?? c ?? 0;

Above, d will first try to assign itself to a, but if a is null, it will attempt to use b, if b is null it will use c and if c is null it will use 0.

The if-null operator can be used in conjunction with the null-aware operator for some pretty nice results, take a look at this slightly more realistic example:

@override
Widget build(BuildContext context) {
  List<int>? myList = _generateList();
  return ListView.builder(
    itemCount: myList?.length ?? 0,
    itemBuilder: (context, index) { ... },
  );
}

Above, we don't know if our list of items will be null, but we can save ourselves a ternary by using null-awareness and if-null operators.

Last but not least, this operator can be used in conjunction with the = operator to asign if null:

int? a = someFunction();
a ??= 0;

Above, a will be 0 if it was null, but it will keep its old value otherwise, as with other assignment operators (like +=), ??= is just a synonym of:

int? a = someFunction();
a = a ?? 0;

Also, I do want to note that in this example we should just do this:

int a = someFunction() ?? 0;

which is more concise.

The null check operator

Finally, the ! or null check operator (not to be confused with the not operator, as that one is used before a boolean expression and the null check operator is used after a nullable expression).

It was introduced along with null-safety to dart and it has quite a simple function, it can be used to turn a nullable value into a non-null one:

int? a = myFunction();
int b = a!;

Using this operator we can easily assign a to b even if a is nullable and b is not.

Now I hear you asking what's the catch? What happens if a is null? And I hear you!

The answer is very simple, you get a null-check error, meaning the program will crash if you use a ! operator on a null value, you should not use this operator on a value that might be null, it is meant to be used only if you know a nullable value isn't null, here is a very simple example:

class MyClass {
  int? _value;

  int? get value => _value;

  void setValueIfNull(int val) {
    _value ??= val;
  }
}

void main() {
  MyClass c = MyClass();
  c.setValueIfNull(1);
  int x = c.value!;
}

Above, we as the programmers know that MyClass.value will not be null right after a call to MyClass.setValueIfNull(), because said method will assign some value, however dart has no way of knowing this, so we can help dart out by using the ! operator on MyClass.value when reading it. Here is another, simpler example:

int? a = someFunction();
if (a != null) {
  int b = a!;
}

Now because we are inside an if statement that made sure a isn't null, we can use the ! operator freely, in reality, this code will work, but we will get a warning letting us know that using ! is not necesary because even dart is smart enough to know that a is not null right after checking it, we will talk more on this topic in a second.

I think it is also worth mentioning that the null check operator can be used like this !. to access a nullable variable's fields. Here is a slightly more realistic example:

@override
Widget build(BuildContext context) {
  return FutureBuilder<List<int>>(
    future: _getNumbers(),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        return ListView.builder(
          itemCount: shapshot.data!.length,
          itemBuilder: ...
        );
      }
      return CircularProgressIndicator();
    }
  );
}

As you can see, because we knew snapshot.data wouldn't be null, we can use ! like this snapshot.data!.length

Type escalation

As I mentioned before if you put this code here:

int? a = someFunction();
if (a != null) {
  int b = a!;
}

into the dart compiler, you will get a lint warning letting you know that there is no need to use ! because a will never be null. This is what we refer to as type escalation, in this context, we have already made sure that a will never be null, so for dart, the type of the variable a has escalated from int? to int.
Keep in mind the real type of the variable is still int? so we can still assign null, in this case, the type escalation will only work inside the if statement and last until we assign a again.

Type escalation works outside of null-safety, but I believe it is especially useful when working with nullable values.

dynamic myVariable = someDynamicFunction();
if (myVariable is String) {
  print(myVariable.substring(1)); // you should get intellisense here
}

It is also worth mentioning type escalation only works on local variables, the reason being it is hard to predict what getters will return, take a look at this example:

class MyClass {
  void myMethod() {
    if (myVar != null) {
      int currentVar = myVar;
    }
  }

  int? get myVar {
    int myNum = someRandomNumberGenerator(min: 0, max: 100);
    return myNum > 50 ? myNum : null;
  }
}

As you can see above the global getter myVar will return null 50% of the times it is called, meaning it won't necessarily be safe after making a check, so type escalation can't happen and the above code will give an error.

That's it! You are done reading this article, if you are interested in continuing to read about null-safety, I recommend you go to dart's official null-safety page which also contains tons of awesome resources to level up your null-safety skills!