DEV Community: Antonio-Bennett

Pure Js is Hard #3

Antonio-Bennett — Fri, 17 Dec 2021 03:48:18 +0000

Hey everyone the previous relevant post can be found here.

Pure Js is Hard #2

Antonio-Bennett ・ Dec 17 '21 ・ 4 min read

#opensource #javascript #hacktoberfest #osd600

Issue

This issue this time is that we must be able to filter and show tasks that are due soon. I opted to show tasks that are due the next day.

So assuming you read that this one wasn't terribly difficult building unto what we had.

PR

The PR has some kinks but it is mostly done. I will be ironing stuff out and updating this as needed. But here we go.

The first thing I did was add the DueSoon button in the filter code.

<div class="form-floating" id="filter-wrapper${list}">
    <input type="text" name="filter${list}" id="filter${list}" class="form-control" placeholder="filter" />
    <label for="filter${list}">Search for task</label>
    <input id="due${list}" type="#" class="btn btn-success" value="Due Soon" />
</div>

This means this only shows after more than 3 tasks just like the search filter option.

Next all we have to do is create a dueDate property for the task when we create it like such

    let taskDue = 0;
    if (event.target.previousSibling.previousSibling.value) taskDue = event.target.previousSibling.previousSibling.value;

    if (taskName.length) {
      let task = {
        name: taskName,
        status: 'pending',
        date: new Date().getTime(),
        dueDate: new Date(taskDue),
        order: '',
      };

Then in the filter function we check if the event is searching key strokes or the click of the due soon button. If it is the click we go through each task of that tasklist and check if it's due date is the next day and if it is we keep it visible otherwise hide the rest.

    if (event) {
      if (event.target.value != 'Due Soon') {
        const text = event.target.value.toLowerCase();
        document.querySelectorAll(`#tasklist${selected}`).forEach(function (task) {
          if (task.querySelector('.form-check-label').textContent.toLowerCase().trim().indexOf(text) !== -1) {
            task.setAttribute('style', 'display: flex !important');
          } else {
            task.setAttribute('style', 'display: none !important ');
          }
        });
      } else {
        let i = 0;
        document.querySelectorAll(`#tasklist${selected}`).forEach(function (task) {
          let date2 = tasklists[selected].tasks[i].dueDate;
          let date1 = new Date();
          let date1_tomorrow = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate() + 1);
          if (
            date1_tomorrow.getFullYear() == date2.getFullYear() &&
            date1_tomorrow.getMonth() == date2.getMonth() &&
            date1_tomorrow.getDate() == date2.getDate()
          ) {
            task.setAttribute('style', 'display: flex !important');
          } else {
            task.setAttribute('style', 'display: none !important ');
          }
        });
      }
    }

Overall Thoughts

Again I can't stress it enough. Use a framework if having fun and figuring stuff out isn't your goal. It is fun figuring out how to manage the state and how to design architecture but the pains of pure js in web apps like this are super annoying. I love this project though as it helps me to figure out new ways of doing things in JS.

Release 0.3 Seneca-ICTOER/IPC144

Antonio-Bennett — Fri, 17 Dec 2021 03:29:29 +0000

For this assignment we had to contribute to a Seneca repository. I chose the IPC144 repo.

Issue

The issue is that the documents where mine specifically is pointers-arrays-and-structs.md were automatically converted to markdown text from the old IPC website so we have to check the conversion and fix anything that wasn't correct.

PR

The PR was pretty simple. For this file the only things that were changed are small.

The first changes were making sure types are inline code. ex char* should be char*

The second was creating alt text for images and linking them to the img directory like such ![Representation of RAM](../../static/img/memorymap.png)

Lastly we add admonitions such as notes or caution like this

:::note
`a` and `p` are interchangeable. `p` may also be used as an array!
:::

Overall thoughts

It was cool contributing to a project for my school. Now I can cross that off my bucket list I guess haha. It was also seeing that that PR's for checking content that teaches others is just as important as code.

