2019-04-17 13:38:00 +00:00
|
|
|
import * as React from "react";
|
|
|
|
import { connect } from "react-redux";
|
|
|
|
import { Dispatch } from "redux";
|
2019-07-21 18:05:07 +00:00
|
|
|
import styled from "styled-components";
|
2019-04-17 13:38:00 +00:00
|
|
|
|
2019-07-23 12:20:34 +00:00
|
|
|
import { Route, RouteComponentProps, Switch, withRouter } from "react-router";
|
|
|
|
import { InstanceScreen, SearchScreen } from ".";
|
|
|
|
import { INSTANCE_DOMAIN_PATH } from "../../constants";
|
|
|
|
import { loadInstance } from "../../redux/actions";
|
2019-07-21 18:05:07 +00:00
|
|
|
import { IAppState } from "../../redux/types";
|
2019-07-23 16:32:43 +00:00
|
|
|
import { domainMatchSelector, isSmallScreen } from "../../util";
|
2019-07-23 12:20:34 +00:00
|
|
|
import { Graph, SidebarContainer } from "../organisms/";
|
2019-07-21 18:05:07 +00:00
|
|
|
|
|
|
|
const GraphContainer = styled.div`
|
|
|
|
display: flex;
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
`;
|
|
|
|
const FullDiv = styled.div`
|
|
|
|
position: absolute;
|
|
|
|
top: 50px;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
`;
|
2019-04-17 13:38:00 +00:00
|
|
|
|
2019-07-23 12:20:34 +00:00
|
|
|
interface IGraphScreenProps extends RouteComponentProps {
|
2019-07-21 18:05:07 +00:00
|
|
|
currentInstanceName: string | null;
|
|
|
|
pathname: string;
|
2019-04-17 13:38:00 +00:00
|
|
|
graphLoadError: boolean;
|
2019-07-21 18:05:07 +00:00
|
|
|
loadInstance: (domain: string | null) => void;
|
2019-04-17 13:38:00 +00:00
|
|
|
}
|
2019-08-02 20:12:34 +00:00
|
|
|
interface IGraphScreenState {
|
|
|
|
hasBeenViewed: boolean;
|
|
|
|
}
|
2019-07-21 18:05:07 +00:00
|
|
|
/**
|
|
|
|
* This component takes care of loading or deselecting the current instance when the URL path changes.
|
2019-07-23 12:20:34 +00:00
|
|
|
* It also handles changing and animating the screen shown in the sidebar.
|
2019-08-02 20:12:34 +00:00
|
|
|
*
|
|
|
|
* state.hasBeenViewed is used because once the component with the graph has been mounted, we never want to unmount it.
|
|
|
|
* However, if it's not the first page viewed (e.g. if someone opens directly on /about) we don't want to render the
|
|
|
|
* graph since it slows down everything else!
|
2019-07-21 18:05:07 +00:00
|
|
|
*/
|
2019-08-02 20:12:34 +00:00
|
|
|
class GraphScreenImpl extends React.Component<IGraphScreenProps, IGraphScreenState> {
|
|
|
|
public constructor(props: IGraphScreenProps) {
|
|
|
|
super(props);
|
|
|
|
this.state = { hasBeenViewed: false };
|
|
|
|
}
|
|
|
|
|
2019-04-17 13:38:00 +00:00
|
|
|
public render() {
|
2019-07-23 12:20:34 +00:00
|
|
|
return <Route render={this.renderRoutes} />;
|
2019-04-17 13:38:00 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
public componentDidMount() {
|
2019-08-02 20:12:34 +00:00
|
|
|
this.setHasBeenViewed();
|
2019-07-21 18:05:07 +00:00
|
|
|
this.loadCurrentInstance();
|
2019-04-17 13:38:00 +00:00
|
|
|
}
|
|
|
|
|
2019-07-21 18:05:07 +00:00
|
|
|
public componentDidUpdate(prevProps: IGraphScreenProps) {
|
2019-08-02 20:12:34 +00:00
|
|
|
this.setHasBeenViewed();
|
2019-07-21 18:05:07 +00:00
|
|
|
this.loadCurrentInstance(prevProps.currentInstanceName);
|
2019-04-17 13:38:00 +00:00
|
|
|
}
|
|
|
|
|
2019-08-02 20:12:34 +00:00
|
|
|
private setHasBeenViewed = () => {
|
|
|
|
if (this.state.hasBeenViewed) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const { location } = this.props;
|
|
|
|
if (location.pathname.startsWith("/instance") || location.pathname === "/") {
|
|
|
|
this.setState({ hasBeenViewed: true });
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-07-23 12:20:34 +00:00
|
|
|
private renderRoutes = ({ location }: RouteComponentProps) => (
|
|
|
|
<FullDiv>
|
|
|
|
<GraphContainer>
|
2019-07-23 16:32:43 +00:00
|
|
|
{/* Smaller screens never load the entire graph. Instead, `InstanceScreen` shows only the neighborhood. */}
|
2019-08-02 20:12:34 +00:00
|
|
|
{isSmallScreen || !this.state.hasBeenViewed || <Graph />}
|
2019-07-23 12:20:34 +00:00
|
|
|
<SidebarContainer>
|
|
|
|
<Switch>
|
|
|
|
<Route path={INSTANCE_DOMAIN_PATH} component={InstanceScreen} />
|
|
|
|
<Route exact={true} path="/" component={SearchScreen} />
|
|
|
|
</Switch>
|
|
|
|
</SidebarContainer>
|
|
|
|
</GraphContainer>
|
|
|
|
</FullDiv>
|
|
|
|
);
|
2019-04-17 13:38:00 +00:00
|
|
|
|
2019-07-21 18:05:07 +00:00
|
|
|
private loadCurrentInstance = (prevInstanceName?: string | null) => {
|
|
|
|
if (prevInstanceName !== this.props.currentInstanceName) {
|
|
|
|
this.props.loadInstance(this.props.currentInstanceName);
|
|
|
|
}
|
2019-04-17 13:38:00 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2019-07-21 18:05:07 +00:00
|
|
|
const mapStateToProps = (state: IAppState) => {
|
|
|
|
const match = domainMatchSelector(state);
|
|
|
|
return {
|
|
|
|
currentInstanceName: match && match.params.domain,
|
2019-08-27 13:50:16 +00:00
|
|
|
graphLoadError: state.data.graphLoadError,
|
2019-07-21 18:05:07 +00:00
|
|
|
pathname: state.router.location.pathname
|
|
|
|
};
|
|
|
|
};
|
2019-04-17 13:38:00 +00:00
|
|
|
const mapDispatchToProps = (dispatch: Dispatch) => ({
|
2019-07-21 18:05:07 +00:00
|
|
|
loadInstance: (domain: string | null) => dispatch(loadInstance(domain) as any)
|
2019-04-17 13:38:00 +00:00
|
|
|
});
|
2019-07-21 18:05:07 +00:00
|
|
|
const GraphScreen = connect(
|
2019-04-17 13:38:00 +00:00
|
|
|
mapStateToProps,
|
|
|
|
mapDispatchToProps
|
|
|
|
)(GraphScreenImpl);
|
2019-07-23 12:20:34 +00:00
|
|
|
export default withRouter(GraphScreen);
|