Assignmnet 9

App.js

import React, { Component } from 'react';

import './App.css';
import { Layout, Row, Col, Icon } from 'antd';
import { store, persistor } from './Redux/store'
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import { BrowserRouter as Router, Route, Switch, } from "react-router-dom";

import Homepage from './Components/Homepage/Homepage'

import ProfileScreen from './Components/Profile Screen/ProfileScreen'
import Dashboard from './Components/Dashboard/Dashboard'
import EditProfile from './Components/Edit Profile/EditProfile'

class App extends Component {

constructor(props){
super(props)
this.state={
showHomepage : true,
showProfileScreen : false,
showDashboard : false,
showEditProfile : false,
}
this.goToProfileScreen=this.goToProfileScreen.bind(this)
this.goToDashboard=this.goToDashboard.bind(this)
this.goToEditProfile=this.goToEditProfile.bind(this)
}

componentDidMount(){
const uid = localStorage.getItem("uid");
uid && this.goToDashboard(uid)
}

goToProfileScreen(id,displayName,displayPicture,email){
this.setState({
uid : id,
displayName : displayName,
displayPicture : displayPicture ,
email : email,
showHomepage : false,
showProfileScreen : true
 })
}

goToDashboard(id){
// console.log(id)
this.setState({
showHomepage : false,
showProfileScreen : false,
showEditProfile : false,
showDashboard : true,
uid:id,
})
}

goToEditProfile(){
this.setState({
showHomepage : false,
showProfileScreen : false,
showDashboard : false,
showEditProfile : true,
})
}

render() {

const { Header, Footer, Content } = Layout;

const bgColor = "#100c08"

const
{showHomepage,showProfileScreen,uid,displayName,displayPicture,email,showDashboar
d,showEditProfile} = this.state;

return (
<Provider store={store}>
<PersistGate loading={null} persistor = {persistor}>
<div>
<Layout style={{backgroundColor:bgColor}}>
<Row>
<Col span={24}>
<h1 className="Heading">I Friend You !</h1>
{

}
</Col>
 </Row>
<Row>
<hr style={{height:"1px"}}></hr>
<Content>
<div className="heightSetting">
{showHomepage && !showProfileScreen && !showDashboard &&
!showEditProfile &&
<Col span={24}>
<div className="Homepage">
<Homepage changeScreen={this.goToProfileScreen}
changeScreen2={this.goToDashboard} />
</div>
</Col>
}
{showProfileScreen && !showHomepage && !showDashboard &&
!showEditProfile &&
<Col span={24}>
<div className="ProfileScreen">
<ProfileScreen uid={uid} email={email}
displayName={displayName} displayPicture={displayPicture}
changeScreen={this.goToDashboard}/>
</div>
</Col>
}
{showDashboard && !showHomepage && !showProfileScreen &&
!showEditProfile &&
<Col span={24}>
<div className="dashboard">

}
<Dashboard uid={uid} changeScreen={this.goToEditProfile}/>
</div>
</Col>
}
{showEditProfile && !showDashboard && !showHomepage &&
!showProfileScreen &&
<Col span={24}>
<div className="dashboard">
<EditProfile uid={uid} changeScreen={this.goToDashboard}/>
</div>
</Col>
}
</div>
</Content>
</Row>
 <Row>
<Col span={24}>
<hr style={{height:"1px"}}></hr>
<Footer style={{backgroundColor:bgColor,margin:"-5px"}}>
<address style={{color:'yellow',fontFamily:'Times New
Roman',textAlign:'center'}}>
HayFa Tech^©<br></br>
Facebook : <a
href="http://www.facebook.com/syedkashifali"target="_blank">Find Us On
Facebook</a><br></br>
Twitter : <a
href="https://twitter.com/syedkashifali"target="_blank">Find Us On
Twitter</a><br></br>
Github : <a
href="https://github.com/syedkashifali"target="_blank">Find Us On
Github</a><br></br>
</address>
</Footer>
</Col>
</Row>
</Layout>
</div>
</PersistGate>
</Provider>
);
}
}

export default App;

Homepage.js:

import React, { Component } from 'react';

import './Homepage.css';
import logo from '../../Assets/Images/Homepage/logo.png'
import tagLine from '../../Assets/Images/Homepage/tagLine.png'
import firebase from '../../Config/Config'
import { database } from 'firebase';
import { updateUser } from '../../Redux/actions/authActions'
import { connect } from 'react-redux'

class Homepage extends Component {

constructor(props){
super(props)
 this.state={
usersList : []
}
this.login=this.login.bind(this)
}

componentDidMount(){
fetch(`https://meeting-app-7169f.firebaseio.com/usersList.json`)

.then(data => {
return data.json();
})
.then(data2 => {
// console.log(data2);
for(let i in data2){
this.state.usersList.push(data2[i].uid);
}
})
}

componentDidUpdate(){

const {email,displayName,displayPicture,uid,usersList} = this.state;

const {changeScreen,changeScreen2} =this.props;

if(usersList.includes(uid)){
const user={uid,displayName,displayPicture,email}
this.props.updateUser(user)
changeScreen2(uid)
localStorage.setItem("uid",uid)
}else{
const user={uid,displayName,displayPicture,email}
this.props.updateUser(user)
changeScreen(uid,displayName,displayPicture,email)
}

login(){
var provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithPopup(provider).then((result) => {
var token = result.credential.accessToken;
var user = result.user;
 this.setState({
uid : user.uid,
displayName : user.displayName,
displayPicture : user.photoURL ,
email : user.email,
})

}).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode,errorMessage);
var email = error.email;
var credential = error.credential;
});
}