Pure Js is Hard #2

Antonio-Bennett — Fri, 17 Dec 2021 03:06:35 +0000

Hey everyone the previous related post is here.

Pure JS is Hard

Antonio-Bennett ・ Dec 17 '21 ・ 2 min read

#javascript #opensource #hacktoberfest

The project is still the same so I will jump into the issue and code.

Issue

The issue this time is that users should be able to have multiple task lists and be able to switch between and view them.

Code

This PR was a PAIN. This is the type of stuff you would do with components but pure js as I said is hard. Anyways the first thing I had to do was modify the index html because we use Bootstrap and my implementation was going to use Cards which need bootstrap built javascript libraries. The required line was

 <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>

The next thing I started thinking about was how dynamically create a task list. What I needed to do was extract all the html code into a createTaskList function that would append the following html to the dom and also register all the buttons and etc with eventListeners. I use an incrementing taskListId to keep the eventListeners unique. The other major differnce is I switched from a sole array to an object that contains an array property of tasks. I had to add an if else though because on page reload the tasks would not be fetched from localStorage correctly so I had to target reloads with registering the eventlistener on document as such

document.addEventListener('DOMContentLoaded', addTaskList);

we then also set renderedproperty to false which tells the init function to rerender all the tasks only if it was a page reload.

function addTaskList(event) {
  //If it is page load just render the collapse stuff
  if (event.target == document) {
    for (let list in tasklists) {
      tasklists[list].rendered = false;
      const html = `
                <div>
                  <div class="card">
                    <div class="card-header" id="heading${list}">
                      <h5 class="mb-0">
                        <button
                          class="btn btn-link"
                          type="button"
                          data-bs-toggle="collapse"
                          data-bs-target="#collapse${list}"
                          aria-expanded="true"
                          aria-controls="collapse${list}"
                          data-indexNum=${list}
                        >
                          ${tasklists[list].name}
                        </button>
                      </h5>
                    </div>

                    <div id="collapse${list}" class="collapse" aria-labelledby="heading${list}" data-bs-parent="#accordionTaskList">
                      <div class="card-body">
                        <div class="form-floating" id="filter-wrapper${list}">
                          <input type="text" name="filter${list}" id="filter${list}" class="form-control" placeholder="filter" />
                          <label for="filter${list}">Search for task</label>
                        </div>

                        <ol class="list-group list-group-numbered mt-3 mb-3" id="tasklist${list}"></ol>

                        <a href="#" class="btn btn-sm btn-outline-danger" id="clear-tasks${list}">Clear tasks</a>
                        <a href="#" class="btn btn-sm btn-outline-danger" id="clear-comp-tasks${list}">Clear completed tasks</a>

                        <hr />

                        <form id="task-form${list}" class="d-flex">
                          <div class="form-floating d-flex flex-fill">
                            <input type="text" name="task" id="task${list}" class="form-control me-3" placeholder="New Task" />
                            <label for="task${list}">Name new task</label>
                          </div>
                          <input type="submit" class="btn btn-success" value="Add new task" />
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
        `;

      let doc = new DOMParser().parseFromString(html.trim(), 'text/html');
      let taskListNode = doc.body.querySelector('div');
      accordian.appendChild(taskListNode);

      const taskform = accordian.querySelector(`#task-form${list}`);
      const tasklist = accordian.querySelector(`#tasklist${list}`);
      const clearTasks = accordian.querySelector(`#clear-tasks${list}`);
      const clearCompTasks = accordian.querySelector(`#clear-comp-tasks${list}`);
      const filter = accordian.querySelector(`#filter${list}`);

      taskListNode.querySelector('button').addEventListener('click', (event) => {
        selected = event.target.dataset.indexnum;
        Tasklist.init();
      });

      taskform.addEventListener('click', Tasklist.add);
      tasklist.addEventListener('click', Tasklist.remove);
      tasklist.addEventListener('mouseup', Tasklist.complete);
      clearTasks.addEventListener('click', Tasklist.deleteAll);
      clearCompTasks.addEventListener('click', Tasklist.deleteAllCompleted);
      filter.addEventListener('keyup', Tasklist.filter);
    }
  } else {
    event.preventDefault();

    const taskListName = taskListInput.value.trim();

    const html = `
              <div>
                <div class="card">
                  <div class="card-header" id="heading${tasklistId}">
                    <h5 class="mb-0">
                      <button
                        class="btn btn-link"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapse${tasklistId}"
                        aria-expanded="true"
                        aria-controls="collapse${tasklistId}"
                        data-indexNum=${tasklistId}
                      >
                        ${taskListName}
                      </button>
                    </h5>
                  </div>

                  <div id="collapse${tasklistId}" class="collapse" aria-labelledby="heading${tasklistId}" data-bs-parent="#accordionTaskList">
                    <div class="card-body">
                      <div class="form-floating" id="filter-wrapper${tasklistId}">
                        <input type="text" name="filter${tasklistId}" id="filter${tasklistId}" class="form-control" placeholder="filter" />
                        <label for="filter${tasklistId}">Search for task</label>
                      </div>

                      <ol class="list-group list-group-numbered mt-3 mb-3" id="tasklist${tasklistId}"></ol>

                      <a href="#" class="btn btn-sm btn-outline-danger" id="clear-tasks${tasklistId}">Clear tasks</a>
                      <a href="#" class="btn btn-sm btn-outline-danger" id="clear-comp-tasks${tasklistId}">Clear completed tasks</a>

                      <hr />

                      <form id="task-form${tasklistId}" class="d-flex">
                        <div class="form-floating d-flex flex-fill">
                          <input type="text" name="task" id="task${tasklistId}" class="form-control me-3" placeholder="New Task" />
                          <label for="task${tasklistId}">Name new task</label>
                        </div>
                        <input type="submit" class="btn btn-success" value="Add new task" />
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
      `;

    let doc = new DOMParser().parseFromString(html.trim(), 'text/html');
    let taskListNode = doc.body.querySelector('div');
    accordian.appendChild(taskListNode);

    const taskform = accordian.querySelector(`#task-form${tasklistId}`);
    const tasklist = accordian.querySelector(`#tasklist${tasklistId}`);
    const clearTasks = accordian.querySelector(`#clear-tasks${tasklistId}`);
    const clearCompTasks = accordian.querySelector(`#clear-comp-tasks${tasklistId}`);
    const filter = accordian.querySelector(`#filter${tasklistId}`);

    taskListNode.querySelector('button').addEventListener('click', (event) => {
      selected = event.target.dataset.indexnum;
      Tasklist.init();
    });

    taskform.addEventListener('click', Tasklist.add);
    tasklist.addEventListener('click', Tasklist.remove);
    tasklist.addEventListener('mouseup', Tasklist.complete);
    clearTasks.addEventListener('click', Tasklist.deleteAll);
    clearCompTasks.addEventListener('click', Tasklist.deleteAllCompleted);
    filter.addEventListener('keyup', Tasklist.filter);

    tasklists[tasklistId] = {
      name: taskListName,
      tasks: [],
    };
    ++tasklistId;
    localStorage.setItem('tasklists', JSON.stringify(tasklists));
  }
}

