Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes: #859 - First time users get Welcome message and introductory v… #3676

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fixes: #859 - First time users get Welcome message and introductory v… #3676

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
205 changes: 111 additions & 94 deletions src/components/ChatApp/MessageSection/DialogSection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,101 +8,118 @@ import Close from 'material-ui/svg-icons/navigation/close';

export default class DialogSection extends Component {

render(){
const closingStyle ={
position: 'absolute',
zIndex: 1200,
fill: '#444',
width: '26px',
height: '26px',
right: '10px',
top: '10px',
cursor:'pointer'
}
const customThemeBodyStyle = {
padding: 0,
textAlign: 'center',
backgroundColor:'#f9f9f9'
}
return(
<div>
{/* Login */}
<Dialog
className='dialogStyle'
modal={false}
open={this.props.openLogin}
autoScrollBodyContent={true}
bodyStyle={this.props.bodyStyle}
contentStyle={{width: '35%',minWidth: '300px'}}
onRequestClose={this.props.onRequestClose()}>
<Login {...this.props}
handleForgotPassword={this.props.onForgotPassword()}
handleSignUp={this.props.handleSignUp}/>
<Close style={closingStyle} onTouchTap={this.props.onRequestClose()} />
</Dialog>
{/* SignUp */}
<Dialog
className='dialogStyle'
modal={false}
open={this.props.openSignUp}
autoScrollBodyContent={true}
bodyStyle={this.props.bodyStyle}
contentStyle={{width: '35%',minWidth: '300px'}}
onRequestClose={this.props.onRequestClose()}>
<SignUp {...this.props}
onRequestClose={this.props.onRequestClose()}
onLoginSignUp={this.props.onLoginSignUp()} />
<Close style={closingStyle} onTouchTap={this.props.onRequestClose()} />
</Dialog>
{/* Forgot Password */}
<Dialog
className='dialogStyle'
modal={false}
open={this.props.openForgotPassword}
autoScrollBodyContent={true}
contentStyle={{width: '35%',minWidth: '300px'}}
onRequestClose={this.props.onRequestClose()}>
<ForgotPassword {...this.props}
onLoginSignUp={this.props.onLoginSignUp()}
showForgotPassword={this.showForgotPassword}/>
<Close style={closingStyle}
onTouchTap={this.props.onRequestClose()}/>
</Dialog>
{/* ThemeChanger */}
<Dialog
actions={this.props.customSettingsDone}
modal={false}
open={this.props.openThemeChanger}
autoScrollBodyContent={true}
bodyStyle={customThemeBodyStyle}
contentStyle={{width: '35%',minWidth: '300px'}}
onRequestClose={this.props.onRequestClose()}>
<div className='settingsComponents'>
{this.props.ThemeChangerComponents}
</div>
<Close style={closingStyle} onTouchTap={this.props.onRequestClose()} />
</Dialog>
</div>
);
}
render() {
const closingStyle = {
position: 'absolute',
zIndex: 1200,
fill: '#444',
width: '26px',
height: '26px',
right: '10px',
top: '10px',
cursor: 'pointer'
}
const customThemeBodyStyle = {
padding: 0,
textAlign: 'center',
backgroundColor: '#f9f9f9'
}
return (
<div>
{/* Login */}
<Dialog
className='dialogStyle'
modal={false}
open={this.props.openLogin}
autoScrollBodyContent={true}
bodyStyle={this.props.bodyStyle}
contentStyle={{ width: '35%', minWidth: '300px' }}
onRequestClose={this.props.onRequestClose()}>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): Event handlers are being called immediately instead of passed as references

Throughout the component, event handlers like onRequestClose are being called immediately (e.g., this.props.onRequestClose()) instead of passed as references (this.props.onRequestClose). This can lead to unexpected behavior and performance issues. Consider changing these to pass the function references directly.

<Login {...this.props}
handleForgotPassword={this.props.onForgotPassword()}
handleSignUp={this.props.handleSignUp} />
<Close style={closingStyle} onTouchTap={this.props.onRequestClose()} />
</Dialog>
Comment on lines +30 to +42
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (performance): Consider lazy-loading the tour video for better initial load performance

The new tour Dialog with an embedded YouTube video might impact the initial load time. Consider lazy-loading this component or loading the video on-demand to improve performance.

<React.Suspense fallback={<div>Loading...</div>}>
  <Dialog
    className='dialogStyle'
    modal={false}
    open={this.props.openLogin}
    autoScrollBodyContent={true}
    bodyStyle={this.props.bodyStyle}
    contentStyle={{ width: '35%', minWidth: '300px' }}
    onRequestClose={this.props.onRequestClose}>
    <LazyLogin {...this.props} handleForgotPassword={this.props.onForgotPassword} handleSignUp={this.props.handleSignUp} />
    <Close style={closingStyle} onTouchTap={this.props.onRequestClose} />
  </Dialog>
</React.Suspense>

{/* SignUp */}
<Dialog
className='dialogStyle'
modal={false}
open={this.props.openSignUp}
autoScrollBodyContent={true}
bodyStyle={this.props.bodyStyle}
contentStyle={{ width: '35%', minWidth: '300px' }}
onRequestClose={this.props.onRequestClose()}>
<SignUp {...this.props}
onRequestClose={this.props.onRequestClose()}
onLoginSignUp={this.props.onLoginSignUp()} />
<Close style={closingStyle} onTouchTap={this.props.onRequestClose()} />
</Dialog>
{/* Forgot Password */}
<Dialog
className='dialogStyle'
modal={false}
open={this.props.openForgotPassword}
autoScrollBodyContent={true}
contentStyle={{ width: '35%', minWidth: '300px' }}
onRequestClose={this.props.onRequestClose()}>
<ForgotPassword {...this.props}
onLoginSignUp={this.props.onLoginSignUp()}
showForgotPassword={this.showForgotPassword} />
<Close style={closingStyle}
onTouchTap={this.props.onRequestClose()} />
</Dialog>
{/* ThemeChanger */}
<Dialog
actions={this.props.customSettingsDone}
modal={false}
open={this.props.openThemeChanger}
autoScrollBodyContent={true}
bodyStyle={customThemeBodyStyle}
contentStyle={{ width: '35%', minWidth: '300px' }}
onRequestClose={this.props.onRequestClose()}>
<div className='settingsComponents'>
{this.props.ThemeChangerComponents}
</div>
<Close style={closingStyle} onTouchTap={this.props.onRequestClose()} />
</Dialog>
<Dialog
contentStyle={{ width: '610px' }}
title="Welcome to SUSI Web Chat"
open={this.props.tour}
>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/9T3iMoAUKYA"
gesture="media"
allow="encrypted-media"
>
</iframe>
<Close style={closingStyle} onTouchTap={this.props.onRequestCloseTour()} />
</Dialog>
</div>
);
}
}

