Okay so last time we left off, there was a bit of chatter around the planning of an interactive admin user interface that will allow users to change the order of articles and how they appear on the screen.

How's it going

I embarked on the journey last night and kept at it for a while. I started off reading the docs from top to bottom in the dnd kit library. It was like a 30 minute read, I took the time to make sense of each blurb as I went, so my reading pace was quite slow and repetitive.

The drag and drop capability has been established, although its very crude. I don't have data persisting yet, and there's several visual bugs but overall, it's better than the dream I had yesterday morning.

Lol. The app is still doing some weird things, like I have no idea why the articles I drag from the right, are stuck on the DOM. It's probably some unaccounted for CSS cleanup, now that I'm thinking about it.

Another glaringly obvious bug, is the list of articles the user drags from. The list needs to clean up after an item leaves the list. Right now, they all maintain their position and it leaves an awkward whitespace. Maybe more CSS cleanup?

The last bug I've observed so far, is really just some unaccounted for logic. When a user drags more than one article into a tile, the last card added will take the slot. I don't know what happens to the card that was in the tile, but it disappears from the view.

After the bugs

Once those immediate bugs are addressed I can keep pushing forward with the next subset of features. The first is the ability to reorganize those articles once they land in the grid. Users should be able to move the article from the tile 1, over to tile 6 for example. That really shouldn't be too hard to implement from a code perspective.

The next step will be to focus on data persistence in both the Page Builder screen and finally in the home screen. The data structure is already in a decent state, it shouldn't be too hard to build from here to establish a more concert system to keep the data persistent.

After, I'll begin working on creating an actual user experience that feels natural from here. It doesn't need to be an 100% open-ended system, that isn't the goal. Usually these type of design decisions just play out naturally for me. There's already a few cool ideas in my head, we'll see how those play out as I go.

Noting the current data structure

Yeah so I figure theres a lot of ways to go about this. One way I don't want to do it is to have to sort the posts as the user lands on the landing page. This list should be pre-sorted, that kind of task could be done in the admin interface upon editing.

The current approach has been to use React Server components to generate a array of UUIDs that equal the length of the posts we have to sort, and pass that set of UUIDs down to the client-side drag and drop component via props.

import { getAllPublishedPosts } from '@/server/getAllPublishedPosts'
import { SortableApp } from './components/SortableApp'
import { SortableAppContext } from './components/SortableAppContext'
import { v4 as uuidv4 } from 'uuid'

const Page = async () => {
  const posts = await getAllPublishedPosts()
  const uuids = Array.from({ length: posts.length }).map((_) => uuidv4())
  return (
    <div className="px-4">
      <SortableAppContext>
        <SortableApp posts={posts} skeletonKeys={uuids} />
      </SortableAppContext>
    </div>
  )
}

export default Page

Like I said before, it's all really bare bones. The state for the order of posts is being store in Zustand in an easy to read shape, I figure it shouldn't be hard to build upon this setup.

{
  postId: string
  skeletonKey: string
}[]

Final thoughts before breakfast

We'll see how far I can make it today. Gotta go get breakfast at IHOP this morning and then spend some time with the fam cause my girlfriends mom just flew in from Indiana. I'll feel accomplished if I can navigate through all of those bugs I mentioned above.

Either way, if I don't finish the project and ship it out the door today, I'm not worried. I've got a few generic landscape photos from my phone I can use as cover photos for posts so I think we'll be good to keep publishing posts for a few more days at-least within being interrupted by perfectionism. Cheers.

Buggy Prototype Software and Ihop