Calculate total call duration In React Component using starttime and endtime props - reactjs

I need to display the total time of call, the timelineData has already been getting from the props, I have tried to calculate the same using EndDate-StartDate but this logic does not seem to be correct.
import React from 'react'
import { Timeline, Typography, Col, Row } from 'antd'
import { connect } from 'react-redux'
const { Text } = Typography
export class DispositionTimeline extends React.Component {
render() {
return (
<Row className="dispopage">
<Col span={24}>
<Row>
<Col className="timeLineItem" span={24}>
<Row color="transparent">
<Col span={14}></Col>
<Col
style={{
paddingLeft: '8px',
fontWeight: '500'
}}
span={5}
>
Start Time
</Col>
<Col
style={{
paddingLeft: '8px',
fontWeight: '500'
}}
span={5}
>
End Time
</Col>
</Row>
<br />
<Timeline>
{this.props?.timeLineData?.map((value, index) => {
return (
<Timeline.Item>
<Col
className="timelineLabel"
span={14}
style={{
paddingRight: '16px'
}}
>
{value.name}
</Col>
<Col span={5}>
{/* {value.startTime} */}
{value.name !== 'End Call' && value.startTime}
</Col>
<Col span={5}>
{value.name === 'End Call' && value.startTime}
{value.endTime ? ` ${value.endTime}` : ''}
</Col>
</Timeline.Item>
)
})}
</Timeline>
</Col>
</Row>
<Row>
{this.props?.secondAgent?.anotherAgent === 'Primary Agent' ? (
<>
<Col className="timeLineEnd" span={18}>
<Text>Total Call Duration</Text>
</Col>
<Col className="timeLineEnd timeLineEndRight" span={6}>
<Text> {[...this.props?.timeLineData].pop()?.startTime}</Text>
</Col>
</>
) : (
''
)}
</Row>
</Col>
</Row>
)
}
}
export const mapStateToProps = (state, ownProps) => {
return {
timeLineData: ownProps?.timeLineData ? ownProps.timeLineData : state.timeLineData?.timeLineData,
totalDuration: state?.timeLineData?.payload,
secondAgent: state?.secondAgent?.secondAgent
}
}
export default connect(mapStateToProps, null)(DispositionTimeline)
The expression {[...this.props?.timeLineData].pop()?.startTime} is only displaying the startTime of Call. but I want to show the total time, I,e difference between end time and start time

Related

How can i delete width in react - bootstrap class?

I'm doing an internet-store, and i have a problem with top panel. I tried everything to fix it, but only when i change class row in dev tools i can get result.
row>* {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y);
}
i need to delete width from this class, but i don't know how to do it. If u can help me, it will be cool.
oh, if i replace component for nothing change.
<Container>
<Row className="mt-2">
<Col md={3}>
<TypeBar />
</Col>
<Col md={9} >
<BrandBar />
<DeviceList />
</Col>
</Row>
</Container>
const BrandBar = observer(() => {
const {device} = useContext(Context);
return (
<Row className="d-flex">
{device.brands.map(brand =>
<Card
style={{cursor: 'pointer'}}
key={brand.id}
className='p-2 align-items-center'
onClick={() => device.setSelectedBrand(brand)}
border={brand.id === device.selectedBrand.id ? 'danger' : 'light'}
>
{brand.name}
</Card>
)}
</Row>
)
})
When using bootstrap's containers always follows the Container > Row > Col order.
The class row>* is intended to select the cols, but instead is selecting your card.
Try doing like so
const BrandBar = observer(() => {
const { device } = useContext(Context);
return (
//Add a Container here
<Container>
<Row className="d-flex">
{device.brands.map((brand) => (
//Add a Col here
<Col>
<Card
style={{ cursor: 'pointer' }}
key={brand.id}
className="p-2 align-items-center"
onClick={() => device.setSelectedBrand(brand)}
border={brand.id === device.selectedBrand.id ? 'danger' : 'light'}
>
{brand.name}
</Card>
</Col>
))}
</Row>
</Container>
);
});

React Use EmailJS for multiple step Form

