Skip to content

Commit 407133e

Browse files
ksraj123ksraj123
committed
integrated ticket discussion page with backend and implemented ticket editing and comment posting
1 parent 759d653 commit 407133e

File tree

7 files changed

+517
-332
lines changed

7 files changed

+517
-332
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"react-icons": "^3.10.0",
3838
"react-images": "^1.1.7",
3939
"react-lottie": "^1.2.3",
40+
"react-markdown": "^4.3.1",
4041
"react-markdown-editor-lite": "^1.1.4",
4142
"react-mde": "^10.2.1",
4243
"react-moment": "^0.9.7",

‎src/actions/authAction.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,9 @@ export const loginUser = (userInfo, history) => async (dispatch) => {
5050
localStorage.setItem('userId', decodedData._id)
5151
dispatch(setCurrentUser(decodedData));
5252

53+
// Update user name in localStorage
54+
localStorage.setItem('username', `${res.data.user.name.firstName} ${res.data.user.name.lastName}`)
55+
5356
// update user role in localStorage
5457
localStorage.setItem('admin', res.data.user.isAdmin)
5558

‎src/user/Admin/Tickets/NewTicketEditor/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React, { Component } from "react";
22
import CancelButton from "@material-ui/icons/ClearOutlined";
33
import SaveButton from "@material-ui/icons/SaveOutlined";
4+
import { ToastContainer, toast } from "react-toastify";
45
import "react-mde/lib/styles/css/react-mde-all.css";
56
import Button from "react-bootstrap/Button";
67
import Form from "react-bootstrap/Form";
78
import * as Showdown from "showdown";
89
import ReactMde from "react-mde";
910
import "./Editor.scss";
10-
import { ToastContainer, toast } from "react-toastify";
1111

1212
class Editor extends Component {
1313
constructor(props) {

‎src/user/Admin/Tickets/TicketContent/TicketContent.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Component } from "react";
22
import "./TicketContent.scss";
3-
import Moment from 'react-moment'
3+
import Moment from 'react-moment';
44
import { Image } from "react-bootstrap";
55
import BadgeElement from './BadgeElement';
66
import { withRouter } from "react-router-dom";
@@ -55,18 +55,18 @@ class TicketContent extends Component {
5555
{
5656
name: "User",
5757
grow: 1,
58-
// cell: (row) => (
59-
// <div>
60-
// <Image
61-
// src={userIcon2}
62-
// alt="icon"
63-
// rounded
64-
// className="profile-img"
65-
// roundedCircle
66-
// />
67-
// <span className="profile-text">Devesh Verma</span>
68-
// </div>
69-
// ),
58+
cell: (row) => (
59+
<div>
60+
<Image
61+
src={userIcon2}
62+
alt="icon"
63+
rounded
64+
className="profile-img"
65+
roundedCircle
66+
/>
67+
<span className="profile-text">{row.createdBy.name}</span>
68+
</div>
69+
),
7070
},
7171
{
7272
name: "Created At",

‎src/user/Admin/Tickets/TicketDashboard.js‎

Lines changed: 67 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ class TicketDashboard extends Component {
2424
solved: [],
2525
closed: [],
2626
editorMode: false,
27-
viewingTicket: null
27+
viewingTicket: null,
2828
};
2929
}
3030

@@ -75,15 +75,15 @@ class TicketDashboard extends Component {
7575
};
7676

7777
handleCreateNewTicket = async (newTicket) => {
78-
console.log("EXECUTED!")
79-
await Axios.post(`${BASE_URL}/ticket`, newTicket)
78+
console.log("EXECUTED!");
79+
await Axios.post(`${BASE_URL}/ticket`, newTicket);
8080
};
8181

8282
handleViewTicket = (id) => {
8383
this.setState({
84-
viewingTicket: id
85-
})
86-
}
84+
viewingTicket: id,
85+
});
86+
};
8787

