fix: user access to classroom after edit, refactor, add selectors

Author: pyphilia

src/actions/classroom.js

@@ -24,11 +24,11 @@ import {
 } from '../types';
 import {
   ERROR_GENERAL,
+  ERROR_ACCESS_DENIED_CLASSROOM,
   ERROR_DUPLICATE_CLASSROOM_NAME,
   ERROR_INVALID_USERNAME,
   ERROR_DUPLICATE_USERNAME_IN_CLASSROOM,
   ERROR_NO_USER_TO_DELETE,
-  ERROR_ACCESS_DENIED_CLASSROOM,
 } from '../config/errors';
 import {
   ADD_CLASSROOM_CHANNEL,
@@ -90,10 +90,14 @@ export const getClassrooms = () => dispatch => {
   // create listener
   window.ipcRenderer.once(GET_CLASSROOMS_CHANNEL, (event, classrooms) => {
     // dispatch that the getter has succeeded
-    dispatch({
-      type: GET_CLASSROOMS_SUCCEEDED,
-      payload: classrooms,
-    });
+    if (classrooms === ERROR_ACCESS_DENIED_CLASSROOM) {
+      toastr.error(ERROR_MESSAGE_HEADER, ERROR_ACCESS_DENIED_CLASSROOM_MESSAGE);
+    } else {
+      dispatch({
+        type: GET_CLASSROOMS_SUCCEEDED,
+        payload: classrooms,
+      });
+    }
     dispatch(flagGettingClassrooms(false));
   });
 };
@@ -214,7 +218,8 @@ export const editClassroom = payload => dispatch => {
     if (response === ERROR_GENERAL) {
       toastr.error(ERROR_MESSAGE_HEADER, ERROR_EDITING_CLASSROOM_MESSAGE);
     } else {
-      // update saved classrooms in state
+      // update saved classrooms and current classroom in state
+      dispatch(getClassroom(payload));
       dispatch(getClassrooms());
 
       toastr.success(SUCCESS_MESSAGE_HEADER, SUCCESS_EDITING_CLASSROOM_MESSAGE);

src/components/classrooms/EditClassroomButton.js

@@ -21,6 +21,7 @@ import {
   EDIT_CLASSROOM_BUTTON_CLASS,
   EDIT_CLASSROOM_VALIDATE_BUTTON_ID,
   EDIT_CLASSROOM_CANCEL_BUTTON_ID,
+  EDIT_CLASSROOM_DELETE_DATA_BUTTON_CLASS,
 } from '../../config/selectors';
 import ClassroomNameTextField from './ClassroomNameTextField';
 import { isClassroomNameValid } from '../../utils/classroom';
@@ -56,6 +57,7 @@ class EditClassroomButton extends Component {
       spaces: PropTypes.arrayOf({}).isRequired,
     }).isRequired,
     t: PropTypes.func.isRequired,
+    userId: PropTypes.string.isRequired,
   };
 
   state = (() => {
@@ -95,9 +97,10 @@ class EditClassroomButton extends Component {
     const {
       dispatchEditClassroom,
       classroom: { id },
+      userId,
     } = this.props;
     if (isClassroomNameValid(name)) {
-      dispatchEditClassroom({ name, id, deleteSelection });
+      dispatchEditClassroom({ name, id, deleteSelection, userId });
       this.close();
     }
   };
@@ -142,6 +145,7 @@ class EditClassroomButton extends Component {
               ) : (
                 <Tooltip title={t(`Delete this space`)}>
                   <IconButton
+                    className={EDIT_CLASSROOM_DELETE_DATA_BUTTON_CLASS}
                     color="inherit"
                     onClick={e => this.changeDeleteSelection(e, spaceId, true)}
                   >
@@ -151,7 +155,7 @@ class EditClassroomButton extends Component {
               );
 
               return (
-                <>
+                <Grid container data-space-id={spaceId} alignItems="center">
                   <Grid item xs={2}>
                     {button}
                   </Grid>
@@ -166,7 +170,7 @@ class EditClassroomButton extends Component {
                   >
                     <Typography>{spaceName}</Typography>
                   </Grid>
-                </>
+                </Grid>
               );
             })}
           </Grid>
@@ -231,12 +235,16 @@ class EditClassroomButton extends Component {
   }
 }
 
+const mapStateToProps = ({ authentication }) => ({
+  userId: authentication.getIn(['user', 'id']),
+});
+
 const mapDispatchToProps = {
   dispatchEditClassroom: editClassroom,
 };
 
 const ConnectedComponent = connect(
-  null,
+  mapStateToProps,
   mapDispatchToProps
 )(EditClassroomButton);
 

src/components/classrooms/EditUserInClassroomButton.js

@@ -26,6 +26,7 @@ import {
   EDIT_USER_IN_CLASSROOM_BUTTON_CLASS,
   EDIT_USER_IN_CLASSROOM_VALIDATE_BUTTON_ID,
   EDIT_USER_IN_CLASSROOM_USERNAME_INPUT_ID,
+  EDIT_USER_IN_CLASSROOM_DELETE_DATA_BUTTON_CLASS,
 } from '../../config/selectors';
 import {
   ERROR_MESSAGE_HEADER,
@@ -233,13 +234,17 @@ class EditUserInClassroomButton extends Component {
                     color="inherit"
                     onClick={e => this.changeDeleteSelection(e, spaceId, true)}
                   >
-                    <DeleteIcon />
+                    <DeleteIcon
+                      className={
+                        EDIT_USER_IN_CLASSROOM_DELETE_DATA_BUTTON_CLASS
+                      }
+                    />
                   </IconButton>
                 </Tooltip>
               );
 
               return (
-                <>
+                <Grid container data-space-id={spaceId}>
                   <Grid item xs={2} classes={{ root: classes.editSpaceRow }}>
                     {button}
                   </Grid>
@@ -256,7 +261,7 @@ class EditUserInClassroomButton extends Component {
                     {hasResources && <ResourceIcon />}
                     {hasActions && <ActionIcon />}
                   </Grid>
-                </>
+                </Grid>
               );
             })}
           </Grid>