I have a React multiple step form, first and second steps is to collect user's image, the third step is user's contact information, and I want to send all this by use EmailJS.
Now I set up emailJS correctly so email does get sent(only last step form), but I don't know how to keep first and second steps' content.
Here is part of my current code:
import "./main.css";
import { Stepper, StepLabel, Step } from "#mui/material";
import Step1 from "../Steps/Step1";
import Step2 from "../Steps/Step2";
import Step3 from "../Steps/Step3";
import { multiStepContext } from "../Steps/StepContext";
import { useContext } from "react";
import { QontoConnector, QontoStepIcon } from "./CustomStepper";
export default function Main(){
const {currentStep, finalData} = useContext(multiStepContext);
function showStep(step){
switch(step){
case 1 :
return <Step1 />
case 2 :
return <Step2 />
case 3 :
return <Step3 />
}
}
return(
<div className="center-steeper">
<Stepper style={{width: "90%", marginTop: "20px", marginBottom: "35px"}}
activeStep={currentStep - 1} orientation="horizontal" alternativeLabel connector={<QontoConnector />}>
<Step>
<StepLabel StepIconComponent={QontoStepIcon}></StepLabel>
</Step>
<Step>
<StepLabel StepIconComponent={QontoStepIcon}></StepLabel>
</Step>
<Step>
<StepLabel StepIconComponent={QontoStepIcon}></StepLabel>
</Step>
</Stepper>
<div>
{showStep(currentStep)}
</div>
</div>
)
}
Step 1:
export default function Step1(){
...
return(
<div className="step-container">
...
<Col span={11} className="upload" style={{ marginRight: "25px" }}>
<div className="upload-photo">
<input id="fusk" type="file" onChange={onChange} style={{display:"none"}} name="origin_pic"/>
...
</div>
</Col>
...
<Row style={{ justifyContent: "space-between"}}>
<Col span={1}></Col>
<Col span={1}>
<button className="btn-next" onClick={() => setStep(2)}>Next</button>
</Col>
</Row>
</div>
)
}
Step 2:
export default function Step2(){
...
return(
<div className="step-container">
...
<input id="fusk" type="file" onChange={onChange} style={{display:"none"}} name="focus_pic"/>
...
<TextArea
className="text-input"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Write down your concern and what you want to achieve."
autoSize={{
minRows: 7,
maxRows: 10,
}}
name="concern"
/>
<Row style={{ justifyContent: "space-between", alignSelf: "flex-start" }}>
<Col span={1}>
<button className="btn-back" onClick={() => setStep(1)}>Back</button>
</Col>
<Col span={1}>
<button className="btn-next" onClick={() => setStep(3)}>Next</button>
</Col>
</Row>
</div>
)
}
Step 3:
export default function Step3(){
const form = useRef();
const onFinish = (values) => {
console.log('Received values of form: ', values);
};
const { setStep } = useContext(multiStepContext);
const sendEmail = (e) => {
e.preventDefault();
emailjs.sendForm('service_fc2puic', 'template_vpee0kb', form.current, '5EET8rJnlaH9MTLWH')
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
};
return(
<div className="step-container">
<h2 className="step-title">Step 3: Tell us your contact information</h2>
<form
{...formItemLayout}
ref={form}
name="register"
onFinish={onFinish}
scrollToFirstError
>
...
<Input placeholder="First name" name="first_name"/>
...
<Input placeholder="Last name" name="last_name"/>
...
<Input placeholder="Email" name="email"/>
...
<Input placeholder="Email"/>
...
<Input placeholder="Phone number" name="phone_number"/>
...
<Checkbox defaultChecked={false} disabled value="In-office" name="consultation"><h3 className="option-text">In-office</h3></Checkbox>
<br />
<Checkbox defaultChecked={false} value="Receiving customized video through Email" name="consultation"><h3 className="option-text">Receiving customized video through Email</h3></Checkbox>
<br />
<Checkbox defaultChecked={false} disabled value="Facetime" name="consultation"><h3 className="option-text">Facetime</h3></Checkbox>
<br />
<Checkbox defaultChecked={false} disabled value="Whatsapp" name="consultation"><h3 className="option-text">Whatsapp</h3></Checkbox>
...
</form>
<Row style={{ justifyContent: "space-between", alignSelf: "flex-start" }}>
<Col span={1}>
<button className="btn-back" onClick={() => setStep(2)}>Back</button>
</Col>
<Col span={1}>
<button className="btn-next btn-submit" onClick={sendEmail}>Submit</button>
</Col>
</Row>
</div>
)
}

react render using map on Grid

