` .
-3. Try `npm run deploy again`
-
-### [Heroku](https://www.heroku.com/)
-
-Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).React App
@@ -26,15 +15,5 @@
You need to enable JavaScript to run this app.
-
diff --git a/frontend/src/AppRoutes.css b/frontend/src/AppRoutes.css
new file mode 100644
index 0000000..43b73ff
--- /dev/null
+++ b/frontend/src/AppRoutes.css
@@ -0,0 +1,16 @@
+.AppRoutes {
+ text-align: center;
+ position: relative;
+ min-height: 667px;
+
+}
+
+#root {
+ font-family: arial;
+ /* margin: 0 auto; */
+ max-width: 375px;
+ min-height: 600px;
+ background-color:#EEEEEE;
+
+ /* padding-bottom: 0px; */
+}
diff --git a/frontend/src/AppRoutes.js b/frontend/src/AppRoutes.js
new file mode 100644
index 0000000..a64ef52
--- /dev/null
+++ b/frontend/src/AppRoutes.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import {BrowserRouter, Route, Switch} from 'react-router-dom'
+
+import './AppRoutes.css';
+import './style/style.css';
+
+import Login from './components/Login/Login';
+import Header from './components/Header';
+import Chats from './components/Chats/Chats';
+import Carers from './components/Carers/Carers';
+import Profile from './components/Profile/Profile';
+import Diaries from './components/MyDiary/MyDiary';
+import Discussion from './components/Discussions/Discussions';
+import Connection from './components/Connections/Connections';
+import MyBook from './components/MyCarePlan/MyCarePlan';
+
+import Error from "./components/Error";
+
+import NavElements from './components/Navbar/NavElement'
+
+
+const AppRoutes = () => (
+
+
+
+
+
+
+
+
+
-
- Welcome to React
- {console.log(this.state.test)}
- {this.state.test.map((t)=> {t.a}
- )}
-
-
+
+ {response && response.map(carer => (
+
props.CarerCardBodyShow(carer.id)}>
+
+
+Carer from:
+ {' '}
+ {carer.location}
+
+
+Age:
+ {' '}
+ {carer.age}
+
+
+
+Cared for sitution:
+
+ {' '}
+
+ {carer.sitution}
+
+
+
+
+ more
+
+
+ ))}
+
+
+
+
+
+
+ A Carer from
+ {' '}
+ {
+ carer && carer.location
+ }
+
+
+
+ Age:
+ {' '}
+ {
+ carer && carer.age
+ }
+
+
+
+ Cared for situation:
+
+ {' '}
+ {
+ carer && (
+
+ {carer.sitution}
+
+ )
+ }
+
+
+ What I can offer to other carers ?
+
+ {' '}
+ {
+ carer && (
+
+ {carer.offer}
+
+ )
+ }
+
+ What I looking for ?
+
+ {' '}
+ {
+ carer && (
+
+ {carer.looking}
+
+ )
+ }
+
+
+ Close
+
+
+ Add Request
+
+
+
+ );
+};
+
+export default CarerCardBody;
diff --git a/frontend/src/components/Carers/CarerCard/CarerCardBody/FriendRequestNotification/FriendRequestNotification.js b/frontend/src/components/Carers/CarerCardBody/FriendRequestNotification/FriendRequestNotification.js
similarity index 100%
rename from frontend/src/components/Carers/CarerCard/CarerCardBody/FriendRequestNotification/FriendRequestNotification.js
rename to frontend/src/components/Carers/CarerCardBody/FriendRequestNotification/FriendRequestNotification.js
diff --git a/frontend/src/components/Carers/CarerCard/CarerCardBody/FriendsRequestButton/FriendsRequestButton.js b/frontend/src/components/Carers/CarerCardBody/FriendsRequestButton/FriendsRequestButton.js
similarity index 100%
rename from frontend/src/components/Carers/CarerCard/CarerCardBody/FriendsRequestButton/FriendsRequestButton.js
rename to frontend/src/components/Carers/CarerCardBody/FriendsRequestButton/FriendsRequestButton.js
diff --git a/frontend/src/components/Carers/CarerCardBody/style.css b/frontend/src/components/Carers/CarerCardBody/style.css
new file mode 100644
index 0000000..305d890
--- /dev/null
+++ b/frontend/src/components/Carers/CarerCardBody/style.css
@@ -0,0 +1,25 @@
+
+.ReactModalPortal > div {
+ opacity: 0;
+}
+.ReactModalPortal .ReactModal__Overlay {
+ display: flex;
+ justify-content: center;
+ transition: opacity 200ms easy-in-out;
+ }
+.ReactModalPortal .ReactModal__Overlay--after-open {
+ opacity: 1;
+}
+.ReactModalPortal .ReactModal__Overlay--before-close {
+ opacity: 0;
+}
+
+.modal{
+ max-height: 100vh;
+ overflow-y: auto;
+ background: ghostwhite;
+ max-width: 35rem;
+ padding: 1rem;
+ outline: none;
+ margin:2rem 1.2rem 3rem 1.2rem;
+}
diff --git a/frontend/src/components/Carers/Carers.js b/frontend/src/components/Carers/Carers.js
index e69de29..afc2d34 100644
--- a/frontend/src/components/Carers/Carers.js
+++ b/frontend/src/components/Carers/Carers.js
@@ -0,0 +1,72 @@
+/* eslint-disable react/jsx-filename-extension */
+// eslint-disable-next-line
+import React, { Component } from 'react';
+import CarerCard from './CarerCard/CarerCard';
+import CarerCardBody from './CarerCardBody/CarerCardBody';
+import Search from '../Search/Search';
+import fetch from '../../helpers/fetch';
+
+class Carers extends Component {
+
+state = {
+ cardShow:false,
+ carerCardId:0,
+ response:undefined,
+ searchResponse: undefined
+ }
+
+ componentDidMount(){
+ const handleFetch = {
+ method: 'POST',
+ url: '/carers',
+ }
+ fetch(handleFetch, (response) => {
+ response = JSON.parse(response);
+ this.setState((prevstate) => (
+ {
+ response: Object.assign([], response)
+ }
+ )
+ )
+ }
+);
+ }
+
+handleSearchResponse = (response) => {
+ this.setState(() => (
+ {
+ searchResponse: Object.assign([], response)
+ }
+ )
+)
+}
+
+CarerCardBodyShow = (carerCardId) => {
+ this.setState({
+ cardShow:true,
+ carerCardId
+ })
+ }
+CarerCardBodyHide = () =>{
+ this.setState({
+ cardShow:false
+ })
+ }
+ render() {
+ const {cardShow:show, response, searchResponse} = this.state;
+ return (
+
+
+
+ );
+ }
+}
+
+export default Carers;
diff --git a/frontend/src/components/Chats/Chats.js b/frontend/src/components/Chats/Chats.js
new file mode 100644
index 0000000..cd03e46
--- /dev/null
+++ b/frontend/src/components/Chats/Chats.js
@@ -0,0 +1,74 @@
+import React, { Component } from 'react';
+import FontAwesome from 'react-fontawesome';
+
+import './styles.css';
+
+class Chats extends React.PureComponent {
+
+ state = {
+ chat: ['hello', 'hi!', 'do you want to chat?']
+ }
+
+ saveMsg = (msg) => this.setState({
+ chat: [
+ ...this.state.chat,
+ msg
+ ]
+ })
+
+ render() {
+ return (
+
+ )
+ }
+}
+
+const Chat = ({ saveMsg }) => (
+
+);
+
+const Messages = ({ chat }) => (
+
+ {chat.map((m, i) => {
+ const msgClass = i === 0 || i % 2 === 0 // for demo purposes, format every other msg
+ return (
+
+ {m}
+
+ )}
+ )}
+
+
+
+ {name}
+
+
+
+send Massage
+
+
+
+ profile
+
+
+delete
+
+
+
+
+
+close
+
+
+);
+
+Modal.setAppElement('#root');
+
+
+export default OptionModal;
diff --git a/frontend/src/components/Connections/Connections.js b/frontend/src/components/Connections/Connections.js
index e69de29..caac395 100644
--- 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 (
+
+
+
+ {
+ Object.keys(FrindesInfo).map((key)=>
+
+ );
+ }
+}
+
+export default Connection;
+
+
diff --git a/frontend/src/components/Connections/style.css b/frontend/src/components/Connections/style.css
new file mode 100644
index 0000000..d77d1d8
--- /dev/null
+++ 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;
+
+
+}
\ No newline at end of file
diff --git a/frontend/src/components/Header/Header.js b/frontend/src/components/Header/Header.js
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/src/components/Header/HeaderTitle/HeaderTitle.js b/frontend/src/components/Header/HeaderTitle/HeaderTitle.js
index e69de29..3e2fb3a 100644
--- a/frontend/src/components/Header/HeaderTitle/HeaderTitle.js
+++ b/frontend/src/components/Header/HeaderTitle/HeaderTitle.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import logo from './careandshare.png';
+
+import ('../style.css');
+
+const Title = ({ title }) => {
+ return(
+
+ {title?{title} :
+ );
+}
+
+export default Title;
\ No newline at end of file
diff --git a/frontend/src/components/Header/HeaderTitle/careandshare.png b/frontend/src/components/Header/HeaderTitle/careandshare.png
new file mode 100755
index 0000000..10dae4c
Binary files /dev/null and b/frontend/src/components/Header/HeaderTitle/careandshare.png differ
diff --git a/frontend/src/components/Header/Notifications/Notification/Notification.js b/frontend/src/components/Header/Notifications/Notification/Notification.js
index e69de29..fa1f38a 100644
--- a/frontend/src/components/Header/Notifications/Notification/Notification.js
+++ b/frontend/src/components/Header/Notifications/Notification/Notification.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import './style.css';
+
+const Notification = ({name}) => {
+ return (
+
+
{name} wants to connect with you!
+
+ Accept
+ Decline
+
+
You have no notifications
;
+
+ return(
+
+
+
+ {(connectReq.length && !show)?{connectReq.length} :''}
+
+
+
+ {notifications}
+
+
+ );
+ }
+}
+
+export default Notifications;
\ No newline at end of file
diff --git a/frontend/src/components/Header/Notifications/style.css b/frontend/src/components/Header/Notifications/style.css
new file mode 100644
index 0000000..d52b9c9
--- /dev/null
+++ b/frontend/src/components/Header/Notifications/style.css
@@ -0,0 +1,35 @@
+.notification .num {
+ display: block;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background-color: #FC2E2E;
+ color: #fff;
+ text-align: center;
+ padding: auto;
+ line-height: 20px;
+ font-size: 14px;
+ position: absolute;
+ right: 10px;
+ top: 8px;
+}
+
+.notifications {
+ width: 320px;
+ min-height: 100px;
+ background-color: #DFE2DB;
+ padding: 10px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ top: 30px;
+ z-index: 1;
+ transition: all 0.5s ease;
+}
+
+.hidden {
+ transform: translate(50%, -50%) scale(0);
+ transition: all 0.5s ease;
+}
diff --git a/frontend/src/components/Header/index.js b/frontend/src/components/Header/index.js
new file mode 100644
index 0000000..79c483f
--- /dev/null
+++ b/frontend/src/components/Header/index.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import FontAwesomeIcon from 'react-fontawesome'
+
+import HeaderTitle from './HeaderTitle/HeaderTitle';
+import Notifications from './Notifications';
+
+import './style.css';
+
+class Header extends Component {
+
+ // the title should come from the selected nav
+
+ render(){
+ return(
+
+ );
+ }
+}
+
+export default Header;
\ No newline at end of file
diff --git a/frontend/src/components/Header/style.css b/frontend/src/components/Header/style.css
new file mode 100644
index 0000000..7ae84d5
--- /dev/null
+++ b/frontend/src/components/Header/style.css
@@ -0,0 +1,57 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+#root {
+ width: 375px;
+ height: 667px;
+ max-width: 375px;
+ max-height: 667px;
+ margin: 0 auto;
+}
+
+.App-header {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 120px;
+ background-color: #48A1AF;
+ box-shadow: 0px 4px 10px -6px #000;
+}
+
+.App-header a {
+ position: absolute;
+ font-size: 24px;
+ margin: 5px;
+ cursor: pointer;
+ text-decoration: none;
+ color: #000;
+}
+
+.App-header h1 {
+ font-size: 30px;
+}
+
+.App-header .menu {
+ left: 0;
+ top: 0;
+}
+
+.App-header .angle-left {
+ left: 0;
+ bottom: 0;
+}
+
+.App-header .notification {
+ font-size: 18px;
+ right: 0;
+ top: 0;
+}
+
+.App-header-title {
+ width: 200px;
+}
\ No newline at end of file
diff --git a/frontend/src/components/Login/Login.js b/frontend/src/components/Login/Login.js
new file mode 100644
index 0000000..59f5b1a
--- /dev/null
+++ b/frontend/src/components/Login/Login.js
@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import fetch from '../../helpers/fetch';
+import './style.css';
+class Login extends Component {
+
+state = {
+ error: undefined,
+ response: []
+ }
+
+ handelLogin = (e) => {
+ e.preventDefault();
+ const inputsValues = {
+ userName:e.target.userName.value,
+ password:e.target.password.value
+ }
+
+ if(inputsValues.userName.trim() && inputsValues.password.trim()){
+ e.target.userName.value = "";
+ e.target.password.value = "";
+ const handleFetch = {
+ method: 'POST',
+ url: '/login',
+ data: inputsValues,
+ }
+
+
+fetch(handleFetch, (response) => {
+response = JSON.parse(response);
+console.log(response);
+this.setState(() => (
+ {response: Object.assign({}, response),
+ error: response.msg
+ }
+ )
+ )
+ }
+ );
+
+ } else{
+ this.setState(()=>(
+ {error: "All fields are required"}
+ ));
+ }
+
+}
+
+
+render(){
+ return(
+
+
+
Sign In
+ SignUp
+
+
+ {this.state.error &&
+ {
{this.state.error} }
+ }
+
+
+
+)
+}
+
+}
+
+
+export default Search;
diff --git a/frontend/src/components/Search/style.css b/frontend/src/components/Search/style.css
new file mode 100644
index 0000000..cbfeb50
--- /dev/null
+++ b/frontend/src/components/Search/style.css
@@ -0,0 +1,15 @@
+.search-form{
+ display:block;
+ width: 100%;
+ margin-bottom: 2.3rem;
+}
+.search-input{
+ background: white;
+ border: none;
+ color: black;
+ font-size: 2rem;
+ padding: 1.9rem;
+ border-bottom: 0.5rem solid whitesmoke;
+width: -moz-available;
+ margin: 4.5rem 0 0 0;
+}
diff --git a/frontend/src/components/singup/singup.js b/frontend/src/components/singup/singup.js
new file mode 100644
index 0000000..0d9d61f
--- /dev/null
+++ 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 (
+
+
+ );
+ }
+}
+
+export default Singup;
diff --git a/frontend/src/components/singup/singupInput.js b/frontend/src/components/singup/singupInput.js
new file mode 100644
index 0000000..2cc35e4
--- /dev/null
+++ b/frontend/src/components/singup/singupInput.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import './style.css';
+
+const Input = ({
+ icon, type, placeholder, name,
+}) => (
+
+
+);
+
+
+export default Input;
diff --git a/frontend/src/components/singup/style.css b/frontend/src/components/singup/style.css
new file mode 100644
index 0000000..9f16fc3
--- /dev/null
+++ 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%;
+
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/helpers/fetch.js b/frontend/src/helpers/fetch.js
new file mode 100644
index 0000000..fd2d932
--- /dev/null
+++ b/frontend/src/helpers/fetch.js
@@ -0,0 +1,23 @@
+const fetch = (obj, cb) => {
+
+ const xhr = new XMLHttpRequest();
+xhr.onreadystatechange = () => {
+
+ if(xhr.readyState === 4)
+ if(xhr.status === 200){
+ const response = xhr.responseText;
+ cb(response)
+ }
+ }
+ xhr.open(obj.method, obj.url);
+ if(obj.data){
+ const data= JSON.stringify(obj.data);
+ xhr.setRequestHeader('content-type', 'application/json');
+ xhr.send(data);
+ } else {
+ xhr.send();
+ }
+
+}
+
+export default fetch;
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 9406087..ec75515 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,5 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import App from './components/App';
+import AppRoutes from './AppRoutes';
-ReactDOM.render(