Forums & News

The Voluntarily Platform allows people on the platform to publish information about what is going on and optionally allows others to comment on those stories. The underlying forum engine provides the following features:

 

To support these features we provide a forum engine. This consists of

  • Database collection for stories.

  • Story edit form and display components

  • Database collection for comments and threads

  • Comment edit form and display component

 

Q&A Pages are made possible allowing comment trees to have an opportunity or activity object as a parent.

Story Entity

A story consists of:

_id - storyID

name - the title of the story, single line shown as a heading

( we use name rather than title so that these items are consistent with other Card components)

imgUrl - the primary image illustrating the story.

subtitle - a short text that shows on a Card view of the story.

content - the rich text content

author - PersonID for the author

organisation - OrganisationID for story author originator

tags - array of tag strings, used to filter stories e.g. for landing page.

dateAdded, dateUpdated- automatic fields for creation and update dates

 

Stories intentionally have similar structure to Ops and Acts i.e. name, subtitle, imgUrl etc.

Change requestor to author across the board. This allows Opportunities and Activities to have comment threads that attach directly to the entity details page.

Comment Entity

Any entity with an ID can effectively have a comment stream.

A comment consists of

_id: comment ID

comment - rich text

author - personID of person writing the comment

dateAdded, dateUpdated- automatic fields for creation and update dates

forum: ObjectID - any entity, comment means reply otherwise it is the containing story, op, act etc. (Index) this is the forum that the comment thread belongs to.

parent: commentID - creates the tree structure of comment threads and replies.

When displaying a comment stream for an object search the collection for items with the matching owner id.

 

Story Display Components

StoryList

Container for a grid of StoryCards, sorted by date (or other).

StoryCard

Summary card for a story, Shows image, title and subtitle, click on the card to open page showing the story.

Subtitle can be a few lines of a summary of the content.

StoryDetail

Full page for a story

StoryHeader

Header section shows the main image, name, subtitle, post date, author and author’s organisation (if set)

StoryBody

The content section shows body content in A4 style page,

StoryComments

Comments section shows tree of comments associated with the story.

StoryForm

Edit form for a new or existing story.

fields for

name (labelled title)

subtitle (or extract)

content

tags list

publishedBy - listed from available memberships list of the author (as per opportunity). Note only people belonging to an org can create stories. AP, OP, OrgAdmins but not VPs.

Stories are listed under the organisation profile page or on the landing page and news feed if tagged appropriately.

Buttons for Save as Draft | Publish | Retire

Retire means keep the story in the archive but don’t list on feeds and org page. i.e same as draft.

 

Comment Display Components

Comment

Text block associated with avatar of the writer.

Extra details available on click/hover - date posted,

MyComment

A comment that I am the author of.

As for Comment but followed by a small links menu for edit, remove

Styled so I can see my comments (background colour)

AuthorComment

A comment that has been written by the author of the containing forum( op, act, story)

Styled differently so that readers can see the authoritative answers.

CommentTree

A page section displaying a tree of comments associated with the same story or entity.

Comments are ordered by date (or rank if ranked)

Top-level comments are those that have no parent id. These are displayed aligned left. with a slightly larger vertical margin between comments.

Child comments (replies) are those that have a parent Id. These are displayed immediately under and indented to their parent. Indentation stops after 4 levels to avoid going off to the right of the page.

Vertical margin is smaller so they are closely associated with the parent.

CommentForm

An inline component opened when someone clicks on a Comment or Reply link. Shows the standard rich text editor. with Save/cancel buttons.

This is a good time to test out the in-place editing.

We don’t need full-on Antd forms here. Just an input and button - use hooks. This because there’s no validation to do and only a single field.