switch rooms

src/components/chat/RoomList.js

@@ -8,7 +8,7 @@ const RoomList = ({
   const displayRoomName = (passphrase) => {
     // 'OneTwoThreeFourFive' => 'One Two Three'
     return passphrase.replace(/([A-Z])/g, '_$1').slice(1).split('_').slice(0, 3).join(' ');
-  }
+  };
 
   // Append the current room to our room list if it isn't there already
   let roomList = JSON.parse( localStorage.getItem('roomList') || '[]' );
@@ -18,34 +18,25 @@ const RoomList = ({
     localStorage.setItem('roomList', JSON.stringify(roomList));
   }
 
-  const styleRoomList = () => {
-    return {
-      display: 'flex',
-      flexDirection: 'column',
-      width: '100%',
-      marginTop: '48px'
-    };
+  const setPassphrase = (passphrase) => {
+    console.log('setPassphrase() -- TODO: Disconnect the WebSocket, change the current URL hash, auth again, connect via WebSocket');
   };
 
-  const styleRoomName = (passphrase) => {
-    const lightPurple = '#aa6fe3';
-    return {
-      color: passphrase === passphraseFromUrlHash ? lightPurple : 'white',
-      width: '100%'
-    }
-  }
+  const changeRoom = (passphrase) => {
+    // just update fragment and reload page for now
+    window.location.assign(window.location.origin + `/#${passphrase}`);
+    window.location.reload(true);
+  };
 
-  const setPassphrase = (passphrase) => {
-    console.log('setPassphrase() -- TODO: Disconnect the WebSocket, change the current URL hash, auth again, connect via WebSocket');
-  }
+  roomList.sort((a, b) => {a > b;});
 
   return (
-    <div style={styleRoomList()}>
+    <div className="room-list">
       <h4>Chat Rooms</h4>
       <ul>
         {roomList.map((passphrase) => {
           return (
-            <li key={passphrase} style={styleRoomName(passphrase)} onClick={() => setPassphrase(passphrase)}>
+            <li className={passphrase === passphraseFromUrlHash ? "current-room": ""} key={passphrase} onClick={() => changeRoom(passphrase)}>
               {displayRoomName(passphrase)}
             </li>
           );
@@ -55,8 +46,7 @@ const RoomList = ({
   );
 };
 
-RoomList.propTypes = {
-};
+RoomList.propTypes = {};
 
 const mapStateToProps = (reduxState) => ({
 });

src/components/modals/SharingModal.js

@@ -10,7 +10,7 @@ import { FaShareAltSquare } from 'react-icons/fa';
 
 const getWindowLocationHref = () => {
   if (Capacitor.isNativePlatform()) {
-    return 'https://' + window.location.href.split('//')[1]  // http -> https
+    return 'https://' + window.location.href.split('//')[1];  // http -> https
   } else {
     return window.location.href;
   }

src/static/sass/_layout.scss

@@ -97,6 +97,38 @@ header {
     }
   }
 
+  $light-purple: #aa6fe3;
+
+  .room-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-top: 48px;
+
+    ul {
+      li {
+        width: 100%;
+        color: white;
+        cursor: pointer;
+        font-size: 1.2em;
+
+        &:hover {
+          text-decoration: underline;
+        }
+
+        &.current-room {
+          color: $light-purple;
+          cursor: default;
+          font-weight: bold;
+
+          &:hover {
+            text-decoration: none;
+          }
+        }
+      }
+    }
+  }
+
   .logo-container {
     display: flex;
     justify-content: space-between;

src/store/epics/chatEpics.js

@@ -33,7 +33,7 @@ import { Capacitor } from '@capacitor/core';
 let wsUrl = `${window.location.origin.replace('http', 'ws')}/api/ws/messages/all`;
 if (Capacitor.isNativePlatform()) {
   // wsUrl = 'wss://www.leapchat.org/api/ws/messages/all'
-  wsUrl = 'ws://10.0.2.2:8080/api/ws/messages/all'
+  wsUrl = 'ws://10.0.2.2:8080/api/ws/messages/all';
 }
 
 export const chatHandler = new ChatHandler(wsUrl);

src/utils/sessions.js

@@ -15,7 +15,7 @@ if (Capacitor.isNativePlatform()) {
 //
 // From https://stackoverflow.com/a/36183085
 const b64toBlob = (base64, type = 'application/octet-stream') =>
-      fetch(`data:${type};base64,${base64}`).then(res => res.blob());
+  fetch(`data:${type};base64,${base64}`).then(res => res.blob());
 
 async function connectWithAuthRequest(initiateConnection, mID, secretKey, isNewPassphrase) {
   let response, message;