redux setup

Author: ksraj123

src/actions/ticketAction.js

@@ -0,0 +1,16 @@
+import axios from "axios";
+import { GET_TICKETs } from "./types";
+import { BASE_URL } from "./baseApi";
+import { errorHandler } from "../utils/errorHandler";
+
+export const getTickets = () => async (dispatch) => {
+  try {
+    const res = await axios.get(`${BASE_URL}/ticket`);
+    dispatch({
+      type: GET_TICKETs,
+      payload: res.data.tickets,
+    });
+  } catch (error) {
+    dispatch(errorHandler(error));
+  }
+};

src/actions/types.js

@@ -55,3 +55,4 @@ export const GET_PROPOSALVIEW_ANALYTICS="GET_PROPOSALVIEW_ANALYTICS"
 export const ACTIVATE_DEACTIVATE_ACCOUNT_TOGGLER = "ACTIVATE_DEACTIVATE_ACCOUNT_TOGGLER";
 export const CLEAR_INVITE_LINK = "CLEAR_INVITE_LINK";
 export const GET_LOGIN_OPTIONS = "GET_LOGIN_OPTIONS";
+export const GET_TICKETs = "GET_TICKETs";

src/reducers/index.js

@@ -14,6 +14,7 @@ import proposalReducer from "./proposalReducer";
 import adminReducers from "./adminReducers";
 import commentReducer from "./commentReducer";
 import analyticsReducer from './analyticsReducer';
+import ticketReducer from './ticketReducer';
 
 const rootReducer = combineReducers({
   auth: authReducers,
@@ -30,7 +31,8 @@ const rootReducer = combineReducers({
   proposal: proposalReducer,
   admin: adminReducers,
   comment: commentReducer,
-  analytics: analyticsReducer
+  analytics: analyticsReducer,
+  tickets: ticketReducer
 });
 
 export default rootReducer;

src/reducers/ticketReducer.js

@@ -0,0 +1,20 @@
+import { GET_TICKETs } from "../actions/types";
+const initialState = {
+  tickets: "",
+};
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case GET_TICKETs: {
+      console.log(`Action Recieved in reducer! ${action.type}`);
+      console.log(action.payload);
+      return {
+        ...state,
+        tickets: action.payload,
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+};

src/user/Admin/Tickets/NewTicketEditor/Editor.scss

@@ -1,5 +1,5 @@
 .new-ticket-editor {
-  padding: 50px 50px;
+  padding: 1rem;
   .top-controls {
     display: flex;
     margin-bottom: 50px;

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

@@ -32,35 +32,35 @@ class TicketContent extends Component {
         selector: "plot",
         wrap: true,
         sortable: true,
-        format: (row) => `${row.plot.slice(0, 100)}...`,
+        format: (row) => `${row.content.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>
+        //     {row.genres.map((genre, i) => (
+        //       <BadgeElement ticketState={genre} />
+        //     ))}
+        //   </div>
+        // ),
       },
       {
         name: "User",
         grow: 1,
-        cell: (row) => (
-          <div>
-            <Image
-              src={userIcon2}
-              alt="icon"
-              rounded
-              className="profile-img"
-              roundedCircle
-            />
-            <span className="profile-text">Devesh Verma</span>
-          </div>
-        ),
+        // cell: (row) => (
+        //   <div>
+        //     <Image
+        //       src={userIcon2}
+        //       alt="icon"
+        //       rounded
+        //       className="profile-img"
+        //       roundedCircle
+        //     />
+        //     <span className="profile-text">Devesh Verma</span>
+        //   </div>
+        // ),
       },
       {
         name: "Created At"

src/user/Admin/Tickets/TicketDashboard.js

@@ -7,13 +7,16 @@ import data from "../../../assets/jsonData/tickets";
 import TicketContent from "./TicketContent/TicketContent";
 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) {
     super(props);
     this.state = {
       view: "all",
-      all: [...data],
+      all: [],
       open: [],
       pending: [],
       onHold: [],
@@ -23,7 +26,17 @@ class TicketDashboard extends Component {
     };
   }
 
+  componentWillReceiveProps(nextProps) {
+    console.log(nextProps.tickets.tickets)
+    this.setState({
+      all: nextProps.tickets.tickets
+    });
+  }
+
   componentDidMount() {
+    setTimeout(() => {
+      this.props.getTickets();
+    });
     this.setState({
       open: this.state.all.filter((ele) => ele.genres.indexOf("open") !== -1),
       pending: this.state.all.filter(
@@ -65,11 +78,11 @@ class TicketDashboard extends Component {
         <div className="ticket-details">
           <div className="ticket-description">
             <div className="dashboard-title">Tickets</div>
-            {!this.state.editorMode && (
+            {!this.state.editorMode && this.state.all.length && (
               <React.Fragment>
                 <div className="searchbar-container">
                   <div className="searchbar">
-                    <span class="searchbar-icon">
+                    <span className="searchbar-icon">
                       <SearchOutlinedIcon />
                     </span>
                     <Form>
@@ -123,4 +136,9 @@ class TicketDashboard extends Component {
   }
 }
 
-export default TicketDashboard;
+// map state to props
+const mapStateToProps = (state) => ({
+  tickets: state.tickets,
+});
+
+export default connect(mapStateToProps, { getTickets })(TicketDashboard);