Forem: Debopam Gupta

Implementing Recursive Comments View

Debopam Gupta — Tue, 10 Sep 2024 15:47:19 +0000

What is recursion?

Now I'm sure most of you will be familiar with recursion already, but for those who aren't, recursion is a programming concept where a function calls itself. What? Calls itself? Yes, you heard that right. A function can call itself, and this is known as recursion.

The most obvious next question is for how many times?

Well, you see, until we don't want it to. Its upto us to set the condition, the "base case" as we call it. Until the job is done.

Why recursion?

There a lot of areas of programming where recursion is used to solve problems. Some problems look naturally recursive. For example, traversing a tree, or a graph, or even a linked list.

Now an important thing which I must address, there are problems which can be solved by both iteration and recursion and mostly you can come up with a iterative solution to the same recursive solution you wrote. But there are problems which are best solved by recursion and not by iteration.

Let us see some examples where recursion is used:

Fibonacci Series: This is a classic example as we add last two numbers in the series, but we can also call the same function for getting the last number itself. Until, and here here comes the base case, we reach 1 or 0, we are sure of the answer and stop recursing indefinitely.
Tree Traversals: Inorder, Preorder, Postorder traversals are all recursive in nature. We visit the left child, then the root, then the right child. And we do this for every node in the tree. And we stop when we reach a null node. Doing it iteratively requires stacks to keep track of the nodes which is again important for interviews.
Depth First Search: We can use recursion to implement DFS. Doing so iteratively will require stacks but that is provided implicitly by recursion itself.
Factorial: This is a classic example of recursion. We multiply the number with the factorial of the number one less than it. And we stop when we reach 1. Well for negative values which are not integers, you now will have to use some other method to calculate the factorial.

Okay! Enough with these examples. You say we'll never get to use recursion out of these interview style questions. But you see, recursion is a powerful tool and can be used in many places.

Recursive Comments

Let's take an example of a comments section. We have a comment and then we have replies to that comment. And then we have replies to those replies. And so on. This is a recursive structure. You must've seen these on the internet, here's an example from YouTube comments.

In my Hackernews Client which was made to learn how to use Next.js, inspired by the example that SolidJS provides, I had to implement this recursive comments view. And I did it using recursion.

    {
      id: 40689776,
      level: 0,
      user: 'kgeist',
      time: 1718459211,
      time_ago: '3 months ago',
      content: '<p>&gt;After the team relocated the code to a new location in the FDS,<p>I wonder what the protocol for sending update requests is. It sure must be encrypted? If so, what if the encryption algoritm is weak by modern standards, given Voyager 1 is 46 years old, and can be reverse engineered somehow? I.e. can someone outside of NASA send requests to Voyager to change its code?',
      comments: [Array]
    },
    {
      id: 40688218,
      level: 0,
      user: 'mrweasel',
      time: 1718438482,
      time_ago: '3 months ago',
      content: '<p>The quality of the build of Voyager and the software is nothing short of amazing.',
      comments: []
    },
    {
      id: 40689025,
      level: 0,
      user: 'torcete',
      time: 1718450350,
      time_ago: '3 months ago',
      content: '<p>So, a memory chip was damaged? And if that is the case, a cosmic ray did it?<p>[..] &quot;Further sleuthing revealed the exact chip causing the problem, which allowed them to find a workaround. After the team relocated the code to a new location in the FDS, Voyager 1 finally sent back intelligible data on April 20, 2024&quot;',
      comments: []
    },
    {
      id: 40689798,
      level: 0,
      user: 'cancerboi',
      time: 1718459370,
      time_ago: '3 months ago',
      content: '<p>How did the Voyagers avoid hitting asteroids when exiting the solar system? I thought there was a huge cloud of asteroids surrounding our solar system.',
      comments: [Array]
    }

These are the comments on a specific post, they also have a property comments which is an array of comments (well sometimes they are empty). And each comment has a comments property which is an array of comments. And so on. Boom! Recursion!

So here's an actual implementation for recursion now! Instead of calling functions like we used above, we will now use our same UserComment component.

It is important in any recursive case in the function to not call the function again with the same arguments. This will lead to an infinite loop. We need to change the arguments in some way. Here we want to render the sub-comments and hence we pass on the sub comments from the original post, until we don't have any more sub-comments.

function UserComment({ comments }: UserCommentProps) {
  return (
    <div className="space-y-4">
      {comments.map((comment) => {
        return (
          <article key={comment.id}>
            <div className="flex gap-1 items-center mb-2">
              {/* ... */}
            </div>
            <div className="prose-invert pb-4 break-words" dangerouslySetInnerHTML={{ __html: comment.content }}></div>
            {/*Here we check to see if we have more comments (base case)*/}
            {/*And call the same component with a fresh set of comments coming from replies of the original one*/}
            {comment.comments.length != 0 && <UserComment comments={comment.comments} />}
          </article>
        );
      })}
    </div>
  );
}

For aesthetic purposes, we can add a margin to left with respect to the level property from the JSON response, that will give a nice indentation to the comments.
We calculate that on the fly in the className like so

className={`ml-${comment.level * 2}`}

Here's more or less the final component.

import { CommentType } from "@/app/post/[postId]/page";
import Link from "next/link";

interface UserCommentProps {
  comments: CommentType[];
}

function UserComment({ comments }: UserCommentProps) {
  return (
    <div className="space-y-4">
      {comments.map((comment) => {
        return (
          <article
            key={comment.id}
            className={`ml-${comment.level * 2}`}
          >
            <div className="prose-invert pb-4 break-words" dangerouslySetInnerHTML={{ __html: comment.content }}></div>
            {comment.comments.length != 0 && <UserComment comments={comment.comments} />}
          </article>
        );
      })}
    </div>
  );
}

