scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 15:47:53 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #5697 from paulkaplan/load-full-rows

Browse source 
Load full rows for projects, curators, managers
This commit is contained in:
Paul Kaplan 2021-07-07 09:08:08 -04:00 committed by GitHub
commit f84b142c93
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 38 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/views/studio/lib/studio-member-actions.js
View file

@ -17,6 +17,8 @@ const Errors = keyMirror({
MANAGER_LIMIT: null MANAGER_LIMIT: null
}); });
const PER_PAGE_LIMIT = 24;
const normalizeError = (err, body, res) => { const normalizeError = (err, body, res) => {
if (err) return Errors.NETWORK; if (err) return Errors.NETWORK;
if (res.statusCode === 400 && body.message === 'too many owners') { if (res.statusCode === 400 && body.message === 'too many owners') {
@ -40,15 +42,14 @@ const loadManagers = () => ((dispatch, getState) => {
const state = getState(); const state = getState();
const studioId = selectStudioId(state); const studioId = selectStudioId(state);
const managerCount = managers.selector(state).items.length; const managerCount = managers.selector(state).items.length;
const managersPerPage = 20;
const opts = { const opts = {
uri: `/studios/${studioId}/managers/`, uri: `/studios/${studioId}/managers/`,
params: {limit: managersPerPage, offset: managerCount} params: {limit: PER_PAGE_LIMIT, offset: managerCount}
}; };
api(withAdmin(opts, state), (err, body, res) => { api(withAdmin(opts, state), (err, body, res) => {
const error = normalizeError(err, body, res); const error = normalizeError(err, body, res);
if (error) return dispatch(managers.actions.error(error)); if (error) return dispatch(managers.actions.error(error));
dispatch(managers.actions.append(body, body.length === managersPerPage)); dispatch(managers.actions.append(body, body.length === PER_PAGE_LIMIT));
}); });
}); });
@ -56,15 +57,14 @@ const loadCurators = () => ((dispatch, getState) => {
const state = getState(); const state = getState();
const studioId = selectStudioId(state); const studioId = selectStudioId(state);
const curatorCount = curators.selector(state).items.length; const curatorCount = curators.selector(state).items.length;
const curatorsPerPage = 20;
const opts = { const opts = {
uri: `/studios/${studioId}/curators/`, uri: `/studios/${studioId}/curators/`,
params: {limit: curatorsPerPage, offset: curatorCount} params: {limit: PER_PAGE_LIMIT, offset: curatorCount}
}; };
api(withAdmin(opts, state), (err, body, res) => { api(withAdmin(opts, state), (err, body, res) => {
const error = normalizeError(err, body, res); const error = normalizeError(err, body, res);
if (error) return dispatch(curators.actions.error(error)); if (error) return dispatch(curators.actions.error(error));
dispatch(curators.actions.append(body, body.length === curatorsPerPage)); dispatch(curators.actions.append(body, body.length === PER_PAGE_LIMIT));
}); });
}); });

7
src/views/studio/lib/studio-project-actions.js
View file

@ -17,6 +17,8 @@ const Errors = keyMirror({
USER_MUTED: null USER_MUTED: null
}); });
const PER_PAGE_LIMIT = 24;
const normalizeError = (err, body, res) => { const normalizeError = (err, body, res) => {
if (err) return Errors.NETWORK; if (err) return Errors.NETWORK;
if (res.statusCode === 403 && body.mute_status) return Errors.USER_MUTED; if (res.statusCode === 403 && body.mute_status) return Errors.USER_MUTED;
@ -32,15 +34,14 @@ const loadProjects = () => ((dispatch, getState) => {
const state = getState(); const state = getState();
const studioId = selectStudioId(state); const studioId = selectStudioId(state);
const projectCount = projects.selector(state).items.length; const projectCount = projects.selector(state).items.length;
const projectsPerPage = 20;
const opts = { const opts = {
uri: `/studios/${studioId}/projects/`, uri: `/studios/${studioId}/projects/`,
params: {limit: projectsPerPage, offset: projectCount} params: {limit: PER_PAGE_LIMIT, offset: projectCount}
}; };
api(withAdmin(opts, state), (err, body, res) => { api(withAdmin(opts, state), (err, body, res) => {
const error = normalizeError(err, body, res); const error = normalizeError(err, body, res);
if (error) return dispatch(projects.actions.error(error)); if (error) return dispatch(projects.actions.error(error));
dispatch(projects.actions.append(body, body.length === projectsPerPage)); dispatch(projects.actions.append(body, body.length === PER_PAGE_LIMIT));
}); });
}); });

