Change wrapping of components in React.memo so that components have proper names in React Dev Tools. (#2332)

webapp/src/app.tsx

@@ -42,7 +42,7 @@ declare let window: IAppWindow
 
 const UUID_REGEX = new RegExp(/^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/)
 
-const App = React.memo((): JSX.Element => {
+const App = (): JSX.Element => {
     const language = useAppSelector<string>(getLanguage)
     const loggedIn = useAppSelector<boolean|null>(getLoggedIn)
     const globalError = useAppSelector<string>(getGlobalError)
@@ -277,6 +277,6 @@ const App = React.memo((): JSX.Element => {
             </DndProvider>
         </IntlProvider>
     )
-})
+}
 
-export default App
+export default React.memo(App)

webapp/src/components/addContentMenuItem.tsx

@@ -18,7 +18,7 @@ type Props = {
     cords: {x: number, y?: number, z?: number}
 }
 
-const AddContentMenuItem = React.memo((props:Props): JSX.Element => {
+const AddContentMenuItem = (props:Props): JSX.Element => {
     const {card, type, cords} = props
     const index = cords.x
     const contentOrder = card.fields.contentOrder.slice()
@@ -51,6 +51,6 @@ const AddContentMenuItem = React.memo((props:Props): JSX.Element => {
             }}
         />
     )
-})
+}
 
-export default AddContentMenuItem
+export default React.memo(AddContentMenuItem)

webapp/src/components/blockIconSelector.tsx

@@ -20,7 +20,7 @@ type Props = {
     readonly?: boolean
 }
 
-const BlockIconSelector = React.memo((props: Props) => {
+const BlockIconSelector = (props: Props) => {
     const {block, size} = props
     const intl = useIntl()
 
@@ -72,6 +72,6 @@ const BlockIconSelector = React.memo((props: Props) => {
             }
         </div>
     )
-})
+}
 
-export default BlockIconSelector
+export default React.memo(BlockIconSelector)

webapp/src/components/boardTemplateSelector/boardTemplateSelector.tsx

@@ -27,7 +27,7 @@ type Props = {
     onClose?: () => void
 }
 
-const BoardTemplateSelector = React.memo((props: Props) => {
+const BoardTemplateSelector = (props: Props) => {
     const globalTemplates = useAppSelector<Board[]>(getGlobalTemplates) || []
     const currentBoard = useAppSelector<Board>(getCurrentBoard) || null
     const {title, description, onClose} = props
@@ -166,7 +166,6 @@ const BoardTemplateSelector = React.memo((props: Props) => {
             </div>
         </div>
     )
-})
+}
-
-export default BoardTemplateSelector
 
+export default React.memo(BoardTemplateSelector)

webapp/src/components/boardTemplateSelector/boardTemplateSelectorItem.tsx

@@ -19,7 +19,7 @@ type Props = {
     onEdit: (templateId: string) => void
 }
 
-const BoardTemplateSelectorItem = React.memo((props: Props) => {
+const BoardTemplateSelectorItem = (props: Props) => {
     const {isActive, template, onEdit, onDelete, onSelect} = props
     const intl = useIntl()
     const [deleteOpen, setDeleteOpen] = useState<boolean>(false)
@@ -65,6 +65,6 @@ const BoardTemplateSelectorItem = React.memo((props: Props) => {
             />}
         </div>
     )
-})
+}
 
-export default BoardTemplateSelectorItem
+export default React.memo(BoardTemplateSelectorItem)

webapp/src/components/boardTemplateSelector/boardTemplateSelectorPreview.tsx

@@ -21,7 +21,7 @@ type Props = {
     activeTemplate: Board|null
 }
 
-const BoardTemplateSelectorPreview = React.memo((props: Props) => {
+const BoardTemplateSelectorPreview = (props: Props) => {
     const {activeTemplate} = props
     const [activeView, setActiveView] = useState<BoardView|null>(null)
     const [activeTemplateCards, setActiveTemplateCards] = useState<Card[]>([])
@@ -137,7 +137,7 @@ const BoardTemplateSelectorPreview = React.memo((props: Props) => {
             />}
         </div>
     )
-})
+}
 
-export default BoardTemplateSelectorPreview
+export default React.memo(BoardTemplateSelectorPreview)
 

webapp/src/components/cardDetail/cardDetailContents.tsx

@@ -147,7 +147,7 @@ const ContentBlockWithDragAndDrop = (props: ContentBlockWithDragAndDropProps) =>
     )
 }
 
