change: add loading state to project board

frontend/src/Projects/Project/Board/index.tsx

@@ -2,9 +2,9 @@ import React, { useState, useRef, useContext, useEffect } from 'react';
 import { MENU_TYPES } from 'shared/components/TopNavbar';
 import updateApolloCache from 'shared/utils/cache';
 import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
+import LabelManagerEditor from '../LabelManagerEditor';
 import styled, { css } from 'styled-components/macro';
 import { Bolt, ToggleOn, Tags, CheckCircle, Sort, Filter } from 'shared/icons';
-import LabelManagerEditor from '../LabelManagerEditor';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import { useParams, Route, useRouteMatch, useHistory, RouteComponentProps, useLocation } from 'react-router-dom';
 import {
@@ -47,6 +47,7 @@ import DueDateManager from 'shared/components/DueDateManager';
 import UserIDContext from 'App/context';
 import LabelManager from 'shared/components/PopupMenu/LabelManager';
 import LabelEditor from 'shared/components/PopupMenu/LabelEditor';
+import EmptyBoard from 'shared/components/EmptyBoard';
 
 const ProjectBar = styled.div`
   display: flex;
@@ -103,12 +104,18 @@ const initialQuickCardEditorState: QuickCardEditorState = {
 };
 
 type ProjectBoardProps = {
-  onCardLabelClick: () => void;
+  onCardLabelClick?: () => void;
-  cardLabelVariant: CardLabelVariant;
+  cardLabelVariant?: CardLabelVariant;
-  projectID: string;
+  projectID?: string;
+  loading?: boolean;
 };
 
-const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick, cardLabelVariant }) => {
+const ProjectBoard: React.FC<ProjectBoardProps> = ({
+  projectID,
+  onCardLabelClick,
+  cardLabelVariant,
+  loading: isLoading = false,
+}) => {
   const [assignTask] = useAssignTaskMutation();
   const [unassignTask] = useUnassignTaskMutation();
   const $labelsRef = useRef<HTMLDivElement>(null);
@@ -170,7 +177,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
 
   const [updateTaskGroupName] = useUpdateTaskGroupNameMutation({});
   const { loading, data } = useFindProjectQuery({
-    variables: { projectId: projectID },
+    variables: { projectId: projectID ?? '' },
   });
 
   const [updateTaskDueDate] = useUpdateTaskDueDateMutation();
@@ -256,7 +263,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
   };
 
   const onCreateList = (listName: string) => {
-    if (data) {
+    if (data && projectID) {
       const [lastColumn] = data.findProject.taskGroups.sort((a, b) => a.position - b.position).slice(-1);
       let position = 65535;
       if (lastColumn) {
@@ -266,8 +273,42 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
     }
   };
 
-  if (loading) {
+  if (loading || isLoading) {
-    return <span>loading</span>;
+    return (
+      <>
+        <ProjectBar>
+          <ProjectActions>
+            <ProjectAction disabled>
+              <CheckCircle width={13} height={13} />
+              <ProjectActionText>All Tasks</ProjectActionText>
+            </ProjectAction>
+            <ProjectAction disabled>
+              <Filter width={13} height={13} />
+              <ProjectActionText>Filter</ProjectActionText>
+            </ProjectAction>
+            <ProjectAction disabled>
+              <Sort width={13} height={13} />
+              <ProjectActionText>Sort</ProjectActionText>
+            </ProjectAction>
+          </ProjectActions>
+          <ProjectActions>
+            <ProjectAction>
+              <Tags width={13} height={13} />
+              <ProjectActionText>Labels</ProjectActionText>
+            </ProjectAction>
+            <ProjectAction disabled>
+              <ToggleOn width={13} height={13} />
+              <ProjectActionText>Fields</ProjectActionText>
+            </ProjectAction>
+            <ProjectAction disabled>
+              <Bolt width={13} height={13} />
+              <ProjectActionText>Rules</ProjectActionText>
+            </ProjectAction>
+          </ProjectActions>
+        </ProjectBar>
+        <EmptyBoard />
+      </>
+    );
   }
   if (data) {
     labelsRef.current = data.findProject.labels;
@@ -323,7 +364,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                     taskLabels={null}
                     labelColors={data.labelColors}
                     labels={labelsRef}
-                    projectID={projectID}
+                    projectID={projectID ?? ''}
                   />,
                 );
               }}
@@ -345,8 +386,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
           onTaskClick={task => {
             history.push(`${match.url}/c/${task.id}`);
           }}
-          onCardLabelClick={onCardLabelClick}
+          onCardLabelClick={onCardLabelClick ?? (() => {})}
-          cardLabelVariant={cardLabelVariant}
+          cardLabelVariant={cardLabelVariant ?? 'large'}
           onTaskDrop={(droppedTask, previousTaskGroupID) => {
             updateTaskLocation({
               variables: {
@@ -475,7 +516,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                   labelColors={data.labelColors}
                   labels={labelsRef}
                   taskLabels={taskLabelsRef}
-                  projectID={projectID}
+                  projectID={projectID ?? ''}
                 />,
               );
             }}

frontend/src/Projects/Project/index.tsx

@@ -39,6 +39,7 @@ import Input from 'shared/components/Input';
 import Member from 'shared/components/Member';
 import Board from './Board';
 import Details from './Details';
+import EmptyBoard from 'shared/components/EmptyBoard';
 
 const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';
 
@@ -202,6 +203,7 @@ const Project = () => {
     return (
       <>
         <GlobalTopNavbar onSaveProjectName={projectName => {}} name="" projectID={null} />
+        <Board loading />
       </>
     );
   }

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

@@ -1,11 +1,11 @@
 import React, { useRef } from 'react';
 import styled, { css } from 'styled-components/macro';
 
-const Text = styled.span<{ fontSize: string }>`
+const Text = styled.span<{ fontSize: string; justifyTextContent: string }>`
   position: relative;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: ${props => props.justifyTextContent};
   transition: all 0.2s ease;
   font-size: ${props => props.fontSize};
   color: rgba(${props => props.theme.colors.text.secondary});
@@ -112,6 +112,7 @@ type ButtonProps = {
   type?: 'button' | 'submit';
   className?: string;
   onClick?: ($target: React.RefObject<HTMLButtonElement>) => void;
+  justifyTextContent?: string;
 };
 
 const Button: React.FC<ButtonProps> = ({
@@ -120,6 +121,7 @@ const Button: React.FC<ButtonProps> = ({
   color = 'primary',
   variant = 'filled',
   type = 'button',
+  justifyTextContent = 'center',
   onClick,
   className,
   children,
@@ -134,7 +136,9 @@ const Button: React.FC<ButtonProps> = ({
     case 'filled':
       return (
         <Filled ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
-          <Text fontSize={fontSize}>{children}</Text>
+          <Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
+            {children}
+          </Text>
         </Filled>
       );
     case 'outline':
@@ -147,13 +151,17 @@ const Button: React.FC<ButtonProps> = ({
           disabled={disabled}
           color={color}
         >
-          <Text fontSize={fontSize}>{children}</Text>
+          <Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
+            {children}
+          </Text>
         </Outline>
       );
     case 'flat':
       return (
         <Flat ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
-          <Text fontSize={fontSize}>{children}</Text>
+          <Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
+            {children}
+          </Text>
         </Flat>
       );
     case 'lineDown':
@@ -166,7 +174,9 @@ const Button: React.FC<ButtonProps> = ({
           disabled={disabled}
           color={color}
         >
-          <Text fontSize={fontSize}>{children}</Text>
+          <Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
+            {children}
+          </Text>
           <LineX color={color} />
         </LineDown>
       );
@@ -180,13 +190,17 @@ const Button: React.FC<ButtonProps> = ({
           disabled={disabled}
           color={color}
         >
-          <Text fontSize={fontSize}>{children}</Text>
+          <Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
+            {children}
+          </Text>
         </Gradient>
       );
     case 'relief':
       return (
         <Relief ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
-          <Text fontSize={fontSize}>{children}</Text>
+          <Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
+            {children}
+          </Text>
         </Relief>
       );
     default:

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components/macro';
+import { mixin } from 'shared/utils/styles';
+
+export const BoardContainer = styled.div`
+  position: relative;
+  overflow-y: auto;
+  outline: none;
+  flex-grow: 1;
+`;
+
+export const BoardWrapper = styled.div`
+  display: flex;
+
+  user-select: none;
+  white-space: nowrap;
+  margin-bottom: 8px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 8px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+`;
+export const Container = styled.div`
+  width: 272px;
+  margin: 0 4px;
+  height: 100%;
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: top;
+  white-space: nowrap;
+`;
+
+export const defaultBaseColor = '#10163a';
+
+export const defaultHighlightColor = mixin.lighten('#10163a', 0.25);
+
+export const skeletonKeyframes = keyframes`
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+  `;
+
+export const Wrapper = styled.div`
+  // background-color: #ebecf0;
+  // background: rgb(244, 245, 247);
+  min-height: 120px;
+  opacity: 0.8;
+  background: #10163a;
+  color: #c2c6dc;
+
+  border-radius: 5px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  position: relative;
+  white-space: normal;
+
+  background-image: linear-gradient(90deg, ${defaultBaseColor}, ${defaultHighlightColor}, ${defaultBaseColor});
+  background-size: 200px 100%;
+  background-repeat: no-repeat;
+
+  animation: ${skeletonKeyframes} 1.2s ease-in-out infinite;
+`;
+
+const EmptyBoard: React.FC = () => {
+  return (
+    <BoardContainer>
+      <BoardWrapper>
+        <Container>
+          <Wrapper />
+        </Container>
+        <Container>
+          <Wrapper />
+        </Container>
+        <Container>
+          <Wrapper />
+        </Container>
+        <Container>
+          <Wrapper />
+        </Container>
+      </BoardWrapper>
+    </BoardContainer>
+  );
+};
+
+export default EmptyBoard;

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

@@ -1,5 +1,5 @@
-import React, {useState, useRef, useEffect} from 'react';
+import React, { useState, useRef, useEffect } from 'react';
-import {Bin, Cross, Plus} from 'shared/icons';
+import { Bin, Cross, Plus } from 'shared/icons';
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
 import ReactMarkdown from 'react-markdown';
 
@@ -9,7 +9,7 @@ import {
   getNewDraggablePosition,
   getAfterDropDraggableList,
 } from 'shared/utils/draggables';
-import {DragDropContext, Droppable, Draggable, DropResult} from 'react-beautiful-dnd';
+import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
 import TaskAssignee from 'shared/components/TaskAssignee';
 import moment from 'moment';
 
@@ -54,7 +54,7 @@ import {
   MetaDetailTitle,
   MetaDetailContent,
 } from './Styles';
-import Checklist, {ChecklistItem, ChecklistItems} from '../Checklist';
+import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist';
 import styled from 'styled-components';
 
 const ChecklistContainer = styled.div``;
@@ -69,7 +69,7 @@ type TaskLabelProps = {
   onClick: ($target: React.RefObject<HTMLElement>) => void;
 };
 
-const TaskLabelItem: React.FC<TaskLabelProps> = ({label, onClick}) => {
+const TaskLabelItem: React.FC<TaskLabelProps> = ({ label, onClick }) => {
   const $label = useRef<HTMLDivElement>(null);
   return (
     <TaskDetailLabel
@@ -84,7 +84,7 @@ const TaskLabelItem: React.FC<TaskLabelProps> = ({label, onClick}) => {
   );
 };
 
-const TaskContent: React.FC<TaskContentProps> = ({description, onEditContent}) => {
+const TaskContent: React.FC<TaskContentProps> = ({ description, onEditContent }) => {
   return description === '' ? (
     <TaskDetailsAddDetailsButton onClick={onEditContent}>Add a more detailed description</TaskDetailsAddDetailsButton>
   ) : (
@@ -214,7 +214,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
     onOpenAddLabelPopup(task, $target);
   };
 
-  const onDragEnd = ({draggableId, source, destination, type}: DropResult) => {
+  const onDragEnd = ({ draggableId, source, destination, type }: DropResult) => {
     if (typeof destination === 'undefined') return;
     if (!isPositionChanged(source, destination)) return;
 
@@ -233,7 +233,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
         };
         beforeDropDraggables = getSortedDraggables(
           task.checklists.map(checklist => {
-            return {id: checklist.id, position: checklist.position};
+            return { id: checklist.id, position: checklist.position };
           }),
         );
         if (droppedDraggable === null || beforeDropDraggables === null) {
@@ -249,9 +249,9 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
         const newPosition = getNewDraggablePosition(afterDropDraggables, destination.index);
         console.log(droppedGroup);
         console.log(`positiion: ${newPosition}`);
-        onChecklistDrop({...droppedGroup, position: newPosition});
+        onChecklistDrop({ ...droppedGroup, position: newPosition });
       } else {
-        throw {error: 'task group can not be found'};
+        throw { error: 'task group can not be found' };
       }
     } else {
       const targetChecklist = task.checklists.findIndex(
@@ -266,7 +266,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
         };
         beforeDropDraggables = getSortedDraggables(
           task.checklists[targetChecklist].items.map(item => {
-            return {id: item.id, position: item.position};
+            return { id: item.id, position: item.position };
           }),
         );
         if (droppedDraggable === null || beforeDropDraggables === null) {
@@ -438,7 +438,9 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                                                 complete={item.complete}
                                                 onDeleteItem={onDeleteItem}
                                                 onChangeName={onChangeItemName}
-                                                onToggleItem={(itemID, complete) => onToggleChecklistItem(item.id, complete)}
+                                                onToggleItem={(itemID, complete) =>
+                                                  onToggleChecklistItem(item.id, complete)
+                                                }
                                               />
                                             )}
                                           </Draggable>
@@ -461,15 +463,23 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
         <TaskDetailsSidebar>
           <ActionButtons>
             <ActionButtonsTitle>ADD TO CARD</ActionButtonsTitle>
-            <ActionButton onClick={() => onToggleTaskComplete(task)}>
+            <ActionButton justifyTextContent="flex-start" onClick={() => onToggleTaskComplete(task)}>
               {task.complete ? 'Mark Incomplete' : 'Mark Complete'}
             </ActionButton>
-            <ActionButton onClick={$target => onAddMember($target)}>Members</ActionButton>
+            <ActionButton justifyTextContent="flex-start" onClick={$target => onAddMember($target)}>
-            <ActionButton onClick={$target => onAddLabel($target)}>Labels</ActionButton>
+              Members
-            <ActionButton onClick={$target => onAddChecklist($target)}>Checklist</ActionButton>
+            </ActionButton>
-            <ActionButton onClick={$target => onOpenDueDatePopop(task, $target)}>Due Date</ActionButton>
+            <ActionButton justifyTextContent="flex-start" onClick={$target => onAddLabel($target)}>
-            <ActionButton>Attachment</ActionButton>
+              Labels
-            <ActionButton>Cover</ActionButton>
+            </ActionButton>
+            <ActionButton justifyTextContent="flex-start" onClick={$target => onAddChecklist($target)}>
+              Checklist
+            </ActionButton>
+            <ActionButton justifyTextContent="flex-start" onClick={$target => onOpenDueDatePopop(task, $target)}>
+              Due Date
+            </ActionButton>
+            <ActionButton justifyTextContent="flex-start">Attachment</ActionButton>
+            <ActionButton justifyTextContent="flex-start">Cover</ActionButton>
           </ActionButtons>
         </TaskDetailsSidebar>
       </TaskDetailsWrapper>