added streamer component to channels drawer

Seneca-CDOT · Oct 21, 2020 · 6f8c06e · 6f8c06e
1 parent cc6ec9c
commit 6f8c06e
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 21 deletions.
diff --git a/src/frontend/src/components/ChannelsDrawer/ChannelsDrawer.jsx b/src/frontend/src/components/ChannelsDrawer/ChannelsDrawer.jsx
@@ -4,13 +4,9 @@ import Drawer from '@material-ui/core/Drawer';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Toolbar from '@material-ui/core/Toolbar';
 import List from '@material-ui/core/List';
-import Divider from '@material-ui/core/Divider';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
 import ListSubHeader from '@material-ui/core/ListSubheader';
-import InboxIcon from '@material-ui/icons/MoveToInbox';
-import MailIcon from '@material-ui/icons/Mail';
+
+import Streamer from '../Streamer';
 
 const drawerWidth = 240;
 
@@ -50,21 +46,9 @@ export default function ChannelsDrawer() {
             component="nav"
             subheader={<ListSubHeader component="div">Popular Channels</ListSubHeader>}
           >
-            {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-              <ListItem button key={text}>
-                <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
-                <ListItemText primary={text} />
-              </ListItem>
-            ))}
-          </List>
-          <Divider />
-          <List>
-            {['All mail', 'Trash', 'Spam'].map((text, index) => (
-              <ListItem button key={text}>
-                <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
-                <ListItemText primary={text} />
-              </ListItem>
-            ))}
+            <Streamer name="David Humphrey" />
+            <Streamer name="Johannes Kepler" />
+            <Streamer name="Hans Lippershey" />
           </List>
         </div>
       </Drawer>

diff --git a/src/frontend/src/components/Streamer/Streamer.jsx b/src/frontend/src/components/Streamer/Streamer.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import { Avatar, ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
+import { deepOrange } from '@material-ui/core/colors';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+  orange: {
+    color: theme.palette.getContrastText(deepOrange[500]),
+    backgroundColor: deepOrange[500],
+    width: theme.spacing(3),
+    height: theme.spacing(3),
+  },
+}));
+
+export default function Streamer(props) {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <ListItem button>
+        <ListItemIcon>
+          <Avatar className={classes.orange}>DH</Avatar>
+        </ListItemIcon>
+        <ListItemText primary={props.name}></ListItemText>
+      </ListItem>
+    </div>
+  );
+}
+
+Streamer.propTypes = {
+  name: PropTypes.string,
+};
diff --git a/src/frontend/src/components/Streamer/index.js b/src/frontend/src/components/Streamer/index.js
@@ -0,0 +1,3 @@
+import Streamer from './Streamer.jsx';
+
+export default Streamer;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Streamer from './Streamer.jsx';

		export default Streamer;