Refactored code structure

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

@@ -1,16 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-import { intersection } from 'lodash';
+import { DragDropContext } from 'react-beautiful-dnd';
 
 import api from 'shared/utils/api';
-import useCurrentUser from 'shared/hooks/currentUser';
 import { moveItemWithinArray, insertItemIntoArray } from 'shared/utils/javascript';
-import { IssueStatus, IssueStatusCopy } from 'shared/constants/issues';
+import { IssueStatus } from 'shared/constants/issues';
 
-import Issue from './Issue';
-import { Lists, List, Title, IssuesCount, Issues } from './Styles';
+import List from './List';
+import { Lists } from './Styles';
 
 const propTypes = {
   project: PropTypes.object.isRequired,
@@ -19,9 +16,7 @@ const propTypes = {
 };
 
 const ProjectBoardLists = ({ project, filters, updateLocalProjectIssues }) => {
-  const { currentUserId } = useCurrentUser();
-
-  const handleIssueDrop = async ({ draggableId, destination, source }) => {
+  const handleIssueDrop = ({ draggableId, destination, source }) => {
     if (!isPositionChanged(source, destination)) return;
 
     const issueId = Number(draggableId);
@@ -29,76 +24,24 @@ const ProjectBoardLists = ({ project, filters, updateLocalProjectIssues }) => {
     api.optimisticUpdate(`/issues/${issueId}`, {
       updatedFields: {
         status: destination.droppableId,
-        listPosition: calculateListPosition(project.issues, destination, source, issueId),
+        listPosition: calculateIssueListPosition(project.issues, destination, source, issueId),
       },
       currentFields: project.issues.find(({ id }) => id === issueId),
       setLocalData: fields => updateLocalProjectIssues(issueId, fields),
     });
   };
 
-  const renderList = status => {
-    const filteredIssues = filterIssues(project.issues, filters, currentUserId);
-    const filteredListIssues = getSortedListIssues(filteredIssues, status);
-    const allListIssues = getSortedListIssues(project.issues, status);
-
-    return (
-      <Droppable key={status} droppableId={status}>
-        {provided => (
-          <List>
-            <Title>
-              {`${IssueStatusCopy[status]} `}
-              <IssuesCount>{formatIssuesCount(allListIssues, filteredListIssues)}</IssuesCount>
-            </Title>
-            <Issues {...provided.droppableProps} ref={provided.innerRef}>
-              {filteredListIssues.map((issue, index) => (
-                <Issue key={issue.id} projectUsers={project.users} issue={issue} index={index} />
-              ))}
-              {provided.placeholder}
-            </Issues>
-          </List>
-        )}
-      </Droppable>
-    );
-  };
-
   return (
-    <>
-      <DragDropContext onDragEnd={handleIssueDrop}>
-        <Lists>{Object.values(IssueStatus).map(renderList)}</Lists>
-      </DragDropContext>
-    </>
+    <DragDropContext onDragEnd={handleIssueDrop}>
+      <Lists>
+        {Object.values(IssueStatus).map(status => (
+          <List key={status} status={status} project={project} filters={filters} />
+        ))}
+      </Lists>
+    </DragDropContext>
   );
 };
 
-const filterIssues = (projectIssues, filters, currentUserId) => {
-  const { searchTerm, userIds, myOnly, recent } = filters;
-  let issues = projectIssues;
-
-  if (searchTerm) {
-    issues = issues.filter(issue => issue.title.toLowerCase().includes(searchTerm.toLowerCase()));
-  }
-  if (userIds.length > 0) {
-    issues = issues.filter(issue => intersection(issue.userIds, userIds).length > 0);
-  }
-  if (myOnly && currentUserId) {
-    issues = issues.filter(issue => issue.userIds.includes(currentUserId));
-  }
-  if (recent) {
-    issues = issues.filter(issue => moment(issue.updatedAt).isAfter(moment().subtract(3, 'days')));
-  }
-  return issues;
-};
-
-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;
@@ -106,7 +49,7 @@ const isPositionChanged = (destination, source) => {
   return !isSameList || !isSamePosition;
 };
 
-const calculateListPosition = (...args) => {
+const calculateIssueListPosition = (...args) => {
   const { prevIssue, nextIssue } = getAfterDropPrevNextIssue(...args);
   let position;
 
@@ -123,13 +66,13 @@ const calculateListPosition = (...args) => {
 };
 
 const getAfterDropPrevNextIssue = (allIssues, destination, source, droppedIssueId) => {
-  const destinationIssues = getSortedListIssues(allIssues, destination.droppableId);
+  const beforeDropDestinationIssues = 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)
-    : insertItemIntoArray(destinationIssues, droppedIssue, destination.index);
+    ? moveItemWithinArray(beforeDropDestinationIssues, droppedIssue, destination.index)
+    : insertItemIntoArray(beforeDropDestinationIssues, droppedIssue, destination.index);
 
   return {
     prevIssue: afterDropDestinationIssues[destination.index - 1],
@@ -137,6 +80,9 @@ const getAfterDropPrevNextIssue = (allIssues, destination, source, droppedIssueI
   };
 };
 
+const getSortedListIssues = (issues, status) =>
+  issues.filter(issue => issue.status === status).sort((a, b) => a.listPosition - b.listPosition);
+
 ProjectBoardLists.propTypes = propTypes;
 
 export default ProjectBoardLists;