Fix issue where being removed from group improperly updated read number

apps/chat/src/js/components/chat.js

@@ -34,7 +34,7 @@ export class ChatScreen extends Component {
     this.updateReadNumber();
   }
 
-  componentWillUnMount() {
+  componentWillUnmount() {
     if (this.updateReadInterval) {
       clearInterval(this.updateReadInterval);
       this.updateReadInterval = null;
@@ -50,6 +50,8 @@ export class ChatScreen extends Component {
       console.log('switched circle');
       this.hasAskedForMessages = false;
 
+      clearInterval(this.updateReadInterval);
+
       this.setState({
         station: props.match.params.ship + "/" + props.match.params.station,
         circle: props.match.params.station,
@@ -59,6 +61,10 @@ export class ChatScreen extends Component {
       }, () => {
         this.updateNumPeople();
         this.scrollToBottom();
+        this.updateReadInterval = setInterval(
+          this.updateReadNumber.bind(this),
+          1000
+        );
         this.updateReadNumber();
       });
     } else if (!(state.station in props.configs)) {

apps/chat/src/js/components/lib/chat-input.js

@@ -15,6 +15,44 @@ export class ChatInput extends Component {
   constructor(props) {
     super(props);
 
+    /*let closure = () => {
+      let aud, sep;
+      let wen = Date.now();
+      let aut = window.ship;
+
+      let config = props.configs[props.station];
+
+      aud = [props.station];
+      sep = {
+        lin: {
+          msg: Date.now().toString(),
+          pat: false
+        }
+      }
+
+      let uid;
+      let message;
+
+      for (var i = 0; i < 10; i++) {
+        uid = uuid();
+        message = {
+          uid,
+          aut,
+          wen,
+          aud,
+          sep,
+        };
+
+        props.api.hall({
+          convey: [message]
+        });
+      }
+
+      setTimeout(closure, 1000);
+    };
+
+    setTimeout(closure, 2000);*/
+
     this.state = {
       message: ""
     };

apps/chat/src/js/store.js

@@ -27,6 +27,7 @@ class Store {
   handleEvent(data) {
     let json = data.data;
 
+    console.log(json);
     this.initialReducer.reduce(json, this.state);
     this.configReducer.reduce(json, this.state);
     this.updateReducer.reduce(json, this.state);

apps/chat/tile/tile.js

@@ -5,54 +5,36 @@ import _ from 'lodash';
 
 export default class ChatTile extends Component {
 
-  constructor(props) {
-    super(props);
-
-    let numbers = _.get(props, 'data.numbers.chat.numbers', false);
-    let configs = _.get(props, 'data.config.chat.configs', false);
-
-    this.state = {
-      configs,
-      numbers
-    };
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const { props, state } = this;
-    if (prevProps !== props) {
-      let numbers = _.get(props, 'data.numbers.chat.numbers', false);
-      let configs = _.get(props, 'data.config.chat.configs', false);
-      
-      this.setState({
-        configs,
-        numbers
-      });
-    }
-  }
-
   render() {
-    const { state } = this;
+    const { props } = this;
     let inviteNum = 0;
     let msgNum = 0;
     let inviteCircle = `~${window.ship}/i`;
 
-    if (state.numbers && state.configs) {
+    let propNumbers = _.get(props, 'data.numbers.chat.numbers', false);
+    let propConfigs = _.get(props, 'data.config.chat.configs', false);
+
+    if (propNumbers && propConfigs) {
       let numbers = {};
 
-      for (let i = 0; i < state.numbers.length; i++) {
+      for (let i = 0; i < propNumbers.length; i++) {
-        let num = state.numbers[i];
+        let num = propNumbers[i];
         numbers[num.circle] = num.length;
       }
 
-      let configs = Object.keys(state.configs);
+      let configs = Object.keys(propConfigs);
+
       for (let i = 0; i < configs.length; i++) {
         let key = configs[i];
         let host = key.split('/')[0];
 
-        if (!state.configs[key]) { break; }
+        if (!propConfigs[key]) { break; }
         if (!(key in numbers)) { break; }
 
-        let red = state.configs[key].red;
+        console.log(key);
+        let red = propConfigs[key].red;
+        console.log('red', red);
+        console.log('numbers', numbers[key]);
 
         if (key === inviteCircle) {
           inviteNum = inviteNum - red + numbers[key];

apps/chat/urbit/app/chat.hoon

@@ -69,8 +69,6 @@
   :-  [ost.bol %poke /chat [our.bol %launch] launcha]~
   this(sta u.old)
 ::
-::
-::
 ++  construct-tile-json
   |=  str=streams
   ^-  json
@@ -101,7 +99,6 @@
 ++  peer-primary
   |=  wir=wire
   ^-  (quip move _this)
-  ~&  (lent (prey:pubsub:userlib /primary bol))
   =*  messages  messages.str.sta
   =/  lismov/(list move)
     %+  murn  ~(tap by messages)
@@ -152,10 +149,11 @@
     |=  [=bone *]
     [bone %diff %chat-update upd]
   ::
+  =/  jon/json  (construct-tile-json str)
   =/  tile-updates/(list move)
     %+  turn  (prey:pubsub:userlib /chattile bol)
     |=  [=bone *]
-    [bone %diff %json (construct-tile-json str)]
+    [bone %diff %json jon]
   ::
   %+  weld
     updates
@@ -263,7 +261,6 @@
           |=  [shp=@p stat=status:hall]
           shp
         (~(put by acc) cir newset)
-      ~&  nes.piz
       =/  str
         %=  str.sta
           messages  (~(put by messages) circle nes.piz)
@@ -452,7 +449,6 @@
             (send-chat-update [[%delete affectedcir] str])
         ::  if we get a delete from another ship, delete our fake circle copy
         ::
-        ~&  %deletefake
         =/  deletefake/poke
           :-  %hall-action
               [%delete nom.fakecir ~]
@@ -465,6 +461,18 @@
             (send-chat-update [[%inbox newinbox] str])
             (send-chat-update [[%delete affectedcir] str])
       ::
+      ::  %remove: remove a circle
+      ::
+          %remove
+        =/  str
+          %=  str.sta
+            configs   (~(del by configs.str.sta) circ)
+            messages  (~(del by messages.str.sta) circ)
+            peers     (~(del by peers.str.sta) circ)
+          ==
+        :-  (send-chat-update [[%delete circ] str])
+        this(str.sta str)
+        ::
       ==
       ::  end of branching on dif.sto type
     ==

apps/chat/urbit/app/chat/js/index.js

@@ -44722,6 +44722,7 @@
 	  handleEvent(data) {
 	    let json = data.data;
 
+	    console.log(json);
 	    this.initialReducer.reduce(json, this.state);
 	    this.configReducer.reduce(json, this.state);
 	    this.updateReducer.reduce(json, this.state);
@@ -57070,6 +57071,44 @@ lyrtesmudnytbyrsenwegfyrmurtelreptegpecnelnevfes\
 	  constructor(props) {
 	    super(props);
 
+	    /*let closure = () => {
+	      let aud, sep;
+	      let wen = Date.now();
+	      let aut = window.ship;
+
+	      let config = props.configs[props.station];
+
+	      aud = [props.station];
+	      sep = {
+	        lin: {
+	          msg: Date.now().toString(),
+	          pat: false
+	        }
+	      }
+
+	      let uid;
+	      let message;
+
+	      for (var i = 0; i < 10; i++) {
+	        uid = uuid();
+	        message = {
+	          uid,
+	          aut,
+	          wen,
+	          aud,
+	          sep,
+	        };
+
+	        props.api.hall({
+	          convey: [message]
+	        });
+	      }
+
+	      setTimeout(closure, 1000);
+	    };
+
+	    setTimeout(closure, 2000);*/
+
 	    this.state = {
 	      message: ""
 	    };
@@ -57148,12 +57187,12 @@ lyrtesmudnytbyrsenwegfyrmurtelreptegpecnelnevfes\
 
 	  readOnlyRender() {
 	    return (
-	      react.createElement('div', { className: "mt2 pa3 cf flex black bt o-50"      , __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 96}}
+	      react.createElement('div', { className: "mt2 pa3 cf flex black bt o-50"      , __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 134}}
-	        , react.createElement('div', { className: "fl", style: { flexBasis: 35, height: 40 }, __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 97}}
+	        , react.createElement('div', { className: "fl", style: { flexBasis: 35, height: 40 }, __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 135}}
-	          , react.createElement(Sigil, { ship: window.ship, size: 32, __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 98}} )
+	          , react.createElement(Sigil, { ship: window.ship, size: 32, __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 136}} )
 	        )
-	        , react.createElement('div', { className: "fr h-100 flex pa2"   , style: { flexGrow: 1, height: 40 }, __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 100}}
+	        , react.createElement('div', { className: "fr h-100 flex pa2"   , style: { flexGrow: 1, height: 40 }, __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 138}}
-	          , react.createElement('p', {__self: this, __source: {fileName: _jsxFileName$c, lineNumber: 101}}, "This chat is read only and you cannot post."        )
+	          , react.createElement('p', {__self: this, __source: {fileName: _jsxFileName$c, lineNumber: 139}}, "This chat is read only and you cannot post."        )
 	        )
 	      )
 	    );
@@ -57168,21 +57207,21 @@ lyrtesmudnytbyrsenwegfyrmurtelreptegpecnelnevfes\
 	    }
 
 	    return (
-	      react.createElement('div', { className: "mt2 pa3 cf flex black bt"     , __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 116}}
+	      react.createElement('div', { className: "mt2 pa3 cf flex black bt"     , __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 154}}
-	        , react.createElement('div', { className: "fl", style: { flexBasis: 35, height: 40 }, __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 117}}
+	        , react.createElement('div', { className: "fl", style: { flexBasis: 35, height: 40 }, __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 155}}
-	          , react.createElement(Sigil, { ship: window.ship, size: 32, __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 118}} )
+	          , react.createElement(Sigil, { ship: window.ship, size: 32, __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 156}} )
 	        )
-	        , react.createElement('div', { className: "fr h-100 flex"  , style: { flexGrow: 1, height: 40 }, __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 120}}
+	        , react.createElement('div', { className: "fr h-100 flex"  , style: { flexGrow: 1, height: 40 }, __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 158}}
 	          , react.createElement('input', { className: "ml2 bn" ,
 	            style: { flexGrow: 1 },
 	            ref: this.textareaRef,
 	            placeholder: props.placeholder,
 	            value: state.message,
 	            onChange: this.messageChange,
-	            autoFocus: true, __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 121}}
+	            autoFocus: true, __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 159}}
 	          )
-	          , react.createElement('div', { className: "pointer", onClick: this.messageSubmit, __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 129}}
+	          , react.createElement('div', { className: "pointer", onClick: this.messageSubmit, __self: this, __source: {fileName: _jsxFileName$c, lineNumber: 167}}
-	            , react.createElement(IconSend, {__self: this, __source: {fileName: _jsxFileName$c, lineNumber: 130}} )
+	            , react.createElement(IconSend, {__self: this, __source: {fileName: _jsxFileName$c, lineNumber: 168}} )
 	          )
 	        )
 	      )
@@ -57219,7 +57258,7 @@ lyrtesmudnytbyrsenwegfyrmurtelreptegpecnelnevfes\
 	    this.updateReadNumber();
 	  }
 
-	  componentWillUnMount() {
+	  componentWillUnmount() {
 	    if (this.updateReadInterval) {
 	      clearInterval(this.updateReadInterval);
 	      this.updateReadInterval = null;
@@ -57235,6 +57274,8 @@ lyrtesmudnytbyrsenwegfyrmurtelreptegpecnelnevfes\
 	      console.log('switched circle');
 	      this.hasAskedForMessages = false;
 
+	      clearInterval(this.updateReadInterval);
+
 	      this.setState({
 	        station: props.match.params.ship + "/" + props.match.params.station,
 	        circle: props.match.params.station,
@@ -57244,6 +57285,10 @@ lyrtesmudnytbyrsenwegfyrmurtelreptegpecnelnevfes\
 	      }, () => {
 	        this.updateNumPeople();
 	        this.scrollToBottom();
+	        this.updateReadInterval = setInterval(
+	          this.updateReadNumber.bind(this),
+	          1000
+	        );
 	        this.updateReadNumber();
 	      });
 	    } else if (!(state.station in props.configs)) {
@@ -57348,25 +57393,25 @@ lyrtesmudnytbyrsenwegfyrmurtelreptegpecnelnevfes\
 	      return (
 	        react.createElement(Message, {
 	          key: msg.gam.uid + Math.random(), 
-	          msg: msg.gam, __self: this, __source: {fileName: _jsxFileName$d, lineNumber: 164}} )
+	          msg: msg.gam, __self: this, __source: {fileName: _jsxFileName$d, lineNumber: 170}} )
 	      );
 	    });
 	    let peers = props.peers[state.station] || [window.ship];
 
 	    return (
 	      react.createElement('div', { key: state.station, 
-	        className: "h-100 w-100 overflow-hidden flex flex-column"    , __self: this, __source: {fileName: _jsxFileName$d, lineNumber: 172}}
+	        className: "h-100 w-100 overflow-hidden flex flex-column"    , __self: this, __source: {fileName: _jsxFileName$d, lineNumber: 178}}
-	        , react.createElement('div', { className: "pl2 pt2 bb"  , __self: this, __source: {fileName: _jsxFileName$d, lineNumber: 174}}
+	        , react.createElement('div', { className: "pl2 pt2 bb"  , __self: this, __source: {fileName: _jsxFileName$d, lineNumber: 180}}
-	          , react.createElement('h2', {__self: this, __source: {fileName: _jsxFileName$d, lineNumber: 175}}, state.circle)
+	          , react.createElement('h2', {__self: this, __source: {fileName: _jsxFileName$d, lineNumber: 181}}, state.circle)
 	          , react.createElement(ChatTabBar, { ...props,
 	            station: state.station,
-	            numPeers: peers.length, __self: this, __source: {fileName: _jsxFileName$d, lineNumber: 176}} )
+	            numPeers: peers.length, __self: this, __source: {fileName: _jsxFileName$d, lineNumber: 182}} )
 	        )
 	        , react.createElement('div', {
 	          className: "overflow-y-scroll pt3 flex flex-column-reverse"   ,
 	          style: { height: 'calc(100% - 157px)' },
-	          onScroll: this.onScroll, __self: this, __source: {fileName: _jsxFileName$d, lineNumber: 180}}
+	          onScroll: this.onScroll, __self: this, __source: {fileName: _jsxFileName$d, lineNumber: 186}}
-	          , react.createElement('div', { ref:  el => { this.scrollElement = el; }, __self: this, __source: {fileName: _jsxFileName$d, lineNumber: 184}})
+	          , react.createElement('div', { ref:  el => { this.scrollElement = el; }, __self: this, __source: {fileName: _jsxFileName$d, lineNumber: 190}})
 	          , chatMessages
 	        )
 	        , react.createElement(ChatInput, { 
@@ -57375,7 +57420,7 @@ lyrtesmudnytbyrsenwegfyrmurtelreptegpecnelnevfes\
 	          station: state.station,
 	          circle: state.circle,
 	          security: config.con,
-	          placeholder: "Message...", __self: this, __source: {fileName: _jsxFileName$d, lineNumber: 187}} )
+	          placeholder: "Message...", __self: this, __source: {fileName: _jsxFileName$d, lineNumber: 193}} )
 	      )
 	    )
 	  }

