fansunited-widget-discussions

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