Commit acedd550 authored by Paul Kaplan's avatar Paul Kaplan

Use the infinite loading module for all the data

parent 6b87429e
import InfiniteList from '../../../redux/infinite-list';
const projects = InfiniteList('projects');
const curators = InfiniteList('curators');
const managers = InfiniteList('managers');
const activity = InfiniteList('activity');
export {
projects, curators, managers, activity
};
import React from 'react';
import {useParams} from 'react-router-dom';
import React, {useEffect} from 'react';
import {connect} from 'react-redux';
import {useParams} from 'react-router';
const StudioActivity = () => {
import {activity} from './lib/redux-modules';
import {activityFetcher} from './lib/fetchers';
import Debug from './debug.jsx';
const StudioActivity = ({items, loading, error, onInitialLoad}) => {
const {studioId} = useParams();
useEffect(() => {
if (studioId && items.length === 0) onInitialLoad(studioId);
}, [studioId]);
return (
<div>
<h2>Activity</h2>
<p>Studio {studioId}</p>
{loading && <div>Loading...</div>}
{error && <Debug label="Error" data={error} />}
<div>
{items.map((item, index) =>
<Debug label="Activity Item" data={item} key={index} />
)}
</div>
</div>
);
};
export default StudioActivity;
export default connect(
(state) => activity.selector(state),
(dispatch) => ({
onInitialLoad: (studioId) => dispatch(
activity.actions.loadMore(activityFetcher.bind(null, studioId, 0)))
})
)(StudioActivity);
......@@ -12,4 +12,4 @@ const StudioComments = () => {
);
};
export default StudioComments;
export default StudioComments;
\ No newline at end of file
import React from 'react';
import React, {useEffect} from 'react';
import {useParams} from 'react-router-dom';
import {connect} from 'react-redux';
import {curators, managers} from './lib/redux-modules'
import {curatorFetcher, managerFetcher} from './lib/fetchers'
import Debug from './debug.jsx';
const StudioCurators = () => {
const {studioId} = useParams();
return (
<div>
<h2>Curators</h2>
<p>Studio {studioId}</p>
<h3>Managers</h3>
<ManagerList studioId={studioId} />
<hr />
<h3>Curators</h3>
<CuratorList studioId={studioId} />
</div>
);
};
const MemberList = ({studioId, items, error, loading, moreToLoad, onLoadMore}) => {
useEffect(() => {
if (studioId && items.length === 0) onLoadMore(studioId, 0);
}, [studioId]);
return <React.Fragment>
{error && <Debug label="Error" data={error} />}
{items.map((item, index) =>
<Debug label="Member" data={item} key={index} />
)}
{loading ? <small>Loading...</small> : (
moreToLoad ?
<button onClick={() => onLoadMore(studioId, items.length)}>
Load more
</button> :
<small>No more to load</small>
)}
</React.Fragment>
};
const ManagerList = connect(
state => managers.selector(state),
dispatch => ({
onLoadMore: (studioId, offset) => dispatch(
managers.actions.loadMore(managerFetcher.bind(null, studioId, offset)))
})
)(MemberList);
const CuratorList = connect(
state => curators.selector(state),
dispatch => ({
onLoadMore: (studioId, offset) => dispatch(
curators.actions.loadMore(curatorFetcher.bind(null, studioId, offset)))
})
)(MemberList);
export default StudioCurators;
import React from 'react';
import React, {useEffect} from 'react';
import {useParams} from 'react-router-dom';
import {connect} from 'react-redux'
const StudioProjects = () => {
import {projectFetcher} from './lib/fetchers';
import {projects} from './lib/redux-modules'
import Debug from './debug.jsx';
const {actions, selector} = projects;
const StudioProjects = ({
items, error, loading, moreToLoad, onLoadMore
}) => {
const {studioId} = useParams();
useEffect(() => {
if (studioId && items.length === 0) onLoadMore(studioId, 0);
}, [studioId]);
return (
<div>
<h2>Projects</h2>
<p>Studio {studioId}</p>
{error && <Debug label="Error" data={error} />}
<div>
{items.map((item, index) =>
<Debug label="Project" data={item} key={index} />
)}
{loading ? <small>Loading...</small> : (
moreToLoad ?
<button onClick={() => onLoadMore(studioId, items.length)}>
Load more
</button> :
<small>No more to load</small>
)}
</div>
</div>
);
};
export default StudioProjects;
const mapStateToProps = (state) => {
return selector(state);
};
const mapDispatchToProps = (dispatch) => {
return {
onLoadMore: (studioId, offset) => dispatch(
actions.loadMore(projectFetcher.bind(null, studioId, offset))
)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(StudioProjects);
\ No newline at end of file
import React from 'react';
import React, {useEffect} from 'react';
import {
BrowserRouter as Router,
Switch,
......@@ -9,6 +9,7 @@ import {
import Page from '../../components/page/www/page.jsx';
import render from '../../lib/render.jsx';
import StudioTabNav from './studio-tab-nav.jsx';
import StudioProjects from './studio-projects.jsx';
import StudioInfo from './studio-info.jsx';
......@@ -16,6 +17,13 @@ import StudioCurators from './studio-curators.jsx';
import StudioComments from './studio-comments.jsx';
import StudioActivity from './studio-activity.jsx';
import {
projects,
curators,
managers,
activity
} from './lib/redux-modules'
const StudioShell = () => {
const match = useRouteMatch();
......@@ -59,5 +67,11 @@ render(
</Switch>
</Router>
</Page>,
document.getElementById('app')
document.getElementById('app'),
{
[projects.key]: projects.reducer,
[curators.key]: curators.reducer,
[managers.key]: managers.reducer,
[activity.key]: activity.reducer
}
);
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment