Include if user projects are already in the studio

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

 import keyMirror from 'keymirror';
 import api from '../../../lib/api';
 import {selectUsername} from '../../../redux/session';
-import {userProjects} from './redux-modules';
+import {userProjects, projects} from './redux-modules';
 
 const Errors = keyMirror({
     NETWORK: null,
@@ -40,7 +40,12 @@ const loadUserProjects = type => ((dispatch, getState) => {
     }, (err, body, res) => {
         const error = normalizeError(err, body, res);
         if (error) return dispatch(userProjects.actions.error(error));
-        dispatch(userProjects.actions.append(body, body.length === projectsPerPage));
+        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));
     });
 });
 

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

@@ -69,6 +69,7 @@ const UserProjectsModal = ({
                             id={project.id}
                             title={project.title}
                             image={project.image}
+                            inStudio={project.inStudio}
                             onAdd={onAdd}
                             onRemove={onRemove}
                         />
@@ -92,7 +93,8 @@ UserProjectsModal.propTypes = {
     items: PropTypes.arrayOf(PropTypes.shape({
         id: PropTypes.id,
         image: PropTypes.string,
-        title: PropTypes.string
+        title: PropTypes.string,
+        inStudio: PropTypes.bool
     })),
     loading: PropTypes.bool,
     error: PropTypes.object, // eslint-disable-line react/forbid-prop-types

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

@@ -3,9 +3,9 @@ import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const UserProjectsTile = ({id, title, image, onAdd, onRemove}) => {
+const UserProjectsTile = ({id, title, image, inStudio, onAdd, onRemove}) => {
     const [submitting, setSubmitting] = useState(false);
-    const [added, setAdded] = useState(false);
+    const [added, setAdded] = useState(inStudio);
     const [error, setError] = useState(null);
     const toggle = () => {
         setSubmitting(true);
@@ -50,6 +50,7 @@ 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
 };