Skip to content

Commit

Permalink
perf(growthHack): show all campaign
Browse files Browse the repository at this point in the history
  • Loading branch information
batchimeg-a authored and ganzorig committed Dec 25, 2019
1 parent 23177b0 commit 60cc9e8
Show file tree
Hide file tree
Showing 9 changed files with 95 additions and 212 deletions.
16 changes: 14 additions & 2 deletions src/modules/boards/graphql/queries.ts
Original file line number Diff line number Diff line change
Expand Up @@ -83,11 +83,12 @@ const boardDetail = `
`;

const pipelines = `
query pipelines($boardId: String!) {
pipelines(boardId: $boardId) {
query pipelines($boardId: String, $type: String, $perPage: Int, $page: Int) {
pipelines(boardId: $boardId, type: $type, perPage: $perPage, page: $page) {
_id
name
boardId
state
}
}
`;
Expand Down Expand Up @@ -165,10 +166,21 @@ const stageDetail = `
}
`;

const boardCounts = `
query boardCounts($type: String!) {
boardCounts(type: $type) {
_id
name
count
}
}
`;

export default {
boards,
boardGetLast,
boardDetail,
boardCounts,
pipelines,
pipelineDetail,
stages,
Expand Down
16 changes: 15 additions & 1 deletion src/modules/boards/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -180,10 +180,24 @@ export type BoardsQueryResponse = {
refetch: () => void;
};

export interface IBoardCount {
_id: string;
name: string;
count: number;
}

export type BoardCountsQueryResponse = {
boardCounts: IBoardCount[];
loading: boolean;
refetch: () => void;
};

export type PipelinesQueryResponse = {
pipelines: IPipeline[];
loading: boolean;
refetch: ({ boardId }: { boardId?: string }) => Promise<any>;
refetch: (
{ boardId, type }: { boardId?: string; type?: string }
) => Promise<any>;
};

export type StagesQueryResponse = {
Expand Down
3 changes: 2 additions & 1 deletion src/modules/common/components/form/DateControl.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@ class DateControl extends React.Component<Props> {
const inputProps = {
name,
placeholder: placeholder || '',
required: required || false
required: required || false,
autocomplete: 'off'
};

const attributes = {
Expand Down
36 changes: 18 additions & 18 deletions src/modules/growthHacks/components/home/Home.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { IBoard } from 'modules/boards/types';
import { IBoardCount } from 'modules/boards/types';
import Button from 'modules/common/components/Button';
import EmptyState from 'modules/common/components/EmptyState';
import HeaderDescription from 'modules/common/components/HeaderDescription';
Expand All @@ -13,36 +13,36 @@ import PipelineList from '../../containers/home/PipelineList';
const { Section } = Wrapper.Sidebar;

type Props = {
state: string;
boards: IBoard[];
boardId: string;
queryParams: any;
boardsWithCount: IBoardCount[];
};

class Home extends React.Component<Props> {
renderBoards() {
const { boardId, boards } = this.props;
const { queryParams, boardsWithCount } = this.props;

if (boards.length === 0) {
const { id = '', state = '' } = queryParams;

if (boardsWithCount.length === 0) {
return <EmptyState text="There is no campaign" icon="folder-2" />;
}

return boards.map(board => (
return boardsWithCount.map(board => (
<li key={board._id}>
<Link
className={boardId === board._id ? 'active' : ''}
to={`/growthHack/home?id=${board._id}`}
className={id === board._id ? 'active' : ''}
to={`/growthHack/home?id=${board._id}&state=${state}`}
>
<FieldStyle>{board.name}</FieldStyle>
<SidebarCounter>
{board.pipelines && board.pipelines.length}
</SidebarCounter>
<SidebarCounter>{board.count}</SidebarCounter>
</Link>
</li>
));
}

renderSidebar() {
const { boardId, state } = this.props;
const { queryParams } = this.props;
const { state, id = '' } = queryParams;

return (
<>
Expand All @@ -62,31 +62,31 @@ class Home extends React.Component<Props> {
<li>
<Link
className={!state ? 'active' : ''}
to={`/growthHack/home?id=${boardId}`}
to={`/growthHack/home?id=${id}`}
>
All
</Link>
</li>
<li>
<Link
className={state === 'In progress' ? 'active' : ''}
to={`/growthHack/home?id=${boardId}&state=In progress`}
to={`/growthHack/home?id=${id}&state=In progress`}
>
In progress
</Link>
</li>
<li>
<Link
className={state === 'Not started' ? 'active' : ''}
to={`/growthHack/home?id=${boardId}&state=Not started`}
to={`/growthHack/home?id=${id}&state=Not started`}
>
Not started
</Link>
</li>
<li>
<Link
className={state === 'Completed' ? 'active' : ''}
to={`/growthHack/home?id=${boardId}&state=Completed`}
to={`/growthHack/home?id=${id}&state=Completed`}
>
Completed
</Link>
Expand All @@ -98,7 +98,7 @@ class Home extends React.Component<Props> {
}

renderContent = () => {
return <PipelineList state={this.props.state} />;
return <PipelineList queryParams={this.props.queryParams} />;
};

render() {
Expand Down
16 changes: 4 additions & 12 deletions src/modules/growthHacks/components/home/PipelineList.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,24 @@
import { IBoard, IPipeline } from 'modules/boards/types';
import { IPipeline } from 'modules/boards/types';
import EmptyState from 'modules/common/components/EmptyState';
import { BoxContainer } from 'modules/settings/growthHacks/styles';
import React from 'react';
import PipelineRow from './PipelineRow';

type Props = {
currentBoard?: IBoard;
pipelines: IPipeline[];
};
class PipelineList extends React.Component<Props, {}> {
render() {
const { pipelines, currentBoard } = this.props;
const { pipelines } = this.props;

if (pipelines.length === 0) {
return <EmptyState text="No projects" image="/images/actions/16.svg" />;
}

if (!currentBoard) {
return null;
}

return (
<BoxContainer>
{pipelines.map(pipeline => (
<PipelineRow
key={pipeline._id}
pipeline={pipeline}
currentBoard={currentBoard}
/>
<PipelineRow key={pipeline._id} pipeline={pipeline} />
))}
</BoxContainer>
);
Expand Down
7 changes: 3 additions & 4 deletions src/modules/growthHacks/components/home/PipelineRow.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import dayjs from 'dayjs';
import { IBoard, IPipeline } from 'modules/boards/types';
import { IPipeline } from 'modules/boards/types';
import Icon from 'modules/common/components/Icon';
import Label from 'modules/common/components/Label';
import { __ } from 'modules/common/utils';
Expand All @@ -14,7 +14,6 @@ import {

type Props = {
pipeline: IPipeline;
currentBoard: IBoard;
};

class PipelineRow extends React.Component<Props, {}> {
Expand Down Expand Up @@ -54,7 +53,7 @@ class PipelineRow extends React.Component<Props, {}> {
}

render() {
const { pipeline, currentBoard } = this.props;
const { pipeline } = this.props;

return (
<ProjectItem key={pipeline._id}>
Expand All @@ -74,7 +73,7 @@ class PipelineRow extends React.Component<Props, {}> {

<BottomAction>
<Link
to={`/growthHack/board?id=${currentBoard._id}&pipelineId=${
to={`/growthHack/board?id=${pipeline.boardId}&pipelineId=${
pipeline._id
}`}
>
Expand Down
110 changes: 17 additions & 93 deletions src/modules/growthHacks/containers/home/Home.tsx
Original file line number Diff line number Diff line change
@@ -1,117 +1,41 @@
import gql from 'graphql-tag';
import * as compose from 'lodash.flowright';
import { STORAGE_BOARD_KEY } from 'modules/boards/constants';
import { getBoardId } from 'modules/boards/containers/MainActionBar';
import { queries } from 'modules/boards/graphql';
import { PageHeader } from 'modules/boards/styles/header';
import {
BoardsGetLastQueryResponse,
BoardsQueryResponse
} from 'modules/boards/types';
import { getDefaultBoardAndPipelines } from 'modules/boards/utils';
import Spinner from 'modules/common/components/Spinner';
import { IRouterProps } from 'modules/common/types';
import { router as routerUtils, withProps } from 'modules/common/utils';
import { BoardCountsQueryResponse } from 'modules/boards/types';
import { withProps } from 'modules/common/utils';
import React from 'react';
import { graphql } from 'react-apollo';
import { withRouter } from 'react-router';
import Home from '../../components/home/Home';

type Props = {
id: string;
state: string;
} & IRouterProps;
queryParams: any;
};

type FinalProps = {
boardsQuery: BoardsQueryResponse;
boardGetLastQuery?: BoardsGetLastQueryResponse;
boardCountsQuery: BoardCountsQueryResponse;
} & Props;

class HomeContainer extends React.Component<FinalProps> {
render() {
const {
history,
location,
boardsQuery,
boardGetLastQuery,
state
} = this.props;

if (boardsQuery.loading) {
return <PageHeader />;
}

const boardId = getBoardId({ location });

const { defaultBoards } = getDefaultBoardAndPipelines();

if (boardId) {
defaultBoards.growthHack = boardId;

localStorage.setItem(STORAGE_BOARD_KEY, JSON.stringify(defaultBoards));
}

if (boardGetLastQuery && boardGetLastQuery.loading) {
return <Spinner />;
}

const lastBoard = boardGetLastQuery && boardGetLastQuery.boardGetLast;

// if there is no boardId in queryparams and there is one in localstorage
// then put those in queryparams
const defaultBoardId = defaultBoards.growthHack;

if (!boardId && defaultBoardId) {
routerUtils.setParams(
history,
{
id: defaultBoardId
},
true
);

return null;
}

// if there is no boardId in queryparams and there is lastBoard
// then put lastBoard._id and this board's first pipelineId to queryparams
if (
!boardId &&
lastBoard &&
lastBoard.pipelines &&
lastBoard.pipelines.length > 0
) {
routerUtils.setParams(history, { id: lastBoard._id });

return null;
}
const { boardCountsQuery, queryParams } = this.props;

const props = {
state,
boardId,
boards: boardsQuery.boards || []
queryParams,
boardsWithCount: boardCountsQuery.boardCounts || []
};

return <Home {...props} />;
}
}

export default withRouter(
withProps<Props>(
compose(
graphql<Props, BoardsQueryResponse>(gql(queries.boards), {
name: 'boardsQuery',
options: () => ({
variables: { type: 'growthHack' }
})
}),
graphql<Props, BoardsGetLastQueryResponse>(gql(queries.boardGetLast), {
name: 'boardGetLastQuery',
skip: getBoardId,
options: () => ({
variables: { type: 'growthHack' }
})
export default withProps<Props>(
compose(
graphql<Props, BoardCountsQueryResponse>(gql(queries.boardCounts), {
name: 'boardCountsQuery',
options: () => ({
variables: { type: 'growthHack' },
fetchPolicy: 'network-only'
})
)(HomeContainer)
)
})
)(HomeContainer)
);
Loading

0 comments on commit 60cc9e8

Please sign in to comment.