Skip to content

Commit

Permalink
Admin UI: refactored out uses of withRouter
Browse files Browse the repository at this point in the history
  • Loading branch information
Vultraz committed Feb 18, 2020
1 parent 535ea6a commit 709e164
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 143 deletions.
5 changes: 5 additions & 0 deletions .changeset/good-plants-buy.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@keystonejs/app-admin-ui': patch
---

Refactored out uses of the `withRouter` HOC.
171 changes: 84 additions & 87 deletions packages/app-admin-ui/client/components/Nav/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/** @jsx jsx */

import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
import { withRouter, Route, Link } from 'react-router-dom';
import React, { useState } from 'react'; // eslint-disable-line no-unused-vars
import { Route, Link } from 'react-router-dom';
import PropToggle from 'react-prop-toggle';
import { uid } from 'react-uid';
import styled from '@emotion/styled';
Expand Down Expand Up @@ -329,96 +329,93 @@ let PrimaryNavContent = ({ mouseIsOverNav }) => {
);
};

class Nav extends Component {
state = { mouseIsOverNav: false };
const Nav = ({ children }) => {
const [mouseIsOverNav, setMouseIsOverNav] = useState(false);

handleMouseEnter = () => {
this.setState({ mouseIsOverNav: true });
const handleMouseEnter = () => {
setMouseIsOverNav(true);
};
handleMouseLeave = () => {
this.setState({ mouseIsOverNav: false });

const handleMouseLeave = () => {
setMouseIsOverNav(false);
};
render() {
const { children } = this.props;
const { mouseIsOverNav } = this.state;

return (
<ResizeHandler isActive={mouseIsOverNav}>
{(resizeProps, clickProps, { isCollapsed, isDragging, width }) => {
const navWidth = isCollapsed ? 0 : width;
const makeResizeStyles = key => {
const pointers = isDragging ? { pointerEvents: 'none' } : null;
const transitions = isDragging
? null
: {
transition: `${camelToKebab(key)} ${TRANSITION_DURATION} ${TRANSITION_EASING}`,
};
return { [key]: navWidth, ...pointers, ...transitions };
};
return (
<ResizeHandler isActive={mouseIsOverNav}>
{(resizeProps, clickProps, { isCollapsed, isDragging, width }) => {
const navWidth = isCollapsed ? 0 : width;
const makeResizeStyles = key => {
const pointers = isDragging ? { pointerEvents: 'none' } : null;
const transitions = isDragging
? null
: {
transition: `${camelToKebab(key)} ${TRANSITION_DURATION} ${TRANSITION_EASING}`,
};
return { [key]: navWidth, ...pointers, ...transitions };
};

return (
<PageWrapper>
<PropToggle
isActive={isDragging}
styles={{
cursor: 'col-resize',
'-moz-user-select': 'none',
'-ms-user-select': 'none',
'-webkit-user-select': 'none',
'user-select': 'none',
}}
/>
<PrimaryNav
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
style={makeResizeStyles('width')}
return (
<PageWrapper>
<PropToggle
isActive={isDragging}
styles={{
cursor: 'col-resize',
'-moz-user-select': 'none',
'-ms-user-select': 'none',
'-webkit-user-select': 'none',
'user-select': 'none',
}}
/>
<PrimaryNav
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
style={makeResizeStyles('width')}
>
<PrimaryNavContent mouseIsOverNav={mouseIsOverNav} />
{isCollapsed ? null : (
<GrabHandle
onDoubleClick={clickProps.onClick}
isActive={mouseIsOverNav || isDragging}
{...resizeProps}
/>
)}
<Tooltip
content={
<TooltipContent kbd={KEYBOARD_SHORTCUT}>
{isCollapsed ? 'Click to Expand' : 'Click to Collapse'}
</TooltipContent>
}
placement="right"
hideOnMouseDown
hideOnKeyDown
delay={600}
>
<PrimaryNavContent mouseIsOverNav={mouseIsOverNav} />
{isCollapsed ? null : (
<GrabHandle
onDoubleClick={clickProps.onClick}
isActive={mouseIsOverNav || isDragging}
{...resizeProps}
/>
)}
<Tooltip
content={
<TooltipContent kbd={KEYBOARD_SHORTCUT}>
{isCollapsed ? 'Click to Expand' : 'Click to Collapse'}
</TooltipContent>
}
placement="right"
hideOnMouseDown
hideOnKeyDown
delay={600}
>
{ref => (
<CollapseExpand
isCollapsed={isCollapsed}
mouseIsOverNav={mouseIsOverNav}
{...clickProps}
ref={ref}
{ref => (
<CollapseExpand
isCollapsed={isCollapsed}
mouseIsOverNav={mouseIsOverNav}
{...clickProps}
ref={ref}
>
<svg
fill="currentColor"
width="16"
height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<svg
fill="currentColor"
width="16"
height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M2 12h11a1 1 0 0 1 0 2H2a1 1 0 0 1 0-2zm0-5h9a1 1 0 0 1 0 2H2a1 1 0 1 1 0-2zm0-5h12a1 1 0 0 1 0 2H2a1 1 0 1 1 0-2z" />
</svg>
</CollapseExpand>
)}
</Tooltip>
</PrimaryNav>
<Page style={makeResizeStyles('marginLeft')}>{children}</Page>
</PageWrapper>
);
}}
</ResizeHandler>
);
}
}
<path d="M2 12h11a1 1 0 0 1 0 2H2a1 1 0 0 1 0-2zm0-5h9a1 1 0 0 1 0 2H2a1 1 0 1 1 0-2zm0-5h12a1 1 0 0 1 0 2H2a1 1 0 1 1 0-2z" />
</svg>
</CollapseExpand>
)}
</Tooltip>
</PrimaryNav>
<Page style={makeResizeStyles('marginLeft')}>{children}</Page>
</PageWrapper>
);
}}
</ResizeHandler>
);
};

export default withRouter(Nav);
export default Nav;
29 changes: 14 additions & 15 deletions packages/app-admin-ui/client/components/ScrollToTop.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import { Component } from 'react';
import { withRouter } from 'react-router-dom';

class ScrollToTop extends Component {
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
window.scrollTo(0, 0);
}
}
render() {
return this.props.children;
}
}

