Make App.js into skeleton for GraphExplorer (#70)
* Make App.js into skeleton for GraphExplorer We make a very basic skeleton for the Graph Explorer as a basis for future development. This commit also removes the UserExplorer and FileExplorer from App.js. Since we have changed the underlying data model, we are unlikely to use the UserExplorer or FileExplorer in anything like their current state, so they are effectively deprecated. I am deferring removing them because it is nice to have some examples of working React code to copy from, before the Graph Explorer is ready. Test plan: run `yarn start`, and observe that the App displays the words "Graph Explorer" underneath the "SourceCred Explorer" title bar.
This commit is contained in:
parent
5960eab6c1
commit
7ea8bdd964
|
@ -1,19 +1,12 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React, {Component} from "react";
|
import React, {Component} from "react";
|
||||||
import data from "./data.json";
|
|
||||||
import "./App.css";
|
import "./App.css";
|
||||||
import {FileExplorer} from "./FileExplorer.js";
|
import {GraphExplorer} from "./GraphExplorer";
|
||||||
import {UserExplorer} from "./UserExplorer.js";
|
|
||||||
|
|
||||||
type AppState = {selectedPath: string, selectedUser: ?string};
|
type Props = {};
|
||||||
class App extends Component<{}, AppState> {
|
type State = {};
|
||||||
constructor() {
|
|
||||||
super();
|
class App extends Component<Props, State> {
|
||||||
this.state = {
|
|
||||||
selectedPath: "",
|
|
||||||
selectedUser: null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="App" style={{backgroundColor: "#eeeeee"}}>
|
<div className="App" style={{backgroundColor: "#eeeeee"}}>
|
||||||
|
@ -28,19 +21,8 @@ class App extends Component<{}, AppState> {
|
||||||
>
|
>
|
||||||
<h1 style={{fontSize: "1.5em"}}>SourceCred Explorer</h1>
|
<h1 style={{fontSize: "1.5em"}}>SourceCred Explorer</h1>
|
||||||
</header>
|
</header>
|
||||||
<FileExplorer
|
|
||||||
className="file-explorer"
|
<GraphExplorer />
|
||||||
onSelectPath={(x) => this.setState({selectedPath: x})}
|
|
||||||
selectedPath={this.state.selectedPath}
|
|
||||||
data={data}
|
|
||||||
/>
|
|
||||||
<UserExplorer
|
|
||||||
className="user-explorer"
|
|
||||||
selectedPath={this.state.selectedPath}
|
|
||||||
selectedUser={this.state.selectedUser}
|
|
||||||
onSelectUser={(x) => this.setState({selectedUser: x})}
|
|
||||||
data={data}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
// @flow
|
||||||
|
// A frontend for visualizing Contribution Graphs
|
||||||
|
|
||||||
|
import React, {Component} from "react";
|
||||||
|
|
||||||
|
type Props = {};
|
||||||
|
type State = {};
|
||||||
|
|
||||||
|
export class GraphExplorer extends Component<Props, State> {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>Graph Explorer</h1>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue