deps: upgrade all dependencies

2021-05-02 17:31:24 -05:00
parent 5a9a66effe
commit 8c6a3db0bc
22 changed files with 5162 additions and 4850 deletions
--- a/frontend/src/Projects/Project/Details/index.tsx
+++ b/frontend/src/Projects/Project/Details/index.tsx
@ -4,7 +4,7 @@ import TaskDetails from 'shared/components/TaskDetails';
 import TaskDetailsLoading from 'shared/components/TaskDetails/Loading';
 import { Popup, usePopup } from 'shared/components/PopupMenu';
 import MemberManager from 'shared/components/MemberManager';
-import { useRouteMatch, useHistory } from 'react-router';
+import { useRouteMatch, useHistory, useParams } from 'react-router';
 import {
  useDeleteTaskChecklistMutation,
  useUpdateTaskChecklistNameMutation,
@ -56,7 +56,7 @@ export const ActionItem = styled.li`
  align-items: center;
  font-size: 14px;
  &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: ${(props) => props.theme.colors.primary};
  }
 `;

@ -166,10 +166,8 @@ const CreateChecklistPopup: React.FC<CreateChecklistPopupProps> = ({ onCreateChe
        defaultValue="Checklist"
        width="100%"
        label="Name"
-        id="name"
-        name="name"
        variant="alternate"
-        ref={register({ required: 'Checklist name is required' })}
+        {...register('name', { required: 'Checklist name is required' })}
      />
      <CreateChecklistButton type="submit">Create</CreateChecklistButton>
    </CreateChecklistForm>
@ -177,7 +175,6 @@ const CreateChecklistPopup: React.FC<CreateChecklistPopupProps> = ({ onCreateChe
 };

 type DetailsProps = {
-  taskID: string;
  projectURL: string;
  onTaskNameChange: (task: Task, newName: string) => void;
  onTaskDescriptionChange: (task: Task, newDescription: string) => void;
@ -191,7 +188,6 @@ const initialMemberPopupState = { taskID: '', isOpen: false, top: 0, left: 0 };

 const Details: React.FC<DetailsProps> = ({
  projectURL,
-  taskID,
  onTaskNameChange,
  onTaskDescriptionChange,
  onDeleteTask,
@ -200,6 +196,7 @@ const Details: React.FC<DetailsProps> = ({
  refreshCache,
 }) => {
  const { user } = useCurrentUser();
+  const { taskID } = useParams<{ taskID: string }>();
  const { showPopup, hidePopup } = usePopup();
  const history = useHistory();
  const [deleteTaskComment] = useDeleteTaskCommentMutation({
@ -207,11 +204,11 @@ const Details: React.FC<DetailsProps> = ({
      updateApolloCache<FindTaskQuery>(
        client,
        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (cache) =>
+          produce(cache, (draftCache) => {
            if (response.data) {
              draftCache.findTask.comments = cache.findTask.comments.filter(
-                c => c.id !== response.data?.deleteTaskComment.commentID,
+                (c) => c.id !== response.data?.deleteTaskComment.commentID,
              );
            }
          }),
@ -224,8 +221,8 @@ const Details: React.FC<DetailsProps> = ({
      updateApolloCache<FindTaskQuery>(
        client,
        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (cache) =>
+          produce(cache, (draftCache) => {
            if (response.data) {
              draftCache.findTask.comments.push({
                ...response.data.createTaskComment.comment,
@ -242,18 +239,18 @@ const Details: React.FC<DetailsProps> = ({
      updateApolloCache<FindTaskQuery>(
        client,
        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (cache) =>
+          produce(cache, (draftCache) => {
            if (response.data) {
              const { prevChecklistID, taskChecklistID, checklistItem } = response.data.updateTaskChecklistItemLocation;
              if (taskChecklistID !== prevChecklistID) {
-                const oldIdx = cache.findTask.checklists.findIndex(c => c.id === prevChecklistID);
-                const newIdx = cache.findTask.checklists.findIndex(c => c.id === taskChecklistID);
+                const oldIdx = cache.findTask.checklists.findIndex((c) => c.id === prevChecklistID);
+                const newIdx = cache.findTask.checklists.findIndex((c) => c.id === taskChecklistID);
                if (oldIdx > -1 && newIdx > -1) {
-                  const item = cache.findTask.checklists[oldIdx].items.find(i => i.id === checklistItem.id);
+                  const item = cache.findTask.checklists[oldIdx].items.find((i) => i.id === checklistItem.id);
                  if (item) {
                    draftCache.findTask.checklists[oldIdx].items = cache.findTask.checklists[oldIdx].items.filter(
-                      i => i.id !== checklistItem.id,
+                      (i) => i.id !== checklistItem.id,
                    );
                    draftCache.findTask.checklists[newIdx].items.push({
                      ...item,
@ -270,12 +267,12 @@ const Details: React.FC<DetailsProps> = ({
    },
  });
  const [setTaskChecklistItemComplete] = useSetTaskChecklistItemCompleteMutation({
-    update: client => {
+    update: (client) => {
      updateApolloCache<FindTaskQuery>(
        client,
        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (cache) =>
+          produce(cache, (draftCache) => {
            const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
            draftCache.findTask.badges.checklist = {
              __typename: 'ChecklistBadge',
@ -292,11 +289,11 @@ const Details: React.FC<DetailsProps> = ({
      updateApolloCache<FindTaskQuery>(
        client,
        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (cache) =>
+          produce(cache, (draftCache) => {
            const { checklists } = cache.findTask;
            draftCache.findTask.checklists = checklists.filter(
-              c => c.id !== deleteData.data?.deleteTaskChecklist.taskChecklist.id,
+              (c) => c.id !== deleteData.data?.deleteTaskChecklist.taskChecklist.id,
            );
            const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
            draftCache.findTask.badges.checklist = {
@ -318,8 +315,8 @@ const Details: React.FC<DetailsProps> = ({
      updateApolloCache<FindTaskQuery>(
        client,
        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (cache) =>
+          produce(cache, (draftCache) => {
            if (createData.data) {
              const item = createData.data.createTaskChecklist;
              draftCache.findTask.checklists.push({ ...item });
@ -335,14 +332,14 @@ const Details: React.FC<DetailsProps> = ({
      updateApolloCache<FindTaskQuery>(
        client,
        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (cache) =>
+          produce(cache, (draftCache) => {
            if (deleteData.data) {
              const item = deleteData.data.deleteTaskChecklistItem.taskChecklistItem;
-              const targetIdx = cache.findTask.checklists.findIndex(c => c.id === item.taskChecklistID);
+              const targetIdx = cache.findTask.checklists.findIndex((c) => c.id === item.taskChecklistID);
              if (targetIdx > -1) {
                draftCache.findTask.checklists[targetIdx].items = cache.findTask.checklists[targetIdx].items.filter(
-                  c => item.id !== c.id,
+                  (c) => item.id !== c.id,
                );
              }
              const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
@ -362,12 +359,12 @@ const Details: React.FC<DetailsProps> = ({
      updateApolloCache<FindTaskQuery>(
        client,
        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (cache) =>
+          produce(cache, (draftCache) => {
            if (newTaskItem.data) {
              const item = newTaskItem.data.createTaskChecklistItem;
              const { checklists } = cache.findTask;
-              const idx = checklists.findIndex(c => c.id === item.taskChecklistID);
+              const idx = checklists.findIndex((c) => c.id === item.taskChecklistID);
              if (idx !== -1) {
                draftCache.findTask.checklists[idx].items.push({ ...item });
                const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
@ -445,7 +442,7 @@ const Details: React.FC<DetailsProps> = ({
              onCreateComment={(task, message) => {
                createTaskComment({ variables: { taskID: task.id, message } });
              }}
-              onChecklistDrop={checklist => {
+              onChecklistDrop={(checklist) => {
                updateTaskChecklistLocation({
                  variables: { taskChecklistID: checklist.id, position: checklist.position },

@ -487,7 +484,7 @@ const Details: React.FC<DetailsProps> = ({
              }}
              onTaskNameChange={onTaskNameChange}
              onTaskDescriptionChange={onTaskDescriptionChange}
-              onToggleTaskComplete={task => {
+              onToggleTaskComplete={(task) => {
                setTaskComplete({ variables: { taskID: task.id, complete: !task.complete } });
              }}
              onDeleteTask={onDeleteTask}
@ -532,7 +529,7 @@ const Details: React.FC<DetailsProps> = ({
                createTaskChecklistItem({ variables: { taskChecklistID, name, position } });
              }}
              onMemberProfile={($targetRef, memberID) => {
-                const member = data.findTask.assigned.find(m => m.id === memberID);
+                const member = data.findTask.assigned.find((m) => m.id === memberID);
                if (member) {
                  showPopup(
                    $targetRef,
@ -582,7 +579,7 @@ const Details: React.FC<DetailsProps> = ({
                    }}
                  >
                    <CreateChecklistPopup
-                      onCreateChecklist={checklistData => {
+                      onCreateChecklist={(checklistData) => {
                        let position = 65535;
                        if (data.findTask.checklists) {
                          const [lastChecklist] = data.findTask.checklists.slice(-1);
@ -632,7 +629,7 @@ const Details: React.FC<DetailsProps> = ({
                  >
                    <DueDateManager
                      task={task}
-                      onRemoveDueDate={t => {
+                      onRemoveDueDate={(t) => {
                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: null, hasTime: false } });
                        // hidePopup();
                      }}
--- a/frontend/src/Projects/Project/index.tsx
+++ b/frontend/src/Projects/Project/index.tsx
@ -64,7 +64,7 @@ const Project = () => {
    pollInterval: polling.PROJECT,
  });
  const [toggleTaskLabel] = useToggleTaskLabelMutation({
-    onCompleted: newTaskLabel => {
+    onCompleted: (newTaskLabel) => {
      taskLabelsRef.current = newTaskLabel.toggleTaskLabel.task.labels;
    },
  });
@ -73,17 +73,17 @@ const Project = () => {
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (cache) =>
+          produce(cache, (draftCache) => {
            if (resp.data) {
              const taskGroupIdx = draftCache.findProject.taskGroups.findIndex(
-                tg => tg.tasks.findIndex(t => t.id === resp.data?.deleteTask.taskID) !== -1,
+                (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);
+                ].tasks.filter((t) => t.id !== resp.data?.deleteTask.taskID);
              }
            }
          }),
@ -96,8 +96,8 @@ const Project = () => {
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (cache) =>
+          produce(cache, (draftCache) => {
            draftCache.findProject.name = newName.data?.updateProjectName.name ?? '';
          }),
        { projectID },
@ -110,8 +110,8 @@ const Project = () => {
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (cache) =>
+          produce(cache, (draftCache) => {
            if (response.data) {
              draftCache.findProject.members = [
                ...cache.findProject.members,
@ -132,10 +132,10 @@ const Project = () => {
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (cache) =>
+          produce(cache, (draftCache) => {
            draftCache.findProject.invitedMembers = cache.findProject.invitedMembers.filter(
-              m => m.email !== response.data?.deleteInvitedProjectMember.invitedMember.email ?? '',
+              (m) => m.email !== response.data?.deleteInvitedProjectMember.invitedMember.email ?? '',
            );
          }),
        { projectID },
@ -147,10 +147,10 @@ const Project = () => {
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (cache) =>
+          produce(cache, (draftCache) => {
            draftCache.findProject.members = cache.findProject.members.filter(
-              m => m.id !== response.data?.deleteProjectMember.member.id,
+              (m) => m.id !== response.data?.deleteProjectMember.member.id,
            );
          }),
        { projectID },
@ -176,23 +176,23 @@ const Project = () => {
          onChangeProjectOwner={() => {
            hidePopup();
          }}
-          onRemoveFromBoard={userID => {
+          onRemoveFromBoard={(userID) => {
            deleteProjectMember({ variables: { userID, projectID } });
            hidePopup();
          }}
-          onRemoveInvitedFromBoard={email => {
+          onRemoveInvitedFromBoard={(email) => {
            deleteInvitedProjectMember({ variables: { projectID, email } });
            hidePopup();
          }}
-          onSaveProjectName={projectName => {
+          onSaveProjectName={(projectName) => {
            updateProjectName({ variables: { projectID, name: projectName } });
          }}
-          onInviteUser={$target => {
+          onInviteUser={($target) => {
            showPopup(
              $target,
              <UserManagementPopup
                projectID={projectID}
-                onInviteProjectMembers={members => {
+                onInviteProjectMembers={(members) => {
                  inviteProjectMembers({ variables: { projectID, members } });
                  hidePopup();
                }}
@ -233,50 +233,51 @@ const Project = () => {
        />
        <Route
          path={`${match.path}/board/c/:taskID`}
-          render={(routeProps: RouteComponentProps<TaskRouteProps>) => (
-            <Details
-              refreshCache={NOOP}
-              availableMembers={data.findProject.members}
-              projectURL={`${match.url}/board`}
-              taskID={routeProps.match.params.taskID}
-              onTaskNameChange={(updatedTask, newName) => {
-                updateTaskName({ variables: { taskID: updatedTask.id, name: newName } });
-              }}
-              onTaskDescriptionChange={(updatedTask, newDescription) => {
-                updateTaskDescription({
-                  variables: { taskID: updatedTask.id, description: newDescription },
-                  optimisticResponse: {
-                    __typename: 'Mutation',
-                    updateTaskDescription: {
-                      __typename: 'Task',
-                      id: updatedTask.id,
-                      description: newDescription,
+          render={() => {
+            return (
+              <Details
+                refreshCache={NOOP}
+                availableMembers={data.findProject.members}
+                projectURL={`${match.url}/board`}
+                onTaskNameChange={(updatedTask, newName) => {
+                  updateTaskName({ variables: { taskID: updatedTask.id, name: newName } });
+                }}
+                onTaskDescriptionChange={(updatedTask, newDescription) => {
+                  updateTaskDescription({
+                    variables: { taskID: updatedTask.id, description: newDescription },
+                    optimisticResponse: {
+                      __typename: 'Mutation',
+                      updateTaskDescription: {
+                        __typename: 'Task',
+                        id: updatedTask.id,
+                        description: newDescription,
+                      },
                    },
-                  },
-                });
-              }}
-              onDeleteTask={deletedTask => {
-                deleteTask({ variables: { taskID: deletedTask.id } });
-                history.push(`${match.url}/board`);
-              }}
-              onOpenAddLabelPopup={(task, $targetRef) => {
-                taskLabelsRef.current = task.labels;
-                showPopup(
-                  $targetRef,
-                  <LabelManagerEditor
-                    onLabelToggle={labelID => {
-                      toggleTaskLabel({ variables: { taskID: task.id, projectLabelID: labelID } });
-                    }}
-                    taskID={task.id}
-                    labelColors={data.labelColors}
-                    labels={labelsRef}
-                    taskLabels={taskLabelsRef}
-                    projectID={projectID}
-                  />,
-                );
-              }}
-            />
-          )}
+                  });
+                }}
+                onDeleteTask={(deletedTask) => {
+                  deleteTask({ variables: { taskID: deletedTask.id } });
+                  history.push(`${match.url}/board`);
+                }}
+                onOpenAddLabelPopup={(task, $targetRef) => {
+                  taskLabelsRef.current = task.labels;
+                  showPopup(
+                    $targetRef,
+                    <LabelManagerEditor
+                      onLabelToggle={(labelID) => {
+                        toggleTaskLabel({ variables: { taskID: task.id, projectLabelID: labelID } });
+                      }}
+                      taskID={task.id}
+                      labelColors={data.labelColors}
+                      labels={labelsRef}
+                      taskLabels={taskLabelsRef}
+                      projectID={projectID}
+                    />,
+                  );
+                }}
+              />
+            );
+          }}
        />
      </>
    );
--- a/frontend/src/Projects/index.tsx
+++ b/frontend/src/Projects/index.tsx
@ -16,15 +16,15 @@ import { useCurrentUser } from 'App/context';
 import Button from 'shared/components/Button';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import { useForm } from 'react-hook-form';
-import Input from 'shared/components/Input';
+import ControlledInput from 'shared/components/ControlledInput';
 import updateApolloCache from 'shared/utils/cache';
 import produce from 'immer';
 import NOOP from 'shared/utils/noop';
 import theme from 'App/ThemeStyles';
-import { mixin } from '../shared/utils/styles';
 import polling from 'shared/utils/polling';
+import { mixin } from '../shared/utils/styles';

-type CreateTeamData = { teamName: string };
+type CreateTeamData = { name: string };

 type CreateTeamFormProps = {
  onCreateTeam: (teamName: string) => void;
@ -36,28 +36,30 @@ const CreateTeamButton = styled(Button)`
  width: 100%;
 `;

+const ErrorText = styled.span`
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.danger};
+`;
 const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
-  const { register, handleSubmit } = useForm<CreateTeamData>();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<CreateTeamData>();
  const createTeam = (data: CreateTeamData) => {
-    onCreateTeam(data.teamName);
+    onCreateTeam(data.name);
  };
  return (
    <CreateTeamFormContainer onSubmit={handleSubmit(createTeam)}>
-      <Input
-        width="100%"
-        label="Team name"
-        id="teamName"
-        name="teamName"
-        variant="alternate"
-        ref={register({ required: 'Team name is required' })}
-      />
+      {errors.name && <ErrorText>{errors.name.message}</ErrorText>}
+      <ControlledInput width="100%" label="Team name" variant="alternate" {...register('name')} />
      <CreateTeamButton type="submit">Create</CreateTeamButton>
    </CreateTeamFormContainer>
  );
 };

 const ProjectAddTile = styled.div`
-  background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
+  background-color: ${(props) => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
  background-size: cover;
  background-position: 50%;
  color: #fff;
@ -71,7 +73,7 @@ const ProjectAddTile = styled.div`
 `;

 const ProjectTile = styled(Link)<{ color: string }>`
-  background-color: ${props => props.color};
+  background-color: ${(props) => props.color};
  background-size: cover;
  background-position: 50%;
  color: #fff;
@ -142,7 +144,7 @@ const ProjectTileName = styled.div<{ centered?: boolean }>`
  max-height: 40px;
  width: 100%;
  word-wrap: break-word;
-  ${props => props.centered && 'text-align: center;'}
+  ${(props) => props.centered && 'text-align: center;'}
 `;

 const Wrapper = styled.div`
@ -180,7 +182,7 @@ const SectionActionLink = styled(Link)`

 const ProjectSectionTitle = styled.h3`
  font-size: 16px;
-  color: ${props => props.theme.colors.text.primary};
+  color: ${(props) => props.theme.colors.text.primary};
 `;

 const ProjectsContainer = styled.div`
@ -210,8 +212,8 @@ const Projects = () => {
  }, []);
  const [createProject] = useCreateProjectMutation({
    update: (client, newProject) => {
-      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
-        produce(cache, draftCache => {
+      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, (cache) =>
+        produce(cache, (draftCache) => {
          if (newProject.data) {
            draftCache.projects.push({ ...newProject.data.createProject });
          }
@ -224,8 +226,8 @@ const Projects = () => {
  const { user } = useCurrentUser();
  const [createTeam] = useCreateTeamMutation({
    update: (client, createData) => {
-      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
-        produce(cache, draftCache => {
+      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, (cache) =>
+        produce(cache, (draftCache) => {
          if (createData.data) {
            draftCache.teams.push({ ...createData.data?.createTeam });
          }
@ -239,7 +241,7 @@ const Projects = () => {
    const { projects, teams, organizations } = data;
    const organizationID = organizations[0].id ?? null;
    const personalProjects = projects
-      .filter(p => p.team === null)
+      .filter((p) => p.team === null)
      .sort((a, b) => {
        const textA = a.name.toUpperCase();
        const textB = b.name.toUpperCase();
@ -251,12 +253,12 @@ const Projects = () => {
        const textB = b.name.toUpperCase();
        return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
      })
-      .map(team => {
+      .map((team) => {
        return {
          id: team.id,
          name: team.name,
          projects: projects
-            .filter(project => project.team && project.team.id === team.id)
+            .filter((project) => project.team && project.team.id === team.id)
            .sort((a, b) => {
              const textA = a.name.toUpperCase();
              const textB = b.name.toUpperCase();
@ -272,7 +274,7 @@ const Projects = () => {
            {true && ( // TODO: add permision check
              <AddTeamButton
                variant="outline"
-                onClick={$target => {
+                onClick={($target) => {
                  showPopup(
                    $target,
                    <Popup
@ -283,7 +285,7 @@ const Projects = () => {
                      }}
                    >
                      <CreateTeamForm
-                        onCreateTeam={teamName => {
+                        onCreateTeam={(teamName) => {
                          if (organizationID) {
                            createTeam({ variables: { name: teamName, organizationID } });
                            hidePopup();
@ -326,7 +328,7 @@ const Projects = () => {
                </ProjectListItem>
              </ProjectList>
            </div>
-            {projectTeams.map(team => {
+            {projectTeams.map((team) => {
              return (
                <div key={team.id}>
                  <ProjectSectionTitleWrapper>