Add actions for studio open to commenting or project adding

src/redux/studio-mutations.js

@@ -10,7 +10,7 @@
 const keyMirror = require('keymirror');
 const api = require('../lib/api');
 const {selectUsername} = require('./session');
-const {selectStudioId, selectStudioImage} = require('./studio');
+const {selectStudioId, selectStudioImage, selectStudioOpenToAll, selectStudioCommentsAllowed} = require('./studio');
 
 const Errors = keyMirror({
     NETWORK: null,
@@ -84,6 +84,10 @@ const selectDescriptionMutationError = state => state.studioMutations.mutationEr
 const selectFollowingMutationError = state => state.studioMutations.mutationErrors.following;
 const selectIsMutatingImage = state => state.studioMutations.isMutating.image;
 const selectImageMutationError = state => state.studioMutations.mutationErrors.image;
+const selectIsMutatingOpenToAll = state => state.studioMutations.isMutating.openToAll;
+const selectOpenToAllMutationError = state => state.studioMutations.mutationErrors.openToAll;
+const selectIsMutatingCommentsAllowed = state => state.studioMutations.isMutating.commentsAllowed;
+const selectCommentsAllowedMutationError = state => state.studioMutations.mutationErrors.commentsAllowed;
 
 // Thunks
 /**
@@ -180,6 +184,38 @@ const mutateStudioImage = input => ((dispatch, getState) => {
     });
 });
 
+const mutateStudioCommentsAllowed = shouldAllow => ((dispatch, getState) => {
+    dispatch(startMutation('commentsAllowed'));
+    const state = getState();
+    const studioId = selectStudioId(state);
+    api({
+        host: '',
+        uri: `/site-api/comments/gallery/${studioId}/toggle-comments/`,
+        method: 'PUT',
+        useCsrf: true
+    }, (err, body, res) => {
+        const error = normalizeError(err, body, res);
+        const wasAllowed = selectStudioCommentsAllowed(state);
+        dispatch(completeMutation('commentsAllowed', error ? wasAllowed : shouldAllow, error));
+    });
+});
+
+const mutateStudioOpenToAll = shouldBeOpen => ((dispatch, getState) => {
+    dispatch(startMutation('openToAll'));
+    const state = getState();
+    const studioId = selectStudioId(state);
+    api({
+        host: '',
+        uri: `/site-api/galleries/${studioId}/mark/${shouldBeOpen ? 'open' : 'closed'}/`,
+        method: 'PUT',
+        useCsrf: true
+    }, (err, body, res) => {
+        const error = normalizeError(err, body, res);
+        const wasOpen = selectStudioOpenToAll(getState());
+        dispatch(completeMutation('openToAll', error ? wasOpen : shouldBeOpen, error));
+    });
+});
+
 module.exports = {
     getInitialState,
     studioMutationsReducer,
@@ -190,6 +226,8 @@ module.exports = {
     mutateStudioDescription,
     mutateFollowingStudio,
     mutateStudioImage,
+    mutateStudioCommentsAllowed,
+    mutateStudioOpenToAll,
 
     // Selectors
     selectIsMutatingTitle,
@@ -199,5 +237,9 @@ module.exports = {
     selectDescriptionMutationError,
     selectFollowingMutationError,
     selectIsMutatingImage,
-    selectImageMutationError
+    selectImageMutationError,
+    selectIsMutatingCommentsAllowed,
+    selectCommentsAllowedMutationError,
+    selectIsMutatingOpenToAll,
+    selectOpenToAllMutationError
 };

src/redux/studio.js

@@ -17,7 +17,7 @@ const getInitialState = () => ({
     title: '',
     description: '',
     openToAll: false,
-    commentingAllowed: false,
+    commentsAllowed: false,
     image: '',
     followers: 0,
     owner: null,
@@ -87,6 +87,8 @@ const selectStudioId = state => state.studio.id;
 const selectStudioTitle = state => state.studio.title;
 const selectStudioDescription = state => state.studio.description;
 const selectStudioImage = state => state.studio.image;
+const selectStudioOpenToAll = state => state.studio.openToAll;
+const selectStudioCommentsAllowed = state => state.studio.commentsAllowed;
 const selectIsLoadingInfo = state => state.studio.infoStatus === Status.FETCHING;
 const selectIsFollowing = state => state.studio.following;
 const selectIsLoadingRoles = state => state.studio.rolesStatus === Status.FETCHING;
@@ -106,7 +108,7 @@ const getInfo = () => ((dispatch, getState) => {
             description: body.description,
             image: body.image,
             openToAll: body.open_to_all,
-            commentingAllowed: body.commenting_allowed,
+            commentsAllowed: body.comments_allowed,
             updated: new Date(body.history.modified),
             followers: body.stats.followers,
             owner: body.owner
@@ -153,6 +155,8 @@ module.exports = {
     selectStudioTitle,
     selectStudioDescription,
     selectStudioImage,
+    selectStudioOpenToAll,
+    selectStudioCommentsAllowed,
     selectIsLoadingInfo,
     selectIsLoadingRoles,
     selectIsFollowing

src/views/studio/studio-comments-allowed.jsx

@@ -0,0 +1,55 @@
+/* eslint-disable react/jsx-no-bind */
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+
+import {selectStudioCommentsAllowed, selectIsLoadingInfo} from '../../redux/studio';
+import {selectCanEditInfo} from '../../redux/studio-permissions';
+import {
+    mutateStudioCommentsAllowed, selectIsMutatingCommentsAllowed, selectCommentsAllowedMutationError
+} from '../../redux/studio-mutations';
+
+const StudioCommentsAllowed = ({
+    commentsAllowedError, isLoading, isMutating, commentsAllowed, canEditInfo, handleUpdate
+}) => (
+    <div>
+        {isLoading ? (
+            <h4>Loading...</h4>
+        ) : (
+            <div>
+                <label>
+                    <input
+                        disabled={isMutating || !canEditInfo}
+                        type="checkbox"
+                        checked={commentsAllowed}
+                        onChange={e => handleUpdate(e.target.checked)}
+                    />
+                    <h4>{commentsAllowed ? 'Comments allowed' : 'Comments not allowed'}</h4>
+                    {commentsAllowedError && <div>Error mutating commentsAllowed: {commentsAllowedError}</div>}
+                </label>
+            </div>
+        )}
+    </div>
+);
+
+StudioCommentsAllowed.propTypes = {
+    commentsAllowedError: PropTypes.string,
+    canEditInfo: PropTypes.bool,
+    isLoading: PropTypes.bool,
+    isMutating: PropTypes.bool,
+    commentsAllowed: PropTypes.string,
+    handleUpdate: PropTypes.func
+};
+
+export default connect(
+    state => ({
+        commentsAllowed: selectStudioCommentsAllowed(state),
+        canEditInfo: selectCanEditInfo(state),
+        isLoading: selectIsLoadingInfo(state),
+        isMutating: selectIsMutatingCommentsAllowed(state),
+        commentsAllowedError: selectCommentsAllowedMutationError(state)
+    }),
+    {
+        handleUpdate: mutateStudioCommentsAllowed
+    }
+)(StudioCommentsAllowed);

src/views/studio/studio-comments.jsx

@@ -7,6 +7,7 @@ import Button from '../../components/forms/button.jsx';
 import ComposeComment from '../preview/comment/compose-comment.jsx';
 import TopLevelComment from '../preview/comment/top-level-comment.jsx';
 import studioCommentActions from '../../redux/studio-comment-actions.js';
+import StudioCommentsAllowed from './studio-comments-allowed.jsx';
 
 import {
     selectShowCommentComposer,
@@ -40,6 +41,7 @@ const StudioComments = ({
     return (
         <div>
             <h2>Comments</h2>
+            <StudioCommentsAllowed />
             <div>
                 {shouldShowCommentComposer &&
                     <ComposeComment

src/views/studio/studio-open-to-all.jsx

@@ -0,0 +1,55 @@
+/* eslint-disable react/jsx-no-bind */
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+
+import {selectStudioOpenToAll, selectIsLoadingInfo} from '../../redux/studio';
+import {selectCanEditInfo} from '../../redux/studio-permissions';
+import {
+    mutateStudioOpenToAll, selectIsMutatingOpenToAll, selectOpenToAllMutationError
+} from '../../redux/studio-mutations';
+
+const StudioOpenToAll = ({
+    openToAllError, isLoading, isMutating, openToAll, canEditInfo, handleUpdate
+}) => (
+    <div>
+        {isLoading ? (
+            <h4>Loading...</h4>
+        ) : (
+            <div>
+                <label>
+                    <input
+                        disabled={isMutating || !canEditInfo}
+                        type="checkbox"
+                        checked={openToAll}
+                        onChange={e => handleUpdate(e.target.checked)}
+                    />
+                    <h4>{openToAll ? 'Open to all' : 'Not open to all'}</h4>
+                    {openToAllError && <div>Error mutating openToAll: {openToAllError}</div>}
+                </label>
+            </div>
+        )}
+    </div>
+);
+
+StudioOpenToAll.propTypes = {
+    openToAllError: PropTypes.string,
+    canEditInfo: PropTypes.bool,
+    isLoading: PropTypes.bool,
+    isMutating: PropTypes.bool,
+    openToAll: PropTypes.string,
+    handleUpdate: PropTypes.func
+};
+
+export default connect(
+    state => ({
+        openToAll: selectStudioOpenToAll(state),
+        canEditInfo: selectCanEditInfo(state),
+        isLoading: selectIsLoadingInfo(state),
+        isMutating: selectIsMutatingOpenToAll(state),
+        openToAllError: selectOpenToAllMutationError(state)
+    }),
+    {
+        handleUpdate: mutateStudioOpenToAll
+    }
+)(StudioOpenToAll);

src/views/studio/studio-projects.jsx

@@ -2,6 +2,7 @@ import React, {useEffect, useCallback} from 'react';
 import PropTypes from 'prop-types';
 import {useParams} from 'react-router-dom';
 import {connect} from 'react-redux';
+import StudioOpenToAll from './studio-open-to-all.jsx';
 
 import {projectFetcher} from './lib/fetchers';
 import {projects} from './lib/redux-modules';
@@ -24,6 +25,7 @@ const StudioProjects = ({
     return (
         <div>
             <h2>Projects</h2>
+            <StudioOpenToAll />
             {error && <Debug
                 label="Error"
                 data={error}