Skip to content

Commit c23f19f

Browse files
author
Vivek Chowdhury
committed
Create dialog box and working on add skill functionality
1 parent f945949 commit c23f19f

File tree

6 files changed

+112
-11
lines changed

6 files changed

+112
-11
lines changed

‎public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>
3131
<div id="root"></div>
32+
3233
<!--
3334
This HTML file is a template.
3435
If you open it directly in the browser, you will see an empty page.

‎src/app/Shared/Dialog/DialogBox.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.modal-style {
2+
position: fixed;
3+
top: 0;
4+
left: 0;
5+
width: 100%;
6+
height: 100%;
7+
background: rgba(0, 0, 0, 0.6);
8+
z-index: 2000;
9+
}
10+
11+
.modal-main {
12+
position: fixed;
13+
background: white;
14+
min-width: 600px;
15+
min-height: 300px;
16+
height: auto;
17+
top: 50%;
18+
left: 50%;
19+
transform: translate(-50%, -50%);
20+
}
21+
22+
.dialog-footer {
23+
position: fixed;
24+
bottom: 0;
25+
padding: 10px;
26+
align-self: center;
27+
}
28+
29+
.dialog-header {
30+
color: white;
31+
}

‎src/app/Shared/Dialog/DialogBox.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from "react";
2+
import "./DialogBox.css";
3+
4+
const DialogBox = React.forwardRef((props, ref) => {
5+
return (
6+
<>
7+
{props.show && (
8+
<div ref={ref} className="backdrop modal-style">
9+
<div className="modal-main card border-primary mb-3">
10+
<div className="text-light bg-primary p-2 pb-2">
11+
{props.header ? props.header : "Header"}
12+
</div>
13+
<div className="m-2">{props.children}</div>
14+
<div className="dialog-footer">
15+
<button onClick={props.onSave} className="btn btn-primary mr-2">
16+
{props.saveLabel ? props.saveLabel : "Save"}
17+
</button>
18+
<button onClick={props.onClose} className="btn btn-danger">
19+
{props.closeLabel ? props.closeLabel : "Close"}
20+
</button>
21+
</div>
22+
</div>
23+
</div>
24+
)}
25+
</>
26+
);
27+
});
28+
29+
export default DialogBox;

‎src/app/User/Login/Login.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -63,18 +63,20 @@ function Login(props) {
6363
};
6464

6565
return (
66-
<div style={{ backgroundImage: `url(${bubbleimage})` }}>
67-
<div className="loginContainer">
68-
<div className="rightSection card border-primary mb-3">
69-
<LoginForm
70-
onChange={handleChange}
71-
{...user}
72-
onSubmit={handleSubmit}
73-
error={error}
74-
/>
66+
<>
67+
<div style={{ backgroundImage: `url(${bubbleimage})` }}>
68+
<div className="loginContainer">
69+
<div className="rightSection card border-primary mb-3">
70+
<LoginForm
71+
onChange={handleChange}
72+
{...user}
73+
onSubmit={handleSubmit}
74+
error={error}
75+
/>
76+
</div>
7577
</div>
7678
</div>
77-
</div>
79+
</>
7880
);
7981
}
8082

‎src/app/User/Profile/Profile.js‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import React, { useState } from "react";
1+
import React, { useState, useRef } from "react";
22
import { connect } from "react-redux";
3+
import ReactDOM from "react-dom";
34

5+
import DialogBox from "./../../Shared/Dialog/DialogBox";
46
import UserForm from "./UserForm";
57
import { updateProfile, registerUser } from "./../state/userActions";
68

@@ -40,6 +42,10 @@ function Profile(props) {
4042

4143
const [error, setError] = useState("");
4244

45+
const [showDialog, setShowDialog] = useState(false);
46+
47+
const dialogRef = useRef(null);
48+
4349
/**
4450
* @description This method is invoked when user change anything in input field. It stores the
4551
* updated value in member variable.
@@ -73,6 +79,19 @@ function Profile(props) {
7379
}
7480
};
7581

82+
const handleAddSkillRequest = () => {
83+
ReactDOM.createPortal(dialogRef, document.getElementById("root"));
84+
setShowDialog(true);
85+
};
86+
87+
const handleDialogClose = () => {
88+
setShowDialog(false);
89+
};
90+
91+
const handleDialogSave = () => {
92+
setShowDialog(false);
93+
};
94+
7695
return (
7796
<React.Fragment>
7897
<h2>User Profile</h2>
@@ -83,8 +102,17 @@ function Profile(props) {
83102
{...user}
84103
genderOptions={genderOptions}
85104
error={error}
105+
onAddSkillClicked={handleAddSkillRequest}
86106
/>
87107
</div>
108+
<DialogBox
109+
ref={dialogRef}
110+
show={showDialog}
111+
onClose={handleDialogClose}
112+
onSave={handleDialogSave}
113+
>
114+
<div>This is test dialog box, i am testing component right now</div>
115+
</DialogBox>
88116
</React.Fragment>
89117
);
90118
}

‎src/app/User/Profile/UserForm.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,16 @@ function UserForm(props) {
104104
inputPlaceholder="Enter short description"
105105
inputLabel="Short Description :"
106106
></FormInput>
107+
<label htmlFor="skillAdd" className="pr-3">
108+
Add Skills
109+
</label>
110+
<input
111+
id="skillAdd"
112+
type="button"
113+
className="btn btn-primary"
114+
onClick={props.onAddSkillClicked}
115+
value="+"
116+
></input>
107117

108118
<div className="form-group">
109119
<div className="col-sm-offset-2 col-sm-10">

0 commit comments

Comments
 (0)