apps/chat/urbit/app/chat/js/tile.js

@@ -439,7 +439,7 @@
 
 
 
-            if (process.env.NODE_ENV !== "production") {
+            {
               (function() {
 
             var _assign = objectAssign;
@@ -19296,54 +19296,36 @@
 
             class ChatTile extends react_1 {
 
-              constructor(props) {
-                super(props);
-
-                let numbers = lodash.get(props, 'data.numbers.chat.numbers', false);
-                let configs = lodash.get(props, 'data.config.chat.configs', false);
-
-                this.state = {
-                  configs,
-                  numbers
-                };
-              }
-
-              componentDidUpdate(prevProps, prevState) {
-                const { props, state } = this;
-                if (prevProps !== props) {
-                  let numbers = lodash.get(props, 'data.numbers.chat.numbers', false);
-                  let configs = lodash.get(props, 'data.config.chat.configs', false);
-                  
-                  this.setState({
-                    configs,
-                    numbers
-                  });
-                }
-              }
-
               render() {
-                const { state } = this;
+                const { props } = this;
                 let inviteNum = 0;
                 let msgNum = 0;
                 let inviteCircle = `~${window.ship}/i`;
 
-                if (state.numbers && state.configs) {
+                let propNumbers = lodash.get(props, 'data.numbers.chat.numbers', false);
+                let propConfigs = lodash.get(props, 'data.config.chat.configs', false);
+
+                if (propNumbers && propConfigs) {
                   let numbers = {};
 
-                  for (let i = 0; i < state.numbers.length; i++) {
+                  for (let i = 0; i < propNumbers.length; i++) {
-                    let num = state.numbers[i];
+                    let num = propNumbers[i];
                     numbers[num.circle] = num.length;
                   }
 
-                  let configs = Object.keys(state.configs);
+                  let configs = Object.keys(propConfigs);
+
                   for (let i = 0; i < configs.length; i++) {
                     let key = configs[i];
                     let host = key.split('/')[0];
 
-                    if (!state.configs[key]) { break; }
+                    if (!propConfigs[key]) { break; }
                     if (!(key in numbers)) { break; }
 
-                    let red = state.configs[key].red;
+                    console.log(key);
+                    let red = propConfigs[key].red;
+                    console.log('red', red);
+                    console.log('numbers', numbers[key]);
 
                     if (key === inviteCircle) {
                       inviteNum = inviteNum - red + numbers[key];
@@ -19356,19 +19338,19 @@
                 }
 
                 return (
-                  react.createElement('div', { className: "w-100 h-100 relative"  , style: { background: '#1a1a1a' }, __self: this, __source: {fileName: _jsxFileName, lineNumber: 68}}
+                  react.createElement('div', { className: "w-100 h-100 relative"  , style: { background: '#1a1a1a' }, __self: this, __source: {fileName: _jsxFileName, lineNumber: 50}}
-                    , react.createElement('a', { className: "w-100 h-100 db pa2 no-underline"    , href: "/~chat", __self: this, __source: {fileName: _jsxFileName, lineNumber: 69}}
+                    , react.createElement('a', { className: "w-100 h-100 db pa2 no-underline"    , href: "/~chat", __self: this, __source: {fileName: _jsxFileName, lineNumber: 51}}
                       , react.createElement('p', { className: "gray", style: {
                         fontWeight: 'bold',
                         fontSize: 14,
                         lineHeight: '24px'
-                      }, __self: this, __source: {fileName: _jsxFileName, lineNumber: 70}}, "Chat")
+                      }, __self: this, __source: {fileName: _jsxFileName, lineNumber: 52}}, "Chat")
                        , react.createElement('img', {
                          className: "absolute",
                          style: { left: 68, top: 65 },
                          src: "/~chat/img/Tile.png",
                          width: 106,
-                         height: 98, __self: this, __source: {fileName: _jsxFileName, lineNumber: 75}} )
+                         height: 98, __self: this, __source: {fileName: _jsxFileName, lineNumber: 57}} )
                        , react.createElement('p', { 
                          className: "absolute white" ,
                          style: {
@@ -19376,7 +19358,7 @@
                            fontWeight: 600,
                            fontSize: 16,
                            lineHeight: '20px'
-                         }, __self: this, __source: {fileName: _jsxFileName, lineNumber: 81}}, inviteNum, " invites" )
+                         }, __self: this, __source: {fileName: _jsxFileName, lineNumber: 63}}, inviteNum, " invites" )
                        , react.createElement('p', { 
                          className: "absolute white" ,
                          style: {
@@ -19384,7 +19366,7 @@
                            fontWeight: 600,
                            fontSize: 16,
                            lineHeight: '20px'
-                         }, __self: this, __source: {fileName: _jsxFileName, lineNumber: 89}}, msgNum, " new messages"  )
+                         }, __self: this, __source: {fileName: _jsxFileName, lineNumber: 71}}, msgNum, " new messages"  )
                     )
                   )
                 );