moved Lobby to it's own folder, added Announcement component

Author: coder13

client/src/components/Lobby/Announcements.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import { lcFetch } from '../../lib/fetch';
+
+const useStyles = makeStyles({
+  root: {
+    padding: '1em',
+    marginTop: '1em',
+    marginBottom: '1em',
+  },
+});
+
+function Announcements() {
+  const [announcements, setAnnouncements] = React.useState('');
+  const classes = useStyles();
+
+  React.useEffect(() => {
+    lcFetch('/api/announcements')
+      .then((data) => {
+        if (!data.ok) {
+          throw new Error();
+        }
+        return data.text();
+      })
+      .then((data) => {
+        setAnnouncements(data);
+      })
+      .catch((err) => {
+        throw err;
+      });
+  }, []);
+
+  return (
+    <Paper className={classes.root}>
+      <ReactMarkdown
+        linkTarget="_blank"
+        source={announcements}
+      />
+    </Paper>
+  );
+}
+
+export default Announcements;

client/src/components/LobbyUserList.js renamed to client/src/components/Lobby/UserList.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
 import { connect, useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
@@ -15,15 +14,14 @@ import Button from '@material-ui/core/Button';
 import Alert from '@material-ui/lab/Alert';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import AddIcon from '@material-ui/icons/Add';
-// import AddRoomDialog from './AddRoomDialog';
-import RoomConfigureDialog from './RoomConfigureDialog';
-import RoomListItem from './RoomListItem';
-import EventListItem from './common/EventListItem';
-import LobbyUserList from './LobbyUserList';
-import { lcFetch } from '../lib/fetch';
-import { createRoom } from '../store/rooms/actions';
+import RoomConfigureDialog from '../RoomConfigureDialog';
+import RoomListItem from '../RoomListItem';
+import EventListItem from '../common/EventListItem';
+import UserList from './UserList';
+import Announcements from './Announcements';
+import { createRoom } from '../../store/rooms/actions';
 
-/**
+/**-
  * Lobby:
  * Has 2 parts: room list and user list
  * should render with tabs on mobile like the Room page
@@ -69,11 +67,6 @@ const useStyles = makeStyles((theme) => ({
       backgroundColor: theme.palette.primary.dark,
     },
   },
-  announcements: {
-    padding: '1em',
-    marginTop: '1em',
-    marginBottom: '1em',
-  },
   userList: {
     display: 'flex',
     flexDirection: 'column',
@@ -174,7 +167,6 @@ function Lobby({
   const classes = useStyles();
   const dispatch = useDispatch();
   const [createRoomDialogOpen, setCreateRoomDialogOpen] = React.useState(false);
-  const [announcements, setAnnouncements] = React.useState('');
   const events = rooms.filter((room) => room.type !== 'normal');
   const publicRooms = rooms.filter((room) => !room.private && room.type === 'normal');
   const privateRooms = rooms.filter((room) => !!room.private && room.type === 'normal');
@@ -184,22 +176,6 @@ function Lobby({
     dispatch(createRoom(options));
   };
 
-  React.useEffect(() => {
-    lcFetch('/api/announcements')
-      .then((data) => {
-        if (!data.ok) {
-          throw new Error();
-        }
-        return data.text();
-      })
-      .then((data) => {
-        setAnnouncements(data);
-      })
-      .catch((err) => {
-        throw err;
-      });
-  }, []);
-
   return (
     <div className={classes.root}>
       <Grid
@@ -218,14 +194,7 @@ function Lobby({
               maxWidth="md"
               disableGutters
             >
-              { announcements && (
-                <Paper className={classes.announcements}>
-                  <ReactMarkdown
-                    linkTarget="_blank"
-                    source={announcements}
-                  />
-                </Paper>
-              )}
+              <Announcements />
               { showAlert && (
                 <Alert
                   className={classes.alert}
@@ -271,22 +240,6 @@ function Lobby({
               </div>
 
               <Paper>
-                <List subheader={<ListSubheader>Public Rooms</ListSubheader>}>
-                  {publicRooms.map((room) => (
-                    <RoomListItem
-                      key={room._id}
-                      room={room}
-                    />
-                  ))}
-                </List>
-                <List subheader={<ListSubheader>Public Rooms</ListSubheader>}>
-                  {publicRooms.map((room) => (
-                    <RoomListItem
-                      key={room._id}
-                      room={room}
-                    />
-                  ))}
-                </List>
                 <List subheader={<ListSubheader>Public Rooms</ListSubheader>}>
                   {publicRooms.map((room) => (
                     <RoomListItem
@@ -309,7 +262,7 @@ function Lobby({
           </div>
         </Grid>
         <Grid item xs={3} className={classes.userList}>
-          <LobbyUserList users={USERS} />
+          <UserList users={USERS} />
         </Grid>
       </Grid>
       <RoomConfigureDialog

client/src/components/Lobby.js renamed to client/src/components/Lobby/index.js

@@ -15,7 +15,7 @@ import Admin from './Admin';
 import { closeMessage } from '../store/messages/actions';
 import Text from './Text';
 
-const Lobby = lazy(() => import('./Lobby'));
+const Lobby = lazy(() => import('./Lobby/index'));
 const Room = lazy(() => import('./Room/index'));
 const Profile = lazy(() => import('./common/Profile'));