Compare `76e8704 ... +1 ... f6dce3d`

export interface State {
  isVisible: boolean;
  path: number[];
  depth: number;
  currentPageId: number | null;
}

const defaultState: State = {
  isVisible: false,
  path: [],
  depth: 0,
  currentPageId: null,
};

export const OPEN_EXPLORER = 'OPEN_EXPLORER';

@@ -21,48 +23,40 @@

  type: typeof CLOSE_EXPLORER;
}

export const PUSH_PAGE = 'PUSH_PAGE';
interface PushPageAction {
  type: typeof PUSH_PAGE;
export const GOTO_PAGE = 'GOTO_PAGE';
interface GotoPageAction {
  type: typeof GOTO_PAGE;
  payload: {
    id: number;
    transition: number;
  }
}

export const POP_PAGE = 'POP_PAGE';
interface PopPageAction {
  type: typeof POP_PAGE;
}

export type Action = OpenExplorerAction | CloseExplorerAction | PushPageAction | PopPageAction;
export type Action = OpenExplorerAction | CloseExplorerAction |GotoPageAction;

/**
 * Oversees the state of the explorer. Defines:
 * - Where in the page tree the explorer is at.
 * - Whether the explorer is open or not.
 */
export default function explorer(prevState = defaultState, action: Action) {
export default function explorer(prevState = defaultState, action: Action): State {
  switch (action.type) {
  case OPEN_EXPLORER:
    // Provide a starting page when opening the explorer.
    return {
      isVisible: true,
      path: [action.payload.id],
      depth: 0,
      currentPageId: action.payload.id,
    };

  case CLOSE_EXPLORER:
    return defaultState;

  case PUSH_PAGE:
    return {
      isVisible: prevState.isVisible,
      path: prevState.path.concat([action.payload.id]),
    };

  case POP_PAGE:
  case GOTO_PAGE:
    return {
      isVisible: prevState.isVisible,
      path: prevState.path.slice(0, -1),
      depth: prevState.depth + action.payload.transition,
      currentPageId: action.payload.id,
    };

  default:

@@ -15,11 +15,10 @@


interface ExplorerPanelProps {
  nodes: NodeState;
  path: number[];
  depth: number;
  page: PageState;
  onClose(): void;
  popPage(): void;
  pushPage(id: number): void;
  gotoPage(id: number, transition: number): void;
}

interface ExplorerPanelState {

@@ -46,8 +45,8 @@

  }

  componentWillReceiveProps(newProps) {
    const { path } = this.props;
    const isPush = newProps.path.length > path.length;
    const { depth } = this.props;
    const isPush = newProps.depth > depth;

    this.setState({
      transition: isPush ? PUSH : POP,

@@ -90,23 +89,24 @@

  }

  onItemClick(id, e) {
    const { pushPage } = this.props;
    const { gotoPage } = this.props;

    e.preventDefault();
    e.stopPropagation();

    pushPage(id);
    gotoPage(id, 1);
  }

  onHeaderClick(e) {
    const { path, popPage } = this.props;
    const hasBack = path.length > 1;
    const { page, depth, gotoPage } = this.props;
    const parent = page.meta.parent?.id;

    if (hasBack) {
    // Note: Checking depth as well in case the user started deep in the tree
    if (depth > 0 && parent) {
      e.preventDefault();
      e.stopPropagation();

      popPage();
      gotoPage(parent, -1);
    }
  }


@@ -152,7 +152,7 @@

  }

  render() {
    const { page, onClose, path } = this.props;
    const { page, onClose, depth } = this.props;
    const { transition, paused } = this.state;

    return (

@@ -166,13 +166,13 @@

          onDeactivate: onClose,
        }}
      >
        <Button className="c-explorer__close" onClick={onClose}>
        <Button className="c-explorer__close">
          {STRINGS.CLOSE_EXPLORER}
        </Button>
        <Transition name={transition} className="c-explorer" component="nav" label={STRINGS.PAGE_EXPLORER}>
          <div key={path.length} className="c-transition-group">
          <div key={depth} className="c-transition-group">
            <ExplorerHeader
              depth={path.length}
              depth={depth}
              page={page}
              onClick={this.onHeaderClick}
            />

@@ -11,44 +11,40 @@


interface ExplorerProps {
  isVisible: boolean;
  path: number[],
  depth: number,
  currentPageId: number | null,
  nodes: NodeState,
  onClose(): void;
  popPage(): void;
  pushPage(id: number): void;
  gotoPage(id: number, transition: number): void;
}

const Explorer: React.FunctionComponent<ExplorerProps> = ({
  isVisible,
  depth,
  currentPageId,
  nodes,
  path,
  pushPage,
  popPage,
  gotoPage,
  onClose,
}) => {
  const page = nodes[path[path.length - 1]];

  return isVisible ? (
    <ExplorerPanel
      path={path}
      page={page}
      nodes={nodes}
      onClose={onClose}
      popPage={popPage}
      pushPage={pushPage}
    />
  ) : null;
};
}) => ((isVisible && currentPageId) ? (
  <ExplorerPanel
    depth={depth}
    page={nodes[currentPageId]}
    nodes={nodes}
    gotoPage={gotoPage}
    onClose={onClose}
  />
) : null);

const mapStateToProps = (state: State) => ({
  isVisible: state.explorer.isVisible,
  path: state.explorer.path,
  depth: state.explorer.depth,
  currentPageId: state.explorer.currentPageId,
  nodes: state.nodes,
});

const mapDispatchToProps = (dispatch) => ({
  pushPage: (id) => dispatch(actions.pushPage(id)),
  popPage: () => dispatch(actions.popPage()),
  gotoPage: (id: number, transition: number) => dispatch(actions.gotoPage(id, transition)),
  onClose: () => dispatch(actions.closeExplorer()),
});


@@ -80,15 +80,14 @@

  };
}

export const popPage = createAction('POP_PAGE');
const pushPagePrivate = createAction('PUSH_PAGE', (id: number) => ({ id }));
const gotoPagePrivate = createAction('GOTO_PAGE', (id: number, transition: number) => ({ id, transition }));

export function pushPage(id: number): ThunkActionType {
export function gotoPage(id: number, transition: number): ThunkActionType {
  return (dispatch, getState) => {
    const { nodes } = getState();
    const page = nodes[id];

    dispatch(pushPagePrivate(id));
    dispatch(gotoPagePrivate(id, transition));

    if (page && !page.isFetching && !(page.children.count > 0)) {
      dispatch(getChildren(id));

@@ -18,7 +18,7 @@

 * and allowing access back to the parent level.
 */
const ExplorerHeader: React.FunctionComponent<ExplorerHeaderProps> = ({ page, depth, onClick }) => {
  const isRoot = depth === 1;
  const isRoot = depth === 0;

  return (
    <Button

Click to load this diff.

Loading diff...

Click to load this diff.

Loading diff...

Everything is accounted for!

No changes detected that need to be reviewed.

What changes does Codecov check for?

Lines, not adjusted in diff, that have changed coverage data.

Files that introduced coverage data that had none before.

Files that have missing coverage data that once were tracked.

90.12% ø -0.01%

Update changelog entries for @samgans

Unknown

f6dce3d

CI Passed

Hiding 1 contexual commits

-6

-8

90.13% ø ø

Fix docstring

kaedroho

76e8704

CI Passed

Files		•	•	•	Coverage
client/src	-6	-8	ø	+2	^-0.24% 92.85%
wagtail	ø	ø	ø	ø	90.01%
Project Totals (438 files)	26,338	23,736	736	1,866	90.12%

90	89		}
91	90
92	91		onItemClick(id, e) {
93		-	const { pushPage } = this.props;
	92	+	const { gotoPage } = this.props;
94	93
95	94		e.preventDefault();
96	95		e.stopPropagation();
97	96
98		-	pushPage(id);
	97	+	gotoPage(id, 1);
99	98		}
100	99
101	100		onHeaderClick(e) {
102		-	const { path, popPage } = this.props;
103		-	const hasBack = path.length > 1;
	101	+	const { page, depth, gotoPage } = this.props;
	102	+	const parent = page.meta.parent?.id;
104	103
105		-	if (hasBack) {
	104	+	// Note: Checking depth as well in case the user started deep in the tree
	105	+	if (depth > 0 && parent) {
106	106		e.preventDefault();
107	107		e.stopPropagation();
108	108
109		-	popPage();
	109	+	gotoPage(parent, -1);
110	110		}
111	111		}
112	112

152	152		}
153	153
154	154		render() {
155		-	const { page, onClose, path } = this.props;
	155	+	const { page, onClose, depth } = this.props;
156	156		const { transition, paused } = this.state;
157	157
158	158		return (

166	166		onDeactivate: onClose,
167	167		}}
168	168		>
169		-	<Button className="c-explorer__close" onClick={onClose}>
	169	+	<Button className="c-explorer__close">
170	170		{STRINGS.CLOSE_EXPLORER}
171	171		</Button>
172	172		<Transition name={transition} className="c-explorer" component="nav" label={STRINGS.PAGE_EXPLORER}>
173		-	<div key={path.length} className="c-transition-group">
	173	+	<div key={depth} className="c-transition-group">
174	174		<ExplorerHeader
175		-	depth={path.length}
	175	+	depth={depth}
176	176		page={page}
177	177		onClick={this.onHeaderClick}
178	178		/>

Navigation	Overlay
`t` Navigate files	`h` Toggle hits
`y` Change url to tip of branch	`m` Toggle misses
`b / v` Jump to prev/next hit line	`p` Toggle partial
`z / x` Jump to prev/next missed or partial line	`1..9` Toggle flags
`shift + o` Open current page in GitHub	`a` Toggle all on
`/ or ?` Show keyboard shortcuts dialog	`c` Toggle context lines or commits

Compare `76e8704 ... +1 ... f6dce3d`

Flags

Everything is accounted for!

What changes does Codecov check for?

Show failed CI and contexual commits `c`

3 Commits

1	1		export interface State {
2	2		isVisible: boolean;
3		-	path: number[];
	3	+	depth: number;
	4	+	currentPageId: number \| null;
4	5		}
5	6
6	7		const defaultState: State = {
7	8		isVisible: false,
8		-	path: [],
	9	+	depth: 0,
	10	+	currentPageId: null,
9	11		};
10	12
11	13		export const OPEN_EXPLORER = 'OPEN_EXPLORER';

21	23		type: typeof CLOSE_EXPLORER;
22	24		}
23	25
24		-	export const PUSH_PAGE = 'PUSH_PAGE';
25		-	interface PushPageAction {
26		-	type: typeof PUSH_PAGE;
	26	+	export const GOTO_PAGE = 'GOTO_PAGE';
	27	+	interface GotoPageAction {
	28	+	type: typeof GOTO_PAGE;
27	29		payload: {
28	30		id: number;
	31	+	transition: number;
29	32		}
30	33		}
31	34
32		-	export const POP_PAGE = 'POP_PAGE';
33		-	interface PopPageAction {
34		-	type: typeof POP_PAGE;
35		-	}
36		-
37		-	export type Action = OpenExplorerAction \| CloseExplorerAction \| PushPageAction \| PopPageAction;
	35	+	export type Action = OpenExplorerAction \| CloseExplorerAction \|GotoPageAction;
38	36
39	37		/**
40	38		* Oversees the state of the explorer. Defines:
41	39		* - Where in the page tree the explorer is at.
42	40		* - Whether the explorer is open or not.
43	41		*/
44		-	export default function explorer(prevState = defaultState, action: Action) {
	42	+	export default function explorer(prevState = defaultState, action: Action): State {
45	43		switch (action.type) {
46	44		case OPEN_EXPLORER:
47	45		// Provide a starting page when opening the explorer.
48	46		return {
49	47		isVisible: true,
50		-	path: [action.payload.id],
	48	+	depth: 0,
	49	+	currentPageId: action.payload.id,
51	50		};
52	51
53	52		case CLOSE_EXPLORER:
54	53		return defaultState;
55	54
56		-	case PUSH_PAGE:
57		-	return {
58		-	isVisible: prevState.isVisible,
59		-	path: prevState.path.concat([action.payload.id]),
60		-	};
61		-
62		-	case POP_PAGE:
	55	+	case GOTO_PAGE:
63	56		return {
64	57		isVisible: prevState.isVisible,
65		-	path: prevState.path.slice(0, -1),
	58	+	depth: prevState.depth + action.payload.transition,
	59	+	currentPageId: action.payload.id,
66	60		};
67	61
68	62		default:

15	15
16	16		interface ExplorerPanelProps {
17	17		nodes: NodeState;
18		-	path: number[];
	18	+	depth: number;
19	19		page: PageState;
20	20		onClose(): void;
21		-	popPage(): void;
22		-	pushPage(id: number): void;
	21	+	gotoPage(id: number, transition: number): void;
23	22		}
24	23
25	24		interface ExplorerPanelState {

46	45		}
47	46
48	47		componentWillReceiveProps(newProps) {
49		-	const { path } = this.props;
50		-	const isPush = newProps.path.length > path.length;
	48	+	const { depth } = this.props;
	49	+	const isPush = newProps.depth > depth;
51	50
52	51		this.setState({
53	52		transition: isPush ? PUSH : POP,

11	11
12	12		interface ExplorerProps {
13	13		isVisible: boolean;
14		-	path: number[],
	14	+	depth: number,
	15	+	currentPageId: number \| null,
15	16		nodes: NodeState,
16	17		onClose(): void;
17	18		popPage(): void;
18		-	pushPage(id: number): void;
	19	+	gotoPage(id: number, transition: number): void;
19	20		}
20	21
21	22		const Explorer: React.FunctionComponent<ExplorerProps> = ({
22	23		isVisible,
	24	+	depth,
	25	+	currentPageId,
23	26		nodes,
24		-	path,
25		-	pushPage,
26		-	popPage,
	27	+	gotoPage,
27	28		onClose,
28		-	}) => {
29		-	const page = nodes[path[path.length - 1]];
30		-
31		-	return isVisible ? (
32		-	<ExplorerPanel
33		-	path={path}
34		-	page={page}
35		-	nodes={nodes}
36		-	onClose={onClose}
37		-	popPage={popPage}
38		-	pushPage={pushPage}
39		-	/>
40		-	) : null;
41		-	};
	29	+	}) => ((isVisible && currentPageId) ? (
	30	+	<ExplorerPanel
	31	+	depth={depth}
	32	+	page={nodes[currentPageId]}
	33	+	nodes={nodes}
	34	+	gotoPage={gotoPage}
	35	+	onClose={onClose}
	36	+	/>
	37	+	) : null);
42	38
43	39		const mapStateToProps = (state: State) => ({
44	40		isVisible: state.explorer.isVisible,
45		-	path: state.explorer.path,
	41	+	depth: state.explorer.depth,
	42	+	currentPageId: state.explorer.currentPageId,
46	43		nodes: state.nodes,
47	44		});
48	45
49	46		const mapDispatchToProps = (dispatch) => ({
50		-	pushPage: (id) => dispatch(actions.pushPage(id)),
51		-	popPage: () => dispatch(actions.popPage()),
	47	+	gotoPage: (id: number, transition: number) => dispatch(actions.gotoPage(id, transition)),
52	48		onClose: () => dispatch(actions.closeExplorer()),
53	49		});
54	50

80	80		};
81	81		}
82	82
83		-	export const popPage = createAction('POP_PAGE');
84		-	const pushPagePrivate = createAction('PUSH_PAGE', (id: number) => ({ id }));
	83	+	const gotoPagePrivate = createAction('GOTO_PAGE', (id: number, transition: number) => ({ id, transition }));
85	84
86		-	export function pushPage(id: number): ThunkActionType {
	85	+	export function gotoPage(id: number, transition: number): ThunkActionType {
87	86		return (dispatch, getState) => {
88	87		const { nodes } = getState();
89	88		const page = nodes[id];
90	89
91		-	dispatch(pushPagePrivate(id));
	90	+	dispatch(gotoPagePrivate(id, transition));
92	91
93	92		if (page && !page.isFetching && !(page.children.count > 0)) {
94	93		dispatch(getChildren(id));

18	18		* and allowing access back to the parent level.
19	19		*/
20	20		const ExplorerHeader: React.FunctionComponent<ExplorerHeaderProps> = ({ page, depth, onClick }) => {
21		-	const isRoot = depth === 1;
	21	+	const isRoot = depth === 0;
22	22
23	23		return (
24	24		<Button

Compare 76e8704 ... +1 ... f6dce3d

Flags

Everything is accounted for!

What changes does Codecov check for?

Show failed CI and contexual commits c 3 Commits

Compare `76e8704 ... +1 ... f6dce3d`

Show failed CI and contexual commits `c`

3 Commits