I'm trying to build a page that shows the weather in all the locations mentioned in a list.
I want to render a card for each location and sort the cards next to each other so every row will contain 5 location cards [][][][][],
currently, it renders only one under the other in a column:
how can I solve this?
(weather.favoritesWeather is a list that contains all the data which needs).
const FavoriteWeatherCards = weather.favoritesWeather.map(
(favoriteLocation) => (
<div>
<Row className="justify-content-md-center">
<Col md={3} >
<SmallConditionsCard data={favoriteLocation} />
</Col>
</Row>
</div>
)
);
return <div>
{FavoriteWeatherCards}
</div>;
};
code :
const SmallConditionsCard = ({data}) => {
const { location, weather } = data;
let history = useHistory();
const handleClick = () => {
history.push('/');
};
return (
<div>
<Card>
<CardHeader
sx={{ background: 'ghostwhite' }}
title={
<Typography align="center" variant="h5">
{location.name}
</Typography>
}
/>
<CardContent sx={{ textAlign: 'center' }}>
<WeatherIcon
number={weather[0].WeatherIcon}
xs={12}
sx={{ maxHeight: 200, maxWidth: 200 }}
/>
<Typography variant="h6">{weather[0].WeatherText}</Typography>
<Typography variant="p">
{formatTemp(weather[0].Temperature.Metric.Value, celcius)}
</Typography>
</CardContent>
<CardActions>
<Button size="small" onClick={handleClick}>Learn More </Button>
</CardActions>
</Card>
</div>
);
};
this is the result now:
If you are using react-bootstrap you need your container
const FavoriteWeatherCards = weather.favoritesWeather.map(
(favoriteLocation) => (
<Row className="justify-content-md-center">
<Col>
<SmallConditionsCard data={favoriteLocation} />
</Col>
</Row>
)
);
return <Container>
{FavoriteWeatherCards}
</Container>;
};
In case that you want to render something using material UI grid could be something like this
const FavoriteWeatherCards = weather.favoritesWeather.map(
(favoriteLocation) => (
<Grid item xs={3}>
<Item>
<SmallConditionsCard data={favoriteLocation} />
</item>
</Row>
</Grid>
)
);
return <Grid container spacing={2}>
{FavoriteWeatherCards}
</grid>;
};

next.js: Functions are not valid as a React child

i trying to use react-countdown for my page and it worked although there are a few notes like react-dom.development.js:88 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
here my full code
import Head from 'next/head'
import React from "react"
import Countdown from "react-countdown"
import {Container, Button, Row, Col, Form, FormControl, InputGroup} from 'react-bootstrap'
class Home extends React.Component {
render() {
// Random component
const Completionist = () => <span>You are good to go!</span>;
const styleCol = {
textAlign: 'center',
color: 'grey',
fontSize: '82px',
fontWeight: 600,
display: 'grid',
fontFamily: 'VERDANABOLD'
}
const styleColSpan = {
color: 'white',
fontSize: '16px'
}
// Renderer callback with condition
const renderer = ({ days, hours, minutes, seconds, completed }) => {
if (completed) {
// Render a complete state
return <Completionist />;
} else {
// Render a countdown
return (
<>
<Col style={styleCol} className={style.clockFrame} lg={3} md={12} sm={12} xs={12}>{days} <span style={styleColSpan}>DAYS</span></Col>
<Col style={styleCol} className={style.clockFrame} lg={3} md={12} sm={12} xs={12}>{hours} <span style={styleColSpan}>HOURS</span></Col>
<Col style={styleCol} className={style.clockFrame} lg={3} md={12} sm={12} xs={12}>{minutes} <span style={styleColSpan}>MINS</span></Col>
<Col style={styleCol} className={style.clockFrame} lg={3} md={12} sm={12} xs={12}>{seconds} <span style={styleColSpan}>SEC</span></Col>
</>
);
}
};
return (
<>
<Container fluid style={{backgroundColor: 'rgba(186, 205, 214, 1)'}} className={style.mainFrame}>
<Row style={{margin:'auto', paddingTop:'40px',
justifyContent:'center'}} className={style.clockFrame}>
{renderer}
<Countdown date={Date.now() + 100000} renderer={renderer} />
</Row>
</Container>
</>
)
}
}
export default Home
in chrome and firefox browsers, the function works.
enter image description here
but in safari return NaN.
enter image description here
anyone can help me please ?

how to hide one div when another div is active in react js