The init function looks like this

  static init() {
    //Only render tasks from init once otherwise tasks added everytime tasklist is opened
    if (!('rendered' in tasklists[selected]) || tasklists[selected].rendered == false) {
      tasklists[selected].rendered = true;
      localStorage.setItem('tasklists', JSON.stringify(tasklists));
      tasklists[selected].tasks.forEach((task) => Tasklist.renderTask(task));
    }
    Tasklist.filter(); //TODO: ???
  }

It just renders the tasks to the page and only renders once or else it would add the tasks repeatedly.

Overall Thoughts

I recommend just using a framework once you realized that global state management is a must or if you realize that you benefit from components. Only go through this pain if you want to figure stuff out. The PR was pretty fun though.

Pure JS is Hard

Antonio-Bennett — Fri, 17 Dec 2021 02:46:18 +0000

Hey Everyone! So this one is suuuper late and it's not Rust :(. Previous related blog is here :)

Hacktoberfest Week 2

Antonio-Bennett ・ Oct 16 '21 ・ 2 min read

#opensource #hacktoberfest #rust #osd600

Project

So you might be wondering why did I say pure Javascript is hard...well that's because it is. Not hard in the sense of syntax and etc but when we start building complex apps that manage state etc it becomes annoying very quickly and you realize why we have frameworks. This project aims to create a todo app with pure JavaScript and eventlistener goodness.

