switched existing views to pure-React

openstates · Jul 18, 2019 · 70104fa · 70104fa
1 parent ab8b7bd
commit 70104fa
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 148 deletions.
diff --git a/bobsled2/templates/base.html b/bobsled2/templates/base.html
@@ -40,8  40,6 @@
 
 <div data-hook="app">
 </div>
-{% block body %}
-{% endblock %}
 
 <footer class="footer">
 </footer>

diff --git a/bobsled2/templates/index.html b/bobsled2/templates/index.html
diff --git a/bobsled2/templates/task_overview.html b/bobsled2/templates/task_overview.html
diff --git a/bobsled2/web.py b/bobsled2/web.py
@@ -1,7  1,8 @@
 import attr
 from starlette.applications import Starlette
 from starlette.templating import Jinja2Templates
 from starlette.staticfiles import StaticFiles
-from starlette.responses import RedirectResponse
 from starlette.responses import RedirectResponse, JSONResponse
 import uvicorn
 
 from .base import Status
@@ -12,24  13,29 @@
 app = Starlette(debug=True)
 app.mount('/static', StaticFiles(directory='static'), name='static')
 
 @app.route("/")
 @app.route('/task/{task_name}')
 async def index(request):
     return templates.TemplateResponse("base.html", {
         "request": request
     })
 
-@app.route('/')
-async def homepage(request):
-    return templates.TemplateResponse('index.html', {
-        'request': request,
-        'tasks': bobsled.tasks.get_tasks(),
-        'runs': bobsled.run.get_runs(status=Status.Running),
 
 @app.route('/api/index')
 async def api_index(request):
     return JSONResponse({
         'tasks': [attr.asdict(t) for t in bobsled.tasks.get_tasks()],
         'runs': [attr.asdict(r) for r in bobsled.run.get_runs(status=Status.Running)],
     })
 
 
-@app.route('/task/{task_name}')
 @app.route('/api/task/{task_name}')
 async def task_overview(request):
     task_name = request.path_params['task_name']
     task = bobsled.tasks.get_task(task_name)
-    return templates.TemplateResponse('task_overview.html', {
-        'request': request,
-        "task": task,
-        "runs": bobsled.run.get_runs(task_name=task_name)
     return JSONResponse({
         "task": attr.asdict(task),
         "runs": [attr.asdict(r) for r in bobsled.run.get_runs(task_name=task_name)]
     })
 
 

diff --git a/js/App.js b/js/App.js
@@ -5,51  5,145 @@ import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 function App() {
   return (
     <Router>
-      <div>
-        <Header />
-
-        <Route exact path="/" component={Home} />
-        <Route path="/about" component={About} />
-        <Route path="/topics" component={Topics} />
-      </div>
       <Route exact path="/" component={Home} />
       <Route path="/task/:task_name" component={TaskPage} />
     </Router>
   );
 }
 
-function Home() {
-  return <h2>Home</h2>;
-}
 
-function About() {
-  return <h2>About</h2>;
-}
 class Home extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       tasks: []
     };
   }
 
   componentDidMount() {
     fetch("/api/index")
       .then(response => response.json())
       .then(data => this.setState(data));
   }
 
   render() {
     let rows = this.state.tasks.map(task => {
       return (<tr key={task.name}>
 
-function Topic({ match }) {
-  return <h3>Requested Param: {match.params.id}</h3>;
         <td><Link to={ "/task/"   task.name }>{ task.name }</Link></td>
         <td>{ task.tags }</td>
         <td>{ task.enabled ? "yes" : "no" }</td>
       </tr>
       );
     });
 
     return (
       <section className="section">
       <div className="container">
 
       <table className="table">
       <thead>
           <tr>
             <th>Task</th>
             <th>Tags</th>
             <th>Enabled</th>
           </tr>
       </thead>
       <tbody>
         { rows }
       </tbody>
       </table>
 
       </div>
       </section>
     )
   }
 }
 
-function Topics({ match }) {
-  return (
-    <div>
-      <h2>Topics</h2>
-
-      <ul>
-        <li>
-          <Link to={`${match.url}/components`}>Components</Link>
-        </li>
-        <li>
-          <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
-        </li>
-      </ul>
-
-      <Route path={`${match.path}/:id`} component={Topic} />
-      <Route
-        exact
-        path={match.path}
-        render={() => <h3>Please select a topic.</h3>}
-      />
 class TaskPage extends React.Component {
   constructor(props) {
     super(props);
     console.log(this.props.match.params);
     this.state = {
       task_name: this.props.match.params.task_name,
       task: {},
       runs: []
     };
   }
 
   componentDidMount() {
     fetch("/api/task/"   this.state.task_name)
       .then(response => response.json())
       .then(data => this.setState(data));
   }
 
   render() {
     let rows = this.state.runs.map(run =>
       <tr>
         <td>{ run.uuid }</td>
         <td>{ run.status }</td>
         <td>{ run.start }</td>
         <td>{ run.end }</td>
       </tr>
     );
     return (
     <section className="section">
     <div className="container">
 
       <h1 className="title is-2"> { this.state.task.name } </h1>
 
       <div className="columns">
 
       <div className="column is-one-quarter">
         <table className="table">
         <tbody>
         <tr>
           <th>Image</th>
           <td>{ this.state.task.image }</td>
         </tr>
         <tr>
           <th>Entrypoint</th>
           <td>{ this.state.task.entrypoint }</td>
         </tr>
         <tr>
           <th>Memory</th>
           <td>{ this.state.task.memory }</td>
         </tr>
         <tr>
           <th>Tags</th>
           <td>{ this.state.task.tags }</td>
         </tr>
         <tr>
           <th>Enabled</th>
           <td>{ this.state.task.enabled ? "yes" : "no" }</td>
         </tr>
 
         </tbody>
         </table>
       </div>
 
       <div className="column">
         <h3 className="title is-3">Recent Runs</h3>
         <table className="table">
           <thead>
             <tr>
               <th>UUID</th>
               <th>Status</th>
               <th>Start</th>
               <th>End</th>
             </tr>
           </thead>
           <tbody>
             {rows}
           </tbody>
         </table>
       </div>
 
       </div>
     </div>
-  );
     </section>
     );
   }
 }
 
 function Header() {