Loop - Revision history

Luke: /* Live loops */

2023-08-29T00:06:05Z

Live loops

← Older revision		Revision as of 00:06, 29 August 2023
Line 67:		Line 67:

	Try creating a new user account - you'll see it appear on this loop without needing to do anything else, again assuming that you are permitted to see the content.		Try creating a new user account - you'll see it appear on this loop without needing to do anything else, again assuming that you are permitted to see the content.

			If you would like a callback whenever a new object is added via the live mechanism, you can use the onLiveCreate prop on your Loop.

	=Sorting=		=Sorting=

80.229.4.125: /* Pagination */

2023-03-23T10:50:46Z

Pagination

← Older revision		Revision as of 10:50, 23 March 2023
Line 104:		Line 104:
	pageSize: 10,		pageSize: 10,
	showInput: false,		showInput: false,
			showSummary: false,
	maxLinks: 3,		maxLinks: 3,
	module: 'UI/MyCustomPaginator'		module: 'UI/MyCustomPaginator'

Luke: /* Pagination */

2023-03-15T15:01:06Z

Pagination

← Older revision		Revision as of 15:01, 15 March 2023
Line 110:		Line 110:

	The module option should be used carefully to avoid inconsistency (i.e. a need to specify it on every loop would potentially arise). Instead, it's recommended to uninstall the default UI/Paginator and create a custom component of the same name.		The module option should be used carefully to avoid inconsistency (i.e. a need to specify it on every loop would potentially arise). Instead, it's recommended to uninstall the default UI/Paginator and create a custom component of the same name.

			If you'd like to restrict the result count but without a paginator visible, you can directly set pageSize and pageIndex into the filter. This is effectively what the paged prop does, along with displaying its additional UI.

			<syntaxhighlight lang="dart" line="1">
			import Loop from 'UI/Loop';

			...

			<Loop filter={{
			pageSize: 10,
			pageIndex: 0 // optional
			}} ...>
			</syntaxhighlight>

	=Includes=		=Includes=

Luke at 00:08, 11 February 2023

2023-02-11T00:08:54Z

← Older revision		Revision as of 00:08, 11 February 2023
Line 128:		Line 128:
	</Loop>		</Loop>
	</syntaxhighlight>		</syntaxhighlight>

			= Looping over just included items =

			If you'd like to have live includes or loop over items which are "on" something else, then you can use the on filter:

			<syntaxhighlight lang="js">
			import Loop from 'UI/Loop';

			...

			<Loop over='tag' filter={{on: {type: 'Page', id: 4}}}>
			{tag => {
			return {tag.name};
			}}
			</Loop>
			</syntaxhighlight>

			Unlike regular includes, these loops support going live too.

2A02:C7F:22BE:A500:498:3225:1A16:A72D at 18:26, 5 July 2022

2022-07-05T18:26:36Z