Issue

The issue was that when a user enters tasks to do, there is no way of clearing only completed tasks.

PR

The PR can be found here if you want to just see it. First thing I did was creating a new button which only shows up with the clear task button as well.

First we add the button of course.

<a href="#" class="btn btn-sm btn-outline-danger clear-comp-tasks">Clear completed tasks</a>

Then place inside a function that shows the button only when the task list is greater than 2

if(tasks.length > 2) {
            document.querySelector('.clear-tasks').style.display = 'inline-block';
            document.querySelector('.clear-comp-tasks').style.display = 'inline-block';
            document.querySelector('.filter-wrapper').style.display = 'block';
}

Next is the functionality

First register the event listener to the button.

const clearCompTasks = document.querySelector(".clear-comp-tasks");
clearCompTasks.addEventListener("click", Tasklist.deleteAllCompleted);

Then the functionality

static deleteAllCompleted(){
        if(confirm('This will delete ALL completed tasks')) {
            tasks.forEach(task => {
              if(task.status === 'completed')
              document.querySelector(`[data-id="${task.date}"]`).remove();
            });
            tasks = tasks.filter(task => task.status !== 'completed');
            localStorage.setItem('tasks', JSON.stringify(tasks));
            Tasklist.filter();
        }
}

Overall Thoughts

I realize why everyone loves JavaScript frameworks even more now. As complexity of the app goes up, state management becomes a pain in pure js. It is still fun figuring stuff out though.

Final Thoughts on Release 0.4

Antonio-Bennett — Wed, 15 Dec 2021 01:28:25 +0000

Hey Everyone! As usual the previous relevant post is here.

PR Update

Antonio-Bennett ・ Dec 15 '21 ・ 2 min read

#opensource #rust #osd600

Final Thoughts

Honestly my final thoughts will be quite short. PLANNING PR'S IS A MUST. To be honest at first it felt like hell going through docs instead of just starting to code and figuring it out along the way but honestly the up front cost is noticed in the reduced time to code...if you don't learn something drastically different along the way. Planning my PR was a huge help and made my goals clear when coding. Overall this PR was super fun. I actually think I want to make my own Discord Bot or maybe I will become an active contributor to Parrot :)

PR Update

Antonio-Bennett — Wed, 15 Dec 2021 01:22:28 +0000

Hey everyone! As usual the previous relevant post is here :)

Prepping PR'S

Antonio-Bennett ・ Dec 15 '21 ・ 2 min read

#opensource #rust #osd600

What will we be covering?

Well....I got the code working!! So this blog will go into the code I needed to get this PR done. Honestly it was quite easy but I will get into why in the next blog of my final thoughts. Lets stick to the good stuff in this one :)

Code

So as I said in the previous blog I had to find a way to check if the server where the command request is sent has the DJ role. To do this I have this code

    let guild = msg.guild(&ctx.cache).await.unwrap();
    let mut roleid = RoleId::default();

    for (_, role) in guild.roles {
        if role.name == "DJ" {
            roleid = role.id;
        }
    }

We need the Role id to check if the user has the DJ role. This is how we do that

    let user = &msg.author;
    user.has_role(&ctx.http, guild.id, roleid).await.unwrap()

