Skip to content

Commit 1fb2370

Browse files
ksraj123ksraj123
committed
added spinners to add remove moderators modal
1 parent 40ef27b commit 1fb2370

File tree

3 files changed

+150
-68
lines changed

3 files changed

+150
-68
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"react-ga": "^3.1.2",
3737
"react-icons": "^3.10.0",
3838
"react-images": "^1.1.7",
39+
"react-loading-overlay": "^1.0.1",
3940
"react-lottie": "^1.2.3",
4041
"react-markdown": "^4.3.1",
4142
"react-markdown-editor-lite": "^1.1.4",

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

Lines changed: 137 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import Modal from "react-bootstrap/Modal";
66
import Image from "react-bootstrap/Image";
77
import Button from "react-bootstrap/Button";
88
import Dropdown from "react-bootstrap/Dropdown";
9+
import LoadingOverlay from "react-loading-overlay";
10+
import ClockLoader from "react-spinners/ClockLoader";
911
import { BASE_URL } from "../../../../actions/baseApi";
12+
import { ToastContainer, toast } from "react-toastify";
1013
import PeopleAltIcon from "@material-ui/icons/PeopleAlt";
1114
import userIcon2 from "../../../../assets/images/userIcon2.jpg";
1215
import CheckOutlinedIcon from "@material-ui/icons/CheckOutlined";
@@ -25,6 +28,7 @@ class Filter extends Component {
2528
author: null,
2629
modal: null,
2730
status: [],
31+
spinner: "",
2832
tags: [],
2933
search: "",
3034
allTags: Array.from(
@@ -153,8 +157,13 @@ class Filter extends Component {
153157
};
154158

155159
getUsers = async () => {
156-
const users = (await Axios.get(`${BASE_URL}/ticket/users/all`)).data.users;
157-
this.setState({ users });
160+
try {
161+
const users = (await Axios.get(`${BASE_URL}/ticket/users/all`)).data
162+
.users;
163+
this.setState({ users });
164+
} catch (err) {
165+
console.log(err);
166+
}
158167
};
159168

160169
handleViewChange = (view) => {
@@ -167,16 +176,47 @@ class Filter extends Component {
167176
}
168177
}
169178

170-
addModerator = async (userId) => {
171-
const users = (await Axios.post(`${BASE_URL}/ticket/moderator/${userId}`))
172-
.data.users;
173-
this.setState({ users });
179+
addModerator = (userId) => {
180+
this.setState(
181+
{
182+
spinner: "Adding user as Moderator...",
183+
},
184+
async () => {
185+
try {
186+
this.setState({
187+
users: (await Axios.post(`${BASE_URL}/ticket/moderator/${userId}`))
188+
.data.users,
189+
spinner: "",
190+
});
191+
} catch (err) {
192+
console.log(err);
193+
toast.error("Something went wrong! Could not add user as Moderator")
194+
this.setState({spinner: ""})
195+
}
196+
}
197+
);
174198
};
175199

176-
removeModerator = async (userId) => {
177-
const users = (await Axios.delete(`${BASE_URL}/ticket/moderator/${userId}`))
178-
.data.users;
179-
this.setState({ users });
200+
removeModerator = (userId) => {
201+
this.setState(
202+
{
203+
spinner: "Adding user as Moderator...",
204+
},
205+
async () => {
206+
try {
207+
this.setState({
208+
users: (
209+
await Axios.delete(`${BASE_URL}/ticket/moderator/${userId}`)
210+
).data.users,
211+
spinner: "",
212+
});
213+
} catch (err) {
214+
console.log(err);
215+
toast.error("Something went wrong! Could not remove user as Moderator")
216+
this.setState({spinner: ""})
217+
}
218+
}
219+
);
180220
};
181221

182222
render() {
@@ -310,69 +350,98 @@ class Filter extends Component {
310350
show={!!this.state.modal}
311351
onHide={this.toggleModal}
312352
>
313-
<Modal.Header closeButton>
314-
<Modal.Title>Manage Moderators</Modal.Title>
315-
</Modal.Header>
316-
<Modal.Body style={{ height: "500px", overflowY: "scroll" }}>
317-
<div className="ticket-tabs">
318-
<span className="nav__tab container">
319-
<ul className="nav__list__container">
320-
{[
321-
{ view: "add", opt: "Add" },
322-
{ view: "remove", opt: "Remove" },
323-
].map((ele, index) => (
324-
<li
325-
key={index}
326-
className={
327-
this.state.modal.view === ele.view
328-
? "nav__single__tab selected"
329-
: "nav__single__tab"
330-
}
331-
onClick={() => this.handleViewChange(ele.view)}
332-
>
333-
{ele.opt}
334-
</li>
335-
))}
336-
</ul>
337-
</span>
338-
</div>
339-
{this.state.modal.view === "add" &&
340-
this.state.users.map((ele, index) => (
341-
<div key={index}>
342-
{!ele.isTicketsModerator && (
343-
<div className="moderator-modal-user">
344-
{userInfo(ele)}
345-
<Button
346-
style={{ marginLeft: "16px" }}
347-
onClick={() => this.addModerator(ele._id.toString())}
348-
>
349-
Add
350-
</Button>
351-
</div>
352-
)}
353-
</div>
354-
))}
355-
{this.state.modal.view === "remove" &&
356-
this.state.users.map((ele, index) => (
357-
<div key={index}>
358-
{ele.isTicketsModerator && (
359-
<div className="moderator-modal-user">
360-
{userInfo(ele)}
361-
<Button
362-
style={{ marginLeft: "16px" }}
363-
onClick={() =>
364-
this.removeModerator(ele._id.toString())
353+
<LoadingOverlay
354+
className="discussion"
355+
active={!!this.state.spinner}
356+
text={this.state.spinner}
357+
spinner={<ClockLoader color={"#1A73E8"} />}
358+
styles={{
359+
spinner: (base) => ({
360+
...base,
361+
width: "100px",
362+
"& svg circle": {
363+
stroke: "rgba(26, 115, 232, 0.5)",
364+
},
365+
}),
366+
}}
367+
>
368+
<Modal.Header closeButton>
369+
<Modal.Title>Manage Moderators</Modal.Title>
370+
</Modal.Header>
371+
<Modal.Body style={{ height: "500px", overflowY: "scroll" }}>
372+
<div className="ticket-tabs">
373+
<span className="nav__tab container">
374+
<ul className="nav__list__container">
375+
{[
376+
{ view: "add", opt: "Add" },
377+
{ view: "remove", opt: "Remove" },
378+
].map((ele, index) => (
379+
<li
380+
key={index}
381+
className={
382+
this.state.modal.view === ele.view
383+
? "nav__single__tab selected"
384+
: "nav__single__tab"
365385
}
386+
onClick={() => this.handleViewChange(ele.view)}
366387
>
367-
Remove
368-
</Button>
388+
{ele.opt}
389+
</li>
390+
))}
391+
</ul>
392+
</span>
393+
</div>
394+
{this.state.modal.view === "add" &&
395+
this.state.users
396+
?.filter((ele) => !ele.isTicketsModerator)
397+
.map((ele, index) => (
398+
<div key={index}>
399+
<div className="moderator-modal-user">
400+
{userInfo(ele)}
401+
<Button
402+
style={{ marginLeft: "16px" }}
403+
onClick={() =>
404+
this.addModerator(ele._id.toString())
405+
}
406+
>
407+
Add
408+
</Button>
409+
</div>
369410
</div>
370-
)}
371-
</div>
372-
))}
373-
</Modal.Body>
411+
))}
412+
{this.state.modal.view === "remove" &&
413+
this.state.users?.map((ele, index) => (
414+
<div key={index}>
415+
{ele.isTicketsModerator && (
416+
<div className="moderator-modal-user">
417+
{userInfo(ele)}
418+
<Button
419+
style={{ marginLeft: "16px" }}
420+
onClick={() =>
421+
this.removeModerator(ele._id.toString())
422+
}
423+
>
424+
Remove
425+
</Button>
426+
</div>
427+
)}
428+
</div>
429+
))}
430+
</Modal.Body>
431+
</LoadingOverlay>
374432
</Modal>
375433
)}
434+
<ToastContainer
435+
draggable
436+
rtl={false}
437+
pauseOnHover
438+
closeOnClick
439+
autoClose={5000}
440+
pauseOnFocusLoss
441+
newestOnTop={false}
442+
position="top-right"
443+
hideProgressBar={false}
444+
/>
376445
</div>
377446
);
378447
}

‎src/user/Admin/Tickets/Filter/Filter.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,15 @@
5353
border-bottom: 1px solid rgba(0,0,0,.12);
5454
padding-bottom: 20px;
5555
}
56+
57+
.modal{
58+
._loading_overlay_wrapper{
59+
display: flex;
60+
flex-direction: column;
61+
height: 100%;
62+
min-height: auto;
63+
._loading_overlay_overlay{
64+
height: 100%;
65+
}
66+
}
67+
}

0 commit comments

Comments
 (0)