DialogSection.propTypes = {
openLogin: PropTypes.bool,
openSignUp: PropTypes.bool,
openForgotPassword: PropTypes.bool,
openHardwareChange: PropTypes.bool,
openThemeChanger: PropTypes.bool,
onLoginSignUp:PropTypes.func,
handleSignUp: PropTypes.func,
ServerChangeActions: PropTypes.array,
HardwareActions: PropTypes.array,
customSettingsDone: PropTypes.object,
ThemeChangerComponents: PropTypes.array,
actions: PropTypes.object,
bodyStyle: PropTypes.object,
onRequestClose: PropTypes.func,
onSaveThemeSettings: PropTypes.func,
onForgotPassword: PropTypes.func,
onSignedUp: PropTypes.func
openLogin: PropTypes.bool,
openSignUp: PropTypes.bool,
openForgotPassword: PropTypes.bool,
openHardwareChange: PropTypes.bool,
openThemeChanger: PropTypes.bool,
tour: PropTypes.bool,
onLoginSignUp: PropTypes.func,
handleSignUp: PropTypes.func,
ServerChangeActions: PropTypes.array,
HardwareActions: PropTypes.array,
customSettingsDone: PropTypes.object,
ThemeChangerComponents: PropTypes.array,
actions: PropTypes.object,
bodyStyle: PropTypes.object,
onRequestClose: PropTypes.func,
onRequestCloseTour: PropTypes.func,
onSaveThemeSettings: PropTypes.func,
onForgotPassword: PropTypes.func,
onSignedUp: PropTypes.func
};
41 changes: 32 additions & 9 deletions src/components/ChatApp/MessageSection/MessageSection.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@ import FloatingActionButton from 'material-ui/FloatingActionButton';
import NavigateDown from 'material-ui/svg-icons/navigation/expand-more';
import * as Actions from '../../../actions/';
import Translate from '../../Translate/Translate.react';
import Cookies from 'universal-cookie';


