implemneted feature 'add me to your friends' https://github.com/solid/profile-pane/issues/8

[timea-solid]

Added the new 'Add me to your friends' button under profile (see screenshot).

The test case with logged in user will change when auth changes.

[bourgeoa]

@theRealImy I shall try it tomorrow
2 questions on the code. I'm a non professional :

• why possitive with double s
• rdflib is called either directly or through UI. These may differ version. It is a general point in solidos

[timea-solid]

I improved the code as suggested.

@theRealImy I shall try it tomorrow
2 questions on the code. I'm a non professional :

* why possitive with double s

* rdflib is called either directly or through UI. These may differ version. It is a general point in solidos

[bourgeoa]

There seem to be 2 issues partly related :

• the addMe button should be Greyed when not usable : no new friend to add (already exist or not logged in)
• you should not be able to add yourself to the friend's list

[timea-solid]

I've improved the code based on the feedback.
However to keep UI consistent with the 'Chat with me' button which is also displayed on the profile pane, i did not add a greyed out button but followed same design like 'Chat with me'. I propose revising button design afterwards, for all buttons.
For now:

• if one is not logged in the button is like the 'chat with me' without filling

• the button is active and if pressed one gets the same error message like on Chat with me:

• if one is logged in and friend does not exist, the button gets a filling like:

• if friend is added a message appears:

• if I log in and I already have this friend in my list I see a different message on the button:

• If I still press the button even if 'Already part of friend list' I get a message like:

Part missing which I am not sure if it should work: button design is not refreshed after clicking it, should the UI have this behaviour? Also, I noticed that the data is not really updated real-time.
Example:

• I add a new friend by using the new button
• I go to my pod and delete the friend again (manually)
• I try to add the friend again (but I did not refresh the page yet)
• friend is not added. -> Code wise, I do a store.fetcher.load(webId) before I do a store.whether(statement) but it still shows that the dedicated ns.foaf('knows') statement exists, so the friend is not added because it shows it exists already. Not sure if store.fetcher.load should know of the changes on my pod already... or am I missing another function call in between?

[SharonStrats]

Really great work! It's working very nicely. I will make further comments on your branch in your repository if I find code suggestions.

Ideas: I'm wondering in the case the user is not logged in, could the button say something like "login to add me to your friends".

it should be updated realtime. I will do some research on this, because I don't know off the top of my head how this happens. But it does happen with addresses for instance. If you click to add a new contact, it will pop back and tell you it was created. Actually I see what you mean, it changes somewhere else and do the changes take effect without a refresh... hmm I'm not sure about this.

[SharonStrats]

Really great work! So exciting!

some additional more general suggestions. Right now there don't seem to be unit tests in general, but for this I think it would be good to have them. Just for your helper functions. So if you do create the folder friends and you have the helper.ts, you could just have one unit test file helper.test.ts to test your helper functions.

Awesome work 🥳!

[SharonStrats]

In this case maybe it's appropriate to add a message style to baseStyles and add it in the same way as styles = .. styleMap. If there are specific styles to friends you can also create another file called perhaps friendStyles.

[SharonStrats]

Here, see @timbl comment in Gitter regarding the styles should be from solid-ui and use setStyle(). I will see if I can find an example and add here. The file to find them in is solid-ui/src/style.js and you can add a style here that you need. I see something called messageBodyStyle... this is something to look at although I don't know if it's exactly what you need. I will do some more research for this as well, as we definitely have errors in other places. I'm going to make another ticket though for styles in general as to make it easier to read in solid-ui I think we should perhaps have more than one style.js file going forward.

[SharonStrats]

I actually couldn't find many examples but here is one head = table.appendChild(dom.createElement('tr')); style.setStyle(head, 'autocompleteRowStyle'); // textInputStyle or. I also think solid-ui/src/messageArea.js is worth checking out for error messages. I can't be sure about this but something to look into.

[timea-solid]

regarding styles, i did not change so much because it will cause inconsistencies on the Profile Pane. I propose opening an additional ticket with topic - align profile pane styles with UI - which goes beyond this button.

[timea-solid]

Really great work! It's working very nicely. I will make further comments on your branch in your repository if I find code suggestions.

Ideas: I'm wondering in the case the user is not logged in, could the button say something like "login to add me to your friends".

it should be updated realtime. I will do some research on this, because I don't know off the top of my head how this happens. But it does happen with addresses for instance. If you click to add a new contact, it will pop back and tell you it was created. Actually I see what you mean, it changes somewhere else and do the changes take effect without a refresh... hmm I'm not sure about this.

I updated the button text as mentioned.
I also added more tests.
Regarding refresh - this is a TODO

[timea-solid]

I changed the button message as follows:

[timea-solid]

refresh also implemented now

[timbl]

I’m inclined to merge it on the basis that as it is new functionality it won’t break any existing stuff even if it doesn’t work, and merging it the best way of getting people to play with it.

[timbl]

Merge despite checks failing because npm-publish failure at this stage is bogus, should not apply once merged.