src/components/classrooms/ImportDataAssignUserForm.js

@@ -12,6 +12,7 @@ import { loadSpaceInClassroom, clearLoadSpaceInClassroom } from '../../actions';
 import StudentForm from './StudentForm';
 import LoadSpaceSelectors from '../space/load/LoadSpaceSelectors';
 import { isSpaceDifferent as isSpaceDifferentFunc } from '../../utils/syncSpace';
+import { IMPORT_DATA_CLASSROOM_VALIDATE_BUTTON_ID } from '../../config/selectors';
 
 const styles = theme => ({
   ...Styles(theme),
@@ -117,6 +118,7 @@ class ImportDataAssignUserForm extends Component {
 
     return (
       <Button
+        id={IMPORT_DATA_CLASSROOM_VALIDATE_BUTTON_ID}
         variant="contained"
         onClick={this.handleValidate}
         color="primary"

src/components/classrooms/StudentForm.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core';
 import { withTranslation } from 'react-i18next';
+import clsx from 'clsx';
 import { withRouter } from 'react-router';
 import Typography from '@material-ui/core/Typography/Typography';
 import PropTypes from 'prop-types';
@@ -10,6 +11,10 @@ import Toolbar from '@material-ui/core/Toolbar';
 import CssBaseline from '@material-ui/core/CssBaseline/CssBaseline';
 import AppBar from '@material-ui/core/AppBar/AppBar';
 import Loader from '../common/Loader';
+import {
+  IMPORT_DATA_IN_CLASSROOM_STUDENT_SELECT_PREFIX_CLASS,
+  IMPORT_DATA_IN_CLASSROOM_STUDENT_SELECT_CONTAINER_CLASS,
+} from '../../config/selectors';
 
 const styles = theme => ({
   select: {
@@ -82,7 +87,11 @@ class StudentForm extends Component {
           {t('Assign data to student')}
         </Typography>
         <Creatable
-          className={classes.select}
+          className={clsx(
+            classes.select,
+            IMPORT_DATA_IN_CLASSROOM_STUDENT_SELECT_CONTAINER_CLASS
+          )}
+          classNamePrefix={IMPORT_DATA_IN_CLASSROOM_STUDENT_SELECT_PREFIX_CLASS}
           options={options}
           isClearable
           placeholder={t('Create new student...')}

src/components/classrooms/StudentsTable.js

@@ -32,6 +32,8 @@ import {
   CLASSROOM_TABLE_BODY_ID,
   DELETE_USER_IN_CLASSROOM_BUTTON_CLASS,
   SELECT_USER_IN_CLASSROOM_CLASS,
+  STUDENT_ROW_ACTIONS_CLASS,
+  STUDENT_ROW_RESOURCES_CLASS,
 } from '../../config/selectors';
 import {
   getUserResourcesForSpaceInClassroom,
@@ -284,8 +286,12 @@ class StudentsTable extends Component {
           // display all other data depending on headcells
           .map(({ id }) => (
             <TableCell key={id}>
-              {row[id].actions.length > 0 && <ActionIcon />}
-              {row[id].resources.length > 0 && <ResourceIcon />}
+              {row[id].actions.length > 0 && (
+                <ActionIcon className={STUDENT_ROW_ACTIONS_CLASS} />
+              )}
+              {row[id].resources.length > 0 && (
+                <ResourceIcon className={STUDENT_ROW_RESOURCES_CLASS} />
+              )}
             </TableCell>
           ))}
         {this.renderUserOperations(row)}

src/components/classrooms/TableHeader.js

@@ -8,6 +8,7 @@ import TableSortLabel from '@material-ui/core/TableSortLabel';
 import Checkbox from '@material-ui/core/Checkbox';
 import PropTypes from 'prop-types';
 import { TABLE_ORDER } from '../../config/constants';
+import { buildTableCellSpaceId } from '../../config/selectors';
 
 const styles = () => ({
   visuallyHidden: {
@@ -74,19 +75,20 @@ class TableHeader extends Component {
               inputProps={{ 'aria-label': t('Select all') }}
             />
           </TableCell>
-          {headCells.map(headCell => (
+          {headCells.map(({ id, numeric, label }) => (
             <TableCell
-              key={headCell.id}
-              align={headCell.numeric ? 'right' : 'left'}
-              sortDirection={orderBy === headCell.id ? order : false}
+              id={buildTableCellSpaceId(id)}
+              key={id}
+              align={numeric ? 'right' : 'left'}
+              sortDirection={orderBy === id ? order : false}
             >
               <TableSortLabel
-                active={orderBy === headCell.id}
-                direction={orderBy === headCell.id ? order : TABLE_ORDER.ASC}
-                onClick={createSortHandler(headCell.id)}
+                active={orderBy === id}
+                direction={orderBy === id ? order : TABLE_ORDER.ASC}
+                onClick={createSortHandler(id)}
               >
-                {headCell.label}
-                {orderBy === headCell.id ? (
+                {label}
+                {orderBy === id ? (
                   <span className={classes.visuallyHidden}>
                     {order === TABLE_ORDER.DESC
                       ? t('sorted descending')

src/config/selectors.js

@@ -122,3 +122,23 @@ export const CLASSROOM_CARD_NAME_CLASS = 'classroomCardName';
 export const SELECT_USER_IN_CLASSROOM_CLASS = 'selectUserInClassroom';
 export const DELETE_USERS_IN_CLASSROOM_BUTTON_ID =
   'deleteUsersInClassroomButton';
+export const IMPORT_DATA_IN_CLASSROOM_BUTTON_ID = 'importDataInClassroomButton';
+export const IMPORT_FILEPATH_IN_CLASSROOM_INPUT_ID =
+  'importFilepathInClassroomInput';
+export const IMPORT_DATA_IN_CLASSROOM_SUBMIT_BUTTON_ID =
+  'importDataInClassroomSubmitButton';
+export const IMPORT_DATA_IN_CLASSROOM_STUDENT_SELECT_CONTAINER_CLASS =
+  'importDataInClassroomStudentSelectContainer';
+export const IMPORT_DATA_IN_CLASSROOM_STUDENT_SELECT_PREFIX_CLASS =
+  'importDataInClassroomStudentSelectPrefix';
+export const IMPORT_DATA_IN_CLASSROOM_BACK_BUTTON_ID =
+  'importDataInClassroomBackButton';
+export const IMPORT_DATA_CLASSROOM_VALIDATE_BUTTON_ID =
+  'importDataInClassroomValidateButton';
+export const STUDENT_ROW_RESOURCES_CLASS = 'studentRowResources';
+export const STUDENT_ROW_ACTIONS_CLASS = 'studentRowActions';
+export const EDIT_USER_IN_CLASSROOM_DELETE_DATA_BUTTON_CLASS =
+  'editUserInClassroomDeleteDataButton';
+export const EDIT_CLASSROOM_DELETE_DATA_BUTTON_CLASS =
+  'editClassroomDeleteDataButton';
+export const buildTableCellSpaceId = id => `tableCellSpace-${id}`;

test/classrooms.test.js

@@ -231,7 +231,7 @@ describe('Classrooms Scenarios', function() {
         // open and cancel modal
         await client.click(`#${ADD_CLASSROOM_BUTTON_ID}`);
         await client.pause(MODAL_OPEN_PAUSE);
-        await client.setValue(`#${ADD_CLASSROOM_NAME_INPUT_ID}`, name);
+        await client.setValue(`#${CLASSROOM_NAME_INPUT_ID}`, name);
         await client.pause(INPUT_TYPE_PAUSE);
         await client.click(`#${ADD_CLASSROOM_CANCEL_BUTTON_ID}`);
         await client.pause(MODAL_CLOSE_PAUSE);