feat: implement task group actions

- allow sorting specifc task groups
- duplicate task group
- delete all tasks in task group

.github/ISSUE_TEMPLATE/bug_report.md

@@ -18,8 +18,6 @@ If applicable, add screenshots to help explain your problem.
 **Additional context**
 Add any other context about the problem here.
 
-Please send the Taskcafe web service logs if applicable.
-
 <!--
 
 Please read the contributing guide before working on any new pull requests!

CHANGELOG.md

@@ -9,7 +9,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Task sorting & filtering
 - Redesigned the Task Details UI
-- Implement task group actions (duplicate/delete all tasks/sort)
 
 ### Fixed
 - removed CORS middleware to fix security issue

CONTRIBUTING.md

@@ -32,10 +32,6 @@ The `description` is a decriptive summary of the change the PR will make.
 - One PR per fix or feature
 - Setup & install [pre-commit hooks](https://pre-commit.com/#install) then install the hooks `pre-commit install && pre-commit install --hook-type commit-msg`
 
-### Unwanted PRs
-
-- Please do not submit pull requests containing only typo fixes, fixed spelling mistakes, or minor wording changes.
-
 ### Git Commit Message Style
 
 This project uses the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) format.

README.md

@@ -9,14 +9,11 @@
     <img alt="Releases" src="https://img.shields.io/github/v/release/JordanKnott/taskcafe" />
   </a>
   <a href="https://hub.docker.com/repository/docker/taskcafe/taskcafe">
-    <img alt="Dockerhub" src="https://img.shields.io/docker/v/taskcafe/taskcafe?label=docker&sort=semver" />
+    <img alt="Dockerhub" src="https://img.shields.io/docker/v/taskcafe/taskcafe?label=docker" />
   </a>
   <a href="https://goreportcard.com/report/github.com/JordanKnott/taskcafe">
     <img alt="Go Report Card" src="https://goreportcard.com/badge/github.com/JordanKnott/taskcafe" />
   </a>
-  <a href="">
-    <img alt="Docker pulls" src="https://img.shields.io/docker/pulls/taskcafe/taskcafe" />
-  </a>
 </p>
 <p align="center">
 Was this project useful? Please consider <a href="https://www.buymeacoffee.com/jordanknott">donating</a> to help me improve it!
@@ -24,8 +21,6 @@ Was this project useful? Please consider <a href="https://www.buymeacoffee.com/j
 
 **Please note that this project is still in active development. Some options may not work yet! For updates on development, join the Discord server**
 
-![Taskcafe](./.github/taskcafe_preview.png)
-
 ## Features
 
 Currently Taskcafe only offers basic task tracking through a Kanban board.

conf/air.toml

@@ -1,47 +0,0 @@
-# Config file for [Air](https://github.com/cosmtrek/air) in TOML format
-
-# Working directory
-# . or absolute path, please note that the directories following must be under root.
-root = "."
-tmp_dir = "tmp"
-
-[build]
-# Just plain old shell command. You could use `make` as well.
-cmd = "go build -o ./dist/taskcafe cmd/taskcafe/main.go"
-# Binary file yields from `cmd`.
-bin = "dist/taskcafe"
-# Customize binary.
-full_bin = "./dist/taskcafe web"
-# Watch these filename extensions.
-include_ext = ["go"]
-# Ignore these filename extensions or directories.
-exclude_dir = ["dist", "frontend"]
-# Watch these directories if you specified.
-include_dir = []
-# Exclude files.
-exclude_file = []
-# This log file places in your tmp_dir.
-log = "air.log"
-# It's not necessary to trigger build each time file changes if it's too frequent.
-delay = 1000 # ms
-# Stop running old binary when build errors occur.
-stop_on_error = true
-# Send Interrupt signal before killing process (windows does not support this feature)
-send_interrupt = false
-# Delay after sending Interrupt signal
-kill_delay = 500 # ms
-
-[log]
-# Show log time
-time = false
-
-[color]
-# Customize each part's color. If no color found, use the raw app log.
-main = "magenta"
-watcher = "cyan"
-build = "yellow"
-runner = "green"
-
-[misc]
-# Delete tmp directory on exit
-clean_on_exit = true

conf/taskcafe.example.toml

@@ -1,5 +1,5 @@
-[server]
+[general]
-hostname = '0.0.0.0:3333'
+host = '0.0.0.0:3333'
 
 [email_notifications]
 enabled = true

docker-compose.dev.yml

@@ -12,7 +12,7 @@ services:
     volumes:
       - taskcafe-postgres:/var/lib/postgresql/data
     ports:
-      - 8855:5432
+      - 5432:5432
   mailhog:
     image: mailhog/mailhog:latest
     restart: always

frontend/.eslintrc.json

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

frontend/package.json

@@ -6,6 +6,14 @@
     "@apollo/client": "^3.0.0-rc.8",
     "@apollo/react-common": "^3.1.4",
     "@apollo/react-hooks": "^3.1.3",
+    "@fortawesome/fontawesome-svg-core": "^1.2.27",
+    "@fortawesome/free-brands-svg-icons": "^5.12.1",
+    "@fortawesome/free-regular-svg-icons": "^5.12.1",
+    "@fortawesome/free-solid-svg-icons": "^5.12.1",
+    "@fortawesome/react-fontawesome": "^0.1.8",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
     "@types/axios": "^0.14.0",
     "@types/color": "^3.0.1",
     "@types/date-fns": "^2.6.0",
@@ -33,13 +41,13 @@
     "axios-auth-refresh": "^2.2.7",
     "color": "^3.1.2",
     "date-fns": "^2.14.0",
-    "dayjs": "^1.9.1",
     "graphql": "^15.0.0",
     "graphql-tag": "^2.10.3",
     "history": "^4.10.1",
     "immer": "^6.0.3",
     "jwt-decode": "^2.2.0",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.15",
+    "moment": "^2.24.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-autosize-textarea": "^7.0.0",
@@ -52,9 +60,9 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0",
     "react-select": "^3.1.0",
+    "rich-markdown-editor": "^10.6.5",
     "react-timeago": "^4.4.0",
     "react-toastify": "^6.0.8",
-    "rich-markdown-editor": "^10.6.5",
     "styled-components": "^5.0.1",
     "typescript": "~3.7.2"
   },

frontend/src/Admin/index.tsx

