sockets setup, notifications and added options to Donut navigation

Author: ksraj123

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

@@ -29,15 +29,15 @@ class TicketContent extends Component {
       {
         name: "Title",
         grow: 2,
-        selector: "titler",
+        selector: "title",
         sortable: true,
         maxWidth: "600px", // when using custom you should use width or maxWidth, otherwise, the table will default to flex grow behavior
         cell: (row) => <CustomTitle row={row} />,
       },
       {
         name: "Description",
         grow: 3,
-        selector: "plot",
+        selector: "shortDescription",
         wrap: true,
         sortable: true,
         format: (row) => `${row.shortDescription.slice(0, 100)}...`,
@@ -55,6 +55,8 @@ class TicketContent extends Component {
       {
         name: "User",
         grow: 1,
+        sortable: true,
+        selector: 'createdBy.name',
         cell: (row) => (
           <div>
             <Image
@@ -70,6 +72,8 @@ class TicketContent extends Component {
       },
       {
         name: "Created At",
+        sortable: true,
+        selector: 'createdAt',
         cell: (row) => (
           <div>
             <Moment format="DD MMM YYYY">{row.createdAt}</Moment>
@@ -79,6 +83,7 @@ class TicketContent extends Component {
       {
         name: "Comments",
         sortable: true,
+        selector: 'comments',
         cell: (row) => (
           <div>
             {row.comments}

src/user/Admin/Tickets/TicketDashboard.js

@@ -1,33 +1,57 @@
 import React, { Component } from "react";
 import "./TicketDashboard.scss";
 import Axios from "axios";
+import Moment from "react-moment";
 import { connect } from "react-redux";
+import { setUpSocket } from "./socket";
 import Form from "react-bootstrap/Form";
 import Button from "react-bootstrap/Button";
 import NewTicketEditor from "./NewTicketEditor";
+import socket from "../../dashboard/utils/socket";
 import { BASE_URL } from "../../../actions/baseApi";
 import TicketDisscussion from "./TicketDiscussions";
 import TicketContent from "./TicketContent/TicketContent";
 import { getTickets } from "../../../actions/ticketAction";
+import donutIcon from "../../../assets/svgs/donut-icon.svg";
 import Navigation from "../../dashboard/navigation/navigation";
 import SearchOutlinedIcon from "@material-ui/icons/SearchOutlined";
+import { Drawer, List, ListItem, ListItemText } from "@material-ui/core";
+import NotificationsNoneOutlinedIcon from "@material-ui/icons/NotificationsNoneOutlined";
 
 class TicketDashboard extends Component {
   constructor(props) {
     super(props);
     this.state = {
       view: "all",
+      ticket: true,
       all: [],
       open: [],
       pending: [],
       onHold: [],
       solved: [],
       closed: [],
+      socket: socket,
+      notifications: [],
       editorMode: false,
       viewingTicket: null,
+      notificationDrawer: false,
     };
   }
 
+  toggleDrawer = () => {
+    this.setState((state) => {
+      return {
+        notificationDrawer: !state.notificationDrawer,
+      };
+    });
+  };
+
+  addToNotification = (notification) => {
+    this.setState({
+      notifications: [notification, ...this.state.notifications],
+    });
+  };
+
   componentWillReceiveProps(nextProps) {
     console.log(nextProps.tickets.tickets);
     this.setState({
@@ -58,6 +82,8 @@ class TicketDashboard extends Component {
       this.props.getTickets();
     });
     this.divideAsPerStatus();
+    this.getTicketNotifications();
+    setUpSocket(this.state, donutIcon, this.addToNotification);
   }
 
   handleSearchBarChange = (e) => {};
@@ -74,9 +100,23 @@ class TicketDashboard extends Component {
     });
   };
 
+  getTicketNotifications = async () => {
+    const notifications = (
+      await Axios.get(`${BASE_URL}/notification/ticket/user/all`)
+    ).data.notifications;
+    this.setState({ notifications });
+  };
+
   handleCreateNewTicket = async (newTicket) => {
     console.log("EXECUTED!");
-    await Axios.post(`${BASE_URL}/ticket`, newTicket);
+    const ticket = (await Axios.post(`${BASE_URL}/ticket`, newTicket)).data
+      .ticket;
+    ticket.comments = 0;
+    this.setState({
+      all: [...this.state.all, ticket],
+      open: [...this.state.open, ticket],
+      editorMode: false,
+    });
   };
 
   handleViewTicket = (id) => {
@@ -86,15 +126,21 @@ class TicketDashboard extends Component {
   };
 
   render() {
+    console.log(this.state.notifications);
     const { view } = this.state;
     return (
       <div className="ticket">
         <div className="navigation">
-          <Navigation />
+          <Navigation ticket={this.state.ticket} />
         </div>
-        <div className="ticket-details">
+        <div className="ticket-details" id="ticket-shadow">
           <div className="ticket-description">
-            <div className="dashboard-title">Tickets</div>
+            <div className="dashboard-title">
+              Tickets
+              <Button variant="light" onClick={this.toggleDrawer}>
+                <NotificationsNoneOutlinedIcon />
+              </Button>
+            </div>
             {!this.state.editorMode &&
               this.state.all.length &&
               !this.state.viewingTicket && (
@@ -167,6 +213,32 @@ class TicketDashboard extends Component {
             )}
           </div>
         </div>
+        <Drawer
+          anchor={"right"}
+          open={this.state.notificationDrawer}
+          PaperProps={{ style: { position: "absolute", zIndex: "5000" } }}
+          BackdropProps={{ style: { position: "absolute", zIndex: "5000" } }}
+          ModalProps={{
+            container: document.getElementById("ticket-shadow"),
+            style: { position: "absolute", zIndex: "5000" },
+          }}
+          variant="temporary"
+          onClose={this.toggleDrawer}
+        >
+          <List className="list">
+            {this.state.notifications.map((notification) => (
+              <ListItem style={{display: "flex", flexDirection: "column", alignItems: "flex-start"}}>
+                <div>{notification.tag}</div>
+                <div>{notification.heading}</div>
+                <div>
+                  <Moment date={notification.createdAt} durationFromNow/>
+                </div>
+                <div>{notification.content}</div>
+                <hr></hr>
+              </ListItem>
+            ))}
+          </List>
+        </Drawer>
       </div>
     );
   }

src/user/Admin/Tickets/TicketDashboard.scss

@@ -19,6 +19,8 @@
     .ticket-description {
       display: flex;
       flex-direction: column;
+      height: 100vh;
+      overflow-y: hidden;
       .dashboard-title {
         font-family: Inter;
         font-style: normal;