feat: add task sorting & filtering

adds filtering by task status (completion date, incomplete, completion)
adds filtering by task metadata (task name, labels, members, due date)
adds sorting by task name, labels, members, and due date

.pre-commit-config.yaml

@@ -1,4 +1,13 @@
 repos:
+- repo: local
+  hooks:
+    - id: eslint
+      name: eslint
+      entry: go run cmd/mage/main.go frontend:lint
+      language: system
+      files: \.[jt]sx?$  # *.js, *.jsx, *.ts and *.tsx
+      types: [file]
+      pass_filenames: false
 - hooks:
   - id: check-yaml
   - id: end-of-file-fixer

.tmuxinator.yml

@@ -1,14 +1,12 @@
-name: citadel
+name: taskcafe
 root: .
 
-on_project_start: docker start test-db
-
 windows:
   - services:
       root: ./
       panes:
         - api:
-          - go run cmd/citadel/main.go web
+          - go run cmd/taskcafe/main.go web
         - yarn:
           - cd frontend
           - yarn start
@@ -19,8 +17,8 @@ windows:
   - api/editor:
       root: ./
       panes:
-        - vim cmd/citadel/main.go
+        - vim cmd/taskcafe/main.go
   - database:
       root: ./
       panes:
-        - pgcli postgres://postgres:test@localhost:5432/citadel
+        - pgcli postgres://taskcafe:taskcafe_test@localhost:5432/taskcafe

README.md

