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

Load full rows for projects, curators, managers

src/views/studio/lib/studio-member-actions.js

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

src/views/studio/lib/studio-project-actions.js

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

src/views/studio/modals/user-projects-modal.jsx

@@ -92,19 +92,20 @@ const UserProjectsModal = ({
                                         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>
-                            {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>
                     }
                     {!loading && items.length === 0 &&

src/views/studio/modals/user-projects-modal.scss

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

src/views/studio/studio-activity.jsx

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

src/views/studio/studio-curators.jsx

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

src/views/studio/studio-managers.jsx

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

src/views/studio/studio-projects.jsx

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

src/views/studio/studio.scss

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