Rahul/notification backend

client/src/components/EditProfile.js

@@ -60,8 +60,6 @@ class EditProfile extends Component {
     constructor() {
         super();
         this.state = {
-            first_name: "",
-            last_name: "",
             year: "",
             name: "",
             school: "",
@@ -99,24 +97,24 @@ class EditProfile extends Component {
                     return <div>{error.message}</div>;
                 } else if (props) {
                     props = props.user_profile;
+                    console.log(props)
+                    console.log(years)
                     if (!this.state.name && props.name) {
                         this.setState({
                             ...props
                         })
                     }
-                    return (<div className="form-container">
-                        <Form>
+                    return (<div>
+                        <Form className="form-container">
                             <Form.Group>
-                                <Form.Input className="input-container" label='First Name' placeholder='First Name' defaultValue={props.name} onChange={this.onNameChange} error={this.state["name_profane"]} required="required"/>
-                                <Form.Input className="input-container" label='Last Name' placeholder='Last Name' defaultValue={props.name} onChange={this.onNameChange} error={this.state["name_profane"]} required="required"/>
+                                <Form.Input className="input-container-large" label='Full Name' placeholder='Full Name' defaultValue={props.name} onChange={this.onNameChange} error={this.state["name_profane"]} required="required"/>
                             </Form.Group>
-                            <Form.Group>
-                                <Form.Input className="input-container" label='School' placeholder='School' defaultValue={props.school} onChange={this.onSchoolChange} error={this.state["school_profane"]} required="required"/>
-                                <Form.Select className="input-container" required="required" label='Year in School' onChange={this.onYearChange} options={years} placeholder='Year in School'/>
+                            <Form.Group className="school-and-year">
+                                <Form.Input className="input-container-small" label='School' placeholder='School' defaultValue={props.school} onChange={this.onSchoolChange} error={this.state["school_profane"]} required="required"/>
+                                <Form.Select className="input-container-small" required="required" label='Year in School' defaultValue={props.grad_year} onChange={this.onYearChange} options={years} placeholder='Year in School'/>
                             </Form.Group>
-                            <Divider/>
                             <Form.Group>
-                                <Form.Select className="input-container-large" label="Skills" placeholder='Skills' onChange={this.onSkillsChange} fluid="fluid" multiple="multiple" selection="selection" search="search" options={skills}/>
+                                <Form.Select className="input-container-large" label="Skills" placeholder='Skills' defaultValue={props.skills} onChange={this.onSkillsChange} fluid="fluid" multiple="multiple" selection="selection" search="search" options={skills}/>
                             </Form.Group>
                             <Form.Group>
                                 <Form.TextArea className="input-container-large" label='Bio' placeholder='Introduce yourself!' defaultValue={props.experience} onChange={this.onExperienceChange} error={this.state["experience_profane"]}/>
@@ -125,24 +123,24 @@ class EditProfile extends Component {
                                 <Checkbox label='Make my profile public' onChange={this.onPrivacyChange} defaultChecked={true}/>
                             </Form.Group>
                             <div className="button-container">
-                                <Form.Group className="save-button-container">
+                                <Form.Group>
                                     <Link to="/feed">
-                                        <Button  className="save-button">
-                                            cancel
+                                        <Button className="save-button">
+                                            Cancel
                                         </Button>
                                     </Link>
                                 </Form.Group>
                                 <Form.Group>
                                     <Link to="/feed">
                                         <Button onClick={this.onNextClick} className="save-button">
-                                            save
+                                            Save
                                         </Button>
                                     </Link>
                                 </Form.Group>
-                                <Form.Group>
-                                    {this.state.cur_error_message}
-                                </Form.Group>
                             </div>
+                            <Form.Group>
+                                {this.state.cur_error_message}
+                            </Form.Group>
                         </Form>
                     </div>)
                 }
@@ -178,7 +176,7 @@ class EditProfile extends Component {
     };
 
     onYearChange = (e, {value}) => {
-        this.setState({year: value})
+        this.setState({grad_year: value})
     }
 
     onSkillsChange = (e, {value}) => {

client/src/components/Feed.js

@@ -39,53 +39,63 @@ class Feed extends Component {
       />
     );
     return (
-      <div>
-        { /*<p class="HackGTitle">HACKGT7: REIMAGINE REALITY</p>*/}
-        <div className="switch-feed">
-          {/*<span class="teamFormation">HackGT Team Formation</span>*/}
-          <Button.Group>
-            <Button
-              className="individuals"
-              onClick={this.feedTypeListener}
-              basic={this.state.teams}
-            >
-              Individuals
-            </Button>
-            <Button
-              onClick={this.feedTypeListener}
-              basic={!this.state.teams}
-              className="teams"
-            >
-              Teams
-            </Button>
-          </Button.Group>
+      <div className="feed-container">
+        <div className="left-side">
+          <div className="side-menu">
+            <SideMenu
+              className="Side-menu"
+              allFilterClickListener={this.allFilterClickListener}
+              onSearchClick={this.onSearchClick}
+              onTeamPage={this.state.teams}
+            />
+          </div>
         </div>
-        <div className="Feed-container">
-          <div className="menu">
+
+
+        <div className="right-side">
+          <div className="side-menu-top">
             <SideMenu
               className="Side-menu"
               allFilterClickListener={this.allFilterClickListener}
               onSearchClick={this.onSearchClick}
               onTeamPage={this.state.teams}
             />
           </div>
-          {this.state.skills.length ||
-          this.state.years.length ||
-          this.state.schools.length ? (
-            <div className="user-input">
-              <div className="filters-applied">
-                <text>Filters Applied</text>
+          <div>
+            <Button.Group className="switch-feed">
+              <Button
+                className="individuals"
+                onClick={this.feedTypeListener}
+                basic={this.state.teams}
+              >
+                Individuals
+              </Button>
+              <Button
+                onClick={this.feedTypeListener}
+                basic={!this.state.teams}
+                className="teams"
+              >
+                Teams
+              </Button>
+            </Button.Group>
+            {this.state.skills.length ||
+            this.state.years.length ||
+            this.state.schools.length ? (
+              <div className="user-input">
+                <div className="filters-applied">
+                  <text>Filters Applied</text>
+                </div>
+                <div className="filter-tags">
+                  <InputTagCollection
+                    skills={this.state.skills}
+                    years={this.state.years}
+                    schools={this.state.schools}
+                    allFilterClickListener={this.allFilterClickListener}
+                  />
+                </div>
               </div>
-              <div className="filter-tags">
-                <InputTagCollection
-                  skills={this.state.skills}
-                  years={this.state.years}
-                  schools={this.state.schools}
-                  allFilterClickListener={this.allFilterClickListener}
-                />
-              </div>
-            </div>
-          ) : null}
+            ) : null}
+          </div>
           <div className="feed-cards">{cards}</div>
         </div>
       </div>

client/src/components/FeedCards.js

@@ -26,7 +26,7 @@ const getUsersQuery = graphql `
               id
             }
         }
-    }   
+    }
 `;
 
 class FeedCards extends Component {
@@ -51,13 +51,14 @@ class FeedCards extends Component {
                     // }
                     // console.log("HELLO" + props.user_profile.team.id);
                     let cards = props.users.map(user => {
-                        // console.log("Stuff: " + props.user_profile.team.id);
-                        return <UserCard name={user.name} grad_year={user.grad_year} school={user.school} contact={user.contact} skills={user.skills.filter(function(el) {
+                        console.log("Stuff: " + user.id);
+                        return <UserCard className='card-individual' name={user.name} grad_year={user.grad_year} school={user.school} contact={user.contact} skills={user.skills.filter(function(el) {
                                 return Boolean(el);
                             })} experience={user.experience} id={user.id} team={props.user_profile.team}/>
                     })
-                    return (<div className='Cards-container'>
-                        <Card.Group centered="centered" itemsPerRow={4} className='center-group'>{cards}</Card.Group>
+                    return (
+                    <div className='Cards-container'>
+                        {cards}
                     </div>);
                 }
             }}/>);

client/src/components/FeedTeamCards.js

@@ -49,7 +49,7 @@ class FeedTeamCards extends Component {
                     })
                     return (<div className='Cards-container'>
 
-                        <Card.Group centered="centered" itemsPerRow={4} className='center-group'>{cards}</Card.Group>
+                        {cards}
                     </div>);
                 }
             }}/>);

client/src/components/Filter.js

@@ -3,7 +3,7 @@ import './css/Filter.css';
 
 const Filter = props => {
     return (<div id="filter">
-        <div>
+        <div className="filter-container">
             {/* SKILLS */}
             <div id="filter-skills">
                 <label className="filter-title">SKILLS</label>

client/src/components/Members.js

@@ -36,10 +36,6 @@ class Members extends Component {
     if (this.props.members) {
       users = this.props.members;
     }
-    // users.push(props.users[0]);
-    // users.push(props.users[1]);
-    // users.push(props.users[2]);
-    // users.push(props.users[3]);
 
     for (let i = 0; i < users.length; i++) {
       let user = users[i];
@@ -61,24 +57,14 @@ class Members extends Component {
     }
     for (let j = 4 - users.length; j > 0; j--) {
       memberCards.push(
-        <Card>
-          <Card.Content className="add-card">
-            <Link to="/feed/">
-              <Button icon="icon">
-                <Icon name="plus" />
-              </Button>
-            </Link>
-          </Card.Content>
-        </Card>
+        <div className="emptyCard">
+          <Link to="/feed/">
+            <Icon name="plus"/>
+          </Link>
+        </div>
       );
     }
-
-    let cards = (
-      <Card.Group centered="centered" itemsPerRow={4} className="center-group">
-        {memberCards}
-      </Card.Group>
-    );
-    return <div className="member-cards-container">{cards}</div>;
+    return <div className="member-cards-container">{memberCards}</div>;
   }
 }
 

client/src/components/MembersBlank.js

@@ -54,24 +54,13 @@ class Members extends Component {
         />
       );
     }
-    for (let j = 4 - users.length; j > 0; j--) {
-      memberCards.push(
-        <Card>
-          <Card.Content className="add-card">
-            {/* <Button icon>
-                    <Icon name='plus' />
-                  </Button> */}
-          </Card.Content>
-        </Card>
-      );
-    }
 
     let cards = (
       <Card.Group centered itemsPerRow={2} className="center-group">
         {memberCards}
       </Card.Group>
     );
-    return <div className="member-cards-container">{cards}</div>;
+    return <div className="member-cards-container">{memberCards}</div>;
   }
 }
 

client/src/components/NoTeam.js

@@ -28,28 +28,24 @@ class NoTeam extends Component {
   render() {
     return (
         <div id="not-team" class="team-page">
-          <h1>{this.props.team.name}</h1>
-          <Button basic color='blue' content='Ask to Join' onClick={() => this.setState({showModal: true})} />
-                <JoinTeam {...this.props} showModal={this.state.showModal} closeModal={this.closeModal} showSecond={this.secondModal}/>
-                <ConfirmationModal
-                message="Your request to join the team has been sent!"
-                closeModal={() => this.setState({ showSecondModal:false})}
-                // secondModal={() => this.props.closeModal()}
-                // onOpen={() => this.setState({ secondOpen:true})}
-                showModal={this.state.showSecondModal}
-                >
-                </ConfirmationModal>
-          <div className="first-row">
-            <div className="first-col">
+          <h1 className="no-team-heading">{this.props.team.name}</h1>
+          <Button className="ask-to-join" content='Ask to Join' onClick={() => this.setState({showModal: true})} />
+              <JoinTeam {...this.props} showModal={this.state.showModal} closeModal={this.closeModal} showSecond={this.secondModal}/>
+              <ConfirmationModal
+              message="Your request to join the team has been sent!"
+              closeModal={() => this.setState({ showSecondModal:false})}
+              // secondModal={() => this.props.closeModal()}
+              // onOpen={() => this.setState({ secondOpen:true})}
+              showModal={this.state.showSecondModal}
+              >
+              </ConfirmationModal>
+          <div className="noTeam-content">
               <MembersBlank members={this.props.team.members}/>
-            </div>
-            <div className="second-col">
               <TeamInformation editable={false} teamBio={this.props.team.description} projectIdea={this.props.team.project_idea} interests={this.props.team.interests}/>
-            </div>
           </div>
         </div>
     )
   }
 }
 
-export default NoTeam;
+export default NoTeam;

client/src/components/NotificationGroup.js

@@ -69,6 +69,8 @@ class NotificationGroup extends Component {
                 />
               );
             });
+            var notificationMessage = notificationCards.length > 0 ? notificationCards : "No notifications right now!"
+            console.log(notificationMessage)
             return (
               <Segment
                 style={{
@@ -84,7 +86,7 @@ class NotificationGroup extends Component {
                   paddingRight: 0
                 }}
               >
-                {notificationCards}
+                {notificationMessage}
               </Segment>
             );
           }

client/src/components/OnTeam.js

@@ -70,11 +70,7 @@ class OnTeam extends Component {
           {/* <Message id="alert" hidden={this.state.save_message_hidden} success={this.state.save_success} header={this.state.save_success ? "Changes Saved" : "Unsaved Changes"}/> */}
         </h1>
         <Button
-          style={{
-            color: "white",
-            background: "transparent",
-            border: "1px solid white",
-          }}
+          className="leaveTeam"
           onClick={() => {
               this.setState({showSecondModal: true});
               // this.sendInformation();

client/src/components/SideMenu.js

@@ -138,7 +138,7 @@ class SideMenu extends Component {
           scrolling="scrolling"
           closeOnChange="false"
         />
-        <img class="moveImage" src={SideMenuPicture} alt="React Logo" />
+        {/* <img class="moveImage" src={SideMenuPicture} alt="React Logo" /> */}
       </div>
     );
   }