Issue 25 gh projects imptovement infer tech from language and topics

[nkapolcs]

Issue #25
Currently GH project tech info in configurable by hand, but we could extend it so that it can auto-infer some things.

Changes:

• fetch languages from github
• create logic
• display languages
• write documentation for languages threshold

Preview:

[nkapolcs]

For now, I display the same as the medium, but maybe we could use icons if you prefer.

[gomorizsolt]

Left a few comments, overall looks good!

For now, I display the same as the medium, but maybe we could use icons if you prefer.

From my side, it's fine as-is for now.

[gomorizsolt]

On second thought, how about making the logic more "reactish"? :)

const [languageBadges, setLanguageBadges] = useState([]);

useEffect(() => {
   if (githubRepoLanguages.data) {
      const sum = Object.keys(githubRepoLanguages.data).reduce(...);

      // filter the badges according to the treshold
      const badges = // ...
      
      setLanguageBadges(badges);
   }
}, [githubRepoLanguages.data]);

Please make sure there's no infinite re-renders(because data points to a reference). If so, let's use useMemo().

[thisismydesign]

For now, I display the same as the medium, but maybe we could use icons if you prefer.

This should follow the display setting.

[nkapolcs]

On second thought, how about making the logic more "reactish"? :)

const [languageBadges, setLanguageBadges] = useState([]);

useEffect(() => {
   if (githubRepoLanguages.data) {
      const sum = Object.keys(githubRepoLanguages.data).reduce(...);

      // filter the badges according to the treshold
      const badges = // ...
      
      setLanguageBadges(badges);
   }
}, [githubRepoLanguages.data]);

Please make sure there's no infinite re-renders(because data points to a reference). If so, let's use useMemo().

Thanks for suggesting. Now I solved it with hooks.

Resolved by a72c1f4

[nkapolcs]

For now, I display the same as the medium, but maybe we could use icons if you prefer.

This should follow the display setting.

Resolved by a72c1f4

[gomorizsolt]

I don't really get the logic inside of useEffect(), left a few questions.

[nkapolcs]

How about making this even simpler?

const languages = Object.keys(githubRepoLanguages.data).filter(
    language => {
        const currentNumberOfBytes = githubRepoLanguages.data[language];

        return (
            (currentNumberOfBytes / sumOfNumberOfBytesOfLanguages) * 100 >
            threshold
        );
    }
);

This way you don't need to iterate over the array twice.

Thanks!

Resolved by 0d74fcc