Discussions Management Widget

Welcome to Fans United Discussions Management Widget. The widget allows staff members with sufficient permissions to manage posts, users and moderation in discussions. You can use this widget as it is and embed it in your platform, or you can use the Management Panel to manage Discussions. Discussions are comment sections where users can create, update, delete posts (comments), can react to posts, report them and etc. With successful installation, you can manage the posts, users and moderation in Discussions.

Installation and usage

The easiest way to use fansunited-widget-discussions-management is to install it from npm as follows:

npm  install  fansunited-widget-discussions

or:

yarn  add  fansunited-widget-discussions

Here is an example how you can integrate Fans United Discussions Management Widget:

import  'fansunited-widget-discussions/style.css';
import { ClassicQuizManager } from  'fansunited-widget-discussions';

const  App = () => {
return (
<DiscussionsManager
	fansUnitedApiKey={'your-api-key'}
	fansUnitedClientId={'your-client-id'} />
);
}

Notes

• The widget is bundled as a React component and its usage is as simple as the above example

• Don't worry about your project's CSS. The widget's styling is done with Tailwind CSS and all classes are prefixed to avoid collisions with your existing CSS. This means that the widget's CSS will NOT affect yours. One important thing is that you need to import style.css file from package folder:

import 'fansunited-widget-discussions/style.css';

N.B: If you are using an entry point for importing all your stylings, you need to import fansunited-widget-discussions/style.css there as well

• Easy translation in every language. For more information check our Translation heading.

Props

type  DiscussionsManagerProps = {
	fansUnitedApiKey: string;
	fansUnitedClientId: string;
	fansUnitedLanguage?: string;
	fansUnitedEnvironment?: string;
	labels?: LabelsModel;
};

Fans United Classic Quiz Management Widget depends on Fans United JS SDK and Fans United Client API. Thats why fansUnitedApiKey and fansUnitedClientId are required. They will be provided to you from Fans United team. For other optional props here is some information:

• fansUnitedLanguage - for our sports APIs FansUnited platform supports different languages. For now they are Bulgarian (bg), English (en), Romanian (ro), Greek (el), Slovak (sk), Serbian (sr) and Hungarian (hu). If no value given it will be set to English (en).

• fansUnitedLanguage - You can run the widget in the following environments: staging, production and watg. If no value given it will be set to production (prod).

• labels - you can easily translate all labels, UI messages, descriptions, placeholders and etc. with this prop. By default, Fans United Match Quiz Management Widget is available in English so if no value is given, the widget will be translated in English.

Translation

You can easily translate Fans United Discussions Management Widget in your language! You just need to pass an object to labels prop with concrete keys and values and that's it! Here's an example how you can do it:

import  'fansunited-widget-discussions/style.css';
import { DiscussionsManager } from  'fansunited-widget-discussions';