export default withRouter(ScrollToTop);
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const ScrollToTop = ({ children }) => {
const location = useLocation();

useEffect(() => {
window.scrollTo(0, 0);
}, [location]);

return children;
};

export default ScrollToTop;
78 changes: 37 additions & 41 deletions packages/app-admin-ui/client/pages/Home/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { Component, Fragment } from 'react';
import { withRouter, Link } from 'react-router-dom';
import React, { Fragment } from 'react';
import { Link } from 'react-router-dom';
import { useQuery } from '@apollo/react-hooks';

import { Container, Grid, Cell } from '@arch-ui/layout';
Expand All @@ -12,44 +12,40 @@ import { Box, HeaderInset } from './components';
import ContainerQuery from '../../components/ContainerQuery';
import { gqlCountQueries } from '../../classes/List';

class HomePage extends Component {
render() {
const { lists, data, adminPath } = this.props;

return (
<main>
<Container>
<HeaderInset>
<PageTitle>Dashboard</PageTitle>
</HeaderInset>
<ContainerQuery>
{({ width }) => {
let cellWidth = 3;
if (width < 1024) cellWidth = 4;
if (width < 768) cellWidth = 6;
if (width < 480) cellWidth = 12;
return (
<Grid gap={16}>
{lists.map(list => {
const { key, path } = list;
const meta = data && data[list.gqlNames.listQueryMetaName];
return (
<ListProvider list={list} key={key}>
<Cell width={cellWidth}>
<Box to={`${adminPath}/${path}`} meta={meta} />
</Cell>
</ListProvider>
);
})}
</Grid>
);
}}
</ContainerQuery>
</Container>
</main>
);
}
}
const HomePage = ({ lists, data, adminPath }) => {
return (
<main>
<Container>
<HeaderInset>
<PageTitle>Dashboard</PageTitle>
</HeaderInset>
<ContainerQuery>
{({ width }) => {
let cellWidth = 3;
if (width < 1024) cellWidth = 4;
if (width < 768) cellWidth = 6;
if (width < 480) cellWidth = 12;
return (
<Grid gap={16}>
{lists.map(list => {
const { key, path } = list;
const meta = data && data[list.gqlNames.listQueryMetaName];
return (
<ListProvider list={list} key={key}>
<Cell width={cellWidth}>
<Box to={`${adminPath}/${path}`} meta={meta} />
</Cell>
</ListProvider>
);
})}
</Grid>
);
}}
</ContainerQuery>
</Container>
</main>
);
};

const HomepageListProvider = ({ getListByKey, listKeys, ...props }) => {
// TODO: A permission query to limit which lists are visible
Expand Down Expand Up @@ -118,4 +114,4 @@ const HomepageListProvider = ({ getListByKey, listKeys, ...props }) => {
);
};

export default withRouter(HomepageListProvider);
export default HomepageListProvider;

0 comments on commit 709e164

Please sign in to comment.