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:
Dandelion Mané 2018-03-05 20:09:24 -08:00 committed by GitHub
parent 5960eab6c1
commit 7ea8bdd964
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 25 deletions

View File

@ -1,19 +1,12 @@
// @flow
import React, {Component} from "react";
import data from "./data.json";
import "./App.css";
import {FileExplorer} from "./FileExplorer.js";
import {UserExplorer} from "./UserExplorer.js";
import {GraphExplorer} from "./GraphExplorer";
type AppState = {selectedPath: string, selectedUser: ?string};
class App extends Component<{}, AppState> {
constructor() {
super();
this.state = {
selectedPath: "",
selectedUser: null,
};
}
type Props = {};
type State = {};
class App extends Component<Props, State> {
render() {
return (
<div className="App" style={{backgroundColor: "#eeeeee"}}>
@ -28,19 +21,8 @@ class App extends Component<{}, AppState> {
>
<h1 style={{fontSize: "1.5em"}}>SourceCred Explorer</h1>
</header>
<FileExplorer
className="file-explorer"
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}
/>
<GraphExplorer />
</div>
);
}

View File

@ -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>
);
}
}