25
src/views/studio/modals/user-projects-modal.jsx
View file

@ -92,19 +92,20 @@ const UserProjectsModal = ({
onRemove={onRemove} onRemove={onRemove}
/> />
))} ))}
{moreToLoad &&
<div className="studio-grid-load-more">
<button
className={classNames('button', {
'mod-mutating': loading
})}
onClick={() => onLoadMore(filter)}
>
<FormattedMessage id="general.loadMore" />
</button>
</div>
}
</div> </div>
{moreToLoad &&
<div className="studio-projects-load-more">
<button
className={classNames('button', {
'mod-mutating': loading
})}
onClick={() => onLoadMore(filter)}
>
<FormattedMessage id="general.loadMore" />
</button>
</div>
}
</React.Fragment> </React.Fragment>
} }
{!loading && items.length === 0 && {!loading && items.length === 0 &&

4
src/views/studio/modals/user-projects-modal.scss
View file

@ -44,10 +44,6 @@
} }
} }
.studio-projects-load-more {
display: contents;
}
.studio-projects-done-row { .studio-projects-done-row {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

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

@ -196,8 +196,8 @@ const StudioActivity = ({items, loading, error, moreToLoad, onLoadMore}) => {
getComponentForItem(item) getComponentForItem(item)
)} )}
</ul> </ul>
<div> {moreToLoad &&
{moreToLoad && <div className="studio-grid-load-more">
<button <button
className={classNames('button', { className={classNames('button', {
'mod-mutating': loading 'mod-mutating': loading
@ -206,8 +206,8 @@ const StudioActivity = ({items, loading, error, moreToLoad, onLoadMore}) => {
> >
<FormattedMessage id="general.loadMore" /> <FormattedMessage id="general.loadMore" />
</button> </button>
} </div>
</div> }
</div> </div>
); );
}; };

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

@ -66,7 +66,7 @@ const StudioCurators = ({
/>) />)
)} )}
{moreToLoad && {moreToLoad &&
<div className="studio-members-load-more"> <div className="studio-grid-load-more">
<button <button
className={classNames('button', { className={classNames('button', {
'mod-mutating': loading 'mod-mutating': loading

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

@ -103,7 +103,7 @@ const StudioManagers = ({
/>) />)
)} )}
{moreToLoad && {moreToLoad &&
<div className="studio-members-load-more"> <div className="studio-grid-load-more">
<button <button
className={classNames('button', { className={classNames('button', {
'mod-mutating': loading 'mod-mutating': loading

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

@ -105,7 +105,7 @@ const StudioProjects = ({
/>) />)
)} )}
{moreToLoad && {moreToLoad &&
<div className="studio-projects-load-more"> <div className="studio-grid-load-more">
<button <button
className={classNames('button', { className={classNames('button', {
'mod-mutating': loading 'mod-mutating': loading

16
src/views/studio/studio.scss
View file

@ -147,7 +147,7 @@ $radius: 8px;
} }
} }
/* Overrides for when title and description are editable textareas. These override inplace-input */ /* Overrides for when title and description are editable textareas. These override inplace-input */
textarea.studio-title, textarea.studio-description { textarea.studio-title, textarea.studio-description {
padding: 5px 8px; padding: 5px 8px;
@ -241,14 +241,14 @@ $radius: 8px;
border: 1px solid $ui-blue; border: 1px solid $ui-blue;
border-radius: 1rem; border-radius: 1rem;
font-weight: bold; font-weight: bold;
color: $ui-blue; color: $ui-blue;
font-size: 12px; font-size: 12px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.manager-threshold-message { .manager-threshold-message {
@ -270,9 +270,12 @@ $radius: 8px;
} }
column-gap: 20px; column-gap: 20px;
row-gap: 20px; row-gap: 20px;
}
.studio-projects-load-more { .studio-grid-load-more {
grid-column: 1 / -1; grid-column: 1 / -1;
button {
width: 100%;
} }
} }
@ -345,9 +348,6 @@ $radius: 8px;
} }
column-gap: 20px; column-gap: 20px;
row-gap: 20px; row-gap: 20px;
.studio-members-load-more {
grid-column: 1 / -1;
}
} }
.studio-tabs { .studio-tabs {