Merge pull request #22 from FACG4/connection

Connection
FACG4 · Aug 2, 2018 · c014764 · c014764
2 parents b99169d + 0081fd9
commit c014764
Show file tree

Hide file tree

Showing 11 changed files with 297 additions and 11,740 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -6,6 +6,8 @@
     <meta name="theme-color" content="#000000">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
+
     <title>React App</title>
   </head>
   <body>

diff --git a/frontend/src/AppRoutes.js b/frontend/src/AppRoutes.js
@@ -3,6 +3,8 @@ import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import Login from './components/Login/Login';
 import Carers from './components/Carers/Carers';
+import signUp from './components/singup/singup';
+import Connection from './components/Connections/Connections';
 import './style/style.css';
 
 
@@ -14,6 +16,8 @@ const AppRoutes = () => (
       <Route path="/" component={Carers} exact />
       <Route path="/login" component={Login} />
       <Route path="/carers" component={Carers} />
+      <Route path="/signUp" component={signUp} />
+      <Route path="/MyFriends" component={Connection} />
     </Switch>
 
   </BrowserRouter>

diff --git a/frontend/src/components/Connections/Connection/Connection.js b/frontend/src/components/Connections/Connection/Connection.js
diff --git a/frontend/src/components/Connections/Connection/image.js b/frontend/src/components/Connections/Connection/image.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+
+const Image = ({ openModel, name, id }) => (
+  <div className="FrindesImage" onClick={openModel}>
+    <img src="https://www.shareicon.net/data/2016/08/05/806962_user_512x512.png" alt="avata" id={id} />
+    <h3>
+      {name}
+    </h3>
+  </div>
+);
+
+
+export default Image;
diff --git a/frontend/src/components/Connections/Connection/imageModal.js b/frontend/src/components/Connections/Connection/imageModal.js
@@ -0,0 +1,35 @@
+/* eslint-disable react/jsx-filename-extension */
+import Modal from 'react-modal';
+import React from 'react';
+
+
+const OptionModal = ({ selectedOption, closeModel }) => (
+  <Modal
+    isOpen={selectedOption}
+    contentLabel="Slected Option"
+    onRequestClose={closeModel}
+    className="modal--style"
+  >
+    <button className="btn--style" type="button">
+send Massage
+
+    </button>
+    <button className="btn--style" type="button">
+    profile
+    </button>
+    <button className="btn--style" type="button">
+delete
+
+    </button>
+
+
+    <span onClick={closeModel}>
+close
+    </span>
+  </Modal>
+);
+
+Modal.setAppElement('#root');
+
+
+export default OptionModal;
diff --git a/frontend/src/components/Connections/Connections.js b/frontend/src/components/Connections/Connections.js
@@ -0,0 +1,61 @@
+
+
+/* eslint-disable */
+import React, { Component } from 'react';
+
+import Image from './Connection/image';
+import OptionModal from './Connection/imageModal';
+import './style.css';
+
+
+class Connection extends Component {
+
+  constructor(){
+    super();
+    this.state={
+      FrindesInfo: {1:'eman',2:'ahmed',3:'ishak',4:'ahmed'},
+      selectedOption:undefined
+    }
+    this.handelOpenModel= this.handelOpenModel.bind(this);
+    this.handelCloseModel = this.handelCloseModel.bind(this);
+
+
+  }
+handelOpenModel(){
+this.setState(()=>({
+  selectedOption:true
+
+}))
+  }
+  handelCloseModel(){
+    this.setState(()=>({
+      selectedOption:false
+
+    }))
+  }
+
+
+
+  render() {
+   const {FrindesInfo,selectedOption} = this.state;
+
+    return (
+      <div className="flex-container">
+
+
+  {
+  Object.keys(FrindesInfo).map((key)=><Image
+   key={key}
+   id={key} 
+  name={FrindesInfo[key]}
+  openModel={this.handelOpenModel}
+   />)}
+  <OptionModal selectedOption={selectedOption} closeModel={this.handelCloseModel}/>
+      </div>
+    );
+  }
+}
+
+export default Connection;
+
+
diff --git a/frontend/src/components/Connections/style.css b/frontend/src/components/Connections/style.css
@@ -0,0 +1,55 @@
+.flex-container{
+  display: flex;
+  flex-wrap: wrap;
+  background-color:  #dcdfe2;
+}
+.FrindesImage{
+  /* border: 1px solid red; */
+  width: 40%;
+  margin-top: 20px;
+  margin-left: 5px;
+  text-align: center;
+}
+
+
+
+img{
+  text-align: center;
+  max-width: 120px;
+  max-height: 150px;
+}
+.modal--style{
+  position: absolute;
+top: 40px;
+left: 40px;
+right: 40px;
+/* bottom: 0px !important; */
+
+border: 1px solid rgb(204, 204, 204);
+background: rgb(255, 255, 255) none repeat scroll 0% 0%;
+overflow: auto;
+border-radius: 4px;
+outline: medium none currentcolor;
+padding: 20px;
+}
+
+/* h3{
+  text-align:center;
+}; */
+.btn--style{
+  display:block;
+  background-color: rgb(10, 83, 241); /* Green */
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    /* display: inline-block; */
+    font-size: 16px;
+    margin: 5% 20%;
+    width: 150px;
+    border-radius: 25px;
+    text-align: center;
+
+
+}
diff --git a/frontend/src/components/singup/singup.js b/frontend/src/components/singup/singup.js
@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import Input from './singupInput';
+import './style.css';
+
+class Singup extends Component {
+  handleAddOption(e) {
+    e.preventDefault();
+    const signUpValues = {
+      fullName: e.target.fullName.value,
+      userName: e.target.userName.value,
+      email: e.target.email.value,
+      password: e.target.password.value,
+      ConfirmPass: e.target.ConfirmPass.value,
+    };
+
+    if (signUpValues.fullName.trim()
+     && signUpValues.userName.trim()
+     && signUpValues.email.trim()
+     && signUpValues.password.trim()
+     && signUpValues.ConfirmPass.trim()) {
+
+    // make fetch to send data
+    }
+  }
+
+  render() {
+    return (
+
+      <div className="container">
+
+        <h2>
+SignUp
+        </h2>
+
+        <form onSubmit={this.handleAddOption}>
+
+          <Input type="text" placeholder="Full Name" icon="fas fa-user-circle color--icon" name="fullName" />
+          <Input type="text" placeholder="User Name" icon="fas fa-user-circle color--icon" name="userName" />
+          <Input type="email" placeholder="Email" icon="fas fa-key color--icon" name="email" />
+          <Input type="password" placeholder="Password" icon="fas fa-key  color--icon" name="password" />
+          <Input type="password" placeholder="Confirm Password" icon="fas fa-key color--icon" name="ConfirmPass" />
+          <div className="row">
+            <button className="btn-signUp">
+Sign Up
+            </button>
+          </div>
+
+        </form>
+
+      </div>
+    );
+  }
+}
+
+export default Singup;
diff --git a/frontend/src/components/singup/singupInput.js b/frontend/src/components/singup/singupInput.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import './style.css';
+
+const Input = ({
+  icon, type, placeholder, name,
+}) => (
+  <div className="row">
+    <i className={icon} />
+    <input type={type} placeholder={placeholder} name={name} />
+  </div>
+);
+
+
+export default Input;
diff --git a/frontend/src/components/singup/style.css b/frontend/src/components/singup/style.css
@@ -0,0 +1,57 @@
+* {
+  box-sizing: border-box;
+}
+h2{
+  text-align: center;
+  color: #093d5eb3;
+}
+input[type=text], input[type=email],input[type=password]{
+  width: 90%;
+  padding:12px 2px 12px 5px;
+  color: white;
+  resize: vertical;
+  border: none;
+  background-color:#3e9ae600;
+  border-bottom:  1px solid rgba(119, 108, 108, 0.71);
+  font-size: 20px;
+}
+
+.btn-signUp{
+  color:  #093d5eb3;
+  padding: 12px 20px;
+  border-radius: 15px;
+  float: right;
+  margin-top:10px;
+  font-weight: bold;
+  letter-spacing: 1px;
+  border: none;
+  margin-top: 70px;
+}
+
+.btn-signUp:hover {
+  background-color: #093d5eb3;
+  color:  white;
+}
+
+.container {
+  border-radius: 5px;
+  background-color: #0e91fcb0;
+  padding: 20px;
+}
+.color--icon{
+  color: #fffdfde6;
+}
+
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+
+@media screen and (max-width: 600px) {
+.btn-signUp{
+      width: 100%;
+
+  }
+}