Now lets discuss the 2 strange variables in there. ctx and msg. ctxis the context of the event fired. This is used when the user tries to use a command to get guild information. msg is the message sent in the discord chat so you can find who sent it and their info.

What I did is then put this code into a utility function so it can be called to conditionally run a command if the user has the required role.

pub async fn author_is_dj(ctx: &Context, msg: &Message) -> bool {
    let guild = msg.guild(&ctx.cache).await.unwrap();
    let mut roleid = RoleId::default();

    for (_, role) in guild.roles {
        if role.name == "DJ" {
            roleid = role.id;
        }
    }

    let user = &msg.author;
    user.has_role(&ctx.http, guild.id, roleid).await.unwrap()
}

It is then used like this in code

    if !author_is_dj(ctx, msg).await {
        //Inform user they do not have the required role
        //return
    } else {
        //Run command
    }

What's next?

Well that was all for this blog! Hope you enjoyed it :) The next blog will be my final thoughts on this experience :)

Prepping PR'S

Antonio-Bennett — Wed, 15 Dec 2021 00:43:52 +0000

Hey Everyone! As usual you can find the previous relevant post below :)

Hacktoberfest Week 2

Antonio-Bennett ・ Oct 16 '21 ・ 2 min read

#opensource #hacktoberfest #rust #osd600

So assuming you read that...here we go!

What are we doing?

For our final class assignment in OSD600 (Open Source Development) we must either implement a new feature or fix a family of bugs in a repo we previously worked on. I opted to go with implementing a new feature.

The Issue

So in Parrot currently anyone can use a command such as !play <song> to or !shuffle which shuffles the songs currently in queue. This issue aims to add a feature where a user can only successfully call commands that modify the queue if they have a DJ Role. This would mean that non harmful commands such as !now_playing which just returns what is currently playing are fine to be used by anyone on the discord server.

How is this going to work?

Honestly I had to rack my brain for a looooong time thinking about this one....I delved into Serenity.rs Docs for hours. FYI Serenity is a library for the discord API written in Rust and is used in Parrot.

After many hours I've come up with a plan. Each discord server is represented as a Guild struct in serenity. It contains may fields such as id, name but most importantly roles which is a HashMap<RoleId, Role> with Role being a struct containing more info about that role such as name and id. The docs for a Guild is here and Role here.

So with this information what can we do? Well now all I have to do is find a way to check if the DJ role is in the server via the Guild struct and then check is the user has said role which can be done via the has_role method on the User struct. The docs on the User struct is here

Next Steps

Well now all I have to do is code! The next blog will be an update which will hopefully be all the coding finished and then finally my overall thoughts in a final blog :) See ya!

Reviewing PR'S

Antonio-Bennett — Tue, 07 Dec 2021 00:25:09 +0000

Hey Everyone :) Been a while...Yeah school is a lot...

Anyways right into business. This is just a quick recap/summary of my thoughts on the process of reviewing PR's which was required for an assignment.

Details

So for this assignment one of the tasks is to review a 2 PR's from a classmate. This was easy enough although it wasn't super substantial, the PR's can be found here and here with my reviews.

Overall Thoughts

Reviewing is just as important as writing code. This becomes even more crucial the bigger and more complex the project gets. Having someone review your code is great for learning as well as a great learning opportunity for the reviewer as well. As I said the scope or the PR's weren't complex so the reviews were a bit meh but it is a good first step into the convention of reviewing :)

Making it easier to contribute to Open Source

Antonio-Bennett — Wed, 10 Nov 2021 04:58:26 +0000

Hello everyone! So this week in my class we had to configure our static site generators to be easier to contribute to. This included adding a CONTRIBUTING.md file and also default format styles etc.

STEP 1

The first thing I did was creating a rustfmt.toml file for default format styles. Rust makes it super easy so all I had was this file which is used via cargo fmt

max_width = 120
comment_width = 100
match_block_trailing_comma = true

STEP 2

I also created a clippy.toml file however it is blank since the defaults for clippy are pretty sane already and I have no need to modify it. I still created the file however to signify that we do use cargo clippy to lint our files.

