react-firebase-hooks

src/app/store.ts

@@ -1,9 +1,9 @@
-import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
-import counterReducer from '../features/counterSlice';
+import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";
+import roomReducer from "../features/roomSlice";
 
 export const store = configureStore({
   reducer: {
-    counter: counterReducer,
+    room: roomReducer,
   },
 });
 

src/components/Sidebar.tsx

@@ -1,3 +1,4 @@
+import AddIcon from "@material-ui/icons/Add";
 import AppsIcon from "@material-ui/icons/Apps";
 import BookmarkBorderIcon from "@material-ui/icons/BookmarkBorder";
 import CreateIcon from "@material-ui/icons/Create";
@@ -12,9 +13,12 @@ import React from "react";
 import styled from "styled-components";
 import { SidebarOption } from "./SidebarOption";
 import { StatusBadge } from "./StatusBadge";
-import AddIcon from "@material-ui/icons/Add";
+import { useCollection } from "react-firebase-hooks/firestore";
+import { db } from "../firebase";
 
 export const Sidebar: React.FC = () => {
+  const [channels] = useCollection(db.collection("rooms"));
+
   return (
     <SidebarContainer>
       <SidebarHeader>
@@ -42,6 +46,10 @@ export const Sidebar: React.FC = () => {
       <SidebarOption Icon={ExpandMoreIcon} title="Channels" />
       <hr />
       <SidebarOption Icon={AddIcon} title="Add Channel" addChannelOption />
+
+      {channels?.docs.map((doc: any) => (
+        <SidebarOption key={doc.id} id={doc.id} title={doc.data().name} />
+      ))}
     </SidebarContainer>
   );
 };

src/components/SidebarOption.tsx

@@ -1,20 +1,26 @@
 import { SvgIconTypeMap } from "@material-ui/core";
 import { OverridableComponent } from "@material-ui/core/OverridableComponent";
 import React from "react";
-import { db } from "../firebase";
+import { useDispatch } from "react-redux";
+import { enterRoom } from "src/features/roomSlice";
 import styled from "styled-components";
+import { db } from "../firebase";
 
 interface SidebarOptionProps {
   Icon?: OverridableComponent<SvgIconTypeMap<{}, "svg">>;
+  id?: string;
   title?: string;
   addChannelOption?: boolean;
 }
 
 export const SidebarOption: React.FC<SidebarOptionProps> = ({
   Icon,
+  id,
   title,
   addChannelOption,
 }) => {
+  const dispatch = useDispatch();
+
   const addChannel = () => {
     const channelName = prompt("Please enter the channel name");
 
@@ -25,7 +31,11 @@ export const SidebarOption: React.FC<SidebarOptionProps> = ({
     }
   };
 
-  const selectChannel = () => {};
+  const selectChannel = () => {
+    if (id) {
+      dispatch(enterRoom(id));
+    }
+  };
 
   return (
     <SidebarOptionContainer
@@ -64,4 +74,7 @@ const SidebarOptionContainer = styled.div`
   }
 `;
 
-const SidebarOptionChannel = styled.div``;
+const SidebarOptionChannel = styled.h3`
+  padding: 10px 0;
+  font-weight: 300;
+`;

src/features/roomSlice.ts

@@ -0,0 +1,26 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { RootState } from "../app/store";
+
+interface RoomState {
+  roomId: string | null;
+}
+
+const initialState: RoomState = {
+  roomId: null,
+};
+
+export const roomSlice = createSlice({
+  name: "room",
+  initialState,
+  reducers: {
+    enterRoom: (state, action: { payload: string }) => {
+      state.roomId = action.payload;
+    },
+  },
+});
+
+export const { enterRoom } = roomSlice.actions;
+
+export const selectRoomId = (state: RootState) => state.room.roomId;
+
+export default roomSlice.reducer;

src/firebase.ts

@@ -1,4 +1,6 @@
-import firebase from "firebase";
+import firebase from "firebase/app";
+import "firebase/auth";
+import "firebase/firestore";
 
 const firebaseConfig = {
   apiKey: process.env.REACT_APP_API_KEY,

src/pages/App.tsx

@@ -6,19 +6,17 @@ import { Sidebar } from "../components/Sidebar";
 
 const App: React.FC = () => {
   return (
-    <div className="app">
-      <Router>
-        <>
-          <Header />
-          <AppBody>
-            <Sidebar />
-            <Switch>
-              <Route path="/" exact />
-            </Switch>
-          </AppBody>
-        </>
-      </Router>
-    </div>
+    <Router>
+      <>
+        <Header />
+        <AppBody>
+          <Sidebar />
+          <Switch>
+            <Route path="/" exact />
+          </Switch>
+        </AppBody>
+      </>
+    </Router>
   );
 };