Uniformize folder structure (#693)

* Uniformize folder structure * Fix icons * Fix icons * Fix tests * Fix tests
2023-07-16 14:29:28 -07:00
parent 900ec5572f
commit 6ced8434bd
462 changed files with 931 additions and 960 deletions
@@ -0,0 +1,111 @@
+import { useEffect } from 'react';
+import { getOperationName } from '@apollo/client/utilities';
+import styled from '@emotion/styled';
+import { Droppable, DroppableProvided } from '@hello-pangea/dnd';
+import { useRecoilValue } from 'recoil';
+
+import { BoardPipelineStageColumn } from '@/ui/board/components/Board';
+import { BoardColumn } from '@/ui/board/components/BoardColumn';
+import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useUpdatePipelineStageMutation } from '~/generated/graphql';
+
+import { GET_PIPELINES } from '../queries';
+import { BoardCardContext } from '../states/BoardCardContext';
+import { BoardColumnContext } from '../states/BoardColumnContext';
+import { boardColumnTotalsFamilySelector } from '../states/boardColumnTotalsFamilySelector';
+import { pipelineStageIdScopedState } from '../states/pipelineStageIdScopedState';
+import { BoardOptions } from '../types/BoardOptions';
+
+import { EntityBoardCard } from './EntityBoardCard';
+
+const StyledPlaceholder = styled.div`
+  min-height: 1px;
+`;
+
+const StyledNewCardButtonContainer = styled.div`
+  padding-bottom: ${({ theme }) => theme.spacing(40)};
+`;
+
+const BoardColumnCardsContainer = ({
+  children,
+  droppableProvided,
+}: {
+  children: React.ReactNode;
+  droppableProvided: DroppableProvided;
+}) => {
+  return (
+    <div
+      ref={droppableProvided?.innerRef}
+      {...droppableProvided?.droppableProps}
+    >
+      {children}
+      <StyledPlaceholder>{droppableProvided?.placeholder}</StyledPlaceholder>
+    </div>
+  );
+};
+
+export function EntityBoardColumn({
+  column,
+  boardOptions,
+}: {
+  column: BoardPipelineStageColumn;
+  boardOptions: BoardOptions;
+}) {
+  const [pipelineStageId, setPipelineStageId] = useRecoilScopedState(
+    pipelineStageIdScopedState,
+    BoardColumnContext,
+  );
+  const boardColumnTotal = useRecoilValue(
+    boardColumnTotalsFamilySelector(column.pipelineStageId),
+  );
+
+  useEffect(() => {
+    if (pipelineStageId !== column.pipelineStageId) {
+      setPipelineStageId(column.pipelineStageId);
+    }
+  }, [column, setPipelineStageId, pipelineStageId]);
+
+  const [updatePipelineStage] = useUpdatePipelineStageMutation();
+  function handleEditColumnTitle(value: string) {
+    updatePipelineStage({
+      variables: {
+        id: pipelineStageId,
+        name: value,
+      },
+      refetchQueries: [getOperationName(GET_PIPELINES) || ''],
+    });
+  }
+
+  return (
+    <Droppable droppableId={column.pipelineStageId}>
+      {(droppableProvided) => (
+        <BoardColumn
+          onTitleEdit={handleEditColumnTitle}
+          title={column.title}
+          colorCode={column.colorCode}
+          pipelineStageId={column.pipelineStageId}
+          totalAmount={boardColumnTotal}
+        >
+          <BoardColumnCardsContainer droppableProvided={droppableProvided}>
+            {column.pipelineProgressIds.map((pipelineProgressId, index) => (
+              <RecoilScope
+                SpecificContext={BoardCardContext}
+                key={pipelineProgressId}
+              >
+                <EntityBoardCard
+                  index={index}
+                  pipelineProgressId={pipelineProgressId}
+                  boardOptions={boardOptions}
+                />
+              </RecoilScope>
+            ))}
+          </BoardColumnCardsContainer>
+          <StyledNewCardButtonContainer>
+            <RecoilScope>{boardOptions.newCardComponent}</RecoilScope>
+          </StyledNewCardButtonContainer>
+        </BoardColumn>
+      )}
+    </Droppable>
+  );
+}