Archived Rooms

client/src/Components/Navigation/HomeNav/HomeNav.js

@@ -55,7 +55,7 @@ const Navbar = ({ page, user, loggedIn, isDark, toggleAdmin }) => {
               </Aux>
             )}
             <NavItem
-              link="/community/rooms?privacy=all&roomType=all"
+              link="/community/rooms?privacy=all&roomType=all&roomStatus=default"
               name="Community"
             />
             {user.isAdmin ? (

client/src/Components/Navigation/Navbar.js

@@ -49,7 +49,7 @@ const Navbar = ({ user, location, toggleAdmin }) => {
         <ul className={classes.NavList}>
           <NavItem link="/myVMT/rooms" name="My VMT" ntf={ntf} />
           <NavItem
-            link="/community/rooms?privacy=all&roomType=all"
+            link="/community/rooms?privacy=all&roomType=all&roomStatus=default"
             name="Community"
           />
           {user.isAdmin ? (

client/src/Components/Search/Search.js

@@ -18,6 +18,7 @@ class Search extends Component {
       value,
       isControlled,
       'data-testid': dataTestId,
+      roomStatus,
     } = this.props;
     return (
       <div className={[classes.Search].join(' ')}>
@@ -29,7 +30,7 @@ class Search extends Component {
             className={[classes.Input, classes[theme]].join(' ')}
             type="text"
             placeholder={placeholder}
-            onChange={(event) => _search(event.target.value)}
+            onChange={(event) => _search(event.target.value, roomStatus)}
           />
         ) : (
           <input
@@ -38,7 +39,7 @@ class Search extends Component {
             className={[classes.Input, classes[theme]].join(' ')}
             type="text"
             placeholder={placeholder}
-            onChange={(event) => _search(event.target.value)}
+            onChange={(event) => _search(event.target.value, roomStatus)}
           />
         )}
         <i className={['fas fa-search', classes.Icon].join(' ')} />
@@ -54,6 +55,7 @@ Search.propTypes = {
   _search: PropTypes.func.isRequired,
   isControlled: PropTypes.bool,
   'data-testid': PropTypes.string.isRequired,
+  roomStatus: PropTypes.string.isRequired,
 };
 
 Search.defaultProps = {

client/src/Components/UI/Modal/ArchiveModal.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Modal from './Modal';
+import classes from './modal.css';
+import Button from '../Button/Button';
+
+// NOT READY FOR USE WITH COURSES OR ACTIVITIES
+const hash = {
+  course: 'courses',
+  room: 'rooms',
+  activity: 'activities',
+};
+class ArchiveModal extends Component {
+  archiveResource = () => {
+    const {
+      history,
+      update,
+      closeModal,
+      resource,
+      resourceId,
+      restoring,
+    } = this.props;
+    const updateBody = restoring
+      ? { isArchived: false, isTrashed: false }
+      : { isArchived: true };
+    history.push(`/myVMT/${hash[resource]}`);
+    update(resourceId, updateBody);
+    closeModal();
+  };
+
+  // archiveResourceAndChildren = () => {
+  //   const { history, update, closeModal, resource, resourceId } = this.props;
+  //   update(resourceId, {
+  //     isArchived: true,
+  //     archiveChildren: true,
+  //   });
+  //   closeModal();
+  //   history.push(`/myVMT/${hash[resource]}`);
+  // };
+
+  render() {
+    const { show, closeModal, resource, restoring } = this.props;
+    const actionName = restoring ? 'restore' : 'archive';
+    const iconClass = restoring ? 'fas fa-undo' : 'fas fa-archive';
+    return (
+      <Modal show={show} closeModal={closeModal}>
+        <div>
+          Are you sure you want to {actionName} this {resource}?
+        </div>
+        <div className={classes.Row}>
+          <Button
+            m={10}
+            theme="Danger"
+            data-testid="confirm-archive"
+            click={this.archiveResource}
+          >
+            <i className={iconClass} />
+            {actionName} this {resource}
+          </Button>
+          <Button m={10} theme="Cancel" click={closeModal}>
+            Cancel
+          </Button>
+        </div>
+      </Modal>
+    );
+  }
+}
+
+ArchiveModal.propTypes = {
+  history: PropTypes.shape({}).isRequired,
+  update: PropTypes.func.isRequired,
+  show: PropTypes.bool.isRequired,
+  closeModal: PropTypes.func.isRequired,
+  resource: PropTypes.string.isRequired,
+  resourceId: PropTypes.string.isRequired,
+  restoring: PropTypes.bool.isRequired,
+};
+export default ArchiveModal;

client/src/Components/index.js

@@ -34,6 +34,7 @@ export { default as EditableText } from './EditableText/EditableText';
 export { default as EditText } from './EditableText/EditText';
 export { default as SelectionList } from './Form/SelectionList/SelectionList';
 export { default as TrashModal } from './UI/Modal/TrashModal';
+export { default as ArchiveModal } from './UI/Modal/ArchiveModal';
 export { default as Error } from './HOC/Error';
 export { default as ErrorToast } from './Error/ErrorToast';
 export { default as DemoBrowser } from './DemoBrowser/DemoBrowser';

client/src/Containers/Community.js

@@ -85,6 +85,9 @@ class Community extends Component {
     if (updatedFilters.privacySetting === 'all') {
       delete updatedFilters.privacySetting;
     }
+    if (updatedFilters.roomStatus === 'default') {
+      delete updatedFilters.roomStatus;
+    }
     API.searchPaginated(
       resource,
       updatedFilters.search,
@@ -127,6 +130,10 @@ class Community extends Component {
       filters.roomType = 'all';
     } else if (filter === 'all-privacySetting') {
       filters.privacySetting = 'all';
+    } else if (filter === 'isArchived' || filter === 'isTrashed') {
+      filters.roomStatus = filter;
+    } else if (filter === 'default-roomStatus') {
+      filters.roomStatus = 'default';
     }
     if (resource === 'courses') {
       filters.roomType = null;
@@ -143,17 +150,18 @@ class Community extends Component {
       privacySetting: params.get('privacy'),
       roomType: params.get('roomType'),
       search: params.get('search'),
+      roomStatus: params.get('roomStatus'),
     };
     return filters;
   };
 
   setQueryParams = (filters) => {
     const { history, match } = this.props;
-    const { privacySetting, roomType, search } = filters;
+    const { privacySetting, roomType, roomStatus, search } = filters;
     history.push({
       pathname: match.url,
       search: `?privacy=${privacySetting || 'all'}&roomType=${roomType ||
-        'all'}&search=${search || ''}`,
+        'all'}&roomStatus=${roomStatus || 'default'}&search=${search || ''}`,
     });
   };
 
@@ -166,7 +174,7 @@ class Community extends Component {
   };
 
   render() {
-    const { match } = this.props;
+    const { match, user } = this.props;
     const { visibleResources, moreAvailable, searchText } = this.state;
     const filters = this.getQueryParams();
     let linkPath;
@@ -194,6 +202,7 @@ class Community extends Component {
         moreAvailable={moreAvailable}
         filters={filters}
         toggleFilter={this.toggleFilter}
+        user={user}
       />
     );
   }

client/src/Containers/MyVMT.js

@@ -82,7 +82,7 @@ class MyVMT extends Component {
   };
 
   render() {
-    const { user, match } = this.props;
+    const { user, match, location } = this.props;
     const { bothRoles, view, tabs } = this.state;
     const { resource } = match.params;
 
@@ -128,6 +128,7 @@ class MyVMT extends Component {
             }
             user={user}
             resource={resource}
+            location={location}
           />
         }
         tabs={<TabList routingInfo={match} tabs={tabs} />}
@@ -139,6 +140,7 @@ class MyVMT extends Component {
 MyVMT.propTypes = {
   match: PropTypes.shape({}).isRequired,
   user: PropTypes.shape({}).isRequired,
+  location: PropTypes.shape({}).isRequired,
 };
 
 // @NB THE LACK OF CAMEL CASE HERE IS INTENTIONAL AND ALLOWS US TO AVOID LOTS