more work on inlines

Author: Skekacs93

src/components/Inlines.jsx

@@ -1,16 +1,100 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'material-ui/styles';
+import Icon from 'material-ui/Icon';
+import IconButton from 'material-ui/IconButton';
+import { gotoProfile } from '../action-creators/global-actions';
+
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
 
 const styles = theme => ({
   wrapper: {
-    borderBottom: `1px solid ${theme.text.secondary}`
+    borderBottom: `1px solid ${theme.palette.text.secondary}`,
+    padding: '10px',
+    height: '50px'
+  },
+  content: {
+    marginTop: '7px',
+    display: 'inline-block'
+  },
+  iconBtn: {
+    border: `1px solid ${theme.palette.text.secondary}`,
+    borderRadius: '100%',
+    width: '40px',
+    height: '40px'
+  },
+  icon: {
+    fontSize: '32px'
+  },
+  nameText: {
+    fontSize: '20px',
+    marginLeft: '10px'
+  },
+  mainText: {
+    fontSize: '20px',
+    position: 'relative',
+    top: '-10px',
+    left: '10px'
+  },
+  subText: {
+    display: 'grid',
+    fontSize: '16px',
+    color: theme.palette.text.secondary,
+    marginLeft: '50px',
+    marginTop: '-16px'
+  },
+  actionIcons: {
+    float: 'right',
+    display: 'inline-block',
+    marginTop: '5px'
+  },
+  msgIconBtn: {
+    border: `2px solid blue`,
+    borderRadius: '100%',
+    width: '40px',
+    height: '40px',
+    marginRight: '5px'
+  },
+  msgIcon: {
+    color: 'blue'
+  },
+  removeIconBtn: {
+    border: `2px solid red`,
+    borderRadius: '100%',
+    width: '40px',
+    height: '40px'
+
+  },
+  removeIcon: {
+    color: 'red'
   }
 })
 
 const UserBaseInline = props => (
   <div className={props.classes.wrapper}>
-    User
+    <div className={props.classes.content}>
+      <IconButton 
+          className={props.classes.iconBtn}
+          onClick={() => props.gotoProfile(props.data.id)}
+        >
+        <Icon className={props.classes.icon}>account_circle</Icon>
+      </IconButton>
+      <span className={props.classes.nameText}>{props.data.first_name} {props.data.last_name}</span>
+    </div>
+    <div className={props.classes.actionIcons}>
+      <IconButton 
+          className={props.classes.msgIconBtn}
+        >
+        <Icon className={props.classes.msgIcon}>message</Icon>
+      </IconButton>
+      <IconButton 
+          className={props.classes.removeIconBtn}
+        >
+        <Icon className={props.classes.removeIcon}>clear</Icon>
+      </IconButton>
+    </div>
   </div>
 )
 
@@ -22,10 +106,25 @@ const RewardBaseInline = props => (
 
 const ActivityBaseInline = props => (
   <div className={props.classes.wrapper}>
-    Activity
+    <div className={props.classes.content}>
+      <IconButton 
+          className={props.classes.iconBtn}
+        >
+        <Icon className={props.classes.icon}>group_work</Icon>
+      </IconButton>
+      <span className={props.classes.mainText}>{props.data.name}</span>
+      <span className={props.classes.subText}>{props.data.playerIds.length} Players</span>
+    </div>
   </div>
 )
 
-export const UserInline = withStyles(styles)(UserBaseInline);
+const mapDispatchToProps = dispatch => bindActionCreators({
+  gotoProfile: gotoProfile,
+}, dispatch);
+
+export const UserInline = connect(
+  null,
+  mapDispatchToProps
+)(withStyles(styles)(UserBaseInline));
 export const RewardInline = withStyles(styles)(RewardBaseInline);
 export const ActivityInline = withStyles(styles)(ActivityBaseInline);

src/components/ListPage.jsx

@@ -24,24 +24,31 @@ class ListPage extends React.Component {
         }
     }
 
-    renderItemsBasedOnType() {
+    renderItems(Component) {
         if (this.props.itemType === 'user') {
-            return this.renderItems(UserInline);
+          return (
+            this.props.items.filter((item) => (
+              (!this.state.searchTerm || 
+                (item.first_name + " " + item.last_name).toLowerCase().search(this.state.searchTerm.toLowerCase()) >= 0)
+            )).map((item) => (<UserInline data={item} />))
+          );
         } else if (this.props.itemType === 'reward') {
-            return this.renderItems(RewardInline);
+          // TODO FILTERING
+          return (
+            this.props.items.map((item) => (<RewardInline data={item} />))
+          )
         } else if (this.props.itemType === 'activity') {
-            return this.renderItems(ActivityInline);
+          return (
+            this.props.items.filter((item) => (
+              (!this.state.searchTerm || 
+                (item.name + " " + item.sport).toLowerCase().search(this.state.searchTerm.toLowerCase()) >= 0)
+            )).map((item) => (<ActivityInline data={item} />))
+          );
         }
     }
 
-    renderItems(Component) {
-        return this.props.items.map((item) => (
-            <Component data={item} />
-        ));
-    }
-
     render() {
-        let items = this.renderItemsBasedOnType()
+        let items = this.renderItems()
 
         if (this.props.items.length === 0) {
             items = (<div>No Results</div>);

src/modules/reducer.js

@@ -29,7 +29,7 @@ export function users(state = initState, action) {
         case actionTypes.GET_USER_INFO:
             // given a user id get all info, including activities
             const userId = parseInt(action.userId);
-
+            console.log("LOADING USER INFO: ", userId);
             // get basic user info
             state = state.set('userInfo', state.get('users').find((obj) => obj.get('id') === userId));