scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 17:45:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Fix linting

Browse source
This commit is contained in:
Paul Kaplan 2021-03-16 14:58:54 -04:00
parent acedd550da
commit eb3bdfee56
7 changed files with 106 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/views/studio/debug.jsx
View file

@ -1,12 +1,18 @@
import React from 'react';
import PropTypes from 'prop-types';
export default function Debug({label, data}) {
return <div style={{padding: '2rem', 'border': '1px solid red', margin: '2rem'}}>
<small>{label}</small>
<code>
<pre style={{fontSize: '0.75rem'}}>
{JSON.stringify(data, null, ' ')}
</pre>
</code>
</div>
}
const Debug = ({label, data}) => (<div style={{padding: '2rem', border: '1px solid red', margin: '2rem'}}>
<small>{label}</small>
<code>
<pre style={{fontSize: '0.75rem'}}>
{JSON.stringify(data, null, ' ')}
</pre>
</code>
</div>);
Debug.propTypes = {
label: PropTypes.string,
data: PropTypes.any // eslint-disable-line react/forbid-prop-types
};
export default Debug;

26
src/views/studio/studio-activity.jsx
View file

@ -1,4 +1,6 @@
import React, {useEffect} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {useParams} from 'react-router';
@ -16,20 +18,34 @@ const StudioActivity = ({items, loading, error, onInitialLoad}) => {
<div>
<h2>Activity</h2>
{loading && <div>Loading...</div>}
{error && <Debug label="Error" data={error} />}
{error && <Debug
label="Error"
data={error}
/>}
<div>
{items.map((item, index) =>
<Debug label="Activity Item" data={item} key={index} />
(<Debug
label="Activity Item"
data={item}
key={index}
/>)
)}
</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(
(state) => activity.selector(state),
(dispatch) => ({
onInitialLoad: (studioId) => dispatch(
state => activity.selector(state),
dispatch => ({
onInitialLoad: studioId => dispatch(
activity.actions.loadMore(activityFetcher.bind(null, studioId, 0)))
})
)(StudioActivity);

2
src/views/studio/studio-comments.jsx
View file

@ -12,4 +12,4 @@ const StudioComments = () => {
);
};
export default StudioComments;
export default StudioComments;

35
src/views/studio/studio-curators.jsx
View file

@ -1,9 +1,10 @@
import React, {useEffect} from 'react';
import React, {useEffect, useCallback} from 'react';
import PropTypes from 'prop-types';
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 {curators, managers} from './lib/redux-modules';
import {curatorFetcher, managerFetcher} from './lib/fetchers';
import Debug from './debug.jsx';
const StudioCurators = () => {
@ -23,20 +24,38 @@ const MemberList = ({studioId, items, error, loading, moreToLoad, onLoadMore}) =
useEffect(() => {
if (studioId && items.length === 0) onLoadMore(studioId, 0);
}, [studioId]);
const handleLoadMore = useCallback(() => onLoadMore(studioId, items.length), [studioId, items.length]);
return <React.Fragment>
{error && <Debug label="Error" data={error} />}
return (<React.Fragment>
{error && <Debug
label="Error"
data={error}
/>}
{items.map((item, index) =>
<Debug label="Member" data={item} key={index} />
(<Debug
label="Member"
data={item}
key={index}
/>)
)}
{loading ? <small>Loading...</small> : (
moreToLoad ?
<button onClick={() => onLoadMore(studioId, items.length)}>
<button onClick={handleLoadMore}>
Load more
</button> :
<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(

12
src/views/studio/studio-info.jsx
View file

@ -13,15 +13,21 @@ const StudioInfo = () => {
if (!studioId) return;
infoFetcher(studioId)
.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]);
return (
<div>
<h2>Studio Info</h2>
{state.loading && <div>Loading..</div>}
{state.error && <Debug label="Error" data={state.error} />}
<Debug label="Studio Info" data={state.data} />
{state.error && <Debug
label="Error"
data={state.error}
/>}
<Debug
label="Studio Info"
data={state.data}
/>
</div>
);
};

46
src/views/studio/studio-projects.jsx
View file

@ -1,9 +1,10 @@
import React, {useEffect} from 'react';
import React, {useEffect, useCallback} from 'react';
import PropTypes from 'prop-types';
import {useParams} from 'react-router-dom';
import {connect} from 'react-redux'
import {connect} from 'react-redux';
import {projectFetcher} from './lib/fetchers';
import {projects} from './lib/redux-modules'
import {projects} from './lib/redux-modules';
import Debug from './debug.jsx';
const {actions, selector} = projects;
@ -17,17 +18,26 @@ const StudioProjects = ({
if (studioId && items.length === 0) onLoadMore(studioId, 0);
}, [studioId]);
const handleLoadMore = useCallback(() => onLoadMore(studioId, items.length), [studioId, items.length]);
return (
<div>
<h2>Projects</h2>
{error && <Debug label="Error" data={error} />}
{error && <Debug
label="Error"
data={error}
/>}
<div>
{items.map((item, index) =>
<Debug label="Project" data={item} key={index} />
(<Debug
label="Project"
data={item}
key={index}
/>)
)}
{loading ? <small>Loading...</small> : (
moreToLoad ?
<button onClick={() => onLoadMore(studioId, items.length)}>
<button onClick={handleLoadMore}>
Load more
</button> :
<small>No more to load</small>
@ -37,15 +47,19 @@ const StudioProjects = ({
);
};
const mapStateToProps = (state) => {
return selector(state);
StudioProjects.propTypes = {
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) => {
return {
onLoadMore: (studioId, offset) => dispatch(
actions.loadMore(projectFetcher.bind(null, studioId, offset))
)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(StudioProjects);
const mapStateToProps = state => selector(state);
const mapDispatchToProps = dispatch => ({
onLoadMore: (studioId, offset) => dispatch(
actions.loadMore(projectFetcher.bind(null, studioId, offset))
)
});
export default connect(mapStateToProps, mapDispatchToProps)(StudioProjects);

4
src/views/studio/studio.jsx
View file

@ -1,4 +1,4 @@
import React, {useEffect} from 'react';
import React from 'react';
import {
BrowserRouter as Router,
Switch,
@ -22,7 +22,7 @@ import {
curators,
managers,
activity
} from './lib/redux-modules'
} from './lib/redux-modules';
const StudioShell = () => {
const match = useRouteMatch();