Commit eb3bdfee authored by Paul Kaplan's avatar Paul Kaplan

Fix linting

parent acedd550
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
export default function Debug({label, data}) { const Debug = ({label, data}) => (<div style={{padding: '2rem', border: '1px solid red', margin: '2rem'}}>
return <div style={{padding: '2rem', 'border': '1px solid red', margin: '2rem'}}> <small>{label}</small>
<small>{label}</small> <code>
<code> <pre style={{fontSize: '0.75rem'}}>
<pre style={{fontSize: '0.75rem'}}> {JSON.stringify(data, null, ' ')}
{JSON.stringify(data, null, ' ')} </pre>
</pre> </code>
</code> </div>);
</div>
} Debug.propTypes = {
\ No newline at end of file label: PropTypes.string,
data: PropTypes.any // eslint-disable-line react/forbid-prop-types
};
export default Debug;
import React, {useEffect} from 'react'; import React, {useEffect} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {useParams} from 'react-router'; import {useParams} from 'react-router';
...@@ -16,20 +18,34 @@ const StudioActivity = ({items, loading, error, onInitialLoad}) => { ...@@ -16,20 +18,34 @@ const StudioActivity = ({items, loading, error, onInitialLoad}) => {
<div> <div>
<h2>Activity</h2> <h2>Activity</h2>
{loading && <div>Loading...</div>} {loading && <div>Loading...</div>}
{error && <Debug label="Error" data={error} />} {error && <Debug
label="Error"
data={error}
/>}
<div> <div>
{items.map((item, index) => {items.map((item, index) =>
<Debug label="Activity Item" data={item} key={index} /> (<Debug
label="Activity Item"
data={item}
key={index}
/>)
)} )}
</div> </div>
</div> </div>
); );
}; };
StudioActivity.propTypes = {
items: PropTypes.array, // eslint-disable-line react/forbid-prop-types
loading: PropTypes.bool,
error: PropTypes.object, // eslint-disable-line react/forbid-prop-types
onInitialLoad: PropTypes.func
};
export default connect( export default connect(
(state) => activity.selector(state), state => activity.selector(state),
(dispatch) => ({ dispatch => ({
onInitialLoad: (studioId) => dispatch( onInitialLoad: studioId => dispatch(
activity.actions.loadMore(activityFetcher.bind(null, studioId, 0))) activity.actions.loadMore(activityFetcher.bind(null, studioId, 0)))
}) })
)(StudioActivity); )(StudioActivity);
...@@ -12,4 +12,4 @@ const StudioComments = () => { ...@@ -12,4 +12,4 @@ const StudioComments = () => {
); );
}; };
export default StudioComments; export default StudioComments;
\ No newline at end of file
import React, {useEffect} from 'react'; import React, {useEffect, useCallback} from 'react';
import PropTypes from 'prop-types';
import {useParams} from 'react-router-dom'; import {useParams} from 'react-router-dom';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {curators, managers} from './lib/redux-modules' import {curators, managers} from './lib/redux-modules';
import {curatorFetcher, managerFetcher} from './lib/fetchers' import {curatorFetcher, managerFetcher} from './lib/fetchers';
import Debug from './debug.jsx'; import Debug from './debug.jsx';
const StudioCurators = () => { const StudioCurators = () => {
...@@ -23,20 +24,38 @@ const MemberList = ({studioId, items, error, loading, moreToLoad, onLoadMore}) = ...@@ -23,20 +24,38 @@ const MemberList = ({studioId, items, error, loading, moreToLoad, onLoadMore}) =
useEffect(() => { useEffect(() => {
if (studioId && items.length === 0) onLoadMore(studioId, 0); if (studioId && items.length === 0) onLoadMore(studioId, 0);
}, [studioId]); }, [studioId]);
const handleLoadMore = useCallback(() => onLoadMore(studioId, items.length), [studioId, items.length]);
return <React.Fragment> return (<React.Fragment>
{error && <Debug label="Error" data={error} />} {error && <Debug
label="Error"
data={error}
/>}
{items.map((item, index) => {items.map((item, index) =>
<Debug label="Member" data={item} key={index} /> (<Debug
label="Member"
data={item}
key={index}
/>)
)} )}
{loading ? <small>Loading...</small> : ( {loading ? <small>Loading...</small> : (
moreToLoad ? moreToLoad ?
<button onClick={() => onLoadMore(studioId, items.length)}> <button onClick={handleLoadMore}>
Load more Load more
</button> : </button> :
<small>No more to load</small> <small>No more to load</small>
)} )}
</React.Fragment> </React.Fragment>);
};
MemberList.propTypes = {
studioId: PropTypes.string,
items: PropTypes.array, // eslint-disable-line react/forbid-prop-types
loading: PropTypes.bool,
error: PropTypes.object, // eslint-disable-line react/forbid-prop-types
moreToLoad: PropTypes.bool,
onLoadMore: PropTypes.func
}; };
const ManagerList = connect( const ManagerList = connect(
......
...@@ -13,15 +13,21 @@ const StudioInfo = () => { ...@@ -13,15 +13,21 @@ const StudioInfo = () => {
if (!studioId) return; if (!studioId) return;
infoFetcher(studioId) infoFetcher(studioId)
.then(data => setState({loading: false, error: null, data})) .then(data => setState({loading: false, error: null, data}))
.catch(error => setState({loading: false, error, data: null})) .catch(error => setState({loading: false, error, data: null}));
}, [studioId]); }, [studioId]);
return ( return (
<div> <div>
<h2>Studio Info</h2> <h2>Studio Info</h2>
{state.loading && <div>Loading..</div>} {state.loading && <div>Loading..</div>}
{state.error && <Debug label="Error" data={state.error} />} {state.error && <Debug
<Debug label="Studio Info" data={state.data} /> label="Error"
data={state.error}
/>}
<Debug
label="Studio Info"
data={state.data}
/>
</div> </div>
); );
}; };
......
import React, {useEffect} from 'react'; import React, {useEffect, useCallback} from 'react';
import PropTypes from 'prop-types';
import {useParams} from 'react-router-dom'; import {useParams} from 'react-router-dom';
import {connect} from 'react-redux' import {connect} from 'react-redux';
import {projectFetcher} from './lib/fetchers'; import {projectFetcher} from './lib/fetchers';
import {projects} from './lib/redux-modules' import {projects} from './lib/redux-modules';
import Debug from './debug.jsx'; import Debug from './debug.jsx';
const {actions, selector} = projects; const {actions, selector} = projects;
...@@ -17,17 +18,26 @@ const StudioProjects = ({ ...@@ -17,17 +18,26 @@ const StudioProjects = ({
if (studioId && items.length === 0) onLoadMore(studioId, 0); if (studioId && items.length === 0) onLoadMore(studioId, 0);
}, [studioId]); }, [studioId]);
const handleLoadMore = useCallback(() => onLoadMore(studioId, items.length), [studioId, items.length]);
return ( return (
<div> <div>
<h2>Projects</h2> <h2>Projects</h2>
{error && <Debug label="Error" data={error} />} {error && <Debug
label="Error"
data={error}
/>}
<div> <div>
{items.map((item, index) => {items.map((item, index) =>
<Debug label="Project" data={item} key={index} /> (<Debug
label="Project"
data={item}
key={index}
/>)
)} )}
{loading ? <small>Loading...</small> : ( {loading ? <small>Loading...</small> : (
moreToLoad ? moreToLoad ?
<button onClick={() => onLoadMore(studioId, items.length)}> <button onClick={handleLoadMore}>
Load more Load more
</button> : </button> :
<small>No more to load</small> <small>No more to load</small>
...@@ -37,15 +47,19 @@ const StudioProjects = ({ ...@@ -37,15 +47,19 @@ const StudioProjects = ({
); );
}; };
const mapStateToProps = (state) => { StudioProjects.propTypes = {
return selector(state); items: PropTypes.array, // eslint-disable-line react/forbid-prop-types
loading: PropTypes.bool,
error: PropTypes.object, // eslint-disable-line react/forbid-prop-types
moreToLoad: PropTypes.bool,
onLoadMore: PropTypes.func
}; };
const mapDispatchToProps = (dispatch) => { const mapStateToProps = state => selector(state);
return {
onLoadMore: (studioId, offset) => dispatch( const mapDispatchToProps = dispatch => ({
actions.loadMore(projectFetcher.bind(null, studioId, offset)) onLoadMore: (studioId, offset) => dispatch(
) actions.loadMore(projectFetcher.bind(null, studioId, offset))
}; )
} });
export default connect(mapStateToProps, mapDispatchToProps)(StudioProjects); export default connect(mapStateToProps, mapDispatchToProps)(StudioProjects);
\ No newline at end of file
import React, {useEffect} from 'react'; import React from 'react';
import { import {
BrowserRouter as Router, BrowserRouter as Router,
Switch, Switch,
...@@ -22,7 +22,7 @@ import { ...@@ -22,7 +22,7 @@ import {
curators, curators,
managers, managers,
activity activity
} from './lib/redux-modules' } from './lib/redux-modules';
const StudioShell = () => { const StudioShell = () => {
const match = useRouteMatch(); const match = useRouteMatch();
......
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