Step 3

I then created a .vscode folder with a settings.json file that held only 1 line. Which is to format on save for vscode users. (I use neovim). Hopefully I did that correctly...

{ "editor.formatOnSave": true }

Step 4

I then finally bundled the information into the CONTRIBUTING.md file and linked it in my README.md. The commit can be found here

Final Thoughts

This lab made me really appreciate rust's first class support for in built tools to format and lint code easily. It is easily configurable and makes it easy for everyone to collaborate together hassle free.

Meta Programming

Antonio-Bennett — Fri, 29 Oct 2021 22:04:49 +0000

Hey Again! It's been a while since my last blog :)

As usual the previous related blog is right here

Refactoring Code

Antonio-Bennett ・ Oct 16 '21 ・ 3 min read

#opensource #osd600 #rust

Task 1

For this assignment we had to familiarize ourselves with Docusaurus which is created by Facebo- *Cough* Meta. The basic setup can be found here via github pages. It was super easy to setup! I did have a hiccup with github not doing password auth anymore when I tried running the built in deploy script for github pages and the fix was too annoying so I just built and copied the files to my github pages repo.

Task 2

The second task was to also implement a feature of docusaurus. I chose to implement the markdown parsing feature. Although rssg technically had this feature, it was very limited. Only supporting level 1 headers and inline code. To do this we were allowed to use 3rd party libraries, specifically crates in rust.

I chose to use comrak. It is one of the most developed and well known markdown to html crates and is very easy to use. The main logic of my code is very simple and is done as such

    if ext == "md" {
        let file: Vec<&str> = vec_lines.into_iter().skip(3).collect();
        let file = file.join("\n");
        let file = markdown_to_html(&file, &ComrakOptions::default());
        html.write_all(file.as_bytes())
            .expect("Could not write markdown");
        return;
    }

It simply takes each applicable line of the file and converts it to html. That simple. The full commit can be found here

Thanks for reading again and I hope I'm not boring you guys to death yet! :)

Refactoring Code

Antonio-Bennett — Sat, 16 Oct 2021 03:28:02 +0000

Hey Everyone! If you've been keeping up then you know of Rssg my noob level static site generator for my class OSD600 :) The previous post can be found here

Adding New Features to Rssg and Git Merging Branches

Antonio-Bennett ・ Oct 1 '21

#rust #opensource #github #osd600

Task

This week we are supposed to find 3 ways to refractor our code such as renaming variables, separating logic and etc. The goal in doing so is not only to improve our code but also to practice rebasing a git branch. For rssg I decided on refractoring by

returning process exit 0 for main program if there was an error
renaming read_text function to be more specfic on what it does
separated the logic in the process function so it was more readable

Steps

As always if you just want to view the commit is is here

#1

My very first step was refractoring this bad boy

pub fn run() {
    //Takes appropriate action based on arguments passed ex. rssg --input
    read_arguments().unwrap();
}

read_arguments() has code that matches the cli argument and returns an Err if needed however I was calling program::exit(0) in there such as

if env::args().count() == 2 {
    println!("Please enter input. Type rssg --help or -h for more information.");
    process::exit(0);
}

when I could just return the Err like needed

return Err("Please enter input. Type rssg --help or -h for more information.".into());

and then call read_arguments like this

pub fn run() {
    //Takes appropriate action based on arguments passed ex. rssg --input
    if read_arguments().is_err() {
        process::exit(0);
    }
}

#2

This one was very simple but it made a lot of sense

I have a function named read_text that goes through each argument and calls the process function if the argument is a valid file.

pub fn read_text(args: &[String]) -> Result<(), Box<dyn Error>> {
    //Iterate through each input and process
    args.iter().for_each(|arg| {
        if let Ok(mut file) = fs::read_to_string(arg.to_owned()) {
            //Reaches this if the argument was just a filename
            process(&mut file, arg);
        } else if Path::new(arg).is_dir() {
            //Argument is a directory so we have to recursively search the dir
            let path = Path::new(arg);
            visit_dirs(path, &process).expect("Couldn't convert dir");
        }
    });

    Ok(())
}

