Merge pull request #5367 from paulkaplan/feature/studio-project-modal

Add the user projects modal for browsing projects to add to a studio

src/redux/infinite-list.js

@@ -35,17 +35,16 @@
  */
 const InfiniteList = key => {
     
-    const initialState = {
+    const getInitialState = () => ({
         items: [],
-        offset: 0,
         error: null,
         loading: true,
         moreToLoad: false
-    };
+    });
 
     const reducer = (state, action) => {
         if (typeof state === 'undefined') {
-            state = initialState;
+            state = getInitialState();
         }
 
         switch (action.type) {
@@ -89,6 +88,8 @@ const InfiniteList = key => {
                 loading: false,
                 moreToLoad: false
             };
+        case `${key}_CLEAR`:
+            return getInitialState();
         default:
             return state;
         }
@@ -101,6 +102,7 @@ const InfiniteList = key => {
         error: error => ({type: `${key}_ERROR`, error}),
         loading: () => ({type: `${key}_LOADING`}),
         append: (items, moreToLoad) => ({type: `${key}_APPEND`, items, moreToLoad}),
+        clear: () => ({type: `${key}_CLEAR`}),
 
         /**
          * Load more action returns a thunk. It takes a function to call to get more items.

src/views/studio/l10n.json

@@ -11,6 +11,7 @@
     "studio.projectsHeader": "Projects",
     "studio.addProjectsHeader": "Add Projects",
     "studio.addProject": "Add",
+    "studio.browseProjects": "Browse Projects",
 
     "studio.creatorRole": "Studio Creator",
 
@@ -26,6 +27,10 @@
 
     "studio.commentsHeader": "Comments",
 
+    "studio.sharedFilter": "Shared",
+    "studio.favoritedFilter": "Favorited",
+    "studio.recentFilter": "Recent",
+    
     "studio.activityAddProjectToStudio": "{profileLink} added the project {projectLink}",
     "studio.activityRemoveProjectStudio": "{profileLink} removed the project {projectLink}",
     "studio.activityUpdateStudio": "{profileLink} made edits to the title, thumbnail, or description",

src/views/studio/lib/redux-modules.js

@@ -5,6 +5,8 @@ const curators = InfiniteList('curators');
 const managers = InfiniteList('managers');
 const activity = InfiniteList('activity');
 
+const userProjects = InfiniteList('user-projects');
+
 export {
-    projects, curators, managers, activity
+    projects, curators, managers, activity, userProjects
 };

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

@@ -50,7 +50,7 @@ const loadProjects = () => ((dispatch, getState) => {
  */
 const generateProjectListItem = (postBody, infoBody) => ({
     // Fields from the POST to add the project to the studio
-    id: postBody.projectId,
+    id: parseInt(postBody.projectId, 10),
     actor_id: postBody.actorId,
     // Fields from followup GET for more project info
     title: infoBody.title,

src/views/studio/lib/user-projects-actions.js

@@ -0,0 +1,59 @@
+import keyMirror from 'keymirror';
+import api from '../../../lib/api';
+import {selectUsername} from '../../../redux/session';
+import {userProjects, projects} from './redux-modules';
+
+const Errors = keyMirror({
+    NETWORK: null,
+    SERVER: null,
+    PERMISSION: null
+});
+
+const Filters = keyMirror({
+    SHARED: null,
+    FAVORITED: null,
+    RECENT: null
+});
+
+const Uris = {
+    [Filters.SHARED]: username => `/users/${username}/projects`,
+    [Filters.FAVORITED]: username => `/users/${username}/favorites`,
+    [Filters.RECENT]: username => `/users/${username}/recent`
+};
+
+const normalizeError = (err, body, res) => {
+    if (err) return Errors.NETWORK;
+    if (res.statusCode === 401 || res.statusCode === 403) return Errors.PERMISSION;
+    if (res.statusCode !== 200) return Errors.SERVER;
+    return null;
+};
+
+const loadUserProjects = type => ((dispatch, getState) => {
+    const state = getState();
+    const username = selectUsername(state);
+    const projectCount = userProjects.selector(state).items.length;
+    const projectsPerPage = 20;
+    dispatch(userProjects.actions.loading());
+    api({
+        uri: Uris[type](username),
+        params: {limit: projectsPerPage, offset: projectCount}
+    }, (err, body, res) => {
+        const error = normalizeError(err, body, res);
+        if (error) return dispatch(userProjects.actions.error(error));
+        const moreToLoad = body.length === projectsPerPage;
+        const studioProjectIds = projects.selector(getState()).items.map(item => item.id);
+        const loadedProjects = body.map(item => Object.assign(item, {
+            inStudio: studioProjectIds.indexOf(item.id) !== -1
+        }));
+        dispatch(userProjects.actions.append(loadedProjects, moreToLoad));
+    });
+});
+
+// Re-export clear so that the consumer can manage filter changes
+const clearUserProjects = userProjects.actions.clear;
+
+export {
+    Filters,
+    loadUserProjects,
+    clearUserProjects
+};

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

@@ -0,0 +1,121 @@
+/* eslint-disable react/jsx-no-bind */
+import React, {useEffect, useState} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import classNames from 'classnames';
+import {FormattedMessage} from 'react-intl';
+
+import {addProject, removeProject} from '../lib/studio-project-actions';
+import {userProjects} from '../lib/redux-modules';
+import {Filters, loadUserProjects, clearUserProjects} from '../lib/user-projects-actions';
+
+import Modal from '../../../components/modal/base/modal.jsx';
+import ModalTitle from '../../../components/modal/base/modal-title.jsx';
+import ModalInnerContent from '../../../components/modal/base/modal-inner-content.jsx';
+import SubNavigation from '../../../components/subnavigation/subnavigation.jsx';
+import UserProjectsTile from './user-projects-tile.jsx';
+
+import './user-projects-modal.scss';
+
+const UserProjectsModal = ({
+    items, error, loading, moreToLoad, onLoadMore, onClear,
+    onAdd, onRemove, onRequestClose
+}) => {
+    const [filter, setFilter] = useState(Filters.SHARED);
+
+    useEffect(() => {
+        onClear();
+        onLoadMore(filter);
+    }, [filter]);
+    
+    return (
+        <Modal
+            isOpen
+            className="user-projects-modal"
+            onRequestClose={onRequestClose}
+        >
+            <ModalTitle
+                className="user-projects-modal-title modal-header"
+                title="Add to Studio"
+            />
+            <SubNavigation
+                align="left"
+                className="user-projects-modal-nav"
+            >
+                <li
+                    className={classNames({active: filter === Filters.SHARED})}
+                    onClick={() => setFilter(Filters.SHARED)}
+                >
+                    <FormattedMessage id="studio.sharedFilter" />
+                </li>
+                <li
+                    className={classNames({active: filter === Filters.FAVORITED})}
+                    onClick={() => setFilter(Filters.FAVORITED)}
+                >
+                    <FormattedMessage id="studio.favoritedFilter" />
+                </li>
+                <li
+                    className={classNames({active: filter === Filters.RECENT})}
+                    onClick={() => setFilter(Filters.RECENT)}
+                >
+                    <FormattedMessage id="studio.recentFilter" />
+                </li>
+            </SubNavigation>
+            <ModalInnerContent className="user-projects-modal-content">
+                {error && <div>Error loading {filter}: {error}</div>}
+                <div className="user-projects-modal-grid">
+                    {items.map(project => (
+                        <UserProjectsTile
+                            key={project.id}
+                            id={project.id}
+                            title={project.title}
+                            image={project.image}
+                            inStudio={project.inStudio}
+                            onAdd={onAdd}
+                            onRemove={onRemove}
+                        />
+                    ))}
+                    <div className="studio-projects-load-more">
+                        {loading ? <small>Loading...</small> : (
+                            moreToLoad ?
+                                <button onClick={() => onLoadMore(filter)}>
+                                    <FormattedMessage id="general.loadMore" />
+                                </button> :
+                                <small>No more to load</small>
+                        )}
+                    </div>
+                </div>
+            </ModalInnerContent>
+        </Modal>
+    );
+};
+
+UserProjectsModal.propTypes = {
+    items: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.id,
+        image: PropTypes.string,
+        title: PropTypes.string,
+        inStudio: PropTypes.bool
+    })),
+    loading: PropTypes.bool,
+    error: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    moreToLoad: PropTypes.bool,
+    onLoadMore: PropTypes.func,
+    onClear: PropTypes.func,
+    onAdd: PropTypes.func,
+    onRemove: PropTypes.func,
+    onRequestClose: PropTypes.func
+};
+
+const mapStateToProps = state => ({
+    ...userProjects.selector(state)
+});
+
+const mapDispatchToProps = ({
+    onLoadMore: loadUserProjects,
+    onClear: clearUserProjects,
+    onAdd: addProject,
+    onRemove: removeProject
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(UserProjectsModal);

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

@@ -0,0 +1,92 @@
+@import "../../../colors";
+@import "../../../frameless";
+
+.user-projects-modal {
+    .user-projects-modal-title {
+        box-shadow: inset 0 -1px 0 0 $ui-blue-dark;
+        background-color: $ui-blue;
+        border-top-left-radius: 12px;
+        border-top-right-radius: 12px;
+        padding-top: .75rem;
+        width: 100%;
+        height: 3rem;
+    }
+    .user-projects-modal-nav {
+        padding: 6px 12px;
+        li {
+            cursor: pointer;
+            background: rgba(0, 0, 0, 0.15);
+            &.active { background: $ui-blue; }
+        }
+    }
+    .user-projects-modal-content {
+        padding: 0 30px 30px;
+        background: #E9F1FC;
+        max-height: 80vh;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        border-bottom-left-radius: 12px;
+        border-bottom-right-radius: 12px;
+    }
+}
+
+
+.studio-tile-dynamic-remove,
+.studio-tile-dynamic-add {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 32px;
+    height: 32px;
+    background: rgba(0, 0, 0, 0.25);
+    border: 3px solid rgba(0, 0, 0, 0.1);
+    background-clip: padding-box;
+    color: white;
+    border-radius: 100%;
+    font-weight: bold;
+    margin: 0;
+    padding: 0;
+    line-height: 32px;
+    text-align: center;
+}
+.studio-tile-dynamic-remove {
+    background: #0FBD8C;
+    background-clip: padding-box;
+    border: 3px solid rgba(15, 189, 140, 0.2);
+}
+
+.user-projects-modal-grid {
+    margin-top: 12px;
+    display: grid;
+
+    grid-template-columns: repeat(3, minmax(0,1fr));
+    @media #{$medium} { /* Keep 3 columns to narrower width since it is in a modal */
+        & { grid-template-columns: repeat(2, minmax(0,1fr)); }
+    }
+    @media #{$small} {
+        & { grid-template-columns: repeat(1, minmax(0,1fr)); }
+    }
+    column-gap: 14px;
+    row-gap: 14px;
+
+    .studio-projects-load-more {
+        grid-column: 1 / -1;
+    }
+
+    .studio-project-bottom {
+        padding: 8px 10px 8px 10px;
+    }
+    .studio-project-avatar {
+        width: 32px;
+        height: 32px;
+    }
+    .studio-project-info {
+        margin: 0;
+    }
+    .studio-project-title {
+        font-size: 12px;
+    }
+    .studio-project-username {
+        font-size: 12px;
+    }
+}

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

@@ -0,0 +1,58 @@
+/* eslint-disable react/jsx-no-bind */
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const UserProjectsTile = ({id, title, image, inStudio, onAdd, onRemove}) => {
+    const [submitting, setSubmitting] = useState(false);
+    const [added, setAdded] = useState(inStudio);
+    const [error, setError] = useState(null);
+    const toggle = () => {
+        setSubmitting(true);
+        setError(null);
+        (added ? onRemove(id) : onAdd(id))
+            .then(() => {
+                setAdded(!added);
+                setSubmitting(false);
+            })
+            .catch(e => {
+                setError(e);
+                setSubmitting(false);
+            });
+    };
+    return (
+        <div
+            role="button"
+            tabIndex="0"
+            className={classNames('studio-project-tile', {
+                'mod-clickable': true,
+                'mod-mutating': submitting
+            })}
+            onClick={toggle}
+            onKeyDown={e => e.key === 'Enter' && toggle()}
+        >
+            <img
+                className="studio-project-image"
+                src={image}
+            />
+            <div className="studio-project-bottom">
+                <div className="studio-project-title">{title}</div>
+                <div className={`studio-tile-dynamic-${added ? 'remove' : 'add'}`}>
+                    {added ? '✔' : '＋'}
+                </div>
+                {error && <div>{error}</div>}
+            </div>
+        </div>
+    );
+};
+
+UserProjectsTile.propTypes = {
+    id: PropTypes.number.isRequired,
+    title: PropTypes.string.isRequired,
+    image: PropTypes.string.isRequired,
+    inStudio: PropTypes.bool.isRequired,
+    onAdd: PropTypes.func.isRequired,
+    onRemove: PropTypes.func.isRequired
+};
+
+export default UserProjectsTile;

src/views/studio/studio-curator-inviter.jsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
 
 import {inviteCurator} from './lib/studio-member-actions';
+import FlexRow from '../../components/flex-row/flex-row.jsx';
 
 const StudioCuratorInviter = ({onSubmit}) => {
     const [value, setValue] = useState('');
@@ -22,22 +23,24 @@ const StudioCuratorInviter = ({onSubmit}) => {
     return (
         <div className="studio-adder-section">
             <h3><FormattedMessage id="studio.inviteCuratorsHeader" /></h3>
-            <input
-                disabled={submitting}
-                type="text"
-                placeholder="<username>"
-                value={value}
-                onKeyDown={e => e.key === 'Enter' && submit()}
-                onChange={e => setValue(e.target.value)}
-            />
-            <button
-                className={classNames('button', {
-                    'mod-mutating': submitting
-                })}
-                disabled={submitting}
-                onClick={submit}
-            ><FormattedMessage id="studio.inviteCurator" /></button>
-            {error && <div>{error}</div>}
+            <FlexRow>
+                <input
+                    disabled={submitting}
+                    type="text"
+                    placeholder="<username>"
+                    value={value}
+                    onKeyDown={e => e.key === 'Enter' && submit()}
+                    onChange={e => setValue(e.target.value)}
+                />
+                <button
+                    className={classNames('button', {
+                        'mod-mutating': submitting
+                    })}
+                    disabled={submitting}
+                    onClick={submit}
+                ><FormattedMessage id="studio.inviteCurator" /></button>
+                {error && <div>{error}</div>}
+            </FlexRow>
         </div>
     );
 };

src/views/studio/studio-project-adder.jsx

@@ -6,11 +6,14 @@ import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
 
 import {addProject} from './lib/studio-project-actions';
+import UserProjectsModal from './modals/user-projects-modal.jsx';
+import FlexRow from '../../components/flex-row/flex-row.jsx';
 
 const StudioProjectAdder = ({onSubmit}) => {
     const [value, setValue] = useState('');
     const [submitting, setSubmitting] = useState(false);
     const [error, setError] = useState(null);
+    const [modalOpen, setModalOpen] = useState(false);
     const submit = () => {
         setSubmitting(true);
         setError(null);
@@ -22,22 +25,32 @@ const StudioProjectAdder = ({onSubmit}) => {
     return (
         <div className="studio-adder-section">
             <h3><FormattedMessage id="studio.addProjectsHeader" /></h3>
-            <input
-                disabled={submitting}
-                type="text"
-                placeholder="<project id>"
-                value={value}
-                onKeyDown={e => e.key === 'Enter' && submit()}
-                onChange={e => setValue(e.target.value)}
-            />
-            <button
-                className={classNames('button', {
-                    'mod-mutating': submitting
-                })}
-                disabled={submitting}
-                onClick={submit}
-            ><FormattedMessage id="studio.addProject" /></button>
-            {error && <div>{error}</div>}
+            <FlexRow>
+                <input
+                    disabled={submitting}
+                    type="text"
+                    placeholder="<project id>"
+                    value={value}
+                    onKeyDown={e => e.key === 'Enter' && submit()}
+                    onChange={e => setValue(e.target.value)}
+                />
+                <button
+                    className={classNames('button', {
+                        'mod-mutating': submitting
+                    })}
+                    disabled={submitting}
+                    onClick={submit}
+                ><FormattedMessage id="studio.addProject" /></button>
+                {error && <div>{error}</div>}
+                <div className="studio-adder-vertical-divider" />
+                <button
+                    className="button"
+                    onClick={() => setModalOpen(true)}
+                >
+                    <FormattedMessage id="studio.browseProjects" />
+                </button>
+                {modalOpen && <UserProjectsModal onRequestClose={() => setModalOpen(false)} />}
+            </FlexRow>
         </div>
     );
 };

src/views/studio/studio.jsx

@@ -27,7 +27,8 @@ import {
     projects,
     curators,
     managers,
-    activity
+    activity,
+    userProjects
 } from './lib/redux-modules';
 
 const {getInitialState, studioReducer, selectStudioLoadFailed} = require('../../redux/studio');
@@ -102,6 +103,7 @@ render(
         [curators.key]: curators.reducer,
         [managers.key]: managers.reducer,
         [activity.key]: activity.reducer,
+        [userProjects.key]: userProjects.reducer,
         comments: commentsReducer,
         studio: studioReducer,
         studioMutations: studioMutationsReducer,

src/views/studio/studio.scss

@@ -5,7 +5,7 @@ $radius: 8px;
 
 .studio-page {
     background-color: #E9F1FC;
-    
+
     #view {
         /* Reset some defaults on width and margin */
         background-color: transparent;
@@ -63,7 +63,7 @@ $radius: 8px;
 .studio-tab-nav {
     border-bottom: 1px solid $active-dark-gray;
     padding-bottom: 8px;
-    li { background: $active-gray; }
+    li { background: rgba(0, 0, 0, 0.15); }
     .active > li { background: $ui-blue; }
 }
 
@@ -72,12 +72,12 @@ $radius: 8px;
     margin-top: 20px;
     display: grid;
 
-    grid-template-columns: minmax(0, 1fr);
-    @media #{$medium} {
+    grid-template-columns: repeat(3, minmax(0,1fr));
+    @media #{$medium-and-intermediate} {
         & { grid-template-columns: repeat(2, minmax(0,1fr)); }
     }
-    @media #{$big} {
-        & { grid-template-columns: repeat(3, minmax(0,1fr)); }
+    @media #{$small} {
+        & { grid-template-columns: repeat(1, minmax(0,1fr)); }
     }
     column-gap: 30px;
     row-gap: 20px;
@@ -91,6 +91,9 @@ $radius: 8px;
     background: white;
     border-radius: 8px;
     border: 1px solid $ui-border;
+    position: relative;
+    margin: 0;
+    padding: 0;
 
     .studio-project-image {
         max-width: 100%;
@@ -123,6 +126,7 @@ $radius: 8px;
         font-weight: 700;
         font-size: 14px;
         white-space: nowrap;
+        overflow: hidden;
         text-overflow: ellipsis;
     }
     .studio-project-username {
@@ -130,6 +134,7 @@ $radius: 8px;
         font-weight: 700;
         font-size: 12px;
         white-space: nowrap;
+        overflow: hidden;
         text-overflow: ellipsis;
     }
     .studio-project-remove {
@@ -143,13 +148,12 @@ $radius: 8px;
 .studio-members-grid {
     margin-top: 20px;
     display: grid;
-
-    grid-template-columns: minmax(0, 1fr);
-    @media #{$medium} {
+    grid-template-columns: repeat(3, minmax(0,1fr));
+    @media #{$medium-and-intermediate} {
         & { grid-template-columns: repeat(2, minmax(0,1fr)); }
     }
-    @media #{$big} {
-        & { grid-template-columns: repeat(3, minmax(0,1fr)); }
+    @media #{$small} {
+        & { grid-template-columns: repeat(1, minmax(0,1fr)); }
     }
     column-gap: 30px;
     row-gap: 20px;
@@ -187,6 +191,7 @@ $radius: 8px;
         font-weight: 700;
         font-size: 14px;
         white-space: nowrap;
+        overflow: hidden;
         text-overflow: ellipsis;
     }
     .studio-member-role {
@@ -194,6 +199,7 @@ $radius: 8px;
         font-weight: 400;
         font-size: 12px;
         white-space: nowrap;
+        overflow: hidden;
         text-overflow: ellipsis;
     }
     .studio-member-remove, .studio-member-promote {
@@ -209,15 +215,19 @@ $radius: 8px;
 
 .studio-adder-section {
     margin-top: 20px;
-    display: flex;
-    flex-wrap: wrap;
 
     h3 {
         color: #4C97FF;
     }
 
+    .flex-row {
+        margin: 0 -6px;
+        & > * {
+            margin: 0 6px;
+        }
+    }
+
     input {
-        flex-basis: 80%;
         flex-grow: 1;
         display: inline-block;
         margin: .5em 0;
@@ -228,11 +238,12 @@ $radius: 8px;
     }
 
     button {
-        flex-grow: 1;
+        flex-grow: 0;
     }
 
-    input + button {
-        margin-inline-start: 12px;
+    .studio-adder-vertical-divider {
+        border: 1px solid $ui-border;
+        align-self: stretch;
     }
 }
 
@@ -284,3 +295,7 @@ $radius: 8px;
     cursor: wait !important;
     opacity: .5;
 }
+
+.mod-clickable {
+    cursor: pointer;
+}

test/unit/redux/infinite-list.test.js

@@ -107,6 +107,19 @@ describe('Infinite List redux module', () => {
             });
         });
 
+        describe('CLEAR', () => {
+            test('resets everything back to the initial state', () => {
+                const state = {
+                    error: new Error(),
+                    items: [1, 2, 3],
+                    loading: 'something not initial',
+                    moreToLoad: 'something not initial'
+                };
+                const newState = module.reducer(state, module.actions.clear());
+                expect(newState).toEqual(initialState);
+            });
+        });
+
         describe('ERROR', () => {
             let action;
             let error = new Error();
@@ -170,7 +183,7 @@ describe('Infinite List redux module', () => {
     describe('selector', () => {
         test('will return the slice of state defined by the key', () => {
             const state = {
-                [module.key]: module.reducer(undefined, {}) // eslint-disable-line no-undefined
+                [module.key]: initialState
             };
             expect(module.selector(state)).toBe(initialState);
         });