1import * as React from 'react';
2import { Route } from 'react-router';
3import { Link } from 'react-router-dom';
4import fakeDataProvider from 'ra-data-fakerest';
5
6import {
7    CoreAdminContext,
8    CoreAdminUI,
9    CustomRoutes,
10    Resource,
11} from '../../core';
12import { localStorageStore } from '../../store';
13import { FakeBrowserDecorator } from '../../storybook/FakeBrowser';
14import { CoreLayoutProps, SortPayload } from '../../types';
15import { useListController } from './useListController';
16
17export default {
18    title: 'ra-core/controller/list/useListController',
19    decorators: [FakeBrowserDecorator],
20    parameters: {
21        initialEntries: ['/top'],
22    },
23};
24
25const styles = {
26    mainContainer: {
27        margin: '20px 10px',
28    },
29
30    ul: {
31        marginTop: '20px',
32        padding: '10px',
33    },
34};
35
36const dataProvider = fakeDataProvider({
37    posts: [
38        { id: 1, title: 'Post #1', votes: 90 },
39        { id: 2, title: 'Post #2', votes: 20 },
40        { id: 3, title: 'Post #3', votes: 30 },
41        { id: 4, title: 'Post #4', votes: 40 },
42        { id: 5, title: 'Post #5', votes: 50 },
43        { id: 6, title: 'Post #6', votes: 60 },
44        { id: 7, title: 'Post #7', votes: 70 },
45    ],
46});
47
48const OrderedPostList = ({
49    storeKey,
50    sort,
51}: {
52    storeKey: string;
53    sort?: SortPayload;
54}) => {
55    const params = useListController({
56        resource: 'posts',
57        debounce: 200,
58        perPage: 3,
59        sort,
60        storeKey,
61    });
62    return (
63        <div>
64            <span aria-label="storeKey" data-value={storeKey}>
65                storeKey: {storeKey}
66            </span>
67            <br />
68            <span aria-label="perPage" data-value={params.perPage}>
69                perPage: {params.perPage}
70            </span>
71            <br />
72            <br />
73            <button
74                aria-label="incrementPerPage"
75                disabled={params.perPage > params.data?.length ?? false}
76                onClick={() => params.setPerPage(++params.perPage)}
77            >
78                Increment perPage
79            </button>{' '}
80            <button
81                aria-label="decrementPerPage"
82                disabled={params.perPage <= 0}
83                onClick={() => params.setPerPage(--params.perPage)}
84            >
85                Decrement perPage
86            </button>
87            <ul style={styles.ul}>
88                {!params.isLoading &&
89                    params.data.map(post => (
90                        <li key={`post_${post.id}`}>
91                            {post.title} - {post.votes} votes
92                        </li>
93                    ))}
94            </ul>
95        </div>
96    );
97};
98
99const MinimalLayout = (props: CoreLayoutProps) => {
100    return (
101        <div style={styles.mainContainer}>
102            <Link aria-label="top" to={`/top`}>
103                Go to Top List
104            </Link>{' '}
105            <Link aria-label="flop" to={`/flop`}>
106                Go to Flop List
107            </Link>
108            <br />
109            <br />
110            {props.children}
111        </div>
112    );
113};
114const TopPosts = (
115    <OrderedPostList storeKey="top" sort={{ field: 'votes', order: 'DESC' }} />
116);
117const FlopPosts = (
118    <OrderedPostList storeKey="flop" sort={{ field: 'votes', order: 'ASC' }} />
119);
120
121export const ListsUsingSameResource = (argsOrProps, context) => {
122    const history = context?.history || argsOrProps.history;
123    return (
124        <CoreAdminContext
125            history={history}
126            store={localStorageStore()}
127            dataProvider={dataProvider}
128        >
129            <CoreAdminUI layout={MinimalLayout}>
130                <CustomRoutes>
131                    <Route path="/top" element={TopPosts} />
132                </CustomRoutes>
133                <CustomRoutes>
134                    <Route path="/flop" element={FlopPosts} />
135                </CustomRoutes>
136                <Resource name="posts" />
137            </CoreAdminUI>
138        </CoreAdminContext>
139    );
140};