basic integration with backend and integrated dashboard and ticketDiscussion page

ksraj123 · ksraj123 · commit 759d6530aedf · 2020-09-03T01:53:52.000+05:30
diff --git a/src/router.js b/src/router.js
@@ -24,7 +24,6 @@ import Activity from "./user/Activity/Activity";
 import IntegrationsPage from "./user/integrations/IntegrationsPage/IntegrationsPage";
 import UserIntegrations from "./user/integrations/UserIntegrations/UserIntegrations";
 import TicketDashboard from "../src/user/Admin/Tickets/TicketDashboard";
-import TicketDiscussion from "../src/user/Admin/Tickets/TicketDiscussions";
 
 const Router = () => (
   <BrowserRouter>
@@ -50,7 +49,6 @@ const Router = () => (
       <PrivateRoute exact path="/setup" component={Setup} />
       <AdminRoute exact path="/org-settings" component={CommunitySetting} />
       <AdminRoute exact path="/activity/:userId" component={Activity} />
-      <AdminRoute exact path="/tickets" component={TicketDashboard} />
       <PrivateRoute exact path="/insight" component={Insight} />
       <PrivateRoute exact path="/admin" component={Admin} />
       <PrivateRoute exact path="/integrations" component={IntegrationsPage} />
@@ -59,11 +57,7 @@ const Router = () => (
         path="/userintegrations"
         component={UserIntegrations}
       />
-      <PrivateRoute
-        exact
-        path="/ticketdiscussion"
-        component={TicketDiscussion}
-      />
+      <PrivateRoute exact path="/tickets" component={TicketDashboard} />
       <Route component={NotFound} />
     </Switch>
   </BrowserRouter>
diff --git a/src/user/Admin/Tickets/NewTicketEditor/index.js b/src/user/Admin/Tickets/NewTicketEditor/index.js
@@ -1,13 +1,13 @@
 import React, { Component } from "react";
 import CancelButton from "@material-ui/icons/ClearOutlined";
 import SaveButton from "@material-ui/icons/SaveOutlined";
-import { ToastContainer, toast } from "react-toastify";
 import "react-mde/lib/styles/css/react-mde-all.css";
 import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
 import * as Showdown from "showdown";
 import ReactMde from "react-mde";
 import "./Editor.scss";
+import { ToastContainer, toast } from "react-toastify";
 
 class Editor extends Component {
   constructor(props) {
@@ -20,18 +20,24 @@ class Editor extends Component {
     };
   }
 
-    // handleSave = () => {
-    //   const { title, content, shortDescription } = this.state;
-    //   const { save } = this.props;
-    //   save(
-    //     {
-    //       title,
-    //       content,
-    //       shortDescription,
-    //       status: "OPEN"
-    //     }
-    //   );
-    // };
+  handleSave = () => {
+    const { title, content, shortDescription } = this.state;
+    const { save } = this.props;
+    const newTicket = {
+      title,
+      content,
+      shortDescription,
+    };
+    if (newTicket.shortDescription.length < 10) {
+      toast.error("Short description should be atleast 10 characters long");
+    } else if (newTicket.content.length < 10) {
+      toast.error("Ticket content should be atleast 10 characters long");
+    } else if (newTicket.title.length < 10) {
+      toast.error("Title should be atleast 10 characters long");
+    } else {
+      save(newTicket);
+    }
+  };
 
   setContent = (content) => this.setState({ content });
 
@@ -67,47 +73,55 @@ class Editor extends Component {
           <Form.Label className="field-title">Title</Form.Label>
           <Form.Control
             as="input"
+            value={title}
+            maxLength="50"
+            required={true}
             name="ticketTitle"
             className="searchbar"
-            value={title}
             onChange={this.setTitle}
-            maxlength="50"
-            isInvalid={this.state.shortDescription.length >= 50}
+            isInvalid={this.state.title.length >= 50}
           />
         </Form>
         <Form>
           <Form.Label className="field-title">Description</Form.Label>
           <Form.Control
             as="textarea"
-            name="ticketDescription"
-            maxlength="100"
+            maxLength="100"
             className="searchbar"
+            name="ticketDescription"
             value={this.state.shortDescription}
             onChange={this.setShortDescription}
             isInvalid={this.state.shortDescription.length >= 100}
           />
         </Form>
-        <Form>
-        </Form>
+        <Form></Form>
         <ReactMde
-          onChange={this.setContent}
           value={content}
-          onTabChange={this.setSelectedTab}
           selectedTab={selectedTab}
+          onChange={this.setContent}
+          onTabChange={this.setSelectedTab}
           generateMarkdownPreview={(markdown) =>
             Promise.resolve(converter.makeHtml(markdown))
           }
         />
         <div className="top-controls">
-          <Button
-            // onClick={this.handleSave}
-            variant="primary"
-          >
+          <Button onClick={this.handleSave} variant="primary">
             <span className="vc">
               <SaveButton /> Save
             </span>
           </Button>
         </div>
+        <ToastContainer
+          draggable
+          rtl={false}
+          pauseOnHover
+          closeOnClick
+          autoClose={5000}
+          pauseOnFocusLoss
+          newestOnTop={false}
+          position="top-right"
+          hideProgressBar={false}
+        />
       </div>
     );
   }
diff --git a/src/user/Admin/Tickets/TicketContent/TicketContent.js b/src/user/Admin/Tickets/TicketContent/TicketContent.js
@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import "./TicketContent.scss";
+import Moment from 'react-moment'
 import { Image } from "react-bootstrap";
 import BadgeElement from './BadgeElement';
 import { withRouter } from "react-router-dom";
@@ -9,6 +10,12 @@ import userIcon2 from "../../../../assets/images/userIcon2.jpg";
 
 class TicketContent extends Component {
   
+  handleRowClick = (arg1) => {
+    console.log("Row Clicked!")
+    console.log(arg1)
+    this.props.viewTicket(arg1._id)
+  }
+
   render() {
 
     const CustomTitle = ({ row }) => (
@@ -21,6 +28,7 @@ class TicketContent extends Component {
     const columns = [
       {
         name: "Title",
+        grow: 2,
         selector: "titler",
         sortable: true,
         maxWidth: "600px", // when using custom you should use width or maxWidth, otherwise, the table will default to flex grow behavior
@@ -32,19 +40,17 @@ class TicketContent extends Component {
         selector: "plot",
         wrap: true,
         sortable: true,
-        format: (row) => `${row.content.shortDescription.slice(0, 100)}...`,
+        format: (row) => `${row.shortDescription.slice(0, 100)}...`,
       },
       {
         name: "Status",
         grow: 1,
         // eslint-disable-next-line react/no-array-index-key
-        // cell: (row) => (
-        //   <div>
-        //     {row.genres.map((genre, i) => (
-        //       <BadgeElement ticketState={genre} />
-        //     ))}
-        //   </div>
-        // ),
+        cell: (row) => (
+          <div>
+            <BadgeElement ticketState={row.status} />
+          </div>
+        ),
       },
       {
         name: "User",
@@ -63,25 +69,35 @@ class TicketContent extends Component {
         // ),
       },
       {
-        name: "Created At"
+        name: "Created At",
+        cell: (row) => (
+          <div>
+            <Moment format="DD MMM YYYY">{row.createdAt}</Moment>
+          </div>
+        )
       },
       {
-        name: "Comments"
+        name: "Comments",
+        sortable: true,
+        cell: (row) => (
+          <div>
+            {row.comments}
+          </div>
+        )
       }
     ];
 
     return (
       <DataTable
-        // title={this.state.selectedState}
+        pagination
         columns={columns}
+        pointerOnHover={true}
+        highlightOnHover={true}
         data={this.props.tickets}
         customStyles={customStyles}
-        pagination
-        paginationPerPage={Math.floor((window.innerHeight - 220) / 85)}
-        highlightOnHover={true}
-        pointerOnHover={true}
         paginationRowsPerPageOptions={[]}
         onRowClicked={this.handleRowClick}
+        paginationPerPage={Math.floor((window.innerHeight - 220) / 85)}
       />
     );
   }
diff --git a/src/user/Admin/Tickets/TicketDashboard.js b/src/user/Admin/Tickets/TicketDashboard.js
@@ -1,15 +1,16 @@
 import React, { Component } from "react";
 import "./TicketDashboard.scss";
+import Axios from "axios";
+import { connect } from "react-redux";
 import Form from "react-bootstrap/Form";
 import Button from "react-bootstrap/Button";
 import NewTicketEditor from "./NewTicketEditor";
-import data from "../../../assets/jsonData/tickets";
+import { BASE_URL } from "../../../actions/baseApi";
+import TicketDisscussion from "./TicketDiscussions";
 import TicketContent from "./TicketContent/TicketContent";
+import { getTickets } from "../../../actions/ticketAction";
 import Navigation from "../../dashboard/navigation/navigation";
 import SearchOutlinedIcon from "@material-ui/icons/SearchOutlined";
-import { connect } from "react-redux";
-import { getTickets } from "../../../actions/ticketAction";
-
 
 class TicketDashboard extends Component {
   constructor(props) {
@@ -23,35 +24,40 @@ class TicketDashboard extends Component {
       solved: [],
       closed: [],
       editorMode: false,
+      viewingTicket: null
     };
   }
 
   componentWillReceiveProps(nextProps) {
-    console.log(nextProps.tickets.tickets)
+    console.log(nextProps.tickets.tickets);
     this.setState({
-      all: nextProps.tickets.tickets
+      all: nextProps.tickets.tickets,
     });
   }
 
-  componentDidMount() {
-    setTimeout(() => {
-      this.props.getTickets();
-    });
+  divideAsPerStatus = () => {
     this.setState({
-      open: this.state.all.filter((ele) => ele.genres.indexOf("open") !== -1),
+      open: this.state.all.filter((ele) => ele.genres.indexOf("OPEN") !== -1),
       pending: this.state.all.filter(
-        (ele) => ele.genres.indexOf("pending") !== -1
+        (ele) => ele.genres.indexOf("PENDING") !== -1
       ),
       onHold: this.state.all.filter(
-        (ele) => ele.genres.indexOf("onHold") !== -1
+        (ele) => ele.genres.indexOf("ON_HOLD") !== -1
       ),
       solved: this.state.all.filter(
-        (ele) => ele.genres.indexOf("solved") !== -1
+        (ele) => ele.genres.indexOf("SOLVED") !== -1
       ),
       closed: this.state.all.filter(
-        (ele) => ele.genres.indexOf("closed") !== -1
+        (ele) => ele.genres.indexOf("CLOSED") !== -1
       ),
     });
+  };
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.props.getTickets();
+    });
+    this.divideAsPerStatus();
   }
 
   handleSearchBarChange = (e) => {};
@@ -68,6 +74,17 @@ class TicketDashboard extends Component {
     });
   };
 
+  handleCreateNewTicket = async (newTicket) => {
+    console.log("EXECUTED!")
+    await Axios.post(`${BASE_URL}/ticket`, newTicket)
+  };
+
+  handleViewTicket = (id) => {
+    this.setState({
+      viewingTicket: id
+    })
+  }
+
   render() {
     const { view } = this.state;
     return (
@@ -78,7 +95,7 @@ class TicketDashboard extends Component {
         <div className="ticket-details">
           <div className="ticket-description">
             <div className="dashboard-title">Tickets</div>
-            {!this.state.editorMode && this.state.all.length && (
+            {!this.state.editorMode && this.state.all.length && !this.state.viewingTicket && (
               <React.Fragment>
                 <div className="searchbar-container">
                   <div className="searchbar">
@@ -93,7 +110,9 @@ class TicketDashboard extends Component {
                       />
                     </Form>
                   </div>
-                  <Button onClick={()=>this.toggleNewTicketEditor(true)}>New Ticket</Button>
+                  <Button onClick={() => this.toggleNewTicketEditor(true)}>
+                    New Ticket
+                  </Button>
                 </div>
                 <div className="ticket-status">
                   <div className="tabs__container">
@@ -124,11 +143,21 @@ class TicketDashboard extends Component {
                   </div>
                 </div>
                 <div className="ticket-content">
-                  <TicketContent tickets={this.state[this.state.view]} />
+                  <TicketContent 
+                    viewTicket={this.handleViewTicket}
+                    tickets={this.state[this.state.view]} />
                 </div>
               </React.Fragment>
             )}
-            {this.state.editorMode && <NewTicketEditor cancel={()=>this.toggleNewTicketEditor(false)} />}
+            {this.state.editorMode && !this.state.viewingTicket && (
+              <NewTicketEditor
+                save={this.handleCreateNewTicket}
+                cancel={() => this.toggleNewTicketEditor(false)}
+              />
+            )}
+            {this.state.viewingTicket && (
+              <TicketDisscussion back={this.handleViewTicket} />
+            )}
           </div>
         </div>
       </div>
@@ -155,4 +184,4 @@ export default connect(mapStateToProps, { getTickets })(TicketDashboard);
 //     "We require a new integration for slack. I would really appreciate it if some of the developers could look into this matter! Please feel free to reach out to me for more information regarding this!. I would be glad to help!",
 //   posterUrl:
 //     "https://images-na.ssl-images-amazon.com/images/M/MV5BMTUwODE3MDE0MV5BMl5BanBnXkFtZTgwNTk1MjI4MzE@._V1_SX300.jpg",
-// }
+// }
diff --git a/src/user/Admin/Tickets/TicketDiscussions.js b/src/user/Admin/Tickets/TicketDiscussions.js