← Older revision		Revision as of 18:26, 5 July 2022
Line 11:		Line 11:
	...		...

	<Loop over='user~~/list~~'>		<Loop over='user'>
	{		{
	user=> {		user=> {
Line 29:		Line 29:
	...		...

	<Loop over='page~~/list~~' filter={		<Loop over='page' filter={
	{		{
	where: {		where: {
Line 56:		Line 56:
	...		...

	<Loop over='user~~/list~~' live>		<Loop over='user' live>
	{		{
	user=> {		user=> {
Line 82:		Line 82:
	...		...

	<Loop over='user~~/list~~' paged={10}>		<Loop over='user' paged={10}>
	{		{
	user=> {		user=> {
Line 106:		Line 106:
	maxLinks: 3,		maxLinks: 3,
	module: 'UI/MyCustomPaginator'		module: 'UI/MyCustomPaginator'
	}}>		}} ...>
	</syntaxhighlight>		</syntaxhighlight>

	The module option should be used carefully to avoid inconsistency (i.e. a need to specify it on every loop would potentially arise). Instead, it's recommended to uninstall the default UI/Paginator and create a custom component of the same name.		The module option should be used carefully to avoid inconsistency (i.e. a need to specify it on every loop would potentially arise). Instead, it's recommended to uninstall the default UI/Paginator and create a custom component of the same name.

			=Includes=

			[[Includes]] are a mechanism in SocialStack for obtaining related data in the same API call. They are a feature of the [[public API]] but are exposed via Loop too:

			<syntaxhighlight lang="js">
			import Loop from 'UI/Loop';

			...

			<Loop over='page' includes={['creatorUser']}>
			{page => {
			return <div>
			The page "{page.title}" was created by {page.creatorUser.username}
			</div>;
			}}
			</Loop>
			</syntaxhighlight>

Luke: /* Pagination */

2021-11-09T15:39:50Z

Pagination

← Older revision		Revision as of 15:39, 9 November 2021
Line 78:		Line 78:

	<syntaxhighlight lang="dart" line="1">		<syntaxhighlight lang="dart" line="1">
			import Loop from 'UI/Loop';

			...

	<Loop over='user/list' paged={10}>		<Loop over='user/list' paged={10}>
Line 94:		Line 97:

	<syntaxhighlight lang="dart" line="1">		<syntaxhighlight lang="dart" line="1">
			import Loop from 'UI/Loop';

			...

	<Loop paged={{		<Loop paged={{
	pageSize: 10,		pageSize: 10,

Luke: /* Live loops */

2021-11-09T15:39:36Z

Live loops

← Older revision		Revision as of 15:39, 9 November 2021
Line 52:		Line 52:

	<syntaxhighlight lang="dart" line="1">		<syntaxhighlight lang="dart" line="1">
			import Loop from 'UI/Loop';

			...

	<Loop over='user/list' live>		<Loop over='user/list' live>

Luke: /* Sample Usage */

2021-11-09T15:39:25Z

Sample Usage

← Older revision		Revision as of 15:39, 9 November 2021
Line 6:		Line 6:

	<syntaxhighlight lang="dart" line="1">		<syntaxhighlight lang="dart" line="1">

			import Loop from 'UI/Loop';

			...

	<Loop over='user/list'>		<Loop over='user/list'>
Line 20:		Line 24:

	<syntaxhighlight lang="dart" line="1">		<syntaxhighlight lang="dart" line="1">

			import Loop from 'UI/Loop';

			...

	<Loop over='page/list' filter={		<Loop over='page/list' filter={

Luke: /* Sample Usage */

2021-11-09T15:35:25Z

Sample Usage

← Older revision		Revision as of 15:35, 9 November 2021
Line 17:		Line 17:
	</syntaxhighlight>		</syntaxhighlight>

			Optionally you can filter your results based on some particular [[Filters\|where filter]].

	<syntaxhighlight lang="dart" line="1">		<syntaxhighlight lang="dart" line="1">
Line 37:		Line 38:

	</syntaxhighlight>		</syntaxhighlight>

			=Live loops=

			Sometimes you'll want a loop to update in realtime - whenever someone else on the site sends you a message, for example. By default any loop can update live like this, and all it takes is the live prop:

			<syntaxhighlight lang="dart" line="1">

			<Loop over='user/list' live>
			{
			user=> {
			return <p>{user.username}</p>;
			}
			}
			</Loop>

			</syntaxhighlight>

			Try creating a new user account - you'll see it appear on this loop without needing to do anything else, again assuming that you are permitted to see the content.

			=Sorting=

			Filters support an order clause - see the [[Filters\|page on filters]] for more information here.

			=Pagination=

			A loop can be automatically paginated using the UI/Paginator component. This is done using the paged prop:


			<syntaxhighlight lang="dart" line="1">

			<Loop over='user/list' paged={10}>
			{
			user=> {
			return <p>{user.username}</p>;
			}
			}
			</Loop>

			</syntaxhighlight>

			Paged itself has multiple configuration options, including the ability to specify which pagination component to use. At its basics though, just setting it to the number of items to display per page will get things moving.

			For advanced usage, the available configuration options are like so:

			<syntaxhighlight lang="dart" line="1">
			<Loop paged={{
			pageSize: 10,
			showInput: false,
			maxLinks: 3,
			module: 'UI/MyCustomPaginator'
			}}>
			</syntaxhighlight>

			The module option should be used carefully to avoid inconsistency (i.e. a need to specify it on every loop would potentially arise). Instead, it's recommended to uninstall the default UI/Paginator and create a custom component of the same name.

Luke: /* Sample Usage */

2021-11-09T15:26:30Z

Sample Usage

← Older revision		Revision as of 15:26, 9 November 2021
Line 2:		Line 2:

	=Sample Usage=		=Sample Usage=

			Simple loop over everything of a given type (user in this case). Note that it will always be restricted by what you are permitted to see.

			<syntaxhighlight lang="dart" line="1">

			<Loop over='user/list'>
			{
			user=> {
			return <p>{user.username}</p>;
			}
			}
			</Loop>

			</syntaxhighlight>


	<syntaxhighlight lang="dart" line="1">		<syntaxhighlight lang="dart" line="1">
Line 16:		Line 31:
	{		{
	page => {		page => {
	return page.title;		return <p>{page.title}</p>;
	}		}
	}		}