8888
render() {
8989
const { view } = this.state;
@@ -95,68 +95,75 @@ class TicketDashboard extends Component {
9595
<div className="ticket-details">
9696
<div className="ticket-description">
9797
<div className="dashboard-title">Tickets</div>
98-
{!this.state.editorMode && this.state.all.length && !this.state.viewingTicket && (
99-
<React.Fragment>
100-
<div className="searchbar-container">
101-
<div className="searchbar">
102-
<span className="searchbar-icon">
103-
<SearchOutlinedIcon />
104-
</span>
105-
<Form>
106-
<Form.Control
107-
as="input"
108-
placeholder="Search Tickets"
109-
onChange={this.handleSearchBarChange}
110-
/>
111-
</Form>
98+
{!this.state.editorMode &&
99+
this.state.all.length &&
100+
!this.state.viewingTicket && (
101+
<React.Fragment>
102+
<div className="searchbar-container">
103+
<div className="searchbar">
104+
<span className="searchbar-icon">
105+
<SearchOutlinedIcon />
106+
</span>
107+
<Form>
108+
<Form.Control
109+
as="input"
110+
placeholder="Search Tickets"
111+
onChange={this.handleSearchBarChange}
112+
/>
113+
</Form>
114+
</div>
115+
<Button onClick={() => this.toggleNewTicketEditor(true)}>
116+
New Ticket
117+
</Button>
112118
</div>
113-
<Button onClick={() => this.toggleNewTicketEditor(true)}>
114-
New Ticket
115-
</Button>
116-
</div>
117-
<div className="ticket-status">
118-
<div className="tabs__container">
119-
<span className="nav__tab container">
120-
<ul className="nav__list__container">
121-
{[
122-
{ view: "all", opt: "All Tickets" },
123-
{ view: "open", opt: "Open" },
124-
{ view: "pending", opt: "Pending" },
125-
{ view: "onHold", opt: "On Hold" },
126-
{ view: "solved", opt: "Solved" },
127-
{ view: "closed", opt: "Closed" },
128-
].map((ele, index) => (
129-
<li
130-
key={index}
131-
className={
132-
view === ele.view
133-
? "nav__single__tab selected"
134-
: "nav__single__tab"
135-
}
136-
onClick={() => this.handleViewChange(ele.view)}
137-
>
138-
{ele.opt}
139-
</li>
140-
))}
141-
</ul>
142-
</span>
119+
<div className="ticket-status">
120+
<div className="tabs__container">
121+
<span className="nav__tab container">
122+
<ul className="nav__list__container">
123+
{[
124+
{ view: "all", opt: "All Tickets" },
125+
{ view: "open", opt: "Open" },
126+
{ view: "pending", opt: "Pending" },
127+
{ view: "onHold", opt: "On Hold" },
128+
{ view: "solved", opt: "Solved" },
129+
{ view: "closed", opt: "Closed" },
130+
].map((ele, index) => (
131+
<li
132+
key={index}
133+
className={
134+
view === ele.view
135+
? "nav__single__tab selected"
136+
: "nav__single__tab"
137+
}
138+
onClick={() => this.handleViewChange(ele.view)}
139+
>
140+
{ele.opt}
141+
</li>
142+
))}
143+
</ul>
144+
</span>
145+
</div>
143146
</div>
144-
</div>
145-
<div className="ticket-content">
146-
<TicketContent
147-
viewTicket={this.handleViewTicket}
148-
tickets={this.state[this.state.view]} />
149-
</div>
150-
</React.Fragment>
151-
)}
147+
<div className="ticket-content">
148+
<TicketContent
149+
viewTicket={this.handleViewTicket}
150+
tickets={this.state[this.state.view]}
151+
/>
152+
</div>
153+
</React.Fragment>
154+
)}
152155
{this.state.editorMode && !this.state.viewingTicket && (
153156
<NewTicketEditor
154157
save={this.handleCreateNewTicket}
155158
cancel={() => this.toggleNewTicketEditor(false)}
156159
/>
157160
)}
158161
{this.state.viewingTicket && (
159-
<TicketDisscussion back={this.handleViewTicket} />
162+
<TicketDisscussion
163+
currentUser={this.props.user}
164+
ticketId={this.state.viewingTicket}
165+
back={this.handleViewTicket}
166+
/>
160167
)}
161168
</div>
162169
</div>
@@ -168,6 +175,7 @@ class TicketDashboard extends Component {
168175
// map state to props
169176
const mapStateToProps = (state) => ({
170177
tickets: state.tickets,
178+
user: state.user,
171179
});
172180

173181
export default connect(mapStateToProps, { getTickets })(TicketDashboard);

0 commit comments

Comments
 (0)