List Management Widget

Welcome to Fans United List Management Widget. The widget allows staff members with sufficient permissions to create new custom or dynamic list content. Fans United List is a way to group in one place different kinds of entities like Classic Quiz, Either/Or, Poll, Top X, Match Quiz and so on. You can use this widget as it is and embed it in your platform, or you can use the Management Portal. With successful installation, you can create, edit, view list content and so on.

Installation and usage

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

npm  install  fansunited-widget-list

or:

yarn  add  fansunited-widget-list

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

import { ListManager } from  'fansunited-widget-list';

const  App = () => {
	return <ListManager 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 Joy UI which is based on headless unstyle react components. This means that the widget's CSS will NOT affect yours.

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

Props

type  ListManagerProps = {
	fansUnitedApiKey: string;
	fansUnitedClientId: string;
	fansUnitedLanguage?: string;
	fansUnitedEnvironment?: string;
	labels?: LabelsModel;
	hideSignOutButton?: boolean;
};

Fans United List 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).

• fansUnitedEnvironment - You can run the widget in the following environments: staging, production, watg and yolo. 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 Leaderboard Management Widget is available in English so if no value is given, the widget will be translated in English.

• hideSignOutButton - The prop is used to hide the sign out button which is positioned on the top right corner on the main screen of the widget.

Translation

You can easily translate Fans United List 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 { ListManager } from  'fansunited-widget-list';

const labels = {
	userNotFound: 'User not found. Please try again.',
	create: 'Create',
	signOut: 'Sign out',
	back: 'Back',
	name: 'Name',
	type: 'Type',
	createdAt: 'Created at',
	updatedAt: 'Updated at',
	actions: 'Actions',
	expand: 'Expand',
	edit: 'Edit',
	delete: 'Delete',
	deleteListTitle: 'Delete List',
	deleteListDescription: 'Are you sure you want to delete',
	deleteListMessage: 'List deleted successfully!',
	deleteListErrorMessage: 'There was a problem deleting List. Please try again',
	close: 'Close',
	pageNo: 'Page No',
	getListsErrorMessage: 'There was a problem fetching lists',
	noListsFound: "No lists were found. You can create a list by clicking the button 'Create'",
	noContentAvailable: 'No content available',
	getListErrorMessage: 'There was a problem fetching list',
	manageListTitle: 'Manage List',
	manageListDescription: 'Create and customize your content list for games, classic quizzes, either ors and polls. Choose between a Custom list where you control the exact order of content, or a Dynamic list that automatically organizes content using sorting options like creation date or last update time.',
	filters: 'Filters',
	selectContentTypePlaceholder: 'Select content type',
	status: 'Status',
	selectContentStatusPlaceholder: 'Select content status',
	sortOrder: 'Sort order',
	ascending: 'Ascending',
	descending: 'Descending',
	getEntitiesErrorMessage: 'An error occurred while fetching entities. Please try again later',
	contentSelectionTitle: 'Content selection',
	contentSelectionDescription: 'Select and organize your content. For Custom lists, you can search for a specific content by type and status and arrange them in your preferred order. For Dynamic lists, choose content by type and set the sorting options.';
	searchContentTitle: 'Search content',
	addAll: 'Add all',
	selectedContentTitle: 'Selected content',
	sortBy: 'Sort by',
	removeEntity: 'Remove entity',
	contentAddedToSelectedMessage: "added to 'Selected content'",
	allContentAddedToSelectedMessage:  "All content items are added to 'Selected content'",
	contentRemovedFromSelectedMesssage: "removed from 'Selected content'",
	save: 'Save',
	dynamicListContentEntityInfoMessage: 'Content created before 10 December 2024 and not updated afterwards will not be available.',
	createListMessage: 'You have successfully created List',
	createListErrorMessage: 'There was a problem creating List. Please try again',
	updateListMessage: 'You have successfully updated List',
	updateListErrorMessage: 'There was a problem updating List. Please try again'
};

const  App = () => {
return <ListManager fansUnitedApiKey={'your-api-key'} fansUnitedClientId={'your-client-id'} type="competition" 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. | | create | Used as label on create button and as a title in CreateGameScreen. | Create | | signOut | Used as label on sign out button. | Sign out | | back | Label next to the back button (left arrow). | Back | | name | Label for name. | Name | | type | Label for type. | Type | | createdAt | Label for created at. | Created at | | actions | Label for actions. | Actions | | expand | Label for expand button tooltip. | Expand | | edit | Label for edit action button. | Edit | | delete | Label for delete action button. | Delete | | deleteListTitle | Title for delete list modal. | Delete List | | deleteListDescription | Description for delete list modal. | Are you sure you want to delete | | deleteListMessage | Toast successful message when deleting List. | List deleted successfully! | | deleteListErrorMessage | Toast error message when deleting List. | There was a problem deleting List. Please try again | | close | Label for close button. | Close | | pageNo | Label before pagination buttons. | Page No | | getListsErrorMessage | Toast error message when request fails for fetching lists. | There was a problem fetching lists | | noListsFound | Label when no lists has been found. | No lists were found. You can create a list by clicking the button 'Create' | | noContentAvailable | Label when no content for a list has been found. | No content available | | getListErrorMessage | Toast error message when request fails for fetching list. | There was a problem fetching list | | manageListTitle | Title on management screen. | Manage List | | manageListDescription | Description on management screen. | Create and customize your content list for games, classic quizzes, either ors and polls. Choose between a Custom list where you control the exact order of content, or a Dynamic list that automatically organizes content using sorting options like creation date or last update time. | | filters | Label for filters section header. | Filters | | selectContentTypePlaceholder | Placeholder for content type dropdown. | Select content type | | status | Label for status filter. | Status | | selectContentStatusPlaceholder | Placeholder for content status dropdown. | Select content status | | sortOrder | Label for sort order filter. | Sort order | | ascending | Label for sort order ascending option. | Ascending | | descending | Label for sort order descending option. | Descending | | getEntitiesErrorMessage | Toast error message when request fails for fetching search entities. | An error occurred while fetching entities. Please try again later | | contentSelectionTitle | Title for content selection area header title. | Content selection | | contentSelectionDescription | Label for content selection area description. | Select and organize your content. For Custom lists, you can search for a specific content by type and status and arrange them in your preferred order. For Dynamic lists, choose content by type and set the sorting options. | | searchContentTitle | Title for search content area. | Search content | | addAll | Label for Add all button. | Add all | | selectedContentTitle | Label for selected content area. | Selected content | | sortBy | Title for sort by dropdown. | Sort by | | removeEntity | Label for remove entity button tooltip. | Remove entity | | contentAddedToSelectedMessage | Toast message when a content item is added to selected items. | added to 'Selected content' | | contentAddedToSelectedMessage | Toast message when all content items are added to selected items. | All content items are added to 'Selected content' | | contentRemovedFromSelectedMesssage | Toast message when a content item is removed from selected items. | removed from 'Selected content' | | save | Label for save button. | Save | | dynamicListContentEntityInfoMessage | Label for info alert about dynamic list content. | Content created before 10 December 2024 and not updated afterwards will not be available. | | createListMessage | Toast successful message when creating List. | You have successfully created List | | createListErrorMessage | Toast error message when creating List. | There was a problem creating List. Please try again | | updateListMessage | Toast successful message when updating List. | You have successfully updated List | | updateListErrorMessage | Toast error message when updating List. | There was a problem updating List. Please try again |