Highlight active project

Author: Yadro

src/modules/projects/ProjectStore.ts

@@ -27,6 +27,7 @@ export default class ProjectStore {
 
   setActiveProject(projectId: string) {
     this.activeProject = projectId;
+    this.projects = this.projects.slice(); // trigger to update view
   }
 
   setProjectProps(
@@ -36,6 +37,7 @@ export default class ProjectStore {
   ) {
     project.title = title;
     project.color = color || '';
+    this.projects = this.projects.slice();
     this.projectService.save(this.projects);
   }
 
@@ -47,8 +49,9 @@ export default class ProjectStore {
   }
 
   add(project: ProjectModel) {
-    this.projects.push(project);
-    this.projects = this.projects.slice();
+    const newProjects = this.projects.slice();
+    newProjects.push(project);
+    this.projects = newProjects;
     this.projectService.save(this.projects);
   }
 

src/screens/projects/Projects.tsx

@@ -45,8 +45,14 @@ const ProjectList = TreeList(
     projectStore.set(list);
   },
   {
+    selectable: false,
     titleRender(project: ProjectModel) {
-      return <ProjectNode project={project} />;
+      return (
+        <ProjectNode
+          project={project}
+          active={projectStore.activeProject === project.key}
+        />
+      );
     },
   }
 );

src/screens/projects/components/ProjectNode/ProjectNode.tsx

@@ -2,6 +2,7 @@ import React, { SyntheticEvent } from 'react';
 import { EditOutlined } from '@ant-design/icons';
 import { observer } from 'mobx-react';
 import { createUseStyles } from 'react-jss';
+import clsx from 'clsx';
 
 import ProjectModel from '../../../../models/ProjectModel';
 import rootStore from '../../../../modules/RootStore';
@@ -10,28 +11,38 @@ const { projectStore } = rootStore;
 
 interface ProjectNodeProps {
   project: ProjectModel;
+  active: boolean;
 }
 
-export default observer(function ProjectNode({ project }: ProjectNodeProps) {
+const ProjectNode = observer(({ project, active }: ProjectNodeProps) => {
   const classes = useStyle();
 
-  function onClick(e: SyntheticEvent) {
+  function onClick() {
+    projectStore.setActiveProject(project.key);
+  }
+
+  function onEditClick(e: SyntheticEvent) {
     e.stopPropagation();
     projectStore.setEditableProject(project);
   }
 
   return (
-    <div className={classes.projectNode}>
+    <div
+      className={clsx(classes.projectNode, active && classes.active)}
+      onClick={onClick}
+    >
       <div
         className={classes.projectColor}
         style={{ backgroundColor: project.color }}
       />
       <div className={classes.title}>{project.title}</div>
-      <EditOutlined className={classes.editButton} onClick={onClick} />
+      <EditOutlined className={classes.editButton} onClick={onEditClick} />
     </div>
   );
 });
 
+export default ProjectNode;
+
 const useStyle = createUseStyles({
   projectNode: {
     display: 'flex',
@@ -42,6 +53,9 @@ const useStyle = createUseStyles({
       display: 'inline',
     },
   },
+  active: {
+    fontWeight: 500,
+  },
   projectColor: {
     width: 16,
     height: 16,