[WIP] [Systems-Development-and-Frameworks] Storybook for reported content

Created by: Tirokk

Authored by roschaefer Oct 22, 2019 Closed Dec 11, 2019

---

🍰 Pullrequest

This is the new exercise for the course "Systems Development and Frameworks". As a user you can report content that violates the community guidelines. It will show up in such a list:

What we didn't thought of is that multiple users could report the same thing. So a moderator should see all reports grouped by resource, e.g. one post and a list of all users who reported the post and when.

Relates to #1710 (closed) .

See moderation page:

1. Visit https://nitro-staging.human-connection.org/
2. Log in as moderator@example.org and password 1234.
3. Click on the avatar menu and choose Moderation.

Where is the code that renders the list?

It is here: https://github.com/Human-Connection/Human-Connection/blob/master/webapp/pages/moderation/index.vue

How can I report someting?

1. Visit https://nitro-staging.human-connection.org/
2. Log in as any user, you can choose huey@example.org or dewey@example.org etc. and password 1234
3. Click on the context menu of a post or comment or the context menu on the user profile page. You must not be this user or must not be the author of this post or comment.

Task 1: Refactor

All the code which is relevant to show a single line in the table should be moved into this component:

https://github.com/Human-Connection/Human-Connection/blob/storybook_for_reported_content/webapp/components/ReportedContent/ReportedContent.vue

Import the component on the moderation page component ☝

Refactoring is started in #1954 now.

Task 2: Write a storybook story

You can find the storybook story here: https://github.com/Human-Connection/Human-Connection/blob/storybook_for_reported_content/webapp/components/ReportedContent/ReportedContent.story.js

It would be great if you could write data to show the ReportedContent component if the content is a Post a Comment or a User respectively.

Task 2.1: Implement the moderation "log"

As described in the screenshot above ☝ we didn't really think of a resource being reported multiple times. The desired behaviour now is to group all reports by resource and also show if a moderator has disabled or enabled a resource. This list is called "log" (don't know if that's a good name 🤔). But I sketched the data in here: https://github.com/Human-Connection/Human-Connection/blob/storybook_for_reported_content/webapp/components/ReportedContent/ReportedContent.story/data.js

So the goal is to list this log just below the row with the reported resource.

Task 3: Write a component test

You can find a blueprint for a component tere here: https://github.com/Human-Connection/Human-Connection/blob/storybook_for_reported_content/webapp/components/ReportedContent/ReportedContent.spec.js

In the test you could e.g. test:

• links to the reported content
• given the content is not disabled
  • it shows a dash in the column Disabled by
• given the content is disabled
  • it shows who disabled the content