@@ -2,7 +2,7 @@
 
 [![Discord](https://img.shields.io/discord/745396499613220955)](https://discord.gg/JkQDruh)
 [![Releases](https://img.shields.io/github/v/release/JordanKnott/taskcafe)](https://github.com/JordanKnott/taskcafe/releases)
-[![Dockerhub](https://img.shields.io/docker/v/taskcafe/taskcafe)](https://hub.docker.com/repository/docker/taskcafe/taskcafe)
+[![Dockerhub](https://img.shields.io/docker/v/taskcafe/taskcafe?label=docker)](https://hub.docker.com/repository/docker/taskcafe/taskcafe)
 [![Go Report Card](https://goreportcard.com/badge/github.com/JordanKnott/taskcafe)](https://goreportcard.com/report/github.com/JordanKnott/taskcafe)
 
 
@@ -26,7 +26,7 @@ Currently you can do the following to tasks:
 - Checklists
 - Mark tasks as complete
 
-For a list of planned features, check out the [roadmap](https://github.com/JordanKnott/taskcafe/wiki/Roadmap)!
+For a list of planned features, check out the [Roadmap](https://github.com/JordanKnott/taskcafe/wiki/Roadmap)!
 
 ## Installation
 
@@ -44,7 +44,6 @@ Now do the following:
 
 ``` bash
 docker-compose -p taskcafe up -d
-docker-compose -p taskcafe -f docker-compose.yml -f docker-compose.migrate.yml run --rm migrate
 ```
 
 This will start a postgres instance as well as a taskcafe instance.
@@ -80,7 +79,7 @@ This will:
 
 The newly created `taskcafe` binary can be found in the __dist__ folder.
 
-It contains everything neccessary to run except the config file. An example config file can be found in `conf/app.example.toml`
+It contains everything neccessary to run except the config file. An example config file can be found in `conf/app.example.toml`.
 
 The config will need to be copied to a `conf/app.toml` in the same place the binary is.
 
@@ -88,17 +87,17 @@ Make sure to fill out the database section of the config in order to connect it
 
 Then run the database migrations with `taskcafe migrate`.
 
-Now you can run the web interface by running `taskcafe web`
+Now you can run the web interface by running `taskcafe web`.
 
 ## How is this different from X (Trello, NextCloud, etc)?
 
-One of the primary goal's of Taskcafe is to provide a project management tool that I personally enjoy using for my
+One of the primary goals of Taskcafe is to provide a project management tool that I personally enjoy using for my
 own projects and fits my workflow.
 
-During alpha developement, the current plan is to build the "basic" features - features that are pretty much
+During alpha development, the current plan is to build the "basic" features - features that are pretty much
 standard across all kanban boards / project management tools.
 
-Once Taskcafe is out of alpha, there are many features that I plan on adding that will differentiate it from other products (checkout the Roadmap for ideas on future plans).
+Once Taskcafe is out of alpha, there are many features that I plan on adding that will differentiate it from other products (check out the [Roadmap](https://github.com/JordanKnott/taskcafe/wiki/Roadmap) for ideas on future plans).
 
 ## Contributing & community
 

docker-compose.yml

@@ -1,7 +1,8 @@
 version: "3"
 services:
   web:
-    build: .
+    image: taskcafe/taskcafe:latest
+    # build: .
     ports:
       - "3333:3333"
     depends_on:

frontend/.eslintrc.json

@@ -30,6 +30,7 @@
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unused-vars": "off",
     "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
+    "no-case-declarations": "off",
     "react/prop-types": 0,
     "react/jsx-props-no-spreading": "off",
     "no-param-reassign": "off",

frontend/package.json

@@ -71,7 +71,8 @@
     "storybook": "start-storybook -p 9009 -s public",
     "build-storybook": "build-storybook -s public",
     "generate": "graphql-codegen",
-    "lint": "eslint --ext js,ts,tsx src"
+    "lint": "eslint --ext js,ts,tsx src",
+    "tsc": "tsc"
   },
   "eslintConfig": {
     "extends": "react-app"

frontend/src/Admin/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect } from 'react';
 import Admin from 'shared/components/Admin';
 import Select from 'shared/components/Select';
 import GlobalTopNavbar from 'App/TopNavbar';
@@ -16,8 +16,9 @@ import { useForm, Controller } from 'react-hook-form';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import produce from 'immer';
 import updateApolloCache from 'shared/utils/cache';
-import UserContext, { useCurrentUser } from 'App/context';
+import { useCurrentUser } from 'App/context';
 import { Redirect } from 'react-router';
+import NOOP from 'shared/utils/noop';
 
 const DeleteUserWrapper = styled.div`
   display: flex;
@@ -37,6 +38,7 @@ const DeleteUserButton = styled(Button)`
 type DeleteUserPopupProps = {
   onDeleteUser: () => void;
 };
+
 const DeleteUserPopup: React.FC<DeleteUserPopupProps> = ({ onDeleteUser }) => {
   return (
     <DeleteUserWrapper>
@@ -47,10 +49,12 @@ const DeleteUserPopup: React.FC<DeleteUserPopupProps> = ({ onDeleteUser }) => {
     </DeleteUserWrapper>
   );
 };
+
 type RoleCodeOption = {
   label: string;
   value: string;
 };
+
 type CreateUserData = {
   email: string;
   username: string;
@@ -65,6 +69,7 @@ const CreateUserForm = styled.form`
   flex-direction: column;
   margin: 0 12px;
 `;
+
 const CreateUserButton = styled(Button)`
   margin-top: 8px;
   padding: 6px 12px;
@@ -85,7 +90,7 @@ type AddUserPopupProps = {
 };
 
 const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
-  const { register, handleSubmit, errors, setValue, control } = useForm<CreateUserData>();
+  const { register, handleSubmit, errors, control } = useForm<CreateUserData>();
 
   const createUser = (data: CreateUserData) => {
     onAddUser(data);
@@ -115,7 +120,7 @@ const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
         control={control}
         name="roleCode"
         rules={{ required: 'Role is required' }}
-        render={({ onChange, onBlur, value }) => (
+        render={({ onChange, value }) => (
           <Select
             label="Role"
             value={value}
@@ -198,21 +203,21 @@ const AdminRoute = () => {
     },
   });
   if (loading) {
-    return <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />;
+    return <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />;
   }
   if (data && user) {
-    if (user.roles.org != 'admin') {
+    if (user.roles.org !== 'admin') {
       return <Redirect to="/" />;
     }
     return (
       <>
-        <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />
+        <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />
         <Admin
           initialTab={0}
           users={data.users}
-          canInviteUser={user.roles.org == 'admin'}
-          onInviteUser={() => {}}
-          onUpdateUserPassword={(user, password) => {
+          canInviteUser={user.roles.org === 'admin'}
+          onInviteUser={NOOP}
+          onUpdateUserPassword={() => {
             hidePopup();
           }}
           onDeleteUser={(userID, newOwnerID) => {
@@ -224,8 +229,8 @@ const AdminRoute = () => {
               $target,
               <Popup tab={0} title="Add member" onClose={() => hidePopup()}>
                 <AddUserPopup
-                  onAddUser={user => {
-                    const { roleCode, ...userData } = user;
+                  onAddUser={u => {
+                    const { roleCode, ...userData } = u;
                     createUser({ variables: { ...userData, roleCode: roleCode.value } });
                     hidePopup();
                   }}

frontend/src/App/Routes.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Router, Switch, Route} from 'react-router-dom';
+import { Switch, Route } from 'react-router-dom';
 import * as H from 'history';
 
 import Dashboard from 'Dashboard';
@@ -20,11 +20,12 @@ const MainContent = styled.div`
   flex-direction: column;
   flex-grow: 1;
 `;
+
 type RoutesProps = {
   history: H.History;
 };
 
-const Routes = ({history}: RoutesProps) => (
+const Routes: React.FC<RoutesProps> = () => (
   <Switch>
     <Route exact path="/login" component={Login} />
     <Route exact path="/install" component={Install} />

frontend/src/App/ThemeStyles.ts

@@ -1,4 +1,4 @@
-import { createGlobalStyle, DefaultTheme } from 'styled-components';
+import { DefaultTheme } from 'styled-components';
 
 const theme: DefaultTheme = {
   borderRadius: {
@@ -25,4 +25,4 @@ const theme: DefaultTheme = {
   },
 };
 
-export { theme };
+export default theme;

frontend/src/App/TopNavbar.tsx

@@ -1,10 +1,10 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React from 'react';
 import TopNavbar, { MenuItem } from 'shared/components/TopNavbar';
 import styled from 'styled-components/macro';
-import DropdownMenu, { ProfileMenu } from 'shared/components/DropdownMenu';
+import { ProfileMenu } from 'shared/components/DropdownMenu';
 import ProjectSettings, { DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
 import { useHistory } from 'react-router';
-import { UserContext, PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
+import { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
 import {
   RoleCode,
   useMeQuery,
@@ -18,6 +18,7 @@ import produce from 'immer';
 import { Link } from 'react-router-dom';
 import MiniProfile from 'shared/components/MiniProfile';
 import cache from 'App/cache';
+import NOOP from 'shared/utils/noop';
 
 const TeamContainer = styled.div`
   display: flex;
@@ -130,7 +131,7 @@ const ProjectFinder = () => {
     return <span>loading</span>;
   }
   if (data) {
-    const { projects, teams, organizations } = data;
+    const { projects, teams } = data;
     const projectTeams = teams.map(team => {
       return {
         id: team.id,
@@ -238,7 +239,6 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
   currentTab,
   onSetTab,
   menuType,
-  projectID,
   teamID,
   onChangeProjectOwner,
   onChangeRole,
@@ -248,19 +248,18 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
   onInviteUser,
   onSaveProjectName,
   onRemoveFromBoard,
-  nameOnly,
 }) => {
   const { user, setUserRoles, setUser } = useCurrentUser();
-  const { loading, data } = useMeQuery({
-    onCompleted: data => {
+  const { data } = useMeQuery({
+    onCompleted: response => {
       if (user && user.roles) {
         setUserRoles({
           org: user.roles.org,
-          teams: data.me.teamRoles.reduce((map, obj) => {
+          teams: response.me.teamRoles.reduce((map, obj) => {
             map.set(obj.teamID, obj.roleCode);
             return map;
           }, new Map<string, string>()),
-          projects: data.me.projectRoles.reduce((map, obj) => {
+          projects: response.me.projectRoles.reduce((map, obj) => {
             map.set(obj.projectID, obj.roleCode);
             return map;
           }, new Map<string, string>()),
@@ -268,7 +267,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
       }
     },
   });
-  const { showPopup, hidePopup, setTab } = usePopup();
+  const { showPopup, hidePopup } = usePopup();
   const history = useHistory();
   const onLogout = () => {
     fetch('/auth/logout', {
@@ -367,7 +366,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
         onInviteUser={onInviteUser}
         onChangeRole={onChangeRole}
         onChangeProjectOwner={onChangeProjectOwner}
-        onNotificationClick={() => {}}
+        onNotificationClick={NOOP}
         onSetTab={onSetTab}
         onRemoveFromBoard={onRemoveFromBoard}
         onDashboardClick={() => {

frontend/src/App/index.tsx

@@ -7,7 +7,7 @@ import { setAccessToken } from 'shared/utils/accessToken';
 import styled, { ThemeProvider } from 'styled-components';
 import NormalizeStyles from './NormalizeStyles';
 import BaseStyles from './BaseStyles';
-import { theme } from './ThemeStyles';
+import theme from './ThemeStyles';
 import Routes from './Routes';
 import { UserContext, CurrentUserRaw, CurrentUserRoles, PermissionLevel, PermissionObjectType } from './context';
 

frontend/src/Auth/index.tsx

@@ -1,13 +1,10 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { useForm } from 'react-hook-form';
 import { useHistory } from 'react-router';
-
-import { setAccessToken } from 'shared/utils/accessToken';
-
-import Login from 'shared/components/Login';
-import { Container, LoginWrapper } from './Styles';
-import UserContext, { PermissionLevel, PermissionObjectType } from 'App/context';
 import JwtDecode from 'jwt-decode';
+import { setAccessToken } from 'shared/utils/accessToken';
+import Login from 'shared/components/Login';
+import UserContext from 'App/context';
+import { Container, LoginWrapper } from './Styles';
 
 const Auth = () => {
   const [invalidLoginAttempt, setInvalidLoginAttempt] = useState(0);

frontend/src/Install/index.tsx

@@ -1,18 +1,13 @@
 import React, { useEffect, useContext } from 'react';
 import axios from 'axios';
 import Register from 'shared/components/Register';
-import { Container, LoginWrapper } from './Styles';
-import { useCreateUserAccountMutation, useMeQuery, MeDocument, MeQuery } from 'shared/generated/graphql';
 import { useHistory } from 'react-router';
 import { getAccessToken, setAccessToken } from 'shared/utils/accessToken';
-import updateApolloCache from 'shared/utils/cache';
-import produce from 'immer';
-import { useApolloClient } from '@apollo/react-hooks';
-import UserContext, { PermissionLevel, PermissionObjectType } from 'App/context';
+import UserContext from 'App/context';
 import jwtDecode from 'jwt-decode';
+import { Container, LoginWrapper } from './Styles';
 
 const Install = () => {
-  const client = useApolloClient();
   const history = useHistory();
   const { setUser } = useContext(UserContext);
   useEffect(() => {
@@ -63,7 +58,7 @@ const Install = () => {
                     history.replace('/login');
                   } else {
                     const response: RefreshTokenResponse = await x.data;
-                    const { accessToken, isInstalled } = response;
+                    const { accessToken: newToken, isInstalled } = response;
                     const claims: JWTToken = jwtDecode(accessToken);
                     const currentUser = {
                       id: claims.userId,

frontend/src/Profile/index.tsx

@@ -1,18 +1,12 @@
 import React, { useRef, useEffect } from 'react';
 import styled from 'styled-components/macro';
 import GlobalTopNavbar from 'App/TopNavbar';
-import { Link } from 'react-router-dom';
 import { getAccessToken } from 'shared/utils/accessToken';
 import Settings from 'shared/components/Settings';
 import { useMeQuery, useClearProfileAvatarMutation, useUpdateUserPasswordMutation } from 'shared/generated/graphql';
 import axios from 'axios';
 import { useCurrentUser } from 'App/context';
-
-const MainContent = styled.div`
-  padding: 0 0 50px 80px;
-  height: 100%;
-  background: #262c49;
-`;
+import NOOP from 'shared/utils/noop';
 
 const Projects = () => {
   const $fileUpload = useRef<HTMLInputElement>(null);
@@ -54,7 +48,7 @@ const Projects = () => {
           }
         }}
       />
-      <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />
+      <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />
       {!loading && data && (
         <Settings
           profile={data.me.user}

frontend/src/Projects/Project/Board/FilterMeta.tsx

@@ -0,0 +1,324 @@
+import React, { useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { Checkmark, User, Calendar, Tags, Clock } from 'shared/icons';
+import { TaskMetaFilters, TaskMeta, TaskMetaMatch, DueDateFilterType } from 'shared/components/Lists';
+import Input from 'shared/components/ControlledInput';
+import { Popup, usePopup } from 'shared/components/PopupMenu';
+import produce from 'immer';
+import moment from 'moment';
+import { mixin } from 'shared/utils/styles';
+import Member from 'shared/components/Member';
+
+const FilterMember = styled(Member)`
+  margin: 2px 0;
+  &:hover {
+    cursor: pointer;
+    background: rgba(${props => props.theme.colors.primary});
+  }
+`;
+
+export const Labels = styled.ul`
+  list-style: none;
+  margin: 0 8px;
+  padding: 0;
+  margin-bottom: 8px;
+`;
+
+export const Label = styled.li`
+  position: relative;
+`;
+
+export const CardLabel = styled.span<{ active: boolean; color: string }>`
+  ${props =>
+    props.active &&
+    css`
+      margin-left: 4px;
+      box-shadow: -8px 0 ${mixin.darken(props.color, 0.12)};
+      border-radius: 3px;
+    `}
+
+  cursor: pointer;
+  font-weight: 700;
+  margin: 0 0 4px;
+  min-height: 20px;
+  padding: 6px 12px;
+  position: relative;
+  transition: padding 85ms, margin 85ms, box-shadow 85ms;
+  background-color: ${props => props.color};
+  color: #fff;
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-height: 31px;
+`;
+
+export const ActionsList = styled.ul`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ActionItem = styled.li`
+  position: relative;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  &:hover {
+    background: rgb(115, 103, 240);
+  }
+`;
+
+export const ActionTitle = styled.span`
+  margin-left: 20px;
+`;
+
+const ActionItemSeparator = styled.li`
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
+  font-size: 12px;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 0.75rem;
+  padding-bottom: 0.25rem;
+`;
+
+const ActiveIcon = styled(Checkmark)`
+  position: absolute;
+  right: 4px;
+`;
+
+const ItemIcon = styled.div`
+  position: absolute;
+`;
+
+const TaskNameInput = styled(Input)`
+  margin: 0;
+`;
+
+const ActionItemLine = styled.div`
+  height: 1px;
+  border-top: 1px solid #414561;
+  margin: 0.25rem !important;
+`;
+
+type FilterMetaProps = {
+  filters: TaskMetaFilters;
+  userID: string;
+  labels: React.RefObject<Array<ProjectLabel>>;
+  members: React.RefObject<Array<TaskUser>>;
+  onChangeTaskMetaFilter: (filters: TaskMetaFilters) => void;
+};
+
+const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter, userID, labels, members }) => {
+  const [currentFilters, setFilters] = useState(filters);
+  const [nameFilter, setNameFilter] = useState(filters.taskName ? filters.taskName.name : '');
+  const [currentLabel, setCurrentLabel] = useState('');
+
+  const handleSetFilters = (f: TaskMetaFilters) => {
+    setFilters(f);
+    onChangeTaskMetaFilter(f);
+  };
+
+  const handleNameChange = (nFilter: string) => {
+    handleSetFilters(
+      produce(currentFilters, draftFilters => {
+        draftFilters.taskName = nFilter !== '' ? { name: nFilter } : null;
+      }),
+    );
+    setNameFilter(nFilter);
+  };
+
+  const { setTab } = usePopup();
+
+  const handleSetDueDate = (filterType: DueDateFilterType, label: string) => {
+    handleSetFilters(
+      produce(currentFilters, draftFilters => {
+        if (draftFilters.dueDate && draftFilters.dueDate.type === filterType) {
+          draftFilters.dueDate = null;
+        } else {
+          draftFilters.dueDate = {
+            label,
+            type: filterType,
+          };
+        }
+      }),
+    );
+  };
+
+  return (
+    <>
+      <Popup tab={0} title={null}>
+        <ActionsList>
+          <TaskNameInput
+            width="100%"
+            onChange={e => handleNameChange(e.currentTarget.value)}
+            value={nameFilter}
+            variant="alternate"
+            placeholder="Task name..."
+          />
+          <ActionItemSeparator>QUICK ADD</ActionItemSeparator>
+          <ActionItem
+            onClick={() => {
+              handleSetFilters(
+                produce(currentFilters, draftFilters => {
+                  if (members.current) {
+                    const member = members.current.find(m => m.id === userID);
+                    const draftMember = draftFilters.members.find(m => m.id === userID);
+                    if (member && !draftMember) {
+                      draftFilters.members.push({ id: userID, username: member.username ? member.username : '' });
+                    } else {
+                      draftFilters.members = draftFilters.members.filter(m => m.id !== userID);
+                    }
+                  }
+                }),
+              );
+            }}
+          >
+            <ItemIcon>
+              <User width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>Just my tasks</ActionTitle>
+            {currentFilters.members.find(m => m.id === userID) && <ActiveIcon width={12} height={12} />}
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.THIS_WEEK, 'Due this week')}>
+            <ItemIcon>
+              <Calendar width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>Due this week</ActionTitle>
+            {currentFilters.dueDate && currentFilters.dueDate.type === DueDateFilterType.THIS_WEEK && (
+              <ActiveIcon width={12} height={12} />
+            )}
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.NEXT_WEEK, 'Due next week')}>
+            <ItemIcon>
+              <Calendar width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>Due next week</ActionTitle>
+            {currentFilters.dueDate && currentFilters.dueDate.type === DueDateFilterType.NEXT_WEEK && (
+              <ActiveIcon width={12} height={12} />
+            )}
+          </ActionItem>
+          <ActionItemLine />
+          <ActionItem onClick={() => setTab(1)}>
+            <ItemIcon>
+              <Tags width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>By Label</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => setTab(2)}>
+            <ItemIcon>
+              <User width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>By Member</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => setTab(3)}>
+            <ItemIcon>
+              <Clock width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>By Due Date</ActionTitle>
+          </ActionItem>
+        </ActionsList>
+      </Popup>
+      <Popup tab={1} title="By Labels">
+        <Labels>
+          {labels.current &&
+            labels.current
+              // .filter(label => '' === '' || (label.name && label.name.toLowerCase().startsWith(''.toLowerCase())))
+              .map(label => (
+                <Label key={label.id}>
+                  <CardLabel
+                    key={label.id}
+                    color={label.labelColor.colorHex}
+                    active={currentLabel === label.id}
+                    onMouseEnter={() => {
+                      setCurrentLabel(label.id);
+                    }}
+                    onClick={() => {
+                      handleSetFilters(
+                        produce(currentFilters, draftFilters => {
+                          if (draftFilters.labels.find(l => l.id === label.id)) {
+                            draftFilters.labels = draftFilters.labels.filter(l => l.id !== label.id);
+                          } else {
+                            draftFilters.labels.push({
+                              id: label.id,
+                              name: label.name ?? '',
+                              color: label.labelColor.colorHex,
+                            });
+                          }
+                        }),
+                      );
+                    }}
+                  >
+                    {label.name}
+                  </CardLabel>
+                </Label>
+              ))}
+        </Labels>
+      </Popup>
+      <Popup tab={2} title="By Member">
+        <ActionsList>
+          {members.current &&
+            members.current.map(member => (
+              <FilterMember
+                key={member.id}
+                member={member}
+                showName
+                onCardMemberClick={() => {
+                  handleSetFilters(
+                    produce(currentFilters, draftFilters => {
+                      if (draftFilters.members.find(m => m.id === member.id)) {
+                        draftFilters.members = draftFilters.members.filter(m => m.id !== member.id);
+                      } else {
+                        draftFilters.members.push({ id: member.id, username: member.username ?? '' });
+                      }
+                    }),
+                  );
+                }}
+              />
+            ))}
+        </ActionsList>
+      </Popup>
+      <Popup tab={3} title="By Due Date">
+        <ActionsList>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.TODAY, 'Today')}>
+            <ActionTitle>Today</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.THIS_WEEK, 'Due this week')}>
+            <ActionTitle>This week</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.NEXT_WEEK, 'Due next week')}>
+            <ActionTitle>Next week</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.OVERDUE, 'Overdue')}>
+            <ActionTitle>Overdue</ActionTitle>
+          </ActionItem>
+          <ActionItemLine />
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.TOMORROW, 'In the next day')}>
+            <ActionTitle>In the next day</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.ONE_WEEK, 'In the next week')}>
+            <ActionTitle>In the next week</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.TWO_WEEKS, 'In the next two weeks')}>
+            <ActionTitle>In the next two weeks</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.THREE_WEEKS, 'In the next three weeks')}>
+            <ActionTitle>In the next three weeks</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.NO_DUE_DATE, 'Has no due date')}>
+            <ActionTitle>Has no due date</ActionTitle>
+          </ActionItem>
+        </ActionsList>
+      </Popup>
+    </>
+  );
+};
+
+export default FilterMeta;

frontend/src/Projects/Project/Board/FilterStatus.tsx

@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Checkmark } from 'shared/icons';
+import { TaskStatusFilter, TaskStatus, TaskSince } from 'shared/components/Lists';
+
+export const ActionsList = styled.ul`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ActionExtraMenuContainer = styled.div`
+  visibility: hidden;
+  position: absolute;
+  left: 100%;
+  top: -4px;
+  padding-left: 2px;
+  width: 100%;
+`;
+
+export const ActionItem = styled.li`
+  position: relative;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  &:hover {
+    background: rgb(115, 103, 240);
+  }
+  &:hover ${ActionExtraMenuContainer} {
+    visibility: visible;
+  }
+`;
+
+export const ActionTitle = styled.span`
+  margin-left: 20px;
+`;
+
+export const ActionExtraMenu = styled.ul`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+
+  padding: 5px;
+  padding-top: 8px;
+  border-radius: 5px;
+  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.1);
+
+  color: #c2c6dc;
+  background: #262c49;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-color: #414561;
+`;
+
+export const ActionExtraMenuItem = styled.li`
+  position: relative;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  &:hover {
+    background: rgb(115, 103, 240);
+  }
+`;
+const ActionExtraMenuSeparator = styled.li`
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
+  font-size: 12px;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+`;
+
+const ActiveIcon = styled(Checkmark)`
+  position: absolute;
+`;
+
+type FilterStatusProps = {
+  filter: TaskStatusFilter;
+  onChangeTaskStatusFilter: (filter: TaskStatusFilter) => void;
+};
+
+const FilterStatus: React.FC<FilterStatusProps> = ({ filter, onChangeTaskStatusFilter }) => {
+  const [currentFilter, setFilter] = useState(filter);
+  const handleFilterChange = (f: TaskStatusFilter) => {
+    setFilter(f);
+    onChangeTaskStatusFilter(f);
+  };
+  const handleCompleteClick = (s: TaskSince) => {
+    handleFilterChange({ status: TaskStatus.COMPLETE, since: s });
+  };
+  return (
+    <ActionsList>
+      <ActionItem onClick={() => handleFilterChange({ status: TaskStatus.INCOMPLETE, since: TaskSince.ALL })}>
+        {currentFilter.status === TaskStatus.INCOMPLETE && <ActiveIcon width={12} height={12} />}
+        <ActionTitle>Incomplete Tasks</ActionTitle>
+      </ActionItem>
+      <ActionItem>
+        {currentFilter.status === TaskStatus.COMPLETE && <ActiveIcon width={12} height={12} />}
+        <ActionTitle>Compelete Tasks</ActionTitle>
+        <ActionExtraMenuContainer>
+          <ActionExtraMenu>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.ALL)}>
+              {currentFilter.since === TaskSince.ALL && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>All completed tasks</ActionTitle>
+            </ActionExtraMenuItem>
+            <ActionExtraMenuSeparator>Marked complete since</ActionExtraMenuSeparator>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.TODAY)}>
+              {currentFilter.since === TaskSince.TODAY && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>Today</ActionTitle>
+            </ActionExtraMenuItem>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.YESTERDAY)}>
+              {currentFilter.since === TaskSince.YESTERDAY && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>Yesterday</ActionTitle>
+            </ActionExtraMenuItem>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.ONE_WEEK)}>
+              {currentFilter.since === TaskSince.ONE_WEEK && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>1 week</ActionTitle>
+            </ActionExtraMenuItem>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.TWO_WEEKS)}>
+              {currentFilter.since === TaskSince.TWO_WEEKS && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>2 weeks</ActionTitle>
+            </ActionExtraMenuItem>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.THREE_WEEKS)}>
+              {currentFilter.since === TaskSince.THREE_WEEKS && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>3 weeks</ActionTitle>
+            </ActionExtraMenuItem>
+          </ActionExtraMenu>
+        </ActionExtraMenuContainer>
+      </ActionItem>
+      <ActionItem onClick={() => handleFilterChange({ status: TaskStatus.ALL, since: TaskSince.ALL })}>
+        {currentFilter.status === TaskStatus.ALL && <ActiveIcon width={12} height={12} />}
+        <ActionTitle>All Tasks</ActionTitle>
+      </ActionItem>
+    </ActionsList>
+  );
+};
+
+export default FilterStatus;

frontend/src/Projects/Project/Board/SortPopup.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/components/Lists';
+
+export const ActionsList = styled.ul`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ActionItem = styled.li`
+  position: relative;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  &:hover {
+    background: rgb(115, 103, 240);
+  }
+`;
+
+export const ActionTitle = styled.span`
+  margin-left: 20px;
+`;
+
+const ActionItemSeparator = styled.li`
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
+  font-size: 12px;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 0.75rem;
+  padding-bottom: 0.25rem;
+`;
+
+type SortPopupProps = {
+  sorting: TaskSorting;
+  onChangeTaskSorting: (taskSorting: TaskSorting) => void;
+};
+
+const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) => {
+  const [currentSorting, setSorting] = useState(sorting);
+  const handleSetSorting = (s: TaskSorting) => {
+    setSorting(s);
+    onChangeTaskSorting(s);
+  };
+  return (
+    <ActionsList>
+      <ActionItem onClick={() => handleSetSorting({ type: TaskSortingType.NONE, direction: TaskSortingDirection.ASC })}>
+        <ActionTitle>None</ActionTitle>
+      </ActionItem>
+      <ActionItem
+        onClick={() => handleSetSorting({ type: TaskSortingType.DUE_DATE, direction: TaskSortingDirection.ASC })}
+      >
+        <ActionTitle>Due date</ActionTitle>
+      </ActionItem>
+      <ActionItem
+        onClick={() => handleSetSorting({ type: TaskSortingType.MEMBERS, direction: TaskSortingDirection.ASC })}
+      >
+        <ActionTitle>Members</ActionTitle>
+      </ActionItem>
+      <ActionItem
+        onClick={() => handleSetSorting({ type: TaskSortingType.LABELS, direction: TaskSortingDirection.ASC })}
+      >
+        <ActionTitle>Labels</ActionTitle>
+      </ActionItem>
+      <ActionItem
+        onClick={() => handleSetSorting({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
+      >
+        <ActionTitle>Task title</ActionTitle>
+      </ActionItem>
+    </ActionsList>
+  );
+};
+
+export default SortPopup;

frontend/src/Projects/Project/Board/index.tsx

@@ -1,52 +1,110 @@
-import React, { useState, useRef, useContext, useEffect } from 'react';
-import { MENU_TYPES } from 'shared/components/TopNavbar';
+import React, { useState, useRef } from 'react';
 import updateApolloCache from 'shared/utils/cache';
-import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
-import LabelManagerEditor from '../LabelManagerEditor';
 import styled, { css } from 'styled-components/macro';
 import { Bolt, ToggleOn, Tags, CheckCircle, Sort, Filter } from 'shared/icons';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
-import { useParams, Route, useRouteMatch, useHistory, RouteComponentProps, useLocation } from 'react-router-dom';
+import { useRouteMatch, useHistory } from 'react-router-dom';
 import {
-  useUpdateProjectMemberRoleMutation,
-  useCreateProjectMemberMutation,
-  useDeleteProjectMemberMutation,
   useSetTaskCompleteMutation,
   useToggleTaskLabelMutation,
-  useUpdateProjectNameMutation,
   useFindProjectQuery,
   useUpdateTaskGroupNameMutation,
   useUpdateTaskNameMutation,
-  useUpdateProjectLabelMutation,
   useCreateTaskMutation,
-  useDeleteProjectLabelMutation,
   useDeleteTaskMutation,
   useUpdateTaskLocationMutation,
   useUpdateTaskGroupLocationMutation,
   useCreateTaskGroupMutation,
   useDeleteTaskGroupMutation,
-  useUpdateTaskDescriptionMutation,
   useAssignTaskMutation,
-  DeleteTaskDocument,
   FindProjectDocument,
-  useCreateProjectLabelMutation,
   useUnassignTaskMutation,
   useUpdateTaskDueDateMutation,
   FindProjectQuery,
-  useUsersQuery,
 } from 'shared/generated/graphql';
 
 import QuickCardEditor from 'shared/components/QuickCardEditor';
 import ListActions from 'shared/components/ListActions';
 import MemberManager from 'shared/components/MemberManager';
-import SimpleLists from 'shared/components/Lists';
+import SimpleLists, {
+  TaskStatus,
+  TaskSince,
+  TaskStatusFilter,
+  TaskMeta,
+  TaskMetaMatch,
+  TaskMetaFilters,
+  TaskSorting,
+  TaskSortingType,
+  TaskSortingDirection,
+} from 'shared/components/Lists';
 import produce from 'immer';
 import MiniProfile from 'shared/components/MiniProfile';
 import DueDateManager from 'shared/components/DueDateManager';
-import UserContext, { useCurrentUser } from 'App/context';
-import LabelManager from 'shared/components/PopupMenu/LabelManager';
-import LabelEditor from 'shared/components/PopupMenu/LabelEditor';
 import EmptyBoard from 'shared/components/EmptyBoard';
+import NOOP from 'shared/utils/noop';
+import LabelManagerEditor from 'Projects/Project/LabelManagerEditor';
+import Chip from 'shared/components/Chip';
+import { useCurrentUser } from 'App/context';
+import FilterStatus from './FilterStatus';
+import FilterMeta from './FilterMeta';
+import SortPopup from './SortPopup';
+
+type MetaFilterCloseFn = (meta: TaskMeta, key: string) => void;
+
+const renderTaskSortingLabel = (sorting: TaskSorting) => {
+  if (sorting.type === TaskSortingType.TASK_TITLE) {
+    return 'Sort: Card title';
+  }
+  if (sorting.type === TaskSortingType.MEMBERS) {
+    return 'Sort: Members';
+  }
+  if (sorting.type === TaskSortingType.DUE_DATE) {
+    return 'Sort: Due Date';
+  }
+  if (sorting.type === TaskSortingType.LABELS) {
+    return 'Sort: Labels';
+  }
+  return 'Sort';
+};
+
+const renderMetaFilters = (filters: TaskMetaFilters, onClose: MetaFilterCloseFn) => {
+  const filterChips = [];
+  if (filters.taskName) {
+    filterChips.push(
+      <Chip
+        key="task-name"
+        label={`Title: ${filters.taskName.name}`}
+        onClose={() => onClose(TaskMeta.TITLE, 'task-name')}
+      />,
+    );
+  }
+
+  if (filters.dueDate) {
+    filterChips.push(
+      <Chip key="due-date" label={filters.dueDate.label} onClose={() => onClose(TaskMeta.DUE_DATE, 'due-date')} />,
+    );
+  }
+  for (const memberFilter of filters.members) {
+    filterChips.push(
+      <Chip
+        key={`member-${memberFilter.id}`}
+        label={`Member: ${memberFilter.username}`}
+        onClose={() => onClose(TaskMeta.MEMBER, memberFilter.id)}
+      />,
+    );
+  }
+  for (const labelFilter of filters.labels) {
+    filterChips.push(
+      <Chip
+        key={`label-${labelFilter.id}`}
+        label={labelFilter.name === '' ? 'Label' : `Label: ${labelFilter.name}`}
+        color={labelFilter.color}
+        onClose={() => onClose(TaskMeta.LABEL, labelFilter.id)}
+      />,
+    );
+  }
+  return filterChips;
+};
 
 const ProjectBar = styled.div`
   display: flex;
@@ -61,7 +119,7 @@ const ProjectActions = styled.div`
   align-items: center;
 `;
 
-const ProjectAction = styled.div<{ disabled?: boolean }>`
+const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -88,6 +146,25 @@ const ProjectActionText = styled.span`
   padding-left: 4px;
 `;
 
+type ProjectActionProps = {
+  onClick?: (target: React.RefObject<HTMLElement>) => void;
+  disabled?: boolean;
+};
+
+const ProjectAction: React.FC<ProjectActionProps> = ({ onClick, disabled = false, children }) => {
+  const $container = useRef<HTMLDivElement>(null);
+  const handleClick = () => {
+    if (onClick) {
+      onClick($container);
+    }
+  };
+  return (
+    <ProjectActionWrapper ref={$container} onClick={handleClick} disabled={disabled}>
+      {children}
+    </ProjectActionWrapper>
+  );
+};
+
 interface QuickCardEditorState {
   isOpen: boolean;
   target: React.RefObject<HTMLElement> | null;
@@ -113,18 +190,18 @@ export const BoardLoading = () => {
     <>
       <ProjectBar>
         <ProjectActions>
-          <ProjectAction disabled>
+          <ProjectAction>
             <CheckCircle width={13} height={13} />
             <ProjectActionText>All Tasks</ProjectActionText>
           </ProjectAction>
-          <ProjectAction disabled>
-            <Filter width={13} height={13} />
-            <ProjectActionText>Filter</ProjectActionText>
-          </ProjectAction>
-          <ProjectAction disabled>
+          <ProjectAction>
             <Sort width={13} height={13} />
             <ProjectActionText>Sort</ProjectActionText>
           </ProjectAction>
+          <ProjectAction>
+            <Filter width={13} height={13} />
+            <ProjectActionText>Filter</ProjectActionText>
+          </ProjectAction>
         </ProjectActions>
         <ProjectActions>
           <ProjectAction>
@@ -146,17 +223,37 @@ export const BoardLoading = () => {
   );
 };
 
+const initTaskStatusFilter: TaskStatusFilter = {
+  status: TaskStatus.ALL,
+  since: TaskSince.ALL,
+};
+
+const initTaskMetaFilters: TaskMetaFilters = {
+  match: TaskMetaMatch.MATCH_ANY,
+  dueDate: null,
+  taskName: null,
+  labels: [],
+  members: [],
+};
+
+const initTaskSorting: TaskSorting = {
+  type: TaskSortingType.NONE,
+  direction: TaskSortingDirection.ASC,
+};
+
 const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick, cardLabelVariant }) => {
   const [assignTask] = useAssignTaskMutation();
   const [unassignTask] = useUnassignTaskMutation();
-  const $labelsRef = useRef<HTMLDivElement>(null);
   const match = useRouteMatch();
   const labelsRef = useRef<Array<ProjectLabel>>([]);
+  const membersRef = useRef<Array<TaskUser>>([]);
   const { showPopup, hidePopup } = usePopup();
   const taskLabelsRef = useRef<Array<TaskLabel>>([]);
   const [quickCardEditor, setQuickCardEditor] = useState(initialQuickCardEditorState);
-  const { user } = useCurrentUser();
   const [updateTaskGroupLocation] = useUpdateTaskGroupLocationMutation({});
+  const [taskStatusFilter, setTaskStatusFilter] = useState(initTaskStatusFilter);
+  const [taskMetaFilters, setTaskMetaFilters] = useState(initTaskMetaFilters);
+  const [taskSorting, setTaskSorting] = useState(initTaskSorting);
   const history = useHistory();
   const [deleteTaskGroup] = useDeleteTaskGroupMutation({
     update: (client, deletedTaskGroupData) => {
@@ -240,6 +337,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
       );
     },
   });
+  const { user } = useCurrentUser();
   const [deleteTask] = useDeleteTaskMutation();
   const [toggleTaskLabel] = useToggleTaskLabelMutation({
     onCompleted: newTaskLabel => {
@@ -269,6 +367,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
               id: `${Math.round(Math.random() * -1000000)}`,
               name,
               complete: false,
+              completedAt: null,
               taskGroup: {
                 __typename: 'TaskGroup',
                 id: taskGroup.id,
@@ -305,15 +404,19 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
   if (loading) {
     return <BoardLoading />;
   }
-  if (data) {
+  const getTaskStatusFilterLabel = (filter: TaskStatusFilter) => {
+    if (filter.status === TaskStatus.COMPLETE) {
+      return 'Complete';
+    }
+    if (filter.status === TaskStatus.INCOMPLETE) {
+      return 'Incomplete';
+    }
+    return 'All Tasks';
+  };
+  if (data && user) {
     labelsRef.current = data.findProject.labels;
+    membersRef.current = data.findProject.members;
     const onQuickEditorOpen = ($target: React.RefObject<HTMLElement>, taskID: string, taskGroupID: string) => {
-      if ($target && $target.current) {
-        const pos = $target.current.getBoundingClientRect();
-        const height = 120;
-        if (window.innerHeight - pos.bottom < height) {
-        }
-      }
       const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
       const currentTask = taskGroup ? taskGroup.tasks.find(t => t.id === taskID) : null;
       if (currentTask) {
@@ -336,23 +439,84 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
       <>
         <ProjectBar>
           <ProjectActions>
-            <ProjectAction disabled>
+            <ProjectAction
+              onClick={target => {
+                showPopup(
+                  target,
+                  <Popup tab={0} title={null}>
+                    <FilterStatus
+                      filter={taskStatusFilter}
+                      onChangeTaskStatusFilter={filter => {
+                        setTaskStatusFilter(filter);
+                        hidePopup();
+                      }}
+                    />
+                  </Popup>,
+                  185,
+                );
+              }}
+            >
               <CheckCircle width={13} height={13} />
-              <ProjectActionText>All Tasks</ProjectActionText>
+              <ProjectActionText>{getTaskStatusFilterLabel(taskStatusFilter)}</ProjectActionText>
             </ProjectAction>
-            <ProjectAction disabled>
+            <ProjectAction
+              onClick={target => {
+                showPopup(
+                  target,
+                  <Popup tab={0} title={null}>
+                    <SortPopup
+                      sorting={taskSorting}
+                      onChangeTaskSorting={sorting => {
+                        setTaskSorting(sorting);
+                      }}
+                    />
+                  </Popup>,
+                  185,
+                );
+              }}
+            >
+              <Sort width={13} height={13} />
+              <ProjectActionText>{renderTaskSortingLabel(taskSorting)}</ProjectActionText>
+            </ProjectAction>
+            <ProjectAction
+              onClick={target => {
+                showPopup(
+                  target,
+                  <FilterMeta
+                    filters={taskMetaFilters}
+                    onChangeTaskMetaFilter={filter => {
+                      setTaskMetaFilters(filter);
+                    }}
+                    userID={user?.id}
+                    labels={labelsRef}
+                    members={membersRef}
+                  />,
+                  200,
+                );
+              }}
+            >
               <Filter width={13} height={13} />
               <ProjectActionText>Filter</ProjectActionText>
             </ProjectAction>
-            <ProjectAction disabled>
-              <Sort width={13} height={13} />
-              <ProjectActionText>Sort</ProjectActionText>
-            </ProjectAction>
+            {renderMetaFilters(taskMetaFilters, (meta, id) => {
+              setTaskMetaFilters(
+                produce(taskMetaFilters, draftFilters => {
+                  if (meta === TaskMeta.MEMBER) {
+                    draftFilters.members = draftFilters.members.filter(m => m.id !== id);
+                  } else if (meta === TaskMeta.LABEL) {
+                    draftFilters.labels = draftFilters.labels.filter(m => m.id !== id);
+                  } else if (meta === TaskMeta.TITLE) {
+                    draftFilters.taskName = null;
+                  } else if (meta === TaskMeta.DUE_DATE) {
+                    draftFilters.dueDate = null;
+                  }
+                }),
+              );
+            })}
           </ProjectActions>
           <ProjectActions>
             <ProjectAction
-              ref={$labelsRef}
-              onClick={() => {
+              onClick={$labelsRef => {
                 showPopup(
                   $labelsRef,
                   <LabelManagerEditor
@@ -381,7 +545,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
           onTaskClick={task => {
             history.push(`${match.url}/c/${task.id}`);
           }}
-          onCardLabelClick={onCardLabelClick ?? (() => {})}
+          onCardLabelClick={onCardLabelClick ?? NOOP}
           cardLabelVariant={cardLabelVariant ?? 'large'}
           onTaskDrop={(droppedTask, previousTaskGroupID) => {
             updateTaskLocation({
@@ -425,9 +589,12 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
             });
           }}
           taskGroups={data.findProject.taskGroups}
+          taskStatusFilter={taskStatusFilter}
+          taskMetaFilters={taskMetaFilters}
+          taskSorting={taskSorting}
           onCreateTask={onCreateTask}
           onCreateTaskGroup={onCreateList}
-          onCardMemberClick={($targetRef, taskID, memberID) => {
+          onCardMemberClick={($targetRef, _taskID, memberID) => {
             const member = data.findProject.members.find(m => m.id === memberID);
             if (member) {
               showPopup(
@@ -486,7 +653,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                 </Popup>,
               );
             }}
-            onCardMemberClick={($targetRef, taskID, memberID) => {
+            onCardMemberClick={($targetRef, _taskID, memberID) => {
               const member = data.findProject.members.find(m => m.id === memberID);
               if (member) {
                 showPopup(
@@ -516,8 +683,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                 />,
               );
             }}
-            onArchiveCard={(_listId: string, cardId: string) =>
-              deleteTask({
+            onArchiveCard={(_listId: string, cardId: string) => {
+              return deleteTask({
                 variables: { taskID: cardId },
                 update: client => {
                   updateApolloCache<FindProjectQuery>(
@@ -533,8 +700,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                     { projectID },
                   );
                 },
-              })
-            }
+              });
+            }}
             onOpenDueDatePopup={($targetRef, task) => {
               showPopup(
                 $targetRef,
@@ -549,7 +716,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                       updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
                       hidePopup();
                     }}
-                    onCancel={() => {}}
+                    onCancel={NOOP}
                   />
                 </Popup>,
               );

frontend/src/Projects/Project/Details/index.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState } from 'react';
 import Modal from 'shared/components/Modal';
 import TaskDetails from 'shared/components/TaskDetails';
-import PopupMenu, { Popup, usePopup } from 'shared/components/PopupMenu';
+import { Popup, usePopup } from 'shared/components/PopupMenu';
 import MemberManager from 'shared/components/MemberManager';
 import { useRouteMatch, useHistory } from 'react-router';
 import {
@@ -22,7 +22,7 @@ import {
   FindTaskDocument,
   FindTaskQuery,
 } from 'shared/generated/graphql';
-import UserContext, { useCurrentUser } from 'App/context';
+import { useCurrentUser } from 'App/context';
 import MiniProfile from 'shared/components/MiniProfile';
 import DueDateManager from 'shared/components/DueDateManager';
 import produce from 'immer';
@@ -31,6 +31,7 @@ import Button from 'shared/components/Button';
 import Input from 'shared/components/Input';
 import { useForm } from 'react-hook-form';
 import updateApolloCache from 'shared/utils/cache';
+import NOOP from 'shared/utils/noop';
 
 const calculateChecklistBadge = (checklists: Array<TaskChecklist>) => {
   const total = checklists.reduce((prev: any, next: any) => {
@@ -75,15 +76,12 @@ const CreateChecklistInput = styled(Input)`
   margin-bottom: 8px;
 `;
 
-const InputError = styled.span`
-  color: rgba(${props => props.theme.colors.danger});
-  font-size: 12px;
-`;
 type CreateChecklistPopupProps = {
   onCreateChecklist: (data: CreateChecklistData) => void;
 };
+
 const CreateChecklistPopup: React.FC<CreateChecklistPopupProps> = ({ onCreateChecklist }) => {
-  const { register, handleSubmit, errors } = useForm<CreateChecklistData>();
+  const { register, handleSubmit } = useForm<CreateChecklistData>();
   const createUser = (data: CreateChecklistData) => {
     onCreateChecklist(data);
   };
@@ -132,9 +130,6 @@ const Details: React.FC<DetailsProps> = ({
   const { user } = useCurrentUser();
   const { showPopup, hidePopup } = usePopup();
   const history = useHistory();
-  const match = useRouteMatch();
-  const [currentMemberTask, setCurrentMemberTask] = useState('');
-  const [memberPopupData, setMemberPopupData] = useState(initialMemberPopupState);
   const [updateTaskChecklistLocation] = useUpdateTaskChecklistLocationMutation();
   const [updateTaskChecklistItemLocation] = useUpdateTaskChecklistItemLocationMutation({
     update: (client, response) => {
@@ -148,7 +143,7 @@ const Details: React.FC<DetailsProps> = ({
               const oldIdx = cache.findTask.checklists.findIndex(c => c.id === prevChecklistID);
               const newIdx = cache.findTask.checklists.findIndex(c => c.id === checklistID);
               if (oldIdx > -1 && newIdx > -1) {
-                const item = cache.findTask.checklists[oldIdx].items.find(item => item.id === checklistItem.id);
+                const item = cache.findTask.checklists[oldIdx].items.find(i => i.id === checklistItem.id);
                 if (item) {
                   draftCache.findTask.checklists[oldIdx].items = cache.findTask.checklists[oldIdx].items.filter(
                     i => i.id !== checklistItem.id,
@@ -398,7 +393,7 @@ const Details: React.FC<DetailsProps> = ({
                 if (member) {
                   showPopup(
                     $targetRef,
-                    <Popup title={null} onClose={() => {}} tab={0}>
+                    <Popup title={null} onClose={NOOP} tab={0}>
                       <MiniProfile
                         user={member}
                         bio="None"
@@ -412,19 +407,19 @@ const Details: React.FC<DetailsProps> = ({
                   );
                 }
               }}
-              onOpenAddMemberPopup={(task, $targetRef) => {
+              onOpenAddMemberPopup={(_task, $targetRef) => {
                 showPopup(
                   $targetRef,
-                  <Popup title="Members" tab={0} onClose={() => {}}>
+                  <Popup title="Members" tab={0} onClose={NOOP}>
                     <MemberManager
                       availableMembers={availableMembers}
                       activeMembers={data.findTask.assigned}
                       onMemberChange={(member, isActive) => {
                         if (user) {
                           if (isActive) {
-                            assignTask({ variables: { taskID: data.findTask.id, userID: user.id } });
+                            assignTask({ variables: { taskID: data.findTask.id, userID: member.id } });
                           } else {
-                            unassignTask({ variables: { taskID: data.findTask.id, userID: user.id } });
+                            unassignTask({ variables: { taskID: data.findTask.id, userID: member.id } });
                           }
                         }
                       }}
@@ -486,7 +481,7 @@ const Details: React.FC<DetailsProps> = ({
                 showPopup(
                   $targetRef,
                   <Popup
-                    title={'Change Due Date'}
+                    title="Change Due Date"
                     tab={0}
                     onClose={() => {
                       hidePopup();
@@ -502,7 +497,7 @@ const Details: React.FC<DetailsProps> = ({
                         updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
                         hidePopup();
                       }}
-                      onCancel={() => {}}
+                      onCancel={NOOP}
                     />
                   </Popup>,
                 );

frontend/src/Projects/Project/index.tsx

@@ -4,7 +4,6 @@ import updateApolloCache from 'shared/utils/cache';
 import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
 import styled from 'styled-components/macro';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
-import LabelManagerEditor from './LabelManagerEditor';
 import {
   useParams,
   Route,
@@ -36,9 +35,11 @@ import produce from 'immer';
 import UserContext, { useCurrentUser } from 'App/context';
 import Input from 'shared/components/Input';
 import Member from 'shared/components/Member';
+import EmptyBoard from 'shared/components/EmptyBoard';
+import NOOP from 'shared/utils/noop';
 import Board, { BoardLoading } from './Board';
 import Details from './Details';
-import EmptyBoard from 'shared/components/EmptyBoard';
+import LabelManagerEditor from './LabelManagerEditor';
 
 const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';
 
@@ -124,6 +125,7 @@ const Project = () => {
   const match = useRouteMatch();
 
   const [updateTaskDescription] = useUpdateTaskDescriptionMutation();
+  const taskLabelsRef = useRef<Array<TaskLabel>>([]);
   const [toggleTaskLabel] = useToggleTaskLabelMutation({
     onCompleted: newTaskLabel => {
       taskLabelsRef.current = newTaskLabel.toggleTaskLabel.task.labels;
@@ -190,7 +192,6 @@ const Project = () => {
   const { showPopup, hidePopup } = usePopup();
   const $labelsRef = useRef<HTMLDivElement>(null);
   const labelsRef = useRef<Array<ProjectLabel>>([]);
-  const taskLabelsRef = useRef<Array<TaskLabel>>([]);
   useEffect(() => {
     if (data) {
       document.title = `${data.findProject.name} | Taskcafé`;
@@ -199,7 +200,7 @@ const Project = () => {
   if (loading) {
     return (
       <>
-        <GlobalTopNavbar onSaveProjectName={projectName => {}} name="" projectID={null} />
+        <GlobalTopNavbar onSaveProjectName={NOOP} name="" projectID={null} />
         <BoardLoading />
       </>
     );
@@ -261,7 +262,7 @@ const Project = () => {
           path={`${match.path}/board/c/:taskID`}
           render={(routeProps: RouteComponentProps<TaskRouteProps>) => (
             <Details
-              refreshCache={() => {}}
+              refreshCache={NOOP}
               availableMembers={data.findProject.members}
               projectURL={`${match.url}/board`}
               taskID={routeProps.match.params.taskID}

frontend/src/Projects/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import styled from 'styled-components/macro';
 import GlobalTopNavbar from 'App/TopNavbar';
 import Empty from 'shared/undraw/Empty';
@@ -10,16 +10,17 @@ import {
   GetProjectsQuery,
 } from 'shared/generated/graphql';
 
-import ProjectGridItem, { AddProjectItem } from 'shared/components/ProjectGridItem';
 import { Link } from 'react-router-dom';
 import NewProject from 'shared/components/NewProject';
-import UserContext, { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
+import { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
 import Button from 'shared/components/Button';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import { useForm } from 'react-hook-form';
 import Input from 'shared/components/Input';
 import updateApolloCache from 'shared/utils/cache';
 import produce from 'immer';
+import NOOP from 'shared/utils/noop';
+
 const EmptyStateContent = styled.div`
   display: flex;
   justy-content: center;
@@ -37,21 +38,26 @@ const EmptyStatePrompt = styled.span`
   font-size: 16px;
   margin-top: 8px;
 `;
+
 const EmptyState = styled(Empty)`
   display: block;
   margin: 0 auto;
 `;
+
 const CreateTeamButton = styled(Button)`
   width: 100%;
 `;
+
 type CreateTeamData = { teamName: string };
+
 type CreateTeamFormProps = {
   onCreateTeam: (teamName: string) => void;
 };
+
 const CreateTeamFormContainer = styled.form``;
 
 const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
-  const { register, handleSubmit, errors } = useForm<CreateTeamData>();
+  const { register, handleSubmit } = useForm<CreateTeamData>();
   const createTeam = (data: CreateTeamData) => {
     onCreateTeam(data.teamName);
   };
@@ -186,6 +192,7 @@ const SectionActions = styled.div`
 const SectionAction = styled(Button)`
   padding: 6px 12px;
 `;
+
 const SectionActionLink = styled(Link)`
   margin-right: 8px;
 `;
@@ -201,12 +208,14 @@ const ProjectsContainer = styled.div`
   max-width: 825px;
   min-width: 288px;
 `;
+
 const ProjectGrid = styled.div`
   max-width: 780px;
   display: grid;
   grid-template-columns: 240px 240px 240px;
   gap: 20px 10px;
 `;
+
 const AddTeamButton = styled(Button)`
   padding: 6px 12px;
   position: absolute;
@@ -217,13 +226,12 @@ const AddTeamButton = styled(Button)`
 const CreateFirstTeam = styled(Button)`
   margin-top: 8px;
 `;
+
 type ShowNewProject = {
   open: boolean;
   initialTeamID: null | string;
 };
 
-const ProjectLink = styled(Link)``;
-
 const Projects = () => {
   const { showPopup, hidePopup } = usePopup();
   const { loading, data } = useGetProjectsQuery({ fetchPolicy: 'network-only' });
@@ -241,7 +249,7 @@ const Projects = () => {
   });
 
   const [showNewProject, setShowNewProject] = useState<ShowNewProject>({ open: false, initialTeamID: null });
-  const { user, setUser } = useCurrentUser();
+  const { user } = useCurrentUser();
   const [createTeam] = useCreateTeamMutation({
     update: (client, createData) => {
       updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
@@ -267,7 +275,7 @@ const Projects = () => {
       .sort((a, b) => {
         const textA = a.name.toUpperCase();
         const textB = b.name.toUpperCase();
-        return textA < textB ? -1 : textA > textB ? 1 : 0;
+        return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
       })
       .map(team => {
         return {
@@ -278,13 +286,13 @@ const Projects = () => {
             .sort((a, b) => {
               const textA = a.name.toUpperCase();
               const textB = b.name.toUpperCase();
-              return textA < textB ? -1 : textA > textB ? 1 : 0;
+              return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
             }),
         };
       });
     return (
       <>
-        <GlobalTopNavbar onSaveProjectName={() => {}} projectID={null} name={null} />
+        <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />
         <Wrapper>
           <ProjectsContainer>
             {user.roles.org === 'admin' && (

frontend/src/Teams/Members/index.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import Input from 'shared/components/Input';
 import updateApolloCache from 'shared/utils/cache';
 import produce from 'immer';
 import Button from 'shared/components/Button';
-import UserContext, { useCurrentUser, PermissionLevel, PermissionObjectType } from 'App/context';
+import { useCurrentUser, PermissionLevel, PermissionObjectType } from 'App/context';
 import Select from 'shared/components/Select';
 import {
   useGetTeamQuery,
@@ -13,8 +13,6 @@ import {
   useUpdateTeamMemberRoleMutation,
   GetTeamQuery,
   GetTeamDocument,
-  MeDocument,
-  MeQuery,
 } from 'shared/generated/graphql';
 import { UserPlus, Checkmark } from 'shared/icons';
 import styled, { css } from 'styled-components/macro';
@@ -22,6 +20,7 @@ import { usePopup, Popup } from 'shared/components/PopupMenu';
 import TaskAssignee from 'shared/components/TaskAssignee';
 import Member from 'shared/components/Member';
 import ControlledInput from 'shared/components/ControlledInput';
+import NOOP from 'shared/utils/noop';
 
 const MemberListWrapper = styled.div`
   flex: 1 1;
@@ -129,6 +128,7 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
           }
         `}
 `;
+
 export const Content = styled.div`
   padding: 0 12px 12px;
 `;
@@ -160,6 +160,7 @@ export const RemoveMemberButton = styled(Button)`
   padding: 6px 12px;
   width: 100%;
 `;
+
 type TeamRoleManagerPopupProps = {
   currentUserID: string;
   subject: User;
@@ -253,7 +254,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
           {subject.role && subject.role.code === 'owner' && (
             <>
               <Separator />
-              <WarningText>You can't change roles because there must be an owner.</WarningText>
+              <WarningText>You can not change roles because there must be an owner.</WarningText>
             </>
           )}
         </MiniProfileActions>
@@ -510,7 +511,7 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
           <MemberList>
             {data.findTeam.members.map(member => (
               <MemberListItem>
-                <MemberProfile showRoleIcons size={32} onMemberProfile={() => {}} member={member} />
+                <MemberProfile showRoleIcons size={32} onMemberProfile={NOOP} member={member} />
                 <MemberListItemDetails>
                   <MemberItemName>{member.fullName}</MemberItemName>
                   <MemberItemUsername>{`@${member.username}`}</MemberItemUsername>

frontend/src/Teams/index.tsx

@@ -1,24 +1,22 @@
-import React, { useState, useContext, useEffect } from 'react';
-import styled, { css } from 'styled-components/macro';
-import { MENU_TYPES } from 'shared/components/TopNavbar';
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components/macro';
 import GlobalTopNavbar from 'App/TopNavbar';
 import updateApolloCache from 'shared/utils/cache';
-import { Route, Switch, useRouteMatch, Redirect } from 'react-router';
-import Members from './Members';
-import Projects from './Projects';
-
+import { Route, Switch, useRouteMatch, Redirect, useParams, useHistory } from 'react-router';
 import {
   useGetTeamQuery,
   useDeleteTeamMutation,
   GetProjectsDocument,
   GetProjectsQuery,
 } from 'shared/generated/graphql';
-import { useParams, useHistory, useLocation } from 'react-router';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import { History } from 'history';
 import produce from 'immer';
 import { TeamSettings, DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
-import UserContext, { PermissionObjectType, PermissionLevel, useCurrentUser } from 'App/context';
+import { PermissionObjectType, PermissionLevel, useCurrentUser } from 'App/context';
+import NOOP from 'shared/utils/noop';
+import Members from './Members';
+import Projects from './Projects';
 
 const OuterWrapper = styled.div`
   display: flex;
@@ -117,7 +115,7 @@ const Teams = () => {
             setCurrentTab(tab);
           }}
           popupContent={<TeamPopup history={history} name={data.findTeam.name} teamID={teamID} />}
-          onSaveProjectName={() => {}}
+          onSaveProjectName={NOOP}
           projectID={null}
           name={data.findTeam.name}
         />

frontend/src/index.tsx

@@ -8,6 +8,7 @@ import { HttpLink } from 'apollo-link-http';
 import { onError } from 'apollo-link-error';
 import { enableMapSet } from 'immer';
 import { ApolloLink, Observable, fromPromise } from 'apollo-link';
+import moment from 'moment';
 import { getAccessToken, getNewToken, setAccessToken } from 'shared/utils/accessToken';
 import cache from './App/cache';
 import App from './App';
@@ -15,6 +16,13 @@ import App from './App';
 // https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8
 enableMapSet();
 
+moment.updateLocale('en', {
+  week: {
+    dow: 1, // First day of week is Monday
+    doy: 7, // First week of year must contain 1 January (7 + 1 - 1)
+  },
+});
+
 let forward$;
 let isRefreshing = false;
 let pendingRequests: any = [];
@@ -81,7 +89,7 @@ const errorLink = onError(({ graphQLErrors, networkError, operation, forward })
     }
   }
   if (networkError) {
-    console.log(`[Network error]: ${networkError}`);
+    console.log(`[Network error]: ${networkError}`); // eslint-disable-line no-console
   }
   return undefined;
 });
@@ -122,12 +130,13 @@ const client = new ApolloClient({
   link: ApolloLink.from([
     onError(({ graphQLErrors, networkError }) => {
       if (graphQLErrors) {
-        graphQLErrors.forEach(({ message, locations, path }) =>
-          console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`),
+        graphQLErrors.forEach(
+          ({ message, locations, path }) =>
+            console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`), // eslint-disable-line no-console
         );
       }
       if (networkError) {
-        console.log(`[Network error]: ${networkError}`);
+        console.log(`[Network error]: ${networkError}`); // eslint-disable-line no-console
       }
     }),
     errorLink,

frontend/src/shared/components/Admin/Admin.stories.tsx

@@ -1,10 +1,10 @@
-import React, { useRef } from 'react';
-import Admin from '.';
-import { theme } from 'App/ThemeStyles';
-import NormalizeStyles from 'App/NormalizeStyles';
-import BaseStyles from 'App/BaseStyles';
+import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { action } from '@storybook/addon-actions';
+import theme from 'App/ThemeStyles';
+import NormalizeStyles from 'App/NormalizeStyles';
+import BaseStyles from 'App/BaseStyles';
+import Admin from '.';
 
 export default {
   component: Admin,

frontend/src/shared/components/Admin/index.tsx

@@ -1,15 +1,13 @@
 import React, { useState, useRef } from 'react';
-import { UserPlus, Checkmark } from 'shared/icons';
 import styled, { css } from 'styled-components';
 import TaskAssignee from 'shared/components/TaskAssignee';
 import Select from 'shared/components/Select';
-import { User, Plus, Lock, Pencil, Trash } from 'shared/icons';
+import { User, UserPlus, Checkmark } from 'shared/icons';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import { RoleCode, useUpdateUserRoleMutation } from 'shared/generated/graphql';
 import Input from 'shared/components/Input';
-import Member from 'shared/components/Member';
-
 import Button from 'shared/components/Button';
+import NOOP from 'shared/utils/noop';
 
 export const RoleCheckmark = styled(Checkmark)`
   padding-left: 4px;
@@ -69,6 +67,7 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
           }
         `}
 `;
+
 export const Content = styled.div`
   padding: 0 12px 12px;
 `;
@@ -100,6 +99,7 @@ export const RemoveMemberButton = styled(Button)`
   padding: 6px 12px;
   width: 100%;
 `;
+
 type TeamRoleManagerPopupProps = {
   user: User;
   users: Array<User>;
@@ -120,7 +120,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
   onChangeRole,
 }) => {
   const { hidePopup, setTab } = usePopup();
-  const [userPass, setUserPass] = useState({ pass: '', passConfirm: '' });
+  const [userPass] = useState({ pass: '', passConfirm: '' });
   const [deleteUser, setDeleteUser] = useState<{ label: string; value: string } | null>(null);
   const hasOwned = user.owned.projects.length !== 0 || user.owned.teams.length !== 0;
   return (
@@ -195,7 +195,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
           {user.role && user.role.code === 'owner' && (
             <>
               <Separator />
-              <WarningText>You can't change roles because there must be an owner.</WarningText>
+              <WarningText>You can not change roles because there must be an owner.</WarningText>
             </>
           )}
         </MiniProfileActions>
@@ -209,7 +209,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
             <>
               <DeleteDescription>{`The user is the owner of ${user.owned.projects.length} projects & ${user.owned.teams.length} teams.`}</DeleteDescription>
               <DeleteDescription>
-                Choose a new user to take over ownership of this user's teams & projects.
+                Choose a new user to take over ownership of the users teams & projects.
               </DeleteDescription>
               <UserSelect
                 onChange={v => setDeleteUser(v)}
@@ -239,7 +239,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
             Removing this user from the organzation will remove them from assigned tasks, projects, and teams.
           </DeleteDescription>
           <DeleteDescription>{`The user is the owner of ${user.owned.projects.length} projects & ${user.owned.teams.length} teams.`}</DeleteDescription>
-          <UserSelect onChange={() => {}} value={null} options={users.map(u => ({ label: u.fullName, value: u.id }))} />
+          <UserSelect onChange={NOOP} value={null} options={users.map(u => ({ label: u.fullName, value: u.id }))} />
           <UserPassConfirmButton
             onClick={() => {
               // onDeleteUser();
@@ -253,7 +253,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
       <Popup title="Reset password?" onClose={() => hidePopup()} tab={3}>
         <Content>
           <DeleteDescription>
-            You can either set the user's new password directly or send the user an email allowing them to reset their
+            You can either set the users new password directly or send the user an email allowing them to reset their
             own password.
           </DeleteDescription>
           <UserPassBar>
@@ -291,6 +291,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
     </>
   );
 };
+
 const UserSelect = styled(Select)`
   margin: 8px 0;
   padding: 8px 0;
@@ -299,6 +300,7 @@ const UserSelect = styled(Select)`
 const NewUserPassInput = styled(Input)`
   margin: 8px 0;
 `;
+
 const InviteMemberButton = styled(Button)`
   padding: 7px 12px;
 `;
@@ -307,6 +309,7 @@ const UserPassBar = styled.div`
   display: flex;
   padding-top: 8px;
 `;
+
 const UserPassConfirmButton = styled(Button)`
   width: 100%;
   padding: 7px 12px;
@@ -397,104 +400,6 @@ const MemberListWrapper = styled.div`
   flex: 1 1;
 `;
 
-const Root = styled.div`
-  .ag-theme-material {
-    --ag-foreground-color: #c2c6dc;
-    --ag-secondary-foreground-color: #c2c6dc;
-    --ag-background-color: transparent;
-    --ag-header-background-color: transparent;
-    --ag-header-foreground-color: #c2c6dc;
-    --ag-border-color: #414561;
-
-    --ag-row-hover-color: #262c49;
-    --ag-header-cell-hover-background-color: #262c49;
-    --ag-checkbox-unchecked-color: #c2c6dc;
-    --ag-checkbox-indeterminate-color: rgba(115, 103, 240);
-    --ag-selected-row-background-color: #262c49;
-    --ag-material-primary-color: rgba(115, 103, 240);
-    --ag-material-accent-color: rgba(115, 103, 240);
-  }
-  .ag-theme-material ::-webkit-scrollbar {
-    width: 12px;
-  }
-
-  .ag-theme-material ::-webkit-scrollbar-track {
-    background: #262c49;
-    border-radius: 20px;
-  }
-
-  .ag-theme-material ::-webkit-scrollbar-thumb {
-    background: #7367f0;
-    border-radius: 20px;
-  }
-  .ag-header-cell-text {
-    color: #fff;
-    font-weight: 700;
-  }
-`;
-
-const Header = styled.div`
-  border-bottom: 1px solid #e2e2e2;
-  flex-direction: row;
-  box-sizing: border-box;
-  display: flex;
-  white-space: nowrap;
-  width: 100%;
-  overflow: hidden;
-  background: transparent;
-  border-bottom-color: #414561;
-  color: #fff;
-
-  height: 112px;
-  min-height: 112px;
-`;
-
-const EditUserIcon = styled(Pencil)``;
-
-const LockUserIcon = styled(Lock)``;
-
-const DeleteUserIcon = styled(Trash)``;
-
-type ActionButtonProps = {
-  onClick: ($target: React.RefObject<HTMLElement>) => void;
-};
-
-const ActionButtonWrapper = styled.div`
-  margin-right: 8px;
-  cursor: pointer;
-  display: inline-flex;
-`;
-
-const ActionButton: React.FC<ActionButtonProps> = ({ onClick, children }) => {
-  const $wrapper = useRef<HTMLDivElement>(null);
-  return (
-    <ActionButtonWrapper onClick={() => onClick($wrapper)} ref={$wrapper}>
-      {children}
-    </ActionButtonWrapper>
-  );
-};
-
-const ActionButtons = (params: any) => {
-  return (
-    <>
-      <ActionButton onClick={() => {}}>
-        <EditUserIcon width={16} height={16} />
-      </ActionButton>
-      <ActionButton onClick={$target => params.onDeleteUser($target, params.value)}>
-        <DeleteUserIcon width={16} height={16} />
-      </ActionButton>
-    </>
-  );
-};
-
-const Wrapper = styled.div`
-  background: #eff2f7;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-`;
-
 const Container = styled.div`
   padding: 2.2rem;
   display: flex;
@@ -525,6 +430,7 @@ const TabNavItem = styled.li`
   display: block;
   position: relative;
 `;
+
 const TabNavItemButton = styled.button<{ active: boolean }>`
   cursor: pointer;
   display: flex;
@@ -545,6 +451,10 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
     fill: rgba(115, 103, 240);
   }
 `;
+const TabItemUser = styled(User)<{ active: boolean }>`
+fill: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
+stroke: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
+`;
 
 const TabNavItemSpan = styled.span`
   text-align: left;
@@ -607,7 +517,7 @@ const NavItem: React.FC<NavItemProps> = ({ active, name, tab, onClick }) => {
       }}
     >
       <TabNavItemButton active={active}>
-        <User size={14} color={active ? 'rgba(115, 103, 240)' : '#c2c6dc'} />
+        <TabItemUser width={14} height={14} active={active} />
         <TabNavItemSpan>{name}</TabNavItemSpan>
       </TabNavItemButton>
     </TabNavItem>
@@ -637,7 +547,7 @@ const Admin: React.FC<AdminProps> = ({
     'You can’t leave because you are the only admin. To make another user an admin, click their avatar, select “Change permissions…”, and select “Admin”.';
   const [currentTop, setTop] = useState(initialTab * 48);
   const [currentTab, setTab] = useState(initialTab);
-  const { showPopup, hidePopup } = usePopup();
+  const { showPopup } = usePopup();
   const $tabNav = useRef<HTMLDivElement>(null);
 
   const [updateUserRole] = useUpdateUserRoleMutation();
@@ -690,7 +600,7 @@ const Admin: React.FC<AdminProps> = ({
                 const projectTotal = member.owned.projects.length + member.member.projects.length;
                 return (
                   <MemberListItem>
-                    <MemberProfile showRoleIcons size={32} onMemberProfile={() => {}} member={member} />
+                    <MemberProfile showRoleIcons size={32} onMemberProfile={NOOP} member={member} />
                     <MemberListItemDetails>
                       <MemberItemName>{member.fullName}</MemberItemName>
                       <MemberItemUsername>{`@${member.username}`}</MemberItemUsername>

frontend/src/shared/components/Button/Button.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import BaseStyles from 'App/BaseStyles';
 import NormalizeStyles from 'App/NormalizeStyles';
-import { theme } from 'App/ThemeStyles';
+import theme from 'App/ThemeStyles';
 import styled, { ThemeProvider } from 'styled-components';
 import Button from '.';
 

frontend/src/shared/components/Card/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPencilAlt, faList } from '@fortawesome/free-solid-svg-icons';
-import { faClock, faCheckSquare, faEye } from '@fortawesome/free-regular-svg-icons';
+import { faClock, faEye } from '@fortawesome/free-regular-svg-icons';
 import {
   EditorTextarea,
   CardMember,
@@ -24,7 +24,6 @@ import {
   CardTitle,
   CardMembers,
 } from './Styles';
-import { CheckSquare } from 'shared/icons';
 
 type DueDate = {
   isPastDue: boolean;
@@ -209,7 +208,7 @@ const Card = React.forwardRef(
             ) : (
               <CardTitle>
                 {complete && <CompleteIcon width={16} height={16} />}
-                {`${title}${position ? ' - ' + position : ''}`}
+                {`${title}${position ? ` - ${position}` : ''}`}
               </CardTitle>
             )}
             <ListCardBadges>
@@ -236,9 +235,9 @@ const Card = React.forwardRef(
                     width={8}
                     height={8}
                   />
-                  <ListCardBadgeText
-                    color={checklists.complete === checklists.total ? 'success' : 'normal'}
-                  >{`${checklists.complete}/${checklists.total}`}</ListCardBadgeText>
+                  <ListCardBadgeText color={checklists.complete === checklists.total ? 'success' : 'normal'}>
+                    {`${checklists.complete}/${checklists.total}`}
+                  </ListCardBadgeText>
                 </ListCardBadge>
               )}
             </ListCardBadges>

frontend/src/shared/components/Checklist/Checklist.stories.tsx

@@ -2,9 +2,10 @@ import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import BaseStyles from 'App/BaseStyles';
 import NormalizeStyles from 'App/NormalizeStyles';
-import { theme } from 'App/ThemeStyles';
+import theme from 'App/ThemeStyles';
 import produce from 'immer';
 import styled, { ThemeProvider } from 'styled-components';
+import NOOP from 'shared/utils/noop';
 import Checklist, { ChecklistItem } from '.';
 
 export default {
@@ -132,7 +133,7 @@ export const Default = () => {
             }}
             onToggleItem={onToggleItem}
           >
-            {items.map((item, idx) => (
+            {items.map(item => (
               <ChecklistItem
                 key={item.id}
                 wrapperProps={{}}
@@ -141,9 +142,9 @@ export const Default = () => {
                 itemID={item.id}
                 name={item.name}
                 complete={item.complete}
-                onDeleteItem={() => {}}
-                onChangeName={() => {}}
-                onToggleItem={() => {}}
+                onDeleteItem={NOOP}
+                onChangeName={NOOP}
+                onToggleItem={NOOP}
               />
             ))}
           </Checklist>

frontend/src/shared/components/Chip/index.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Cross } from 'shared/icons';
+
+const LabelText = styled.span`
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(${props => props.theme.colors.text.primary});
+`;
+
+const Container = styled.div<{ color?: string }>`
+  margin: 0.75rem;
+  min-height: 26px;
+  min-width: 26px;
+  font-size: 0.8rem;
+  border-radius: 20px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  ${props =>
+    props.color
+      ? css`
+          background: ${props.color};
+          & ${LabelText} {
+            color: rgba(${props.theme.colors.text.secondary});
+          }
+        `
+      : css`
+          background: rgba(${props.theme.colors.bg.primary});
+        `}
+`;
+
+const CloseButton = styled.button`
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0 4px;
+  background: rgba(0, 0, 0, 0.15);
+  &:hover {
+    background: rgba(0, 0, 0, 0.25);
+  }
+`;
+
+type ChipProps = {
+  label: string;
+  onClose?: () => void;
+  color?: string;
+};
+
+const Chip: React.FC<ChipProps> = ({ label, onClose, color }) => {
+  return (
+    <Container color={color}>
+      <LabelText>{label}</LabelText>
+      {onClose && (
+        <CloseButton onClick={() => onClose()}>
+          <Cross width={12} height={12} />
+        </CloseButton>
+      )}
+    </Container>
+  );
+};
+
+export default Chip;

frontend/src/shared/components/ControlledInput/Input.stories.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import BaseStyles from 'App/BaseStyles';
 import NormalizeStyles from 'App/NormalizeStyles';
-import { theme } from 'App/ThemeStyles';
+import theme from 'App/ThemeStyles';
 import styled, { ThemeProvider } from 'styled-components';
+import { User } from 'shared/icons';
 
 import Input from '.';
-import { User } from 'shared/icons';
 
 export default {
   component: Input,
@@ -35,7 +35,7 @@ export const Default = () => {
         <Wrapper>
           <Input label="Label placeholder" />
           <Input width="100%" placeholder="Placeholder" />
-          <Input icon={<User size={20} />} width="100%" placeholder="Placeholder" />
+          <Input icon={<User width={20} height={20} />} width="100%" placeholder="Placeholder" />
         </Wrapper>
       </ThemeProvider>
     </>

frontend/src/shared/components/DropdownMenu/index.tsx

@@ -18,7 +18,7 @@ const DropdownMenu: React.FC<DropdownMenuProps> = ({ left, top, onLogout, onClos
     <Container ref={$containerRef} left={left} top={top}>
       <Wrapper>
         <ActionItem onClick={onAdminConsole}>
-          <User size={16} color="#c2c6dc" />
+          <User width={16} height={16} />
           <ActionTitle>Profile</ActionTitle>
         </ActionItem>
         <Separator />
@@ -54,7 +54,7 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({ showAdminConsole, onAdminCons
         </>
       )}
       <ActionItem onClick={onProfile}>
-        <User size={16} color="#c2c6dc" />
+        <User width={16} height={16} />
         <ActionTitle>Profile</ActionTitle>
       </ActionItem>
       <ActionsList>

frontend/src/shared/components/DueDateManager/DueDateManager.stories.tsx

@@ -1,8 +1,8 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import { action } from '@storybook/addon-actions';
 import BaseStyles from 'App/BaseStyles';
 import NormalizeStyles from 'App/NormalizeStyles';
-import { theme } from 'App/ThemeStyles';
+import theme from 'App/ThemeStyles';
 import styled, { ThemeProvider } from 'styled-components';
 import { Popup } from '../PopupMenu';
 import DueDateManager from '.';

frontend/src/shared/components/DueDateManager/index.tsx

@@ -2,22 +2,13 @@ import React, { useState, useEffect, forwardRef } from 'react';
 import moment from 'moment';
 import styled from 'styled-components';
 import DatePicker from 'react-datepicker';
-import { Cross } from 'shared/icons';
 import _ from 'lodash';
-
-import {
-  Wrapper,
-  ActionWrapper,
-  RemoveDueDate,
-  DueDateInput,
-  DueDatePickerWrapper,
-  ConfirmAddDueDate,
-  CancelDueDate,
-} from './Styles';
-
 import 'react-datepicker/dist/react-datepicker.css';
 import { getYear, getMonth } from 'date-fns';
 import { useForm, Controller } from 'react-hook-form';
+import NOOP from 'shared/utils/noop';
+
+import { Wrapper, ActionWrapper, RemoveDueDate, DueDateInput, DueDatePickerWrapper, ConfirmAddDueDate } from './Styles';
 
 type DueDateManagerProps = {
   task: Task;
@@ -120,17 +111,13 @@ const HeaderActions = styled.div`
 
 const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
   const now = moment();
-  const [textStartDate, setTextStartDate] = useState(now.format('YYYY-MM-DD'));
+  const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
   const [startDate, setStartDate] = useState(new Date());
-  useEffect(() => {
-    setTextStartDate(moment(startDate).format('YYYY-MM-DD'));
-  }, [startDate]);
 
-  const [textEndTime, setTextEndTime] = useState(now.format('h:mm A'));
-  const [endTime, setEndTime] = useState(now.toDate());
   useEffect(() => {
-    setTextEndTime(moment(endTime).format('h:mm A'));
-  }, [endTime]);
+    const newDate = moment(startDate).format('YYYY-MM-DD');
+    setValue('endDate', newDate);
+  }, [startDate]);
 
   const years = _.range(2010, getYear(new Date()) + 10, 1);
   const months = [
@@ -147,9 +134,8 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
     'November',
     'December',
   ];
-  const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
   const saveDueDate = (data: any) => {
-    const newDate = moment(`${data.endDate} ${data.endTime}`, 'YYYY-MM-DD h:mm A');
+    const newDate = moment(`${data.endDate} ${moment(data.endTime).format('h:mm A')}`, 'YYYY-MM-DD h:mm A');
     if (newDate.isValid()) {
       onDueDateChange(task, newDate.toDate());
     }
@@ -158,11 +144,12 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
     return (
       <DueDateInput
         id="endTime"
+        value={value}
         name="endTime"
         ref={$ref}
         width="100%"
         variant="alternate"
-        label="Date"
+        label="Time"
         onClick={onClick}
       />
     );
@@ -177,7 +164,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
             width="100%"
             variant="alternate"
             label="Date"
-            defaultValue={textStartDate}
+            defaultValue={now.format('YYYY-MM-DD')}
             ref={register({
               required: 'End date is required.',
             })}
@@ -186,6 +173,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
         <FormField>
           <Controller
             control={control}
+            defaultValue={now.toDate()}
             name="endTime"
             render={({ onChange, onBlur, value }) => (
               <DatePicker
@@ -220,7 +208,10 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
                 </HeaderButton>
                 <HeaderSelectLabel>
                   {months[date.getMonth()]}
-                  <HeaderSelect value={getYear(date)} onChange={({ target: { value } }) => changeYear(parseInt(value))}>
+                  <HeaderSelect
+                    value={getYear(date)}
+                    onChange={({ target: { value } }) => changeYear(parseInt(value, 10))}
+                  >
                     {years.map(option => (
                       <option key={option} value={option}>
                         {option}
@@ -250,12 +241,14 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
             selected={startDate}
             inline
             onChange={date => {
-              setStartDate(date ?? new Date());
+              if (date) {
+                setStartDate(date);
+              }
             }}
           />
         </DueDatePickerWrapper>
         <ActionWrapper>
-          <ConfirmAddDueDate type="submit" onClick={() => {}}>
+          <ConfirmAddDueDate type="submit" onClick={NOOP}>
             Save
           </ConfirmAddDueDate>
           <RemoveDueDate

frontend/src/shared/components/Input/Input.stories.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import BaseStyles from 'App/BaseStyles';
 import NormalizeStyles from 'App/NormalizeStyles';
-import { theme } from 'App/ThemeStyles';
+import theme from 'App/ThemeStyles';
 import styled, { ThemeProvider } from 'styled-components';
+import { User } from 'shared/icons';
 
 import Input from '.';
-import { User } from 'shared/icons';
 
 export default {
   component: Input,
@@ -35,7 +35,7 @@ export const Default = () => {
         <Wrapper>
           <Input label="Label placeholder" />
           <Input width="100%" placeholder="Placeholder" />
-          <Input icon={<User size={20} />} width="100%" placeholder="Placeholder" />
+          <Input icon={<User width={20} height={20} />} width="100%" placeholder="Placeholder" />
         </Wrapper>
       </ThemeProvider>
     </>

frontend/src/shared/components/Input/index.tsx

@@ -91,6 +91,7 @@ type InputProps = {
   name?: string;
   className?: string;
   defaultValue?: string;
+  value?: string;
   onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
 };
 
@@ -129,6 +130,7 @@ const Input = React.forwardRef(
       onClick,
       floatingLabel,
       defaultValue,
+      value,
       id,
     }: InputProps,
     $ref: any,
@@ -166,6 +168,7 @@ const Input = React.forwardRef(
           onClick={onClick}
           autoComplete={autocomplete ? 'on' : 'off'}
           defaultValue={defaultValue}
+          value={value}
           hasIcon={typeof icon !== 'undefined'}
           width={width}
           placeholder={placeholder}

frontend/src/shared/components/List/List.stories.tsx

@@ -3,6 +3,7 @@ import { action } from '@storybook/addon-actions';
 import Card from 'shared/components/Card';
 import CardComposer from 'shared/components/CardComposer';
 import LabelColors from 'shared/constants/labelColors';
+import NOOP from 'shared/utils/noop';
 import List, { ListCards } from '.';
 
 export default {
@@ -60,7 +61,7 @@ export const Default = () => {
       onExtraMenuOpen={action('extra menu open')}
     >
       <ListCards>
-        <CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen={false} />
+        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
       </ListCards>
     </List>
   );
@@ -77,7 +78,7 @@ export const WithCardComposer = () => {
       onExtraMenuOpen={action('extra menu open')}
     >
       <ListCards>
-        <CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen />
+        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen />
       </ListCards>
     </List>
   );
@@ -108,7 +109,7 @@ export const WithCard = () => {
           checklists={{ complete: 1, total: 4 }}
           dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
         />
-        <CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen={false} />
+        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
       </ListCards>
     </List>
   );
@@ -138,7 +139,7 @@ export const WithCardAndComposer = () => {
           checklists={{ complete: 1, total: 4 }}
           dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
         />
-        <CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen />
+        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen />
       </ListCards>
     </List>
   );

frontend/src/shared/components/Lists/index.tsx

@@ -13,6 +13,249 @@ import {
 import moment from 'moment';
 
 import { Container, BoardContainer, BoardWrapper } from './Styles';
+import shouldMetaFilter from './metaFilter';
+
+export enum TaskMeta {
+  NONE,
+  TITLE,
+  MEMBER,
+  LABEL,
+  DUE_DATE,
+}
+
+export enum TaskMetaMatch {
+  MATCH_ANY,
+  MATCH_ALL,
+}
+
+export enum TaskStatus {
+  ALL,
+  COMPLETE,
+  INCOMPLETE,
+}
+
+export enum TaskSince {
+  ALL,
+  TODAY,
+  YESTERDAY,
+  ONE_WEEK,
+  TWO_WEEKS,
+  THREE_WEEKS,
+}
+
+export type TaskStatusFilter = {
+  status: TaskStatus;
+  since: TaskSince;
+};
+
+export interface TaskMetaFilterName {
+  meta: TaskMeta;
+  value?: string | moment.Moment | null;
+  id?: string | null;
+}
+
+export type TaskNameMetaFilter = {
+  name: string;
+};
+
+export enum DueDateFilterType {
+  TODAY,
+  TOMORROW,
+  THIS_WEEK,
+  NEXT_WEEK,
+  ONE_WEEK,
+  TWO_WEEKS,
+  THREE_WEEKS,
+  OVERDUE,
+  NO_DUE_DATE,
+}
+
+export type DueDateMetaFilter = {
+  type: DueDateFilterType;
+  label: string;
+};
+
+export type MemberMetaFilter = {
+  id: string;
+  username: string;
+};
+
+export type LabelMetaFilter = {
+  id: string;
+  name: string;
+  color: string;
+};
+
+export type TaskMetaFilters = {
+  match: TaskMetaMatch;
+  dueDate: DueDateMetaFilter | null;
+  taskName: TaskNameMetaFilter | null;
+  members: Array<MemberMetaFilter>;
+  labels: Array<LabelMetaFilter>;
+};
+
+export enum TaskSortingType {
+  NONE,
+  DUE_DATE,
+  MEMBERS,
+  LABELS,
+  TASK_TITLE,
+}
+
+export enum TaskSortingDirection {
+  ASC,
+  DESC,
+}
+
+export type TaskSorting = {
+  type: TaskSortingType;
+  direction: TaskSortingDirection;
+};
+
+function sortString(a: string, b: string) {
+  if (a < b) {
+    return -1;
+  }
+  if (a > b) {
+    return 1;
+  }
+  return 0;
+}
+
+function sortTasks(a: Task, b: Task, taskSorting: TaskSorting) {
+  if (taskSorting.type === TaskSortingType.TASK_TITLE) {
+    if (a.name < b.name) {
+      return -1;
+    }
+    if (a.name > b.name) {
+      return 1;
+    }
+    return 0;
+  }
+  if (taskSorting.type === TaskSortingType.DUE_DATE) {
+    if (a.dueDate && !b.dueDate) {
+      return -1;
+    }
+    if (b.dueDate && !a.dueDate) {
+      return 1;
+    }
+    return moment(a.dueDate).diff(moment(b.dueDate));
+  }
+  if (taskSorting.type === TaskSortingType.LABELS) {
+    // sorts non-empty labels by name, then by empty label color name
+    let aLabels = [];
+    let bLabels = [];
+    let aLabelsEmpty = [];
+    let bLabelsEmpty = [];
+    if (a.labels) {
+      for (const aLabel of a.labels) {
+        if (aLabel.projectLabel.name && aLabel.projectLabel.name !== '') {
+          aLabels.push(aLabel.projectLabel.name);
+        } else {
+          aLabelsEmpty.push(aLabel.projectLabel.labelColor.name);
+        }
+      }
+    }
+    if (b.labels) {
+      for (const bLabel of b.labels) {
+        if (bLabel.projectLabel.name && bLabel.projectLabel.name !== '') {
+          bLabels.push(bLabel.projectLabel.name);
+        } else {
+          bLabelsEmpty.push(bLabel.projectLabel.labelColor.name);
+        }
+      }
+    }
+    aLabels = aLabels.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
+    bLabels = bLabels.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
+    aLabelsEmpty = aLabelsEmpty.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
+    bLabelsEmpty = bLabelsEmpty.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
+    if (aLabelsEmpty.length !== 0 || bLabelsEmpty.length !== 0) {
+      if (aLabelsEmpty.length > bLabelsEmpty.length) {
+        if (bLabels.length !== 0) {
+          return 1;
+        }
+        return -1;
+      }
+    }
+    if (aLabels.length < bLabels.length) {
+      return 1;
+    }
+    if (aLabels.length > bLabels.length) {
+      return -1;
+    }
+    return 0;
+  }
+  if (taskSorting.type === TaskSortingType.MEMBERS) {
+    let aMembers = [];
+    let bMembers = [];
+    if (a.assigned) {
+      for (const aMember of a.assigned) {
+        if (aMember.fullName) {
+          aMembers.push(aMember.fullName);
+        }
+      }
+    }
+    if (b.assigned) {
+      for (const bMember of b.assigned) {
+        if (bMember.fullName) {
+          bMembers.push(bMember.fullName);
+        }
+      }
+    }
+    aMembers = aMembers.sort((aMember, bMember) => sortString(aMember, bMember));
+    bMembers = bMembers.sort((aMember, bMember) => sortString(aMember, bMember));
+    if (aMembers.length < bMembers.length) {
+      return 1;
+    }
+    if (aMembers.length > bMembers.length) {
+      return -1;
+    }
+    return 0;
+  }
+  return 0;
+}
+
+function shouldStatusFilter(task: Task, filter: TaskStatusFilter) {
+  if (filter.status === TaskStatus.ALL) {
+    return true;
+  }
+
+  if (filter.status === TaskStatus.INCOMPLETE && task.complete === false) {
+    return true;
+  }
+  if (filter.status === TaskStatus.COMPLETE && task.completedAt && task.complete === true) {
+    const completedAt = moment(task.completedAt);
+    const REFERENCE = moment(); // fixed just for testing, use moment();
+    switch (filter.since) {
+      case TaskSince.TODAY:
+        const TODAY = REFERENCE.clone().startOf('day');
+        return completedAt.isSame(TODAY, 'd');
+      case TaskSince.YESTERDAY:
+        const YESTERDAY = REFERENCE.clone()
+          .subtract(1, 'days')
+          .startOf('day');
+        return completedAt.isSameOrAfter(YESTERDAY, 'd');
+      case TaskSince.ONE_WEEK:
+        const ONE_WEEK = REFERENCE.clone()
+          .subtract(7, 'days')
+          .startOf('day');
+        return completedAt.isSameOrAfter(ONE_WEEK, 'd');
+      case TaskSince.TWO_WEEKS:
+        const TWO_WEEKS = REFERENCE.clone()
+          .subtract(14, 'days')
+          .startOf('day');
+        return completedAt.isSameOrAfter(TWO_WEEKS, 'd');
+      case TaskSince.THREE_WEEKS:
+        const THREE_WEEKS = REFERENCE.clone()
+          .subtract(21, 'days')
+          .startOf('day');
+        return completedAt.isSameOrAfter(THREE_WEEKS, 'd');
+      default:
+        return true;
+    }
+  }
+  return false;
+}
 
 interface SimpleProps {
   taskGroups: Array<TaskGroup>;
@@ -28,8 +271,29 @@ interface SimpleProps {
   onCardMemberClick: OnCardMemberClick;
   onCardLabelClick: () => void;
   cardLabelVariant: CardLabelVariant;
+  taskStatusFilter?: TaskStatusFilter;
+  taskMetaFilters?: TaskMetaFilters;
+  taskSorting?: TaskSorting;
 }
 
+const initTaskStatusFilter: TaskStatusFilter = {
+  status: TaskStatus.ALL,
+  since: TaskSince.ALL,
+};
+
+const initTaskMetaFilters: TaskMetaFilters = {
+  match: TaskMetaMatch.MATCH_ANY,
+  dueDate: null,
+  taskName: null,
+  labels: [],
+  members: [],
+};
+
+const initTaskSorting: TaskSorting = {
+  type: TaskSortingType.NONE,
+  direction: TaskSortingDirection.ASC,
+};
+
 const SimpleLists: React.FC<SimpleProps> = ({
   taskGroups,
   onTaskDrop,
@@ -43,6 +307,9 @@ const SimpleLists: React.FC<SimpleProps> = ({
   cardLabelVariant,
   onExtraMenuOpen,
   onCardMemberClick,
+  taskStatusFilter = initTaskStatusFilter,
+  taskMetaFilters = initTaskMetaFilters,
+  taskSorting = initTaskSorting,
 }) => {
   const onDragEnd = ({ draggableId, source, destination, type }: DropResult) => {
     if (typeof destination === 'undefined') return;
@@ -81,7 +348,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
           position: newPosition,
         });
       } else {
-        throw { error: 'task group can not be found' };
+        throw new Error('task group can not be found');
       }
     } else {
       const curTaskGroup = taskGroups.findIndex(
@@ -164,10 +431,18 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                 <ListCards ref={columnDropProvided.innerRef} {...columnDropProvided.droppableProps}>
                                   {taskGroup.tasks
                                     .slice()
+                                    .filter(t => shouldStatusFilter(t, taskStatusFilter))
+                                    .filter(t => shouldMetaFilter(t, taskMetaFilters))
                                     .sort((a: any, b: any) => a.position - b.position)
+                                    .sort((a: any, b: any) => sortTasks(a, b, taskSorting))
                                     .map((task: Task, taskIndex: any) => {
                                       return (
-                                        <Draggable key={task.id} draggableId={task.id} index={taskIndex}>
+                                        <Draggable
+                                          key={task.id}
+                                          draggableId={task.id}
+                                          index={taskIndex}
+                                          isDragDisabled={taskSorting.type !== TaskSortingType.NONE}
+                                        >
                                           {taskProvided => {
                                             return (
                                               <Card

frontend/src/shared/components/Lists/metaFilter.ts

@@ -0,0 +1,132 @@
+import { TaskMetaFilters, DueDateFilterType } from 'shared/components/Lists';
+import moment from 'moment';
+
+enum ShouldFilter {
+  NO_FILTER,
+  VALID,
+  NOT_VALID,
+}
+
+function shouldFilter(cond: boolean) {
+  return cond ? ShouldFilter.VALID : ShouldFilter.NOT_VALID;
+}
+
+export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
+  let isFiltered = ShouldFilter.NO_FILTER;
+  if (filters.taskName) {
+    isFiltered = shouldFilter(task.name.toLowerCase().startsWith(filters.taskName.name.toLowerCase()));
+  }
+  if (filters.dueDate) {
+    if (isFiltered === ShouldFilter.NO_FILTER) {
+      isFiltered = ShouldFilter.NOT_VALID;
+    }
+    if (filters.dueDate.type === DueDateFilterType.NO_DUE_DATE) {
+      isFiltered = shouldFilter(!(task.dueDate && task.dueDate !== null));
+    }
+    if (task.dueDate) {
+      const taskDueDate = moment(task.dueDate);
+      const today = moment();
+      let start;
+      let end;
+      switch (filters.dueDate.type) {
+        case DueDateFilterType.OVERDUE:
+          isFiltered = shouldFilter(taskDueDate.isBefore(today));
+          break;
+        case DueDateFilterType.TODAY:
+          isFiltered = shouldFilter(taskDueDate.isSame(today, 'day'));
+          break;
+        case DueDateFilterType.TOMORROW:
+          isFiltered = shouldFilter(
+            taskDueDate.isBefore(
+              today
+                .clone()
+                .add(1, 'days')
+                .endOf('day'),
+            ),
+          );
+          break;
+        case DueDateFilterType.THIS_WEEK:
+          start = today
+            .clone()
+            .weekday(0)
+            .startOf('day');
+          end = today
+            .clone()
+            .weekday(6)
+            .endOf('day');
+          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
+          break;
+        case DueDateFilterType.NEXT_WEEK:
+          start = today
+            .clone()
+            .weekday(0)
+            .add(7, 'days')
+            .startOf('day');
+          end = today
+            .clone()
+            .weekday(6)
+            .add(7, 'days')
+            .endOf('day');
+          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
+          break;
+        case DueDateFilterType.ONE_WEEK:
+          start = today.clone().startOf('day');
+          end = today
+            .clone()
+            .add(7, 'days')
+            .endOf('day');
+          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
+          break;
+        case DueDateFilterType.TWO_WEEKS:
+          start = today.clone().startOf('day');
+          end = today
+            .clone()
+            .add(14, 'days')
+            .endOf('day');
+          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
+          break;
+        case DueDateFilterType.THREE_WEEKS:
+          start = today.clone().startOf('day');
+          end = today
+            .clone()
+            .add(21, 'days')
+            .endOf('day');
+          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
+          break;
+        default:
+          isFiltered = ShouldFilter.NOT_VALID;
+      }
+    }
+  }
+  if (filters.members.length !== 0) {
+    if (isFiltered === ShouldFilter.NO_FILTER) {
+      isFiltered = ShouldFilter.NOT_VALID;
+    }
+    for (const member of filters.members) {
+      if (task.assigned) {
+        if (task.assigned.findIndex(m => m.id === member.id) !== -1) {
+          isFiltered = ShouldFilter.VALID;
+        }
+      }
+    }
+  }
+  if (filters.labels.length !== 0) {
+    if (isFiltered === ShouldFilter.NO_FILTER) {
+      isFiltered = ShouldFilter.NOT_VALID;
+    }
+    for (const label of filters.labels) {
+      if (task.labels) {
+        if (task.labels.findIndex(m => m.projectLabel.id === label.id) !== -1) {
+          isFiltered = ShouldFilter.VALID;
+        }
+      }
+    }
+  }
+  if (isFiltered === ShouldFilter.NO_FILTER) {
+    return true;
+  }
+  if (isFiltered === ShouldFilter.VALID) {
+    return true;
+  }
+  return false;
+}

frontend/src/shared/components/Login/index.tsx

@@ -53,7 +53,7 @@ const Login = ({ onSubmit }: LoginProps) => {
                   ref={register({ required: 'Username is required' })}
                 />
                 <FormIcon>
-                  <User color="#c2c6dc" size={20} />
+                  <User width={20} height={20} />
                 </FormIcon>
               </FormLabel>
               {errors.username && <FormError>{errors.username.message}</FormError>}

frontend/src/shared/components/Member/index.tsx

@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import styled from 'styled-components';
 import TaskAssignee from 'shared/components/TaskAssignee';
 import { Checkmark } from 'shared/icons';
+import NOOP from 'shared/utils/noop';
 
 const CardCheckmark = styled(Checkmark)`
   position: absolute;
@@ -76,7 +77,7 @@ const Member: React.FC<MemberProps> = ({
         }
       }}
     >
-      <TaskAssignee onMemberProfile={() => {}} size={28} member={member} />
+      <TaskAssignee onMemberProfile={NOOP} size={28} member={member} />
       {showName && <CardMemberName>{member.fullName}</CardMemberName>}
       {showCheckmark && <CardCheckmark width={12} height={12} />}
     </CardMemberWrapper>

frontend/src/shared/components/MemberManager/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-
+import { Checkmark } from 'shared/icons';
+import Member from 'shared/components/Member';
 import {
   MemberName,
   ProfileIcon,
@@ -12,8 +13,6 @@ import {
   BoardMemberListItemContent,
   ActiveIconWrapper,
 } from './Styles';
-import { Checkmark } from 'shared/icons';
-import Member from 'shared/components/Member';
 
 type MemberManagerProps = {
   availableMembers: Array<TaskUser>;

frontend/src/shared/components/MiniProfile/index.tsx

@@ -160,7 +160,7 @@ const MiniProfile: React.FC<MiniProfileProps> = ({
           {user.role && user.role.code === 'owner' && (
             <>
               <Separator />
-              <WarningText>You can't change roles because there must be an owner.</WarningText>
+              <WarningText>You can not change roles because there must be an owner.</WarningText>
             </>
           )}
         </MiniProfileActions>

frontend/src/shared/components/NewProject/NewProject.stories.tsx

@@ -1,9 +1,8 @@
-import React, { useState, useRef, createRef } from 'react';
+import React from 'react';
 import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
 import NormalizeStyles from 'App/NormalizeStyles';
 import BaseStyles from 'App/BaseStyles';
-
+import NOOP from 'shared/utils/noop';
 import NewProject from '.';
 
 export default {
@@ -26,7 +25,7 @@ export const Default = () => {
         initialTeamID={null}
         onCreateProject={action('create project')}
         teams={[{ name: 'General', id: 'general', createdAt: '' }]}
-        onClose={() => {}}
+        onClose={NOOP}
       />
     </>
   );

frontend/src/shared/components/NewProject/index.tsx

@@ -4,6 +4,19 @@ import { mixin } from 'shared/utils/styles';
 import Select from 'react-select';
 import { ArrowLeft, Cross } from 'shared/icons';
 
+function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
+  if (isDisabled) {
+    return null;
+  }
+  if (isSelected) {
+    return mixin.darken('#262c49', 0.25);
+  }
+  if (isFocused) {
+    return mixin.darken('#262c49', 0.15);
+  }
+  return null;
+}
+
 const Overlay = styled.div`
   z-index: 10000;
   background: #262c49;
@@ -149,14 +162,8 @@ const colourStyles = {
   option: (styles: any, { data, isDisabled, isFocused, isSelected }: any) => {
     return {
       ...styles,
-      backgroundColor: isDisabled
-        ? null
-        : isSelected
-        ? mixin.darken('#262c49', 0.25)
-        : isFocused
-        ? mixin.darken('#262c49', 0.15)
-        : null,
-      color: isDisabled ? '#ccc' : isSelected ? '#fff' : '#c2c6dc',
+      backgroundColor: getBackgroundColor(isDisabled, isSelected, isFocused),
+      color: isDisabled ? '#ccc' : isSelected ? '#fff' : '#c2c6dc', // eslint-disable-line
       cursor: isDisabled ? 'not-allowed' : 'default',
       ':active': {
         ...styles[':active'],

frontend/src/shared/components/PopupMenu/PopupMenu.stories.tsx

@@ -1,381 +0,0 @@
-import React, { useState, useRef, createRef } from 'react';
-import { action } from '@storybook/addon-actions';
-import LabelColors from 'shared/constants/labelColors';
-import LabelManager from 'shared/components/PopupMenu/LabelManager';
-import LabelEditor from 'shared/components/PopupMenu/LabelEditor';
-import ListActions from 'shared/components/ListActions';
-import MemberManager from 'shared/components/MemberManager';
-import DueDateManager from 'shared/components/DueDateManager';
-import MiniProfile from 'shared/components/MiniProfile';
-
-import styled from 'styled-components';
-import produce from 'immer';
-import NormalizeStyles from 'App/NormalizeStyles';
-import BaseStyles from 'App/BaseStyles';
-
-import PopupMenu, { PopupProvider, usePopup, Popup } from '.';
-
-export default {
-  component: PopupMenu,
-  title: 'PopupMenu',
-  parameters: {
-    backgrounds: [
-      { name: 'white', value: '#ffffff', default: true },
-      { name: 'gray', value: '#f8f8f8' },
-    ],
-  },
-};
-const labelData: Array<ProjectLabel> = [
-  {
-    id: 'development',
-    name: 'Development',
-    createdDate: new Date().toString(),
-    labelColor: {
-      id: '1',
-      colorHex: LabelColors.BLUE,
-      name: 'blue',
-      position: 1,
-    },
-  },
-];
-
-const OpenLabelBtn = styled.span``;
-
-type TabProps = {
-  tab: number;
-};
-
-const LabelManagerEditor = () => {
-  const [labels, setLabels] = useState(labelData);
-  const [currentLabel, setCurrentLabel] = useState('');
-  const { setTab } = usePopup();
-  return (
-    <>
-      <Popup title="Labels" tab={0} onClose={action('on close')}>
-        <LabelManager
-          labels={labels}
-          onLabelCreate={() => {
-            setTab(2);
-          }}
-          onLabelEdit={labelId => {
-            setCurrentLabel(labelId);
-            setTab(1);
-          }}
-          onLabelToggle={labelId => {
-            setLabels(
-              produce(labels, draftState => {
-                const idx = labels.findIndex(label => label.id === labelId);
-                if (idx !== -1) {
-                  draftState[idx] = { ...draftState[idx] };
-                }
-              }),
-            );
-          }}
-        />
-      </Popup>
-      <Popup onClose={action('on close')} title="Edit label" tab={1}>
-        <LabelEditor
-          labelColors={[{ id: '1', colorHex: '#c2c6dc', position: 1, name: 'gray' }]}
-          label={labels.find(label => label.id === currentLabel) ?? null}
-          onLabelEdit={(_labelId, name, color) => {
-            setLabels(
-              produce(labels, draftState => {
-                const idx = labels.findIndex(label => label.id === currentLabel);
-                if (idx !== -1) {
-                  draftState[idx] = {
-                    ...draftState[idx],
-                    name,
-                    labelColor: {
-                      ...draftState[idx].labelColor,
-                      name: color.name ?? '',
-                      colorHex: color.colorHex,
-                    },
-                  };
-                }
-              }),
-            );
-            setTab(0);
-          }}
-        />
-      </Popup>
-      <Popup onClose={action('on close')} title="Create new label" tab={2}>
-        <LabelEditor
-          label={null}
-          labelColors={[{ id: '1', colorHex: '#c2c6dc', position: 1, name: 'gray' }]}
-          onLabelEdit={(_labelId, name, color) => {
-            setLabels([
-              ...labels,
-              {
-                id: name,
-                name,
-                createdDate: new Date().toString(),
-                labelColor: {
-                  id: color.id,
-                  colorHex: color.colorHex,
-                  name: color.name ?? '',
-                  position: 1,
-                },
-              },
-            ]);
-            setTab(0);
-          }}
-        />
-      </Popup>
-    </>
-  );
-};
-
-const OpenLabelsButton = () => {
-  const $buttonRef = createRef<HTMLButtonElement>();
-  const [currentLabel, setCurrentLabel] = useState('');
-  const [labels, setLabels] = useState(labelData);
-  const { showPopup, setTab } = usePopup();
-  return (
-    <OpenLabelBtn
-      ref={$buttonRef}
-      onClick={() => {
-        showPopup($buttonRef, <LabelManagerEditor />);
-      }}
-    >
-      Open
-    </OpenLabelBtn>
-  );
-};
-
-export const LabelsPopup = () => {
-  const [isPopupOpen, setPopupOpen] = useState(false);
-  return (
-    <PopupProvider>
-      <OpenLabelsButton />
-    </PopupProvider>
-  );
-};
-
-export const LabelsLabelEditor = () => {
-  const [isPopupOpen, setPopupOpen] = useState(false);
-  return (
-    <>
-      {isPopupOpen && (
-        <PopupMenu
-          onPrevious={action('on previous')}
-          title="Change Label"
-          top={10}
-          onClose={() => setPopupOpen(false)}
-          left={10}
-        >
-          <LabelEditor
-            label={labelData[0]}
-            onLabelEdit={action('label edit')}
-            labelColors={[{ id: '1', colorHex: '#c2c6dc', position: 1, name: 'gray' }]}
-          />
-        </PopupMenu>
-      )}
-      <button type="submit" onClick={() => setPopupOpen(true)}>
-        Open
-      </button>
-    </>
-  );
-};
-const initalState = { left: 0, top: 0, isOpen: false };
-
-export const ListActionsPopup = () => {
-  const $buttonRef = useRef<HTMLButtonElement>(null);
-  const [popupData, setPopupData] = useState(initalState);
-  return (
-    <>
-      {popupData.isOpen && (
-        <PopupMenu
-          title="List Actions"
-          top={popupData.top}
-          onClose={() => setPopupData(initalState)}
-          left={popupData.left}
-        >
-          <ListActions taskGroupID="1" onArchiveTaskGroup={action('archive task group')} />
-        </PopupMenu>
-      )}
-      <button
-        ref={$buttonRef}
-        type="submit"
-        onClick={() => {
-          if ($buttonRef && $buttonRef.current) {
-            const pos = $buttonRef.current.getBoundingClientRect();
-            setPopupData({
-              isOpen: true,
-              left: pos.left,
-              top: pos.top + pos.height + 10,
-            });
-          }
-        }}
-      >
-        Open
-      </button>
-    </>
-  );
-};
-
-export const MemberManagerPopup = () => {
-  const $buttonRef = useRef<HTMLButtonElement>(null);
-  const [popupData, setPopupData] = useState(initalState);
-  return (
-    <>
-      <NormalizeStyles />
-      <BaseStyles />
-      {popupData.isOpen && (
-        <PopupMenu title="Members" top={popupData.top} onClose={() => setPopupData(initalState)} left={popupData.left}>
-          <MemberManager
-            availableMembers={[
-              {
-                id: '1',
-                fullName: 'Jordan Knott',
-                profileIcon: { bgColor: null, url: null, initials: null },
-              },
-            ]}
-            activeMembers={[]}
-            onMemberChange={action('member change')}
-          />
-        </PopupMenu>
-      )}
-      <span
-        ref={$buttonRef}
-        onClick={() => {
-          if ($buttonRef && $buttonRef.current) {
-            const pos = $buttonRef.current.getBoundingClientRect();
-            setPopupData({
-              isOpen: true,
-              left: pos.left,
-              top: pos.top + pos.height + 10,
-            });
-          }
-        }}
-      >
-        Open
-      </span>
-    </>
-  );
-};
-
-export const DueDateManagerPopup = () => {
-  const $buttonRef = useRef<HTMLButtonElement>(null);
-  const [popupData, setPopupData] = useState(initalState);
-  return (
-    <>
-      <NormalizeStyles />
-      <BaseStyles />
-      {popupData.isOpen && (
-        <PopupMenu title="Due Date" top={popupData.top} onClose={() => setPopupData(initalState)} left={popupData.left}>
-          <DueDateManager
-            onRemoveDueDate={action('remove due date')}
-            task={{
-              id: '1',
-              taskGroup: { name: 'General', id: '1', position: 1 },
-              name: 'Hello, world',
-              position: 1,
-              labels: [
-                {
-                  id: 'soft-skills',
-                  assignedDate: new Date().toString(),
-                  projectLabel: {
-                    createdDate: new Date().toString(),
-                    id: 'label-soft-skills',
-                    name: 'Soft Skills',
-                    labelColor: {
-                      id: '1',
-                      name: 'white',
-                      colorHex: '#fff',
-                      position: 1,
-                    },
-                  },
-                },
-              ],
-              description: 'hello!',
-              assigned: [
-                {
-                  id: '1',
-                  profileIcon: { bgColor: null, url: null, initials: null },
-                  fullName: 'Jordan Knott',
-                },
-              ],
-            }}
-            onCancel={action('cancel')}
-            onDueDateChange={action('due date change')}
-          />
-        </PopupMenu>
-      )}
-      <span
-        style={{
-          width: '60px',
-          textAlign: 'center',
-          margin: '25px auto',
-          cursor: 'pointer',
-        }}
-        ref={$buttonRef}
-        onClick={() => {
-          if ($buttonRef && $buttonRef.current) {
-            const pos = $buttonRef.current.getBoundingClientRect();
-            setPopupData({
-              isOpen: true,
-              left: pos.left,
-              top: pos.top + pos.height + 10,
-            });
-          }
-        }}
-      >
-        Open
-      </span>
-    </>
-  );
-};
-
-export const MiniProfilePopup = () => {
-  const $buttonRef = useRef<HTMLButtonElement>(null);
-  const [popupData, setPopupData] = useState(initalState);
-  return (
-    <>
-      <NormalizeStyles />
-      <BaseStyles />
-      {popupData.isOpen && (
-        <PopupMenu
-          noHeader
-          title="Due Date"
-          top={popupData.top}
-          onClose={() => setPopupData(initalState)}
-          left={popupData.left}
-        >
-          <MiniProfile
-            user={{
-              id: '1',
-              fullName: 'Jordan Knott',
-              username: 'jordanthedev',
-              profileIcon: { url: null, bgColor: '#000', initials: 'JK' },
-            }}
-            bio="Stuff and things"
-            onRemoveFromTask={action('mini profile')}
-          />
-        </PopupMenu>
-      )}
-      <span
-        style={{
-          width: '60px',
-          textAlign: 'center',
-          margin: '25px auto',
-          cursor: 'pointer',
-          color: '#fff',
-          background: '#f00',
-        }}
-        ref={$buttonRef}
-        onClick={() => {
-          if ($buttonRef && $buttonRef.current) {
-            const pos = $buttonRef.current.getBoundingClientRect();
-            setPopupData({
-              isOpen: true,
-              left: pos.left,
-              top: pos.top + pos.height + 10,
-            });
-          }
-        }}
-      >
-        Open
-      </span>
-    </>
-  );
-};

frontend/src/shared/components/PopupMenu/Styles.ts

@@ -1,6 +1,5 @@
 import styled, { css } from 'styled-components';
 import { mixin } from 'shared/utils/styles';
-import Input from '../Input';
 import ControlledInput from 'shared/components/ControlledInput';
 
 export const Container = styled.div<{

frontend/src/shared/components/PopupMenu/index.tsx

@@ -2,6 +2,7 @@ import React, { useRef, createContext, RefObject, useState, useContext, useEffec
 import { Cross, AngleLeft } from 'shared/icons';
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
 import { createPortal } from 'react-dom';
+import NOOP from 'shared/utils/noop';
 import produce from 'immer';
 import {
   Container,
@@ -52,10 +53,10 @@ PopupContainer.defaultProps = {
 };
 
 const PopupContext = createContext<PopupContextState>({
-  show: () => {},
-  setTab: () => {},
+  show: NOOP,
+  setTab: NOOP,
   getCurrentTab: () => 0,
-  hide: () => {},
+  hide: NOOP,
 });
 
 export const usePopup = () => {

frontend/src/shared/components/QuickCardEditor/QuickCardEditor.stories.tsx

@@ -5,6 +5,7 @@ import CardComposer from 'shared/components/CardComposer';
 import LabelColors from 'shared/constants/labelColors';
 import List, { ListCards } from 'shared/components/List';
 import QuickCardEditor from 'shared/components/QuickCardEditor';
+import NOOP from 'shared/utils/noop';
 
 export default {
   component: QuickCardEditor,
@@ -71,7 +72,7 @@ export const Default = () => {
         isComposerOpen={false}
         onSaveName={action('on save name')}
         onOpenComposer={action('on open composer')}
-        onExtraMenuOpen={(taskGroupID, $targetRef) => {}}
+        onExtraMenuOpen={NOOP}
       >
         <ListCards>
           <Card
@@ -81,7 +82,7 @@ export const Default = () => {
             ref={$cardRef}
             title={task.name}
             onClick={action('on click')}
-            onContextMenu={e => {
+            onContextMenu={() => {
               setTarget($cardRef);
               setEditorOpen(true);
             }}
@@ -90,7 +91,7 @@ export const Default = () => {
             checklists={{ complete: 1, total: 4 }}
             dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
           />
-          <CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen={false} />
+          <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
         </ListCards>
       </List>
     </>

frontend/src/shared/components/Register/index.tsx

@@ -55,7 +55,7 @@ const Register = ({ onSubmit }: RegisterProps) => {
                   ref={register({ required: 'Full name is required' })}
                 />
                 <FormIcon>
-                  <User color="#c2c6dc" size={20} />
+                  <User width={20} height={20} />
                 </FormIcon>
               </FormLabel>
               {errors.username && <FormError>{errors.username.message}</FormError>}
@@ -68,7 +68,7 @@ const Register = ({ onSubmit }: RegisterProps) => {
                   ref={register({ required: 'Username is required' })}
                 />
                 <FormIcon>
-                  <User color="#c2c6dc" size={20} />
+                  <User width={20} height={20} />
                 </FormIcon>
               </FormLabel>
               {errors.username && <FormError>{errors.username.message}</FormError>}
@@ -84,7 +84,7 @@ const Register = ({ onSubmit }: RegisterProps) => {
                   })}
                 />
                 <FormIcon>
-                  <User color="#c2c6dc" size={20} />
+                  <User width={20} height={20} />
                 </FormIcon>
               </FormLabel>
               {errors.email && <FormError>{errors.email.message}</FormError>}
@@ -103,7 +103,7 @@ const Register = ({ onSubmit }: RegisterProps) => {
                   })}
                 />
                 <FormIcon>
-                  <User color="#c2c6dc" size={20} />
+                  <User width={20} height={20} />
                 </FormIcon>
               </FormLabel>
               {errors.initials && <FormError>{errors.initials.message}</FormError>}

frontend/src/shared/components/Select/index.tsx

@@ -3,6 +3,19 @@ import Select from 'react-select';
 import styled from 'styled-components';
 import { mixin } from 'shared/utils/styles';
 
+function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
+  if (isDisabled) {
+    return null;
+  }
+  if (isSelected) {
+    return mixin.darken('#262c49', 0.25);
+  }
+  if (isFocused) {
+    return mixin.darken('#262c49', 0.15);
+  }
+  return null;
+}
+
 const colourStyles = {
   control: (styles: any, data: any) => {
     return {
@@ -43,14 +56,8 @@ const colourStyles = {
   option: (styles: any, { data, isDisabled, isFocused, isSelected }: any) => {
     return {
       ...styles,
-      backgroundColor: isDisabled
-        ? null
-        : isSelected
-        ? mixin.darken('#262c49', 0.25)
-        : isFocused
-        ? mixin.darken('#262c49', 0.15)
-        : null,
-      color: isDisabled ? '#ccc' : isSelected ? '#fff' : '#c2c6dc',
+      backgroundColor: getBackgroundColor(isDisabled, isSelected, isFocused),
+      color: isDisabled ? '#ccc' : isSelected ? '#fff' : '#c2c6dc', // eslint-disable-line
       cursor: isDisabled ? 'not-allowed' : 'default',
       ':active': {
         ...styles[':active'],

frontend/src/shared/components/Settings/index.tsx

@@ -218,7 +218,7 @@ const NavItem: React.FC<NavItemProps> = ({ active, name, tab, onClick }) => {
       }}
     >
       <TabNavItemButton active={active}>
-        <User size={14} color={active ? 'rgba(115, 103, 240)' : '#c2c6dc'} />
+        <User width={20} height={20} />
         <TabNavItemSpan>{name}</TabNavItemSpan>
       </TabNavItemButton>
     </TabNavItem>

frontend/src/shared/components/TaskDetails/Styles.ts

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import TextareaAutosize from 'react-autosize-textarea/lib';
 import { mixin } from 'shared/utils/styles';
 import Button from 'shared/components/Button';
+import TaskAssignee from 'shared/components/TaskAssignee';
 
 export const TaskHeader = styled.div`
   padding: 21px 30px 0px;
@@ -385,4 +386,11 @@ export const MetaDetailTitle = styled.h3`
   overflow: hidden;
 `;
 
-export const MetaDetailContent = styled.div``;
+export const TaskMember = styled(TaskAssignee)``;
+
+export const MetaDetailContent = styled.div`
+  display: flex;
+  & ${TaskMember} {
+    margin-right: 4px;
+  }
+`;

frontend/src/shared/components/TaskDetails/index.tsx

@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import { Bin, Cross, Plus } from 'shared/icons';
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
 import ReactMarkdown from 'react-markdown';
+import styled from 'styled-components';
 
 import {
   isPositionChanged,
@@ -14,6 +15,7 @@ import TaskAssignee from 'shared/components/TaskAssignee';
 import moment from 'moment';
 
 import {
+  TaskMember,
   NoDueDateLabel,
   TaskDueDateButton,
   UnassignedLabel,
@@ -55,7 +57,6 @@ import {
   MetaDetailContent,
 } from './Styles';
 import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist';
-import styled from 'styled-components';
 
 const ChecklistContainer = styled.div``;
 
@@ -253,7 +254,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
         const newPosition = getNewDraggablePosition(afterDropDraggables, destination.index);
         onChecklistDrop({ ...droppedGroup, position: newPosition });
       } else {
-        throw { error: 'task group can not be found' };
+        throw new Error('task group can not be found');
       }
     } else {
       const targetChecklist = task.checklists.findIndex(
@@ -313,7 +314,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
         <TaskMeta>
           {task.taskGroup.name && (
             <TaskGroupLabel>
-              in list <TaskGroupLabelName>{task.taskGroup.name}</TaskGroupLabelName>
+              {`in list ${(<TaskGroupLabelName>{task.taskGroup.name}</TaskGroupLabelName>)}`}
             </TaskGroupLabel>
           )}
         </TaskMeta>
@@ -327,7 +328,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                 <MetaDetailContent>
                   {task.assigned &&
                     task.assigned.map(member => (
-                      <TaskAssignee key={member.id} size={32} member={member} onMemberProfile={onMemberProfile} />
+                      <TaskMember key={member.id} size={32} member={member} onMemberProfile={onMemberProfile} />
                     ))}
                   <TaskDetailsAddMemberIcon ref={$addMemberRef} onClick={() => onAddMember($addMemberRef)}>
                     <Plus size={16} color="#c2c6dc" />
@@ -441,9 +442,9 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                                                   complete={item.complete}
                                                   onDeleteItem={onDeleteItem}
                                                   onChangeName={onChangeItemName}
-                                                  onToggleItem={(itemID, complete) =>
-                                                    onToggleChecklistItem(item.id, complete)
-                                                  }
+                                                  onToggleItem={(itemID, complete) => {
+                                                    onToggleChecklistItem(item.id, complete);
+                                                  }}
                                                 />
                                               )}
                                             </Draggable>

frontend/src/shared/components/TopNavbar/Styles.ts

@@ -5,6 +5,7 @@ import Button from 'shared/components/Button';
 import { Taskcafe } from 'shared/icons';
 import { NavLink, Link } from 'react-router-dom';
 import TaskAssignee from 'shared/components/TaskAssignee';
+
 export const ProjectMember = styled(TaskAssignee)<{ zIndex: number }>`
   z-index: ${props => props.zIndex};
   position: relative;

frontend/src/shared/components/TopNavbar/index.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { Home, Star, Bell, AngleDown, BarChart, CheckCircle } from 'shared/icons';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import ProfileIcon from 'shared/components/ProfileIcon';
 import TaskAssignee from 'shared/components/TaskAssignee';
@@ -31,7 +32,6 @@ import {
   ProjectMember,
   ProjectMembers,
 } from './Styles';
-import { Link } from 'react-router-dom';
 
 const HomeDashboard = styled(Home)``;
 

frontend/src/shared/generated/graphql.tsx

@@ -162,6 +162,7 @@ export type Task = {
   description?: Maybe<Scalars['String']>;
   dueDate?: Maybe<Scalars['Time']>;
   complete: Scalars['Boolean'];
+  completedAt?: Maybe<Scalars['Time']>;
   assigned: Array<Member>;
   labels: Array<TaskLabel>;
   checklists: Array<TaskChecklist>;
@@ -1189,7 +1190,7 @@ export type FindTaskQuery = (
 
 export type TaskFieldsFragment = (
   { __typename?: 'Task' }
-  & Pick<Task, 'id' | 'name' | 'description' | 'dueDate' | 'complete' | 'position'>
+  & Pick<Task, 'id' | 'name' | 'description' | 'dueDate' | 'complete' | 'completedAt' | 'position'>
   & { badges: (
     { __typename?: 'TaskBadges' }
     & { checklist?: Maybe<(
@@ -2013,6 +2014,7 @@ export const TaskFieldsFragmentDoc = gql`
   description
   dueDate
   complete
+  completedAt
   position
   badges {
     checklist {

frontend/src/shared/graphql/fragments/task.ts

@@ -7,6 +7,7 @@ const TASK_FRAGMENT = gql`
     description
     dueDate
     complete
+    completedAt
     position
     badges {
       checklist {

frontend/src/shared/graphql/user/updateUserRole.ts

@@ -1,17 +1,17 @@
 import gql from 'graphql-tag';
 
 export const UPDATE_USER_ROLE_MUTATION = gql`
-mutation updateUserRole($userID: UUID!, $roleCode: RoleCode!) {
-  updateUserRole(input:{userID: $userID, roleCode:$roleCode}) {
-    user {
-      id
-      role {
-        code
-        name
+  mutation updateUserRole($userID: UUID!, $roleCode: RoleCode!) {
+    updateUserRole(input: { userID: $userID, roleCode: $roleCode }) {
+      user {
+        id
+        role {
+          code
+          name
+        }
       }
     }
   }
-}
 `;
 
 export default UPDATE_USER_ROLE_MUTATION;

frontend/src/shared/icons/Calendar.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const Calender: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 448 512">
+      <path d="M400 64h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V160h352v298c0 3.3-2.7 6-6 6z" />
+    </Icon>
+  );
+};
+
+export default Calender;

frontend/src/shared/icons/User.tsx

@@ -1,21 +1,12 @@
 import React from 'react';
+import Icon, { IconProps } from './Icon';
 
-type Props = {
-  size: number | string;
-  color: string;
-};
-
-const User = ({ size, color }: Props) => {
+const User: React.FC<IconProps> = ({ width = '16px', height = '16px', className, onClick }) => {
   return (
-    <svg fill={color} xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 16 16">
-      <path d="M9 11.041v-0.825c1.102-0.621 2-2.168 2-3.716 0-2.485 0-4.5-3-4.5s-3 2.015-3 4.5c0 1.548 0.898 3.095 2 3.716v0.825c-3.392 0.277-6 1.944-6 3.959h14c0-2.015-2.608-3.682-6-3.959z" />
-    </svg>
+    <Icon onClick={onClick} width={width} height={height} className={className} viewBox="0 0 448 512">
+      <path d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z" />
+    </Icon>
   );
 };
 
-User.defaultProps = {
-  size: 16,
-  color: '#000',
-};
-
 export default User;

frontend/src/shared/icons/index.ts

@@ -1,5 +1,6 @@
 import Cross from './Cross';
 import Cog from './Cog';
+import Calendar from './Calendar';
 import Sort from './Sort';
 import Filter from './Filter';
 import DoubleChevronUp from './DoubleChevronUp';
@@ -72,4 +73,5 @@ export {
   UserPlus,
   Crown,
   ToggleOn,
+  Calendar,
 };

frontend/src/shared/undraw/NoData.tsx

@@ -18,9 +18,9 @@ const AccessAccount = ({ width, height }: Props) => {
           gradientTransform="translate(-3.62 1.57)"
           gradientUnits="userSpaceOnUse"
         >
-          <stop offset="0" stop-color="gray" stop-opacity=".25" />
-          <stop offset=".54" stop-color="gray" stop-opacity=".12" />
-          <stop offset="1" stop-color="gray" stop-opacity=".1" />
+          <stop offset="0" stopColor="gray" stopOpacity=".25" />
+          <stop offset=".54" stopColor="gray" stopOpacity=".12" />
+          <stop offset="1" stopColor="gray" stopOpacity=".1" />
         </linearGradient>
         <linearGradient
           id="b"

frontend/src/shared/utils/noop.ts

@@ -0,0 +1 @@
+export default function NOOP() {} // eslint-disable-line @typescript-eslint/no-empty-function

frontend/src/types.d.ts

@@ -64,6 +64,7 @@ type Task = {
   position: number;
   dueDate?: string;
   complete?: boolean;
+  completedAt?: string | null;
   labels: TaskLabel[];
   description?: string | null;
   assigned?: Array<TaskUser>;

frontend/src/wdy.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-
-if (process.env.NODE_ENV === 'development') {
-  const whyDidYouRender = require('@welldone-software/why-did-you-render');
-  whyDidYouRender(React, {
-    trackAllPureComponents: true,
-  });
-}

frontend/tsconfig.json

@@ -12,6 +12,7 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
+    "downlevelIteration": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,

internal/commands/commands.go

@@ -56,7 +56,10 @@ func initConfig() {
 	viper.AutomaticEnv()
 
 	err := viper.ReadInConfig()
-        if _, ok := err.(viper.ConfigFileNotFoundError); !ok {
+	if err == nil {
+		return
+	}
+	if _, ok := err.(viper.ConfigFileNotFoundError); !ok {
 		panic(err)
 	}
 }

internal/commands/web.go

@@ -36,9 +36,18 @@ func newWebCmd() *cobra.Command {
 				viper.GetString("database.host"),
 				viper.GetString("database.name"),
 			)
-			db, err := sqlx.Connect("postgres", connection)
-			if err != nil {
-				log.Panic(err)
+			var db *sqlx.DB
+			var err error
+			retryNumber := 0
+			for i := 0; retryNumber <= 3; i++ {
+				retryNumber++
+				db, err = sqlx.Connect("postgres", connection)
+				if err == nil {
+					break
+				}
+				retryDuration := time.Duration(i*2) * time.Second
+				log.WithFields(log.Fields{"retryNumber": retryNumber, "retryDuration": retryDuration}).WithError(err).Error("issue connecting to database, retrying")
+				time.Sleep(retryDuration)
 			}
 			db.SetMaxOpenConns(25)
 			db.SetMaxIdleConns(25)

internal/db/models.go

@@ -72,6 +72,7 @@ type Task struct {
 	Description sql.NullString `json:"description"`
 	DueDate     sql.NullTime   `json:"due_date"`
 	Complete    bool           `json:"complete"`
+	CompletedAt sql.NullTime   `json:"completed_at"`
 }
 
 type TaskAssigned struct {

internal/db/query/task.sql

@@ -30,7 +30,7 @@ DELETE FROM task where task_group_id = $1;
 UPDATE task SET due_date = $2 WHERE task_id = $1 RETURNING *;
 
 -- name: SetTaskComplete :one
-UPDATE task SET complete = $2 WHERE task_id = $1 RETURNING *;
+UPDATE task SET complete = $2, completed_at = $3 WHERE task_id = $1 RETURNING *;
 
 -- name: GetProjectIDForTask :one
 SELECT project_id FROM task

internal/db/task.sql.go

@@ -13,7 +13,7 @@ import (
 
 const createTask = `-- name: CreateTask :one
 INSERT INTO task (task_group_id, created_at, name, position)
-  VALUES($1, $2, $3, $4) RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete
+  VALUES($1, $2, $3, $4) RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at
 `
 
 type CreateTaskParams struct {
@@ -40,6 +40,7 @@ func (q *Queries) CreateTask(ctx context.Context, arg CreateTaskParams) (Task, e
 		&i.Description,
 		&i.DueDate,
 		&i.Complete,
+		&i.CompletedAt,
 	)
 	return i, err
 }
@@ -66,7 +67,7 @@ func (q *Queries) DeleteTasksByTaskGroupID(ctx context.Context, taskGroupID uuid
 }
 
 const getAllTasks = `-- name: GetAllTasks :many
-SELECT task_id, task_group_id, created_at, name, position, description, due_date, complete FROM task
+SELECT task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at FROM task
 `
 
 func (q *Queries) GetAllTasks(ctx context.Context) ([]Task, error) {
@@ -87,6 +88,7 @@ func (q *Queries) GetAllTasks(ctx context.Context) ([]Task, error) {
 			&i.Description,
 			&i.DueDate,
 			&i.Complete,
+			&i.CompletedAt,
 		); err != nil {
 			return nil, err
 		}
@@ -115,7 +117,7 @@ func (q *Queries) GetProjectIDForTask(ctx context.Context, taskID uuid.UUID) (uu
 }
 
 const getTaskByID = `-- name: GetTaskByID :one
-SELECT task_id, task_group_id, created_at, name, position, description, due_date, complete FROM task WHERE task_id = $1
+SELECT task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at FROM task WHERE task_id = $1
 `
 
 func (q *Queries) GetTaskByID(ctx context.Context, taskID uuid.UUID) (Task, error) {
@@ -130,12 +132,13 @@ func (q *Queries) GetTaskByID(ctx context.Context, taskID uuid.UUID) (Task, erro
 		&i.Description,
 		&i.DueDate,
 		&i.Complete,
+		&i.CompletedAt,
 	)
 	return i, err
 }
 
 const getTasksForTaskGroupID = `-- name: GetTasksForTaskGroupID :many
-SELECT task_id, task_group_id, created_at, name, position, description, due_date, complete FROM task WHERE task_group_id = $1
+SELECT task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at FROM task WHERE task_group_id = $1
 `
 
 func (q *Queries) GetTasksForTaskGroupID(ctx context.Context, taskGroupID uuid.UUID) ([]Task, error) {
@@ -156,6 +159,7 @@ func (q *Queries) GetTasksForTaskGroupID(ctx context.Context, taskGroupID uuid.U
 			&i.Description,
 			&i.DueDate,
 			&i.Complete,
+			&i.CompletedAt,
 		); err != nil {
 			return nil, err
 		}
@@ -171,16 +175,17 @@ func (q *Queries) GetTasksForTaskGroupID(ctx context.Context, taskGroupID uuid.U
 }
 
 const setTaskComplete = `-- name: SetTaskComplete :one
-UPDATE task SET complete = $2 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete
+UPDATE task SET complete = $2, completed_at = $3 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at
 `
 
 type SetTaskCompleteParams struct {
-	TaskID   uuid.UUID `json:"task_id"`
-	Complete bool      `json:"complete"`
+	TaskID      uuid.UUID    `json:"task_id"`
+	Complete    bool         `json:"complete"`
+	CompletedAt sql.NullTime `json:"completed_at"`
 }
 
 func (q *Queries) SetTaskComplete(ctx context.Context, arg SetTaskCompleteParams) (Task, error) {
-	row := q.db.QueryRowContext(ctx, setTaskComplete, arg.TaskID, arg.Complete)
+	row := q.db.QueryRowContext(ctx, setTaskComplete, arg.TaskID, arg.Complete, arg.CompletedAt)
 	var i Task
 	err := row.Scan(
 		&i.TaskID,
@@ -191,12 +196,13 @@ func (q *Queries) SetTaskComplete(ctx context.Context, arg SetTaskCompleteParams
 		&i.Description,
 		&i.DueDate,
 		&i.Complete,
+		&i.CompletedAt,
 	)
 	return i, err
 }
 
 const updateTaskDescription = `-- name: UpdateTaskDescription :one
-UPDATE task SET description = $2 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete
+UPDATE task SET description = $2 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at
 `
 
 type UpdateTaskDescriptionParams struct {
@@ -216,12 +222,13 @@ func (q *Queries) UpdateTaskDescription(ctx context.Context, arg UpdateTaskDescr
 		&i.Description,
 		&i.DueDate,
 		&i.Complete,
+		&i.CompletedAt,
 	)
 	return i, err
 }
 
 const updateTaskDueDate = `-- name: UpdateTaskDueDate :one
-UPDATE task SET due_date = $2 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete
+UPDATE task SET due_date = $2 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at
 `
 
 type UpdateTaskDueDateParams struct {
@@ -241,12 +248,13 @@ func (q *Queries) UpdateTaskDueDate(ctx context.Context, arg UpdateTaskDueDatePa
 		&i.Description,
 		&i.DueDate,
 		&i.Complete,
+		&i.CompletedAt,
 	)
 	return i, err
 }
 
 const updateTaskLocation = `-- name: UpdateTaskLocation :one
-UPDATE task SET task_group_id = $2, position = $3 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete
+UPDATE task SET task_group_id = $2, position = $3 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at
 `
 
 type UpdateTaskLocationParams struct {
@@ -267,12 +275,13 @@ func (q *Queries) UpdateTaskLocation(ctx context.Context, arg UpdateTaskLocation
 		&i.Description,
 		&i.DueDate,
 		&i.Complete,
+		&i.CompletedAt,
 	)
 	return i, err
 }
 
 const updateTaskName = `-- name: UpdateTaskName :one
-UPDATE task SET name = $2 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete
+UPDATE task SET name = $2 WHERE task_id = $1 RETURNING task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at
 `
 
 type UpdateTaskNameParams struct {
@@ -292,6 +301,7 @@ func (q *Queries) UpdateTaskName(ctx context.Context, arg UpdateTaskNameParams)
 		&i.Description,
 		&i.DueDate,
 		&i.Complete,
+		&i.CompletedAt,
 	)
 	return i, err
 }

internal/graph/schema.graphqls

@@ -129,6 +129,7 @@ type Task {
   description: String
   dueDate: Time
   complete: Boolean!
+  completedAt: Time
   assigned: [Member!]!
   labels: [TaskLabel!]!
   checklists: [TaskChecklist!]!
@@ -256,7 +257,6 @@ type DeleteProjectPayload {
   project: Project!
 }
 
-
 extend type Mutation {
   createProjectLabel(input: NewProjectLabel!):
     ProjectLabel! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
@@ -338,17 +338,26 @@ type UpdateProjectMemberRolePayload {
 }
 
 extend type Mutation {
-  createTask(input: NewTask!): Task!
-  deleteTask(input: DeleteTaskInput!): DeleteTaskPayload!
+  createTask(input: NewTask!):
+    Task! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  deleteTask(input: DeleteTaskInput!):
+    DeleteTaskPayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
 
-  updateTaskDescription(input: UpdateTaskDescriptionInput!): Task!
-  updateTaskLocation(input: NewTaskLocation!): UpdateTaskLocationPayload!
-  updateTaskName(input: UpdateTaskName!): Task!
-  setTaskComplete(input: SetTaskComplete!): Task!
-  updateTaskDueDate(input: UpdateTaskDueDate!): Task!
+  updateTaskDescription(input: UpdateTaskDescriptionInput!):
+    Task! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  updateTaskLocation(input: NewTaskLocation!):
+    UpdateTaskLocationPayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  updateTaskName(input: UpdateTaskName!):
+    Task! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  setTaskComplete(input: SetTaskComplete!):
+    Task! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  updateTaskDueDate(input: UpdateTaskDueDate!):
+    Task! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
 
-  assignTask(input: AssignTaskInput): Task!
-  unassignTask(input: UnassignTaskInput): Task!
+  assignTask(input: AssignTaskInput):
+    Task! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  unassignTask(input: UnassignTaskInput):
+    Task! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
 }
 
 input NewTask {
@@ -407,16 +416,25 @@ input UpdateTaskName {
 }
 
 extend type Mutation {
-  createTaskChecklist(input: CreateTaskChecklist!): TaskChecklist!
-  deleteTaskChecklist(input: DeleteTaskChecklist!): DeleteTaskChecklistPayload!
-  updateTaskChecklistName(input: UpdateTaskChecklistName!): TaskChecklist!
-  createTaskChecklistItem(input: CreateTaskChecklistItem!): TaskChecklistItem!
-  updateTaskChecklistItemName(input: UpdateTaskChecklistItemName!): TaskChecklistItem!
-  setTaskChecklistItemComplete(input: SetTaskChecklistItemComplete!): TaskChecklistItem!
-  deleteTaskChecklistItem(input: DeleteTaskChecklistItem!): DeleteTaskChecklistItemPayload!
+  createTaskChecklist(input: CreateTaskChecklist!):
+    TaskChecklist! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  deleteTaskChecklist(input: DeleteTaskChecklist!):
+    DeleteTaskChecklistPayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  updateTaskChecklistName(input: UpdateTaskChecklistName!):
+    TaskChecklist! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  createTaskChecklistItem(input: CreateTaskChecklistItem!):
+    TaskChecklistItem! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  updateTaskChecklistItemName(input: UpdateTaskChecklistItemName!):
+    TaskChecklistItem! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  setTaskChecklistItemComplete(input: SetTaskChecklistItemComplete!):
+    TaskChecklistItem! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  deleteTaskChecklistItem(input: DeleteTaskChecklistItem!):
+    DeleteTaskChecklistItemPayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  updateTaskChecklistLocation(input: UpdateTaskChecklistLocation!):
+    UpdateTaskChecklistLocationPayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  updateTaskChecklistItemLocation(input: UpdateTaskChecklistItemLocation!):
+    UpdateTaskChecklistItemLocationPayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
 
-  updateTaskChecklistLocation(input: UpdateTaskChecklistLocation!): UpdateTaskChecklistLocationPayload!
-  updateTaskChecklistItemLocation(input: UpdateTaskChecklistItemLocation!): UpdateTaskChecklistItemLocationPayload!
 }
 
 input UpdateTaskChecklistItemLocation {
@@ -484,10 +502,14 @@ type DeleteTaskChecklistPayload {
 }
 
 extend type Mutation {
-  createTaskGroup(input: NewTaskGroup!): TaskGroup!
-  updateTaskGroupLocation(input: NewTaskGroupLocation!): TaskGroup!
-  updateTaskGroupName(input: UpdateTaskGroupName!): TaskGroup!
-  deleteTaskGroup(input: DeleteTaskGroupInput!): DeleteTaskGroupPayload!
+  createTaskGroup(input: NewTaskGroup!):
+    TaskGroup! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  updateTaskGroupLocation(input: NewTaskGroupLocation!):
+    TaskGroup! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  updateTaskGroupName(input: UpdateTaskGroupName!):
+    TaskGroup! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  deleteTaskGroup(input: DeleteTaskGroupInput!):
+    DeleteTaskGroupPayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
 }
 
 input NewTaskGroupLocation {
@@ -534,9 +556,13 @@ type ToggleTaskLabelPayload {
   task: Task!
 }
 extend type Mutation {
-  addTaskLabel(input: AddTaskLabelInput): Task!
-  removeTaskLabel(input: RemoveTaskLabelInput): Task!
-  toggleTaskLabel(input: ToggleTaskLabelInput!): ToggleTaskLabelPayload!
+  addTaskLabel(input: AddTaskLabelInput):
+    Task! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  removeTaskLabel(input: RemoveTaskLabelInput):
+    Task! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  toggleTaskLabel(input: ToggleTaskLabelInput!):
+    ToggleTaskLabelPayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+
 }
 
 extend type Mutation {
@@ -562,10 +588,12 @@ type DeleteTeamPayload {
 }
 
 extend type Mutation {
-  createTeamMember(input: CreateTeamMember!): CreateTeamMemberPayload! @hasRole(roles: [ADMIN], level: TEAM, type: TEAM)
+  createTeamMember(input: CreateTeamMember!):
+    CreateTeamMemberPayload! @hasRole(roles: [ADMIN], level: TEAM, type: TEAM)
   updateTeamMemberRole(input: UpdateTeamMemberRole!):
     UpdateTeamMemberRolePayload! @hasRole(roles: [ADMIN], level: TEAM, type: TEAM)
-  deleteTeamMember(input: DeleteTeamMember!): DeleteTeamMemberPayload! @hasRole(roles: [ADMIN], level: TEAM, type: TEAM)
+  deleteTeamMember(input: DeleteTeamMember!):
+    DeleteTeamMemberPayload! @hasRole(roles: [ADMIN], level: TEAM, type: TEAM)
 
 }
 

internal/graph/schema.resolvers.go

@@ -180,13 +180,18 @@ func (r *mutationResolver) UpdateProjectMemberRole(ctx context.Context, input Up
 
 func (r *mutationResolver) CreateTask(ctx context.Context, input NewTask) (*db.Task, error) {
 	taskGroupID, err := uuid.Parse(input.TaskGroupID)
-	createdAt := time.Now().UTC()
 	if err != nil {
+		log.WithError(err).Error("issue while parsing task group ID")
 		return &db.Task{}, err
 	}
-
+	createdAt := time.Now().UTC()
+	log.WithFields(log.Fields{"positon": input.Position, "taskGroupID": taskGroupID}).Info("creating task")
 	task, err := r.Repository.CreateTask(ctx, db.CreateTaskParams{taskGroupID, createdAt, input.Name, input.Position})
-	return &task, err
+	if err != nil {
+		log.WithError(err).Error("issue while creating task")
+		return &db.Task{}, err
+	}
+	return &task, nil
 }
 
 func (r *mutationResolver) DeleteTask(ctx context.Context, input DeleteTaskInput) (*DeleteTaskPayload, error) {
@@ -230,7 +235,8 @@ func (r *mutationResolver) UpdateTaskName(ctx context.Context, input UpdateTaskN
 }
 
 func (r *mutationResolver) SetTaskComplete(ctx context.Context, input SetTaskComplete) (*db.Task, error) {
-	task, err := r.Repository.SetTaskComplete(ctx, db.SetTaskCompleteParams{TaskID: input.TaskID, Complete: input.Complete})
+	completedAt := time.Now().UTC()
+	task, err := r.Repository.SetTaskComplete(ctx, db.SetTaskCompleteParams{TaskID: input.TaskID, Complete: input.Complete, CompletedAt: sql.NullTime{Time: completedAt, Valid: true}})
 	if err != nil {
 		return &db.Task{}, err
 	}
@@ -1036,6 +1042,13 @@ func (r *taskResolver) DueDate(ctx context.Context, obj *db.Task) (*time.Time, e
 	return nil, nil
 }
 
+func (r *taskResolver) CompletedAt(ctx context.Context, obj *db.Task) (*time.Time, error) {
+	if obj.CompletedAt.Valid {
+		return &obj.CompletedAt.Time, nil
+	}
+	return nil, nil
+}
+
 func (r *taskResolver) Assigned(ctx context.Context, obj *db.Task) ([]Member, error) {
 	taskMemberLinks, err := r.Repository.GetAssignedMembersForTask(ctx, obj.TaskID)
 	taskMembers := []Member{}

internal/graph/schema/_models.gql

@@ -129,6 +129,7 @@ type Task {
   description: String
   dueDate: Time
   complete: Boolean!
+  completedAt: Time
   assigned: [Member!]!
   labels: [TaskLabel!]!
   checklists: [TaskChecklist!]!

magefile.go

@@ -28,6 +28,21 @@ func (Frontend) Install() error {
 	return sh.RunV("yarn", "--cwd", "frontend", "install")
 }
 
+// Eslint runs eslint on the frontend source
+func (Frontend) Eslint() error {
+	return sh.RunV("yarn", "--cwd", "frontend", "lint")
+}
+
+// Tsc runs tsc on the frontend source
+func (Frontend) Tsc() error {
+	return sh.RunV("yarn", "--cwd", "frontend", "tsc")
+}
+
+// Lint the frontend source
+func (Frontend) Lint() {
+	mg.SerialDeps(Frontend.Eslint, Frontend.Tsc)
+}
+
 // Build the React frontend
 func (Frontend) Build() error {
 	return sh.RunV("yarn", "--cwd", "frontend", "build")

migrations/0051_add-completed_at-to-task-table.up.sql

@@ -0,0 +1,4 @@
+ALTER TABLE task ADD COLUMN completed_at timestamptz;
+UPDATE task as t1 SET completed_at = NOW()
+  FROM task as t2
+  WHERE t1.task_id = t2.task_id AND t1.complete = true;