Discussions Management

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 { DiscussionsManager } 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

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',
	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',
	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:

KeyDescriptionDefault Value
userNotFoundOn login screen when client gives invalid information about email or password.User not found. Please try again
noPostsFoundLabel for heading in posts tab when no posts are foundNo posts found
postsLabel for posts tabPosts
usersLabel for users tabUsers
dictionaryLabel for dictionary tabDictionary
sortSelectPlaceholderPlaceholder for select sortSort posts...
typeSelectPlaceholderPlaceholder for type filterType posts...
moderatedLabelCheckboxLabel for moderated checkboxModerated posts
deletedLabelCheckboxLabel for deleted checkboxDeleted posts
profileIdsSelectPlaceholderPlaceholder for profiles searchType the name or nickname of the profile...
discussionsSelectPlaceholderPlaceholder for discussions searchType the label of the discussion...
loadingPlaceholder for loading textLoading...
noOptionsMessagePlaceholder for no options foundNo options were found for the provided value
moderatedBadge for moderated postMODERATED
onDateLabel for prefix dateon date
reasonLabel for post moderation reasonReason
userLabel for userUser
deletedAtLabel for deleted at postDeleted at
showOlderVersionsLabel for expanding arrow on postShow older versions
timeFormatTimeformat for displaying dates. Widgets uses dayjs as a date dependency.HH:mm, DD.MM.YYYY
inDiscussionLabel in discussionin discussion
moderationInfoTitle for moderation infoModeration info:
byStaffMemberWithIdLabel for by staff member with idBy staff member with ID:
atLabel for atat
naLabel for not availableN/A
filterByHeading in filter containerFilter by:
sortByHeading in sort containerSort by:
moderatePostsLabel for button moderate selected postsModerate selected posts
previousLabel for pagination buttonPrevious
nextLabel for pagination buttonNext
nameLabel for pagination buttonPrevious
tierLabel for pagination buttonNext
pointsLabel for pagination buttonPrevious
moderateLabel moderateModerate
banLabel for banBan
deleteLabelLabel for deleteDelete
moderateLinksLabel for checkbox in dictionary managementModerate links
linksWhitelistDescriptionLinks whitelist description paragraph in dictionary tabEnter 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
moderatorIdLabel for moderator ID inputModerator ID
moderatorIdDescriptionDescription for moderator ID inputWhen not provided, the ID of the currently logged in staff member will be set
updateDiscussionsFeatureMessagereact-toastify success message when updating discussions feature.Successfully updated discussions features!
updateDiscussionsFeatureErrorMessagereact-toastify error message when request fails for updating discussions featureThere was a problem with updating discussions feature. Please try again
savingStaffIdErrorMessagereact-toastify error message when fetching logged staff ID failsThere was a problem with saving moderator ID
getDiscussionsFeatureErrorMessagereact-toastify error message when fetching discussions feature info failsThere was a problem with fetching discussions feature
forbiddenWordsDescriptionDescription label for forbidden words placeholderEnter the words who are forbidden from users in discussions. Every word should be on a new line
moderationReasonLabel for moderation reason inputModeration reason
saveLabel for save buttonSave
cancelLabel for cancel buttonCancel
getPostsErrorMessagereact-toastify error message when fetching posts failsThere was a problem with fetching posts
getProfilesErrorMessagereact-toastify error message when searching for profilesThere was a problem fetching profiles
getDiscussionsErrorMessagereact-toastify error message when searching for discussionsThere was a problem fetching discussions
validationBanProfileErrorMessagereact-toastify error message when trying to ban user without providing the required infoThe ban period and ban reason are required fields
banProfileMessagereact-toastify success message when banning user from discussionsYou have successfully ban the user
banProfileErrorMessagereact-toastify error message when banning user from discussionsThere was a problem with banning the specified profile
banPeriodLabelLabel for ban period in days selectBan period in days
banReasonLabelLabel for ban reason inputBan reason
dayLabel for dayday
daysLabel for daysdays
indefiniteLabel for indefinite optionINDEFINITE
customPeriodLabel for custom period optionCustom period
moderateProfileModalDescriptionLabel for paragraph in moderate user modalThe following operation will moderate all posts for the selected user
moderateProfileMessagereact-toastify success message when moderating user in discussionsYou have successfully moderate all posts for user
moderateProfileErrorMessagereact-toastify error message when moderating user in discussionsThere was a problem with moderating all posts for user
validationModerateReasonErrorMessagereact-toastify error message when no moderation reason is providedThe moderation reason is required field
moderatePostsMessagereact-toastify success message when moderating multiple postsYou have successfully moderate all selected posts
moderatePostsErrorMessagereact-toastify error message when moderating multiple postsThere was a problem with moderating all selected posts