@@ -5,7 +5,6 @@ import GlobalTopNavbar from 'App/TopNavbar';
 import {
   useUsersQuery,
   useDeleteUserAccountMutation,
-  useDeleteInvitedUserAccountMutation,
   useCreateUserAccountMutation,
   UsersDocument,
   UsersQuery,
@@ -172,22 +171,11 @@ const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
 
 const AdminRoute = () => {
   useEffect(() => {
-    document.title = 'Admin | Taskcafé';
+    document.title = 'Taskcafé | Admin';
   }, []);
   const { loading, data } = useUsersQuery();
   const { showPopup, hidePopup } = usePopup();
   const { user } = useCurrentUser();
-  const [deleteInvitedUser] = useDeleteInvitedUserAccountMutation({
-    update: (client, response) => {
-      updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
-        produce(cache, draftCache => {
-          draftCache.invitedUsers = cache.invitedUsers.filter(
-            u => u.id !== response.data.deleteInvitedUserAccount.invitedUser.id,
-          );
-        }),
-      );
-    },
-  });
   const [deleteUser] = useDeleteUserAccountMutation({
     update: (client, response) => {
       updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
@@ -227,16 +215,11 @@ const AdminRoute = () => {
         <Admin
           initialTab={0}
           users={data.users}
-          invitedUsers={data.invitedUsers}
           canInviteUser={user.roles.org === 'admin'}
           onInviteUser={NOOP}
           onUpdateUserPassword={() => {
             hidePopup();
           }}
-          onDeleteInvitedUser={invitedUserID => {
-            deleteInvitedUser({ variables: { invitedUserID } });
-            hidePopup();
-          }}
           onDeleteUser={(userID, newOwnerID) => {
             deleteUser({ variables: { userID, newOwnerID } });
             hidePopup();

frontend/src/App/Routes.tsx

@@ -5,7 +5,6 @@ import * as H from 'history';
 import Dashboard from 'Dashboard';
 import Admin from 'Admin';
 import Projects from 'Projects';
-import Outline from 'Outline';
 import Project from 'Projects/Project';
 import Teams from 'Teams';
 import Login from 'Auth';
@@ -37,7 +36,6 @@ const Routes: React.FC<RoutesProps> = () => (
       <Route path="/teams/:teamID" component={Teams} />
       <Route path="/profile" component={Profile} />
       <Route path="/admin" component={Admin} />
-      <Route path="/outline" component={Outline} />
     </MainContent>
   </Switch>
 );

frontend/src/App/TopNavbar.tsx

@@ -137,7 +137,7 @@ const ProjectFinder = () => {
       return {
         id: team.id,
         name: team.name,
-        projects: projects.filter(project => project.team && project.team.id === team.id),
+        projects: projects.filter(project => project.team.id === team.id),
       };
     });
     return (
@@ -230,12 +230,10 @@ type GlobalTopNavbarProps = {
   menuType?: Array<MenuItem>;
   onChangeRole?: (userID: string, roleCode: RoleCode) => void;
   projectMembers?: null | Array<TaskUser>;
-  projectInvitedMembers?: null | Array<InvitedUser>;
   onSaveProjectName?: (projectName: string) => void;
   onInviteUser?: ($target: React.RefObject<HTMLElement>) => void;
   onSetTab?: (tab: number) => void;
   onRemoveFromBoard?: (userID: string) => void;
-  onRemoveInvitedFromBoard?: (email: string) => void;
 };
 
 const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
@@ -248,10 +246,8 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
   name,
   popupContent,
   projectMembers,
-  projectInvitedMembers,
   onInviteUser,
   onSaveProjectName,
-  onRemoveInvitedFromBoard,
   onRemoveFromBoard,
 }) => {
   const { user, setUserRoles, setUser } = useCurrentUser();
@@ -337,34 +333,6 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
     return null;
   }
   const userIsTeamOrProjectAdmin = user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID);
-  const onInvitedMemberProfile = ($targetRef: React.RefObject<HTMLElement>, email: string) => {
-    const member = projectInvitedMembers ? projectInvitedMembers.find(u => u.email === email) : null;
-    if (member) {
-      showPopup(
-        $targetRef,
-        <MiniProfile
-          onRemoveFromBoard={() => {
-            if (onRemoveInvitedFromBoard) {
-              onRemoveInvitedFromBoard(member.email);
-            }
-          }}
-          invited
-          user={{
-            id: member.email,
-            fullName: member.email,
-            bio: 'Invited',
-            profileIcon: {
-              bgColor: '#000',
-              url: null,
-              initials: member.email.charAt(0),
-            },
-          }}
-          bio=""
-        />,
-      );
-    }
-  };
-
   const onMemberProfile = ($targetRef: React.RefObject<HTMLElement>, memberID: string) => {
     const member = projectMembers ? projectMembers.find(u => u.id === memberID) : null;
     const warning =
@@ -414,7 +382,6 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
         canEditProjectName={userIsTeamOrProjectAdmin}
         canInviteUser={userIsTeamOrProjectAdmin}
         onMemberProfile={onMemberProfile}
-        onInvitedMemberProfile={onInvitedMemberProfile}
         onInviteUser={onInviteUser}
         onChangeRole={onChangeRole}
         onChangeProjectOwner={onChangeProjectOwner}
@@ -425,7 +392,6 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
           history.push('/');
         }}
         projectMembers={projectMembers}
-        projectInvitedMembers={projectInvitedMembers}
         onProfileClick={onProfileClick}
         onSaveName={onSaveProjectName}
         onOpenSettings={onOpenSettings}

frontend/src/Install/index.tsx

@@ -59,7 +59,7 @@ const Install = () => {
                   } else {
                     const response: RefreshTokenResponse = await x.data;
                     const { accessToken: newToken, isInstalled } = response;
-                    const claims: JWTToken = jwtDecode(newToken);
+                    const claims: JWTToken = jwtDecode(accessToken);
                     const currentUser = {
                       id: claims.userId,
                       roles: {
@@ -69,7 +69,7 @@ const Install = () => {
                       },
                     };
                     setUser(currentUser);
-                    setAccessToken(newToken);
+                    setAccessToken(accessToken);
                     if (!isInstalled) {
                       history.replace('/install');
                     }

frontend/src/Outline/DragDebug.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { DragDebugWrapper } from './Styles';
-
-type DragDebugProps = {
-  zone: ImpactZone | null;
-  depthTarget: number;
-  draggedNodes: Array<string> | null;
-};
-
-const DragDebug: React.FC<DragDebugProps> = ({ zone, depthTarget, draggedNodes }) => {
-  let aboveID = null;
-  let belowID = null;
-  if (zone) {
-    aboveID = zone.above ? zone.above.node.id : null;
-    belowID = zone.below ? zone.below.node.id : null;
-  }
-  return (
-    <DragDebugWrapper>{`aboveID=${aboveID} / belowID=${belowID} / depthTarget=${depthTarget} draggedNodes=${
-      draggedNodes ? draggedNodes.toString() : null
-    }`}</DragDebugWrapper>
-  );
-};
-
-export default DragDebug;

frontend/src/Outline/DragIndicator.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { getDimensions } from './utils';
-import { DragIndicatorBar } from './Styles';
-
-type DragIndicatorProps = {
-  container: React.RefObject<HTMLDivElement>;
-  zone: ImpactZone;
-  depthTarget: number;
-};
-
-const DragIndicator: React.FC<DragIndicatorProps> = ({ container, zone, depthTarget }) => {
-  let top = 0;
-  let width = 0;
-  if (zone.below === null) {
-    if (zone.above) {
-      const entry = getDimensions(zone.above.dimensions.entry);
-      const children = getDimensions(zone.above.dimensions.children);
-      if (children) {
-        top = children.top;
-        width = children.width - depthTarget * 35;
-      } else if (entry) {
-        top = entry.bottom;
-        width = entry.width - depthTarget * 35;
-      }
-    }
-  } else if (zone.below) {
-    const entry = getDimensions(zone.below.dimensions.entry);
-    if (entry) {
-      top = entry.top;
-      width = entry.width - depthTarget * 35;
-    }
-  }
-  let left = 0;
-  if (container && container.current) {
-    left = container.current.getBoundingClientRect().left + (depthTarget - 1) * 35;
-    width = container.current.getBoundingClientRect().width - depthTarget * 35;
-  }
-  return <DragIndicatorBar top={top} left={left} width={width} />;
-};
-
-export default DragIndicator;

frontend/src/Outline/Dragger.tsx

@@ -1,242 +0,0 @@
-import React, { useRef, useCallback, useState, useMemo, useEffect } from 'react';
-import { Dot } from 'shared/icons';
-import styled from 'styled-components';
-import {
-  findNextDraggable,
-  getDimensions,
-  getTargetDepth,
-  getNodeAbove,
-  getBelowParent,
-  findNodeAbove,
-  getNodeOver,
-  getLastChildInBranch,
-  findNodeDepth,
-} from './utils';
-import { useDrag } from './useDrag';
-
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 9px;
-  background: rgba(${p => p.theme.colors.primary});
-  svg {
-    fill: rgba(${p => p.theme.colors.text.primary});
-    stroke: rgba(${p => p.theme.colors.text.primary});
-  }
-`;
-
-type DraggerProps = {
-  container: React.RefObject<HTMLDivElement>;
-  draggedNodes: { nodes: Array<string>; first?: OutlineNode | null };
-  isDragging: boolean;
-  onDragEnd: (zone: ImpactZone) => void;
-  initialPos: { x: number; y: number };
-};
-
-const Dragger: React.FC<DraggerProps> = ({ draggedNodes, container, onDragEnd, isDragging, initialPos }) => {
-  const [pos, setPos] = useState<{ x: number; y: number }>(initialPos);
-  const { outline, impact, setImpact } = useDrag();
-  const $handle = useRef<HTMLDivElement>(null);
-  const handleMouseUp = useCallback(() => {
-    onDragEnd(impact ? impact.zone : { below: null, above: null });
-  }, [impact]);
-  const handleMouseMove = useCallback(
-    e => {
-      e.preventDefault();
-      const { clientX, clientY, pageX, pageY } = e;
-      setPos({ x: clientX, y: clientY });
-      const { curDepth, curPosition, curDraggable } = getNodeOver({ x: clientX, y: clientY }, outline.current);
-      let depthTarget: number = 0;
-      let aboveNode: null | OutlineNode = null;
-      let belowNode: null | OutlineNode = null;
-
-      if (curPosition === 'before') {
-        belowNode = curDraggable;
-      } else {
-        aboveNode = curDraggable;
-      }
-
-      // if belowNode has the depth of 1, then the above element will be a part of a different branch
-
-      const { relationships, nodes } = outline.current;
-      if (!belowNode || !aboveNode) {
-        if (belowNode) {
-          aboveNode = findNodeAbove(outline.current, curDepth, belowNode);
-        } else if (aboveNode) {
-          let targetBelowNode: RelationshipChild | null = null;
-          const parent = relationships.get(aboveNode.parent);
-          if (aboveNode.children !== 0 && !aboveNode.collapsed) {
-            const abr = relationships.get(aboveNode.id);
-            if (abr) {
-              const newTarget = abr.children[0];
-              if (newTarget) {
-                targetBelowNode = newTarget;
-              }
-            }
-          } else if (parent) {
-            const aboveNodeIndex = parent.children.findIndex(c => aboveNode && c.id === aboveNode.id);
-            if (aboveNodeIndex !== -1) {
-              if (aboveNodeIndex === parent.children.length - 1) {
-                targetBelowNode = getBelowParent(aboveNode, outline.current);
-              } else {
-                const nextChild = parent.children[aboveNodeIndex + 1];
-                targetBelowNode = nextChild ?? null;
-              }
-            }
-          }
-          if (targetBelowNode) {
-            const depthNodes = nodes.get(targetBelowNode.depth);
-            if (depthNodes) {
-              belowNode = depthNodes.get(targetBelowNode.id) ?? null;
-            }
-          }
-        }
-      }
-
-      // if outside outline, get either first or last item in list based on mouse Y
-      if (!aboveNode && !belowNode) {
-        if (container && container.current) {
-          const bounds = container.current.getBoundingClientRect();
-          if (clientY < bounds.top + bounds.height / 2) {
-            const rootChildren = outline.current.relationships.get('root');
-            const rootDepth = outline.current.nodes.get(1);
-            if (rootChildren && rootDepth) {
-              const firstChild = rootChildren.children[0];
-              belowNode = rootDepth.get(firstChild.id) ?? null;
-              aboveNode = null;
-            }
-          } else {
-            // TODO: enhance to actually get last child item, not last top level branch
-            const rootChildren = outline.current.relationships.get('root');
-            const rootDepth = outline.current.nodes.get(1);
-            if (rootChildren && rootDepth) {
-              const lastChild = rootChildren.children[rootChildren.children.length - 1];
-              const lastParentNode = rootDepth.get(lastChild.id) ?? null;
-
-              if (lastParentNode) {
-                const lastBranchChild = getLastChildInBranch(outline.current, lastParentNode);
-                if (lastBranchChild) {
-                  const lastChildDepth = outline.current.nodes.get(lastBranchChild.depth);
-                  if (lastChildDepth) {
-                    aboveNode = lastChildDepth.get(lastBranchChild.id) ?? null;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-
-      if (aboveNode) {
-        const { ancestors } = findNodeDepth(outline.current.published, aboveNode.id);
-        for (let i = 0; i < draggedNodes.nodes.length; i++) {
-          const nodeID = draggedNodes.nodes[i];
-          if (ancestors.find(c => c === nodeID)) {
-            if (draggedNodes.first) {
-              belowNode = draggedNodes.first;
-              aboveNode = findNodeAbove(outline.current, aboveNode ? aboveNode.depth : 1, draggedNodes.first);
-            } else {
-              const { depth } = findNodeDepth(outline.current.published, nodeID);
-              const nodeDepth = outline.current.nodes.get(depth);
-              const targetNode = nodeDepth ? nodeDepth.get(nodeID) : null;
-              if (targetNode) {
-                belowNode = targetNode;
-
-                aboveNode = findNodeAbove(outline.current, depth, targetNode);
-              }
-            }
-          }
-        }
-      }
-
-      // calculate available depths
-
-      let minDepth = 1;
-      let maxDepth = 2;
-      if (aboveNode) {
-        const aboveParent = relationships.get(aboveNode.parent);
-        if (aboveNode.children !== 0 && !aboveNode.collapsed) {
-          minDepth = aboveNode.depth + 1;
-          maxDepth = aboveNode.depth + 1;
-        } else if (aboveParent) {
-          minDepth = aboveNode.depth;
-          maxDepth = aboveNode.depth + 1;
-          const aboveNodeIndex = aboveParent.children.findIndex(c => aboveNode && c.id === aboveNode.id);
-          if (aboveNodeIndex === aboveParent.children.length - 1) {
-            minDepth = belowNode ? belowNode.depth : minDepth;
-          }
-        }
-      }
-      if (aboveNode) {
-        const dimensions = outline.current.dimensions.get(aboveNode.id);
-        const entry = getDimensions(dimensions?.entry);
-        if (entry) {
-          depthTarget = getTargetDepth(clientX, entry.left, { min: minDepth, max: maxDepth });
-        }
-      }
-
-      let aboveImpact: null | ImpactZoneData = null;
-      let belowImpact: null | ImpactZoneData = null;
-      if (aboveNode) {
-        const aboveDim = outline.current.dimensions.get(aboveNode.id);
-        if (aboveDim) {
-          aboveImpact = {
-            node: aboveNode,
-            dimensions: aboveDim,
-          };
-        }
-      }
-      if (belowNode) {
-        const belowDim = outline.current.dimensions.get(belowNode.id);
-        if (belowDim) {
-          belowImpact = {
-            node: belowNode,
-            dimensions: belowDim,
-          };
-        }
-      }
-
-      setImpact({
-        zone: {
-          above: aboveImpact,
-          below: belowImpact,
-        },
-        depth: depthTarget,
-      });
-    },
-    [outline.current.nodes],
-  );
-  useEffect(() => {
-    document.addEventListener('mouseup', handleMouseUp);
-    document.addEventListener('mousemove', handleMouseMove);
-    return () => {
-      document.removeEventListener('mouseup', handleMouseUp);
-      document.removeEventListener('mousemove', handleMouseMove);
-    };
-  }, []);
-  const styles = useMemo(() => {
-    const position: 'absolute' | 'relative' = isDragging ? 'absolute' : 'relative';
-    return {
-      cursor: isDragging ? '-webkit-grabbing' : '-webkit-grab',
-      transform: `translate(${pos.x - 10}px, ${pos.y - 4}px)`,
-      transition: isDragging ? 'none' : 'transform 500ms',
-      zIndex: isDragging ? 2 : 1,
-      position,
-    };
-  }, [isDragging, pos]);
-
-  return (
-    <>
-      {pos && (
-        <Container ref={$handle} style={styles}>
-          <Dot width={18} height={18} />
-        </Container>
-      )}
-    </>
-  );
-};
-
-export default Dragger;

frontend/src/Outline/Entry.tsx

@@ -1,155 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import { Dot, CaretDown, CaretRight } from 'shared/icons';
-
-import { EntryChildren, EntryWrapper, EntryContent, EntryInnerContent, EntryHandle, ExpandButton } from './Styles';
-import { useDrag } from './useDrag';
-
-function getCaretPosition(editableDiv: any) {
-  let caretPos = 0;
-  let sel: any = null;
-  let range: any = null;
-  if (window.getSelection) {
-    sel = window.getSelection();
-    if (sel && sel.rangeCount) {
-      range = sel.getRangeAt(0);
-      if (range.commonAncestorContainer.parentNode === editableDiv) {
-        caretPos = range.endOffset;
-      }
-    }
-  }
-  return caretPos;
-}
-
-type EntryProps = {
-  id: string;
-  collapsed?: boolean;
-  onToggleCollapse: (id: string, collapsed: boolean) => void;
-  parentID: string;
-  onStartDrag: (e: { id: string; clientX: number; clientY: number }) => void;
-  onStartSelect: (e: { id: string; depth: number }) => void;
-  isRoot?: boolean;
-  selection: null | Array<{ id: string }>;
-  draggedNodes: null | Array<string>;
-  entries: Array<ItemElement>;
-  onCancelDrag: () => void;
-  position: number;
-  chain?: Array<string>;
-  depth?: number;
-};
-
-const Entry: React.FC<EntryProps> = ({
-  id,
-  parentID,
-  isRoot = false,
-  selection,
-  onToggleCollapse,
-  onStartSelect,
-  position,
-  onCancelDrag,
-  onStartDrag,
-  collapsed = false,
-  draggedNodes,
-  entries,
-  chain = [],
-  depth = 0,
-}) => {
-  const $entry = useRef<HTMLDivElement>(null);
-  const $children = useRef<HTMLDivElement>(null);
-  const { setNodeDimensions, clearNodeDimensions } = useDrag();
-  useEffect(() => {
-    if (isRoot) return;
-    if ($entry && $entry.current) {
-      setNodeDimensions(id, {
-        entry: $entry,
-        children: entries.length !== 0 ? $children : null,
-      });
-    }
-    return () => {
-      clearNodeDimensions(id);
-    };
-  }, [position, depth, entries]);
-  let showHandle = true;
-  if (draggedNodes && draggedNodes.length === 1 && draggedNodes.find(c => c === id)) {
-    showHandle = false;
-  }
-  let isSelected = false;
-  if (selection && selection.find(c => c.id === id)) {
-    isSelected = true;
-  }
-  let onSaveTimer: any = null;
-  const onSaveTimeout = 300;
-  return (
-    <EntryWrapper isSelected={isSelected} isDragging={!showHandle}>
-      {!isRoot && (
-        <EntryContent>
-          {entries.length !== 0 && (
-            <ExpandButton onClick={() => onToggleCollapse(id, !collapsed)}>
-              {collapsed ? <CaretRight width={20} height={20} /> : <CaretDown width={20} height={20} />}
-            </ExpandButton>
-          )}
-          {showHandle && (
-            <EntryHandle
-              onMouseUp={() => onCancelDrag()}
-              onMouseDown={e => {
-                onStartDrag({ id, clientX: e.clientX, clientY: e.clientY });
-              }}
-            >
-              <Dot width={18} height={18} />
-            </EntryHandle>
-          )}
-          <EntryInnerContent
-            onMouseDown={() => {
-              onStartSelect({ id, depth });
-            }}
-            onKeyDown={e => {
-              if (e.key === 'z' && e.ctrlKey) {
-                if ($entry && $entry.current) {
-                  console.log(getCaretPosition($entry.current));
-                }
-              } else {
-                clearTimeout(onSaveTimer);
-                if ($entry && $entry.current) {
-                  onSaveTimer = setTimeout(() => {
-                    if ($entry && $entry.current) {
-                      console.log($entry.current.textContent);
-                    }
-                  }, onSaveTimeout);
-                }
-              }
-            }}
-            contentEditable
-            ref={$entry}
-          >
-            {`${id.toString()} - ${position}`}
-          </EntryInnerContent>
-        </EntryContent>
-      )}
-      {entries.length !== 0 && !collapsed && (
-        <EntryChildren ref={$children} isRoot={isRoot}>
-          {entries
-            .sort((a, b) => a.position - b.position)
-            .map(entry => (
-              <Entry
-                parentID={id}
-                key={entry.id}
-                position={entry.position}
-                depth={depth + 1}
-                draggedNodes={draggedNodes}
-                collapsed={entry.collapsed}
-                id={entry.id}
-                onStartSelect={onStartSelect}
-                onStartDrag={onStartDrag}
-                onCancelDrag={onCancelDrag}
-                entries={entry.children ?? []}
-                chain={[...chain, id]}
-                selection={selection}
-                onToggleCollapse={onToggleCollapse}
-              />
-            ))}
-        </EntryChildren>
-      )}
-    </EntryWrapper>
-  );
-};
-
-export default Entry;

frontend/src/Outline/Styles.ts

@@ -1,164 +0,0 @@
-import styled, { css } from 'styled-components';
-import { mixin } from 'shared/utils/styles';
-
-export const EntryWrapper = styled.div<{ isDragging: boolean; isSelected: boolean }>`
-  position: relative;
-  ${props =>
-    props.isDragging &&
-    css`
-      &:before {
-        border-radius: 3px;
-        content: '';
-        position: absolute;
-        top: 2px;
-        right: -5px;
-        left: -5px;
-        bottom: -2px;
-        background-color: #eceef0;
-      }
-    `}
-  ${props =>
-    props.isSelected &&
-    css`
-      &:before {
-        border-radius: 3px;
-        content: '';
-        position: absolute;
-        top: 2px;
-        right: -5px;
-        bottom: -2px;
-        left: -5px;
-        background-color: rgba(${props.theme.colors.primary}, 0.75);
-      }
-    `}
-`;
-
-export const EntryChildren = styled.div<{ isRoot: boolean }>`
-  position: relative;
-  ${props =>
-    !props.isRoot &&
-    css`
-      margin-left: 10px;
-      padding-left: 25px;
-      border-left: 1px solid rgba(${props.theme.colors.text.primary}, 0.6);
-    `}
-`;
-
-export const PageContent = styled.div`
-  min-height: calc(100vh - 146px);
-  width: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  box-shadow: none;
-  user-select: none;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 700px;
-  padding-left: 56px;
-  padding-right: 56px;
-  padding-top: 24px;
-  padding-bottom: 24px;
-  text-size-adjust: none;
-`;
-
-export const DragHandle = styled.div<{ top: number; left: number }>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  left: 0;
-  top: 0;
-  transform: translate3d(${props => props.left}px, ${props => props.top}px, 0);
-  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
-  width: 18px;
-  height: 18px;
-  color: rgb(75, 81, 85);
-  border-radius: 9px;
-`;
-export const RootWrapper = styled.div``;
-
-export const EntryHandle = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  left: 501px;
-  top: 7px;
-  width: 18px;
-  height: 18px;
-  color: rgba(${p => p.theme.colors.text.primary});
-  border-radius: 9px;
-  &:hover {
-    background: rgba(${p => p.theme.colors.primary});
-  }
-  svg {
-    fill: rgba(${p => p.theme.colors.text.primary});
-    stroke: rgba(${p => p.theme.colors.text.primary});
-  }
-`;
-
-export const EntryInnerContent = styled.div`
-  padding-top: 4px;
-  font-size: 15px;
-  white-space: pre-wrap;
-  line-height: 24px;
-  min-height: 24px;
-  overflow-wrap: break-word;
-  position: relative;
-  user-select: text;
-  color: rgba(${p => p.theme.colors.text.primary});
-  &::selection {
-    background: #a49de8;
-  }
-  &:focus {
-    outline: 0;
-  }
-`;
-
-export const DragDebugWrapper = styled.div`
-  position: absolute;
-  left: 42px;
-  bottom: 24px;
-  color: #fff;
-`;
-
-export const DragIndicatorBar = styled.div<{ left: number; top: number; width: number }>`
-  position: absolute;
-  width: ${props => props.width}px;
-  top: ${props => props.top}px;
-  left: ${props => props.left}px;
-  height: 4px;
-  border-radius: 3px;
-  background: rgb(204, 204, 204);
-`;
-
-export const ExpandButton = styled.div`
-  top: 6px;
-  cursor: default;
-  color: transparent;
-  position: absolute;
-  top: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  left: 478px;
-  width: 20px;
-  height: 20px;
-  svg {
-    fill: transparent;
-  }
-`;
-export const EntryContent = styled.div`
-  position: relative;
-  margin-left: -500px;
-  padding-left: 524px;
-
-  &:hover ${ExpandButton} svg {
-    fill: rgb(${props => props.theme.colors.text.primary});
-  }
-`;
-
-export const PageContainer = styled.div`
-  overflow: scroll;
-`;

frontend/src/Outline/index.tsx

@@ -1,504 +0,0 @@
-import React, { useState, useRef, useEffect, useMemo, useCallback, useContext, memo, createRef } from 'react';
-import { DotCircle } from 'shared/icons';
-import styled from 'styled-components/macro';
-import GlobalTopNavbar from 'App/TopNavbar';
-import _ from 'lodash';
-import produce from 'immer';
-import Entry from './Entry';
-import DragIndicator from './DragIndicator';
-import Dragger from './Dragger';
-import DragDebug from './DragDebug';
-import { DragContext } from './useDrag';
-
-import {
-  PageContainer,
-  DragDebugWrapper,
-  DragIndicatorBar,
-  PageContent,
-  EntryChildren,
-  EntryInnerContent,
-  EntryWrapper,
-  EntryContent,
-  RootWrapper,
-  EntryHandle,
-} from './Styles';
-import {
-  transformToTree,
-  findNode,
-  findNodeDepth,
-  getNumberOfChildren,
-  validateDepth,
-  getDimensions,
-  findNextDraggable,
-  getNodeOver,
-  getCorrectNode,
-  findCommonParent,
-} from './utils';
-import NOOP from 'shared/utils/noop';
-
-type OutlineCommand = {
-  nodes: Array<{
-    id: string;
-    prev: { position: number; parent: string | null };
-    next: { position: number; parent: string | null };
-  }>;
-};
-
-type ItemCollapsed = {
-  id: string;
-  collapsed: boolean;
-};
-
-const listItems: Array<ItemElement> = [
-  { id: 'root', position: 4096, parent: null, collapsed: false },
-  { id: 'entry-1', position: 4096, parent: 'root', collapsed: false },
-  { id: 'entry-1_3', position: 4096 * 3, parent: 'entry-1', collapsed: false },
-  { id: 'entry-1_3_1', position: 4096, parent: 'entry-1_3', collapsed: false },
-  { id: 'entry-1_3_2', position: 4096 * 2, parent: 'entry-1_3', collapsed: false },
-  { id: 'entry-1_3_3', position: 4096 * 3, parent: 'entry-1_3', collapsed: false },
-  { id: 'entry-1_3_3_1', position: 4096 * 1, parent: 'entry-1_3_3', collapsed: false },
-  { id: 'entry-1_3_3_1_1', position: 4096 * 1, parent: 'entry-1_3_3_1', collapsed: false },
-  { id: 'entry-2', position: 4096 * 2, parent: 'root', collapsed: false },
-  { id: 'entry-3', position: 4096 * 3, parent: 'root', collapsed: false },
-  { id: 'entry-4', position: 4096 * 4, parent: 'root', collapsed: false },
-  { id: 'entry-5', position: 4096 * 5, parent: 'root', collapsed: false },
-];
-
-const Outline: React.FC = () => {
-  const [items, setItems] = useState(listItems);
-  const [selecting, setSelecting] = useState<{
-    isSelecting: boolean;
-    node: { id: string; depth: number } | null;
-  }>({ isSelecting: false, node: null });
-  const [selection, setSelection] = useState<null | { nodes: Array<{ id: string }>; first?: OutlineNode | null }>(null);
-  const [dragging, setDragging] = useState<{
-    show: boolean;
-    draggedNodes: null | Array<string>;
-    initialPos: { x: number; y: number };
-  }>({ show: false, draggedNodes: null, initialPos: { x: 0, y: 0 } });
-  const [impact, setImpact] = useState<null | {
-    listPosition: number;
-    zone: ImpactZone;
-    depthTarget: number;
-  }>(null);
-  const selectRef = useRef<{ isSelecting: boolean; hasSelection: boolean; node: { id: string; depth: number } | null }>(
-    {
-      isSelecting: false,
-      node: null,
-      hasSelection: false,
-    },
-  );
-  const impactRef = useRef<null | { listPosition: number; depth: number; zone: ImpactZone }>(null);
-  useEffect(() => {
-    if (impact) {
-      impactRef.current = { zone: impact.zone, depth: impact.depthTarget, listPosition: impact.listPosition };
-    }
-  }, [impact]);
-  useEffect(() => {
-    selectRef.current.isSelecting = selecting.isSelecting;
-    selectRef.current.node = selecting.node;
-  }, [selecting]);
-
-  const $content = useRef<HTMLDivElement>(null);
-  const outline = useRef<OutlineData>({
-    published: new Map<string, string>(),
-    dimensions: new Map<string, NodeDimensions>(),
-    nodes: new Map<number, Map<string, OutlineNode>>(),
-    relationships: new Map<string, NodeRelationships>(),
-  });
-
-  const tree = transformToTree(_.cloneDeep(items));
-  let root: any = null;
-  if (tree.length === 1) {
-    root = tree[0];
-  }
-  const outlineHistory = useRef<{ commands: Array<OutlineCommand>; current: number }>({ current: -1, commands: [] });
-
-  useEffect(() => {
-    outline.current.relationships = new Map<string, NodeRelationships>();
-    outline.current.published = new Map<string, string>();
-    outline.current.nodes = new Map<number, Map<string, OutlineNode>>();
-    const collapsedMap = items.reduce((map, next) => {
-      if (next.collapsed) {
-        map.set(next.id, true);
-      }
-      return map;
-    }, new Map<string, boolean>());
-    items.forEach(item => outline.current.published.set(item.id, item.parent ?? 'root'));
-
-    for (let i = 0; i < items.length; i++) {
-      const { collapsed, position, id, parent: curParent } = items[i];
-      if (id === 'root') {
-        continue;
-      }
-      const parent = curParent ?? 'root';
-      outline.current.published.set(id, parent ?? 'root');
-      const { depth, ancestors } = findNodeDepth(outline.current.published, id);
-      const collapsedParent = ancestors.slice(0, -1).find(a => collapsedMap.get(a));
-      if (collapsedParent) {
-        continue;
-      }
-      const children = getNumberOfChildren(root, ancestors);
-      if (!outline.current.nodes.has(depth)) {
-        outline.current.nodes.set(depth, new Map<string, OutlineNode>());
-      }
-      const targetDepthNodes = outline.current.nodes.get(depth);
-      if (targetDepthNodes) {
-        targetDepthNodes.set(id, {
-          id,
-          children,
-          position,
-          depth,
-          ancestors,
-          collapsed,
-          parent,
-        });
-      }
-      if (!outline.current.relationships.has(parent)) {
-        outline.current.relationships.set(parent, {
-          self: {
-            depth: depth - 1,
-            id: parent,
-          },
-          children: [],
-          numberOfSubChildren: 0,
-        });
-      }
-      const nodeRelations = outline.current.relationships.get(parent);
-      if (nodeRelations) {
-        outline.current.relationships.set(parent, {
-          self: nodeRelations.self,
-          numberOfSubChildren: nodeRelations.numberOfSubChildren + children,
-          children: [...nodeRelations.children, { id, position, depth, children }].sort(
-            (a, b) => a.position - b.position,
-          ),
-        });
-      }
-    }
-  }, [items]);
-  const handleKeyDown = useCallback(e => {
-    if (e.code === 'KeyZ' && e.ctrlKey) {
-      const currentCommand = outlineHistory.current.commands[outlineHistory.current.current];
-      if (currentCommand) {
-        setItems(prevItems =>
-          produce(prevItems, draftItems => {
-            currentCommand.nodes.forEach(node => {
-              const idx = prevItems.findIndex(c => c.id === node.id);
-              if (idx !== -1) {
-                draftItems[idx].parent = node.prev.parent;
-                draftItems[idx].position = node.prev.position;
-              }
-            });
-            outlineHistory.current.current--;
-          }),
-        );
-      }
-    } else if (e.code === 'KeyY' && e.ctrlKey) {
-      const currentCommand = outlineHistory.current.commands[outlineHistory.current.current + 1];
-      if (currentCommand) {
-        setItems(prevItems =>
-          produce(prevItems, draftItems => {
-            currentCommand.nodes.forEach(node => {
-              const idx = prevItems.findIndex(c => c.id === node.id);
-              if (idx !== -1) {
-                draftItems[idx].parent = node.next.parent;
-                draftItems[idx].position = node.next.position;
-              }
-            });
-            outlineHistory.current.current++;
-          }),
-        );
-      }
-    }
-  }, []);
-
-  const handleMouseUp = useCallback(
-    e => {
-      if (selectRef.current.hasSelection && !selectRef.current.isSelecting) {
-        setSelection(null);
-      }
-      if (selectRef.current.isSelecting) {
-        setSelecting({ isSelecting: false, node: null });
-      }
-    },
-    [dragging, selecting],
-  );
-  const handleMouseMove = useCallback(e => {
-    if (selectRef.current.isSelecting && selectRef.current.node) {
-      const { clientX, clientY } = e;
-      const dimensions = outline.current.dimensions.get(selectRef.current.node.id);
-      if (dimensions) {
-        const entry = getDimensions(dimensions.entry);
-        if (entry) {
-          const isAbove = clientY < entry.top;
-          const isBelow = clientY > entry.bottom;
-          if (!isAbove && !isBelow && selectRef.current.hasSelection) {
-            const nodeDepth = outline.current.nodes.get(selectRef.current.node.depth);
-            const aboveNode = nodeDepth ? nodeDepth.get(selectRef.current.node.id) : null;
-            if (aboveNode) {
-              setSelection({ nodes: [{ id: selectRef.current.node.id }], first: aboveNode });
-              selectRef.current.hasSelection = false;
-            }
-          }
-          if (isAbove || isBelow) {
-            e.preventDefault();
-            const { curDraggable } = getNodeOver({ x: clientX, y: clientY }, outline.current);
-            const nodeDepth = outline.current.nodes.get(selectRef.current.node.depth);
-            const selectedNode = nodeDepth ? nodeDepth.get(selectRef.current.node.id) : null;
-            let aboveNode: OutlineNode | undefined | null = null;
-            let belowNode: OutlineNode | undefined | null = null;
-            if (isBelow) {
-              aboveNode = selectedNode;
-              belowNode = curDraggable;
-            } else {
-              aboveNode = curDraggable;
-              belowNode = selectedNode;
-            }
-            if (aboveNode && belowNode) {
-              const aboveDim = outline.current.dimensions.get(aboveNode.id);
-              const belowDim = outline.current.dimensions.get(belowNode.id);
-              if (aboveDim && belowDim) {
-                const aboveDimBounds = getDimensions(aboveDim.entry);
-                const belowDimBounds = getDimensions(belowDim.children ? belowDim.children : belowDim.entry);
-                const aboveDimY = aboveDimBounds ? aboveDimBounds.bottom : 0;
-                const belowDimY = belowDimBounds ? belowDimBounds.top : 0;
-                const inbetweenNodes: Array<{ id: string }> = [];
-                for (const [id, dimension] of outline.current.dimensions.entries()) {
-                  if (id === aboveNode.id || id === belowNode.id) {
-                    inbetweenNodes.push({ id });
-                    continue;
-                  }
-                  const targetNodeBounds = getDimensions(dimension.entry);
-                  if (targetNodeBounds) {
-                    if (
-                      Math.round(aboveDimY) <= Math.round(targetNodeBounds.top) &&
-                      Math.round(belowDimY) >= Math.round(targetNodeBounds.bottom)
-                    ) {
-                      inbetweenNodes.push({ id });
-                    }
-                  }
-                }
-                const filteredNodes = inbetweenNodes.filter(n => {
-                  const parent = outline.current.published.get(n.id);
-                  if (parent) {
-                    const foundParent = inbetweenNodes.find(c => c.id === parent);
-                    if (foundParent) {
-                      return false;
-                    }
-                  }
-                  return true;
-                });
-                selectRef.current.hasSelection = true;
-                setSelection({ nodes: filteredNodes, first: aboveNode });
-              }
-            }
-          }
-        }
-      }
-    }
-  }, []);
-  useEffect(() => {
-    document.addEventListener('mouseup', handleMouseUp);
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('mouseup', handleMouseUp);
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.addEventListener('keydown', handleKeyDown);
-    };
-  }, []);
-
-  if (!root) {
-    return null;
-  }
-  return (
-    <>
-      <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />
-      <DragContext.Provider
-        value={{
-          outline,
-          impact,
-          setImpact: data => {
-            if (data) {
-              const { zone, depth } = data;
-              let listPosition = 65535;
-              if (zone.above && zone.above.node.depth + 1 <= depth && zone.above.node.collapsed) {
-                const aboveChildren = items
-                  .filter(i => (zone.above ? i.parent === zone.above.node.id : false))
-                  .sort((a, b) => a.position - b.position);
-                const lastChild = aboveChildren[aboveChildren.length - 1];
-                if (lastChild) {
-                  listPosition = lastChild.position * 2.0;
-                }
-              } else {
-                console.log(zone.above);
-                console.log(zone.below);
-                const correctNode = getCorrectNode(outline.current, zone.above ? zone.above.node : null, depth);
-                console.log(correctNode);
-                const listAbove = validateDepth(correctNode, depth);
-                const listBelow = validateDepth(zone.below ? zone.below.node : null, depth);
-                console.log(listAbove, listBelow);
-                if (listAbove && listBelow) {
-                  listPosition = (listAbove.position + listBelow.position) / 2.0;
-                } else if (listAbove && !listBelow) {
-                  listPosition = listAbove.position * 2.0;
-                } else if (!listAbove && listBelow) {
-                  listPosition = listBelow.position / 2.0;
-                }
-              }
-
-              if (!zone.above && zone.below) {
-                const newPosition = zone.below.node.position / 2.0;
-                setImpact(() => ({
-                  zone,
-                  listPosition: newPosition,
-                  depthTarget: depth,
-                }));
-              }
-              if (zone.above) {
-                // console.log(`prev=${prev} next=${next} targetPosition=${targetPosition}`);
-                // let targetID = depthTarget === 1 ? 'root' : node.ancestors[depthTarget - 1];
-                // targetID = targetID ?? node.id;
-                setImpact(() => ({
-                  zone,
-                  listPosition,
-                  depthTarget: depth,
-                }));
-              }
-            } else {
-              setImpact(null);
-            }
-          },
-          setNodeDimensions: (nodeID, ref) => {
-            outline.current.dimensions.set(nodeID, ref);
-          },
-          clearNodeDimensions: nodeID => {
-            outline.current.dimensions.delete(nodeID);
-          },
-        }}
-      >
-        <>
-          <PageContainer>
-            <PageContent>
-              <RootWrapper ref={$content}>
-                <Entry
-                  onStartSelect={({ id, depth }) => {
-                    setSelection(null);
-                    setSelecting({ isSelecting: true, node: { id, depth } });
-                  }}
-                  onToggleCollapse={(id, collapsed) => {
-                    setItems(prevItems =>
-                      produce(prevItems, draftItems => {
-                        const idx = prevItems.findIndex(c => c.id === id);
-                        if (idx !== -1) {
-                          draftItems[idx].collapsed = collapsed;
-                        }
-                      }),
-                    );
-                  }}
-                  id="root"
-                  parentID="root"
-                  isRoot
-                  selection={selection ? selection.nodes : null}
-                  draggedNodes={dragging.draggedNodes}
-                  position={root.position}
-                  entries={root.children}
-                  onCancelDrag={() => {
-                    setImpact(null);
-                    setDragging({ show: false, draggedNodes: null, initialPos: { x: 0, y: 0 } });
-                  }}
-                  onStartDrag={e => {
-                    if (e.id !== 'root') {
-                      if (selectRef.current.hasSelection && selection && selection.nodes.find(c => c.id === e.id)) {
-                        setImpact(null);
-                        setDragging({
-                          show: true,
-                          draggedNodes: [...selection.nodes.map(c => c.id)],
-                          initialPos: { x: e.clientX, y: e.clientY },
-                        });
-                      } else {
-                        setImpact(null);
-                        setDragging({ show: true, draggedNodes: [e.id], initialPos: { x: e.clientX, y: e.clientY } });
-                      }
-                    }
-                  }}
-                />
-              </RootWrapper>
-            </PageContent>
-          </PageContainer>
-          {dragging.show && dragging.draggedNodes && (
-            <Dragger
-              container={$content}
-              initialPos={dragging.initialPos}
-              draggedNodes={{ nodes: dragging.draggedNodes, first: selection ? selection.first : null }}
-              isDragging={dragging.show}
-              onDragEnd={() => {
-                if (dragging.draggedNodes && impactRef.current) {
-                  const { zone, depth, listPosition } = impactRef.current;
-                  const noZone = !zone.above && !zone.below;
-                  if (!noZone) {
-                    let parentID = 'root';
-                    if (zone.above) {
-                      parentID = zone.above.node.ancestors[depth - 1];
-                    }
-                    let reparent = true;
-                    for (let i = 0; i < dragging.draggedNodes.length; i++) {
-                      const draggedID = dragging.draggedNodes[i];
-                      const prevItem = items.find(i => i.id === draggedID);
-                      if (prevItem && prevItem.position === listPosition && prevItem.parent === parentID) {
-                        reparent = false;
-                        break;
-                      }
-                    }
-                    // TODO: set reparent if list position changed but parent did not
-                    //
-
-                    if (reparent) {
-                      // UPDATE OUTLINE DATA AFTER NODE MOVE
-                      setItems(itemsPrev =>
-                        produce(itemsPrev, draftItems => {
-                          if (dragging.draggedNodes) {
-                            const command: OutlineCommand = { nodes: [] };
-                            outlineHistory.current.current += 1;
-                            dragging.draggedNodes.forEach(n => {
-                              const curDragging = itemsPrev.findIndex(i => i.id === n);
-                              command.nodes.push({
-                                id: n,
-                                prev: {
-                                  parent: draftItems[curDragging].parent,
-                                  position: draftItems[curDragging].position,
-                                },
-                                next: {
-                                  parent: parentID,
-                                  position: listPosition,
-                                },
-                              });
-                              draftItems[curDragging].parent = parentID;
-                              draftItems[curDragging].position = listPosition;
-                            });
-                            outlineHistory.current.commands[outlineHistory.current.current] = command;
-                            if (outlineHistory.current.commands[outlineHistory.current.current + 1]) {
-                              outlineHistory.current.commands.splice(outlineHistory.current.current + 1);
-                            }
-                          }
-                        }),
-                      );
-                    }
-                  }
-                }
-                setImpact(null);
-                setDragging({ show: false, draggedNodes: null, initialPos: { x: 0, y: 0 } });
-              }}
-            />
-          )}
-        </>
-      </DragContext.Provider>
-      {impact && <DragIndicator depthTarget={impact.depthTarget} container={$content} zone={impact.zone} />}
-      {impact && (
-        <DragDebug zone={impact.zone ?? null} draggedNodes={dragging.draggedNodes} depthTarget={impact.depthTarget} />
-      )}
-    </>
-  );
-};
-
-export default Outline;

frontend/src/Outline/useDrag.ts

@@ -1,22 +0,0 @@
-import React, { useContext } from 'react';
-
-type DragContextData = {
-  impact: null | { zone: ImpactZone; depthTarget: number };
-  outline: React.MutableRefObject<OutlineData>;
-  setNodeDimensions: (
-    nodeID: string,
-    ref: { entry: React.RefObject<HTMLElement>; children: React.RefObject<HTMLElement> | null },
-  ) => void;
-  clearNodeDimensions: (nodeID: string) => void;
-  setImpact: (data: ImpactData | null) => void;
-};
-
-export const DragContext = React.createContext<DragContextData | null>(null);
-
-export const useDrag = () => {
-  const ctx = useContext(DragContext);
-  if (ctx) {
-    return ctx;
-  }
-  throw new Error('context is null');
-};

frontend/src/Outline/utils.ts

@@ -1,361 +0,0 @@
-import _ from 'lodash';
-
-export function getCorrectNode(data: OutlineData, node: OutlineNode | null, depth: number) {
-  if (node) {
-    console.log(depth, node);
-    if (depth === node.depth) {
-      return node;
-    }
-    const parent = node.ancestors[depth];
-    console.log('parent', parent);
-    if (parent) {
-      const parentNode = data.relationships.get(parent);
-      if (parentNode) {
-        const parentDepth = parentNode.self.depth;
-        const nodeDepth = data.nodes.get(parentDepth);
-        return nodeDepth ? nodeDepth.get(parent) : null;
-      }
-    }
-  }
-  return null;
-}
-export function validateDepth(node: OutlineNode | null | undefined, depth: number) {
-  if (node) {
-    return node.depth === depth ? node : null;
-  }
-  return null;
-}
-
-export function getNodeAbove(node: OutlineNode, startingParent: RelationshipChild, outline: OutlineData) {
-  let hasChildren = true;
-  let nodeAbove: null | RelationshipChild = null;
-  let aboveTargetID = startingParent.id;
-  while (hasChildren) {
-    const targetParent = outline.relationships.get(aboveTargetID);
-    if (targetParent) {
-      const parentNodes = outline.nodes.get(targetParent.self.depth);
-      const parentNode = parentNodes ? parentNodes.get(targetParent.self.id) : null;
-      if (targetParent.children.length === 0) {
-        if (parentNode) {
-          nodeAbove = {
-            id: parentNode.id,
-            depth: parentNode.depth,
-            position: parentNode.position,
-            children: parentNode.children,
-          };
-          console.log('node above', nodeAbove);
-        }
-        hasChildren = false;
-        continue;
-      }
-      nodeAbove = targetParent.children[targetParent.children.length - 1];
-      if (targetParent.numberOfSubChildren === 0) {
-        hasChildren = false;
-      } else {
-        aboveTargetID = nodeAbove.id;
-      }
-    } else {
-      const target = outline.relationships.get(node.ancestors[0]);
-      if (target) {
-        const targetChild = target.children.find(i => i.id === aboveTargetID);
-        if (targetChild) {
-          nodeAbove = targetChild;
-        }
-        hasChildren = false;
-      }
-    }
-  }
-  console.log('final node above', nodeAbove);
-  return nodeAbove;
-}
-
-export function getBelowParent(node: OutlineNode, outline: OutlineData) {
-  const { relationships, nodes } = outline;
-  const parentDepth = nodes.get(node.depth - 1);
-  const parent = parentDepth ? parentDepth.get(node.parent) : null;
-  if (parent) {
-    const grandfather = relationships.get(parent.parent);
-    if (grandfather) {
-      const parentIndex = grandfather.children.findIndex(c => c.id === parent.id);
-      if (parentIndex !== -1) {
-        if (parentIndex === grandfather.children.length - 1) {
-          const root = relationships.get(node.ancestors[0]);
-          if (root) {
-            const ancestorIndex = root.children.findIndex(c => c.id === node.ancestors[1]);
-            if (ancestorIndex !== -1) {
-              const nextAncestor = root.children[ancestorIndex + 1];
-              if (nextAncestor) {
-                return nextAncestor;
-              }
-            }
-          }
-        } else {
-          const nextChild = grandfather.children[parentIndex + 1];
-          if (nextChild) {
-            return nextChild;
-          }
-        }
-      }
-    }
-  }
-  return null;
-}
-
-export function getDimensions(ref: React.RefObject<HTMLElement> | null | undefined) {
-  if (ref && ref.current) {
-    return ref.current.getBoundingClientRect();
-  }
-  return null;
-}
-
-export function getTargetDepth(mouseX: number, handleLeft: number, availableDepths: { min: number; max: number }) {
-  if (mouseX > handleLeft) {
-    return availableDepths.max;
-  }
-  let curDepth = availableDepths.max - 1;
-  for (let x = availableDepths.min; x < availableDepths.max; x++) {
-    const breakpoint = handleLeft - x * 35;
-    // console.log(`mouseX=${mouseX} breakpoint=${breakpoint} x=${x} curDepth=${curDepth}`);
-    if (mouseX > breakpoint) {
-      return curDepth;
-    }
-    curDepth -= 1;
-  }
-
-  return availableDepths.min;
-}
-
-export function findNextDraggable(pos: { x: number; y: number }, outline: OutlineData, curDepth: number) {
-  let index = 0;
-  const currentDepthNodes = outline.nodes.get(curDepth);
-  let nodeAbove: null | RelationshipChild = null;
-  if (!currentDepthNodes) {
-    return null;
-  }
-  for (const [id, node] of currentDepthNodes) {
-    const dimensions = outline.dimensions.get(id);
-    const target = dimensions ? getDimensions(dimensions.entry) : null;
-    const children = dimensions ? getDimensions(dimensions.children) : null;
-    if (target) {
-      console.log(
-        `[${id}] ${pos.y} <= ${target.bottom} = ${pos.y <= target.bottom} / ${pos.y} >= ${target.top} = ${pos.y >=
-          target.top}`,
-      );
-      if (pos.y <= target.bottom && pos.y >= target.top) {
-        const middlePoint = target.top + target.height / 2;
-        const position: ImpactPosition = pos.y > middlePoint ? 'after' : 'before';
-        return {
-          found: true,
-          node,
-          position,
-        };
-      }
-    }
-    if (children) {
-      console.log(
-        `[${id}] ${pos.y} <= ${children.bottom} = ${pos.y <= children.bottom} / ${pos.y} >= ${children.top} = ${pos.y >=
-          children.top}`,
-      );
-      if (pos.y <= children.bottom && pos.y >= children.top) {
-        const position: ImpactPosition = 'after';
-        return { found: false, node, position };
-      }
-    }
-    index += 1;
-  }
-  return null;
-}
-
-export function transformToTree(arr: any) {
-  const nodes: any = {};
-  return arr.filter(function(obj: any) {
-    var id = obj['id'],
-      parentId = obj['parent'];
-
-    nodes[id] = _.defaults(obj, nodes[id], { children: [] });
-    parentId && (nodes[parentId] = nodes[parentId] || { children: [] })['children'].push(obj);
-
-    return !parentId;
-  });
-}
-
-export function findNode(parentID: string, nodeID: string, data: OutlineData) {
-  const nodeRelations = data.relationships.get(parentID);
-  if (nodeRelations) {
-    const nodeDepth = data.nodes.get(nodeRelations.self.depth + 1);
-    if (nodeDepth) {
-      const node = nodeDepth.get(nodeID);
-      return node ?? null;
-    }
-  }
-  return null;
-}
-
-export function findNodeDepth(published: Map<string, string>, id: string) {
-  let currentID = id;
-  let breaker = 0;
-  let depth = 0;
-  let ancestors = [id];
-  while (currentID !== 'root') {
-    const nextID = published.get(currentID);
-    if (nextID) {
-      ancestors = [nextID, ...ancestors];
-      currentID = nextID;
-      depth += 1;
-      breaker += 1;
-      if (breaker > 100) {
-        throw new Error('node depth breaker was thrown');
-      }
-    } else {
-      throw new Error('unable to find nextID');
-    }
-  }
-  return { depth, ancestors };
-}
-
-export function getNumberOfChildren(root: ItemElement, ancestors: Array<string>) {
-  let currentBranch = root;
-  for (let i = 1; i < ancestors.length; i++) {
-    const nextBranch = currentBranch.children ? currentBranch.children.find(c => c.id === ancestors[i]) : null;
-    if (nextBranch) {
-      currentBranch = nextBranch;
-    } else {
-      throw new Error('unable to find next branch');
-    }
-  }
-  return currentBranch.children ? currentBranch.children.length : 0;
-}
-
-export function findNodeAbove(outline: OutlineData, curDepth: number, belowNode: OutlineNode) {
-  let targetAboveNode: null | RelationshipChild = null;
-  if (curDepth === 1) {
-    const relations = outline.relationships.get(belowNode.ancestors[0]);
-    if (relations) {
-      const parentIndex = relations.children.findIndex(n => belowNode && n.id === belowNode.ancestors[1]);
-      if (parentIndex !== -1) {
-        const aboveParent = relations.children[parentIndex - 1];
-        if (parentIndex === 0) {
-          targetAboveNode = null;
-        } else {
-          targetAboveNode = getNodeAbove(belowNode, aboveParent, outline);
-        }
-      }
-    }
-  } else {
-    const relations = outline.relationships.get(belowNode.parent);
-    if (relations) {
-      const currentIndex = relations.children.findIndex(n => belowNode && n.id === belowNode.id);
-      // is first child, so use parent
-      if (currentIndex === 0) {
-        const parentNodes = outline.nodes.get(belowNode.depth - 1);
-        const parentNode = parentNodes ? parentNodes.get(belowNode.parent) : null;
-        if (parentNode) {
-          targetAboveNode = {
-            id: belowNode.parent,
-            depth: belowNode.depth - 1,
-            position: parentNode.position,
-            children: parentNode.children,
-          };
-        }
-      } else if (currentIndex !== -1) {
-        // is not first child, so first prev sibling
-        const aboveParentNode = relations.children[currentIndex - 1];
-        if (aboveParentNode) {
-          targetAboveNode = getNodeAbove(belowNode, aboveParentNode, outline);
-          if (targetAboveNode === null) {
-            targetAboveNode = aboveParentNode;
-          }
-        }
-      }
-    }
-  }
-  if (targetAboveNode) {
-    const depthNodes = outline.nodes.get(targetAboveNode.depth);
-    if (depthNodes) {
-      return depthNodes.get(targetAboveNode.id) ?? null;
-    }
-  }
-  return null;
-}
-
-export function getNodeOver(mouse: { x: number; y: number }, outline: OutlineData) {
-  let curDepth = 1;
-  let curDraggables: any;
-  let curDraggable: any;
-  let curPosition: ImpactPosition = 'after';
-  while (outline.nodes.size + 1 > curDepth) {
-    curDraggables = outline.nodes.get(curDepth);
-    if (curDraggables) {
-      const nextDraggable = findNextDraggable(mouse, outline, curDepth);
-      if (nextDraggable) {
-        curDraggable = nextDraggable.node;
-        curPosition = nextDraggable.position;
-        if (nextDraggable.found) {
-          break;
-        }
-        curDepth += 1;
-      } else {
-        break;
-      }
-    }
-  }
-  return {
-    curDepth,
-    curDraggable,
-    curPosition,
-  };
-}
-
-export function findCommonParent(outline: OutlineData, aboveNode: OutlineNode, belowNode: OutlineNode) {
-  let aboveParentID = null;
-  let depth = 0;
-  for (let aIdx = aboveNode.ancestors.length - 1; aIdx !== 0; aIdx--) {
-    depth = aIdx;
-    const aboveNodeParent = aboveNode.ancestors[aIdx];
-    for (let bIdx = belowNode.ancestors.length - 1; bIdx !== 0; bIdx--) {
-      if (belowNode.ancestors[bIdx] === aboveNodeParent) {
-        aboveParentID = aboveNodeParent;
-      }
-    }
-  }
-  if (aboveParentID) {
-    const parent = outline.relationships.get(aboveParentID) ?? null;
-    if (parent) {
-      return {
-        parent,
-        depth,
-      };
-    }
-    return null;
-  }
-  return null;
-}
-
-export function getLastChildInBranch(outline: OutlineData, lastParentNode: OutlineNode) {
-  let curParentRelation = outline.relationships.get(lastParentNode.id);
-  if (!curParentRelation) {
-    return { id: lastParentNode.id, depth: 1 };
-  }
-  let hasChildren = lastParentNode.children !== 0;
-  let depth = 1;
-  let finalID: null | string = null;
-  while (hasChildren) {
-    if (curParentRelation) {
-      const lastChild = curParentRelation.children.sort((a, b) => a.position - b.position)[
-        curParentRelation.children.length - 1
-      ];
-      depth += 1;
-      if (lastChild.children === 0) {
-        finalID = lastChild.id;
-        break;
-      }
-      curParentRelation = outline.relationships.get(lastChild.id);
-    } else {
-      hasChildren = false;
-    }
-  }
-  if (finalID !== null) {
-    return { id: finalID, depth };
-  }
-  return null;
-}

frontend/src/Profile/index.tsx

@@ -3,20 +3,11 @@ import styled from 'styled-components/macro';
 import GlobalTopNavbar from 'App/TopNavbar';
 import { getAccessToken } from 'shared/utils/accessToken';
 import Settings from 'shared/components/Settings';
-import {
+import { useMeQuery, useClearProfileAvatarMutation, useUpdateUserPasswordMutation } from 'shared/generated/graphql';
-  useMeQuery,
-  useClearProfileAvatarMutation,
-  useUpdateUserPasswordMutation,
-  useUpdateUserInfoMutation,
-  MeQuery,
-  MeDocument,
-} from 'shared/generated/graphql';
 import axios from 'axios';
 import { useCurrentUser } from 'App/context';
 import NOOP from 'shared/utils/noop';
 import { toast } from 'react-toastify';
-import updateApolloCache from 'shared/utils/cache';
-import produce from 'immer';
 
 const MainContent = styled.div`
   padding: 0 0 50px 80px;
@@ -28,7 +19,6 @@ const Projects = () => {
   const $fileUpload = useRef<HTMLInputElement>(null);
   const [clearProfileAvatar] = useClearProfileAvatarMutation();
   const { user } = useCurrentUser();
-  const [updateUserInfo] = useUpdateUserInfoMutation();
   const [updateUserPassword] = useUpdateUserPasswordMutation();
   const { loading, data, refetch } = useMeQuery();
   useEffect(() => {
@@ -79,13 +69,6 @@ const Projects = () => {
             toast('Password was changed!');
             done();
           }}
-          onChangeUserInfo={(d, done) => {
-            updateUserInfo({
-              variables: { name: d.full_name, bio: d.bio, email: d.email, initials: d.initials },
-            });
-            toast('User info was saved!');
-            done();
-          }}
           onProfileAvatarRemove={() => {
             clearProfileAvatar();
           }}

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

@@ -5,6 +5,7 @@ import { TaskMetaFilters, TaskMeta, TaskMetaMatch, DueDateFilterType } from 'sha
 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';
 

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

@@ -73,11 +73,6 @@ const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) =
       >
         <ActionTitle>Task title</ActionTitle>
       </ActionItem>
-      <ActionItem
-        onClick={() => handleSetSorting({ type: TaskSortingType.COMPLETE, direction: TaskSortingDirection.ASC })}
-      >
-        <ActionTitle>Complete</ActionTitle>
-      </ActionItem>
     </ActionsList>
   );
 };

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

@@ -309,7 +309,7 @@ const Details: React.FC<DetailsProps> = ({
               task={data.findTask}
               onChecklistDrop={checklist => {
                 updateTaskChecklistLocation({
-                  variables: { taskChecklistID: checklist.id, position: checklist.position },
+                  variables: { checklistID: checklist.id, position: checklist.position },
 
                   optimisticResponse: {
                     __typename: 'Mutation',
@@ -324,24 +324,20 @@ const Details: React.FC<DetailsProps> = ({
                   },
                 });
               }}
-              onChecklistItemDrop={(prevChecklistID, taskChecklistID, checklistItem) => {
+              onChecklistItemDrop={(prevChecklistID, checklistID, checklistItem) => {
                 updateTaskChecklistItemLocation({
-                  variables: {
+                  variables: { checklistID, checklistItemID: checklistItem.id, position: checklistItem.position },
-                    taskChecklistID,
-                    taskChecklistItemID: checklistItem.id,
-                    position: checklistItem.position,
-                  },
                   optimisticResponse: {
                     __typename: 'Mutation',
                     updateTaskChecklistItemLocation: {
                       __typename: 'UpdateTaskChecklistItemLocationPayload',
                       prevChecklistID,
-                      taskChecklistID,
+                      checklistID,
                       checklistItem: {
                         __typename: 'TaskChecklistItem',
                         position: checklistItem.position,
                         id: checklistItem.id,
-                        taskChecklistID,
+                        taskChecklistID: checklistID,
                       },
                     },
                   },

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

@@ -3,11 +3,32 @@ import updateApolloCache from 'shared/utils/cache';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import produce from 'immer';
 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 LabelManager from 'shared/components/PopupMenu/LabelManager';
 import LabelEditor from 'shared/components/PopupMenu/LabelEditor';

frontend/src/Projects/Project/index.tsx

@@ -3,7 +3,6 @@ import React, { useState, useRef, useEffect, useContext } from 'react';
 import updateApolloCache from 'shared/utils/cache';
 import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
 import styled from 'styled-components/macro';
-import AsyncSelect from 'react-select/async';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import {
   useParams,
@@ -16,12 +15,11 @@ import {
 } from 'react-router-dom';
 import {
   useUpdateProjectMemberRoleMutation,
-  useInviteProjectMembersMutation,
+  useCreateProjectMemberMutation,
   useDeleteProjectMemberMutation,
   useToggleTaskLabelMutation,
   useUpdateProjectNameMutation,
   useFindProjectQuery,
-  useDeleteInvitedProjectMemberMutation,
   useUpdateTaskNameMutation,
   useCreateTaskMutation,
   useDeleteTaskMutation,
@@ -39,20 +37,12 @@ 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 { Lock, Cross } from 'shared/icons';
-import Button from 'shared/components/Button';
-import { useApolloClient } from '@apollo/react-hooks';
-import TaskAssignee from 'shared/components/TaskAssignee';
-import gql from 'graphql-tag';
-import { colourStyles } from 'shared/components/Select';
 import Board, { BoardLoading } from './Board';
 import Details from './Details';
 import LabelManagerEditor from './LabelManagerEditor';
 
 const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';
 
-const RFC2822_EMAIL = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
-
 const useStateWithLocalStorage = (localStorageKey: string): [string, React.Dispatch<React.SetStateAction<string>>] => {
   const [value, setValue] = React.useState<string>(localStorage.getItem(localStorageKey) || '');
 
@@ -80,299 +70,29 @@ const MemberList = styled.div`
   margin: 8px 0;
 `;
 
-type InviteUserData = {
-  email?: string;
-  suerID?: string;
-};
 type UserManagementPopupProps = {
-  projectID: string;
   users: Array<User>;
   projectMembers: Array<TaskUser>;
-  onInviteProjectMembers: (data: Array<InviteUserData>) => void;
+  onAddProjectMember: (userID: string) => void;
 };
 
-const VisibiltyPrivateIcon = styled(Lock)`
+const UserManagementPopup: React.FC<UserManagementPopupProps> = ({ users, projectMembers, onAddProjectMember }) => {
-  padding-right: 4px;
-`;
-
-const VisibiltyButtonText = styled.span`
-  color: rgba(${props => props.theme.colors.text.primary});
-`;
-
-const ShareActions = styled.div`
-  border-top: 1px solid #414561;
-  margin-top: 8px;
-  padding-top: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-
-const VisibiltyButton = styled.button`
-  cursor: pointer;
-  margin: 2px 4px;
-  padding: 2px 4px;
-  align-items: center;
-  justify-content: center;
-  border-bottom: 1px solid transparent;
-  &:hover ${VisibiltyButtonText} {
-    color: rgba(${props => props.theme.colors.text.secondary});
-  }
-  &:hover ${VisibiltyPrivateIcon} {
-    fill: rgba(${props => props.theme.colors.text.secondary});
-    stroke: rgba(${props => props.theme.colors.text.secondary});
-  }
-  &:hover {
-    border-bottom: 1px solid rgba(${props => props.theme.colors.primary});
-  }
-`;
-
-type MemberFilterOptions = {
-  projectID?: null | string;
-  teamID?: null | string;
-  organization?: boolean;
-};
-
-const fetchMembers = async (client: any, projectID: string, options: MemberFilterOptions, input: string, cb: any) => {
-  console.log(input.trim().length < 3);
-  if (input && input.trim().length < 3) {
-    return [];
-  }
-  const res = await client.query({
-    query: gql`
-    query {
-      searchMembers(input: {searchFilter:"${input}", projectID:"${projectID}"}) {
-        id
-        similarity
-        status
-        user {
-          id
-          fullName
-          email
-          profileIcon {
-            url
-            initials
-            bgColor
-          }
-        }
-      }
-    }
-    `,
-  });
-
-  let results: any = [];
-  const emails: Array<string> = [];
-  console.log(res.data && res.data.searchMembers);
-  if (res.data && res.data.searchMembers) {
-    results = [
-      ...res.data.searchMembers.map((m: any) => {
-        if (m.status === 'INVITED') {
-          console.log(`${m.id} is added`);
-          return {
-            label: m.id,
-            value: {
-              id: m.id,
-              type: 2,
-              profileIcon: {
-                bgColor: '#ccc',
-                initials: m.id.charAt(0),
-              },
-            },
-          };
-        } else {
-          console.log(`${m.user.email} is added`);
-          emails.push(m.user.email);
-          return {
-            label: m.user.fullName,
-            value: { id: m.user.id, type: 0, profileIcon: m.user.profileIcon },
-          };
-        }
-      }),
-    ];
-    console.log(results);
-  }
-
-  if (RFC2822_EMAIL.test(input) && !emails.find(e => e === input)) {
-    results = [
-      ...results,
-      {
-        label: input,
-        value: {
-          id: input,
-          type: 1,
-          profileIcon: {
-            bgColor: '#ccc',
-            initials: input.charAt(0),
-          },
-        },
-      },
-    ];
-  }
-
-  return results;
-};
-
-type UserOptionProps = {
-  innerProps: any;
-  isDisabled: boolean;
-  isFocused: boolean;
-  label: string;
-  data: any;
-  getValue: any;
-};
-
-const OptionWrapper = styled.div<{ isFocused: boolean }>`
-  cursor: pointer;
-  padding: 4px 8px;
-  ${props => props.isFocused && `background: rgba(${props.theme.colors.primary});`}
-  display: flex;
-  align-items: center;
-`;
-const OptionContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: 12px;
-`;
-
-const OptionLabel = styled.span<{ fontSize: number; quiet: boolean }>`
-  display: flex;
-  align-items: center;
-  font-size: ${p => p.fontSize}px;
-  color: rgba(${p => (p.quiet ? p.theme.colors.text.primary : p.theme.colors.text.primary)});
-`;
-
-const UserOption: React.FC<UserOptionProps> = ({ isDisabled, isFocused, innerProps, label, data }) => {
-  console.log(data);
-  return !isDisabled ? (
-    <OptionWrapper {...innerProps} isFocused={isFocused}>
-      <TaskAssignee
-        size={32}
-        member={{
-          id: '',
-          fullName: data.value.label,
-          profileIcon: data.value.profileIcon,
-        }}
-      />
-      <OptionContent>
-        <OptionLabel fontSize={16} quiet={false}>
-          {label}
-        </OptionLabel>
-        {data.value.type === 2 && (
-          <OptionLabel fontSize={14} quiet>
-            Joined
-          </OptionLabel>
-        )}
-      </OptionContent>
-    </OptionWrapper>
-  ) : null;
-};
-
-const OptionValueWrapper = styled.div`
-  background: rgba(${props => props.theme.colors.bg.primary});
-  border-radius: 4px;
-  margin: 2px;
-  padding: 3px 6px 3px 4px;
-  display: flex;
-  align-items: center;
-`;
-
-const OptionValueLabel = styled.span`
-  font-size: 12px;
-  color: rgba(${props => props.theme.colors.text.secondary});
-`;
-
-const OptionValueRemove = styled.button`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  outline: none;
-  padding: 0;
-  margin: 0;
-  margin-left: 4px;
-`;
-const OptionValue = ({ data, removeProps }: any) => {
-  return (
-    <OptionValueWrapper>
-      <OptionValueLabel>{data.label}</OptionValueLabel>
-      <OptionValueRemove {...removeProps}>
-        <Cross width={14} height={14} />
-      </OptionValueRemove>
-    </OptionValueWrapper>
-  );
-};
-
-const InviteButton = styled(Button)`
-  margin-top: 12px;
-  height: 32px;
-  padding: 4px 12px;
-  width: 100%;
-  justify-content: center;
-`;
-
-const InviteContainer = styled.div`
-  min-height: 300px;
-  display: flex;
-  flex-direction: column;
-`;
-
-const UserManagementPopup: React.FC<UserManagementPopupProps> = ({
-  projectID,
-  users,
-  projectMembers,
-  onInviteProjectMembers,
-}) => {
-  const client = useApolloClient();
-  const [invitedUsers, setInvitedUsers] = useState<Array<any> | null>(null);
   return (
     <Popup tab={0} title="Invite a user">
-      <InviteContainer>
+      <SearchInput width="100%" variant="alternate" placeholder="Email address or name" name="search" />
-        <AsyncSelect
+      <MemberList>
-          getOptionValue={option => option.value.id}
+        {users
-          placeholder="Email address or username"
+          .filter(u => u.id !== projectMembers.find(p => p.id === u.id)?.id)
-          noOptionsMessage={() => null}
+          .map(user => (
-          onChange={(e: any) => {
+            <UserMember
-            setInvitedUsers(e);
+              key={user.id}
-          }}
+              onCardMemberClick={() => onAddProjectMember(user.id)}
-          isMulti
+              showName
-          autoFocus
+              member={user}
-          cacheOptions
+              taskID=""
-          styles={colourStyles}
+            />
-          defaultOption
+          ))}
-          components={{
+      </MemberList>
-            MultiValue: OptionValue,
-            Option: UserOption,
-            IndicatorSeparator: null,
-            DropdownIndicator: null,
-          }}
-          loadOptions={(i, cb) => fetchMembers(client, projectID, {}, i, cb)}
-        />
-      </InviteContainer>
-      <InviteButton
-        onClick={() => {
-          if (invitedUsers) {
-            onInviteProjectMembers(
-              invitedUsers.map(user => {
-                if (user.value.type === 0) {
-                  return {
-                    userID: user.value.id,
-                  };
-                }
-                return {
-                  email: user.value.id,
-                };
-              }),
-            );
-          }
-        }}
-        disabled={invitedUsers === null}
-        hoverVariant="none"
-        fontSize="16px"
-      >
-        Send Invite
-      </InviteButton>
     </Popup>
   );
 };
@@ -415,30 +135,11 @@ const Project = () => {
   const [value, setValue] = useStateWithLocalStorage(CARD_LABEL_VARIANT_STORAGE_KEY);
   const [updateProjectMemberRole] = useUpdateProjectMemberRoleMutation();
 
-  const [deleteTask] = useDeleteTaskMutation({
+  const [deleteTask] = useDeleteTaskMutation();
-    update: (client, resp) =>
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            const taskGroupIdx = draftCache.findProject.taskGroups.findIndex(
-              tg => tg.tasks.findIndex(t => t.id === resp.data.deleteTask.taskID) !== -1,
-            );
-
-            if (taskGroupIdx !== -1) {
-              draftCache.findProject.taskGroups[taskGroupIdx].tasks = cache.findProject.taskGroups[
-                taskGroupIdx
-              ].tasks.filter(t => t.id !== resp.data.deleteTask.taskID);
-            }
-          }),
-        { projectID },
-      ),
-  });
 
   const [updateTaskName] = useUpdateTaskNameMutation();
 
-  const { loading, data, error } = useFindProjectQuery({
+  const { loading, data } = useFindProjectQuery({
     variables: { projectID },
   });
 
@@ -456,36 +157,14 @@ const Project = () => {
     },
   });
 
-  const [inviteProjectMembers] = useInviteProjectMembersMutation({
+  const [createProjectMember] = useCreateProjectMemberMutation({
     update: (client, response) => {
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
         cache =>
           produce(cache, draftCache => {
-            draftCache.findProject.members = [
+            draftCache.findProject.members.push({ ...response.data.createProjectMember.member });
-              ...cache.findProject.members,
-              ...response.data.inviteProjectMembers.members,
-            ];
-            draftCache.findProject.invitedMembers = [
-              ...cache.findProject.invitedMembers,
-              ...response.data.inviteProjectMembers.invitedMembers,
-            ];
-          }),
-        { projectID },
-      );
-    },
-  });
-  const [deleteInvitedProjectMember] = useDeleteInvitedProjectMemberMutation({
-    update: (client, response) => {
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findProject.invitedMembers = cache.findProject.invitedMembers.filter(
-              m => m.email !== response.data.deleteInvitedProjectMember.invitedMember.email,
-            );
           }),
         { projectID },
       );
@@ -526,9 +205,6 @@ const Project = () => {
       </>
     );
   }
-  if (error) {
-    history.push('/projects');
-  }
   if (data) {
     labelsRef.current = data.findProject.labels;
 
@@ -545,10 +221,6 @@ const Project = () => {
             deleteProjectMember({ variables: { userID, projectID } });
             hidePopup();
           }}
-          onRemoveInvitedFromBoard={email => {
-            deleteInvitedProjectMember({ variables: { projectID, email } });
-            hidePopup();
-          }}
           onSaveProjectName={projectName => {
             updateProjectName({ variables: { projectID, name: projectName } });
           }}
@@ -556,10 +228,8 @@ const Project = () => {
             showPopup(
               $target,
               <UserManagementPopup
-                projectID={projectID}
+                onAddProjectMember={userID => {
-                onInviteProjectMembers={members => {
+                  createProjectMember({ variables: { userID, projectID } });
-                  inviteProjectMembers({ variables: { projectID, members } });
-                  hidePopup();
                 }}
                 users={data.users}
                 projectMembers={data.findProject.members}
@@ -570,9 +240,8 @@ const Project = () => {
           menuType={[{ name: 'Board', link: location.pathname }]}
           currentTab={0}
           projectMembers={data.findProject.members}
-          projectInvitedMembers={data.findProject.invitedMembers}
           projectID={projectID}
-          teamID={data.findProject.team ? data.findProject.team.id : null}
+          teamID={data.findProject.team.id}
           name={data.findProject.name}
         />
         <Route path={`${match.path}`} exact render={() => <Redirect to={`${match.url}/board`} />} />
@@ -615,7 +284,6 @@ const Project = () => {
               }}
               onDeleteTask={deletedTask => {
                 deleteTask({ variables: { taskID: deletedTask.id } });
-                history.push(`${match.url}/board`);
               }}
               onOpenAddLabelPopup={(task, $targetRef) => {
                 taskLabelsRef.current = task.labels;

frontend/src/Projects/index.tsx

@@ -21,6 +21,33 @@ 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;
+  align-items: center;
+  flex-direction: column;
+`;
+
+const EmptyStateTitle = styled.h3`
+  color: #fff;
+  font-size: 18px;
+`;
+
+const EmptyStatePrompt = styled.span`
+  color: rgba(${props => props.theme.colors.text.primary});
+  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 = {
@@ -29,10 +56,6 @@ type CreateTeamFormProps = {
 
 const CreateTeamFormContainer = styled.form``;
 
-const CreateTeamButton = styled(Button)`
-  width: 100%;
-`;
-
 const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
   const { register, handleSubmit } = useForm<CreateTeamData>();
   const createTeam = (data: CreateTeamData) => {
@@ -186,6 +209,13 @@ const ProjectsContainer = styled.div`
   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;
@@ -193,6 +223,10 @@ const AddTeamButton = styled(Button)`
   right: 12px;
 `;
 
+const CreateFirstTeam = styled(Button)`
+  margin-top: 8px;
+`;
+
 type ShowNewProject = {
   open: boolean;
   initialTeamID: null | string;
@@ -226,20 +260,17 @@ const Projects = () => {
     },
   });
   if (loading) {
-    return <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />;
+    return (
+      <>
+        <span>loading</span>
+      </>
+    );
   }
 
   const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
   if (data && user) {
     const { projects, teams, organizations } = data;
     const organizationID = organizations[0].id ?? null;
-    const personalProjects = projects
-      .filter(p => p.team === null)
-      .sort((a, b) => {
-        const textA = a.name.toUpperCase();
-        const textB = b.name.toUpperCase();
-        return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
-      });
     const projectTeams = teams
       .sort((a, b) => {
         const textA = a.name.toUpperCase();
@@ -251,7 +282,7 @@ const Projects = () => {
           id: team.id,
           name: team.name,
           projects: projects
-            .filter(project => project.team && project.team.id === team.id)
+            .filter(project => project.team.id === team.id)
             .sort((a, b) => {
               const textA = a.name.toUpperCase();
               const textB = b.name.toUpperCase();
@@ -292,35 +323,39 @@ const Projects = () => {
                 Add Team
               </AddTeamButton>
             )}
-            <div>
+            {projectTeams.length === 0 && (
-              <ProjectSectionTitleWrapper>
+              <EmptyStateContent>
-                <ProjectSectionTitle>Personal Projects</ProjectSectionTitle>
+                <EmptyState width={425} height={425} />
-              </ProjectSectionTitleWrapper>
+                <EmptyStateTitle>No teams exist</EmptyStateTitle>
-              <ProjectList>
+                <EmptyStatePrompt>Create a new team to get started</EmptyStatePrompt>
-                {personalProjects.map((project, idx) => (
+                <CreateFirstTeam
-                  <ProjectListItem key={project.id}>
+                  variant="outline"
-                    <ProjectTile color={colors[idx % 5]} to={`/projects/${project.id}`}>
+                  onClick={$target => {
-                      <ProjectTileFade />
+                    showPopup(
-                      <ProjectTileDetails>
+                      $target,
-                        <ProjectTileName>{project.name}</ProjectTileName>
+                      <Popup
-                      </ProjectTileDetails>
+                        title="Create team"
-                    </ProjectTile>
+                        tab={0}
-                  </ProjectListItem>
+                        onClose={() => {
-                ))}
+                          hidePopup();
-                <ProjectListItem>
+                        }}
-                  <ProjectAddTile
+                      >
-                    onClick={() => {
+                        <CreateTeamForm
-                      setShowNewProject({ open: true, initialTeamID: 'no-team' });
+                          onCreateTeam={teamName => {
-                    }}
+                            if (organizationID) {
-                  >
+                              createTeam({ variables: { name: teamName, organizationID } });
-                    <ProjectTileFade />
+                              hidePopup();
-                    <ProjectAddTileDetails>
+                            }
-                      <ProjectTileName centered>Create new project</ProjectTileName>
+                          }}
-                    </ProjectAddTileDetails>
+                        />
-                  </ProjectAddTile>
+                      </Popup>,
-                </ProjectListItem>
+                    );
-              </ProjectList>
+                  }}
-            </div>
+                >
+                  Create new team
+                </CreateFirstTeam>
+              </EmptyStateContent>
+            )}
             {projectTeams.map(team => {
               return (
                 <div key={team.id}>
@@ -374,7 +409,7 @@ const Projects = () => {
                 initialTeamID={showNewProject.initialTeamID}
                 onCreateProject={(name, teamID) => {
                   if (user) {
-                    createProject({ variables: { teamID, name } });
+                    createProject({ variables: { teamID, name, userID: user.id } });
                     setShowNewProject({ open: false, initialTeamID: null });
                   }
                 }}

frontend/src/Teams/index.tsx

@@ -85,30 +85,18 @@ type TeamsRouteProps = {
 const Teams = () => {
   const { teamID } = useParams<TeamsRouteProps>();
   const history = useHistory();
-  const { loading, data } = useGetTeamQuery({
+  const { loading, data } = useGetTeamQuery({ variables: { teamID } });
-    variables: { teamID },
-    onCompleted: resp => {
-      document.title = `${resp.findTeam.name} | Taskcafé`;
-    },
-  });
   const { user } = useCurrentUser();
   const [currentTab, setCurrentTab] = useState(0);
   const match = useRouteMatch();
+  useEffect(() => {
+    document.title = 'Teams | Taskcafé';
+  }, []);
   if (loading) {
     return (
-      <GlobalTopNavbar
+      <>
-        menuType={[
+        <span>loading</span>
-          { name: 'Projects', link: `${match.url}` },
+      </>
-          { name: 'Members', link: `${match.url}/members` },
-        ]}
-        currentTab={currentTab}
-        onSetTab={tab => {
-          setCurrentTab(tab);
-        }}
-        onSaveProjectName={NOOP}
-        projectID={null}
-        name={null}
-      />
     );
   }
   if (data && user) {

frontend/src/index.tsx

@@ -8,28 +8,15 @@ import { HttpLink } from 'apollo-link-http';
 import { onError } from 'apollo-link-error';
 import { enableMapSet } from 'immer';
 import { ApolloLink, Observable, fromPromise } from 'apollo-link';
-import dayjs from 'dayjs';
+import moment from 'moment';
-import updateLocale from 'dayjs/plugin/updateLocale';
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import isBetween from 'dayjs/plugin/isBetween';
-import weekday from 'dayjs/plugin/weekday';
 import { getAccessToken, getNewToken, setAccessToken } from 'shared/utils/accessToken';
 import cache from './App/cache';
 import App from './App';
 
 // https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8
-
-dayjs.extend(isSameOrAfter);
-
-dayjs.extend(weekday);
-dayjs.extend(isBetween);
-dayjs.extend(customParseFormat);
 enableMapSet();
 
-dayjs.extend(updateLocale);
+moment.updateLocale('en', {
-
-dayjs.updateLocale('en', {
   week: {
     dow: 1, // First day of week is Monday
     doy: 7, // First week of year must contain 1 January (7 + 1 - 1)

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

@@ -51,9 +51,7 @@ export const Default = () => {
               },
             },
           ]}
-          invitedUsers={[]}
           onAddUser={action('add user')}
-          onDeleteInvitedUser={action('delete invited user')}
         />
       </ThemeProvider>
     </>

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

@@ -104,8 +104,8 @@ type TeamRoleManagerPopupProps = {
   user: User;
   users: Array<User>;
   warning?: string | null;
-  canChangeRole?: boolean;
+  canChangeRole: boolean;
-  onChangeRole?: (roleCode: RoleCode) => void;
+  onChangeRole: (roleCode: RoleCode) => void;
   updateUserPassword?: (user: TaskUser, password: string) => void;
   onDeleteUser?: (userID: string, newOwnerID: string | null) => void;
 };
@@ -530,10 +530,8 @@ type AdminProps = {
   onDeleteUser: (userID: string, newOwnerID: string | null) => void;
   onInviteUser: ($target: React.RefObject<HTMLElement>) => void;
   users: Array<User>;
-  invitedUsers: Array<InvitedUserAccount>;
   canInviteUser: boolean;
   onUpdateUserPassword: (user: TaskUser, password: string) => void;
-  onDeleteInvitedUser: (invitedUserID: string) => void;
 };
 
 const Admin: React.FC<AdminProps> = ({
@@ -542,9 +540,7 @@ const Admin: React.FC<AdminProps> = ({
   onUpdateUserPassword,
   canInviteUser,
   onDeleteUser,
-  onDeleteInvitedUser,
   onInviteUser,
-  invitedUsers,
   users,
 }) => {
   const warning =
@@ -561,7 +557,6 @@ const Admin: React.FC<AdminProps> = ({
         <TabNavContent>
           {items.map((item, idx) => (
             <NavItem
-              key={item.name}
               onClick={(tab, top) => {
                 if ($tabNav && $tabNav.current) {
                   const pos = $tabNav.current.getBoundingClientRect();
@@ -581,7 +576,7 @@ const Admin: React.FC<AdminProps> = ({
         <TabContent>
           <MemberListWrapper>
             <MemberListHeader>
-              <ListTitle>{`Members (${users.length + invitedUsers.length})`}</ListTitle>
+              <ListTitle>{`Members (${users.length})`}</ListTitle>
               <ListDesc>
                 Organization admins can create / manage / delete all projects & teams. Members only have access to teams
                 or projects they have been added to.
@@ -639,65 +634,6 @@ const Admin: React.FC<AdminProps> = ({
                   </MemberListItem>
                 );
               })}
-              {invitedUsers.map(member => {
-                return (
-                  <MemberListItem>
-                    <MemberProfile
-                      showRoleIcons
-                      size={32}
-                      onMemberProfile={NOOP}
-                      member={{
-                        id: member.id,
-                        fullName: member.email,
-                        profileIcon: {
-                          bgColor: '#fff',
-                          url: null,
-                          initials: member.email.charAt(0),
-                        },
-                      }}
-                    />
-                    <MemberListItemDetails>
-                      <MemberItemName>{member.email}</MemberItemName>
-                      <MemberItemUsername>Invited</MemberItemUsername>
-                    </MemberListItemDetails>
-                    <MemberItemOptions>
-                      <MemberItemOption
-                        variant="outline"
-                        onClick={$target => {
-                          showPopup(
-                            $target,
-                            <TeamRoleManagerPopup
-                              user={{
-                                id: member.id,
-                                fullName: member.email,
-                                profileIcon: {
-                                  bgColor: '#fff',
-                                  url: null,
-                                  initials: member.email.charAt(0),
-                                },
-                                member: {
-                                  teams: [],
-                                  projects: [],
-                                },
-                                owned: {
-                                  teams: [],
-                                  projects: [],
-                                },
-                              }}
-                              users={users}
-                              onDeleteUser={() => {
-                                onDeleteInvitedUser(member.id);
-                              }}
-                            />,
-                          );
-                        }}
-                      >
-                        Manage
-                      </MemberItemOption>
-                    </MemberItemOptions>
-                  </MemberListItem>
-                );
-              })}
             </MemberList>
           </MemberListWrapper>
         </TabContent>

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

@@ -35,15 +35,11 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
     `}
 `;
 
-const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
+const Filled = styled(Base)`
   background: rgba(${props => props.theme.colors[props.color]});
-  ${props =>
+  &:hover {
-    props.hoverVariant === 'boxShadow' &&
+    box-shadow: 0 8px 25px -8px rgba(${props => props.theme.colors[props.color]});
-    css`
+  }
-      &:hover {
-        box-shadow: 0 8px 25px -8px rgba(${props.theme.colors[props.color]});
-      }
-    `}
 `;
 const Outline = styled(Base)<{ invert: boolean }>`
   border: 1px solid rgba(${props => props.theme.colors[props.color]});
@@ -127,11 +123,9 @@ const Relief = styled(Base)`
   }
 `;
 
-type HoverVariant = 'boxShadow' | 'none';
 type ButtonProps = {
   fontSize?: string;
   variant?: 'filled' | 'outline' | 'flat' | 'lineDown' | 'gradient' | 'relief';
-  hoverVariant?: HoverVariant;
   color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
   disabled?: boolean;
   type?: 'button' | 'submit';
@@ -148,7 +142,6 @@ const Button: React.FC<ButtonProps> = ({
   invert = false,
   color = 'primary',
   variant = 'filled',
-  hoverVariant = 'boxShadow',
   type = 'button',
   justifyTextContent = 'center',
   icon,
@@ -165,15 +158,7 @@ const Button: React.FC<ButtonProps> = ({
   switch (variant) {
     case 'filled':
       return (
-        <Filled
+        <Filled ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
-          ref={$button}
-          hoverVariant={hoverVariant}
-          type={type}
-          onClick={handleClick}
-          className={className}
-          disabled={disabled}
-          color={color}
-        >
           {icon && icon}
           <Text hasIcon={typeof icon !== 'undefined'} justifyTextContent={justifyTextContent} fontSize={fontSize}>
             {children}

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

@@ -1,7 +1,9 @@
 import styled, { css, keyframes } from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { mixin } from 'shared/utils/styles';
 import TextareaAutosize from 'react-autosize-textarea';
-import { CheckCircle, CheckSquareOutline, Clock } from 'shared/icons';
+import { CheckCircle, CheckSquareOutline } from 'shared/icons';
+import { RefObject } from 'react';
 import TaskAssignee from 'shared/components/TaskAssignee';
 
 export const CardMember = styled(TaskAssignee)<{ zIndex: number }>`
@@ -18,9 +20,7 @@ export const ChecklistIcon = styled(CheckSquareOutline)<{ color: 'success' | 'no
       stroke: rgba(${props.theme.colors.success});
     `}
 `;
-export const ClockIcon = styled(Clock)<{ color: string }>`
+export const ClockIcon = styled(FontAwesomeIcon)``;
-  fill: ${props => props.color};
-`;
 
 export const EditorTextarea = styled(TextareaAutosize)`
   overflow: hidden;
@@ -147,11 +147,6 @@ export const ListCardLabelText = styled.span`
   line-height: 16px;
 `;
 
-export const ListCardLabelsWrapper = styled.div`
-  overflow: auto;
-  position: relative;
-`;
-
 export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
   ${props =>
     props.variant === 'small'
@@ -183,6 +178,8 @@ export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
 `;
 
 export const ListCardLabels = styled.div<{ toggleLabels: boolean; toggleDirection: 'expand' | 'shrink' }>`
+  overflow: auto;
+  position: relative;
   &:hover {
     opacity: 0.8;
   }

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

@@ -1,5 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Pencil, Eye, List } from 'shared/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPencilAlt, faList } from '@fortawesome/free-solid-svg-icons';
+import { faClock, faEye } from '@fortawesome/free-regular-svg-icons';
 import {
   EditorTextarea,
   CardMember,
@@ -18,7 +20,6 @@ import {
   ListCardLabels,
   ListCardLabel,
   ListCardLabelText,
-  ListCardLabelsWrapper,
   ListCardOperation,
   CardTitle,
   CardMembers,
@@ -153,42 +154,39 @@ const Card = React.forwardRef(
                 }
               }}
             >
-              <Pencil width={8} height={8} />
+              <FontAwesomeIcon onClick={onOperationClick} color="#c2c6dc" size="xs" icon={faPencilAlt} />
             </ListCardOperation>
           )}
           <ListCardDetails complete={complete ?? false}>
-            {labels && labels.length !== 0 && (
+            <ListCardLabels
-              <ListCardLabelsWrapper>
+              toggleLabels={toggleLabels}
-                <ListCardLabels
+              toggleDirection={toggleDirection}
-                  toggleLabels={toggleLabels}
+              onClick={e => {
-                  toggleDirection={toggleDirection}
+                e.stopPropagation();
-                  onClick={e => {
+                if (onCardLabelClick) {
-                    e.stopPropagation();
+                  onCardLabelClick();
-                    if (onCardLabelClick) {
+                }
-                      onCardLabelClick();
+              }}
-                    }
+            >
-                  }}
+              {labels &&
-                >
+                labels
-                  {labels
+                  .slice()
-                    .slice()
+                  .sort((a, b) => a.labelColor.position - b.labelColor.position)
-                    .sort((a, b) => a.labelColor.position - b.labelColor.position)
+                  .map(label => (
-                    .map(label => (
+                    <ListCardLabel
-                      <ListCardLabel
+                      onAnimationEnd={() => {
-                        onAnimationEnd={() => {
+                        if (setToggleLabels) {
-                          if (setToggleLabels) {
+                          setToggleLabels(false);
-                            setToggleLabels(false);
+                        }
-                          }
+                      }}
-                        }}
+                      variant={labelVariant ?? 'large'}
-                        variant={labelVariant ?? 'large'}
+                      color={label.labelColor.colorHex}
-                        color={label.labelColor.colorHex}
+                      key={label.id}
-                        key={label.id}
+                    >
-                      >
+                      <ListCardLabelText>{label.name}</ListCardLabelText>
-                        <ListCardLabelText>{label.name}</ListCardLabelText>
+                    </ListCardLabel>
-                      </ListCardLabel>
+                  ))}
-                    ))}
+            </ListCardLabels>
-                </ListCardLabels>
-              </ListCardLabelsWrapper>
-            )}
             {editable ? (
               <EditorContent>
                 {complete && <CompleteIcon width={16} height={16} />}
@@ -216,18 +214,18 @@ const Card = React.forwardRef(
             <ListCardBadges>
               {watched && (
                 <ListCardBadge>
-                  <Eye width={8} height={8} />
+                  <FontAwesomeIcon color="#6b778c" icon={faEye} size="xs" />
                 </ListCardBadge>
               )}
               {dueDate && (
                 <DueDateCardBadge isPastDue={dueDate.isPastDue}>
-                  <ClockIcon color={dueDate.isPastDue ? '#fff' : '#6b778c'} width={8} height={8} />
+                  <ClockIcon color={dueDate.isPastDue ? '#fff' : '#6b778c'} icon={faClock} size="xs" />
                   <ListCardBadgeText>{dueDate.formattedDate}</ListCardBadgeText>
                 </DueDateCardBadge>
               )}
               {description && (
                 <DescriptionBadge>
-                  <List width={8} height={8} />
+                  <FontAwesomeIcon color="#6b778c" icon={faList} size="xs" />
                 </DescriptionBadge>
               )}
               {checklists && (

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

@@ -1,15 +1,15 @@
 import styled from 'styled-components';
 import Button from 'shared/components/Button';
 import TextareaAutosize from 'react-autosize-textarea';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { mixin } from 'shared/utils/styles';
 
-export const CancelIconWrapper = styled.div`
+export const CancelIcon = styled(FontAwesomeIcon)`
   opacity: 0.8;
   cursor: pointer;
   font-size: 1.25em;
   padding-left: 5px;
 `;
-
 export const CardComposerWrapper = styled.div<{ isOpen: boolean }>`
   padding-bottom: 8px;
   display: ${props => (props.isOpen ? 'flex' : 'none')};

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

@@ -1,12 +1,12 @@
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
-import { Cross } from 'shared/icons';
 
 import {
   CardComposerWrapper,
-  CancelIconWrapper,
+  CancelIcon,
   AddCardButton,
   ComposerControls,
   ComposerControlsSaveSection,
@@ -26,9 +26,10 @@ const CardComposer = ({ isOpen, onCreateCard, onClose }: Props) => {
   useOnOutsideClick($cardRef, true, onClose, null);
   useOnEscapeKeyDown(isOpen, onClose);
   return (
-    <CardComposerWrapper isOpen={isOpen} ref={$cardRef}>
+    <CardComposerWrapper isOpen={isOpen}>
       <Card
         title={cardName}
+        ref={$cardRef}
         taskID=""
         taskGroupID=""
         editable
@@ -51,9 +52,7 @@ const CardComposer = ({ isOpen, onCreateCard, onClose }: Props) => {
           >
             Add Card
           </AddCardButton>
-          <CancelIconWrapper onClick={() => onClose()}>
+          <CancelIcon onClick={onClose} icon={faTimes} color="#42526e" />
-            <Cross width={12} height={12} />
-          </CancelIconWrapper>
         </ComposerControlsSaveSection>
         <ComposerControlsActionsSection />
       </ComposerControls>

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, forwardRef } from 'react';
-import dayjs from 'dayjs';
+import moment from 'moment';
 import styled from 'styled-components';
 import DatePicker from 'react-datepicker';
 import _ from 'lodash';
@@ -110,12 +110,12 @@ const HeaderActions = styled.div`
 `;
 
 const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
-  const now = dayjs();
+  const now = moment();
   const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
   const [startDate, setStartDate] = useState(new Date());
 
   useEffect(() => {
-    const newDate = dayjs(startDate).format('YYYY-MM-DD');
+    const newDate = moment(startDate).format('YYYY-MM-DD');
     setValue('endDate', newDate);
   }, [startDate]);
 
@@ -135,7 +135,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
     'December',
   ];
   const saveDueDate = (data: any) => {
-    const newDate = dayjs(`${data.endDate} ${dayjs(data.endTime).format('h:mm A')}`, '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());
     }

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

@@ -78,7 +78,6 @@ const Icon = styled.div`
 
 type InputProps = {
   variant?: 'normal' | 'alternate';
-  disabled?: boolean;
   label?: string;
   width?: string;
   floatingLabel?: boolean;
@@ -117,7 +116,6 @@ function useCombinedRefs(...refs: any) {
 const Input = React.forwardRef(
   (
     {
-      disabled = false,
       width = 'auto',
       variant = 'normal',
       type = 'text',
@@ -162,7 +160,6 @@ const Input = React.forwardRef(
           onChange={e => {
             setHasValue((e.currentTarget.value !== '' || floatingLabel) ?? false);
           }}
-          disabled={disabled}
           hasValue={hasValue}
           ref={combinedRef}
           id={id}

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

@@ -73,6 +73,7 @@ export const HeaderName = styled(TextareaAutosize)`
   box-shadow: none;
   font-weight: 600;
   margin: -4px 0;
+  padding: 4px 8px;
 
   letter-spacing: normal;
   word-spacing: normal;

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

@@ -10,7 +10,7 @@ import {
   getNewDraggablePosition,
   getAfterDropDraggableList,
 } from 'shared/utils/draggables';
-import dayjs from 'dayjs';
+import moment from 'moment';
 import { TaskSorting, TaskSortingType, TaskSortingDirection, sortTasks } from 'shared/utils/sorting';
 
 import { Container, BoardContainer, BoardWrapper } from './Styles';
@@ -51,7 +51,7 @@ export type TaskStatusFilter = {
 
 export interface TaskMetaFilterName {
   meta: TaskMeta;
-  value?: string | dayjs.Dayjs | null;
+  value?: string | moment.Moment | null;
   id?: string | null;
 }
 
@@ -104,30 +104,30 @@ function shouldStatusFilter(task: Task, filter: TaskStatusFilter) {
     return true;
   }
   if (filter.status === TaskStatus.COMPLETE && task.completedAt && task.complete === true) {
-    const completedAt = dayjs(task.completedAt);
+    const completedAt = moment(task.completedAt);
-    const REFERENCE = dayjs();
+    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, 'day')
+          .subtract(1, 'days')
           .startOf('day');
         return completedAt.isSameOrAfter(YESTERDAY, 'd');
       case TaskSince.ONE_WEEK:
         const ONE_WEEK = REFERENCE.clone()
-          .subtract(7, 'day')
+          .subtract(7, 'days')
           .startOf('day');
         return completedAt.isSameOrAfter(ONE_WEEK, 'd');
       case TaskSince.TWO_WEEKS:
         const TWO_WEEKS = REFERENCE.clone()
-          .subtract(14, 'day')
+          .subtract(14, 'days')
           .startOf('day');
         return completedAt.isSameOrAfter(TWO_WEEKS, 'd');
       case TaskSince.THREE_WEEKS:
         const THREE_WEEKS = REFERENCE.clone()
-          .subtract(21, 'day')
+          .subtract(21, 'days')
           .startOf('day');
         return completedAt.isSameOrAfter(THREE_WEEKS, 'd');
       default:
@@ -353,7 +353,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                                   task.dueDate
                                                     ? {
                                                         isPastDue: false,
-                                                        formattedDate: dayjs(task.dueDate).format('MMM D, YYYY'),
+                                                        formattedDate: moment(task.dueDate).format('MMM D, YYYY'),
                                                       }
                                                     : undefined
                                                 }

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

@@ -1,5 +1,5 @@
 import { TaskMetaFilters, DueDateFilterType } from 'shared/components/Lists';
-import dayjs from 'dayjs';
+import moment from 'moment';
 
 enum ShouldFilter {
   NO_FILTER,
@@ -24,8 +24,8 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
       isFiltered = shouldFilter(!(task.dueDate && task.dueDate !== null));
     }
     if (task.dueDate) {
-      const taskDueDate = dayjs(task.dueDate);
+      const taskDueDate = moment(task.dueDate);
-      const today = dayjs();
+      const today = moment();
       let start;
       let end;
       switch (filters.dueDate.type) {
@@ -40,7 +40,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
             taskDueDate.isBefore(
               today
                 .clone()
-                .add(1, 'day')
+                .add(1, 'days')
                 .endOf('day'),
             ),
           );
@@ -60,12 +60,12 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
           start = today
             .clone()
             .weekday(0)
-            .add(7, 'day')
+            .add(7, 'days')
             .startOf('day');
           end = today
             .clone()
             .weekday(6)
-            .add(7, 'day')
+            .add(7, 'days')
             .endOf('day');
           isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
           break;
@@ -73,7 +73,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
           start = today.clone().startOf('day');
           end = today
             .clone()
-            .add(7, 'day')
+            .add(7, 'days')
             .endOf('day');
           isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
           break;
@@ -81,7 +81,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
           start = today.clone().startOf('day');
           end = today
             .clone()
-            .add(14, 'day')
+            .add(14, 'days')
             .endOf('day');
           isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
           break;
@@ -89,7 +89,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
           start = today.clone().startOf('day');
           end = today
             .clone()
-            .add(21, 'day')
+            .add(21, 'days')
             .endOf('day');
           isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
           break;

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import NormalizeStyles from 'App/NormalizeStyles';
-import BaseStyles from 'App/BaseStyles';
-import LoadingSpinner from '.';
-
-export default {
-  component: LoadingSpinner,
-  title: 'Login',
-  parameters: {
-    backgrounds: [
-      { name: 'white', value: '#ffffff' },
-      { name: 'gray', value: '#cdd3e1', default: true },
-    ],
-  },
-};
-export const Default = () => {
-  return (
-    <>
-      <NormalizeStyles />
-      <BaseStyles />
-      <LoadingSpinner />
-    </>
-  );
-};

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

@@ -1,42 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-
-const LoadingSpinnerKeyframes = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-
-export const LoadingSpinnerWrapper = styled.div<{ color: string; size: string; borderSize: string; thickness: string }>`
-  display: inline-block;
-  position: relative;
-  width: ${props => props.borderSize};
-  height: ${props => props.borderSize};
-
-  & > div {
-    box-sizing: border-box;
-    display: block;
-    position: absolute;
-    width: ${props => props.size};
-    height: ${props => props.size};
-    margin: ${props => props.thickness};
-    border: ${props => props.thickness} solid rgba(${props => props.theme.colors[props.color]});
-    border-radius: 50%;
-    animation: 1.2s ${LoadingSpinnerKeyframes} cubic-bezier(0.5, 0, 0.5, 1) infinite;
-    border-color: rgba(${props => props.theme.colors[props.color]}) transparent transparent transparent;
-  }
-
-  & > div:nth-child(1) {
-    animation-delay: -0.45s;
-  }
-  & > div:nth-child(2) {
-    animation-delay: -0.3s;
-  }
-  & > div:nth-child(3) {
-    animation-delay: -0.15s;
-  }
-`;
-
-export default LoadingSpinnerWrapper;

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

@@ -1,41 +0,0 @@
-import React from 'react';
-
-import { LoadingSpinnerWrapper} from './Styles';
-
-type LoadingSpinnerProps = {
-  color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
-  size?: string;
-  borderSize?: string;
-  thickness?: string;
-};
-
-/**
- * The default parameters may not be applicable to every scenario
- *
- * While borderSize and size should be a single prop,
- * it is currently not as such because it would require math to be done to strings
- * e.g "80px - 16"
- *
- *
- * @param color
- * @param size The size of the spinner. It is recommended to be at least 16 px less than the borderSize
- * @param thickness
- * @param borderSize Border size affects the size of the border which if is too small may break the spinner.
- * @constructor
- */
-const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
-  color = 'primary',
-  size = '64px',
-  thickness = '8px',
-  borderSize = '80px',
-}) => {
-  return (
-      <LoadingSpinnerWrapper color={color} size={size} thickness={thickness} borderSize={borderSize}>
-        <div />
-        <div />
-        <div />
-      </LoadingSpinnerWrapper>
-  );
-};
-
-export default LoadingSpinner;

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

@@ -3,7 +3,6 @@ import AccessAccount from 'shared/undraw/AccessAccount';
 import { User, Lock, Taskcafe } from 'shared/icons';
 import { useForm } from 'react-hook-form';
 
-import LoadingSpinner from 'shared/components/LoadingSpinner';
 import {
   Form,
   LogoWrapper,
@@ -74,7 +73,6 @@ const Login = ({ onSubmit }: LoginProps) => {
 
               <ActionButtons>
                 <RegisterButton variant="outline">Register</RegisterButton>
-                {!isComplete && <LoadingSpinner size="32px" thickness="2px" borderSize="48px" />}
                 <LoginButton type="submit" disabled={!isComplete}>
                   Login
                 </LoginButton>

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

@@ -47,7 +47,6 @@ const permissions = [
 type MiniProfileProps = {
   bio: string;
   user: TaskUser;
-  invited?: boolean;
   onRemoveFromTask?: () => void;
   onChangeRole?: (roleCode: RoleCode) => void;
   onRemoveFromBoard?: () => void;
@@ -57,7 +56,6 @@ type MiniProfileProps = {
 const MiniProfile: React.FC<MiniProfileProps> = ({
   user,
   bio,
-  invited,
   canChangeRole,
   onRemoveFromTask,
   onChangeRole,
@@ -76,7 +74,7 @@ const MiniProfile: React.FC<MiniProfileProps> = ({
           )}
           <ProfileInfo>
             <InfoTitle>{user.fullName}</InfoTitle>
-            {invited ? <InfoUsername>Invited</InfoUsername> : <InfoUsername>{`@${user.username}`}</InfoUsername>}
+            <InfoUsername>{`@${user.username}`}</InfoUsername>
             <InfoBio>{bio}</InfoBio>
           </ProfileInfo>
         </Profile>

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

@@ -217,13 +217,13 @@ type NewProjectProps = {
   initialTeamID: string | null;
   teams: Array<Team>;
   onClose: () => void;
-  onCreateProject: (projectName: string, teamID: string | null) => void;
+  onCreateProject: (projectName: string, teamID: string) => void;
 };
 
 const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose, onCreateProject }) => {
   const [projectName, setProjectName] = useState('');
   const [team, setTeam] = useState<null | string>(initialTeamID);
-  const options = [{ label: 'No team', value: 'no-team' }, ...teams.map(t => ({ label: t.name, value: t.id }))];
+  const options = teams.map(t => ({ label: t.name, value: t.id }));
   return (
     <Overlay>
       <Content>
@@ -271,8 +271,8 @@ const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose,
             </ProjectInfo>
             <CreateButton
               onClick={() => {
-                if (projectName !== '') {
+                if (team && projectName !== '') {
-                  onCreateProject(projectName, team === 'no-team' ? null : team);
+                  onCreateProject(projectName, team);
                 }
               }}
             >

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

@@ -16,7 +16,7 @@ function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused:
   return null;
 }
 
-export const colourStyles = {
+const colourStyles = {
   control: (styles: any, data: any) => {
     return {
       ...styles,

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

@@ -27,7 +27,6 @@ export const Default = () => {
       <BaseStyles />
       <Settings
         profile={profile}
-        onChangeUserInfo={action('change user info')}
         onResetPassword={action('reset password')}
         onProfileAvatarRemove={action('remove')}
         onProfileAvatarChange={action('profile avatar change')}

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

@@ -10,11 +10,6 @@ const PasswordInput = styled(Input)`
   margin-bottom: 0;
 `;
 
-const UserInfoInput = styled(Input)`
-  margin-top: 30px;
-  margin-bottom: 0;
-`;
-
 const FormError = styled.span`
   font-size: 12px;
   color: rgba(${props => props.theme.colors.warning});
@@ -245,7 +240,6 @@ const SaveButton = styled(Button)`
 type SettingsProps = {
   onProfileAvatarChange: () => void;
   onProfileAvatarRemove: () => void;
-  onChangeUserInfo: (data: UserInfoData, done: () => void) => void;
   onResetPassword: (password: string, done: () => void) => void;
   profile: TaskUser;
 };
@@ -306,93 +300,9 @@ const ResetPasswordTab: React.FC<ResetPasswordTabProps> = ({ onResetPassword })
   );
 };
 
-type UserInfoData = {
-  full_name: string;
-  bio: string;
-  initials: string;
-  email: string;
-};
-type UserInfoTabProps = {
-  profile: TaskUser;
-  onProfileAvatarChange: () => void;
-  onProfileAvatarRemove: () => void;
-  onChangeUserInfo: (data: UserInfoData, done: () => void) => void;
-};
-
-const EMAIL_PATTERN = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i;
-const INITIALS_PATTERN = /^[a-zA-Z]{2,3}$/i;
-
-const UserInfoTab: React.FC<UserInfoTabProps> = ({
-  profile,
-  onProfileAvatarRemove,
-  onProfileAvatarChange,
-  onChangeUserInfo,
-}) => {
-  const [active, setActive] = useState(true);
-  const { register, handleSubmit, errors } = useForm<UserInfoData>();
-  const done = () => {
-    setActive(true);
-  };
-  return (
-    <>
-      <AvatarSettings
-        onProfileAvatarRemove={onProfileAvatarRemove}
-        onProfileAvatarChange={onProfileAvatarChange}
-        profile={profile.profileIcon}
-      />
-      <form
-        onSubmit={handleSubmit(data => {
-          setActive(false);
-          onChangeUserInfo(data, done);
-        })}
-      >
-        <UserInfoInput
-          ref={register({ required: 'Full name is required' })}
-          name="full_name"
-          defaultValue={profile.fullName}
-          width="100%"
-          label="Name"
-        />
-        {errors.full_name && <FormError>{errors.full_name.message}</FormError>}
-        <UserInfoInput
-          defaultValue={profile.profileIcon && profile.profileIcon.initials ? profile.profileIcon.initials : ''}
-          ref={register({
-            required: 'Initials is required',
-            pattern: { value: INITIALS_PATTERN, message: 'Intials must be between two to four characters' },
-          })}
-          name="initials"
-          width="100%"
-          label="Initials "
-        />
-        {errors.initials && <FormError>{errors.initials.message}</FormError>}
-        <UserInfoInput disabled defaultValue={profile.username ?? ''} width="100%" label="Username " />
-        <UserInfoInput
-          width="100%"
-          name="email"
-          ref={register({
-            required: 'Email is required',
-            pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
-          })}
-          defaultValue={profile.email ?? ''}
-          label="Email"
-        />
-        {errors.email && <FormError>{errors.email.message}</FormError>}
-        <UserInfoInput width="100%" name="bio" ref={register()} defaultValue={profile.bio ?? ''} label="Bio" />
-        {errors.bio && <FormError>{errors.bio.message}</FormError>}
-        <SettingActions>
-          <SaveButton disabled={!active} type="submit">
-            Save Change
-          </SaveButton>
-        </SettingActions>
-      </form>
-    </>
-  );
-};
-
 const Settings: React.FC<SettingsProps> = ({
   onProfileAvatarRemove,
   onProfileAvatarChange,
-  onChangeUserInfo,
   onResetPassword,
   profile,
 }) => {
@@ -405,7 +315,6 @@ const Settings: React.FC<SettingsProps> = ({
         <TabNavContent>
           {items.map((item, idx) => (
             <NavItem
-              key={item.name}
               onClick={(tab, top) => {
                 if ($tabNav && $tabNav.current) {
                   const pos = $tabNav.current.getBoundingClientRect();
@@ -423,12 +332,23 @@ const Settings: React.FC<SettingsProps> = ({
       </TabNav>
       <TabContentWrapper>
         <Tab tab={0} currentTab={currentTab}>
-          <UserInfoTab
+          <AvatarSettings
-            onProfileAvatarChange={onProfileAvatarChange}
             onProfileAvatarRemove={onProfileAvatarRemove}
-            profile={profile}
+            onProfileAvatarChange={onProfileAvatarChange}
-            onChangeUserInfo={onChangeUserInfo}
+            profile={profile.profileIcon}
           />
+          <Input defaultValue={profile.fullName} width="100%" label="Name" />
+          <Input
+            defaultValue={profile.profileIcon && profile.profileIcon.initials ? profile.profileIcon.initials : ''}
+            width="100%"
+            label="Initials "
+          />
+          <Input defaultValue={profile.username ?? ''} width="100%" label="Username " />
+          <Input width="100%" label="Email" />
+          <Input width="100%" label="Bio" />
+          <SettingActions>
+            <SaveButton>Save Change</SaveButton>
+          </SettingActions>
         </Tab>
         <Tab tab={1} currentTab={currentTab}>
           <ResetPasswordTab onResetPassword={onResetPassword} />

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

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { DoubleChevronUp, Crown } from 'shared/icons';
 
 export const AdminIcon = styled(DoubleChevronUp)`
@@ -24,12 +24,7 @@ const TaskDetailAssignee = styled.div`
   position: relative;
 `;
 
-export const Wrapper = styled.div<{
+export const Wrapper = styled.div<{ size: number | string; bgColor: string | null; backgroundURL: string | null }>`
-  size: number | string;
-  bgColor: string | null;
-  backgroundURL: string | null;
-  hasClick: boolean;
-}>`
   width: ${props => props.size}px;
   height: ${props => props.size}px;
   border-radius: 9999px;
@@ -42,60 +37,33 @@ export const Wrapper = styled.div<{
   background-size: contain;
   font-size: 14px;
   font-weight: 400;
-  ${props =>
+  &:hover {
-    props.hasClick &&
+    opacity: 0.8;
-    css`
+  }
-      &:hover {
-        opacity: 0.8;
-      }
-    `}
 `;
 
 type TaskAssigneeProps = {
   size: number | string;
   showRoleIcons?: boolean;
   member: TaskUser;
-  invited?: boolean;
+  onMemberProfile: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
-  onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
   className?: string;
 };
 
-const TaskAssignee: React.FC<TaskAssigneeProps> = ({
+const TaskAssignee: React.FC<TaskAssigneeProps> = ({ showRoleIcons, member, onMemberProfile, size, className }) => {
-  showRoleIcons,
-  member,
-  invited,
-  onMemberProfile,
-  size,
-  className,
-}) => {
   const $memberRef = useRef<HTMLDivElement>(null);
-  let profileIcon: ProfileIcon = {
-    url: null,
-    bgColor: null,
-    initials: null,
-  };
-  if (member.profileIcon) {
-    profileIcon = member.profileIcon;
-  }
   return (
     <TaskDetailAssignee
       className={className}
       ref={$memberRef}
       onClick={e => {
         e.stopPropagation();
-        if (onMemberProfile) {
+        onMemberProfile($memberRef, member.id);
-          onMemberProfile($memberRef, member.id);
-        }
       }}
       key={member.id}
     >
-      <Wrapper
+      <Wrapper backgroundURL={member.profileIcon.url ?? null} bgColor={member.profileIcon.bgColor ?? null} size={size}>
-        hasClick={typeof onMemberProfile !== undefined}
+        {(!member.profileIcon.url && member.profileIcon.initials) ?? ''}
-        backgroundURL={profileIcon.url ?? null}
-        bgColor={profileIcon.bgColor ?? null}
-        size={size}
-      >
-        {(!profileIcon.url && profileIcon.initials) ?? ''}
       </Wrapper>
       {showRoleIcons && member.role && member.role.code === 'admin' && <AdminIcon width={10} height={10} />}
       {showRoleIcons && member.role && member.role.code === 'owner' && <OwnerIcon width={10} height={10} />}

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

@@ -585,30 +585,3 @@ export const ActivityItemLog = styled.span`
   margin-left: 2px;
   color: rgba(${props => props.theme.colors.text.primary});
 `;
-
-export const ViewRawButton = styled.button`
-  border-radius: 3px;
-  padding: 8px 12px;
-  display: flex;
-  position: absolute;
-  right: 4px;
-  bottom: -24px;
-  cursor: pointer;
-  color: rgba(${props => props.theme.colors.text.primary}, 0.25);
-  &:hover {
-    color: rgba(${props => props.theme.colors.text.primary});
-  }
-`;
-
-export const TaskDetailsEditor = styled(TextareaAutosize)`
-  min-height: 108px;
-  color: #c2c6dc;
-  background: #262c49;
-  border-radius: 3px;
-  line-height: 20px;
-  margin-left: 32px;
-  margin-right: 32px;
-  padding: 9px 8px 7px 8px;
-  outline: none;
-  border: none;
-`;

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

@@ -17,7 +17,7 @@ import dark from 'shared/utils/editorTheme';
 import styled from 'styled-components';
 
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-import dayjs from 'dayjs';
+import moment from 'moment';
 
 import Task from 'shared/icons/Task';
 import {
@@ -30,7 +30,6 @@ import {
   AssignUserLabel,
   AssignUsersButton,
   AssignedUsersSection,
-  ViewRawButton,
   DueDateTitle,
   Container,
   LeftSidebar,
@@ -66,7 +65,6 @@ import {
   CommentProfile,
   CommentInnerWrapper,
   ActivitySection,
-  TaskDetailsEditor,
 } from './Styles';
 import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist';
 import onDragEnd from './onDragEnd';
@@ -155,7 +153,6 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
     return true;
   });
   const [saveTimeout, setSaveTimeout] = useState<any>(null);
-  const [showRaw, setShowRaw] = useState(false);
   const [showCommentActions, setShowCommentActions] = useState(false);
   const taskDescriptionRef = useRef(task.description ?? '');
   const $noMemberBtn = useRef<HTMLDivElement>(null);
@@ -172,7 +169,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
           <LeftSidebarSection>
             <SidebarTitle>TASK GROUP</SidebarTitle>
             <SidebarButton>
-              <SidebarButtonText>{task.taskGroup.name}</SidebarButtonText>
+              <SidebarButtonText>Release 0.1.0</SidebarButtonText>
             </SidebarButton>
             <DueDateTitle>DUE DATE</DueDateTitle>
             <SidebarButton
@@ -182,7 +179,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
               }}
             >
               {task.dueDate ? (
-                <SidebarButtonText>{dayjs(task.dueDate).format('MMM D [at] h:mm A')}</SidebarButtonText>
+                <SidebarButtonText>{moment(task.dueDate).format('MMM D [at] h:mm A')}</SidebarButtonText>
               ) : (
                 <SidebarButtonText>No due date</SidebarButtonText>
               )}
@@ -312,34 +309,28 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
         </HeaderContainer>
         <InnerContentContainer>
           <DescriptionContainer>
-            {showRaw ? (
+            <EditorContainer
-              <TaskDetailsEditor value={taskDescriptionRef.current} />
+              onClick={e => {
-            ) : (
+                if (!editTaskDescription) {
-              <EditorContainer
+                  setEditTaskDescription(true);
-                onClick={e => {
+                }
-                  if (!editTaskDescription) {
+              }}
-                    setEditTaskDescription(true);
+            >
-                  }
+              <Editor
+                defaultValue={task.description ?? ''}
+                theme={dark}
+                readOnly={!editTaskDescription}
+                autoFocus
+                onChange={value => {
+                  setSaveTimeout(() => {
+                    clearTimeout(saveTimeout);
+                    return setTimeout(saveDescription, 2000);
+                  });
+                  const text = value();
+                  taskDescriptionRef.current = text;
                 }}
-              >
+              />
-                <Editor
+            </EditorContainer>
-                  defaultValue={task.description ?? ''}
-                  theme={dark}
-                  readOnly={!editTaskDescription}
-                  autoFocus
-                  onChange={value => {
-                    setSaveTimeout(() => {
-                      clearTimeout(saveTimeout);
-                      return setTimeout(saveDescription, 2000);
-                    });
-                    const text = value();
-                    taskDescriptionRef.current = text;
-                  }}
-                />
-              </EditorContainer>
-            )}
-
-            <ViewRawButton onClick={() => setShowRaw(!showRaw)}>{showRaw ? 'Show editor' : 'Show raw'}</ViewRawButton>
           </DescriptionContainer>
           <ChecklistSection>
             <DragDropContext onDragEnd={result => onDragEnd(result, task, onChecklistDrop, onChecklistItemDrop)}>

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

@@ -251,8 +251,8 @@ export const NavSeparator = styled.div`
 export const LogoContainer = styled(Link)`
   display: block;
   left: 50%;
-  right: 50%;
   position: absolute;
+  transform: translateX(-50%);
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { Home, Star, Bell, AngleDown, BarChart, CheckCircle, ListUnordered } from 'shared/icons';
+import { Home, Star, Bell, AngleDown, BarChart, CheckCircle } from 'shared/icons';
 import styled from 'styled-components';
 import ProfileIcon from 'shared/components/ProfileIcon';
 import { usePopup } from 'shared/components/PopupMenu';
@@ -30,7 +30,6 @@ import {
   ProjectMember,
   ProjectMembers,
 } from './Styles';
-import { useHistory } from 'react-router';
 
 type IconContainerProps = {
   disabled?: boolean;
@@ -174,11 +173,8 @@ type NavBarProps = {
   user: TaskUser | null;
   onOpenSettings: ($target: React.RefObject<HTMLElement>) => void;
   projectMembers?: Array<TaskUser> | null;
-  projectInvitedMembers?: Array<InvitedUser> | null;
-
   onRemoveFromBoard?: (userID: string) => void;
   onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
-  onInvitedMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, email: string) => void;
 };
 
 const NavBar: React.FC<NavBarProps> = ({
@@ -188,12 +184,10 @@ const NavBar: React.FC<NavBarProps> = ({
   onChangeProjectOwner,
   currentTab,
   onMemberProfile,
-  onInvitedMemberProfile,
   canEditProjectName = false,
   onOpenProjectFinder,
   onFavorite,
   onSetTab,
-  projectInvitedMembers,
   onChangeRole,
   name,
   onRemoveFromBoard,
@@ -210,7 +204,6 @@ const NavBar: React.FC<NavBarProps> = ({
       onProfileClick($target);
     }
   };
-  const history = useHistory();
   const { showPopup } = usePopup();
   return (
     <NavbarWrapper>
@@ -252,38 +245,19 @@ const NavBar: React.FC<NavBarProps> = ({
           <TaskcafeTitle>Taskcafé</TaskcafeTitle>
         </LogoContainer>
         <GlobalActions>
-          {projectMembers && projectInvitedMembers && onMemberProfile && onInvitedMemberProfile && (
+          {projectMembers && onMemberProfile && (
             <>
               <ProjectMembers>
                 {projectMembers.map((member, idx) => (
                   <ProjectMember
                     showRoleIcons
-                    zIndex={projectMembers.length - idx + projectInvitedMembers.length}
+                    zIndex={projectMembers.length - idx}
                     key={member.id}
                     size={28}
                     member={member}
                     onMemberProfile={onMemberProfile}
                   />
                 ))}
-                {projectInvitedMembers.map((member, idx) => (
-                  <ProjectMember
-                    showRoleIcons
-                    zIndex={projectInvitedMembers.length - idx}
-                    key={member.email}
-                    size={28}
-                    invited
-                    member={{
-                      id: member.email,
-                      fullName: member.email,
-                      profileIcon: {
-                        url: null,
-                        initials: member.email.charAt(0),
-                        bgColor: '#fff',
-                      },
-                    }}
-                    onMemberProfile={onInvitedMemberProfile}
-                  />
-                ))}
                 {canInviteUser && (
                   <InviteButton
                     onClick={$target => {
@@ -309,9 +283,6 @@ const NavBar: React.FC<NavBarProps> = ({
           <IconContainer disabled onClick={NOOP}>
             <CheckCircle width={20} height={20} />
           </IconContainer>
-          <IconContainer onClick={() => history.push('/outline')}>
-            <ListUnordered width={20} height={20} />
-          </IconContainer>
           <IconContainer disabled onClick={onNotificationClick}>
             <Bell color="#c2c6dc" size={20} />
           </IconContainer>

frontend/src/shared/graphql/createProject.graphqls

@@ -1,5 +1,5 @@
-mutation createProject($teamID: UUID, $name: String!) {
+mutation createProject($teamID: UUID!, $userID: UUID!, $name: String!) {
-  createProject(input: {teamID: $teamID, name: $name}) {
+  createProject(input: {teamID: $teamID, userID: $userID, name: $name}) {
     id
     name
     team {

frontend/src/shared/graphql/createTaskGroup.graphqls

@@ -1,4 +1,4 @@
-mutation createTaskGroup( $projectID: UUID!, $name: String!, $position: Float! ) {
+mutation createTaskGroup( $projectID: String!, $name: String!, $position: Float! ) {
   createTaskGroup(
     input: { projectID: $projectID, name: $name, position: $position }
   ) {

frontend/src/shared/graphql/deleteTask.graphqls

@@ -1,4 +1,4 @@
-mutation deleteTask($taskID: UUID!) {
+mutation deleteTask($taskID: String!) {
   deleteTask(input: { taskID: $taskID }) {
     taskID
   }

frontend/src/shared/graphql/findProject.ts

@@ -22,10 +22,6 @@ query findProject($projectID: UUID!) {
         bgColor
       }
     }
-    invitedMembers {
-      email
-      invitedOn
-    }
     labels {
       id
       createdDate

frontend/src/shared/graphql/findTask.graphqls

@@ -8,7 +8,6 @@ query findTask($taskID: UUID!) {
     complete
     taskGroup {
       id
-      name
     }
     badges {
       checklist {

frontend/src/shared/graphql/me.graphqls

@@ -3,9 +3,6 @@ query me {
     user {
       id
       fullName
-      username
-      email
-      bio
       profileIcon {
         initials
         bgColor

frontend/src/shared/graphql/project/createProjectMember.ts

@@ -0,0 +1,25 @@
+import gql from 'graphql-tag';
+
+export const CREATE_PROJECT_MEMBER_MUTATION = gql`
+  mutation createProjectMember($projectID: UUID!, $userID: UUID!) {
+    createProjectMember(input: { projectID: $projectID, userID: $userID }) {
+      ok
+      member {
+        id
+        fullName
+        profileIcon {
+          url
+          initials
+          bgColor
+        }
+        username
+        role {
+          code
+          name
+        }
+      }
+    }
+  }
+`;
+
+export default CREATE_PROJECT_MEMBER_MUTATION;

frontend/src/shared/graphql/project/deleteProjectInvitedMember.ts

@@ -1,13 +0,0 @@
-import gql from 'graphql-tag';
-
-export const DELETE_PROJECT_INVITED_MEMBER_MUTATION = gql`
-  mutation deleteInvitedProjectMember($projectID: UUID!, $email: String!) {
-    deleteInvitedProjectMember(input: { projectID: $projectID, email: $email }) {
-      invitedMember {
-        email
-      }
-    }
-  }
-`;
-
-export default DELETE_PROJECT_INVITED_MEMBER_MUTATION;

frontend/src/shared/graphql/project/inviteProjectMembers.ts

@@ -1,29 +0,0 @@
-import gql from 'graphql-tag';
-
-export const INVITE_PROJECT_MEMBERS_MUTATION = gql`
-  mutation inviteProjectMembers($projectID: UUID!, $members: [MemberInvite!]!) {
-    inviteProjectMembers(input: { projectID: $projectID, members: $members }) {
-      ok
-      invitedMembers {
-        email
-        invitedOn
-      }
-      members {
-        id
-        fullName
-        profileIcon {
-          url
-          initials
-          bgColor
-        }
-        username
-        role {
-          code
-          name
-        }
-      }
-    }
-  }
-`;
-
-export default INVITE_PROJECT_MEMBERS_MUTATION;

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

@@ -2,7 +2,7 @@ import gql from 'graphql-tag';
 import TASK_FRAGMENT from '../fragments/task';
 
 const CREATE_TASK_MUTATION = gql`
-  mutation createTask($taskGroupID: UUID!, $name: String!, $position: Float!) {
+  mutation createTask($taskGroupID: String!, $name: String!, $position: Float!) {
     createTask(input: { taskGroupID: $taskGroupID, name: $name, position: $position }) {
       ...TaskFields
     }

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

@@ -1,11 +1,11 @@
 import gql from 'graphql-tag';
 
 const UPDATE_TASK_CHECKLIST_ITEM_LOCATION_MUTATION = gql`
-  mutation updateTaskChecklistItemLocation($taskChecklistID: UUID!, $taskChecklistItemID: UUID!, $position: Float!) {
+  mutation updateTaskChecklistItemLocation($checklistID: UUID!, $checklistItemID: UUID!, $position: Float!) {
     updateTaskChecklistItemLocation(
-      input: { taskChecklistID: $taskChecklistID, taskChecklistItemID: $taskChecklistItemID, position: $position }
+      input: { checklistID: $checklistID, checklistItemID: $checklistItemID, position: $position }
     ) {
-      taskChecklistID
+      checklistID
       prevChecklistID
       checklistItem {
         id

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

@@ -1,8 +1,8 @@
 import gql from 'graphql-tag';
 
 const UPDATE_TASK_CHECKLIST_LOCATION_MUTATION = gql`
-  mutation updateTaskChecklistLocation($taskChecklistID: UUID!, $position: Float!) {
+  mutation updateTaskChecklistLocation($checklistID: UUID!, $position: Float!) {
-    updateTaskChecklistLocation(input: { taskChecklistID: $taskChecklistID, position: $position }) {
+    updateTaskChecklistLocation(input: { checklistID: $checklistID, position: $position }) {
       checklist {
         id
         position

frontend/src/shared/graphql/updateTaskName.graphqls

@@ -1,4 +1,4 @@
-mutation updateTaskName($taskID: UUID!, $name: String!) {
+mutation updateTaskName($taskID: String!, $name: String!) {
   updateTaskName(input: { taskID: $taskID, name: $name }) {
     id
     name

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

@@ -24,7 +24,6 @@ export const CREATE_USER_MUTATION = gql`
       fullName
       initials
       username
-      bio
       profileIcon {
         url
         initials

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

@@ -1,13 +0,0 @@
-import gql from 'graphql-tag';
-
-export const DELETE_INVITED_USER_MUTATION = gql`
-  mutation deleteInvitedUserAccount($invitedUserID: UUID!) {
-    deleteInvitedUserAccount(input: { invitedUserID: $invitedUserID }) {
-      invitedUser {
-        id
-      }
-    }
-  }
-`;
-
-export default DELETE_INVITED_USER_MUTATION;

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

@@ -1,19 +0,0 @@
-import gql from 'graphql-tag';
-
-export const UPDATE_USER_INFO_MUTATION = gql`
-  mutation updateUserInfo($name: String!, $initials: String!, $email: String!, $bio: String!) {
-    updateUserInfo(input: { name: $name, initials: $initials, email: $email, bio: $bio }) {
-      user {
-        id
-        email
-        fullName
-        bio
-        profileIcon {
-          initials
-        }
-      }
-    }
-  }
-`;
-
-export default UPDATE_USER_INFO_MUTATION;

frontend/src/shared/graphql/users.graphqls

@@ -1,9 +1,4 @@
 query users {
-  invitedUsers {
-    id
-    email
-    invitedOn
-  }
   users {
     id
     email

frontend/src/shared/icons/ArrowDown.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import Icon, { IconProps } from './Icon';
-
-const ArrowDown: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
-  return (
-    <Icon width={width} height={height} className={className} viewBox="0 0 448 512">
-      <path d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z" />
-    </Icon>
-  );
-};
-
-export default ArrowDown;

frontend/src/shared/icons/CaretDown.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import Icon, { IconProps } from './Icon';
-
-const CaretDown: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
-  return (
-    <Icon width={width} height={height} className={className} viewBox="0 0 320 512">
-      <path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" />
-    </Icon>
-  );
-};
-
-export default CaretDown;

frontend/src/shared/icons/CaretRight.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import Icon, { IconProps } from './Icon';
-
-const CaretRight: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
-  return (
-    <Icon width={width} height={height} className={className} viewBox="0 0 192 512">
-      <path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" />
-    </Icon>
-  );
-};
-
-export default CaretRight;

frontend/src/shared/icons/Dot.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import Icon, { IconProps } from './Icon';
-
-const Dot: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
-  return (
-    <Icon width={width} height={height} className={className} viewBox="0 0 18 18">
-      <circle cx="9" cy="9" r="3.5" />
-    </Icon>
-  );
-};
-
-export default Dot;

frontend/src/shared/icons/DotCircle.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import Icon, { IconProps } from './Icon';
-
-const DotCircle: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
-  return (
-    <Icon width={width} height={height} className={className} viewBox="0 0 512 512">
-      <path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z" />
-    </Icon>
-  );
-};
-
-export default DotCircle;

frontend/src/shared/icons/Eye.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import Icon, { IconProps } from './Icon';
-
-const Eye: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
-  return (
-    <Icon width={width} height={height} className={className} viewBox="0 0 576 512">
-      <path d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z" />
-    </Icon>
-  );
-};
-
-export default Eye;

frontend/src/shared/icons/EyeSlash.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import Icon, { IconProps } from './Icon';
-
-const EyeSlash: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
-  return (
-    <Icon width={width} height={height} className={className} viewBox="0 0 640 512">
-      <path d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z" />
-    </Icon>
-  );
-};
-
-export default EyeSlash;

frontend/src/shared/icons/List.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import Icon, { IconProps } from './Icon';
-
-const List: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
-  return (
-    <Icon width={width} height={height} className={className} viewBox="0 0 512 512">
-      <path d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z" />
-    </Icon>
-  );
-};
-
-export default List;

frontend/src/shared/icons/ListUnordered.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import Icon, { IconProps } from './Icon';
-
-const ListUnordered: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
-  return (
-    <Icon width={width} height={height} className={className} viewBox="0 0 512 512">
-      <path d="M48 48a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 16H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z" />
-    </Icon>
-  );
-};
-
-export default ListUnordered;

frontend/src/shared/icons/index.ts

@@ -1,16 +1,7 @@
 import Cross from './Cross';
 import Cog from './Cog';
-import ArrowDown from './ArrowDown';
-import ListUnordered from './ListUnordered';
-import Dot from './Dot';
-import CaretDown from './CaretDown';
-import Eye from './Eye';
-import EyeSlash from './EyeSlash';
-import CaretRight from './CaretRight';
-import List from './List';
 import At from './At';
 import Task from './Task';
-import DotCircle from './DotCircle';
 import Smile from './Smile';
 import Paperclip from './Paperclip';
 import Calendar from './Calendar';
@@ -94,13 +85,4 @@ export {
   Clone,
   Paperclip,
   Share,
-  Eye,
-  ListUnordered,
-  EyeSlash,
-  List,
-  CaretDown,
-  Dot,
-  ArrowDown,
-  CaretRight,
-  DotCircle,
 };

frontend/src/shared/utils/accessToken.ts

@@ -1,7 +1,6 @@
 let accessToken = '';
 
 export function setAccessToken(newToken: string) {
-  console.log(newToken);
   accessToken = newToken;
 }
 export function getAccessToken() {

frontend/src/shared/utils/sorting.ts

@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import moment from 'moment';
 
 export enum TaskSortingType {
   NONE,
@@ -46,7 +46,7 @@ export function sortTasks(a: Task, b: Task, taskSorting: TaskSorting) {
     if (b.dueDate && !a.dueDate) {
       return 1;
     }
-    return dayjs(a.dueDate).diff(dayjs(b.dueDate));
+    return moment(a.dueDate).diff(moment(b.dueDate));
   }
   if (taskSorting.type === TaskSortingType.COMPLETE) {
     if (a.complete && !b.complete) {

frontend/src/taskcafe.d.ts

@@ -46,8 +46,6 @@ type OwnedList = {
 type TaskUser = {
   id: string;
   fullName: string;
-  email?: string;
-  bio?: string;
   profileIcon: ProfileIcon;
   username?: string;
   role?: Role;
@@ -127,141 +125,3 @@ type ElementBounds = {
 };
 
 type CardLabelVariant = 'large' | 'small';
-
-type InvitedUser = {
-  email: string;
-  invitedOn: string;
-};
-
-type InvitedUserAccount = {
-  id: string;
-  email: string;
-  invitedOn: string;
-};
-
-type NodeDimensions = {
-  entry: React.RefObject<HTMLElement>;
-  children: React.RefObject<HTMLElement> | null;
-};
-
-type OutlineNode = {
-  id: string;
-  parent: string;
-  depth: number;
-  position: number;
-  ancestors: Array<string>;
-  collapsed: boolean;
-  children: number;
-};
-
-type RelationshipChild = {
-  position: number;
-  id: string;
-  depth: number;
-  children: number;
-};
-
-type NodeRelationships = {
-  self: { id: string; depth: number };
-  children: Array<RelationshipChild>;
-  numberOfSubChildren: number;
-};
-
-type OutlineData = {
-  published: Map<string, string>;
-  nodes: Map<number, Map<string, OutlineNode>>;
-  relationships: Map<string, NodeRelationships>;
-  dimensions: Map<string, NodeDimensions>;
-};
-
-type ImpactZoneData = {
-  node: OutlineNode;
-  dimensions: NodeDimensions;
-};
-
-type ImpactZone = {
-  above: ImpactZoneData | null;
-  below: ImpactZoneData | null;
-};
-
-type ImpactData = {
-  zone: ImpactZone;
-  depth: number;
-};
-
-type ImpactPosition = 'before' | 'after' | 'beforeChildren' | 'afterChildren';
-
-type ImpactAction = {
-  on: 'children' | 'entry';
-  position: ImpactPosition;
-};
-
-type ItemElement = {
-  id: string;
-  parent: null | string;
-  position: number;
-  collapsed: boolean;
-  children?: Array<ItemElement>;
-};
-type NodeDimensions = {
-  entry: React.RefObject<HTMLElement>;
-  children: React.RefObject<HTMLElement> | null;
-};
-
-type OutlineNode = {
-  id: string;
-  parent: string;
-  depth: number;
-  position: number;
-  ancestors: Array<string>;
-  children: number;
-};
-
-type RelationshipChild = {
-  position: number;
-  id: string;
-  depth: number;
-  children: number;
-};
-
-type NodeRelationships = {
-  self: { id: string; depth: number };
-  children: Array<RelationshipChild>;
-  numberOfSubChildren: number;
-};
-
-type OutlineData = {
-  published: Map<string, string>;
-  nodes: Map<number, Map<string, OutlineNode>>;
-  relationships: Map<string, NodeRelationships>;
-  dimensions: Map<string, NodeDimensions>;
-};
-
-type ImpactZoneData = {
-  node: OutlineNode;
-  dimensions: NodeDimensions;
-};
-
-type ImpactZone = {
-  above: ImpactZoneData | null;
-  below: ImpactZoneData | null;
-};
-
-type ImpactData = {
-  zone: ImpactZone;
-  depth: number;
-};
-
-type ImpactPosition = 'before' | 'after' | 'beforeChildren' | 'afterChildren';
-
-type ImpactAction = {
-  on: 'children' | 'entry';
-  position: ImpactPosition;
-};
-
-type ItemElement = {
-  id: string;
-  parent: null | string;
-  position: number;
-  children?: Array<ItemElement>;
-};

frontend/yarn.lock

@@ -1342,7 +1342,7 @@
     pirates "^4.0.0"
     source-map-support "^0.5.16"
 
-"@babel/runtime@7.8.4", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4":
+"@babel/runtime@7.8.4", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308"
   integrity sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==
@@ -1610,6 +1610,46 @@
     ts-node "^8"
     tslib "^1"
 
+"@fortawesome/fontawesome-common-types@^0.2.27":
+  version "0.2.27"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.27.tgz#19706345859fc46adf3684ed01d11b40903b87e9"
+  integrity sha512-97GaByGaXDGMkzcJX7VmR/jRJd8h1mfhtA7RsxDBN61GnWE/PPCZhOdwG/8OZYktiRUF0CvFOr+VgRkJrt6TWg==
+
+"@fortawesome/fontawesome-svg-core@^1.2.27":
+  version "1.2.27"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.27.tgz#e4db8e3be81a40988213507c3e3d0c158a6641a3"
+  integrity sha512-sOD3DKynocnHYpuw2sLPnTunDj7rLk91LYhi2axUYwuGe9cPCw7Bsu9EWtVdNJP+IYgTCZIbyARKXuy5K/nv+Q==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.27"
+
+"@fortawesome/free-brands-svg-icons@^5.12.1":
+  version "5.12.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.12.1.tgz#67977addd15e21e57aa1ed71cd2ddecdfaa88647"
+  integrity sha512-IYUYcgGsQuwiIHjRGfeSTCIQKUSZMb6FsV6mDj78K0D+YzGJkM4cvEBBUMHtnla5D2HCxncMI/9JX5YIk2GHeQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.27"
+
+"@fortawesome/free-regular-svg-icons@^5.12.1":
+  version "5.12.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.12.1.tgz#4b378d93655acc5e432d5ed7ee127768dd351a99"
+  integrity sha512-bGda18seHXb+24K6DPUFzqn4kG7B+JViP/BscMcNUXvT00M86xNhdgP2TXSdflQXn53QWqymKjx/8rhaDOJyhA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.27"
+
+"@fortawesome/free-solid-svg-icons@^5.12.1":
+  version "5.12.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.12.1.tgz#76b6f958a3471821ff146f8f955e6d7cfe87147c"
+  integrity sha512-k3MwRFFUhyL4cuCJSaHDA0YNYMELDXX0h8JKtWYxO5XD3Dn+maXOMrVAAiNGooUyM2v/wz/TOaM0jxYVKeXX7g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.27"
+
+"@fortawesome/react-fontawesome@^0.1.8":
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.8.tgz#cb6d4dd3aeec45b6ff2d48c812317a6627618511"
+  integrity sha512-I5h9YQg/ePA3Br9ISS18fcwOYmzQYDSM1ftH03/8nHkiqIVHtUyQBw482+60dnzvlr82gHt3mGm+nDUp159FCw==
+  dependencies:
+    prop-types "^15.5.10"
+
 "@graphql-codegen/cli@^1.13.2":
   version "1.13.2"
   resolved "https://registry.yarnpkg.com/@graphql-codegen/cli/-/cli-1.13.2.tgz#4cfb3a4d766e3177ff727ea1b93429fd0f93cfcd"
@@ -2141,6 +2181,11 @@
   dependencies:
     any-observable "^0.3.0"
 
+"@sheerun/mutationobserver-shim@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz#8013f2af54a2b7d735f71560ff360d3a8176a87b"
+  integrity sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==
+
 "@storybook/addon-actions@^5.3.13":
   version "5.3.13"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-5.3.13.tgz#faf57ca14a46ce0c69168c631fbfc3d79d294b38"
@@ -2902,6 +2947,47 @@
     "@svgr/plugin-svgo" "^4.3.1"
     loader-utils "^1.2.3"
 
+"@testing-library/dom@^6.11.0":
+  version "6.12.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.12.2.tgz#5d549acf43f2e0c23b2abfd4e36d65594c3b2741"
+  integrity sha512-KCnvHra5fV+wDxg3wJObGvZFxq7v1DJt829GNFLuRDjKxVNc/B5AdsylNF5PMHFbWMXDsHwM26d2NZcZO9KjbQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@sheerun/mutationobserver-shim" "^0.3.2"
+    "@types/testing-library__dom" "^6.0.0"
+    aria-query "3.0.0"
+    pretty-format "^24.9.0"
+    wait-for-expect "^3.0.0"
+
+"@testing-library/jest-dom@^4.2.4":
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz#00dfa0cbdd837d9a3c2a7f3f0a248ea6e7b89742"
+  integrity sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==
+  dependencies:
+    "@babel/runtime" "^7.5.1"
+    chalk "^2.4.1"
+    css "^2.2.3"
+    css.escape "^1.5.1"
+    jest-diff "^24.0.0"
+    jest-matcher-utils "^24.0.0"
+    lodash "^4.17.11"
+    pretty-format "^24.0.0"
+    redent "^3.0.0"
+
+"@testing-library/react@^9.3.2":
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.4.0.tgz#b021ac8cb987c8dc54c6841875f745bf9b2e88e5"
+  integrity sha512-XdhDWkI4GktUPsz0AYyeQ8M9qS/JFie06kcSnUVcpgOwFjAu9vhwR83qBl+lw9yZWkbECjL8Hd+n5hH6C0oWqg==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+    "@testing-library/dom" "^6.11.0"
+    "@types/testing-library__react" "^9.1.2"
+
+"@testing-library/user-event@^7.1.2":
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-7.2.1.tgz#2ad4e844175a3738cb9e7064be5ea070b8863a1c"
+  integrity sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA==
+
 "@types/anymatch@*":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
@@ -3251,6 +3337,21 @@
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.5.tgz#9adbc12950582aa65ead76bffdf39fe0c27a3c02"
   integrity sha512-/gG2M/Imw7cQFp8PGvz/SwocNrmKFjFsm5Pb8HdbHkZ1K8pmuPzOX4VeVoiEecFCVf4CsN1r3/BRvx+6sNqwtQ==
 
+"@types/testing-library__dom@*", "@types/testing-library__dom@^6.0.0":
+  version "6.12.1"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.12.1.tgz#37af28fae051f9e3feed5684535b1540c97ae28b"
+  integrity sha512-cgqnEjxKk31tQt29j4baSWaZPNjQf3bHalj2gcHQTpW5SuHRal76gOpF0vypeEo6o+sS5inOvvNdzLY0B3FB2A==
+  dependencies:
+    pretty-format "^24.3.0"
+
+"@types/testing-library__react@^9.1.2":
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__react/-/testing-library__react-9.1.2.tgz#e33af9124c60a010fc03a34eff8f8a34a75c4351"
+  integrity sha512-CYaMqrswQ+cJACy268jsLAw355DZtPZGt3Jwmmotlcu8O/tkoXBI6AeZ84oZBJsIsesozPKzWzmv/0TIU+1E9Q==
+  dependencies:
+    "@types/react-dom" "*"
+    "@types/testing-library__dom" "*"
+
 "@types/uglify-js@*":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.4.tgz#96beae23df6f561862a830b4288a49e86baac082"
@@ -4092,7 +4193,7 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
-aria-query@^3.0.0:
+aria-query@3.0.0, aria-query@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc"
   integrity sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=
@@ -6154,7 +6255,12 @@ css-what@^3.2.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.2.1.tgz#f4a8f12421064621b456755e34a03a2c22df5da1"
   integrity sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==
 
-css@^2.0.0:
+css.escape@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
+
+css@^2.0.0, css@^2.2.3:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
   integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
@@ -6320,11 +6426,6 @@ date-fns@^2.0.1:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.12.0.tgz#01754c8a2f3368fc1119cf4625c3dad8c1845ee6"
   integrity sha512-qJgn99xxKnFgB1qL4jpxU7Q2t0LOn1p8KMIveef3UZD7kqjT3tpFNNdXJelEHhE+rUgffriXriw/sOSU+cS1Hw==
 
-dayjs@^1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.9.1.tgz#201a755f7db5103ed6de63ba93a984141c754541"
-  integrity sha512-01NCTBg8cuMJG1OQc6PR7T66+AFYiPwgDvdJmvJBn29NGzIG+DIFxPLNjHzwz3cpFIvG+NcwIjP9hSaPVoOaDg==
-
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -9619,7 +9720,7 @@ jest-config@^24.9.0:
     pretty-format "^24.9.0"
     realpath-native "^1.1.0"
 
-jest-diff@^24.3.0, jest-diff@^24.9.0:
+jest-diff@^24.0.0, jest-diff@^24.3.0, jest-diff@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
   integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
@@ -9736,7 +9837,7 @@ jest-leak-detector@^24.9.0:
     jest-get-type "^24.9.0"
     pretty-format "^24.9.0"
 
-jest-matcher-utils@^24.9.0:
+jest-matcher-utils@^24.0.0, jest-matcher-utils@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
   integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==
@@ -10600,11 +10701,6 @@ lodash@4.17.15, "lodash@>=3.5 <5", lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
-lodash@^4.17.20:
-  version "4.17.20"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
-  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
-
 log-symbols@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
@@ -12869,7 +12965,7 @@ pretty-error@^2.1.1:
     renderkid "^2.0.1"
     utila "~0.4"
 
-pretty-format@^24.9.0:
+pretty-format@^24.0.0, pretty-format@^24.3.0, pretty-format@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
   integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
@@ -14087,6 +14183,14 @@ recursive-readdir@2.2.2:
   dependencies:
     minimatch "3.0.4"
 
+redent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
+  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
+  dependencies:
+    indent-string "^4.0.0"
+    strip-indent "^3.0.0"
+
 redux@^4.0.4:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
@@ -16716,6 +16820,11 @@ w3c-xmlserializer@^1.1.2:
     webidl-conversions "^4.0.2"
     xml-name-validator "^3.0.0"
 
+wait-for-expect@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-3.0.2.tgz#d2f14b2f7b778c9b82144109c8fa89ceaadaa463"
+  integrity sha512-cfS1+DZxuav1aBYbaO/kE06EOS8yRw7qOFoD3XtjTkYvCvh3zUvNST8DXK/nPaeqIzIv3P3kL3lRJn8iwOiSag==
+
 walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"

go.mod

@@ -11,7 +11,6 @@ require (
 	github.com/google/uuid v1.1.1
 	github.com/jmoiron/sqlx v1.2.0
 	github.com/lib/pq v1.3.0
-	github.com/lithammer/fuzzysearch v1.1.0
 	github.com/magefile/mage v1.9.0
 	github.com/pelletier/go-toml v1.8.0 // indirect
 	github.com/pkg/errors v0.9.1

go.sum

@@ -109,7 +109,6 @@ github.com/cpuguy83/go-md2man/v2 v2.0.0-20190314233015-f79a8a8ca69d h1:U+s90UTSY
 github.com/cpuguy83/go-md2man/v2 v2.0.0-20190314233015-f79a8a8ca69d/go.mod h1:maD7wRr/U5Z6m/iR4s+kqSMx2CaBsrgA7czyZG/E6dU=
 github.com/cpuguy83/go-md2man/v2 v2.0.0/go.mod h1:maD7wRr/U5Z6m/iR4s+kqSMx2CaBsrgA7czyZG/E6dU=
 github.com/creack/pty v1.1.7/go.mod h1:lj5s0c3V2DBrqTV7llrYr5NG6My20zk30Fl46Y7DoTY=
-github.com/cznic/mathutil v0.0.0-20180504122225-ca4c9f2c1369 h1:XNT/Zf5l++1Pyg08/HV04ppB0gKxAqtZQBRYiYrUuYk=
 github.com/cznic/mathutil v0.0.0-20180504122225-ca4c9f2c1369/go.mod h1:e6NPNENfs9mPDVNRekM7lKScauxd5kXTr1Mfyig6TDM=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
@@ -358,8 +357,6 @@ github.com/lib/pq v1.1.0/go.mod h1:5WUZQaWbwv1U+lTReE5YruASi9Al49XbQIvNi/34Woo=
 github.com/lib/pq v1.2.0/go.mod h1:5WUZQaWbwv1U+lTReE5YruASi9Al49XbQIvNi/34Woo=
 github.com/lib/pq v1.3.0 h1:/qkRGz8zljWiDcFvgpwUpwIAPu3r07TDvs3Rws+o/pU=
 github.com/lib/pq v1.3.0/go.mod h1:5WUZQaWbwv1U+lTReE5YruASi9Al49XbQIvNi/34Woo=
-github.com/lithammer/fuzzysearch v1.1.0 h1:go9v8tLCrNTTlH42OAaq4eHFe81TDHEnlrMEb6R4f+A=
-github.com/lithammer/fuzzysearch v1.1.0/go.mod h1:Bqx4wo8lTOFcJr3ckpY6HA9lEIOO0H5HrkJ5CsN56HQ=
 github.com/logrusorgru/aurora v0.0.0-20200102142835-e9ef32dff381/go.mod h1:7rIyQOR62GCctdiQpZ/zOJlFyk6y+94wXzv6RNZgaR4=
 github.com/magefile/mage v1.9.0 h1:t3AU2wNwehMCW97vuqQLtw6puppWXHO+O2MHo5a50XE=
 github.com/magefile/mage v1.9.0/go.mod h1:z5UZb/iS3GoOSn0JgWuiw7dxlurVYTu+/jHXqQg881A=

internal/auth/auth.go

@@ -7,6 +7,8 @@ import (
 	log "github.com/sirupsen/logrus"
 )
 
+var jwtKey = []byte("taskcafe_test_key")
+
 // RestrictedMode is used restrict JWT access to just the install route
 type RestrictedMode string
 
@@ -52,7 +54,7 @@ func (r *ErrMalformedToken) Error() string {
 }
 
 // NewAccessToken generates a new JWT access token with the correct claims
-func NewAccessToken(userID string, restrictedMode RestrictedMode, orgRole string, jwtKey []byte) (string, error) {
+func NewAccessToken(userID string, restrictedMode RestrictedMode, orgRole string) (string, error) {
 	role := RoleMember
 	if orgRole == "admin" {
 		role = RoleAdmin
@@ -74,7 +76,7 @@ func NewAccessToken(userID string, restrictedMode RestrictedMode, orgRole string
 }
 
 // NewAccessTokenCustomExpiration creates an access token with a custom duration
-func NewAccessTokenCustomExpiration(userID string, dur time.Duration, jwtKey []byte) (string, error) {
+func NewAccessTokenCustomExpiration(userID string, dur time.Duration) (string, error) {
 	accessExpirationTime := time.Now().Add(dur)
 	accessClaims := &AccessTokenClaims{
 		UserID:         userID,
@@ -92,7 +94,7 @@ func NewAccessTokenCustomExpiration(userID string, dur time.Duration, jwtKey []b
 }
 
 // ValidateAccessToken validates a JWT access token and returns the contained claims or an error if it's invalid
-func ValidateAccessToken(accessTokenString string, jwtKey []byte) (AccessTokenClaims, error) {
+func ValidateAccessToken(accessTokenString string) (AccessTokenClaims, error) {
 	accessClaims := &AccessTokenClaims{}
 	accessToken, err := jwt.ParseWithClaims(accessTokenString, accessClaims, func(token *jwt.Token) (interface{}, error) {
 		return jwtKey, nil

internal/commands/commands.go

@@ -62,31 +62,11 @@ func initConfig() {
 	if _, ok := err.(viper.ConfigFileNotFoundError); !ok {
 		panic(err)
 	}
-
-	viper.SetDefault("server.hostname", "0.0.0.0:3333")
-	viper.SetDefault("database.host", "127.0.0.1")
-	viper.SetDefault("database.name", "taskcafe")
-	viper.SetDefault("database.user", "taskcafe")
-	viper.SetDefault("database.password", "taskcafe_test")
-
-	viper.SetDefault("queue.broker", "amqp://guest:guest@localhost:5672/")
-	viper.SetDefault("queue.store", "memcache://localhost:11211")
-
 }
 
 // Execute the root cobra command
 func Execute() {
-	viper.SetDefault("server.hostname", "0.0.0.0:3333")
-	viper.SetDefault("database.host", "127.0.0.1")
-	viper.SetDefault("database.name", "taskcafe")
-	viper.SetDefault("database.user", "taskcafe")
-	viper.SetDefault("database.password", "taskcafe_test")
-	viper.SetDefault("database.port", "5432")
-
-	viper.SetDefault("queue.broker", "amqp://guest:guest@localhost:5672/")
-	viper.SetDefault("queue.store", "memcache://localhost:11211")
-
 	rootCmd.SetVersionTemplate(versionTemplate)
-	rootCmd.AddCommand(newWebCmd(), newMigrateCmd(), newTokenCmd(), newWorkerCmd(), newResetPasswordCmd())
+	rootCmd.AddCommand(newWebCmd(), newMigrateCmd(), newTokenCmd(), newWorkerCmd())
 	rootCmd.Execute()
 }

internal/commands/migrate.go

@@ -68,5 +68,9 @@ func newMigrateCmd() *cobra.Command {
 			return nil
 		},
 	}
+	viper.SetDefault("database.host", "127.0.0.1")
+	viper.SetDefault("database.name", "taskcafe")
+	viper.SetDefault("database.user", "taskcafe")
+	viper.SetDefault("database.password", "taskcafe_test")
 	return c
 }

internal/commands/reset_password.go

@@ -1,68 +0,0 @@
-package commands
-
-import (
-	"context"
-	"fmt"
-	"time"
-
-	"github.com/jmoiron/sqlx"
-	"github.com/jordanknott/taskcafe/internal/db"
-	log "github.com/sirupsen/logrus"
-	"github.com/spf13/cobra"
-	"github.com/spf13/viper"
-	"golang.org/x/crypto/bcrypt"
-)
-
-func newResetPasswordCmd() *cobra.Command {
-	return &cobra.Command{
-		Use:   "reset-password",
-		Short: "Resets password of the specified user",
-		Long:  "If the user forgets its password you can reset it with this command.",
-		Args:  cobra.ExactArgs(2),
-		RunE: func(cmd *cobra.Command, args []string) error {
-			connection := fmt.Sprintf("user=%s password=%s host=%s dbname=%s sslmode=disable",
-				viper.GetString("database.user"),
-				viper.GetString("database.password"),
-				viper.GetString("database.host"),
-				viper.GetString("database.name"),
-			)
-			var database *sqlx.DB
-			var err error
-			var retryDuration time.Duration
-			maxRetryNumber := 4
-			for i := 0; i < maxRetryNumber; i++ {
-				database, err = sqlx.Connect("postgres", connection)
-				if err == nil {
-					break
-				}
-				retryDuration = time.Duration(i*2) * time.Second
-				log.WithFields(log.Fields{"retryNumber": i, "retryDuration": retryDuration}).WithError(err).Error("issue connecting to database, retrying")
-				if i != maxRetryNumber-1 {
-					time.Sleep(retryDuration)
-				}
-			}
-			database.SetMaxOpenConns(25)
-			database.SetMaxIdleConns(25)
-			database.SetConnMaxLifetime(5 * time.Minute)
-			repo := *db.NewRepository(database)
-
-			username := args[0]
-			password := args[1]
-
-			user, err := repo.GetUserAccountByUsername(context.TODO(), username)
-			if err != nil {
-				fmt.Println("There is no user with that username. :/")
-				return nil
-			}
-
-			hashedPwd, err := bcrypt.GenerateFromPassword([]byte(password), 14)
-
-			if _, err := repo.SetUserPassword(context.TODO(), db.SetUserPasswordParams{UserID: user.UserID, PasswordHash: string(hashedPwd)}); err != nil {
-				return err
-			}
-			fmt.Println("Updated user \"" + username + "\" password.")
-			defer database.Close()
-			return nil
-		},
-	}
-}

internal/commands/token.go

@@ -1,15 +1,12 @@
 package commands
 
 import (
-	"errors"
 	"fmt"
-	"strings"
 	"time"
 
 	"github.com/jordanknott/taskcafe/internal/auth"
 	log "github.com/sirupsen/logrus"
 	"github.com/spf13/cobra"
-	"github.com/spf13/viper"
 )
 
 func newTokenCmd() *cobra.Command {
@@ -18,18 +15,13 @@ func newTokenCmd() *cobra.Command {
 		Short: "Create a long lived JWT token for dev purposes",
 		Long:  "Create a long lived JWT token for dev purposes",
 		Args:  cobra.ExactArgs(1),
-		RunE: func(cmd *cobra.Command, args []string) error {
+		Run: func(cmd *cobra.Command, args []string) {
-			secret := viper.GetString("server.secret")
+			token, err := auth.NewAccessTokenCustomExpiration(args[0], time.Hour*24)
-			if strings.TrimSpace(secret) == "" {
-				return errors.New("server.secret must be set (TASKCAFE_SERVER_SECRET)")
-			}
-			token, err := auth.NewAccessTokenCustomExpiration(args[0], time.Hour*24, []byte(secret))
 			if err != nil {
 				log.WithError(err).Error("issue while creating access token")
-				return err
+				return
 			}
 			fmt.Println(token)
-			return nil
 		},
 	}
 }

internal/commands/web.go

@@ -3,13 +3,11 @@ package commands
 import (
 	"fmt"
 	"net/http"
-	"strings"
 	"time"
 
 	"github.com/golang-migrate/migrate/v4"
 	"github.com/golang-migrate/migrate/v4/database/postgres"
 	"github.com/golang-migrate/migrate/v4/source/httpfs"
-	"github.com/google/uuid"
 	"github.com/spf13/cobra"
 	"github.com/spf13/viper"
 
@@ -32,30 +30,24 @@ func newWebCmd() *cobra.Command {
 			log.SetFormatter(Formatter)
 			log.SetLevel(log.InfoLevel)
 
-			connection := fmt.Sprintf("user=%s password=%s host=%s dbname=%s port=%s sslmode=disable",
+			connection := fmt.Sprintf("user=%s password=%s host=%s dbname=%s sslmode=disable",
 				viper.GetString("database.user"),
 				viper.GetString("database.password"),
 				viper.GetString("database.host"),
 				viper.GetString("database.name"),
-				viper.GetString("database.port"),
 			)
 			var db *sqlx.DB
 			var err error
-			var retryDuration time.Duration
+			retryNumber := 0
-			maxRetryNumber := 4
+			for i := 0; retryNumber <= 3; i++ {
-			for i := 0; i < maxRetryNumber; i++ {
+				retryNumber++
 				db, err = sqlx.Connect("postgres", connection)
 				if err == nil {
 					break
 				}
-				retryDuration = time.Duration(i*2) * time.Second
+				retryDuration := time.Duration(i*2) * time.Second
-				log.WithFields(log.Fields{"retryNumber": i, "retryDuration": retryDuration}).WithError(err).Error("issue connecting to database, retrying")
+				log.WithFields(log.Fields{"retryNumber": retryNumber, "retryDuration": retryDuration}).WithError(err).Error("issue connecting to database, retrying")
-				if i != maxRetryNumber-1 {
+				time.Sleep(retryDuration)
-					time.Sleep(retryDuration)
-				}
-			}
-			if err != nil {
-				return err
 			}
 			db.SetMaxOpenConns(25)
 			db.SetMaxIdleConns(25)
@@ -70,21 +62,22 @@ func newWebCmd() *cobra.Command {
 			}
 
 			log.WithFields(log.Fields{"url": viper.GetString("server.hostname")}).Info("starting server")
-			secret := viper.GetString("server.secret")
+			r, _ := route.NewRouter(db)
-			if strings.TrimSpace(secret) == "" {
+			http.ListenAndServe(viper.GetString("server.hostname"), r)
-				log.Warn("server.secret is not set, generating a random secret")
+			return nil
-				secret = uuid.New().String()
-			}
-			r, _ := route.NewRouter(db, []byte(secret))
-			return http.ListenAndServe(viper.GetString("server.hostname"), r)
 		},
 	}
-
 	cc.Flags().Bool("migrate", false, "if true, auto run's schema migrations before starting the web server")
-
 	viper.BindPFlag("migrate", cc.Flags().Lookup("migrate"))
-
 	viper.SetDefault("migrate", false)
+	viper.SetDefault("server.hostname", "0.0.0.0:3333")
+	viper.SetDefault("database.host", "127.0.0.1")
+	viper.SetDefault("database.name", "taskcafe")
+	viper.SetDefault("database.user", "taskcafe")
+	viper.SetDefault("database.password", "taskcafe_test")
+
+	viper.SetDefault("queue.broker", "amqp://guest:guest@localhost:5672/")
+	viper.SetDefault("queue.store", "memcache://localhost:11211")
 	return cc
 }
 

internal/commands/worker.go

@@ -2,10 +2,9 @@ package commands
 
 import (
 	"fmt"
-	"time"
-
 	"github.com/spf13/cobra"
 	"github.com/spf13/viper"
+	"time"
 
 	"github.com/RichardKnop/machinery/v1"
 	"github.com/RichardKnop/machinery/v1/config"
@@ -73,5 +72,12 @@ func newWorkerCmd() *cobra.Command {
 			return nil
 		},
 	}
+	viper.SetDefault("database.host", "127.0.0.1")
+	viper.SetDefault("database.name", "taskcafe")
+	viper.SetDefault("database.user", "taskcafe")
+	viper.SetDefault("database.password", "taskcafe_test")
+
+	viper.SetDefault("queue.broker", "amqp://guest:guest@localhost:5672/")
+	viper.SetDefault("queue.store", "memcache://localhost:11211")
 	return cc
 }

internal/db/models.go

@@ -38,12 +38,6 @@ type Organization struct {
 	Name           string    `json:"name"`
 }
 
-type PersonalProject struct {
-	PersonalProjectID uuid.UUID `json:"personal_project_id"`
-	ProjectID         uuid.UUID `json:"project_id"`
-	UserID            uuid.UUID `json:"user_id"`
-}
-
 type Project struct {
 	ProjectID uuid.UUID `json:"project_id"`
 	TeamID    uuid.UUID `json:"team_id"`
@@ -67,12 +61,6 @@ type ProjectMember struct {
 	RoleCode        string    `json:"role_code"`
 }
 
-type ProjectMemberInvited struct {
-	ProjectMemberInvitedID uuid.UUID `json:"project_member_invited_id"`
-	ProjectID              uuid.UUID `json:"project_id"`
-	UserAccountInvitedID   uuid.UUID `json:"user_account_invited_id"`
-}
-
 type RefreshToken struct {
 	TokenID   uuid.UUID `json:"token_id"`
 	UserID    uuid.UUID `json:"user_id"`
@@ -169,12 +157,4 @@ type UserAccount struct {
 	Initials         string         `json:"initials"`
 	ProfileAvatarUrl sql.NullString `json:"profile_avatar_url"`
 	RoleCode         string         `json:"role_code"`
-	Bio              string         `json:"bio"`
-}
-
-type UserAccountInvited struct {
-	UserAccountInvitedID uuid.UUID `json:"user_account_invited_id"`
-	Email                string    `json:"email"`
-	InvitedOn            time.Time `json:"invited_on"`
-	HasJoined            bool      `json:"has_joined"`
 }

internal/db/project.sql.go

@@ -10,17 +10,18 @@ import (
 	"github.com/google/uuid"
 )
 
-const createPersonalProject = `-- name: CreatePersonalProject :one
+const createProject = `-- name: CreateProject :one
-INSERT INTO project(team_id, created_at, name) VALUES (null, $1, $2) RETURNING project_id, team_id, created_at, name
+INSERT INTO project(team_id, created_at, name) VALUES ($1, $2, $3) RETURNING project_id, team_id, created_at, name
 `
 
-type CreatePersonalProjectParams struct {
+type CreateProjectParams struct {
+	TeamID    uuid.UUID `json:"team_id"`
 	CreatedAt time.Time `json:"created_at"`
 	Name      string    `json:"name"`
 }
 
-func (q *Queries) CreatePersonalProject(ctx context.Context, arg CreatePersonalProjectParams) (Project, error) {
+func (q *Queries) CreateProject(ctx context.Context, arg CreateProjectParams) (Project, error) {
-	row := q.db.QueryRowContext(ctx, createPersonalProject, arg.CreatedAt, arg.Name)
+	row := q.db.QueryRowContext(ctx, createProject, arg.TeamID, arg.CreatedAt, arg.Name)
 	var i Project
 	err := row.Scan(
 		&i.ProjectID,
@@ -31,22 +32,6 @@ func (q *Queries) CreatePersonalProject(ctx context.Context, arg CreatePersonalP
 	return i, err
 }
 
-const createPersonalProjectLink = `-- name: CreatePersonalProjectLink :one
-INSERT INTO personal_project (project_id, user_id) VALUES ($1, $2) RETURNING personal_project_id, project_id, user_id
-`
-
-type CreatePersonalProjectLinkParams struct {
-	ProjectID uuid.UUID `json:"project_id"`
-	UserID    uuid.UUID `json:"user_id"`
-}
-
-func (q *Queries) CreatePersonalProjectLink(ctx context.Context, arg CreatePersonalProjectLinkParams) (PersonalProject, error) {
-	row := q.db.QueryRowContext(ctx, createPersonalProjectLink, arg.ProjectID, arg.UserID)
-	var i PersonalProject
-	err := row.Scan(&i.PersonalProjectID, &i.ProjectID, &i.UserID)
-	return i, err
-}
-
 const createProjectMember = `-- name: CreateProjectMember :one
 INSERT INTO project_member (project_id, user_id, role_code, added_at) VALUES ($1, $2, $3, $4)
   RETURNING project_member_id, project_id, user_id, added_at, role_code
@@ -77,37 +62,6 @@ func (q *Queries) CreateProjectMember(ctx context.Context, arg CreateProjectMemb
 	return i, err
 }
 
-const createTeamProject = `-- name: CreateTeamProject :one
-INSERT INTO project(team_id, created_at, name) VALUES ($1, $2, $3) RETURNING project_id, team_id, created_at, name
-`
-
-type CreateTeamProjectParams struct {
-	TeamID    uuid.UUID `json:"team_id"`
-	CreatedAt time.Time `json:"created_at"`
-	Name      string    `json:"name"`
-}
-
-func (q *Queries) CreateTeamProject(ctx context.Context, arg CreateTeamProjectParams) (Project, error) {
-	row := q.db.QueryRowContext(ctx, createTeamProject, arg.TeamID, arg.CreatedAt, arg.Name)
-	var i Project
-	err := row.Scan(
-		&i.ProjectID,
-		&i.TeamID,
-		&i.CreatedAt,
-		&i.Name,
-	)
-	return i, err
-}
-
-const deleteInvitedProjectMemberByID = `-- name: DeleteInvitedProjectMemberByID :exec
-DELETE FROM project_member_invited WHERE project_member_invited_id = $1
-`
-
-func (q *Queries) DeleteInvitedProjectMemberByID(ctx context.Context, projectMemberInvitedID uuid.UUID) error {
-	_, err := q.db.ExecContext(ctx, deleteInvitedProjectMemberByID, projectMemberInvitedID)
-	return err
-}
-
 const deleteProjectByID = `-- name: DeleteProjectByID :exec
 DELETE FROM project WHERE project_id = $1
 `
@@ -131,12 +85,12 @@ func (q *Queries) DeleteProjectMember(ctx context.Context, arg DeleteProjectMemb
 	return err
 }
 
-const getAllProjectsForTeam = `-- name: GetAllProjectsForTeam :many
+const getAllProjects = `-- name: GetAllProjects :many
-SELECT project_id, team_id, created_at, name FROM project WHERE team_id = $1
+SELECT project_id, team_id, created_at, name FROM project
 `
 
-func (q *Queries) GetAllProjectsForTeam(ctx context.Context, teamID uuid.UUID) ([]Project, error) {
+func (q *Queries) GetAllProjects(ctx context.Context) ([]Project, error) {
-	rows, err := q.db.QueryContext(ctx, getAllProjectsForTeam, teamID)
+	rows, err := q.db.QueryContext(ctx, getAllProjects)
 	if err != nil {
 		return nil, err
 	}
@@ -163,12 +117,12 @@ func (q *Queries) GetAllProjectsForTeam(ctx context.Context, teamID uuid.UUID) (
 	return items, nil
 }
 
-const getAllTeamProjects = `-- name: GetAllTeamProjects :many
+const getAllProjectsForTeam = `-- name: GetAllProjectsForTeam :many
-SELECT project_id, team_id, created_at, name FROM project WHERE team_id IS NOT null
+SELECT project_id, team_id, created_at, name FROM project WHERE team_id = $1
 `
 
-func (q *Queries) GetAllTeamProjects(ctx context.Context) ([]Project, error) {
+func (q *Queries) GetAllProjectsForTeam(ctx context.Context, teamID uuid.UUID) ([]Project, error) {
-	rows, err := q.db.QueryContext(ctx, getAllTeamProjects)
+	rows, err := q.db.QueryContext(ctx, getAllProjectsForTeam, teamID)
 	if err != nil {
 		return nil, err
 	}
@@ -228,42 +182,6 @@ func (q *Queries) GetAllVisibleProjectsForUserID(ctx context.Context, userID uui
 	return items, nil
 }
 
-const getInvitedMembersForProjectID = `-- name: GetInvitedMembersForProjectID :many
-SELECT uai.user_account_invited_id, email, invited_on FROM project_member_invited AS pmi
-     INNER JOIN user_account_invited AS uai
-    ON uai.user_account_invited_id = pmi.user_account_invited_id
-     WHERE project_id = $1
-`
-
-type GetInvitedMembersForProjectIDRow struct {
-	UserAccountInvitedID uuid.UUID `json:"user_account_invited_id"`
-	Email                string    `json:"email"`
-	InvitedOn            time.Time `json:"invited_on"`
-}
-
-func (q *Queries) GetInvitedMembersForProjectID(ctx context.Context, projectID uuid.UUID) ([]GetInvitedMembersForProjectIDRow, error) {
-	rows, err := q.db.QueryContext(ctx, getInvitedMembersForProjectID, projectID)
-	if err != nil {
-		return nil, err
-	}
-	defer rows.Close()
-	var items []GetInvitedMembersForProjectIDRow
-	for rows.Next() {
-		var i GetInvitedMembersForProjectIDRow
-		if err := rows.Scan(&i.UserAccountInvitedID, &i.Email, &i.InvitedOn); err != nil {
-			return nil, err
-		}
-		items = append(items, i)
-	}
-	if err := rows.Close(); err != nil {
-		return nil, err
-	}
-	if err := rows.Err(); err != nil {
-		return nil, err
-	}
-	return items, nil
-}
-
 const getMemberProjectIDsForUserID = `-- name: GetMemberProjectIDsForUserID :many
 SELECT project_id FROM project_member WHERE user_id = $1
 `
@@ -291,40 +209,6 @@ func (q *Queries) GetMemberProjectIDsForUserID(ctx context.Context, userID uuid.
 	return items, nil
 }
 
-const getPersonalProjectsForUserID = `-- name: GetPersonalProjectsForUserID :many
-SELECT project.project_id, project.team_id, project.created_at, project.name FROM project
-  LEFT JOIN personal_project ON personal_project.project_id = project.project_id
-  WHERE personal_project.user_id = $1
-`
-
-func (q *Queries) GetPersonalProjectsForUserID(ctx context.Context, userID uuid.UUID) ([]Project, error) {
-	rows, err := q.db.QueryContext(ctx, getPersonalProjectsForUserID, userID)
-	if err != nil {
-		return nil, err
-	}
-	defer rows.Close()
-	var items []Project
-	for rows.Next() {
-		var i Project
-		if err := rows.Scan(
-			&i.ProjectID,
-			&i.TeamID,
-			&i.CreatedAt,
-			&i.Name,
-		); err != nil {
-			return nil, err
-		}
-		items = append(items, i)
-	}
-	if err := rows.Close(); err != nil {
-		return nil, err
-	}
-	if err := rows.Err(); err != nil {
-		return nil, err
-	}
-	return items, nil
-}
-
 const getProjectByID = `-- name: GetProjectByID :one
 SELECT project_id, team_id, created_at, name FROM project WHERE project_id = $1
 `
@@ -341,26 +225,6 @@ func (q *Queries) GetProjectByID(ctx context.Context, projectID uuid.UUID) (Proj
 	return i, err
 }
 
-const getProjectMemberInvitedIDByEmail = `-- name: GetProjectMemberInvitedIDByEmail :one
-SELECT email, invited_on, project_member_invited_id FROM user_account_invited AS uai
- inner join project_member_invited AS pmi
-  ON pmi.user_account_invited_id = uai.user_account_invited_id
-  WHERE email = $1
-`
-
-type GetProjectMemberInvitedIDByEmailRow struct {
-	Email                  string    `json:"email"`
-	InvitedOn              time.Time `json:"invited_on"`
-	ProjectMemberInvitedID uuid.UUID `json:"project_member_invited_id"`
-}
-
-func (q *Queries) GetProjectMemberInvitedIDByEmail(ctx context.Context, email string) (GetProjectMemberInvitedIDByEmailRow, error) {
-	row := q.db.QueryRowContext(ctx, getProjectMemberInvitedIDByEmail, email)
-	var i GetProjectMemberInvitedIDByEmailRow
-	err := row.Scan(&i.Email, &i.InvitedOn, &i.ProjectMemberInvitedID)
-	return i, err
-}
-
 const getProjectMembersForProjectID = `-- name: GetProjectMembersForProjectID :many
 SELECT project_member_id, project_id, user_id, added_at, role_code FROM project_member WHERE project_id = $1
 `