From 7b69c48048c9d8beb76f6b2c891fae2004d9ddeb Mon Sep 17 00:00:00 2001
From: notnull <notnull@anarchyplanet.org>
Date: Sun, 21 Jul 2019 12:47:52 -0400
Subject: [PATCH] added UI components for users and channels

---
 package-lock.json | 273 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   1 +
 src/App.js        |  41 ++++++-
 3 files changed, 313 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1af5023..d6357c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1190,6 +1190,39 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@react-bootstrap/react-popper": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@react-bootstrap/react-popper/-/react-popper-1.2.1.tgz",
+      "integrity": "sha512-4l3q7LcZEhrSkI4d3Ie3g4CdrXqqTexXX4PFT45CB0z5z2JUbaxgRwKNq7r5j2bLdVpZm+uvUGqxJw8d9vgbJQ==",
+      "requires": {
+        "babel-runtime": "6.x.x",
+        "create-react-context": "^0.2.1",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.5",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
+    "@restart/context": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+    },
+    "@restart/hooks": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.8.tgz",
+      "integrity": "sha512-0AO6p7iOqWeLu9++Qz1P0efRmA7nDT3uMx4banEUj0KZLNOBkK98zddsKtRjwBlJw2dbL/V+u5+recuCwjO/pg=="
+    },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
@@ -3397,6 +3430,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -3766,6 +3804,15 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-react-context": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
+      "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
+      "requires": {
+        "fbjs": "^0.8.0",
+        "gud": "^1.0.0"
+      }
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -4323,6 +4370,14 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
@@ -4449,6 +4504,14 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "~0.4.13"
+      }
+    },
     "end-of-stream": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@@ -5388,6 +5451,35 @@
         "bser": "^2.0.0"
       }
     },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        },
+        "promise": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+          "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+          "requires": {
+            "asap": "~2.0.3"
+          }
+        }
+      }
+    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -5791,6 +5883,11 @@
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "gzip-size": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz",
@@ -6598,6 +6695,15 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -7856,6 +7962,11 @@
         "object.assign": "^4.1.0"
       }
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -8517,6 +8628,15 @@
         "lower-case": "^1.1.1"
       }
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
     "node-forge": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
@@ -9191,6 +9311,11 @@
         "ts-pnp": "^1.0.0"
       }
     },
+    "popper.js": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
+      "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
+    },
     "portfinder": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
@@ -10132,6 +10257,25 @@
         "react-is": "^16.8.1"
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz",
+      "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "property-information": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.1.0.tgz",
@@ -10304,6 +10448,33 @@
         "whatwg-fetch": "3.0.0"
       }
     },
+    "react-bootstrap": {
+      "version": "1.0.0-beta.9",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.9.tgz",
+      "integrity": "sha512-M0BYLuuUdMITJ16+DDDb1p4vWV87csEBi/uOxZYODuDZh7hvbrJVahfvPXcqeqq4eEpNL+PKSlqb9fNaY0HZyA==",
+      "requires": {
+        "@babel/runtime": "^7.4.2",
+        "@react-bootstrap/react-popper": "1.2.1",
+        "@restart/context": "^2.1.4",
+        "@restart/hooks": "^0.3.0",
+        "classnames": "^2.2.6",
+        "dom-helpers": "^3.4.0",
+        "invariant": "^2.2.4",
+        "keycode": "^2.2.0",
+        "popper.js": "^1.14.7",
+        "prop-types": "^15.7.2",
+        "prop-types-extra": "^1.1.0",
+        "react-overlays": "^1.2.0",
+        "react-transition-group": "^4.0.0",
+        "uncontrollable": "^6.1.0",
+        "warning": "^4.0.3"
+      }
+    },
+    "react-context-toolbox": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-context-toolbox/-/react-context-toolbox-2.0.2.tgz",
+      "integrity": "sha512-tY4j0imkYC3n5ZlYSgFkaw7fmlCp3IoQQ6DxpqeNHzcD0hf+6V+/HeJxviLUZ1Rv1Yn3N3xyO2EhkkZwHn0m1A=="
+    },
     "react-dev-utils": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-9.0.1.tgz",
@@ -10402,6 +10573,50 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
       "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
     },