i have two div login and forget password. i want on forget password login block should be hide and when login block needed forget block should be hidden. Now i able to handle forgot password block , but login block i am not able to handle. I want login block hide on click of forgot button. I have written my own code below. Can some one please suggest me how can i do that.
import React, { useEffect, useState } from 'react';
import useForm from 'react-hook-form';
import { Redirect } from 'react-router-dom';
import './loginForm.css';
const { Header, Content, Footer } = Layout;
const LoginForm = () => {
const [forgotPass, setForgotPass] = useState(false);
if (redirect) {
return <Redirect to={routePaths.DASHBOARD} push />;
}
return (
<Layout>
<Header className="header">
<div>
<img src={logo} className="logo" />
<span className="lft">
<MessageOutlined />
</span>
</div>
</Header>
<Content className="content-screen">
<Row>
<Col xs={24} sm={24} md={8} />
<Col xs={24} sm={24} md={8}>
<div id="loginDiv" className="screen">
<Card title="Login to Relocatte" headStyle={{ backgroundColor: '#69c0ff', border: 1 }}>
<form onSubmit={handleSubmit(onSubmit)}>
{/* <h2 style={{textAlign: 'center'}}>Login</h2> */}
<Row>
<Col style={{ padding: 10 }}>
<Input size="large" placeholder="Enter User Email Here..." onChange={(e) => setValue('email', e.target.value)} />
<ErrorTag errors={errors} name="email" />
</Col>
<Col style={{ padding: 10 }}>
<Input type="password" size="large" placeholder="Enter User Password Here..." onChange={(e) => setValue('encryptedPassword', e.target.value)} />
<ErrorTag errors={errors} name="encryptedPassword" />
</Col>
<Col span={7} style={{ padding: 15 }} className="forget">
Sign Up
</Col>
<Col span={7} style={{ padding: 10 }}>
<Input style={{ cursor: 'pointer' }} type="submit" value="Login" className="login-form-button" shape="round" icon="rollback" />
</Col>
<Col span={10} style={{ padding: 15 }} className="forget">
<a href="#" onClick={() => setForgotPass(!forgotPass)}>Forgot Password</a>
{/* <button onClick={() => setForgotPass(!forgotPass)}>Forgot Password</button> */}
</Col>
</Row>
</form>
</Card>
</div>
</Col>
<Col xs={24} sm={24} md={8}>
{/* forgot div goes here */}
{forgotPass
&& (
<div className="screen">
<Card title="Forgot Password" headStyle={{ backgroundColor: '#69c0ff', border: 1 }}>
<form onSubmit={handleSubmit(onSubmit)}>
{/* <h2 style={{textAlign: 'center'}}>Login</h2> */}
<Row>
<Col style={{ padding: 10 }}>
<Input size="large" placeholder="Enter Registered Email Here..." onChange={(e) => setValue('', e.target.value)} />
<ErrorTag errors={errors} name="" />
</Col>
<Col span={12} style={{ padding: 10 }}>
<Input style={{ cursor: 'pointer' }} type="submit" value="Send Reset Link" className="login-form-button" shape="round" icon="rollback" />
</Col>
<Col span={10} style={{ padding: 15 , textAlign: "right"}} className="forget">
<a href="#" onClick={() => setForgotPass(!forgotPass)}>Login</a>
{/* <button onClick={() => setForgotPass(!forgotPass)}>Forgot Password</button> */}
</Col>
</Row>
</form>
</Card>
</div>
)}
</Col>
</Row>
</Content>
<Footer className="footer-back">
<Row>
<Col xs={24} sm={24} md={12} className="foot-child-1">
All Right Reserved© 2020 Relocatte
</Col>
<Col xs={24} sm={24} md={12} className="foot-child-2">
<span>Privacy Policy</span>
<span> | </span>
<span>Term & Conditions</span>
</Col>
</Row>
</Footer>
</Layout>
);
};
export default LoginForm;
Hi Please check this example:
import React, {useEffect, useState} from 'react';
const LoginForm = () => {
const [forgotPass, setForgotPass] = useState(false);
function handleLogin(event) {
}
function handleForgot(event) {
setForgotPass(!forgotPass);
}
function handleReset(event) {
alert('Your password is reset');
setForgotPass(!forgotPass);
}
return (
<div>
{forgotPass ?
(<div>
Username: <input/> <br/>
<button onClick={handleReset}>Reset Password</button>
</div>)
:
(<div>
Username: <input/> <br/>
Password: <input/> <br/>
<button onClick={handleLogin}>Login</button>
<button onClick={handleForgot}>Forgot Password</button>
</div>)
}
</div>
);
};
export default LoginForm;
There are 2 ways of doing it
Using ternary operator
return (<div className="container">
{forgotPass ? <div>Forget password div </div> : <div> Login Div</div>}
</div>)
Using CSS
return (<div className="container">
<div className={forgotPass ? "show" : "hide"}>Forget password div </div>
<div className={!forgotPass ? "show" : "hide"}> Login Div</div>}
</div>)
in your css:
.show { display: 'block' }
.hide { display: 'none' }

Resources