feature: fix user admin related bugs

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

@@ -1,7 +1,7 @@
-import React, {useState, useRef, useEffect} from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
-import {CheckSquare, Trash, Square, CheckSquareOutline, Clock, Cross, AccountPlus} from 'shared/icons';
-import {DragDropContext, Droppable, Draggable, DropResult} from 'react-beautiful-dnd';
+import { CheckSquare, Trash, Square, CheckSquareOutline, Clock, Cross, AccountPlus } from 'shared/icons';
+import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
 import {
   isPositionChanged,
   getSortedDraggables,
@@ -81,7 +81,7 @@ const ChecklistProgressBar = styled.div`
   overflow: hidden;
   position: relative;
 `;
-const ChecklistProgressBarCurrent = styled.div<{width: number}>`
+const ChecklistProgressBarCurrent = styled.div<{ width: number }>`
   width: ${props => props.width}%;
   background: rgba(${props => (props.width === 100 ? props.theme.colors.success : props.theme.colors.primary)});
   bottom: 0;
@@ -132,7 +132,7 @@ const ChecklistItemTextControls = styled.div`
   align-items: center;
 `;
 
-const ChecklistItemText = styled.span<{complete: boolean}>`
+const ChecklistItemText = styled.span<{ complete: boolean }>`
   color: ${props => (props.complete ? '#5e6c84' : `rgba(${props.theme.colors.text.primary})`)};
   ${props => props.complete && 'text-decoration: line-through;'}
   line-height: 20px;
@@ -156,11 +156,11 @@ const ControlButton = styled.div`
   padding: 4px 6px;
   border-radius: 6px;
   background-color: rgba(${props => props.theme.colors.bg.primary}, 0.8);
-      display: flex;
-    width: 32px;
-    height: 32px;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
   &:hover {
     background-color: rgba(${props => props.theme.colors.primary}, 1);
   }
@@ -212,16 +212,13 @@ const TrashButton = styled(Trash)`
   fill: rgba(${props => props.theme.colors.text.primary});
 `;
 
-const ChecklistItemWrapper = styled.div<{ref: any}>`
+const ChecklistItemWrapper = styled.div<{ ref: any }>`
   user-select: none;
   clear: both;
   padding-left: 40px;
   position: relative;
   border-radius: 6px;
-  transform-origin: left bottom;
-  transition-property: transform, opacity, height, padding, margin;
-  transition-duration: 0.14s;
-  transition-timing-function: ease-in;
+
   & ${ControlButton}:last-child {
     margin-right: 4px;
   }
@@ -295,7 +292,17 @@ type ChecklistItemProps = {
 
 export const ChecklistItem = React.forwardRef(
   (
-    {itemID, checklistID, complete, name, wrapperProps, handleProps, onChangeName, onToggleItem, onDeleteItem}: ChecklistItemProps,
+    {
+      itemID,
+      checklistID,
+      complete,
+      name,
+      wrapperProps,
+      handleProps,
+      onChangeName,
+      onToggleItem,
+      onDeleteItem,
+    }: ChecklistItemProps,
     $item,
   ) => {
     const $editor = useRef<HTMLTextAreaElement>(null);
@@ -319,8 +326,8 @@ export const ChecklistItem = React.forwardRef(
           {complete ? (
             <ChecklistItemCheckedIcon width={20} height={20} />
           ) : (
-              <ChecklistItemUncheckedIcon width={20} height={20} />
-            )}
+            <ChecklistItemUncheckedIcon width={20} height={20} />
+          )}
         </ChecklistIcon>
         {editting ? (
           <>
@@ -370,34 +377,34 @@ export const ChecklistItem = React.forwardRef(
             </EditControls>
           </>
         ) : (
-            <ChecklistItemDetails
-              onClick={() => {
-                setEditting(true);
-              }}
-            >
-              <ChecklistItemRow>
-                <ChecklistItemTextControls>
-                  <ChecklistItemText complete={complete}>{name}</ChecklistItemText>
-                  <ChecklistControls>
-                    <ControlButton>
-                      <AssignUserButton width={14} height={14} />
-                    </ControlButton>
-                    <ControlButton>
-                      <ClockButton width={14} height={14} />
-                    </ControlButton>
-                    <ControlButton
-                      onClick={e => {
-                        e.stopPropagation();
-                        onDeleteItem(checklistID, itemID);
-                      }}
-                    >
-                      <TrashButton width={14} height={14} />
-                    </ControlButton>
-                  </ChecklistControls>
-                </ChecklistItemTextControls>
-              </ChecklistItemRow>
-            </ChecklistItemDetails>
-          )}
+          <ChecklistItemDetails
+            onClick={() => {
+              setEditting(true);
+            }}
+          >
+            <ChecklistItemRow>
+              <ChecklistItemTextControls>
+                <ChecklistItemText complete={complete}>{name}</ChecklistItemText>
+                <ChecklistControls>
+                  <ControlButton>
+                    <AssignUserButton width={14} height={14} />
+                  </ControlButton>
+                  <ControlButton>
+                    <ClockButton width={14} height={14} />
+                  </ControlButton>
+                  <ControlButton
+                    onClick={e => {
+                      e.stopPropagation();
+                      onDeleteItem(checklistID, itemID);
+                    }}
+                  >
+                    <TrashButton width={14} height={14} />
+                  </ControlButton>
+                </ChecklistControls>
+              </ChecklistItemTextControls>
+            </ChecklistItemRow>
+          </ChecklistItemDetails>
+        )}
       </ChecklistItemWrapper>
     );
   },
@@ -407,7 +414,7 @@ type AddNewItemProps = {
   onAddItem: (name: string) => void;
 };
 
-const AddNewItem: React.FC<AddNewItemProps> = ({onAddItem}) => {
+const AddNewItem: React.FC<AddNewItemProps> = ({ onAddItem }) => {
   const $editor = useRef<HTMLTextAreaElement>(null);
   const $wrapper = useRef<HTMLDivElement>(null);
   const [currentName, setCurrentName] = useState('');
@@ -464,8 +471,8 @@ const AddNewItem: React.FC<AddNewItemProps> = ({onAddItem}) => {
           </EditControls>
         </>
       ) : (
-          <NewItemButton onClick={() => setEditting(true)}>Add an item</NewItemButton>
-        )}
+        <NewItemButton onClick={() => setEditting(true)}>Add an item</NewItemButton>
+      )}
     </ChecklistNewItem>
   );
 };
@@ -477,7 +484,7 @@ type ChecklistTitleEditorProps = {
 };
 
 const ChecklistTitleEditor = React.forwardRef(
-  ({name, onChangeName, onCancel}: ChecklistTitleEditorProps, $name: any) => {
+  ({ name, onChangeName, onCancel }: ChecklistTitleEditorProps, $name: any) => {
     const [currentName, setCurrentName] = useState(name);
     return (
       <>
@@ -579,21 +586,21 @@ const Checklist = React.forwardRef(
               }}
             />
           ) : (
-              <WindowChecklistTitle {...handleProps}>
-                <WindowTitleText onClick={() => setEditting(true)}>{name}</WindowTitleText>
-                <WindowOptions>
-                  <DeleteButton
-                    onClick={$target => {
-                      onDeleteChecklist($target, checklistID);
-                    }}
-                    color="danger"
-                    variant="outline"
-                  >
-                    Delete
+            <WindowChecklistTitle {...handleProps}>
+              <WindowTitleText onClick={() => setEditting(true)}>{name}</WindowTitleText>
+              <WindowOptions>
+                <DeleteButton
+                  onClick={$target => {
+                    onDeleteChecklist($target, checklistID);
+                  }}
+                  color="danger"
+                  variant="outline"
+                >
+                  Delete
                 </DeleteButton>
-                </WindowOptions>
-              </WindowChecklistTitle>
-            )}
+              </WindowOptions>
+            </WindowChecklistTitle>
+          )}
         </WindowTitle>
         <ChecklistProgress>
           <ChecklistProgressPercent>{`${percent}%`}</ChecklistProgressPercent>