feat(rooms): add group option for rooms

resolves ResultadosDigitais#208
phiter · Jun 10, 2020 · aaf8fac · aaf8fac
1 parent eac624d
commit aaf8fac
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -116,6 +116,30 @@ Another option is to have a remote rooms config file (this file needs to be acce
 		ROOMS_DATA=https://myfilelocation.io/myrooms_data.json
 
 
+#### Room groups
+
+You can also group rooms by addind `"group": "Group name"` in the setting of each room.
+
+Example:
+
+    {
+      "id": "${UUID}",
+      "name": "First room",
+      "group": "Group 1"
+    },
+    {
+      "id": "${UUID}",
+      "name": "Second room",
+      "group": "Group 1"
+    },
+    {
+      "id": "${UUID}",
+      "name": "Another room"
+    },
+
+This will separate the rooms by group in the main screen. Each room will be contained within the section of its own group.
+Rooms without the `group` option will be placed on the top of the list, without a section title.
+
 #### External Meet
 The embeded meet is provided by [meet.jit.si](https://meet.jit.si) service, but you can change that in any room, using serices like [Meet](https://meet.google.com/) or [Zoom](https://zoom.us/). For that, you just need provide the parameter `externalMeetUrl` in your room config:
 

diff --git a/frontend/src/components/RoomCard.js b/frontend/src/components/RoomCard.js
@@ -73,7 +73,7 @@ const RoomCard = ({ name, description, users, meetingEnabled, onEnterRoom, onEnt
       >
         <CardContent className={classes.content}>
           <div className={classes.flex}>
-            <Typography gutterBottom variant="h5" component="h2" className={classes.content}>
+            <Typography gutterBottom variant="h5" component="h3" className={classes.content}>
               {name}
             </Typography>
             {description && (

diff --git a/frontend/src/morpheus/containers/OfficePage.js b/frontend/src/morpheus/containers/OfficePage.js
@@ -46,8 +46,9 @@ export const enterRoom = (room, history, openInNewTab = false) => {
 
 const useStyles = makeStyles(theme => ({
   root: {
-    padding: theme.spacing(3)
-  }
+    padding: theme.spacing(3),
+    flexGrow: 1
+  },
 }));
 
 const OfficePage = ({
@@ -70,26 +71,47 @@ const OfficePage = ({
       }
     }
   }, [match.params.roomId]);
+
+  const roomGroups = rooms.reduce((rv, room) => {
+    const group = room.group || "ungrouped";
+    // eslint-disable-next-line no-param-reassign
+    if (!rv[group]) rv[group] = [];
+    rv[group].push(room);
+    return rv;
+  }, { "ungrouped": [] });
+
+  const Room = room => (
+    <RoomCard
+      {...room}
+      key={room.id}
+      onEnterRoom={() => {
+        emitEnterInRoom(room.id);
+        onSetCurrentRoom(room);
+        history.replace(`/morpheus/office/${room.id}`);
+      }}
+      onEnterMeeting={(event) => {
+        onSetCurrentRoom(room);
+        const openInNewTab = event.ctrlKey
+        enterRoom(room, history, openInNewTab);
+      }}
+    />
+  );
+
   return (
     <div className={classes.root}>
-      <Grid>
-        {office.map(room => (
-          <RoomCard
-            {...room}
-            key={room.id}
-            onEnterRoom={() => {
-              emitEnterInRoom(room.id);
-              onSetCurrentRoom(room);
-              history.replace(`/morpheus/office/${room.id}`);
-            }}
-            onEnterMeeting={(event) => {
-              onSetCurrentRoom(room);
-              const openInNewTab = event.ctrlKey
-              enterRoom(room, history, openInNewTab);
-            }}
-          />
-        ))}
-      </Grid>
+      {(Object.keys(roomGroups).map(group => (
+          <div key={group}>
+            {(group !== "ungrouped" &&
+              <h2>
+                {group}
+              </h2>
+            )}
+            <Grid>
+              {roomGroups[group].map(Room)}
+            </Grid>
+          </div>
+        ))
+      )}
     </div>
   );
 };