const cookies=new Cookies();
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚨 suggestion (security): Consider implications of using cookies for user privacy and data persistence

The introduction of cookies should be carefully considered in terms of user privacy and data persistence. Ensure that you're complying with relevant data protection regulations and that users are informed about the use of cookies if necessary.

Suggested change
const cookies=new Cookies();
const cookies = new Cookies({
secure: true,
sameSite: 'strict'
});


function getStateFromStores() {
var themeValue=[];
Expand All @@ -36,7 +40,8 @@ function getStateFromStores() {
SnackbarOpenBackground: false,
messages: MessageStore.getAllForCurrentThread(),
thread: ThreadStore.getCurrent(),
currTheme: UserPreferencesStore.getTheme(),
currTheme: UserPreferencesStore.getTheme(),
tour:true,
search: false,
showLoading: MessageStore.getLoadStatus(),
showLogin: false,
Expand Down Expand Up @@ -166,7 +171,7 @@ class MessageSection extends Component {
};

state = {
showLogin: false
showLogin: false
};

constructor(props) {
Expand All @@ -181,7 +186,8 @@ class MessageSection extends Component {
'button':this.state.button.substring(1)

};
}
}


handleColorChange = (name,color) => {
// Current Changes
Expand Down Expand Up @@ -331,7 +337,7 @@ class MessageSection extends Component {
showLogin: false,
showSignUp: false,
showThemeChanger: false,
openForgotPassword: false
openForgotPassword: false,
});

if(prevThemeSettings && prevThemeSettings.hasOwnProperty('currTheme') && prevThemeSettings.currTheme==='custom'){
Expand Down Expand Up @@ -379,7 +385,17 @@ class MessageSection extends Component {
});
}
}
handleCloseTour = ()=>{
this.setState({
showLogin: false,
showSignUp: false,
showThemeChanger: false,
openForgotPassword: false,
tour:false
});
cookies.set('visited', true, { path: '/' });

}
// Save Custom Theme settings on server
saveThemeSettings = () => {
let customData='';
Expand Down Expand Up @@ -596,11 +612,13 @@ class MessageSection extends Component {

componentWillUnmount() {
MessageStore.removeChangeListener(this._onChange.bind(this));
ThreadStore.removeChangeListener(this._onChange.bind(this));
ThreadStore.removeChangeListener(this._onChange.bind(this));

}

componentWillMount() {


if (this.props.location) {
if (this.props.location.state) {
if (this.props.location.state.hasOwnProperty('showLogin')) {
Expand Down Expand Up @@ -641,7 +659,8 @@ class MessageSection extends Component {
// do nothing
}
}
})
})

}

invertColorTextArea =() => {
Expand Down Expand Up @@ -674,7 +693,7 @@ class MessageSection extends Component {
var messagePane;
var textArea;
var buttonColor;
var textColor;
var textColor;

switch(this.state.currTheme){
case 'custom':{
Expand Down Expand Up @@ -940,10 +959,14 @@ class MessageSection extends Component {
actions={actions}
handleSignUp={this.handleSignUp}
customSettingsDone={customSettingsDone}
onRequestClose={()=>this.handleClose}
onRequestClose={()=>this.handleClose}
onRequestCloseTour={()=>this.handleCloseTour}
onSaveThemeSettings={()=>this.handleSaveTheme}
onLoginSignUp={()=>this.handleOpen}
onForgotPassword={()=>this.forgotPasswordChanged} />
onForgotPassword={()=>this.forgotPasswordChanged}
tour={!cookies.get('visited')}

/>
</div>)
: (
<div className='message-pane'>
Expand Down