const  labels = {
	userNotFound:  'User not found. Please try again',
	noPostsFound: 'No posts found',
	posts: 'Posts',
	users:  'Users',
	dictionary: 'Dictionary',
	sortSelectPlaceholder: 'Sort posts...',
	typeSelectPlaceholder: 'Type posts...',
	moderatedLabelCheckbox: 'Moderated posts',
	deletedLabelCheckbox: 'Deleted posts',
	profileIdsSelectPlaceholder: 'Type the name or nickname of the profile...',
	discussionsSelectPlaceholder: 'Type the label of the discussion...',
	loading: 'Loading...',
	noOptionsMessage: 'No options were found for the provided value',
	moderated: 'MODERATED',
	onDate: 'on date',
	reason: 'Reason',
	user: 'User',
	deletedAt: 'Deleted at',
	showOlderVersions: 'Show older versions',
	moderateLabel: 'Moderate',
	timeFormat:  'HH:mm, DD.MM.YYYY',
	inDiscussion: 'in discussion',
	moderationInfo: 'Moderation info:',
	byStaffMemberWithId: 'By staff member with ID:',
	at: 'at',
	na: 'N/A',
	filterBy: 'Filter by:',
	sortBy: 'Sort by:',
	moderatePosts: 'Moderate selected posts',
	previous: 'Previous',
	next: 'Next',
	name: 'Name',
	tier: 'Tier',
	points: 'Points',
	moderate: 'Moderate',
	ban: 'Ban',
	deleteLabel: 'Delete',
	moderateLinks: 'Moderate links',
	moderateLinksDescription: "When enabled, all links will be replaced with 'https://***'",
	allowedUrls: "Allowed URLs",
	forbiddenWords: "Forbidden words",
	linksWhitelistDescription: 'Enter the URLs that you want to be excluded and will be not affected by the moderation of links. Every link should be on a new line',
	enabled: 'Enabled',
	moderatorId: 'Moderator ID',
	moderatorIdDescription: 'When not provided, the ID of the currently logged in staff member will be set',
	updateDiscussionsFeatureMessage: 'Successfully updated discussions features!',
	updateDiscussionsFeatureErrorMessage: 'There was a problem with updating discussions feature. Please try again',
	savingStaffIdErrorMessage: 'There was a problem with saving moderator ID',
	getDiscussionsFeatureErrorMessage: 'There was a problem with fetching discussions feature',
	forbiddenWordsDescription: 'Enter the words who are forbidden from users in discussions. Every word should be on a new line',
	moderationReason: 'Moderation reason',
	save: 'Save',
	cancel: 'Cancel',
	getPostsErrorMessage: 'There was a problem with fetching posts',
	getProfilesErrorMessage: 'There was a problem fetching profiles',
	getDiscussionsErrorMessage: 'There was a problem fetching discussions',
	validationBanProfileErrorMessage: 'The ban period and ban reason are required fields',
	banProfileMessage: 'You have successfully ban the user',
	banProfileErrorMessage: 'There was a problem with banning the specified profile',
	banPeriodLabel: 'Ban period in days',
	banReasonLabel: 'Ban reason',
	day: 'day',
	days: 'days',
	indefinite: 'INDEFINITE',
	customPeriod: 'Custom period',
	moderateProfileModalDescription: 'The following operation will moderate all posts for the selected user',
	moderateProfileMessage: 'You have successfully moderate all posts for user',
	moderateProfileErrorMessage: 'There was a problem with moderating all posts for user',
	validationModerateReasonErrorMessage: 'The moderation reason is required field',
	moderatePostsMessage: 'You have successfully moderate all selected posts',
	moderatePostsErrorMessage: 'There was a problem with moderating all selected posts'
};

const  App = () => {
return (
<DiscussionsManager
	fansUnitedApiKey={'your-api-key'}
	fansUnitedClientId={'your-client-id'}
	labels={labels}/>
);
}

Here is all information about LabelsModel:

