update state after adding, updating or deleting a site

assets/src/js/components/SiteSettings.js

@@ -31,25 +31,27 @@ class SiteSettings extends Component {
             return;
         }
 
-        Client.request(`/sites/${this.props.site.id}`, {
+        let site = this.props.site;
+        Client.request(`/sites/${site.id}`, {
             method: "DELETE",
-          }).then((r) => {
-              console.log(r)
+          }).then((d) => {
+              this.props.onDelete(site)
           })
     }
 
     @bind 
     onSubmit(evt) {
         evt.preventDefault();
+        let site = this.props.site;
        
         Client.request('sites', {
             method: "POST",
             data: {
-              id: this.props.site.id,
-              name: this.props.site.name,
+              id: site.id,
+              name: site.name,
             }
-          }).then((r) => {
-              console.log(r)
+          }).then((d) => {
+              this.props.onUpdate(d)
           })
 
     }

assets/src/js/pages/dashboard.js

@@ -23,7 +23,7 @@ class Dashboard extends Component {
       before: 0,
       after: 0,
       isPublic: document.cookie.indexOf('auth') < 0,
-      site: { id: 0, name: "Default site"},
+      site: { id: 0 },
       sites: [],
       settingsOpen: false,
     }
@@ -37,7 +37,12 @@ class Dashboard extends Component {
   fetchSites() {
     Client.request(`sites`)
     .then((data) => { 
-      this.setState({sites: data})
+      // TODO: Account for no sites here
+      // TODO: Get selected site from localstorage
+      this.setState({
+        sites: data, 
+        site: data[0] 
+      })
     })
   }
 
@@ -60,10 +65,35 @@ class Dashboard extends Component {
   }
 
   @bind 
-  changeSite(site) {
+  changeSelectedSite(site) {
     this.setState({site: site})
   }
 
+  @bind
+  updateSite(site) {
+    let updated = false;
+    let newSites = this.state.sites.map((s) => {
+      if(s.id != site.id) {
+        return s;
+      }
+
+      updated = true;
+      return site;
+    })
+
+    if(!updated) {
+      newSites.push(site);
+    }
+
+    this.setState({sites: newSites, site: site})
+  }
+
+  @bind 
+  deleteSite(site) {
+    let newSites = this.state.sites.filter((s) => (s.id != site.id))
+    this.setState({ sites: newSites, site: newSites[0] })
+  }
+
 
   render(props, state) {
     // only show logout link if this dashboard is not public
@@ -72,13 +102,14 @@ class Dashboard extends Component {
     );
 
     return (
-    <div class="app-page wrapper animated fadeInUp delayed_02s">
+  <div class="app-page ">
+     <div class="wrapper animated fadeInUp delayed_02s">
 
       <header class="section">
         <nav class="main-nav">
             <ul>
               <li class="logo"><a href="/">Fathom</a></li>
-              <SiteSwitcher sites={state.sites} selectedSite={state.site} onChange={this.changeSite} onAdd={this.openSiteSettings} />
+              <SiteSwitcher sites={state.sites} selectedSite={state.site} onChange={this.changeSelectedSite} onAdd={this.openSiteSettings} />
               <Gearwheel onClick={this.openSiteSettings} visible={!state.isPublic} />
               <li class="visitors"><Realtime /></li>
           </ul>
@@ -113,8 +144,9 @@ class Dashboard extends Component {
 
       <footer class="section"></footer>
 
-      <SiteSettings visible={state.settingsOpen} onClose={this.closeSiteSettings} site={state.site} />
     </div>
+    <SiteSettings visible={state.settingsOpen} onClose={this.closeSiteSettings} onUpdate={this.updateSite} onDelete={this.deleteSite} site={state.site} />
+  </div>
   )}
 }
 

assets/src/sass/styles.scss

@@ -42,7 +42,7 @@ body {
 }
 
 .app-page {
-  &.wrapper { max-width: 1180px; margin: 0 auto; text-align: left; }
+  .wrapper { max-width: 1180px; margin: 0 auto; text-align: left; }
   .section { margin-bottom: 32px; }
   header {}
   section {}

pkg/api/sites.go

@@ -28,7 +28,8 @@ func (api *API) SaveSiteHandler(w http.ResponseWriter, r *http.Request) error {
 		return err
 	}
 
-	if s.TrackingID == "" {
+	// generate tracking ID if this is a new site
+	if s.ID == 0 && s.TrackingID == "" {
 		s.TrackingID = randomString(8)
 	}