-const CardDetailContents = React.memo((props: Props) => {
+const CardDetailContents = (props: Props) => {
     const intl = useIntl()
     const {contents, card, id} = props
     if (contents.length) {
@@ -188,6 +188,6 @@ const CardDetailContents = React.memo((props: Props) => {
             </div>
         </div>
     )
-})
+}
 
-export default CardDetailContents
+export default React.memo(CardDetailContents)

webapp/src/components/cardDetail/cardDetailContentsMenu.tsx

@@ -37,7 +37,7 @@ function addContentMenu(intl: IntlShape, type: BlockTypes): JSX.Element {
     )
 }
 
-const CardDetailContentsMenu = React.memo(() => {
+const CardDetailContentsMenu = () => {
     const intl = useIntl()
     return (
         <div className='CardDetailContentsMenu content add-content'>
@@ -54,6 +54,6 @@ const CardDetailContentsMenu = React.memo(() => {
             </MenuWrapper>
         </div>
     )
-})
+}
 
-export default CardDetailContentsMenu
+export default React.memo(CardDetailContentsMenu)

webapp/src/components/cardDetail/cardDetailProperties.tsx

@@ -32,7 +32,7 @@ type Props = {
     readonly: boolean
 }
 
-const CardDetailProperties = React.memo((props: Props) => {
+const CardDetailProperties = (props: Props) => {
     const {board, card, cards, views, activeView, contents, comments} = props
     const [newTemplateId, setNewTemplateId] = useState('')
     const intl = useIntl()
@@ -202,6 +202,6 @@ const CardDetailProperties = React.memo((props: Props) => {
             }
         </div>
     )
-})
+}
 
-export default CardDetailProperties
+export default React.memo(CardDetailProperties)

webapp/src/components/cardDetail/commentsList.tsx

@@ -24,7 +24,7 @@ type Props = {
     readonly: boolean
 }
 
-const CommentsList = React.memo((props: Props) => {
+const CommentsList = (props: Props) => {
     const [newComment, setNewComment] = useState('')
     const me = useAppSelector<IUser|null>(getMe)
 
@@ -97,6 +97,6 @@ const CommentsList = React.memo((props: Props) => {
             {!(comments.length === 0 && props.readonly) && <hr className='CommentsList__divider'/>}
         </div>
     )
-})
+}
 
-export default CommentsList
+export default React.memo(CommentsList)

webapp/src/components/content/checkboxElement.tsx

@@ -21,7 +21,7 @@ type Props = {
     onDeleteElement?: () => void
 }
 
-const CheckboxElement = React.memo((props: Props) => {
+const CheckboxElement = (props: Props) => {
     const {block, readonly} = props
     const intl = useIntl()
     const titleRef = useRef<Focusable>(null)
@@ -83,7 +83,7 @@ const CheckboxElement = React.memo((props: Props) => {
             />
         </div>
     )
-})
+}
 
 contentRegistry.registerContentType({
     type: 'checkbox',
@@ -104,4 +104,4 @@ contentRegistry.registerContentType({
     },
 })
 
-export default CheckboxElement
+export default React.memo(CheckboxElement)

webapp/src/components/content/dividerElement.tsx

@@ -8,7 +8,7 @@ import DividerIcon from '../../widgets/icons/divider'
 import {contentRegistry} from './contentRegistry'
 import './dividerElement.scss'
 
-const DividerElement = React.memo((): JSX.Element => <div className='DividerElement'/>)
+const DividerElement = (): JSX.Element => <div className='DividerElement'/>
 
 contentRegistry.registerContentType({
     type: 'divider',
@@ -20,4 +20,4 @@ contentRegistry.registerContentType({
     createComponent: () => <DividerElement/>,
 })
 
-export default DividerElement
+export default React.memo(DividerElement)

webapp/src/components/content/imageElement.tsx

@@ -14,7 +14,7 @@ type Props = {
     block: ContentBlock
 }
 
-const ImageElement = React.memo((props: Props): JSX.Element|null => {
+const ImageElement = (props: Props): JSX.Element|null => {
     const [imageDataUrl, setImageDataUrl] = useState<string|null>(null)
 
     const {block} = props
@@ -40,7 +40,7 @@ const ImageElement = React.memo((props: Props): JSX.Element|null => {
             alt={block.title}
         />
     )
-})
+}
 
 contentRegistry.registerContentType({
     type: 'image',
@@ -65,4 +65,4 @@ contentRegistry.registerContentType({
     createComponent: (block) => <ImageElement block={block}/>,
 })
 
-export default ImageElement
+export default React.memo(ImageElement)

webapp/src/components/content/textElement.tsx

@@ -16,7 +16,7 @@ type Props = {
     readonly: boolean
 }
 
-const TextElement = React.memo((props: Props): JSX.Element => {
+const TextElement = (props: Props): JSX.Element => {
     const {block, readonly} = props
     const intl = useIntl()
 
@@ -32,7 +32,7 @@ const TextElement = React.memo((props: Props): JSX.Element => {
             readonly={readonly}
         />
     )
-})
+}
 
 contentRegistry.registerContentType({
     type: 'text',
@@ -51,4 +51,4 @@ contentRegistry.registerContentType({
     },
 })
 
-export default TextElement
+export default React.memo(TextElement)

webapp/src/components/contentBlock.tsx

@@ -34,7 +34,7 @@ type Props = {
     cords: {x: number, y?: number, z?: number}
 }
 
-const ContentBlock = React.memo((props: Props): JSX.Element => {
+const ContentBlock = (props: Props): JSX.Element => {
     const {card, block, readonly, cords} = props
     const intl = useIntl()
     const [, , gripRef, itemRef] = useSortableWithGrip('content', {block, cords}, true, () => {})
@@ -158,6 +158,6 @@ const ContentBlock = React.memo((props: Props): JSX.Element => {
             />
         </div>
     )
-})
+}
 
-export default ContentBlock
+export default React.memo(ContentBlock)

webapp/src/components/dialog.tsx

@@ -20,7 +20,7 @@ type Props = {
     onClose: () => void,
 }
 
-const Dialog = React.memo((props: Props) => {
+const Dialog = (props: Props) => {
     const {toolsMenu} = props
     const {toolbar, title} = props
     const intl = useIntl()
@@ -73,6 +73,6 @@ const Dialog = React.memo((props: Props) => {
             </div>
         </div>
     )
-})
+}
 
-export default Dialog
+export default React.memo(Dialog)

webapp/src/components/gallery/galleryCard.tsx

@@ -42,7 +42,7 @@ type Props = {
     onDrop: (srcCard: Card, dstCard: Card) => void
 }
 
-const GalleryCard = React.memo((props: Props) => {
+const GalleryCard = (props: Props) => {
     const {card, board} = props
     const intl = useIntl()
     const [isDragging, isOver, cardRef] = useSortable('card', card, props.isManualSort && !props.readonly, props.onDrop)
@@ -185,6 +185,6 @@ const GalleryCard = React.memo((props: Props) => {
                 />}
         </div>
     )
-})
+}
 
-export default GalleryCard
+export default React.memo(GalleryCard)

webapp/src/components/globalHeader/globalHeaderSettingsMenu.tsx

@@ -17,7 +17,7 @@ import TelemetryClient, {TelemetryCategory, TelemetryActions} from '../../teleme
 
 import './globalHeaderSettingsMenu.scss'
 
-const GlobalHeaderSettingsMenu = React.memo(() => {
+const GlobalHeaderSettingsMenu = () => {
     const intl = useIntl()
     const dispatch = useAppDispatch()
 
@@ -96,6 +96,6 @@ const GlobalHeaderSettingsMenu = React.memo(() => {
             </MenuWrapper>
         </div>
     )
-})
+}
 
-export default GlobalHeaderSettingsMenu
+export default React.memo(GlobalHeaderSettingsMenu)

webapp/src/components/kanban/kanbanCard.tsx

@@ -40,7 +40,7 @@ type Props = {
     isManualSort: boolean
 }
 
-const KanbanCard = React.memo((props: Props) => {
+const KanbanCard = (props: Props) => {
     const {card, board} = props
     const intl = useIntl()
     const [isDragging, isOver, cardRef] = useSortable('card', card, !props.readonly, props.onDrop)
@@ -174,6 +174,6 @@ const KanbanCard = React.memo((props: Props) => {
 
         </>
     )
-})
+}
 
-export default KanbanCard
+export default React.memo(KanbanCard)

webapp/src/components/kanban/kanbanColumn.tsx

@@ -11,7 +11,7 @@ type Props = {
     children: React.ReactNode
 }
 
-const KanbanColumn = React.memo((props: Props) => {
+const KanbanColumn = (props: Props) => {
     const [{isOver}, drop] = useDrop(() => ({
         accept: 'card',
         collect: (monitor) => ({
@@ -36,6 +36,6 @@ const KanbanColumn = React.memo((props: Props) => {
             {props.children}
         </div>
     )
-})
+}
 
-export default KanbanColumn
+export default React.memo(KanbanColumn)

webapp/src/components/modal.tsx

@@ -12,7 +12,7 @@ type Props = {
     children: React.ReactNode
 }
 
-const Modal = React.memo((props: Props): JSX.Element => {
+const Modal = (props: Props): JSX.Element => {
     const node = useRef<HTMLDivElement>(null)
 
     const {position, onClose, children} = props
@@ -47,6 +47,6 @@ const Modal = React.memo((props: Props): JSX.Element => {
             {children}
         </div>
     )
-})
+}
 
-export default Modal
+export default React.memo(Modal)

webapp/src/components/modalWrapper.tsx

@@ -7,12 +7,12 @@ type Props = {
     children: React.ReactNode
 }
 
-const ModalWrapper = React.memo((props: Props) => {
+const ModalWrapper = (props: Props) => {
     return (
         <div className='ModalWrapper'>
             {props.children}
         </div>
     )
-})
+}
 
-export default ModalWrapper
+export default React.memo(ModalWrapper)

webapp/src/components/properties/select/select.tsx

@@ -20,7 +20,7 @@ type Props = {
     isEditable: boolean
 }
 
-const SelectProperty = React.memo((props: Props) => {
+const SelectProperty = (props: Props) => {
     const {emptyValue, propertyValue, propertyTemplate, isEditable} = props
     const [open, setOpen] = useState(false)
 
@@ -56,6 +56,6 @@ const SelectProperty = React.memo((props: Props) => {
             onBlur={() => setOpen(false)}
         />
     )
-})
+}
 
-export default SelectProperty
+export default React.memo(SelectProperty)

webapp/src/components/rootPortal.tsx

@@ -8,7 +8,7 @@ type Props = {
     children: React.ReactNode
 }
 
-const RootPortal = React.memo((props: Props): JSX.Element => {
+const RootPortal = (props: Props): JSX.Element => {
     const [el] = useState(document.createElement('div'))
     const rootPortal = document.getElementById('focalboard-root-portal')
 
@@ -24,6 +24,6 @@ const RootPortal = React.memo((props: Props): JSX.Element => {
     }, [])
 
     return ReactDOM.createPortal(props.children, el)  // eslint-disable-line
-})
+}
 
-export default RootPortal
+export default React.memo(RootPortal)

webapp/src/components/shareBoard/shareBoardButton.tsx

@@ -16,7 +16,7 @@ import ShareBoardDialog from './shareBoard'
 type Props = {
     boardId: string
 }
-const ShareBoardButton = React.memo((props: Props) => {
+const ShareBoardButton = (props: Props) => {
     const [showShareDialog, setShowShareDialog] = useState(false)
 
     return (
@@ -47,6 +47,6 @@ const ShareBoardButton = React.memo((props: Props) => {
             }
         </div>
     )
-})
+}
 
-export default ShareBoardButton
+export default React.memo(ShareBoardButton)

webapp/src/components/sidebar/registrationLink.tsx

@@ -19,7 +19,7 @@ type Props = {
     onClose: () => void
 }
 
-const RegistrationLink = React.memo((props: Props) => {
+const RegistrationLink = (props: Props) => {
     const {onClose} = props
     const intl = useIntl()
     const workspace = useAppSelector<IWorkspace|null>(getCurrentWorkspace)
@@ -89,6 +89,6 @@ const RegistrationLink = React.memo((props: Props) => {
             </div>
         </Modal>
     )
-})
+}
 
-export default RegistrationLink
+export default React.memo(RegistrationLink)

webapp/src/components/sidebar/sidebar.tsx

@@ -39,7 +39,7 @@ function getWindowDimensions() {
     }
 }
 
-const Sidebar = React.memo((props: Props) => {
+const Sidebar = (props: Props) => {
     const [isHidden, setHidden] = useState(false)
     const [userHidden, setUserHidden] = useState(false)
     const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions())
@@ -209,6 +209,6 @@ const Sidebar = React.memo((props: Props) => {
                 <SidebarSettingsMenu activeTheme={getActiveThemeName()}/>}
         </div>
     )
-})
+}
 
-export default Sidebar
+export default React.memo(Sidebar)

webapp/src/components/sidebar/sidebarBoardItem.tsx

@@ -33,7 +33,7 @@ type Props = {
     hideSidebar: () => void
 }
 
-const SidebarBoardItem = React.memo((props: Props) => {
+const SidebarBoardItem = (props: Props) => {
     const [collapsed, setCollapsed] = useState(false)
     const intl = useIntl()
     const history = useHistory()
@@ -207,6 +207,6 @@ const SidebarBoardItem = React.memo((props: Props) => {
             />}
         </div>
     )
-})
+}
 
-export default SidebarBoardItem
+export default React.memo(SidebarBoardItem)

webapp/src/components/sidebar/sidebarSettingsMenu.tsx

@@ -30,7 +30,7 @@ type Props = {
     activeTheme: string
 }
 
-const SidebarSettingsMenu = React.memo((props: Props) => {
+const SidebarSettingsMenu = (props: Props) => {
     const intl = useIntl()
     const dispatch = useAppDispatch()
 
@@ -164,6 +164,6 @@ const SidebarSettingsMenu = React.memo((props: Props) => {
             </MenuWrapper>
         </div>
     )
-})
+}
 
-export default SidebarSettingsMenu
+export default React.memo(SidebarSettingsMenu)

webapp/src/components/sidebar/sidebarUserMenu.tsx

@@ -25,7 +25,7 @@ import './sidebarUserMenu.scss'
 
 declare let window: IAppWindow
 
-const SidebarUserMenu = React.memo(() => {
+const SidebarUserMenu = () => {
     const history = useHistory()
     const [showRegistrationLinkDialog, setShowRegistrationLinkDialog] = useState(false)
     const user = useAppSelector<IUser|null>(getMe)
@@ -106,6 +106,6 @@ const SidebarUserMenu = React.memo(() => {
             </ModalWrapper>
         </div>
     )
-})
+}
 
-export default SidebarUserMenu
+export default React.memo(SidebarUserMenu)

webapp/src/components/table/horizontalGrip.tsx

@@ -10,7 +10,7 @@ type Props = {
     onAutoSizeColumn: (columnID: string) => void;
 }
 
-const HorizontalGrip = React.memo((props: Props): JSX.Element => {
+const HorizontalGrip = (props: Props): JSX.Element => {
     const [, drag] = useDrag(() => ({
         type: 'horizontalGrip',
         item: {id: props.templateId},
@@ -23,6 +23,6 @@ const HorizontalGrip = React.memo((props: Props): JSX.Element => {
             onDoubleClick={() => props.onAutoSizeColumn(props.templateId)}
         />
     )
-})
+}
 
-export default HorizontalGrip
+export default React.memo(HorizontalGrip)

webapp/src/components/table/tableGroup.tsx

@@ -31,7 +31,7 @@ type Props = {
     onDropToGroup: (srcCard: Card, groupID: string, dstCardID: string) => void
 }
 
-const TableGroup = React.memo((props: Props): JSX.Element => {
+const TableGroup = (props: Props): JSX.Element => {
     const {board, activeView, group, onDropToGroup, groupByProperty} = props
     const groupId = group.option.id
 
@@ -86,6 +86,6 @@ const TableGroup = React.memo((props: Props): JSX.Element => {
             />}
         </div>
     )
-})
+}
 
-export default TableGroup
+export default React.memo(TableGroup)

webapp/src/components/table/tableGroupHeaderRow.tsx

@@ -33,7 +33,7 @@ type Props = {
     onDrop: (srcOption: IPropertyOption, dstOption?: IPropertyOption) => void
 }
 
-const TableGroupHeaderRow = React.memo((props: Props): JSX.Element => {
+const TableGroupHeaderRow = (props: Props): JSX.Element => {
     const {board, activeView, group, groupByProperty} = props
     const [groupTitle, setGroupTitle] = useState(group.option.value)
 
@@ -147,6 +147,6 @@ const TableGroupHeaderRow = React.memo((props: Props): JSX.Element => {
             }
         </div>
     )
-})
+}
 
-export default TableGroupHeaderRow
+export default React.memo(TableGroupHeaderRow)

webapp/src/components/table/tableHeader.tsx

@@ -32,7 +32,7 @@ type Props = {
     onAutoSizeColumn: (columnID: string, headerWidth: number) => void
 }
 
-const TableHeader = React.memo((props: Props): JSX.Element => {
+const TableHeader = (props: Props): JSX.Element => {
     const [isDragging, isOver, columnRef] = useSortable('column', props.template, !props.readonly, props.onDrop)
 
     const columnWidth = (templateId: string): number => {
@@ -85,6 +85,6 @@ const TableHeader = React.memo((props: Props): JSX.Element => {
             }
         </div>
     )
-})
+}
 
-export default TableHeader
+export default React.memo(TableHeader)

webapp/src/components/table/tableRow.tsx

@@ -43,7 +43,7 @@ export const columnWidth = (resizingColumn: string, columnWidths: Record<string,
     return Math.max(Constants.minColumnWidth, columnWidths[templateId] || 0)
 }
 
-const TableRow = React.memo((props: Props) => {
+const TableRow = (props: Props) => {
     const {board, activeView, onSaveWithEnter, columnRefs, card} = props
     const contents = useAppSelector(getCardContents(card.id || ''))
     const comments = useAppSelector(getCardComments(card.id))
@@ -150,6 +150,6 @@ const TableRow = React.memo((props: Props) => {
             })}
         </div>
     )
-})
+}
 
-export default TableRow
+export default React.memo(TableRow)

webapp/src/components/topBar.tsx

@@ -10,7 +10,7 @@ import HelpIcon from '../widgets/icons/help'
 import {Utils} from '../utils'
 import {Constants} from '../constants'
 
-const TopBar = React.memo((): JSX.Element => {
+const TopBar = (): JSX.Element => {
     if (Utils.isFocalboardPlugin()) {
         const feedbackUrl = 'https://www.focalboard.com/fwlink/feedback-boards.html?v=' + Constants.versionString
         return (
@@ -65,6 +65,6 @@ const TopBar = React.memo((): JSX.Element => {
             </a>
         </div>
     )
-})
+}
 
-export default TopBar
+export default React.memo(TopBar)

webapp/src/components/viewHeader/emptyCardButton.tsx

@@ -20,7 +20,7 @@ type Props = {
     addCard: () => void
 }
 
-const EmptyCardButton = React.memo((props: Props) => {
+const EmptyCardButton = (props: Props) => {
     const currentView = useAppSelector(getCurrentView)
     const intl = useIntl()
 
@@ -52,6 +52,6 @@ const EmptyCardButton = React.memo((props: Props) => {
                 </MenuWrapper>
             }
         />)
-})
+}
 
-export default EmptyCardButton
+export default React.memo(EmptyCardButton)

webapp/src/components/viewHeader/filterComponent.tsx

@@ -23,7 +23,7 @@ type Props = {
     onClose: () => void
 }
 
-const FilterComponent = React.memo((props: Props): JSX.Element => {
+const FilterComponent = (props: Props): JSX.Element => {
     const conditionClicked = (optionId: string, filter: FilterClause): void => {
         const {activeView} = props
 
@@ -91,6 +91,6 @@ const FilterComponent = React.memo((props: Props): JSX.Element => {
             </div>
         </Modal>
     )
-})
+}
 
-export default FilterComponent
+export default React.memo(FilterComponent)

webapp/src/components/viewHeader/filterEntry.tsx

@@ -25,7 +25,7 @@ type Props = {
     filter: FilterClause
 }
 
-const FilterEntry = React.memo((props: Props): JSX.Element => {
+const FilterEntry = (props: Props): JSX.Element => {
     const {board, view, filter} = props
     const intl = useIntl()
 
@@ -106,6 +106,6 @@ const FilterEntry = React.memo((props: Props): JSX.Element => {
             </Button>
         </div>
     )
-})
+}
 
-export default FilterEntry
+export default React.memo(FilterEntry)

webapp/src/components/viewHeader/newCardButton.tsx

@@ -22,7 +22,7 @@ type Props = {
     editCardTemplate: (cardTemplateId: string) => void
 }
 
-const NewCardButton = React.memo((props: Props): JSX.Element => {
+const NewCardButton = (props: Props): JSX.Element => {
     const cardTemplates: Card[] = useAppSelector(getCurrentBoardTemplates)
     const currentView = useAppSelector(getCurrentView)
     const intl = useIntl()
@@ -79,6 +79,6 @@ const NewCardButton = React.memo((props: Props): JSX.Element => {
             </Menu>
         </ButtonWithMenu>
     )
-})
+}
 
-export default NewCardButton
+export default React.memo(NewCardButton)

webapp/src/components/viewHeader/newCardButtonTemplateItem.tsx

@@ -22,7 +22,7 @@ type Props = {
     editCardTemplate: (cardTemplateId: string) => void
 }
 
-const NewCardButtonTemplateItem = React.memo((props: Props) => {
+const NewCardButtonTemplateItem = (props: Props) => {
     const currentView = useAppSelector(getCurrentView)
     const {cardTemplate} = props
     const intl = useIntl()
@@ -77,6 +77,6 @@ const NewCardButtonTemplateItem = React.memo((props: Props) => {
             }
         />
     )
-})
+}
 
-export default NewCardButtonTemplateItem
+export default React.memo(NewCardButtonTemplateItem)

webapp/src/components/viewHeader/viewHeader.tsx

@@ -41,7 +41,7 @@ type Props = {
     dateDisplayProperty?: IPropertyTemplate
 }
 
-const ViewHeader = React.memo((props: Props) => {
+const ViewHeader = (props: Props) => {
     const [showFilter, setShowFilter] = useState(false)
     const intl = useIntl()
 
@@ -173,6 +173,6 @@ const ViewHeader = React.memo((props: Props) => {
             }
         </div>
     )
-})
+}
 
-export default ViewHeader
+export default React.memo(ViewHeader)

webapp/src/components/viewHeader/viewHeaderActionsMenu.tsx

@@ -92,7 +92,7 @@ function onExportCsvTrigger(board: Board, activeView: BoardView, cards: Card[],
     }
 }
 
-const ViewHeaderActionsMenu = React.memo((props: Props) => {
+const ViewHeaderActionsMenu = (props: Props) => {
     const {board, activeView, cards} = props
     const intl = useIntl()
 
@@ -139,6 +139,6 @@ const ViewHeaderActionsMenu = React.memo((props: Props) => {
             </MenuWrapper>
         </ModalWrapper>
     )
-})
+}
 
-export default ViewHeaderActionsMenu
+export default React.memo(ViewHeaderActionsMenu)

webapp/src/components/viewHeader/viewHeaderDisplayByMenu.tsx

@@ -19,7 +19,7 @@ type Props = {
     dateDisplayPropertyName?: string
 }
 
-const ViewHeaderDisplayByMenu = React.memo((props: Props) => {
+const ViewHeaderDisplayByMenu = (props: Props) => {
     const {properties, activeView, dateDisplayPropertyName} = props
     const intl = useIntl()
 
@@ -74,6 +74,6 @@ const ViewHeaderDisplayByMenu = React.memo((props: Props) => {
             </Menu>
         </MenuWrapper>
     )
-})
+}
 
-export default ViewHeaderDisplayByMenu
+export default React.memo(ViewHeaderDisplayByMenu)

webapp/src/components/viewHeader/viewHeaderGroupByMenu.tsx

@@ -18,7 +18,7 @@ type Props = {
     groupByProperty?: IPropertyTemplate
 }
 
-const ViewHeaderGroupByMenu = React.memo((props: Props) => {
+const ViewHeaderGroupByMenu = (props: Props) => {
     const {properties, activeView, groupByProperty} = props
     const intl = useIntl()
     return (
@@ -74,6 +74,6 @@ const ViewHeaderGroupByMenu = React.memo((props: Props) => {
             </Menu>
         </MenuWrapper>
     )
-})
+}
 
-export default ViewHeaderGroupByMenu
+export default React.memo(ViewHeaderGroupByMenu)

webapp/src/components/viewHeader/viewHeaderPropertiesMenu.tsx

@@ -15,7 +15,7 @@ type Props = {
     properties: readonly IPropertyTemplate[]
     activeView: BoardView
 }
-const ViewHeaderPropertiesMenu = React.memo((props: Props) => {
+const ViewHeaderPropertiesMenu = (props: Props) => {
     const {properties, activeView} = props
     const intl = useIntl()
     const {viewType, visiblePropertyIds} = activeView.fields
@@ -68,6 +68,6 @@ const ViewHeaderPropertiesMenu = React.memo((props: Props) => {
             </Menu>
         </MenuWrapper>
     )
-})
+}
 
-export default ViewHeaderPropertiesMenu
+export default React.memo(ViewHeaderPropertiesMenu)

webapp/src/components/viewHeader/viewHeaderSortMenu.tsx

@@ -19,7 +19,7 @@ type Props = {
     activeView: BoardView
     orderedCards: Card[]
 }
-const ViewHeaderSortMenu = React.memo((props: Props) => {
+const ViewHeaderSortMenu = (props: Props) => {
     const {properties, activeView, orderedCards} = props
     const hasSort = activeView.fields.sortOptions?.length > 0
     const sortDisplayOptions = properties?.map((o) => ({id: o.id, name: o.name}))
@@ -101,6 +101,6 @@ const ViewHeaderSortMenu = React.memo((props: Props) => {
             </Menu>
         </MenuWrapper>
     )
-})
+}
 
-export default ViewHeaderSortMenu
+export default React.memo(ViewHeaderSortMenu)

webapp/src/components/viewMenu.tsx

@@ -28,7 +28,7 @@ type Props = {
     readonly: boolean
 }
 
-const ViewMenu = React.memo((props: Props) => {
+const ViewMenu = (props: Props) => {
     const history = useHistory()
     const match = useRouteMatch()
 
@@ -298,6 +298,6 @@ const ViewMenu = React.memo((props: Props) => {
             }
         </Menu>
     )
-})
+}
 
-export default injectIntl(ViewMenu)
+export default injectIntl(React.memo(ViewMenu))

webapp/src/components/viewTitle.tsx

@@ -21,7 +21,7 @@ type Props = {
     readonly: boolean
 }
 
-const ViewTitle = React.memo((props: Props) => {
+const ViewTitle = (props: Props) => {
     const {board} = props
 
     const [title, setTitle] = useState(board.title)
@@ -102,6 +102,6 @@ const ViewTitle = React.memo((props: Props) => {
             }
         </div>
     )
-})
+}
 
-export default ViewTitle
+export default React.memo(ViewTitle)

webapp/src/components/workspace.tsx

@@ -109,7 +109,7 @@ function CenterContent(props: Props) {
     )
 }
 
-const Workspace = React.memo((props: Props) => {
+const Workspace = (props: Props) => {
     const board = useAppSelector(getCurrentBoard)
     const view = useAppSelector(getCurrentView)
     const [boardTemplateSelectorOpen, setBoardTemplateSelectorOpen] = useState(false)
@@ -149,6 +149,6 @@ const Workspace = React.memo((props: Props) => {
             </div>
         </div>
     )
-})
+}
 
-export default Workspace
+export default React.memo(Workspace)

webapp/src/pages/changePasswordPage.tsx

@@ -10,7 +10,7 @@ import {IUser} from '../user'
 import {useAppSelector} from '../store/hooks'
 import {getMe} from '../store/users'
 
-const ChangePasswordPage = React.memo(() => {
+const ChangePasswordPage = () => {
     const [oldPassword, setOldPassword] = useState('')
     const [newPassword, setNewPassword] = useState('')
     const [errorMessage, setErrorMessage] = useState('')
@@ -94,6 +94,6 @@ const ChangePasswordPage = React.memo(() => {
             }
         </div>
     )
-})
+}
 
-export default ChangePasswordPage
+export default React.memo(ChangePasswordPage)

webapp/src/pages/dashboard/dashboardPage.tsx

@@ -7,13 +7,13 @@ import Sidebar from '../../components/sidebar/sidebar'
 
 import DashboardCenterContent from './centerContent'
 
-const DashboardPage = React.memo(() => (
+const DashboardPage = () => (
     <div className='DashboardPage'>
         <Sidebar
             isDashboard={true}
         />
         <DashboardCenterContent/>
     </div>
-))
+)
 
-export default DashboardPage
+export default React.memo(DashboardPage)

webapp/src/pages/errorPage.tsx

@@ -8,7 +8,7 @@ import octoClient from '../octoClient'
 import Button from '../widgets/buttons/button'
 import './errorPage.scss'
 
-const ErrorPage = React.memo(() => {
+const ErrorPage = () => {
     const history = useHistory()
 
     return (
@@ -35,6 +35,6 @@ const ErrorPage = React.memo(() => {
             </Button>
         </div>
     )
-})
+}
 
-export default ErrorPage
+export default React.memo(ErrorPage)

webapp/src/pages/loginPage.tsx

@@ -11,7 +11,7 @@ import Button from '../widgets/buttons/button'
 import client from '../octoClient'
 import './loginPage.scss'
 
-const LoginPage = React.memo(() => {
+const LoginPage = () => {
     const [username, setUsername] = useState('')
     const [password, setPassword] = useState('')
     const [errorMessage, setErrorMessage] = useState('')
@@ -88,6 +88,6 @@ const LoginPage = React.memo(() => {
             }
         </div>
     )
-})
+}
 
-export default LoginPage
+export default React.memo(LoginPage)

webapp/src/pages/registerPage.tsx

@@ -11,7 +11,7 @@ import Button from '../widgets/buttons/button'
 import client from '../octoClient'
 import './registerPage.scss'
 
-const RegisterPage = React.memo(() => {
+const RegisterPage = () => {
     const [username, setUsername] = useState('')
     const [password, setPassword] = useState('')
     const [email, setEmail] = useState('')
@@ -96,6 +96,6 @@ const RegisterPage = React.memo(() => {
             }
         </div>
     )
-})
+}
 
-export default RegisterPage
+export default React.memo(RegisterPage)

webapp/src/pages/welcome/welcomePage.tsx

@@ -15,7 +15,7 @@ import {Utils} from '../../utils'
 
 import './welcomePage.scss'
 
-const WelcomePage = React.memo(() => {
+const WelcomePage = () => {
     const history = useHistory()
     const queryString = new URLSearchParams(useLocation().search)
 
@@ -84,6 +84,6 @@ const WelcomePage = React.memo(() => {
             </div>
         </div>
     )
-})
+}
 
-export default WelcomePage
+export default React.memo(WelcomePage)

webapp/src/widgets/menuWrapper.tsx

@@ -14,7 +14,7 @@ type Props = {
     label?: string
 }
 
-const MenuWrapper = React.memo((props: Props) => {
+const MenuWrapper = (props: Props) => {
     const node = useRef<HTMLDivElement>(null)
     const [open, setOpen] = useState(Boolean(props.isOpen))
 
@@ -94,6 +94,6 @@ const MenuWrapper = React.memo((props: Props) => {
             {children && !props.disabled && open ? Object.values(children)[1] : null}
         </div>
     )
-})
+}
 
-export default MenuWrapper
+export default React.memo(MenuWrapper)

webapp/src/widgets/propertyMenu.tsx

@@ -89,7 +89,7 @@ export const PropertyTypes = (props: TypesProps): JSX.Element => {
     )
 }
 
-const PropertyMenu = React.memo((props: Props) => {
+const PropertyMenu = (props: Props) => {
     const intl = useIntl()
     const nameTextbox = useRef<HTMLInputElement>(null)
     const [name, setName] = useState(props.propertyName)
@@ -144,6 +144,6 @@ const PropertyMenu = React.memo((props: Props) => {
             />
         </Menu>
     )
-})
+}
 
-export default PropertyMenu
+export default React.memo(PropertyMenu)

webapp/src/widgets/valueSelector.tsx

@@ -44,7 +44,7 @@ type LabelProps = {
     isMulti?: boolean
 }
 
-const ValueSelectorLabel = React.memo((props: LabelProps): JSX.Element => {
+const ValueSelectorLabel = (props: LabelProps): JSX.Element => {
     const {option, onDeleteValue, meta, isMulti} = props
     const intl = useIntl()
     if (meta.context === 'value') {
@@ -99,7 +99,7 @@ const ValueSelectorLabel = React.memo((props: LabelProps): JSX.Element => {
             </MenuWrapper>
         </div>
     )
-})
+}
 
 const valueSelectorStyle = {
     ...getSelectBaseStyle(),
@@ -200,4 +200,4 @@ function ValueSelector(props: Props): JSX.Element {
     )
 }
 
-export default ValueSelector
+export default React.memo(ValueSelector)