| Key | Description | Default Value | | :-------------: |:-------------:| :-----:| | userNotFound | On login screen when client gives invalid information about email or password. | User not found. Please try again | | noPostsFound | Label for heading in posts tab when no posts are found | No posts found | | posts | Label for posts tab | Posts | | users | Label for users tab | Users | | dictionary | Label for dictionary tab | Dictionary | | sortSelectPlaceholder | Placeholder for select sort | Sort posts... | | typeSelectPlaceholder | Placeholder for type filter | Type posts... | | moderatedLabelCheckbox | Label for moderated checkbox | Moderated posts | | deletedLabelCheckbox | Label for deleted checkbox | Deleted posts | | profileIdsSelectPlaceholder | Placeholder for profiles search | Type the name or nickname of the profile... | | discussionsSelectPlaceholder | Placeholder for discussions search | Type the label of the discussion... | | loading | Placeholder for loading text | Loading... | | noOptionsMessage | Placeholder for no options found | No options were found for the provided value | | moderated | Badge for moderated post | MODERATED | | onDate | Label for prefix date | on date | | reason | Label for post moderation reason | Reason | | user | Label for user | User | | deletedAt | Label for deleted at post | Deleted at | | showOlderVersions | Label for expanding arrow on post | Show older versions | | timeFormat | Timeformat for displaying dates. Widgets uses dayjs as a date dependency. | HH:mm, DD.MM.YYYY | | inDiscussion | Label in discussion | in discussion | | moderationInfo | Title for moderation info | Moderation info: | | byStaffMemberWithId | Label for by staff member with id | By staff member with ID: | | at | Label for at | at | | na | Label for not available | N/A | | filterBy | Heading in filter container | Filter by: | | sortBy | Heading in sort container | Sort by: | | moderatePosts | Label for button moderate selected posts | Moderate selected posts | | previous | Label for pagination button | Previous | | next | Label for pagination button | Next | | name | Label for pagination button | Previous | | tier | Label for pagination button | Next | | points | Label for pagination button | Previous | | moderate | Label moderate | Moderate | | ban | Label for ban | Ban | | deleteLabel | Label for delete | Delete | | moderateLinks | Label for checkbox in dictionary management | Moderate links | | moderateLinksDescription | Description about moderate links checkbox in dictionary management | When enabled, all links will be replaced with 'https://***' | | allowedUrls | Paragraph for allowed urls | Allowed URLs | | forbiddenWords | Paragraph for forbidden words | Forbidden words | | linksWhitelistDescription | Links whitelist description paragraph in dictionary tab | Enter the URLs that you want to be excluded and will be not affected by the moderation of links. Every link should be on a new line | | enabled | Label for enabled checkbox in dictionary tab | Enabled | | moderatorId | Label for moderator ID input | Moderator ID | | moderatorIdDescription | Description for moderator ID input | When not provided, the ID of the currently logged in staff member will be set | | updateDiscussionsFeatureMessage | react-toastify success message when updating discussions feature. | Successfully updated discussions features! | | updateDiscussionsFeatureErrorMessage | react-toastify error message when request fails for updating discussions feature | There was a problem with updating discussions feature. Please try again | | savingStaffIdErrorMessage | react-toastify error message when fetching logged staff ID fails | There was a problem with saving moderator ID | | getDiscussionsFeatureErrorMessage | react-toastify error message when fetching discussions feature info fails | There was a problem with fetching discussions feature | | forbiddenWordsDescription | Description label for forbidden words placeholder | Enter the words who are forbidden from users in discussions. Every word should be on a new line | | moderationReason | Label for moderation reason input | Moderation reason | | save | Label for save button | Save | | cancel | Label for cancel button | Cancel | | getPostsErrorMessage | react-toastify error message when fetching posts fails | There was a problem with fetching posts | | getProfilesErrorMessage | react-toastify error message when searching for profiles | There was a problem fetching profiles | | getDiscussionsErrorMessage | react-toastify error message when searching for discussions | There was a problem fetching discussions | | validationBanProfileErrorMessage | react-toastify error message when trying to ban user without providing the required info | The ban period and ban reason are required fields | | banProfileMessage | react-toastify success message when banning user from discussions | You have successfully ban the user | | banProfileErrorMessage | react-toastify error message when banning user from discussions | There was a problem with banning the specified profile | | banPeriodLabel | Label for ban period in days select | Ban period in days | | banReasonLabel | Label for ban reason input | Ban reason | | day | Label for day | day | | days | Label for days | days | | indefinite | Label for indefinite option | INDEFINITE | | customPeriod | Label for custom period option | Custom period | | moderateProfileModalDescription | Label for paragraph in moderate user modal | The following operation will moderate all posts for the selected user | | moderateProfileMessage | react-toastify success message when moderating user in discussions | You have successfully moderate all posts for user | | moderateProfileErrorMessage | react-toastify error message when moderating user in discussions | There was a problem with moderating all posts for user | | validationModerateReasonErrorMessage | react-toastify error message when no moderation reason is provided | The moderation reason is required field | | moderatePostsMessage | react-toastify success message when moderating multiple posts | You have successfully moderate all selected posts | | moderatePostsErrorMessage | react-toastify error message when moderating multiple posts | There was a problem with moderating all selected posts |