It is much more appropriately named as process_arguments

#3

Previously my process function which turns the input file into an html file was suuuuuuper convoluted because it basically had an if check with logic in both the if and else for files with and without titles. I separated this logic into 2 separate functions and call them inside the if check instead. This makes the code more readable and easy to follow.

    if vec_lines[1].is_empty() && vec_lines[2].is_empty() && !vec_lines[0].is_empty() {
        process_file_with_title(
            vec_lines,
            &mut html,
            &mut firstline,
            &mut is_header,
            &mut line,
            prev_tag,
            ext,
        );
    } else {
        process_file_with_no_title(
            &name,
            default_content,
            vec_lines,
            &mut html,
            &mut firstline,
            &mut is_header,
            &mut line,
            prev_tag,
            ext,
        )
    }

Rebasing

This was a pretty cool process. You can rebase to pretty much combine multiple commits into one by doing git rebase main/master -i while on the checked out branch. It is a very cool git command to know but I'm not sure on how often I'd honestly use it. It is great though to have it as a tool that I could possibly use in the future :)

Hacktoberfest Week 2

Antonio-Bennett — Sat, 16 Oct 2021 02:01:29 +0000

Hey everyone! My previous week for Hacktoberfest can be read here:

Hacktoberfest Week 1

Antonio-Bennett ・ Oct 8 '21

#opensource #hacktoberfest #osd600 #rust

Project

Let me start off by saying this week was awesome! This week I worked on a discord bot named parrot which is something I've never done before. It is written in rust and is in the early stages of development.

Issue

The issue I was assigned this week was to implement the !playtop command. This command when used will place the requested song or playlist at the top of the queue.

PR

Now let me tell you I racked my brain for a while to think of an elegant solution to this problem. Lets look on how to modify a queue. The modify_queue() function is defined on the type trackQueue and takes a closure as an argument which exposes the queue, which is essentially a vector of songs.

Now imagine we have the queue

let queue = vec![0,1,2,3,4];

The song at index 0 is always the current playing song. So when manipulating the queue it should remain untouched. To do this we can use the split off function to get the rest of the songs.

let mut non_playing = queue.split_off(1);
queue: 0
non_playing: 1,2,3,4

To the place the newly inserted song (called 5 in this case) we can just rotate the non_playing vec to the right by one which preserves the order.

non_playing.rotate_right(1)
non_playing: 5,1,2,3,4

For playlists I calculated the num of songs in the playlist and subtracted it from the length of non_playing so that the first song of the playlist is at the top. Writing this now, in hindsight I could just call rotate_right passing the num of songs in the playlist but meh.

let rotate_num = non_playing.len() - num_of_songs;
non_playing.rotate_left(rotate_num);

Lastly we append non_playing back to the original queue by doing queue.append(non_playing)

The final important bit of code is below. Check out the PR for all the details

fn reorder_queue(handler: &MutexGuard<Call>, is_playlist: bool, num_of_songs: usize) {
    //Check if we need to move new item to top
    if handler.queue().len() > 2 {
        handler.queue().modify_queue(|queue| {
            let mut non_playing = queue.split_off(1);
            if !is_playlist {
                //rotate the vec to place last added song to the front and maintain order of songs
                non_playing.rotate_right(1);
            } else {
                //We subtract num of songs from temp length so that the first song of playlist is first
                let rotate_num = non_playing.len() - num_of_songs;
                non_playing.rotate_left(rotate_num);
            }
            //Append the new order to current queue which is just the current playing song
            queue.append(&mut non_playing);
        });
    }
}

Overall Thoughts

This week was awesome! I loved working on something new and the task was just right in having me explore new ways of solving a problem. I had a ton of fun and I am excited for the rest of Hacktoberfest. Drop any Rust repo suggestions for me in the comments :)