feat: add users button

PRKKILLER · Mar 31, 2021 · 7e281b4 · 7e281b4
1 parent 4bf143e
commit 7e281b4
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 8 deletions.
diff --git a/Frontend/client/src/components/CreateGroup/creategroup.js b/Frontend/client/src/components/CreateGroup/creategroup.js
@@ -42,6 +42,7 @@ class creategroup extends Component {
       selected: [],
       UserId: localStorage.getItem('EmailId'),
       // selectedUser:'',
+      memberSelect: [],
     };
   }
 
@@ -53,6 +54,20 @@ class creategroup extends Component {
   //   event.preventDefault();
   // }
 
+  addMoreUsers = () => {
+    this.setState({
+      memberSelect: [...this.state.memberSelect,
+        <div className=" d-flex flex-row bd-highlight mb-3 fields ">
+          <Select
+            className="names"
+            options={this.state.users}
+            onChange={(opt) => this.handleSelect(opt)}
+          />
+        </div>,
+      ],
+    });
+  }
+
   componentDidMount = async () => {
     const email = localStorage.getItem('EmailId');
     let userListRes = await axios.get(`http://localhost:3002/group/getAllUsersExceptCurrent/${email}`);
@@ -107,6 +122,9 @@ class creategroup extends Component {
           GroupId: groupCreateRes.data.Groupdetails.GroupId,
           UserIds: selUsers,
         });
+        if (addusergrp.status === 200) {
+          window.location.href = '/dashboard';
+        }
       }
     } catch (err) {
       alert(err);
@@ -115,11 +133,23 @@ class creategroup extends Component {
 
   render() {
     // console.log(this.state.selected);
+    let EmailId = localStorage.getItem('EmailId');
+    let redirectVar = null;
+    let currentURL = '';
+    if (EmailId === false || EmailId === undefined || EmailId === null) {
+      redirectVar = <Redirect to="/login" />;
+    } else {
+      EmailId = EmailId.charAt(0).toUpperCase() + EmailId.slice(1);
+      const urlstring = EmailId.replace('@', '%40');
+      currentURL = `https://splitwisebucket.s3.us-east-2.amazonaws.com/${urlstring}`;
+      console.log('Current User url', currentURL);
+    }
     return (
       <div>
+        {redirectVar}
         <UpperNavbar />
         <div className="content-block">
-          <img className="envelope" src="https://assets.splitwise.com/assets/core/logo-square-65a6124237868b1d2ce2f5db2ab0b7c777e2348b797626816400534116ae22d7.svg" alt="No img" width="200" height="200" />
+          <img className="envelope" name="grouppic" src="https://assets.splitwise.com/assets/core/logo-square-65a6124237868b1d2ce2f5db2ab0b7c777e2348b797626816400534116ae22d7.svg" alt="No img" width="200" height="200" />
           <h2>Start a new group</h2>
           <form id="new_group" className="form" onSubmit={this.handleSubmit}>
             <div id="group_avatar_upload">
@@ -131,38 +161,39 @@ class creategroup extends Component {
             <input tabIndex="1" placeholder="Home Expenses" name="groupName" autoComplete="off" type="text" id="group_name" />
             <hr />
             <h2>Group Memebers</h2>
-            <div className=" d-flex flex-row bd-highlight mb-3 fields ">
-              <img className="rounded-circle profile-pic" alt="usrprofile" src="https://s3.amazonaws.com/splitwise/uploads/user/default_avatars/avatar-blue23-50px.png" />
+            {/* <div className=" d-flex flex-row bd-highlight mb-3 fields ">
               <Select
                 className="names"
                 options={this.state.users}
                 onChange={(opt) => this.handleSelect(opt)}
               />
-            </div>
+    </div> */}
             <div className=" d-flex flex-row bd-highlight mb-3 fields ">
-              <img className="rounded-circle profile-pic" alt="usrprofile" src="https://s3.amazonaws.com/splitwise/uploads/user/default_avatars/avatar-blue23-50px.png" />
               <Select
                 className="names"
                 options={this.state.users}
                 onChange={(opt) => this.handleSelect(opt)}
               />
             </div>
             <div className=" d-flex flex-row bd-highlight mb-3 fields ">
-              <img className="rounded-circle profile-pic" alt="usrprofile" src="https://s3.amazonaws.com/splitwise/uploads/user/default_avatars/avatar-blue23-50px.png" />
               <Select
                 className="names"
                 options={this.state.users}
                 onChange={(opt) => this.handleSelect(opt)}
               />
             </div>
             <div className=" d-flex flex-row bd-highlight mb-3 fields ">
-              <img className="rounded-circle profile-pic" alt="usrprofile" src="https://s3.amazonaws.com/splitwise/uploads/user/default_avatars/avatar-blue23-50px.png" />
               <Select
                 className="names"
                 options={this.state.users}
                 onChange={(opt) => this.handleSelect(opt)}
               />
             </div>
+            {this.state.memberSelect}
+            <Button type="submit" className="btn-outline-info" onClick={this.addMoreUsers}> + Add more users </Button>
+            <br />
+            <br />
+            <br />
             <Button type="submit" value="Submit" style={{ backgroundColor: '#ff652f' }} className="btn btn-secondary btn-lg">SAVE</Button>
           </form>
         </div>

diff --git a/Frontend/client/src/styles/creategroup.css b/Frontend/client/src/styles/creategroup.css
@@ -71,4 +71,7 @@ h2{
     height: 40px;
     margin: 4px;
     padding:10px;
-}
+}
+.btn-outline-info{
+    background-color: white;
+}