navigate to another URL for location admin

components/Admin/Admin.js

@@ -14,16 +14,14 @@ class Admin extends React.Component {
       selectedCategories: [],
       matchingSearchLocations: null,
       matchingCategoryLocations: null,
-      showEditPage: false,
-      currentLocation: null,
     }
   }
 
   componentWillMount() {
     fetchLocations()
       .then(locations => {
         this.setState({ locations })
-    })
+      })
   }
 
   handleSearch = (event) => {
@@ -61,18 +59,12 @@ class Admin extends React.Component {
     })
   }
 
-  renderEditPage = (location) => {
-    this.setState({ showEdidtPage: true, currentLocation: location })
-  }
-
   render() {
     const {
       locations,
       selectedCategories,
       matchingSearchLocations,
-      matchingCategoryLocations,
-      showEditPage,
-      currentLocation
+      matchingCategoryLocations
     } = this.state
 
     let filteredLocations = null
@@ -97,10 +89,7 @@ class Admin extends React.Component {
           onNewFacility={this.handleNewFacility}
           onCategoryFilter={this.handleCategoryFilter}
         />
-        {showEditPage ? 
-          <LocationEdit location={currentLocation}/> :
-          <AdminLocationList locations={filteredLocations || locations} editLink={this.renderEditPage} />
-        }
+        <AdminLocationList locations={filteredLocations || locations} />
       </div>
     )
   }

components/AdminLocationList/AdminLocationList.js

@@ -4,13 +4,12 @@ import AdminLocationRow from '../AdminLocationRow'
 
 const AdminLocationList = (props) => (
   <div className={s.column}>
-    {props.locations.map((loc) => <AdminLocationRow location={loc} editLink={props.editLink} /> )}
+    {props.locations.map((loc, i) => (
+      <AdminLocationRow
+        key={`location-${i}`}
+        location={loc} />)
+    )}
   </div>
 )
 
-AdminLocationList.propTypes = {
-  name: PropTypes.string.isRequired,
-  iconClass: PropTypes.string.isRequired,
-}
-
 export default AdminLocationList

components/AdminLocationRow/AdminLocationRow.js

@@ -2,31 +2,38 @@ import React, { PropTypes } from 'react'
 import s from './AdminLocationRow.css'
 import icons from '../../icons/css/icons.css'
 
-import ServiceStatus from '../ServiceStatus'
+import Link from '../Link'
 
-const AdminLocationRow = (props) => (
-  <li className={s.location} key={`location-${props.location.id}`}>
-    <a onClick={() => props.editLink(props.location)} className={s.locationLink} title={`Click to edit ${props.location.name}`}>
-      <div>
-        <div>
-          <p className={s.locationName}>{props.location.name}</p>
-        </div>
+const AdminLocationRow = (props) => {
+  const { location } = props
+
+  return (
+    <li
+      className={s.location}
+      key={`location-${location.id}`}
+    >
+      <Link
+        to={`/admin/locations/${location.id}`}
+        className={s.locationLink}
+        title={`Click to edit ${props.location.name}`}
+      >
+        <p className={s.locationName}>{location.name}</p>
         <div className={s.locationBox}>
           <div className={s.locationInfo}>
             <span className={s.locationAddress}>
-              {`${props.location.physical_address.address_1}, ${props.location.physical_address.city}`}
+              {`${location.physical_address.address_1}, ${location.physical_address.city}`}
             </span>
             <div className={s.categoryIcons}>
-              <span><i className={'category-icon ' + icons.iconHome}></i></span>
+              <i className={`category-icon ${icons.iconHome}`}></i>
             </div>
           </div>
           <div className="location-item-box-caret">
             <i className={`${icons.iconRightOpen2} s.rightCaret`}></i>
           </div>
         </div>
-      </div>
-    </a>
-  </li>
-)
+      </Link>
+    </li>
+  )
+}
 
 export default AdminLocationRow

components/LocationEdit/LocationEdit.js

@@ -21,7 +21,6 @@ class LocationEdit extends React.Component{
   }
 
   render() {
-    console.log(this.state.location)
     return (
       <div>
       <div className={s.editBox}>
@@ -46,22 +45,22 @@ class LocationEdit extends React.Component{
             <span className={s.addressLineOneLabel}>Address </span>
             <input
               type="text"
-              value={this.state.location.physical_address.address_1}
+              value={this.state.location.physicalAddress.address1}
               onChange={this.handleChange}
             />
           </div>
           <div className={s.addressCity}>
             <span className={s.addressCityLabel}>City </span>
             <input
               type="text"
-              value={this.state.location.physical_address.city}
+              value={this.state.location.physicalAddress.city}
               onChange={this.handleChange}
             />
           </div>
         </div>
         <div className={s.servicesBox}>
           <span className={s.servicesBoxLabel}>Services </span>
-          {(this.state.location.services || []).map((obj) => < ServiceEdit service={obj} changeState={this.handleChange} /> )}
+          {(this.state.location.services || []).map((obj) => <ServiceEdit service={obj} changeState={this.handleChange} /> )}
         </div>
         <div className={s.loginSubmit}>
           <button type="button" onClick={this.handleSubmit}>Login</button>

components/ServiceEdit/ServiceEdit.js

@@ -32,7 +32,7 @@ class ServiceEdit extends React.Component{
           <span className={s.applicationLabel}>Application Process </span>
           <input
             type="text"
-            value={this.props.service.application_process}
+            value={this.props.service.applicationProcess}
             onChange={this.props.handleChange}
           />
         </div>

main.js

@@ -19,6 +19,7 @@ import { Provider } from 'react-redux';
 import store from './core/store';
 import router from './core/router';
 import history from './core/history';
+
 let routes = require('./routes.json'); // Loaded with utils/routes-loader.js
 const container = document.getElementById('container');
 

pages/admin/location.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import { fetchLocation } from '../../core/firebaseApi'
+import camelize from 'camelize'
+
+import icons from '../../icons/css/icons.css'
+
+import Layout from '../../components/Layout'
+import LocationEdit from '../../components/LocationEdit'
+
+class AdminLocationPage extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      location: null,
+    }
+  }
+
+  componentWillMount() {
+    const match = this.props.route.pattern.exec(window.location.pathname)
+    const locationId = match[1]
+
+    fetchLocation(locationId)
+      .then(location => {
+        this.setState({ location: camelize(location) })
+      })
+  }
+
+  render() {
+    const { location } = this.state
+
+    return (
+      <Layout admin>
+        {location ?
+          <LocationEdit location={location} /> :
+          "Loading..."}
+      </Layout>
+    )
+  }
+}
+
+export default AdminLocationPage

routes.json

@@ -31,6 +31,10 @@
     "path": "/admin",
     "page": "./pages/admin"
   },
+  {
+    "path": "/admin/locations/:id",
+    "page": "./pages/admin/location"
+  },
   {
     "path": "/feedback",
     "page": "./pages/feedback"