Improved code styling

client/src/Project/Board/Filters/Styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
-import { InputDebounced, Avatar, Button } from 'shared/components';
 import { color, font, mixin } from 'shared/utils/styles';
+import { InputDebounced, Avatar, Button } from 'shared/components';
 
 export const Filters = styled.div`
   display: flex;

client/src/Project/Board/Filters/index.jsx

@@ -16,14 +16,12 @@ const propTypes = {
   projectUsers: PropTypes.array.isRequired,
   defaultFilters: PropTypes.object.isRequired,
   filters: PropTypes.object.isRequired,
-  setFilters: PropTypes.func.isRequired,
+  mergeFilters: PropTypes.func.isRequired,
 };
 
-const ProjectBoardFilters = ({ projectUsers, defaultFilters, filters, setFilters }) => {
+const ProjectBoardFilters = ({ projectUsers, defaultFilters, filters, mergeFilters }) => {
   const { searchQuery, userIds, myOnly, recent } = filters;
 
-  const setFiltersMerge = newFilters => setFilters({ ...filters, ...newFilters });
-
   const areFiltersCleared = !searchQuery && userIds.length === 0 && !myOnly && !recent;
 
   return (
@@ -31,7 +29,7 @@ const ProjectBoardFilters = ({ projectUsers, defaultFilters, filters, setFilters
       <SearchInput
         icon="search"
         value={searchQuery}
-        onChange={value => setFiltersMerge({ searchQuery: value })}
+        onChange={value => mergeFilters({ searchQuery: value })}
       />
       <Avatars>
         {projectUsers.map(user => (
@@ -39,27 +37,27 @@ const ProjectBoardFilters = ({ projectUsers, defaultFilters, filters, setFilters
             <StyledAvatar
               avatarUrl={user.avatarUrl}
               name={user.name}
-              onClick={() => setFiltersMerge({ userIds: xor(userIds, [user.id]) })}
+              onClick={() => mergeFilters({ userIds: xor(userIds, [user.id]) })}
             />
           </AvatarIsActiveBorder>
         ))}
       </Avatars>
       <StyledButton
-        color="empty"
+        variant="empty"
         isActive={myOnly}
-        onClick={() => setFiltersMerge({ myOnly: !myOnly })}
+        onClick={() => mergeFilters({ myOnly: !myOnly })}
       >
         Only My Issues
       </StyledButton>
       <StyledButton
-        color="empty"
+        variant="empty"
         isActive={recent}
-        onClick={() => setFiltersMerge({ recent: !recent })}
+        onClick={() => mergeFilters({ recent: !recent })}
       >
         Recently Updated
       </StyledButton>
       {!areFiltersCleared && (
-        <ClearAll onClick={() => setFilters(defaultFilters)}>Clear all</ClearAll>
+        <ClearAll onClick={() => mergeFilters(defaultFilters)}>Clear all</ClearAll>
       )}
     </Filters>
   );

client/src/Project/Board/Header/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { CopyLinkButton } from 'shared/components';
+
 import { Breadcrumbs, Divider, Header, BoardName } from './Styles';
 
 const propTypes = {
@@ -17,6 +18,7 @@ const ProjectBoardHeader = ({ projectName }) => (
       <Divider>/</Divider>
       Kanban Board
     </Breadcrumbs>
+
     <Header>
       <BoardName>Kanban board</BoardName>
       <CopyLinkButton />

client/src/Project/Board/Lists/Issue/Styles.js

@@ -1,8 +1,8 @@
 import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
 
-import { Avatar } from 'shared/components';
 import { color, font, mixin } from 'shared/utils/styles';
+import { Avatar } from 'shared/components';
 
 export const IssueLink = styled(Link)`
   display: block;

client/src/Project/Board/Lists/Issue/index.jsx

@@ -4,6 +4,7 @@ import { useRouteMatch } from 'react-router-dom';
 import { Draggable } from 'react-beautiful-dnd';
 
 import { IssueTypeIcon, IssuePriorityIcon } from 'shared/components';
