feat: hide dev mode, sync and deletion when student mode is enabled

Author: pyphilia

src/components/Settings.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { withRouter } from 'react-router';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
+import { connect } from 'react-redux';
 import { FormGroup } from '@material-ui/core';
 import { withTranslation } from 'react-i18next';
 import Styles from '../Styles';
@@ -13,6 +14,7 @@ import Main from './common/Main';
 import { SETTINGS_MAIN_ID } from '../config/selectors';
 import SyncAdvancedSwitch from './space/sync/SyncAdvancedSwitch';
 import StudentModeSwitch from './common/StudentModeSwitch';
+import { DEFAULT_STUDENT_MODE } from '../config/constants';
 
 // eslint-disable-next-line react/prefer-stateless-function
 export class Settings extends Component {
@@ -29,10 +31,15 @@ export class Settings extends Component {
     i18n: PropTypes.shape({
       changeLanguage: PropTypes.func.isRequired,
     }).isRequired,
+    studentMode: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    studentMode: DEFAULT_STUDENT_MODE,
   };
 
   render() {
-    const { classes, t } = this.props;
+    const { classes, t, studentMode } = this.props;
 
     return (
       <Main id={SETTINGS_MAIN_ID}>
@@ -42,18 +49,26 @@ export class Settings extends Component {
           </Typography>
           <FormGroup>
             <LanguageSelect />
-            <DeveloperSwitch />
             <GeolocationControl />
             <SyncAdvancedSwitch />
             <StudentModeSwitch />
+            {studentMode ? null : <DeveloperSwitch />}
           </FormGroup>
         </div>
       </Main>
     );
   }
 }
 
-const StyledComponent = withStyles(Styles, { withTheme: true })(Settings);
+const mapStateToProps = ({ authentication }) => ({
+  studentMode: authentication.getIn(['user', 'settings', 'studentMode']),
+});
+
+const ConnectedComponent = connect(mapStateToProps, null)(Settings);
+
+const StyledComponent = withStyles(Styles, { withTheme: true })(
+  ConnectedComponent
+);
 
 const TranslatedComponent = withTranslation()(StyledComponent);
 

src/components/__snapshots__/Settings.test.js.snap

@@ -15,10 +15,10 @@ exports[`<Settings /> renders correctly 1`] = `
     </WithStyles(ForwardRef(Typography))>
     <WithStyles(ForwardRef(FormGroup))>
       <withI18nextTranslation(WithStyles(Connect(LanguageSelect))) />
-      <withI18nextTranslation(WithStyles(Connect(DeveloperSwitch))) />
       <withI18nextTranslation(WithStyles(Connect(GeolocationControl))) />
       <withI18nextTranslation(WithStyles(Connect(SyncAdvancedSwitch))) />
       <withI18nextTranslation(WithStyles(Connect(StudentModeSwitch))) />
+      <withI18nextTranslation(WithStyles(Connect(DeveloperSwitch))) />
     </WithStyles(ForwardRef(FormGroup))>
   </div>
 </withI18nextTranslation(WithStyles(Connect(Main)))>

src/components/common/MediaCard.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardActionArea from '@material-ui/core/CardActionArea';
@@ -16,7 +17,7 @@ import ClearButton from '../space/ClearButton';
 import ExportButton from '../space/ExportButton';
 import SyncButton from '../space/SyncButton';
 import Text from './Text';
-import { MIN_CARD_WIDTH } from '../../config/constants';
+import { MIN_CARD_WIDTH, DEFAULT_STUDENT_MODE } from '../../config/constants';
 import {
   buildSpaceCardId,
   SPACE_DESCRIPTION_EXPAND_BUTTON_CLASS,
@@ -56,13 +57,33 @@ const styles = theme => ({
 });
 
 export const MediaCard = props => {
-  const { classes, image, text, viewLink, space, showActions } = props;
+  const {
+    classes,
+    image,
+    text,
+    viewLink,
+    space,
+    showActions,
+    studentMode,
+  } = props;
   const { id, name } = space;
   const [expanded, setExpanded] = React.useState(false);
   const handleExpandClick = () => {
     setExpanded(!expanded);
   };
 
+  const renderTeacherActions = () => {
+    if (!studentMode) {
+      return (
+        <>
+          <DeleteButton spaceId={id} />
+          <SyncButton spaceId={id} />
+        </>
+      );
+    }
+    return null;
+  };
+
   return (
     <Card id={buildSpaceCardId(id)} className={classes.card}>
       <CardActionArea className={SPACE_CARD_LINK_CLASS} onClick={viewLink}>
@@ -88,9 +109,8 @@ export const MediaCard = props => {
       {showActions && (
         <CardActions disableSpacing>
           <ClearButton spaceId={id} />
-          <DeleteButton spaceId={id} />
           <ExportButton space={space} />
-          <SyncButton spaceId={id} />
+          {renderTeacherActions()}
 
           {text && (
             <IconButton
@@ -131,11 +151,19 @@ MediaCard.propTypes = {
   text: PropTypes.string,
   viewLink: PropTypes.func.isRequired,
   showActions: PropTypes.bool,
+  studentMode: PropTypes.bool,
 };
 
 MediaCard.defaultProps = {
   text: '',
   showActions: false,
+  studentMode: DEFAULT_STUDENT_MODE,
 };
 
-export default withStyles(styles)(MediaCard);
+const mapStateToProps = ({ authentication }) => ({
+  studentMode: authentication.getIn(['user', 'settings', 'studentMode']),
+});
+
+const ConnectedComponent = connect(mapStateToProps, null)(MediaCard);
+
+export default withStyles(styles)(ConnectedComponent);

src/components/common/__snapshots__/MediaCard.test.js.snap

@@ -89,9 +89,6 @@ exports[`<MediaCard /> <MediaCard /> with showActions = true with text defined r
     <Connect(withI18nextTranslation(WithStyles(ClearButton)))
       spaceId="id"
     />
-    <withI18nextTranslation(WithStyles(Connect(DeleteButton)))
-      spaceId="id"
-    />
     <withI18nextTranslation(WithStyles(Connect(ExportButton)))
       space={
         Object {
@@ -100,6 +97,9 @@ exports[`<MediaCard /> <MediaCard /> with showActions = true with text defined r
         }
       }
     />
+    <withI18nextTranslation(WithStyles(Connect(DeleteButton)))
+      spaceId="id"
+    />
     <withRouter(withI18nextTranslation(WithStyles(SyncButton)))
       spaceId="id"
     />
@@ -161,9 +161,6 @@ exports[`<MediaCard /> <MediaCard /> with showActions = true with text undefined
     <Connect(withI18nextTranslation(WithStyles(ClearButton)))
       spaceId="id"
     />
-    <withI18nextTranslation(WithStyles(Connect(DeleteButton)))
-      spaceId="id"
-    />
     <withI18nextTranslation(WithStyles(Connect(ExportButton)))
       space={
         Object {
@@ -172,6 +169,9 @@ exports[`<MediaCard /> <MediaCard /> with showActions = true with text undefined
         }
       }
     />
+    <withI18nextTranslation(WithStyles(Connect(DeleteButton)))
+      spaceId="id"
+    />
     <withRouter(withI18nextTranslation(WithStyles(SyncButton)))
       spaceId="id"
     />

src/components/space/SpaceHeader.js

@@ -25,6 +25,7 @@ import {
   SPACE_PREVIEW_ICON_CLASS,
   DRAWER_BUTTON_ID,
 } from '../../config/selectors';
+import { DEFAULT_STUDENT_MODE } from '../../config/constants';
 
 class SpaceHeader extends Component {
   static propTypes = {
@@ -45,6 +46,11 @@ class SpaceHeader extends Component {
     handleDrawerOpen: PropTypes.func.isRequired,
     dispatchSaveSpace: PropTypes.func.isRequired,
     t: PropTypes.func.isRequired,
+    studentMode: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    studentMode: DEFAULT_STUDENT_MODE,
   };
 
   handleSave = () => {
@@ -138,6 +144,20 @@ class SpaceHeader extends Component {
     return null;
   }
 
+  renderTeacherButtons() {
+    const { studentMode } = this.props;
+    if (!studentMode) {
+      return (
+        <>
+          {this.renderDeleteButton()}
+          {this.renderSyncButton()}
+          {this.renderSaveButton()}
+        </>
+      );
+    }
+    return null;
+  }
+
   render() {
     const {
       openDrawer,
@@ -168,22 +188,21 @@ class SpaceHeader extends Component {
           {name}
           <span style={{ position: 'absolute', right: 20 }}>
             {this.renderClearButton()}
-            {this.renderSyncButton()}
             {this.renderPreviewIcon()}
-            {this.renderDeleteButton()}
             {this.renderExportButton()}
-            {this.renderSaveButton()}
+            {this.renderTeacherButtons()}
           </span>
         </Toolbar>
       </AppBar>
     );
   }
 }
 
-const mapStateToProps = ({ Space }) => ({
+const mapStateToProps = ({ Space, authentication }) => ({
   space: Space.get('current')
     .get('content')
     .toJS(),
+  studentMode: authentication.getIn(['user', 'settings', 'studentMode']),
 });
 
 const mapDispatchToProps = {