Archive projects (#1485)

* update package lock

* delete package lock

* archive projects first pass

reorder projects and add sticky button

fix css

unarchive archived project on project selection

updates

update changeCurrentProject

update changeCurrentProject

update tests

update with project saved indicator

update ui state

fix tests

update project picker and tests

add i18next to projectpreview

update to yarn

* add /* eslint-disable complexity */

* remove else and destructure object

* update tests and project picker

* update project picker

* update tests

* update tests

Author: pwjablonski

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

locales/en/translation.json

@@ -32,7 +32,10 @@
       "log-in-prompt": "Log in to save",
       "log-out-prompt": "Log out",
       "log-in-github": "Log in with GitHub"
-    }
+    },
+    "hide-projects": "Hide Archived Projects",
+    "show-projects": "Show Archived Projects",
+    "project-archived": "Archived"
   },
   "editors": {
     "help-text": "Type in your $t(languages.{{language}}) code here."

src/actions/index.js

@@ -24,6 +24,7 @@ import {
   updateProjectSource,
   updateProjectInstructions,
   projectSuccessfullySaved,
+  archiveProject,
 } from './projects';
 
 import {
@@ -46,6 +47,7 @@ import {
   closeAssignmentCreator,
   coursesLoaded,
   coursesFullyLoaded,
+  toggleArchivedView,
 } from './ui';
 
 import {
@@ -143,4 +145,6 @@ export {
   closeAssignmentCreator,
   coursesLoaded,
   coursesFullyLoaded,
+  archiveProject,
+  toggleArchivedView,
 };

src/actions/projects.js

@@ -77,3 +77,8 @@ export const projectsLoaded = createAction('PROJECTS_LOADED');
 
 export const projectSuccessfullySaved =
   createAction('PROJECT_SUCCESSFULLY_SAVED');
+
+export const archiveProject = createAction(
+  'ARCHIVE_PROJECT',
+  projectKey => ({projectKey}),
+);

src/actions/ui.js

@@ -85,3 +85,7 @@ export const coursesLoaded = createAction(
 export const coursesFullyLoaded = createAction(
   'COURSES_FULLY_LOADED',
 );
+
+export const toggleArchivedView = createAction(
+  'TOGGLE_ARCHIVED_VIEW',
+);

src/components/ProjectPreview.jsx

@@ -1,14 +1,56 @@
+import {faArchive} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import classnames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
+import {t} from 'i18next';
 
 const MAX_LENGTH = 50;
 
-export default function ProjectPreview({preview, project}) {
+export default function ProjectPreview({
+  isCurrentProject,
+  preview,
+  project,
+  onProjectArchived,
+}) {
   return (
     <div>
-      <div className="project-preview__label">
-        {preview.slice(0, MAX_LENGTH)}
+      <div className="project-preview">
+        <div
+          className={classnames('project-preview__label', {
+            'project-preview__label_archived': project.isArchived,
+          })}
+        >
+          {preview.slice(0, MAX_LENGTH)}
+        </div>
+        {
+          (function showArchived() {
+            if (isCurrentProject) {
+              return null;
+            }
+            if (project.isArchived) {
+              return (
+                <div
+                  className="project-preview__archived"
+                >
+                  {t('top-bar.project-archived')}
+                </div>
+              );
+            }
+            return (
+              <div
+                className="project-preview__archive"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onProjectArchived();
+                }}
+              >
+                <FontAwesomeIcon icon={faArchive} />
+              </div>
+            );
+          }())
+        }
       </div>
       {project.updatedAt && (
         <div className="project-preview__timestamp">
@@ -20,6 +62,8 @@ export default function ProjectPreview({preview, project}) {
 }
 
 ProjectPreview.propTypes = {
+  isCurrentProject: PropTypes.bool.isRequired,
   preview: PropTypes.string.isRequired,
   project: PropTypes.object.isRequired,
+  onProjectArchived: PropTypes.func.isRequired,
 };

src/components/TopBar/ProjectPicker.jsx

@@ -1,8 +1,12 @@
+import classnames from 'classnames';
 import isEmpty from 'lodash-es/isEmpty';
+import some from 'lodash-es/some';
+import filter from 'lodash-es/filter';
 import map from 'lodash-es/map';
 import partial from 'lodash-es/partial';
 import PropTypes from 'prop-types';
 import React from 'react';
+import {t} from 'i18next';
 
 import ProjectPreview from '../../containers/ProjectPreview';
 
@@ -23,8 +27,17 @@ const ProjectPicker = createMenu({
       isUserAuthenticated;
   },
 
-  renderItems({currentProjectKey, projectKeys, onChangeCurrentProject}) {
-    return map(projectKeys, projectKey => (
+  renderItems({
+    currentProjectKey,
+    projects,
+    shouldShowArchivedProjects,
+    onChangeCurrentProject,
+    onToggleViewArchived,
+  }) {
+    const visibleProjects = shouldShowArchivedProjects ?
+      projects :
+      filter(projects, ({isArchived}) => !isArchived);
+    const items = map(visibleProjects, ({projectKey}) => (
       <MenuItem
         isActive={projectKey === currentProjectKey}
         key={projectKey}
@@ -33,12 +46,37 @@ const ProjectPicker = createMenu({
         <ProjectPreview projectKey={projectKey} />
       </MenuItem>
     ));
+
+    if (some(projects, 'isArchived')) {
+      items.push(
+        <div
+          className={classnames(
+            'top-bar__menu-item',
+            'top-bar__menu-item_toggle-archived-projects-button',
+          )}
+          key="toggleShowArchivedProjects"
+          onClick={onToggleViewArchived}
+        >
+          <div>
+            {
+              shouldShowArchivedProjects ?
+                t('top-bar.hide-projects') :
+                t('top-bar.show-projects')
+            }
+          </div>
+        </div>,
+      );
+    }
+
+    return items;
   },
 })(ProjectPickerButton);
 
 ProjectPicker.propTypes = {
   currentProjectKey: PropTypes.string,
-  projectKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
+  projects: PropTypes.array.isRequired,
+  shouldShowArchivedProjects: PropTypes.bool.isRequired,
+  onToggleViewArchived: PropTypes.func.isRequired,
 };
 
 ProjectPicker.defaultProps = {

src/components/TopBar/index.jsx

@@ -51,6 +51,8 @@ export default function TopBar({
   openMenu,
   projectKeys,
   shouldShowSavedIndicator,
+  projects,
+  shouldShowArchivedProjects,
   validationState,
   onChangeCurrentProject,
   onClickMenu,
@@ -68,6 +70,7 @@ export default function TopBar({
   onStartEditingInstructions,
   onToggleLibrary,
   onToggleTextSize,
+  onToggleViewArchived,
   onUnlinkGitHub,
   onUpdateRepo,
 }) {
@@ -114,8 +117,11 @@ export default function TopBar({
         currentProjectKey={currentProjectKey}
         isUserAuthenticated={isUserAuthenticated}
         projectKeys={projectKeys}
+        projects={projects}
+        shouldShowArchivedProjects={shouldShowArchivedProjects}
         shouldShowSavedIndicator={shouldShowSavedIndicator}
         onChangeCurrentProject={onChangeCurrentProject}
+        onToggleViewArchived={onToggleViewArchived}
       />
       <CurrentUser
         isLoginAvailable={isGapiReady}
@@ -166,6 +172,8 @@ TopBar.propTypes = {
   isUserTyping: PropTypes.bool.isRequired,
   openMenu: PropTypes.string,
   projectKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
+  projects: PropTypes.array.isRequired,
+  shouldShowArchivedProjects: PropTypes.bool.isRequired,
   shouldShowSavedIndicator: PropTypes.bool.isRequired,
   validationState: PropTypes.string.isRequired,
   onChangeCurrentProject: PropTypes.func.isRequired,
@@ -184,6 +192,7 @@ TopBar.propTypes = {
   onStartGoogleLogIn: PropTypes.func.isRequired,
   onToggleLibrary: PropTypes.func.isRequired,
   onToggleTextSize: PropTypes.func.isRequired,
+  onToggleViewArchived: PropTypes.func.isRequired,
   onUnlinkGitHub: PropTypes.func.isRequired,
   onUpdateRepo: PropTypes.func.isRequired,
 };

src/containers/ProjectPreview.js

@@ -1,7 +1,10 @@
 import {connect} from 'react-redux';
 
 import ProjectPreview from '../components/ProjectPreview';
-import {changeCurrentProject} from '../actions';
+import {
+  archiveProject,
+  changeCurrentProject,
+} from '../actions';
 import {
   makeGetProjectPreview,
   getCurrentProjectKey,
@@ -14,7 +17,7 @@ function makeMapStateToProps() {
   return function mapStateToProps(state, {projectKey}) {
     return {
       preview: getProjectPreview(state, {projectKey}),
-      isSelected: projectKey === getCurrentProjectKey(state),
+      isCurrentProject: projectKey === getCurrentProjectKey(state),
       project: getProject(state, {projectKey}),
     };
   };
@@ -25,6 +28,9 @@ function mapDispatchToProps(dispatch, {projectKey}) {
     onProjectSelected() {
       dispatch(changeCurrentProject(projectKey));
     },
+    onProjectArchived() {
+      dispatch(archiveProject(projectKey));
+    },
   };
 }
 

src/containers/TopBar.js

@@ -10,6 +10,8 @@ import {
   getEnabledLibraries,
   getOpenTopBarMenu,
   getAllProjectKeys,
+  getAllProjects,
+  isArchivedViewOpen,
   isEditingInstructions,
   isExperimental,
   isGapiReady,
@@ -39,6 +41,7 @@ import {
   toggleEditorTextSize,
   toggleLibrary,
   toggleTopBarMenu,
+  toggleArchivedView,
   logIn,
   logOut,
 } from '../actions';
@@ -50,6 +53,7 @@ function mapStateToProps(state) {
     enabledLibraries: getEnabledLibraries(state),
     hasInstructions: Boolean(getCurrentProjectInstructions(state)),
     hasExportedRepo: Boolean(getCurrentProjectExportedRepoName(state)),
+    shouldShowArchivedProjects: isArchivedViewOpen(state),
     isEditingInstructions: isEditingInstructions(state),
     isExperimental: isExperimental(state),
     isGapiReady: isGapiReady(state),
@@ -66,6 +70,7 @@ function mapStateToProps(state) {
     isUserTyping: isUserTyping(state),
     openMenu: getOpenTopBarMenu(state),
     projectKeys: getAllProjectKeys(state),
+    projects: getAllProjects(state),
     validationState: getCurrentValidationState(state),
   };
 }
@@ -147,6 +152,11 @@ function mapDispatchToProps(dispatch) {
     onToggleTextSize() {
       dispatch(toggleEditorTextSize());
     },
+
+    onToggleViewArchived() {
+      dispatch(toggleArchivedView());
+    },
+
   };
 }