Added number badge to comment icon

[naiknareshh]

Description

Added comment count number badge to comments icon in play

Fixes #154

Type of change

Please delete options that are not relevant.

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

How Has This Been Tested?

Open the Plays to check if proper comment count is getting displayed for all plays.

Checklist:

• [X] I have performed a self-review of my own code
• [X] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [X] My changes generate no new warnings
• [ ] I have added tests that prove my fix is effective or that my feature works
• [ ] New and existing unit tests pass locally with my changes
• [X] Any dependent changes have been merged and published in downstream modules

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-play	✅ Ready (Inspect)	Visit Preview	May 27, 2022 at 10:55AM (UTC)

[koustov]

I don't see the count appearing on the badge

[naiknareshh]

Getting CORS issue after deployment. I am still looking into that

[atapas]

Getting CORS issue after deployment. I am still looking into that

In case you need details like discussion id, and repo id to get it authenticated way, I can provide them for this branch. Please let me know.

[atapas]

I don't support that

Hey @Programming-School-Pro-Coding What do you mean? I didn't get you.

[MOHAMED-EHAB-DEV]

I don't support that

Hey @Programming-School-Pro-Coding What do you mean? I didn't get you.

The number badge looks ugly

[atapas]

I don't support that

Hey @Programming-School-Pro-Coding What do you mean? I didn't get you.

The number badge looks ugly

It is under implementation. Also, please be polite in giving review comments. It is perfectly fine to have opinions, but better to put them in an encouraging way.

Having said that, if you have an alternate design for it, please propose it. It is open source, we would love to get it evaluated and consider. Thanks!

[MOHAMED-EHAB-DEV]

I don't support that

Hey @Programming-School-Pro-Coding What do you mean? I didn't get you.

The number badge looks ugly

It is under implementation. Also, please be polite in giving review comments. It is perfectly fine to have opinions, but better to put them in an encouraging way.

Having said that, if you have an alternate design for it, please propose it. It is open source, we would love to get it evaluated and consider. Thanks!

I am sorry but english is not my official language

[atapas]

@naiknareshh I was looking into the call goes when we open the comment panel. How about tapping on this request to get the comment count?

[naiknareshh]

@atapas The original idea was to make the exact same call from our application and extract the comment count but that is not working because 'access-control-allow-origin' header in the giscus app is set to 'http://giscus.app' so our requests are rejected by the browser and we shall not be able to make any requests from our browser until we are able to find a way to not set the 'origin' header in our request.

Tapping the request that is made by the Giscus component is problematic because the request is only getting called when we click on the comments icon to load the component.

Let me know if you have any suggestions

[atapas]

@atapas The original idea was to make the exact same call from our application and extract the comment count but that is not working because 'access-control-allow-origin' header in the giscus app is set to 'http://giscus.app' so our requests are rejected by the browser and we shall not be able to make any requests from our browser until we are able to find a way to not set the 'origin' header in our request.

Tapping the request that is made by the Giscus component is problematic because the request is only getting called when we click on the comments icon to load the component.

Let me know if you have any suggestions

Are there any settings on Giscus we need to see? There is an emit metadata option that I read a while back.

[naiknareshh]

@atapas there must be an option to add origins which should be currently set to "https://giscus.app" if we can add "https://www.reactplay.io" to the list then it should solve the problem.

{ "origins": ["https://giscus.app"] }

https://github.com/giscus/giscus/issues/104

[atapas]

@atapas there must be an option to add origins which should be currently set to "https://giscus.app" if we can add "https://www.reactplay.io" to the list then it should solve the problem.

{ "origins": ["https://giscus.app"] }

giscus/giscus#104

I see it in the configuration: Can you please try by setting crossorigin="anonymous" in the Comment.jsx file?

https://github.com/atapas/react-play/blob/main/src/common/components/Comment.jsx

<script src="https://giscus.app/client.js"
        data-repo="[ENTER REPO HERE]"
        data-repo-id="[ENTER REPO ID HERE]"
        data-category="[ENTER CATEGORY NAME HERE]"
        data-category-id="[ENTER CATEGORY ID HERE]"
        data-mapping="pathname"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="light"
        data-lang="en"
        crossorigin="anonymous"
        async>
</script>

[atapas]

@atapas there must be an option to add origins which should be currently set to "https://giscus.app" if we can add "https://www.reactplay.io" to the list then it should solve the problem. { "origins": ["https://giscus.app"] } giscus/giscus#104

I see it in the configuration: Can you please try by setting crossorigin="anonymous" in the Comment.jsx file?

https://github.com/atapas/react-play/blob/main/src/common/components/Comment.jsx

<script src="https://giscus.app/client.js"
        data-repo="[ENTER REPO HERE]"
        data-repo-id="[ENTER REPO ID HERE]"
        data-category="[ENTER CATEGORY NAME HERE]"
        data-category-id="[ENTER CATEGORY ID HERE]"
        data-mapping="pathname"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="light"
        data-lang="en"
        crossorigin="anonymous"
        async>
</script>

@naiknareshh Any luck with it?

[atapas]

Hello @naiknareshh

We will be moving the react-play project from the atapas account to an organization to help manage the project in a better way. The new organization URL is: https://github.com/reactplay.

The movement will take place between 12:30 - 14:00 hrs IST(7:00 am - 8:30 am GMT), 30th May 2022. Please refrain from pushing any changes between this time.

We will inform you when the movement is complete. You need to make a few minimal configuration changes after that. We will let you know.

[atapas]

Hello @naiknareshh

We will be moving the react-play project from the atapas account to an organization to help manage the project in a better way. The new organization URL is: https://github.com/reactplay.

The movement will take place between 12:30 - 14:00 hrs IST(7:00 am - 8:30 am GMT), 30th May 2022. Please refrain from pushing any changes between this time.

We will inform you when the movement is complete. You need to make a few minimal configuration changes after that. We will let you know.

The migration is complete. You can find the project here: https://github.com/reactplay

You no need to reclone the project. You just need to set the correct upstream. Here is the link: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-for-a-fork

[atapas]

@naiknareshh Any update on this one?

[atapas]

Hi @naiknareshh

A reminder to get back on this PR. This PR may be closed due to a lack of activities soon. Please let us know if you need any help.

Looking forward to getting the response.

[naiknareshh]

Hi @atapas, I have not been able to find a simple solution to this problem yet. Please let me know if you have any ideas, I've tried all the suggestions you gave earlier. :(

[Angryman18]

this PR is halt

[atapas]

Closing this PR as No Response for close to a couple of months. Please request to open if still working on it.