render() {

return (

<div>
<div>
<img src={tagLine} />
</div>
<div className='logo'>
<img className='logo' width={350} height={350} src={logo} />
</div>
<div className="fb-btn">
<button className="loginBtn loginBtn--facebook" onClick={this.login}>
Login with Facebook
</button>
</div>
</div>
);
}
}

const mapStateToProps = (state) => {

return {
user: state.user
}
}

const mapDispatchToProps = (dispatch) =>{

 return {
updateUser : (user) => dispatch(updateUser(user))
}
}

export default connect(mapStateToProps,mapDispatchToProps)(Homepage);

ProfileScreen.js:

import React, { Component } from 'react';

import './ProfileScreen.css';
import swal from 'sweetalert';
import { Input } from "antd";
import firebase from '../../Config/Config'
import { Checkbox } from "antd";
import coffee from "../../Assets/Images/Profile Screen/Coffee.png"
import juice from "../../Assets/Images/Profile Screen/Juice.png"
import cocktail from "../../Assets/Images/Profile Screen/Cocktail.png"
import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-
maps"

class ProfileScreen extends Component {

constructor(props){
super(props)
this.state={
uid : props.uid,
email : props.email,
displayName : props.displayName,
displayPicture : props.displayPicture,
showInputBox : true,
showPictureBox : false,
showBeverages : false,
showMap : false,
imgUrls : [],
beverages: [],
meetingDuration : [],
location : [],
latitude :24.862736834972253,
longitude:67.02094346140439,
}
this.inputBox=this.inputBox.bind(this)
 this.uploadPictures=this.uploadPictures.bind(this)
this.updateCenter=this.updateCenter.bind(this)

inputBox(){
const nickname = document.getElementById("nickname").value;
const number = document.getElementById("number").value;
if(nickname !== "" && number !== "" && number.length === 11){
this.setState({
nickname : nickname,
number : number,
showInputBox : false,
showPictureBox : true
})
}else{
swal("Acess Denied", "Type Correct Nickname And Phone Number With 11
Digits");
}
}

//Picture Box
uploadPictures(){
const pic1 = document.getElementById("pic1").value;
const pic2 = document.getElementById("pic2").value;
const pic3 = document.getElementById("pic3").value;
const ref = firebase.storage().ref();
const {file1,file2,file3,imgUrls} = this.state;
if(pic1 !== "" && pic2 !== "" && pic3 !== "" ){
document.getElementById("uploading").style.display = "none";
document.getElementById("uploading2").style.display = "block";
const name1 = (+new Date()) + '-' + file1.name;
const metadata1 = {
contentType: file1.type
};

const task1 = ref.child("Pictures").child(name1).put(file1, metadata1);

task1
.then(snapshot => snapshot.ref.getDownloadURL())
.then((url1) => {

imgUrls.push(url1)
this.setState(imgUrls)
})
const name2 = (+new Date()) + '-' + file2.name;
 const metadata2 = {
contentType: file2.type
};

const task2 = ref.child("Pictures").child(name2).put(file2, metadata2);

task2
.then(snapshot => snapshot.ref.getDownloadURL())
.then((url2) => {

imgUrls.push(url2)
this.setState(imgUrls)
})
const name3 = (+new Date()) + '-' + file3.name;
const metadata3 = {
contentType: file3.type
};

const task3 = ref.child("Pictures").child(name3).put(file3, metadata3);

task3
.then(snapshot => snapshot.ref.getDownloadURL())
.then((url3) => {

imgUrls.push(url3)
this.setState(imgUrls)
}).then(()=>{
this.setState({showPictureBox : false,showBeverages : true})
})
}else{
swal("Acess Denied","Please Upload All Three Pictures");
}

onChange(e){
const {beverages} =this.state;
!beverages.includes(e.target.value) ? beverages.push(e.target.value):
beverages.splice(beverages.indexOf(e.target.value),1)
this.setState(beverages)
}

Change(e){
 const {meetingDuration} =this.state;
!meetingDuration.includes(e.target.value) ?
meetingDuration.push(e.target.value):
meetingDuration.splice(meetingDuration.indexOf(e.target.value),1)
this.setState(meetingDuration)
}

gotoMap(){
const {beverages,meetingDuration} = this.state
beverages.length === 0 || meetingDuration.length === 0 ? swal("Access
Denied","Atleast Choose Any One From Both Fields"):
this.setState({
showMap : true,
showBeverages : false
})
}

componentDidMount(){
this.setPosition();
}

setPosition(){
navigator.geolocation.getCurrentPosition((position)=>{
position.coords.latitude && this.setState({latitude :
position.coords.latitude,longitude : position.coords.longitude})
})
}

updateCenter(lat,lng){
this.setState({latitude :lat,longitude:lng});

submit(){
const {changeScreen} = this.props;
const database = firebase.database();
const
{displayPicture,displayName,email,beverages,latitude,longitude,imgUrls,meetingDur
ation,nickname,number,uid,coords} = this.state
const newUserRef = database.ref(`users/${uid}/userInfo`).push();
newUserRef.set(
latitude && longitude ?
 {
displayName,
displayPicture,
email,
beverages,
imgUrls,
latitude,
longitude,
meetingDuration,
nickname,
number,
uid
}
:
{
displayName,
displayPicture,
email,
beverages,
imgUrls,
latitude:coords.latitude,
longitude:coords.longitude,
meetingDuration,
nickname,
number,
uid
}
)

const userListRef = database.ref(`usersList`).push();

userListRef.set(
{
uid
}
)

changeScreen(uid)

localStorage.setItem("uid",uid)
}

render() {

const {showInputBox,showPictureBox,showBeverages,showMap,coords} = this.state

 return (
<div>
{showInputBox && !showPictureBox && !showBeverages && !showMap &&
<div className="example-input marginSetting">
<Input id="nickname" size="large" placeholder="Enter Your Nickname" />
<br></br>
<Input id="number" type="number" size="large" placeholder="Enter Your
Phone Number" />
<br></br>
<a style={{color:'black'}} onClick={this.inputBox}
className="myButton">Next</a>
</div>
}
{showPictureBox && !showInputBox && !showBeverages && !showMap &&
<div className="marginSetting">
<h1 className="pb-heading">Upload Your 3 Good Looking Pictures!</h1>
<br></br>
<input type="file" name="pic1" id="pic1"
onChange={(e)=>{this.setState({file1 : e.target.files[0]})}}/>
<br></br>
<input type="file" name="pic2" id="pic2"
onChange={(e)=>{this.setState({file2 : e.target.files[0]})}}/>
<br></br>
<input type="file" name="pic3" id="pic3"
onChange={(e)=>{this.setState({file3 : e.target.files[0]})}}/>
<br></br>
<a id="uploading" style={{color:'black'}} onClick={this.uploadPictures}
className="myButton">Next</a>
<p id="uploading2" style={{display:"none",color:"antiquewhite"}}>Wait
... Soon You Will Be Redirected To Next Screen</p>
</div>
}
{showBeverages && !showInputBox && !showPictureBox && !showMap &&
<div className="marginSetting">
<h1 className="pb-heading">Select Meeting Duration</h1>
<Checkbox style={{color:"antiquewhite"}} value="120 Minutes"
onChange={(e)=>{this.Change(e)}}>120 Minutes</Checkbox>
<Checkbox style={{color:"antiquewhite"}} value="60 Minutes"
onChange={(e)=>{this.Change(e)}}>60 Minutes</Checkbox>
<Checkbox style={{color:"antiquewhite"}} value="30 Minutes"
onChange={(e)=>{this.Change(e)}}>30 Minutes</Checkbox>
<br></br>
<h1 className="pb-heading">Select Beverages</h1>
<img src={coffee} className="bev-ca" />
 <Checkbox style={{color:"antiquewhite"}} value="Coffee"
onChange={(e)=>{this.onChange(e)}}>Coffee</Checkbox>
<img src={juice} className="bev-ca" />
<Checkbox style={{color:"antiquewhite"}} value="Juice"
onChange={(e)=>{this.onChange(e)}}>Juice</Checkbox>
<img src={cocktail} className="bev-ca" />
<Checkbox style={{color:"antiquewhite"}} value="Cocktail"
onChange={(e)=>{this.onChange(e)}}>Cocktail</Checkbox>
<br></br>
<a style={{color:'black'}} onClick={()=>{this.gotoMap()}}
className="myButton">Next</a>
</div>
}
{showMap && !showBeverages && !showInputBox && !showPictureBox &&
<div className="showMap">
<h1 className="pb-heading">Select Your Location</h1>
<small style={{color:"white"}}>Drag And Drop Marker To Select Your
Location And Then Hit Submit Button</small>
<MyMapComponent
isMarkerShown = {true}

googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,
drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `100vh` }} />}
mapElement={<div style={{ height: `100%` }} />}
latitude = {this.state.latitude}
longitude = {this.state.longitude}
updateCenter={this.updateCenter}
/>
<br></br>
<a style={{color:'black'}} onClick={()=>{this.submit()}}
className="myButton">Submit</a>
</div>
}
</div>
);
}
}

export default ProfileScreen;

const MyMapComponent = withScriptjs(withGoogleMap((props) =>

<GoogleMap
defaultZoom={14}
 center={{ lat: props.latitude, lng: props.longitude }}
>
{props.isMarkerShown &&
<Marker
position={{ lat: props.latitude, lng: props.longitude }}
draggable={true}
onDragEnd={position => {
props.updateCenter(position.latLng.lat(),position.latLng.lng())
}}
/>}
</GoogleMap>
))

Dashboard.js:

import React, { Component } from "react";

import "./Dashboard.css";
import firebase from "../../Config/Config";
import _ from "lodash";
import Cards, { Card } from "react-swipe-deck";
import swal from "sweetalert";
import moment from "moment";
import { NavLink } from "react-router-dom";
import {
withGoogleMap,
GoogleMap,
Marker,
DirectionsRenderer,
withScriptjs
} from "react-google-maps";
import {
Icon,
Carousel,
Radio,
Calendar,
TimePicker,
Modal,
Avatar,
Card as ReqCard
} from "antd";
import { connect } from "react-redux";
import AddToCalendar from 'react-add-to-calendar';
import NotificationBadge from 'react-notification-badge';
import {Effect} from 'react-notification-badge';
const RadioGroup = Radio.Group;
const format = "HH:mm";
const { Meta } = ReqCard;

class Dashboard extends Component {

constructor(props) {
super(props);
this.state = {
uid: this.props.uid,
meetingButton: true,
card: false,
meetingPoint: false,
meetingStatus: false,
currentUser: {},
otherUsers: [],
selectedUsers: [],
venues: [],
radioButtonValue: 0,
navigation: {},
visible: false,
visible2: false,
meetings: [],
currentUserMeetings: [],
currentUserMeetingsRequests: [],
currentUserAcceptedMeetings:[],
meetingRequest: false,
meetingAccepted: false,
};
this.radius = this.radius.bind(this);
this.getDistance = this.getDistance.bind(this);
this.getDirections = this.getDirections.bind(this);
}

componentDidMount() {
const {
uid,
currentUser,
otherUsers,
selectedUsers,
venues,
meetings,
currentUserMeetings,
currentUserMeetingsRequests,
currentUserAcceptedMeetings,
} = this.state;
 fetch(`https://meeting-app-7169f.firebaseio.com/users/${uid}.json`)
.then(data => {
return data.json();
})
.then(data2 => {
var abc = data2.userInfo;
for (let i in abc) {
currentUser.beverages = abc[i].beverages;
currentUser.imgUrls = abc[i].imgUrls;
currentUser.meetingDuration = abc[i].meetingDuration;
currentUser.nickname = abc[i].nickname;
currentUser.displayName = abc[i].displayName;
currentUser.email = abc[i].email;
currentUser.displayPicture = abc[i].displayPicture;
currentUser.latitude = abc[i].latitude;
currentUser.longitude = abc[i].longitude;
}
this.setState(currentUser);

})
.then(() => {
fetch(

`https://api.foursquare.com/v2/venues/explore?client_id=TCEW2YEVYB3DZRKWOZMW2JMYU
QNKB4HNUMGCNPUGLSAQZXUM&client_secret=4KCFM5Q5FCDHIVUDD3XSDXYRCJVQLFDROBAQDR5R334
MKTPD&v=20180323&ll=${
currentUser.latitude
},${currentUser.longitude}`
)
.then(data => {
return data.json();
})
.then(data2 => {
data2.response.groups[0].items.map((value, index) => {
index < 3 &&
venues.push({
name: value.venue.name,
address: value.venue.location.address,
lat: value.venue.location.lat,
lng: value.venue.location.lng
});
});
this.setState(venues);
});
 });

fetch(`https://meeting-app-7169f.firebaseio.com/users.json`)
.then(data => {
return data.json();
})
.then(data2 => {
for (let i in data2) {
i !== uid && otherUsers.push(data2[i]);
}
this.setState(otherUsers);
})
.then(() => {

otherUsers.map(value => {
for (let i in value.userInfo) {
var selectedFlag = false;
var radiusFlag = false;

value.userInfo[i].meetingDuration.map(value2 => {
if (currentUser.meetingDuration.includes(value2)) {
selectedFlag = true;
}
});

value.userInfo[i].beverages.map(value2 => {
if (currentUser.beverages.includes(value2)) {
selectedFlag = true;
}
});

if (
this.getDistance(
currentUser.latitude,
currentUser.longitude,
value.userInfo[i].latitude,
value.userInfo[i].longitude
) < 4999
) {
radiusFlag = true;
}

if (selectedFlag === true && radiusFlag == true) {

 selectedUsers.push(value.userInfo[i]);
this.setState(selectedUsers);
}
}
});

});

fetch("https://meeting-app-7169f.firebaseio.com/meetings.json")
.then(response => response.json())
.then(data => {
for (let i in data) {
data[i].key = i;
meetings.push(data[i]);
}
})
.then(() => {
meetings.map((value, index) => {
value.sender === uid && currentUserMeetings.push(value);
value.receiver === uid && value.status === 'accepted' &&
this.setState({meetingAccepted: true})
});
})
.then(() => {
currentUserMeetings.length > 0 &&
this.setState({ meetingStatus: "true" });
})

.then(() => {
meetings.map((value, index) => {
if (value.receiver === uid && value.status === "pending" )
{
currentUserMeetingsRequests.push(value);
this.setState({meetingRequest: true,meetingStatus :true})
}
if(
value.receiver === uid && value.status === "accepted"
){
currentUserAcceptedMeetings.push(value);
this.setState({meetingAccepted: true,meetingStatus :true})
}
 });
});

radius(x) {
return (x * Math.PI) / 180;
}

getDistance(latC, lngC, latO, lngO) {

const R = 6378137;
const dLat = this.radius(latO - latC);
const dLong = this.radius(lngO - lngC);
const a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(this.radius(latC)) *
Math.cos(this.radius(latO)) *
Math.sin(dLong / 2) *
Math.sin(dLong / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const d = R * c;
return d;
}

dismiss() {
const { selectedVenues } = this.state;
console.log(selectedVenues);

action(index) {
const { selectedUsers } = this.state;
swal({
title: "Are you sure?",
text: `You Want To Meet ${selectedUsers[index].displayName}`,
icon: "warning",
buttons: true,
dangerMode: true
}).then(willDelete => {
if (willDelete) {
this.setState({
meetingDetails: { meetingWith: selectedUsers[index] }
});
this.setState({ meetingPoint: true, card: false });
 }
});
}

radioButtonValue(e) {
this.setState({
radioButtonValue: e.target.value
});
}

selectVenue(e, index) {
const { meetingDetails, venues, navigation } = this.state;
meetingDetails.meetingVenue = venues[index];
navigation.lat = venues[index].lat;
navigation.lng = venues[index].lng;
this.setState(meetingDetails);
this.setState(navigation);
}

showModal = () => {
this.setState({
visible: true
});
};

showModal2 = () => {

this.setState({
visible2: true
});
};

handleOk = e => {
this.setState({
visible: false
});
};

handleCancel = e => {
this.setState({
visible: false
});
};

handleOk2 = e => {
 this.setState({
visible2: false
});
};

handleCancel2 = e => {
this.setState({
visible2: false
});
};

getDirections() {
const DirectionsService = new google.maps.DirectionsService();
const { currentUser, navigation } = this.state;
DirectionsService.route(
{
origin: new google.maps.LatLng(
currentUser.latitude,
currentUser.longitude
),
destination: new google.maps.LatLng(navigation.lat, navigation.lng),
travelMode: google.maps.TravelMode.DRIVING
},
(result, status) => {
if (status === google.maps.DirectionsStatus.OK) {
this.setState({
directions: result
});
} else {
alert("Sorry! Can't calculate directions!");
}
}
);
}

getDirections2(venue) {
console.log(venue)

const DirectionsService = new google.maps.DirectionsService();

const { currentUser } = this.state;

DirectionsService.route(
{
origin: new google.maps.LatLng(
currentUser.latitude,
 currentUser.longitude
),
destination: new google.maps.LatLng(venue.lat, venue.lng),
travelMode: google.maps.TravelMode.DRIVING
},
(result, status) => {
if (status === google.maps.DirectionsStatus.OK) {
this.setState({
directions: result
});
} else {
alert("Sorry! Can't calculate directions!");
}
}
);
}

getTime(e) {
const time = e._d.toString().slice(16, 24);
const { meetingDetails } = this.state;
meetingDetails.meetingTime = time;
this.setState(meetingDetails);
}

getDate(e) {
const date = e._d.toString().slice(4, 15);
const { meetingDetails } = this.state;
meetingDetails.meetingDate = date;
this.setState(meetingDetails);
}

sendMeetingRequest() {
const { meetingDetails, radioButtonValue, uid } = this.state;
const database = firebase.database();
const meetings = database.ref(`meetings/`).push();

if (
radioButtonValue !== 0 &&
meetingDetails.meetingDate &&
meetingDetails.meetingTime
) {
meetings.set({
sender: uid,
receiver: meetingDetails.meetingWith.uid,
date: meetingDetails.meetingDate,
 time: meetingDetails.meetingTime,
venue: meetingDetails.meetingVenue,
status: "pending"
}).then(

setTimeout(()=>{window.location.reload()},1500)
)

} else {
swal("Access Denied", "Please Select The Required Details");
}
}

accept(key){
const database = firebase.database();
database.ref(`meetings/${key}`).update({ status: "accepted" }).then(
setTimeout(()=>{window.location.reload()},1500)
)
}

reject(key){
const database = firebase.database();
database.ref(`meetings/${key}`).set({}).then(
setTimeout(()=>{window.location.reload()},1500)
)

render() {
const {
meetingButton,
card,
selectedUsers,
meetingPoint,
venues,
meetingDetails,
currentUser,
navigation,
directions,
radioButtonValue,
meetingStatus,
currentUserMeetings,
currentUserMeetingsRequests,
currentUserAcceptedMeetings,
meetingRequest,
 meetingAccepted
} = this.state;

const radioStyle = {
display: "block",
height: "30px",
lineHeight: "30px"
};

let items = [
{ google: 'Google' }
];

return (
<div>
{ }
{meetingButton && !card && !meetingPoint && (
<div>
<a
href="#"
style={{ color: "black", margin : '16px' }}
onClick={() => {
this.props.changeScreen()
}}
className="myButton"
>
Edit Profile
</a>
{!meetingStatus && !meetingAccepted && !meetingRequest &&(
<div>
<h1
style={{
color: "antiquewhite",
fontFamily: "Times New Roman",
margin: "60px",
fontSize : "50px"
}}
>
You have not done any meeting yet!”, try creating a new
meeting!
</h1>
<a
href="#"
style={{ color: "black" }}
 onClick={() => {
this.setState({ meetingButton: false, card: true });
}}
className="myButton"
>
Set A Meeting !
</a>
</div>
)}
{meetingStatus &&(
<div>
<a
href="#"
style={{ color: "black" }}
onClick={() => {
this.setState({ meetingButton: false, card: true });
}}
className="myButton"
>
Set A Meeting !
</a>
<br />
<br />
<div>
<a
href="#"
style={{ color: "black" }}
onClick={this.showModal}
className="myButton"
>
<NotificationBadge count={currentUserMeetingsRequests.length}
effect={Effect.ROTATE_X}/>
Meeitng Requests
</a>

</div>
}
<Modal
title="Meeting Requests"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
{currentUserMeetingsRequests.length === 0 && <h1>You Don't Have
Any Request Right Now</h1>}
 {currentUserMeetingsRequests.map((value, index) => {
const sender = _.find(selectedUsers, {
uid: value.sender
});
return (
<div class="card">
<div class="header">
<div class="avatar">
<img
src={sender && sender.displayPicture}
alt=""
/>
</div>
</div>
<div class="card-body">
<div class="user-meta has-text-centered">
<h3 class="username">{sender &&
sender.displayName}</h3>
<h5 class="position">Meeting For : {sender &&
sender.meetingDuration[0]}</h5>
</div>
<div class="user-bio has-text-centered">
<p>
{sender && `${sender.displayName} Wants To Meet You
At ${value.venue.name} On ${value.date} Timing is ${value.time} Onwards`}
</p>
</div>
<div class="action has-text-centered">
<a href="#" class="button navBtn is-small"
onClick={this.showModal2}
>
Map Of Meeitng Location
</a>
<Modal
title="Map"
visible={this.state.visible2}
onOk={this.handleOk2}
onCancel={this.handleCancel2}
value={value}
>
<MyMapComponent
isMarkerShown

googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyAzhBEDUxDg83q1yrZ
5r9eSrOtnrNDaVG0&v=3.exp&libraries=geometry,drawing,places"
 loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `600px` }}
/>}
mapElement={<div style={{ height: `100%` }} />}
directions={directions}
originLatitude={currentUser.latitude}
originLongitude={currentUser.longitude}
navigationLatitude={value.venue.lat}
navigationLongitude={value.venue.lng}
/>
<br></br>
<div class="action has-text-centered">
<a
href="#"
style={{ color: "black" }}
onClick={
()=>{
this.getDirections2(value.venue)
}
}
class="button navBtn is-small"
>
Get Directions
</a>

</div>
</Modal>
</div>
<div class="action has-text-centered">
<a href="#" class="button is-small"
onClick={()=>{this.accept(value.key)}}>
Accept
</a>
<a href="#" class="button myBtn is-small"
onClick={()=>{this.reject(value.key)}}>
Reject
</a>
</div>
</div>
</div>
);
})}
</Modal>
<h1
style={{
 color: "antiquewhite",
fontFamily: "Times New Roman",
margin: "20px",
fontSize : "50px"
}}
>
Your Meetings Status
</h1>
{currentUserMeetings.map((value, index) => {
const sender = _.find(selectedUsers, {
uid: value.receiver
});

return (
<ReqCard style={{ width: 300, marginTop: 16 }}>
<Meta
avatar={
sender && <Avatar src={sender.displayPicture} />
}
title={sender && sender.displayName}
description={
sender &&
`${value.venue.name} - ${value.date} ${value.time}`
}
/>
<h4 className="edit">Status :
{value.status.toUpperCase()}</h4>
{
sender && value.status === "accepted" &&
<AddToCalendar
event={
{
title: `I Friend You's Meeting`,
description: `Meeting With ${sender.displayName} On
${value.date} At ${value.time} For ${sender.meetingDuration[0]}`,
location: value.venue.name,
}
}
listItems={items}
/>
}
</ReqCard>

);
 })

}
{
currentUserAcceptedMeetings.map((value,index)=>{
const receiver = _.find(selectedUsers, {
uid: value.sender
});

return (
<ReqCard style={{ width: 300, marginTop: 16 }}>
<Meta
avatar={
receiver && <Avatar src={receiver.displayPicture} />
}
title={receiver && receiver.displayName}
description={
receiver &&
`${value.venue.name} - ${value.date} ${value.time}`
}
/>
<h4 className="edit">Status :
{value.status.toUpperCase()}</h4>
{receiver && <AddToCalendar
event={
{
title: `I Friend You's Meeting`,
description: `Meeting With ${receiver.displayName} On
${value.date} At ${value.time} For ${receiver.meetingDuration[0]}`,
location: value.venue.name,
}
}
listItems={items}
/>}
</ReqCard>
);
})
}
</div>
)}
}
}
</div>
)}
{card && !meetingButton && !meetingPoint && (
 <div>
<h1 style={{ color: "antiquewhite", fontFamily: "Time New Roman",
fontSize : "30px"}}>
People Near You Around 5 KM Radius And Have Similarities With You
</h1>
<p style={{ color: "antiquewhite", fontFamily: "Time New Roman" }}>
Swipe Right To Set meeting And Left To Dismiss !
</p>
<Cards>
{selectedUsers.map((value, index) => (
<Card
onSwipeLeft={() => {
this.dismiss("swipe left");
}}
onSwipeRight={() => {
this.action(index);
}}
>
<div className="w3-container" style={{ width: "100%" }}>
<div
className="w3-card-4 "
style={{ minHeight: 250, backgroundColor: "rgb(13, 89,
107)" }}
>
<div className="w3-container w3-center">
<h3 style={{ fontSize: "20px" }}>
{value.displayName}
</h3>
<div>
<Carousel autoplay>
<div>
<img
style={{ height: "110px", width: "140px" }}
src={value.imgUrls[0]}
/>
</div>
<div>
<img
style={{ height: "110px", width: "140px" }}
src={value.imgUrls[1]}
/>
</div>
<div>
<img
style={{ height: "110px", width: "140px" }}
 src={value.imgUrls[2]}
/>
</div>
</Carousel>
</div>
{ }
<p>
<b>Nickname : {value.nickname}</b>
</p>
</div>
</div>
</div>
</Card>
))}
</Cards>
</div>
)}
{meetingPoint && !meetingButton && !card && (
<div>
<h1 style={{ color: "yellowgreen", fontFamily: "Time New Roman" }}>
Select Your Meeting Venue{" "}
</h1>
<RadioGroup
onChange={e => {
this.radioButtonValue(e);
}}
value={this.state.radioButtonValue}
>
{venues.map((value, index) => {
return (
<Radio
onClick={e => {
this.selectVenue(e, index);
}}
style={radioStyle}
value={index + 1}
>
<span className="radio-btn-value">
{value.name},{value.address}
</span>
</Radio>
);
})}
</RadioGroup>
<div>
 {radioButtonValue !== 0 && (
<a
href="#"
style={{ color: "black" }}
onClick={this.showModal}
className="myButton"
>
See Venue On Map
</a>
)}
<Modal
title="Map"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<MyMapComponent
isMarkerShown

googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyAzhBEDUxDg83q1yrZ
5r9eSrOtnrNDaVG0&v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `600px` }} />}
mapElement={<div style={{ height: `100%` }} />}
directions={directions}
originLatitude={currentUser.latitude}
originLongitude={currentUser.longitude}
navigationLatitude={navigation.lat}
navigationLongitude={navigation.lng}
/>
<br />
<a
href="#"
style={{ color: "black" }}
onClick={this.getDirections}
className="myButton"
>
Get Directions
</a>
</Modal>
</div>
<h1 style={{ color: "yellowgreen", fontFamily: "Time New Roman" }}>
Select Your Meeting Time{" "}
</h1>
<TimePicker
 onChange={e => {
this.getTime(e);
}}
defaultValue={moment("10:30", format)}
format={format}
/>
<h1 style={{ color: "yellowgreen", fontFamily: "Time New Roman" }}>
Select Your Meeting Date{" "}
</h1>
<div
style={{
width: 350,
margin: "0 auto",
border: "1px solid #d9d9d9",
borderRadius: 4,
color: "antiquewhite"
}}
>
<Calendar
fullscreen={false}
onChange={e => {
this.getDate(e);
}}
onPanelChange={e => {
this.onPanelChange(e);
}}
/>
</div>
<br />
<a
href="#"
style={{ color: "black" }}
onClick={() => {
this.sendMeetingRequest();
}}
className="myButton"
>
Send Meeting Request To {meetingDetails.meetingWith.displayName}
</a>
{ }
</div>
)}
</div>
);
}
}

const MyMapComponent = withScriptjs(

withGoogleMap(props => (
<GoogleMap
defaultZoom={14}
center={{ lat: props.originLatitude, lng: props.originLongitude }}
>
<Marker
position={{ lat: props.originLatitude, lng: props.originLongitude }}
/>
<Marker
position={{
lat: props.navigationLatitude,
lng: props.navigationLongitude
}}
/>

{props.directions && <DirectionsRenderer directions={props.directions} />}

</GoogleMap>
))
);

const mapStateToProps = state => {

return {
user: state
};
};

const mapDispatchToProps = dispatch => {

return {};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(Dashboard);