+    "react-overlays": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-1.2.0.tgz",
+      "integrity": "sha512-i/FCV8wR6aRaI+Kz/dpJhOdyx+ah2tN1RhT9InPrexyC4uzf3N4bNayFTGtUeQVacj57j1Mqh1CwV60/5153Iw==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "dom-helpers": "^3.4.0",
+        "prop-types": "^15.6.2",
+        "prop-types-extra": "^1.1.0",
+        "react-context-toolbox": "^2.0.2",
+        "react-popper": "^1.3.2",
+        "uncontrollable": "^6.0.0",
+        "warning": "^4.0.2"
+      }
+    },
+    "react-popper": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz",
+      "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "create-react-context": "<=0.2.2",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.7",
+        "warning": "^4.0.2"
+      },
+      "dependencies": {
+        "create-react-context": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz",
+          "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==",
+          "requires": {
+            "fbjs": "^0.8.0",
+            "gud": "^1.0.0"
+          }
+        },
+        "typed-styles": {
+          "version": "0.0.7",
+          "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+          "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
+        }
+      }
+    },
     "react-scripts": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.0.1.tgz",
@@ -10462,6 +10677,27 @@
         "workbox-webpack-plugin": "4.2.0"
       }
     },
+    "react-transition-group": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.2.1.tgz",
+      "integrity": "sha512-IXrPr93VzCPupwm2O6n6C2kJIofJ/Rp5Ltihhm9UfE8lkuVX2ng/SUUl/oWjblybK9Fq2Io7LGa6maVqPB762Q==",
+      "requires": {
+        "@babel/runtime": "^7.4.5",
+        "dom-helpers": "^3.4.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        }
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -12133,11 +12369,21 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typed-styles": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz",
+      "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw=="
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "ua-parser-js": {
+      "version": "0.7.20",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz",
+      "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw=="
+    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
@@ -12159,6 +12405,25 @@
         }
       }
     },
+    "uncontrollable": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-6.2.3.tgz",
+      "integrity": "sha512-VgOAoBU2ptCL2bfTG2Mra0I8i1u6Aq84AFonD5tmCAYSfs3hWvr2Rlw0q2ntoxXTHjcQOmZOh3FKaN+UZVyREQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.5",
+        "invariant": "^2.2.4"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
+          "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        }
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -12510,6 +12775,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/package.json b/package.json
index 52f84ca..183f668 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "moment": "^2.24.0",
     "morgan": "^1.9.1",
     "react": "^16.8.6",
+    "react-bootstrap": "^1.0.0-beta.9",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1",
     "socket.io": "^2.2.0",
diff --git a/src/App.js b/src/App.js
index 3418b39..7e25c98 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import socket from './socket'
 
+import { Navbar, Nav, Dropdown } from 'react-bootstrap'
 import uuid from 'uuid'
 import moment from 'moment'
 
@@ -10,6 +11,8 @@ const initialState = {
   message: '',
   rooms: [],
   room: '/',
+  users: [],
+  user: {},
 }
 
 class App extends React.Component {
@@ -80,14 +83,48 @@ class App extends React.Component {
     return (
       <main role="main" className="d-flex h-100 flex-column">
         {/*Navbar*/}
-        <div className="flex-row bg-dark p-2 text-light">Topbar</div>
+        <Navbar bg="dark" variant="dark" expand="lg">
+          <Navbar.Toggle aria-controls="basic-navbar-nav" />
+          <Navbar.Collapse id="basic-navbar-nav">
+            <Nav className="ml-auto mr-3">
+              <Dropdown>
+                <Dropdown.Toggle variant="dark" id="dropdown-basic">
+                  All Users
+                </Dropdown.Toggle>
+
+                <Dropdown.Menu className="bg-dark">
+                  {this.state.users.map(r => (
+                    <Dropdown.Item className="bg-dark text-light">
+                      {r.roomName}
+                    </Dropdown.Item>
+                  ))}
+                </Dropdown.Menu>
+              </Dropdown>
+              <Dropdown>
+                <Dropdown.Toggle variant="dark" id="dropdown-basic">
+                  All Channels
+                </Dropdown.Toggle>
+
+                <Dropdown.Menu className="bg-dark">
+                  {this.state.rooms.map(r => (
+                    <Dropdown.Item className="bg-dark text-light">
+                      {r.roomName}
+                    </Dropdown.Item>
+                  ))}
+                </Dropdown.Menu>
+              </Dropdown>
+            </Nav>
+          </Navbar.Collapse>
+        </Navbar>
+
         <div className="d-flex h-100">
           {/*Side Bar 2*/}
           <div
             className="d-flex flex-column col-sm-2 bg-dark text-light p-2"
             id="sidebar2"
           >
-            <h5 className=" border-bottom pb-2">Channels</h5>
+            <h5 className=" border-bottom pb-2">User Channels</h5>
+            <p>this currently shows all channels</p>
             {this.state.rooms.map(r => (
               <button
                 key={r.roomName}