deps: upgrade all dependencies

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

@@ -16,7 +16,7 @@ const InputWrapper = styled.div<{ width: string }>`
 `;
 
 const InputLabel = styled.span<{ width: string }>`
-  width: ${props => props.width};
+  width: ${(props) => props.width};
   padding: 0.7rem !important;
   color: #c2c6dc;
   left: 0;
@@ -40,13 +40,13 @@ const InputInput = styled.input<{
   focusBg: string;
   borderColor: string;
 }>`
-  width: ${props => props.width};
+  width: ${(props) => props.width};
   font-size: 14px;
   border: 1px solid rgba(0, 0, 0, 0.2);
-  border-color: ${props => props.borderColor};
+  border-color: ${(props) => props.borderColor};
   background: #262c49;
   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
-  ${props => (props.hasIcon ? 'padding: 0.7rem 1rem 0.7rem 3rem;' : 'padding: 0.7rem;')}
+  ${(props) => (props.hasIcon ? 'padding: 0.7rem 1rem 0.7rem 3rem;' : 'padding: 0.7rem;')}
   line-height: 16px;
   color: #c2c6dc;
   position: relative;
@@ -55,13 +55,13 @@ const InputInput = styled.input<{
   &:focus {
     box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
     border: 1px solid rgba(115, 103, 240);
-    background: ${props => props.focusBg};
+    background: ${(props) => props.focusBg};
   }
   &:focus ~ ${InputLabel} {
-    color: ${props => props.theme.colors.primary};
+    color: ${(props) => props.theme.colors.primary};
     transform: translate(-3px, -90%);
   }
-  ${props =>
+  ${(props) =>
     props.hasValue &&
     css`
       & ~ ${InputLabel} {
@@ -94,11 +94,13 @@ type ControlledInputProps = {
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   value?: string;
   onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
 };
 
 const ControlledInput = ({
   width = 'auto',
   variant = 'normal',
+  disabled = false,
   type = 'text',
   autocomplete,
   autoFocus = false,
@@ -126,8 +128,9 @@ const ControlledInput = ({
   return (
     <InputWrapper className={className} width={width}>
       <InputInput
+        disabled={disabled}
         hasValue={hasValue}
-        onChange={e => {
+        onChange={(e) => {
           if (onChange) {
             setHasValue(e.currentTarget.value !== '' || floatingLabel);
             onChange(e);

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

@@ -59,7 +59,7 @@ const HeaderSelectLabel = styled.div`
   color: #c2c6dc;
 
   &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: ${(props) => props.theme.colors.primary};
     color: #c2c6dc;
   }
 `;
@@ -78,12 +78,12 @@ const HeaderSelect = styled.select`
 
   & option {
     color: #c2c6dc;
-    background: ${props => props.theme.colors.bg.primary};
+    background: ${(props) => props.theme.colors.bg.primary};
   }
 
   & option:hover {
-    background: ${props => props.theme.colors.bg.secondary};
-    border: 1px solid ${props => props.theme.colors.primary};
+    background: ${(props) => props.theme.colors.bg.secondary};
+    border: 1px solid ${(props) => props.theme.colors.primary};
     outline: none !important;
     box-shadow: none;
     color: #c2c6dc;
@@ -115,7 +115,7 @@ const HeaderButton = styled.button`
   border: none;
   border-radius: 3px;
   &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: ${(props) => props.theme.colors.primary};
     color: #fff;
   }
 `;
@@ -133,7 +133,14 @@ const HeaderActions = styled.div`
 
 const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
   const currentDueDate = task.dueDate ? dayjs(task.dueDate).toDate() : null;
-  const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    setError,
+    formState: { errors },
+    control,
+  } = useForm<DueDateFormData>();
 
   const [startDate, setStartDate] = useState<Date | null>(currentDueDate);
   const [endDate, setEndDate] = useState<Date | null>(currentDueDate);
@@ -203,7 +210,11 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
       <DateRangeInputs>
         <DatePicker
           selected={startDate}
-          onChange={date => setStartDate(date)}
+          onChange={(date) => {
+            if (!Array.isArray(date)) {
+              setStartDate(date);
+            }
+          }}
           popperClassName="picker-hidden"
           dateFormat="yyyy-MM-dd"
           disabledKeyboardNavigation
@@ -214,7 +225,11 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
           <DatePicker
             selected={startDate}
             isClearable
-            onChange={date => setStartDate(date)}
+            onChange={(date) => {
+              if (!Array.isArray(date)) {
+                setStartDate(date);
+              }
+            }}
             popperClassName="picker-hidden"
             dateFormat="yyyy-MM-dd"
             placeholderText="Select from date"
@@ -225,7 +240,11 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
       </DateRangeInputs>
       <DatePicker
         selected={startDate}
-        onChange={date => setStartDate(date)}
+        onChange={(date) => {
+          if (!Array.isArray(date)) {
+            setStartDate(date);
+          }
+        }}
         startDate={startDate}
         useWeekdaysShort
         renderCustomHeader={({
@@ -247,7 +266,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
                 value={months[getMonth(date)]}
                 onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}
               >
-                {months.map(option => (
+                {months.map((option) => (
                   <option key={option} value={option}>
                     {option}
                   </option>
@@ -257,7 +276,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
             <HeaderSelectLabel>
               {date.getFullYear()}
               <HeaderSelect value={getYear(date)} onChange={({ target: { value } }) => changeYear(parseInt(value, 10))}>
-                {years.map(option => (
+                {years.map((option) => (
                   <option key={option} value={option}>
                     {option}
                   </option>
@@ -279,8 +298,10 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
           <ActionLabel>Due Time</ActionLabel>
           <DatePicker
             selected={startDate}
-            onChange={date => {
-              setStartDate(date);
+            onChange={(date) => {
+              if (!Array.isArray(date)) {
+                setStartDate(date);
+              }
             }}
             showTimeSelect
             showTimeSelectOnly

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

@@ -25,7 +25,12 @@ import {
 
 const Login = ({ onSubmit }: LoginProps) => {
   const [isComplete, setComplete] = useState(true);
-  const { register, handleSubmit, errors, setError, formState } = useForm<LoginFormData>();
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors },
+  } = useForm<LoginFormData>();
   const loginSubmit = (data: LoginFormData) => {
     setComplete(false);
     onSubmit(data, setComplete, setError);
@@ -47,12 +52,7 @@ const Login = ({ onSubmit }: LoginProps) => {
             <Form onSubmit={handleSubmit(loginSubmit)}>
               <FormLabel htmlFor="username">
                 Username
-                <FormTextInput
-                  type="text"
-                  id="username"
-                  name="username"
-                  ref={register({ required: 'Username is required' })}
-                />
+                <FormTextInput type="text" {...register('username', { required: 'Username is required' })} />
                 <FormIcon>
                   <User width={20} height={20} />
                 </FormIcon>
@@ -60,12 +60,7 @@ const Login = ({ onSubmit }: LoginProps) => {
               {errors.username && <FormError>{errors.username.message}</FormError>}
               <FormLabel htmlFor="password">
                 Password
-                <FormTextInput
-                  type="password"
-                  id="password"
-                  name="password"
-                  ref={register({ required: 'Password is required' })}
-                />
+                <FormTextInput type="password" {...register('password', { required: 'Password is required' })} />
                 <FormIcon>
                   <Lock width={20} height={20} />
                 </FormIcon>

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

@@ -26,7 +26,12 @@ const INITIALS_PATTERN = /[a-zA-Z]{2,3}/i;
 
 const Register = ({ onSubmit, registered = false }: RegisterProps) => {
   const [isComplete, setComplete] = useState(true);
-  const { register, handleSubmit, errors, setError } = useForm<RegisterFormData>();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setError,
+  } = useForm<RegisterFormData>();
   const loginSubmit = (data: RegisterFormData) => {
     setComplete(false);
     onSubmit(data, setComplete, setError);
@@ -55,12 +60,7 @@ const Register = ({ onSubmit, registered = false }: RegisterProps) => {
                 <Form onSubmit={handleSubmit(loginSubmit)}>
                   <FormLabel htmlFor="fullname">
                     Full name
-                    <FormTextInput
-                      type="text"
-                      id="fullname"
-                      name="fullname"
-                      ref={register({ required: 'Full name is required' })}
-                    />
+                    <FormTextInput type="text" {...register('fullname', { required: 'Full name is required' })} />
                     <FormIcon>
                       <User width={20} height={20} />
                     </FormIcon>
@@ -68,12 +68,7 @@ const Register = ({ onSubmit, registered = false }: RegisterProps) => {
                   {errors.username && <FormError>{errors.username.message}</FormError>}
                   <FormLabel htmlFor="username">
                     Username
-                    <FormTextInput
-                      type="text"
-                      id="username"
-                      name="username"
-                      ref={register({ required: 'Username is required' })}
-                    />
+                    <FormTextInput type="text" {...register('username', { required: 'Username is required' })} />
                     <FormIcon>
                       <User width={20} height={20} />
                     </FormIcon>
@@ -83,9 +78,7 @@ const Register = ({ onSubmit, registered = false }: RegisterProps) => {
                     Email
                     <FormTextInput
                       type="text"
-                      id="email"
-                      name="email"
-                      ref={register({
+                      {...register('email', {
                         required: 'Email is required',
                         pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
                       })}
@@ -99,9 +92,7 @@ const Register = ({ onSubmit, registered = false }: RegisterProps) => {
                     Initials
                     <FormTextInput
                       type="text"
-                      id="initials"
-                      name="initials"
-                      ref={register({
+                      {...register('initials', {
                         required: 'Initials is required',
                         pattern: {
                           value: INITIALS_PATTERN,
@@ -116,12 +107,7 @@ const Register = ({ onSubmit, registered = false }: RegisterProps) => {
                   {errors.initials && <FormError>{errors.initials.message}</FormError>}
                   <FormLabel htmlFor="password">
                     Password
-                    <FormTextInput
-                      type="password"
-                      id="password"
-                      name="password"
-                      ref={register({ required: 'Password is required' })}
-                    />
+                    <FormTextInput type="password" {...register('password', { required: 'Password is required' })} />
                     <FormIcon>
                       <Lock width={20} height={20} />
                     </FormIcon>
@@ -131,9 +117,7 @@ const Register = ({ onSubmit, registered = false }: RegisterProps) => {
                     Password (Confirm)
                     <FormTextInput
                       type="password"
-                      id="password_confirm"
-                      name="password_confirm"
-                      ref={register({ required: 'Password (confirm) is required' })}
+                      {...register('password_confirm', { required: 'Password (confirm) is required' })}
                     />
                     <FormIcon>
                       <Lock width={20} height={20} />

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

@@ -1,23 +1,23 @@
 import React, { useState, useRef } from 'react';
 import styled from 'styled-components';
 import { User } from 'shared/icons';
-import Input from 'shared/components/Input';
 import Button from 'shared/components/Button';
 import { useForm } from 'react-hook-form';
+import ControlledInput from 'shared/components/ControlledInput';
 
-const PasswordInput = styled(Input)`
+const PasswordInput = styled(ControlledInput)`
   margin-top: 30px;
   margin-bottom: 0;
 `;
 
-const UserInfoInput = styled(Input)`
+const UserInfoInput = styled(ControlledInput)`
   margin-top: 30px;
   margin-bottom: 0;
 `;
 
 const FormError = styled.span`
   font-size: 12px;
-  color: ${props => props.theme.colors.warning};
+  color: ${(props) => props.theme.colors.warning};
 `;
 
 const ProfileContainer = styled.div`
@@ -42,7 +42,7 @@ const AvatarMask = styled.div<{ background: string }>`
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: ${props => props.background};
+  background: ${(props) => props.background};
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -152,12 +152,12 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
   width: 100%;
   position: relative;
 
-  color: ${props => (props.active ? `${props.theme.colors.primary}` : '#c2c6dc')};
+  color: ${(props) => (props.active ? `${props.theme.colors.primary}` : '#c2c6dc')};
   &:hover {
-    color: ${props => props.theme.colors.primary};
+    color: ${(props) => props.theme.colors.primary};
   }
   &:hover svg {
-    fill: ${props => props.theme.colors.primary};
+    fill: ${(props) => props.theme.colors.primary};
   }
 `;
 
@@ -173,10 +173,14 @@ const TabNavLine = styled.span<{ top: number }>`
   width: 2px;
   height: 48px;
   transform: scaleX(1);
-  top: ${props => props.top}px;
+  top: ${(props) => props.top}px;
 
-  background: linear-gradient(30deg, ${props => props.theme.colors.primary}, ${props => props.theme.colors.primary});
-  box-shadow: 0 0 8px 0 ${props => props.theme.colors.primary};
+  background: linear-gradient(
+    30deg,
+    ${(props) => props.theme.colors.primary},
+    ${(props) => props.theme.colors.primary}
+  );
+  box-shadow: 0 0 8px 0 ${(props) => props.theme.colors.primary};
   display: block;
   position: absolute;
   transition: all 0.2s ease;
@@ -267,36 +271,36 @@ type ResetPasswordTabProps = {
 };
 const ResetPasswordTab: React.FC<ResetPasswordTabProps> = ({ onResetPassword }) => {
   const [active, setActive] = useState(true);
-  const { register, handleSubmit, errors, setError, reset } = useForm<{ password: string; password_confirm: string }>();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setError,
+    reset,
+  } = useForm<{ password: string; passwordConfirm: string }>();
   const done = () => {
     reset();
     setActive(true);
   };
   return (
     <form
-      onSubmit={handleSubmit(data => {
-        if (data.password !== data.password_confirm) {
+      onSubmit={handleSubmit((data) => {
+        if (data.password !== data.passwordConfirm) {
           setError('password', { message: 'Passwords must match!', type: 'error' });
-          setError('password_confirm', { message: 'Passwords must match!', type: 'error' });
+          setError('passwordConfirm', { message: 'Passwords must match!', type: 'error' });
         } else {
           onResetPassword(data.password, done);
         }
       })}
     >
-      <PasswordInput
-        width="100%"
-        ref={register({ required: 'Password is required' })}
-        label="Password"
-        name="password"
-      />
+      <PasswordInput width="100%" {...register('password', { required: 'Password is required' })} label="Password" />
       {errors.password && <FormError>{errors.password.message}</FormError>}
       <PasswordInput
         width="100%"
-        ref={register({ required: 'Password is required' })}
+        {...register('passwordConfirm', { required: 'Password is required' })}
         label="Password (confirm)"
-        name="password_confirm"
       />
-      {errors.password_confirm && <FormError>{errors.password_confirm.message}</FormError>}
+      {errors.passwordConfirm && <FormError>{errors.passwordConfirm.message}</FormError>}
       <SettingActions>
         <SaveButton disabled={!active} type="submit">
           Save Change
@@ -329,7 +333,11 @@ const UserInfoTab: React.FC<UserInfoTabProps> = ({
   onChangeUserInfo,
 }) => {
   const [active, setActive] = useState(true);
-  const { register, handleSubmit, errors } = useForm<UserInfoData>();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<UserInfoData>();
   const done = () => {
     setActive(true);
   };
@@ -341,14 +349,13 @@ const UserInfoTab: React.FC<UserInfoTabProps> = ({
         profile={profile.profileIcon}
       />
       <form
-        onSubmit={handleSubmit(data => {
+        onSubmit={handleSubmit((data) => {
           setActive(false);
           onChangeUserInfo(data, done);
         })}
       >
         <UserInfoInput
-          ref={register({ required: 'Full name is required' })}
-          name="full_name"
+          {...register('full_name', { required: 'Full name is required' })}
           defaultValue={profile.fullName}
           width="100%"
           label="Name"
@@ -356,11 +363,10 @@ const UserInfoTab: React.FC<UserInfoTabProps> = ({
         {errors.full_name && <FormError>{errors.full_name.message}</FormError>}
         <UserInfoInput
           defaultValue={profile.profileIcon && profile.profileIcon.initials ? profile.profileIcon.initials : ''}
-          ref={register({
+          {...register('initials', {
             required: 'Initials is required',
             pattern: { value: INITIALS_PATTERN, message: 'Intials must be between two to four characters' },
           })}
-          name="initials"
           width="100%"
           label="Initials "
         />
@@ -368,8 +374,7 @@ const UserInfoTab: React.FC<UserInfoTabProps> = ({
         <UserInfoInput disabled defaultValue={profile.username ?? ''} width="100%" label="Username " />
         <UserInfoInput
           width="100%"
-          name="email"
-          ref={register({
+          {...register('email', {
             required: 'Email is required',
             pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
           })}
@@ -377,7 +382,7 @@ const UserInfoTab: React.FC<UserInfoTabProps> = ({
           label="Email"
         />
         {errors.email && <FormError>{errors.email.message}</FormError>}
-        <UserInfoInput width="100%" name="bio" ref={register()} defaultValue={profile.bio ?? ''} label="Bio" />
+        <UserInfoInput width="100%" {...register('bio')} defaultValue={profile.bio ?? ''} label="Bio" />
         {errors.bio && <FormError>{errors.bio.message}</FormError>}
         <SettingActions>
           <SaveButton disabled={!active} type="submit">

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

@@ -136,7 +136,7 @@ const StreamComment: React.FC<StreamCommentProps> = ({
                   onCreateComment={onUpdateComment}
                 />
               ) : (
-                <ReactMarkdown escapeHtml={false} plugins={[em]}>
+                <ReactMarkdown skipHtml plugins={[em]}>
                   {DOMPurify.sanitize(comment.message, { FORBID_TAGS: ['style', 'img'] })}
                 </ReactMarkdown>
               )}
@@ -300,7 +300,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
   const activityStream: Array<{ id: string; data: { time: string; type: 'comment' | 'activity' } }> = [];
 
   if (task.activity) {
-    task.activity.forEach(activity => {
+    task.activity.forEach((activity) => {
       activityStream.push({
         id: activity.id,
         data: {
@@ -312,7 +312,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
   }
 
   if (task.comments) {
-    task.comments.forEach(comment => {
+    task.comments.forEach((comment) => {
       activityStream.push({
         id: comment.id,
         data: {
@@ -358,12 +358,12 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
             <DueDateTitle>MEMBERS</DueDateTitle>
             {task.assigned && task.assigned.length !== 0 ? (
               <MemberList>
-                {task.assigned.map(m => (
+                {task.assigned.map((m) => (
                   <TaskMember
                     key={m.id}
                     member={m}
                     size={32}
-                    onMemberProfile={$target => {
+                    onMemberProfile={($target) => {
                       if (user) {
                         onMemberProfile($target, m.id);
                       }
@@ -401,7 +401,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
             <ExtraActionsSection>
               <DueDateTitle>ACTIONS</DueDateTitle>
               <ActionButton
-                onClick={$target => {
+                onClick={($target) => {
                   onOpenAddLabelPopup(task, $target);
                 }}
                 icon={<Tags width={12} height={12} />}
@@ -409,7 +409,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                 Labels
               </ActionButton>
               <ActionButton
-                onClick={$target => {
+                onClick={($target) => {
                   onOpenAddChecklistPopup(task, $target);
                 }}
                 icon={<CheckSquareOutline width={12} height={12} />}
@@ -460,7 +460,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
               value={taskName}
               ref={$detailsTitle}
               disabled={user === null}
-              onKeyDown={e => {
+              onKeyDown={(e) => {
                 if (e.keyCode === 13) {
                   e.preventDefault();
                   if ($detailsTitle && $detailsTitle.current) {
@@ -468,7 +468,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                   }
                 }
               }}
-              onChange={e => {
+              onChange={(e) => {
                 setTaskName(e.currentTarget.value);
               }}
               onBlur={() => {
@@ -481,12 +481,12 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
           <Labels>
             {task.labels.length !== 0 && (
               <MetaDetailContent>
-                {task.labels.map(label => {
+                {task.labels.map((label) => {
                   return (
                     <TaskLabelItem
                       key={label.projectLabel.id}
                       label={label}
-                      onClick={$target => {
+                      onClick={($target) => {
                         onOpenAddLabelPopup(task, $target);
                       }}
                     />
@@ -505,7 +505,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
               <TaskDetailsEditor value={taskDescriptionRef.current} />
             ) : (
               <EditorContainer
-                onClick={e => {
+                onClick={(e) => {
                   if (!editTaskDescription) {
                     setEditTaskDescription(true);
                   }
@@ -513,10 +513,10 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
               >
                 <Editor
                   defaultValue={task.description ?? ''}
-                  theme={dark}
                   readOnly={user === null || !editTaskDescription}
                   autoFocus
-                  onChange={value => {
+                  theme={dark}
+                  onChange={(value) => {
                     setSaveTimeout(() => {
                       clearTimeout(saveTimeout);
                       return setTimeout(saveDescription, 2000);
@@ -531,9 +531,9 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
             <ViewRawButton onClick={() => setShowRaw(!showRaw)}>{showRaw ? 'Show editor' : 'Show raw'}</ViewRawButton>
           </DescriptionContainer>
           <ChecklistSection>
-            <DragDropContext onDragEnd={result => onDragEnd(result, task, onChecklistDrop, onChecklistItemDrop)}>
+            <DragDropContext onDragEnd={(result) => onDragEnd(result, task, onChecklistDrop, onChecklistItemDrop)}>
               <Droppable direction="vertical" type="checklist" droppableId="root">
-                {dropProvided => (
+                {(dropProvided) => (
                   <ChecklistContainer {...dropProvided.droppableProps} ref={dropProvided.innerRef}>
                     {task.checklists &&
                       task.checklists
@@ -541,7 +541,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                         .sort((a, b) => a.position - b.position)
                         .map((checklist, idx) => (
                           <Draggable key={checklist.id} draggableId={checklist.id} index={idx}>
-                            {provided => (
+                            {(provided) => (
                               <Checklist
                                 ref={provided.innerRef}
                                 wrapperProps={provided.draggableProps}
@@ -551,10 +551,10 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                                 checklistID={checklist.id}
                                 items={checklist.items}
                                 onDeleteChecklist={onDeleteChecklist}
-                                onChangeName={newName => onChangeChecklistName(checklist.id, newName)}
+                                onChangeName={(newName) => onChangeChecklistName(checklist.id, newName)}
                                 onToggleItem={onToggleChecklistItem}
                                 onDeleteItem={onDeleteItem}
-                                onAddItem={n => {
+                                onAddItem={(n) => {
                                   if (task.checklists) {
                                     let position = 65535;
                                     const [lastItem] = checklist.items
@@ -569,7 +569,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                                 onChangeItemName={onChangeItemName}
                               >
                                 <Droppable direction="vertical" type="checklistItem" droppableId={checklist.id}>
-                                  {checklistDrop => (
+                                  {(checklistDrop) => (
                                     <>
                                       <ChecklistItems ref={checklistDrop.innerRef} {...checklistDrop.droppableProps}>
                                         {checklist.items
@@ -577,7 +577,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                                           .sort((a, b) => a.position - b.position)
                                           .map((item, itemIdx) => (
                                             <Draggable key={item.id} draggableId={item.id} index={itemIdx}>
-                                              {itemDrop => (
+                                              {(itemDrop) => (
                                                 <ChecklistItem
                                                   key={item.id}
                                                   itemID={item.id}
@@ -615,17 +615,19 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
             <TabBarItem>Activity</TabBarItem>
           </TabBarSection>
           <ActivitySection>
-            {activityStream.map(stream =>
+            {activityStream.map((stream) =>
               stream.data.type === 'comment' ? (
                 <StreamComment
                   onExtraActions={onCommentShowActions}
                   onCancelCommentEdit={onCancelCommentEdit}
-                  onUpdateComment={message => onUpdateComment(stream.id, message)}
+                  onUpdateComment={(message) => onUpdateComment(stream.id, message)}
                   editable={stream.id === editableComment}
-                  comment={task.comments && task.comments.find(comment => comment.id === stream.id)}
+                  comment={task.comments && task.comments.find((comment) => comment.id === stream.id)}
                 />
               ) : (
-                <StreamActivity activity={task.activity && task.activity.find(activity => activity.id === stream.id)} />
+                <StreamActivity
+                  activity={task.activity && task.activity.find((activity) => activity.id === stream.id)}
+                />
               ),
             )}
           </ActivitySection>
@@ -634,7 +636,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
           <CommentContainer>
             <CommentCreator
               me={me}
-              onCreateComment={message => onCreateComment(task, message)}
+              onCreateComment={(message) => onCreateComment(task, message)}
               onMemberProfile={onMemberProfile}
             />
           </CommentContainer>