+
 import { IssueLink, Issue, Title, Bottom, Assignees, AssigneeAvatar } from './Styles';
 
 const propTypes = {

client/src/Project/Board/Lists/index.jsx

@@ -8,6 +8,7 @@ import api from 'shared/utils/api';
 import useApi from 'shared/hooks/api';
 import { moveItemWithinArray, insertItemIntoArray } from 'shared/utils/javascript';
 import { IssueStatus, IssueStatusCopy } from 'shared/constants/issues';
+
 import Issue from './Issue';
 import { Lists, List, Title, IssuesCount, Issues } from './Styles';
 
@@ -21,13 +22,8 @@ const ProjectBoardLists = ({ project, filters, updateLocalIssuesArray }) => {
   const [{ data: currentUserData }] = useApi.get('/currentUser');
   const currentUserId = get(currentUserData, 'currentUser.id');
 
-  const filteredIssues = filterIssues(project.issues, filters, currentUserId);
-
   const handleIssueDrop = async ({ draggableId, destination, source }) => {
-    if (!destination) return;
-    const isSameList = destination.droppableId === source.droppableId;
-    const isSamePosition = destination.index === source.index;
-    if (isSameList && isSamePosition) return;
+    if (!isPositionChanged(source, destination)) return;
 
     const issueId = Number(draggableId);
 
@@ -35,7 +31,7 @@ const ProjectBoardLists = ({ project, filters, updateLocalIssuesArray }) => {
       url: `/issues/${issueId}`,
       updatedFields: {
         status: destination.droppableId,
-        listPosition: calculateListPosition(project.issues, destination, isSameList, issueId),
+        listPosition: calculateListPosition(project.issues, destination, source, issueId),
       },
       currentFields: project.issues.find(({ id }) => id === issueId),
       setLocalData: fields => updateLocalIssuesArray(issueId, fields),
@@ -43,21 +39,17 @@ const ProjectBoardLists = ({ project, filters, updateLocalIssuesArray }) => {
   };
 
   const renderList = status => {
+    const filteredIssues = filterIssues(project.issues, filters, currentUserId);
     const filteredListIssues = getSortedListIssues(filteredIssues, status);
     const allListIssues = getSortedListIssues(project.issues, status);
 
-    const issuesCount =
-      allListIssues.length !== filteredListIssues.length
-        ? `${filteredListIssues.length} of ${allListIssues.length}`
-        : allListIssues.length;
-
     return (
       <Droppable key={status} droppableId={status}>
         {provided => (
           <List>
             <Title>
               {`${IssueStatusCopy[status]} `}
-              <IssuesCount>{issuesCount}</IssuesCount>
+              <IssuesCount>{formatIssuesCount(allListIssues, filteredListIssues)}</IssuesCount>
             </Title>
             <Issues {...provided.droppableProps} ref={provided.innerRef}>
               {filteredListIssues.map((issue, index) => (
@@ -102,6 +94,20 @@ const filterIssues = (projectIssues, filters, currentUserId) => {
 const getSortedListIssues = (issues, status) =>
   issues.filter(issue => issue.status === status).sort((a, b) => a.listPosition - b.listPosition);
 
+const formatIssuesCount = (allListIssues, filteredListIssues) => {
+  if (allListIssues.length !== filteredListIssues.length) {
+    return `${filteredListIssues.length} of ${allListIssues.length}`;
+  }
+  return allListIssues.length;
+};
+
+const isPositionChanged = (destination, source) => {
+  if (!destination) return false;
+  const isSameList = destination.droppableId === source.droppableId;
+  const isSamePosition = destination.index === source.index;
+  return !isSameList || !isSamePosition;
+};
+
 const calculateListPosition = (...args) => {
   const { prevIssue, nextIssue } = getAfterDropPrevNextIssue(...args);
   let position;
@@ -118,9 +124,10 @@ const calculateListPosition = (...args) => {
   return position;
 };
 
-const getAfterDropPrevNextIssue = (allIssues, destination, isSameList, droppedIssueId) => {
+const getAfterDropPrevNextIssue = (allIssues, destination, source, droppedIssueId) => {
   const destinationIssues = getSortedListIssues(allIssues, destination.droppableId);
   const droppedIssue = allIssues.find(issue => issue.id === droppedIssueId);
+  const isSameList = destination.droppableId === source.droppableId;
 
   const afterDropDestinationIssues = isSameList
     ? moveItemWithinArray(destinationIssues, droppedIssue, destination.index)

client/src/Project/Board/index.jsx

@@ -1,6 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
+import useMergeState from 'shared/hooks/mergeState';
+
 import Header from './Header';
 import Filters from './Filters';
 import Lists from './Lists';
@@ -18,7 +20,7 @@ const defaultFilters = {
 };
 
 const ProjectBoard = ({ project, updateLocalIssuesArray }) => {
-  const [filters, setFilters] = useState(defaultFilters);
+  const [filters, mergeFilters] = useMergeState(defaultFilters);
   return (
     <>
       <Header projectName={project.name} />
@@ -26,7 +28,7 @@ const ProjectBoard = ({ project, updateLocalIssuesArray }) => {
         projectUsers={project.users}
         defaultFilters={defaultFilters}
         filters={filters}
-        setFilters={setFilters}
+        mergeFilters={mergeFilters}
       />
       <Lists project={project} filters={filters} updateLocalIssuesArray={updateLocalIssuesArray} />
     </>