So this is now what we end up with:

And that's it! We have implemented a recursive comments view using recursion. This is a very powerful tool and can be used in many places. I hope you enjoyed this post and learned something new. Until next time, happy coding! 🚀

References

Hackernews Client - https://nextjs-hn-feed.vercel.app/top
Source Code - https://github.com/w3dg/nextjs-hn-feed
Solid JS Hackernews - https://github.com/solidjs/solid-hackernews

Dotfiles and how i manage them

Debopam Gupta — Wed, 01 Feb 2023 10:33:00 +0000

Dotfiles are the configuration files for your system. It is what makes your $HOME, to $HOME sweet $HOME, basically your personalised settings.

In this blog, I will try to explain how my dotfiles are setup, and some settings/configurations I have. You can find a current copy of my dotfiles here, https://github.com/w3dg/dotfiles

Shell

As for the shell i am using bash. I am working on windows for the while and the standard installation of Git Bash or WSL works fine for me. As well as i have picked up and learnt my way through bash and the command line in general and hence i stick to it.

I have tried out ZSH and oh-my-zsh and its great as well. Some suggestions are to use with zsh-autosuggestions package and zsh-syntaxhighlighting package.

Bash Config

Customising bash requires you to edit your .bashrc file located in your home directory typically denoted by ~.

Here's a top level view of what i have in my .bashrc

eval "$(dircolors -b ~/.dircolors)"

This evaluates dircolors for the ls command.

source ~/.bash/bindings.bash       # Bindings
source ~/.bash/shopts.bash         # Shopts
source ~/.bash/exports.bash        # Exports
source ~/.bash/functions.bash      # Custom functions
source ~/.bash/aliases.bash        # Aliases
source ~/.bash/git_aliases.bash    # Git aliases

These are various keybindings, shell options, exports of environment variables, custom functions and aliases which i have enabled.

Useful Bindings

bind '"\e[A": history-search-backward'
bind '"\e[B": history-search-forward'

These will allow you to press the up key after typing a command to search your history to let you see the previous ways you had used it which is useful if you forgot the certain way you used a command before.

There are more, check out my dotfiles or anyone else's or research on the interet to find more!

Useful functions

ex()
{
  if [ -f "$1" ] ; then
    case $1 in
      *.tar.bz2)   tar xjf $1   ;;
      *.tar.gz)    tar xzf $1   ;;
      *.bz2)       bunzip2 $1   ;;
      *.rar)       unrar x $1   ;;
      *.gz)        gunzip $1    ;;
      *.tar)       tar xf $1    ;;
      *.tbz2)      tar xjf $1   ;;
      *.tgz)       tar xzf $1   ;;
      *.zip)       unzip $1     ;;
      *.Z)         uncompress $1;;
      *.7z)        7z x $1      ;;
      *.deb)       ar x $1      ;;
      *.tar.xz)    tar xf $1    ;;
      *.tar.zst)   unzstd $1    ;;
      *)           echo "'$1' cannot be extracted via ex()" ;;
    esac
  else
    echo "'$1' is not a valid file"
  fi
}

This allows to extract given almost any sort of compressed file which is useful as I do not need to remember which command to use specifically.

mkcd() {
  mkdir $1 && cd $1
}

This function makes a directory and drops you into it all at once.

A great resource I had found for my git aliases is the oh-my-zsh repo - https://github.com/ohmyzsh/ohmyzsh/blob/master/plugins/git/git.plugin.zsh

For some bling in the terminal, this line displays a ascii cow saying a random quote each time i open a terminal. This uses the fortune and cowsay programs.

fortune | cowsay

The next 3 lines allow for utf8 input and output in the terminal.

# Allow UTF-8 input and output, instead of showing stuff like $'\0123\0456'
set input-meta on
set output-meta on
set convert-meta off

A typical prompt of mine looks something like this -

Given all this custom settings and more you would obviously want to back them up and use it across machines or if you have a new machine.

How to manage the various dotfiles across machines?

Typically on Linux, people will symlink their dotfiles kept in some other directory, generally under version control, to their home directory where everything should exist to allow the programs to pick the settings up.

So, you will see people doing this,

DOTFILES=(.bash_profile .gitconfig .gitignore)

#Remove old dotfiles and replace them
for dotfile in $(echo ${DOTFILES[*]});
do
    rm ~/$(echo $dotfile)
    ln -s ~/dotfiles/$(echo $dotfile) ~/$(echo $dotfile)
done

This code snippet above is a for loop in bash which loops through the given array of dotfiles and links them to the home directory.

Given on linux, this works very fine.

So granted I'm using Git Bash on Windows, it should work on Windows as well right?

The sad answer is no, even though there is a ln command, it doesn't seem to do anything.

So the other day, I decided to tackle this and write powershell script which does the same for me.

Heres that script,

#!/usr/bin/env pwsh

# New-Item -path $HOME\.bashrc -itemType SymbolicLink -target $HOME\code\dotfiles\.bashrc

# .bashrc .bash_profile .gitconfig .inputrc .npmrc .gitignore .dircolors
$dotfiles = (".bashrc", ".bash_profile", ".dircolors", ".gitconfig", ".gitconfig", ".inputrc", ".npmrc", ".bash")

foreach ($element in $dotfiles) {
  echo Linking $element
  New-Item -path $HOME\$element -itemType SymbolicLink -target $HOME\code\dotfiles\$element
}

This does the same thing and now the files are correctly linked to the other directory under version control. And that directory is very much my dotfiles repository.