Steps to reproduce

1. Create a react application with create-react-app
2. Install 3box-comments-react
3. Import it in some file

Result:

./node_modules/3box-comments-react/lib/index.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./node_modules/3box-comments-react/lib/index.scss)
To import Sass files, you first need to install node-sass.
Run `npm install node-sass` or `yarn add node-sass` inside your workspace.

Looking into node_modules/3box-comments-react/lib/index.js I noticed a require("./index.scss") so I guess the problem is webpack not properly creating the build. Weird, since the sass-loader seems to be used correctly in Webpack's config.

I guess (but didn't try it) that this can be solved by configuring sass in the app that uses this component, but I think this should be fixed in the library.

How can we connect this component to the broader site log-in?

Show the delete option on a comment even before having logged in and joined thread.
If user hasn't logged in and chooses to delete, start the join thread process and then delete the comment.

Please see: protofire/omen-exchange#903

Comments Plugin Upgrade / Make 3Box Comments more social with Replies, Reactions, and Upvotes

Prize Bounty

900 DAI

Challenge Description

Enhance the 3Box Comments react plugin by adding social features including replies, reaction emojis and upvotes/downvotes. These features will bring improved socailbility, not just to 3Box, but instead to every dapp that uses the plugin. We are looking for a submission that only makes changes to the plugin. There is no need to alter the 3Box Threads API used by the plugin.

Guidance:
It is not possible to alter another persons comment in a thread. To complete this bounty, it will be necessary to create the response (comment, reaction emoji or upvote/downvote) and append it as a new item to the thread. The response should include a reference to the original comment or post. We would only like to allow 2 levels of nested replies - i.e. you can reply to a comment, and reply to a reply. The react component can then filter the thread to display the response in relation to its origin comment.

Resources

Discord Chat for support: https://discord.gg/VSG5NnY

Documentation: https://docs.3box.io/build/plugins/comments

Demo: https://3box.github.io/3box-comments-react/examples/dist/

Submission Requirements

• Open source code in the form a PR forked from our [Comments Plugin repo](https://github.com/3box/3box-comments-react](https://github.com/3box/3box-comments-react)
• PR should include a description of your solution and the schemas you implemented for the various response types
• A hosted, working demo of the plugin, similar to the demo linked above
• Support for all major web3 enabled browsers
• Share your submission in our Discord in the Comments channel
• Add the label Gitcoin Global Communities Hackathon to your PR
• Comments plugin currently works in both Javascript and Typescript projects, this improvement should maintain compatibility

Submission Deadline

December 17th 2019

Judging Criteria

Once the hackathon has finished, we will judge the submission on the following criteria:

Working Demo: We will be looking for a working and performant demo. This can be hosted on github pages, netifly or any location that we can access.

Intuitive User Experience: We are looking for submissions that most mirror the experience users are familiar with, and the experience that already exists in the component. Delighting the users is also important, but only after functionality is achieved.

Code Review: Submissions which meet our requirements in terms of UX, design and performance will be code reviewed by the 3Box team. We are looking for clean, easy to read code.

Winner Announcement Date

20th December at the latest

Test in it's own react app, another react app, and on mobile envs

• Reactions
• Replies
• Upvotes
• Max nesting 2
• Deleted comments

Doesn't seem to support Typescript, no index.d.ts file present...
Also tried via npm i @types/3box-comments-react ... but got 404
Please add this ASAP!
Should be quick :)

Some things like disqus-react, simple-react-comments and others. See if we can fork an existing repo to get going.

Output should be a Notion doc.

Maybe even add to ui?

When the user declines to login, or there occurs any kind of error, in the loginFunction callback, we need to behave gracefully. However, what happens is that you show a neverending spinny icon:

And there is a console error:

How can we abort more gracefully?

Using "3box-comments-react": "^3.0.1"

This line:

is triggering this exception:

TypeError: Cannot read property 'image' of null
instrument.ts:129
message:"Cannot read property 'image' of null"
stack:"TypeError: Cannot read property 'image' of null
at Input.render (webpack-internal:///./node_modules/3box-comments-react/lib/components/Input.js:331:58)

STEPS:
I'm not sure if I have narrowed this down to the smallest possible conditions.

<ThreeBoxComments
            [irrelevant attributes]
            box={a 3Box instance}
            currentUserAddr={a valid account address}
            currentUser3BoxProfile={a valid 3Box user profile}
          />

<ThreeBoxComments
            [irrelevant attributes]
            box={undefined}
            currentUserAddr={undefined}
            currentUser3BoxProfile={undefined}
          />

RESULT: crash
EXPECT: no crash

I've been stuck for quite a while trying to update from v0.0.8 to v3.0.5. The general behaviour I receive is the number of comments loading, but the comments themselves failing to load and comment submission hangs forever.

After trying to submit a comment I receive the following error in the console: Uncaught (in promise) TypeError: Cannot read property 'hash' of undefined. Additionally, I've also received the following error on load: InitalizationError: Must provide a location for the database

I am running [email protected], and I've tried clearing all dependencies and reinstalling them to no avail.

For more info, and code, please see: protofire/omen-exchange#1064

This is useful for when the component does not have access to your current address to show you the delete option.

I am unable to get loginFunction to fire, no matter what set of props I pass in to the ThreeBoxComments component.

This means I will need to hide the comments until users click some kind of login to 3box button which is not ideal.

There's no way to delete a comment without creating one first

Hi, I'm currently having a problem using this package with parcel.

Since I'm not sure what's the real issue, I also opened an issue in parcel repo as well.

I created a repo with a minimum reproducible example of the problem:
https://github.com/hbarcelos/3box-comments-issue

Could you just use webpack, since it already works there?
Yes, I could, however I am already too invested in parcel for this particular app. I would rather avoid the webpack configuration hell if possible.

I am not seeing any comments displayed, even though both currentAccountAddress and currentAccountProfile are set (3box isn't).

This document states:

Without authenticating, users can only read messages in the comment thread.

So I expect I should be able to see all comments in the thread.