[SavedItems] Nest topics inside the subject and awesome-list name

[carolinaknoll]

Nest topics inside the subject and awesome-list name, so they don't need to be repeated for every topic that came from the same list or subject.

As an example, what currently is shown as:

• Front-end Development > HTML
• Front-end Development > CSS

Would be changed to show:

• Front-end Development
  • HTML
  • CSS

[pelonchasva]

Hi Carolina,

Can I take this issue? Seems interesting to practice some JS skills :)

Regards

[carolinaknoll]

Hi, @pelonchasva,

That would be awesome! Thanks for taking your time to contribute to the project! 😄

Feel free to open your PR in October if you would like it to count towards your Hacktoberfest shirt.

Thank you! 😄

[katherine95]

@pelonchasva how is solving this issue coming along?

[pelonchasva]

@katherine95 I was working on it already but since I just moved out to a new apartment, I don't have an internet connection yet, so I haven't finished it :(, I will try to upload the code as soon as possible.

[carolinaknoll]

Hello @katherine95 and @pelonchasva! 😀

@pelonchasva, I know how moving out can be tiring sometimes. Not just because of the internet, but because of the countless boxes and things to organize as well. It's okay, don't rush it.

Since @katherine95 seems interested in this issue as well, can both of us three agree in organizing a date for it? Like, if for some reason @pelonchasva isn't able to work on this and submit a PR by, let's see... October 10th, then @katherine95 can take over it.

Does it sound fair for everyone?

Thank you!

[katherine95]

This sounds fair enough. Let's hear @pelonchasva's thoughts

[pelonchasva]

Hi @carolinaknoll , @katherine95 ,

I think you can continue working with this, since I still don't have an internet connection setup and it is taking a while to get it installed 😢 , you can take the issue, and if for some reason I am able to continue working on it later, will gladly let you know 😄 .

If it helps, my approach was close, it was grabbing the list of subtopics and applied a reduce function on the list, compare the values in an array to check if the upcoming words will match the previous, if they matched, they were marked as child from the previous item.

I will try to post my code later when I have a reliable connection.

Thanks!

[katherine95]

Let me take it up. Thanks @pelonchasva

[carolinaknoll]

I see, @pelonchasva those are a bit of sad news, you were so close!

All right, I will be handling this one to @katherine95 then.

But don't worry, I plan on creating a few new issues for the project during this week, so if you can't find any other project you feel comfortable working, you can come back here and see if there is something that you'd like to do.

In any case, I sincerely thank both of you for taking your time to contribute to the project. 😄

You rock! 🚀

[katherine95]

Did anyone face this when trying to start the server?

[carolinaknoll]

Hello @katherine95, are you sure that this is from our project?

I double checked it just in case, and everything seems okay here.

[katherine95]

It has worked. Thanks, @carolinaknoll. I am trying to reproduce this issue but I think I am missing it, am I supposed to fix nesting subject sub-topics? For example the one in the screenshot below?

[carolinaknoll]

I see, @katherine95, that's a really important point! 😮

I think it would be okay if you just added a new nesting level. In fact, this is an issue that, as your screenshot shows, also appears to be visible in the left navbar.

Is it possible for you to just nest them again? For example:

• Front-end Development
  • CSS
  • CSS - Critical-Path Tools

You can reuse the current bookmark icon if you'd like and just add a bit of padding to represent this 3rd level of nested elements.

I hope it can help. Please let me know if you need anything else.

Thank you!

[katherine95]

Thank you for the response. Let me start working on it and see how it goes.

[pelonchasva]

Hi @carolinaknoll , @katherine95 ,

Still working on this? I'm sorry for being late on this, I was really busy at work and traveling 😞 , but I finally gave myself some time to continue working on this issue, and I made some progress on it.

The solution I came up with is this:

getTopicSubjects = (data) => {
    let subjects = [];

    if (!data) {
      return subjects;
    }

    let lastParent = null;

    data.reduce((a, e) => {
      let name = e.name;

      let filtered = Object.keys(a).filter((item) => {
        return name.startsWith(item);
      });

      a[name] = name in a ? ++a[name] : 0;

      if(filtered.length === 0){
        lastParent = name;

        subjects.push({ 'Topic': name, 'TopicData': e, 'Subjects': [] });
      }

      if (lastParent) {
        let subject = subjects.filter((item) => {
          return item.Topic === lastParent;
        })[0];

        if (subject) {
          if (subject.Subjects.filter((obj) => { return obj === e; }).length === 0) {
            if (name !== lastParent) {
              subject.Subjects.push(e);
            }
          }
        }
      }

      return a;
    }, {});

    return subjects;
  }

Some explanation:

• An auxiliar variable:
  • LastParent: Used to store the last time a parent topic was found
• It uses a reduce function over the data values to filter the items by name
• By creating a filter we can check if the next item from the reducer is already part of the final object
• If the filtered data is 0, it means it is a new item, so we can say this is a 'parent' topic, we store the value in LastParent variable and create a new object inside the subjects variable using these properties:
  • Topic: The name of the parent element
  • TopicData: The object of the topic containing the regular data
  • Subjects: An array containing the full list of objects that are related to the parent topic

The following code checks if a parent topic was found, if so, it filters the current subjects where the topic is the same as the last parent.

If a subject was found, it will filter that subject items in order to match the current object element in the reducer, and in order to avoid duplicate entries, if the current object name is not the same as the last parent, we can add it, otherwise it will be skipped.

if (lastParent) {
    let subject = subjects.filter((item) => {
        return item.Topic === lastParent;
    })[0];

    if (subject) {
        if (subject.Subjects.filter((obj) => { return obj === e; }).length === 0) {
        if (name !== lastParent) {
            subject.Subjects.push(e);
        }
        }
    }
}

Here is a code snippet to showcase how it works (note that you should open the developer console in order to see the result).

The only thing that is missing here is the styling, and since I'm not really a designer, to be honest, if I try to fix it, maybe it will end up pretty bad, so that part would be for someone else 😄.

What do you think of this? Maybe it is not the fanciest solution, but for what I have seen, it is working fine 😆 .

Regards!

[carolinaknoll]

Hello @pelonchasva, you really spent a lot of time creating this solution! 😮

You created a very nice algorithm, and from what I see it does everything it should. Don't worry about the design, it is perfect! 🎉

I am so sorry to keep you waiting - I got a new job and with so many new things to absorb, I ended up not paying enough attention to this project (and your work!).

By all means, please submit a PR with your solution if you'd like! I will review it and change anything else that is needed (if there actually is, since you did an awesome job!).

Thank you for spending time on this, even though Hacktoberfest is over. It shows you really care and kept your word until the end. I wish many good things happen to you. 😄

[VitorFigm]

Guys, please help report @devsquadcore for phishing scam. Here is a screenshot before he deletes the comment:

@Val-Costa, @Mourishitz, @Ana-ovidio, @aislondenner, @Caio-Dantas, @joaopaulosg21, @Joaovitor256, @gabrielmaia2, @JosenildoVicente, @raul224, @rafaelsandroni, @joaomateuus, @richardhfc, @Kleito-16, @guimaemanuelc, @vgualda, @WandersonFontes, @Lucciah, @willianmenezes, @Fptbb, @joaopedrofn, @rafaelcarvalhoj, @KaiqueeFigui, @HelioLeoesEC, @rtrancozo, @rafaelc-teixeira, @marcoffee, @VitorFigm, @Stratham, @luccaneivas, @ramonsevilha, @samuelmarco-dev, @santiagoidu, @pedrosekine, @Zellps, @wilamigomes, @mp-oliveira1, @RubensRafael, @FabioBL, @jcesar0, @samuelramox, @garbinmarcelo, @impcds, @Solon97, @marcoskloss, @ryuvi, @Diogo-Esteves, @pedroosz, @diogocaribe, @scorsoni

Don't fall for it.