Merge pull request #3007 from urbit/la/spa-tile-fixes

landscape-js: make clock and weather load data properly

pkg/arvo/app/weather.hoon

@@ -39,9 +39,14 @@
   ++  on-watch
     |=  =wire
     ^-  (quip card _this)
-    ?.  ?=([%weathertile ~] wire)  (on-watch:def wire)
+    ?.  ?=([%all ~] wire)  (on-watch:def wire)
+    =/  jon
+      %-  pairs:enjs:format
+      :~  [%weather data]
+          [%location s+location]
+      ==
     :_  this
-    [%give %fact ~ %json !>(data)]~
+    [%give %fact ~ %json !>(jon)]~
   ::
   ++  on-arvo
     |=  [=wire =sign-arvo]
@@ -74,14 +79,22 @@
   =/  str=@t  +.jon
   =/  req=request:http  (request-darksky str)
   =/  out  *outbound-config:iris
-  =/  lismov  [%pass /[(scot %da now.bol)] %arvo %i %request req out]~
+  =/  lismov=(list card)
+    [%pass /[(scot %da now.bol)] %arvo %i %request req out]~
   ?~  timer
-    :-  [[%pass /timer %arvo %b %wait (add now.bol ~h3)] lismov]
+    :-  %+  weld  lismov
+        ^-  (list card)
+        :~  [%pass /timer %arvo %b %wait (add now.bol ~h3)]
+            [%give %fact ~[/all] %json !>((frond:enjs:format %location jon))]
+        ==
     %=  state
       location  str
       timer    `(add now.bol ~h3)
     ==
-  [lismov state(location str)]
+  :_  state(location str)
+  %+  weld  lismov
+  ^-  (list card)
+  [%give %fact ~[/all] %json !>((frond:enjs:format %location jon))]~
 ::
 ++  request-darksky
   |=  location=@t
@@ -107,11 +120,17 @@
   ?>  ?=(%o -.u.ujon)
   ?:  (gth 200 status-code.response-header.response)
     [~ state]
-  =/  jon=json  %-  pairs:enjs:format  :~
-    currently+(~(got by p.u.ujon) 'currently')
-    daily+(~(got by p.u.ujon) 'daily')
-  ==
-  :-  [%give %fact ~[/weathertile] %json !>(jon)]~
+  =/  error  (~(get by p.u.ujon) 'error')
+  ?^  error
+    ~&  "fetching weather failed: {<u.error>}"
+    [~ state]
+  =/  jon=json
+    %+  frond:enjs:format  %weather
+    %-  pairs:enjs:format
+    :~  [%currently (~(got by p.u.ujon) 'currently')]
+        [%daily (~(got by p.u.ujon) 'daily')]
+    ==
+  :-  [%give %fact ~[/all] %json !>(jon)]~
   %=  state
     data  jon
     time  now.bol

pkg/interface/src/api/launch.js

@@ -25,12 +25,8 @@ class PrivateHelper extends BaseApi {
     this.launchAction({ 'change-is-shown': { name, isShown }});
   }
 
-  clockAction(latlng) {
-    return this.action('clock', 'json', latlng);
-  }
-
   weatherAction(latlng) {
-    return this.action('weather', 'json', latlng);
+    this.action('weather', 'json', latlng);
   }
 }
 
@@ -49,9 +45,7 @@ export default class LaunchApi {
       changeIsShown: helper.launchChangeIsShown.bind(helper)
     };
 
-    this.clock = { action: helper.clockAction.bind(helper) };
-
-    this.weather ={ action: helper.weatherAction.bind(helper) };
+    this.weather = helper.weatherAction.bind(helper);
   }
 }
 

pkg/interface/src/apps/launch/app.js

@@ -33,7 +33,6 @@ export default class LaunchApp extends React.Component {
 
     this.subscription = new LaunchSubscription(this.store, this.api, channel);
     this.subscription.start();
-    window.api = this.api;
   }
 
   componentWillUnmount() {
@@ -53,6 +52,8 @@ export default class LaunchApp extends React.Component {
           tiles={state.launch.tiles}
           tileOrdering={state.launch.tileOrdering}
           api={this.api}
+          location={state.location}
+          weather={state.weather}
         />
       </div>
     );

pkg/interface/src/apps/launch/components/tiles.js

@@ -25,9 +25,18 @@ export default class Tiles extends React.PureComponent {
         );
       } else if ('custom' in tile.type) {
         if (key === 'weather') {
-          return (<WeatherTile key={key} api={props.api} />);
+          return (
+            <WeatherTile
+              key={key}
+              api={props.api}
+              weather={props.weather} 
+              location={props.location}
+            />
+          );
         } else if (key === 'clock') {
-          return (<ClockTile key={key} />);
+          return (
+            <ClockTile key={key} location={props.location} />
+          );
         }
       } else {
         return <CustomTile key={key} />;
@@ -35,9 +44,7 @@ export default class Tiles extends React.PureComponent {
     });
 
     return (
-      <React.Fragment>
-      {tiles}
-      </React.Fragment>
+      <React.Fragment>{tiles}</React.Fragment>
     );
   }
 }

pkg/interface/src/apps/launch/components/tiles/clock.js

@@ -167,8 +167,15 @@ class Clock extends React.Component {
     this.animate();
   }
 
+  componentWillUnmount() {
+    if (this.animationTimer) {
+      window.clearTimeout(this.animationTimer);
+    }
+  }
+
   animate() {
-    window.setTimeout(() => window.requestAnimationFrame(this.animate), 1000);
+    this.animationTimer = 
+      window.setTimeout(() => window.requestAnimationFrame(this.animate), 1000);
 
     const { state } = this;
     const time = new Date();
@@ -400,7 +407,7 @@ export default class ClockTile extends React.Component {
   }
 
   render() {
-    const data = this.props.data ? this.props.data : {};
+    const data = this.props.location ? this.props.location : {};
     return this.renderWrapper((
       <Clock data={data} />
     ));

pkg/interface/src/apps/launch/components/tiles/weather.js

@@ -7,13 +7,12 @@ export default class WeatherTile extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      latlng: '',
+      latlong: '',
       manualEntry: false,
       error: false
     };
-
-    this.api = props.api;
   }
+
   // geolocation and manual input functions
   locationSubmit() {
     navigator.geolocation.getCurrentPosition((res) => {
@@ -23,8 +22,7 @@ export default class WeatherTile extends React.Component {
       }, (err) => {
         console.log(err);
       }, { maximumAge: Infinity, timeout: 10000 });
-      // this.api.clock.action(latlng);
-      this.api.weather.action(latlng);
+      this.props.api.weather(latlng);
       this.setState({ manualEntry: !this.state.manualEntry });
     });
   }
@@ -39,8 +37,7 @@ export default class WeatherTile extends React.Component {
       this.setState({ latlng }, (err) => {
       console.log(err);
       }, { maximumAge: Infinity, timeout: 10000 });
-      // this.api.clock.action(latlng);
-      this.api.weather.action(latlng);
+      this.props.api.weather(latlng);
       this.setState({ manualEntry: !this.state.manualEntry });
     } else {
       this.setState({ error: true });
@@ -145,11 +142,13 @@ export default class WeatherTile extends React.Component {
         </p>;
     }
     if (location.protocol === 'https:') {
-      secureCheck = <a
-        className="black white-d f9 absolute pointer"
-        style={{ right: 8, top: 8 }}
-        onClick={() => this.locationSubmit()}
-                    >Detect -></a>;
+      secureCheck = (
+        <a className="black white-d f9 absolute pointer"
+           style={{ right: 8, top: 8 }}
+           onClick={() => this.locationSubmit()}>
+          Detect ->
+        </a>
+      );
     }
     return this.renderWrapper(
       <div className={'pa2 w-100 h-100 bg-white bg-gray0-d black white-d ' +
@@ -189,9 +188,7 @@ export default class WeatherTile extends React.Component {
                   e.preventDefault();
                   this.manualLocationSubmit(e.target.value);
                 }
-}
-              }
-            />
+              }} />
             <input
               className={'bg-transparent black white-d bn pointer ' +
               'f9 flex-shrink-0 pr1'}
@@ -258,7 +255,7 @@ export default class WeatherTile extends React.Component {
   }
 
   render() {
-    const data = this.props.data ? this.props.data : {};
+    const data = this.props.weather ? this.props.weather : {};
 
     if (this.state.manualEntry === true) {
       return this.renderManualEntry();
@@ -269,8 +266,25 @@ export default class WeatherTile extends React.Component {
       return this.renderWithData(data, weatherStyle);
     }
 
+    if (this.props.location) {
+      return this.renderWrapper((
+        <div
+          className={'pa2 w-100 h-100 b--black b--gray1-d ba ' +
+          'bg-white bg-gray0-d black white-d'}>
+            <p className="f9 absolute"
+              style={{ left: 8, top: 8 }}
+            >
+              Weather
+            </p>
+          <p className="absolute w-100 flex-col f9"
+          style={{ bottom: 8, left: 8 }}
+          >
+          Loading, please check again later...
+          </p>
+        </div>
+      ));
+    }
     return this.renderNoData();
   }
 }
 
-window.weatherTile = WeatherTile;

pkg/interface/src/reducers/launch-update.js

@@ -10,6 +10,16 @@ export default class LaunchReducer {
       this.changeFirstTime(data, state);
       this.changeIsShown(data, state);
     }
+
+    const weatherData = _.get(json, 'weather', false);
+    if (weatherData) {
+      state.weather = weatherData;
+    }
+
+    const locationData = _.get(json, 'location', false);
+    if (locationData) {
+      state.location = locationData;
+    }
   }
 
   initial(json, state) {

pkg/interface/src/store/launch.js

@@ -13,9 +13,9 @@ export default class LaunchStore extends BaseStore {
         firstTime: false,
         tileOrdering: [],
         tiles: {},
-        weather: {},
-        clock: {}
-      }
+      },
+      location: '',
+      weather: {}
     };
   }
 

pkg/interface/src/subscription/launch.js

@@ -3,7 +3,7 @@ import BaseSubscription from './base';
 export default class LaunchSubscription extends BaseSubscription {
   start() {
     this.subscribe('/all', 'launch');
-    this.subscribe('/weathertile', 'weather');
+    this.subscribe('/all', 'weather');
   }
 }