60 | ```
61 |
62 | Provided in the root of the project, a `.sample.env` for guidance.
63 |
64 |
65 | ### Folder Structure
66 |
67 | ```
68 | ├── README.md
69 | ├── backend
70 | │ ├── config
71 | │ │ └── db.js
72 | │ ├── controllers
73 | │ │ ├── noteController.js
74 | │ │ ├── ticketController.js
75 | │ │ └── userController.js
76 | │ ├── middleware
77 | │ │ ├── authMiddleware.js
78 | │ │ └── errorMiddleware.js
79 | │ ├── models
80 | │ │ ├── noteModel.js
81 | │ │ ├── ticketModel.js
82 | │ │ └── userModel.js
83 | │ ├── routes
84 | │ │ ├── noteRoutes.js
85 | │ │ ├── ticketRoutes.js
86 | │ │ └── userRoutes.js
87 | │ └── server.js
88 | ├── frontend
89 | │ ├── README.md
90 | │ ├── package-lock.json
91 | │ ├── package.json
92 | │ ├── public
93 | │ │ ├── favicon.ico
94 | │ │ ├── index.html
95 | │ │ ├── logo192.png
96 | │ │ ├── logo512.png
97 | │ │ ├── manifest.json
98 | │ │ └── robots.txt
99 | │ └── src
100 | │ ├── App.js
101 | │ ├── app
102 | │ │ └── store.js
103 | │ ├── components
104 | │ │ ├── BackButton.jsx
105 | │ │ ├── Header.jsx
106 | │ │ ├── NoteItem.jsx
107 | │ │ ├── PrivateRoute.jsx
108 | │ │ ├── Spinner.jsx
109 | │ │ └── TicketItem.jsx
110 | │ ├── features
111 | │ │ ├── auth
112 | │ │ │ ├── authService.js
113 | │ │ │ └── authSlice.js
114 | │ │ ├── notes
115 | │ │ │ ├── noteService.js
116 | │ │ │ └── noteSlice.js
117 | │ │ └── tickets
118 | │ │ ├── ticketService.js
119 | │ │ └── ticketSlice.js
120 | │ ├── hooks
121 | │ │ └── useAuthStatus.js
122 | │ ├── index.css
123 | │ ├── index.js
124 | │ ├── pages
125 | │ │ ├── Home.jsx
126 | │ │ ├── Login.jsx
127 | │ │ ├── NewTicket.jsx
128 | │ │ ├── Register.jsx
129 | │ │ ├── Ticket.jsx
130 | │ │ └── Tickets.jsx
131 | │ └── serviceWorker.js
132 | ├── node_modules
133 | ├── package-lock.json
134 | └── package.json
135 | ```
136 |
137 | ### Run backend & frontend servers concurrently
138 |
139 | In order to run the backend & frontend servers using [concurrently](https://www.npmjs.com/package/concurrently):
140 |
141 | ```sh
142 | npm run dev
143 | ```
144 |
145 | This will automatically open the local development server at [http://localhost:3000](http://localhost:3000).
146 |
147 | The page will automatically reload if you make changes to the code.
148 | You will see the build errors and lint warnings in the console.
149 |
150 | ### Routes
151 |
152 | Inside of `/backend/controllers/userController.js` are a collection of routes that involve `CRUD` functions of persistent storage.
153 |
154 | - **POST** `/api/users` - Register/create a new user using **registerUser** method in User Controller, requires a **URL-encoded** data in the **Body** containing key value of { name, email, password }, it returns the unique ID along with JWT token
155 | - **POST** `/api/users/login` - Register/create a new user using **loginUser** method in User Controller, requires a **URL-encoded** data in the **Body** containing key value of { email, password }, it returns the registered numeric ID from DB along with unique generated JWT token
156 | - **GET** `/api/users/me` - Get current user
157 |
158 | Inside of `/backend/controllers/ticketController.js` are a collection of.
159 |
160 | getTickets, [done]
161 | getTicket, [done]
162 | createTicket, [done]
163 | updateTicket
164 | deleteTicket,
165 |
166 | - **GET** `/api/tickets` - Get all the tickets of logged in user while passing the right `Authorization` `Bearer Token`.
167 | - **POST** `/api/tickets` - Create a new ticket, requires a **URL-encoded** data in the **Body** containing key value of { product, description }
168 | - **GET** `/api/tickets/:id` - Get the particular ticket detail while passing the right `Authorization` `Bearer Token`.
169 | -
170 | [Postman](https://learning.postman.com/docs/sending-requests/requests/#sending-body-data)
171 |
172 | ### Build an application
173 |
174 | In order to make a production build of your application:
175 |
176 | ```sh
177 | npm run build
178 | ```
179 |
180 | This will produce an optimized build of your application in `build` folder.
181 |
182 | ### Deploy your application
183 |
184 | In order to produce a ready-to-deploy version of your application to deploy to Heroku:
185 |
186 | ```sh
187 | npm run deploy
188 | ```
189 |
190 | This will produce a ready-to-deploy version of your application in `deploy` folder.
191 | Now you can deploy your application by running few handful commands:
192 |
193 | ```sh
194 | cd deploy
195 | heroku login
196 | git init
197 | git add *
198 | git commit -m "deploying my-app"
199 | heroku create my-app
200 | git push heroku master
201 | ```
202 | And within a few seconds, your application will be live at [https://support-desk-mern-arifmd.herokuapp.com/](https://support-desk-mern-arifmd.herokuapp.com/).
203 |
204 |
205 | ## Author(s)
206 |
207 | - **Mohammad Arif** - [mdarif](https://github.com/mdarif)
208 |
--------------------------------------------------------------------------------
/backend/config/db.js:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose')
2 |
3 | const connectDB = async () => {
4 | try {
5 | const conn = await mongoose.connect(process.env.MONGO_URI)
6 | console.log(
7 | `MongoDB Connected: ${conn.connection.host}`.cyan.underline.bold
8 | )
9 | } catch (error) {
10 | console.log(`Error: ${error.message}`.red.underline.bold)
11 | process.exit(1) // exit process with failure
12 | }
13 | }
14 |
15 | module.exports = connectDB
16 |
--------------------------------------------------------------------------------
/backend/controllers/noteController.js:
--------------------------------------------------------------------------------
1 | const asyncHandler = require('express-async-handler')
2 |
3 | const User = require('../models/userModel')
4 | const Note = require('../models/noteModel')
5 | const Ticket = require('../models/ticketModel')
6 |
7 | // @desc Get notes for a ticket
8 | // @route GET /api/tickets/:ticketId/notes
9 | // @access Private
10 |
11 | /**
12 | * 'asyncHandler' is a simple middleware for handling exceptions
13 | * inside of async express routes and passing them to your express
14 | * error handlers.
15 | */
16 | const getNotes = asyncHandler(async (req, res) => {
17 | // Get user using the id and JWT
18 | const user = await User.findById(req.user.id)
19 |
20 | if (!user) {
21 | res.status(401)
22 | throw new Error('User not found')
23 | }
24 |
25 | const ticket = await Ticket.findById(req.params.ticketId)
26 |
27 | if (ticket.user.toString() !== req.user.id) {
28 | res.status(401)
29 | throw new Error('User not authorized')
30 | }
31 |
32 | const notes = await Note.find({ ticket: req.params.ticketId })
33 |
34 | res.status(200).json(notes)
35 | })
36 |
37 | // @desc Create ticket note
38 | // @route POST /api/tickets/:ticketId/notes
39 | // @access Private
40 |
41 | const addNote = asyncHandler(async (req, res) => {
42 | // Get user using the id and JWT
43 | const user = await User.findById(req.user.id)
44 |
45 | if (!user) {
46 | res.status(401)
47 | throw new Error('User not found')
48 | }
49 |
50 | const ticket = await Ticket.findById(req.params.ticketId)
51 |
52 | if (ticket.user.toString() !== req.user.id) {
53 | res.status(401)
54 | throw new Error('User not authorized')
55 | }
56 |
57 | const note = await Note.create({
58 | ticket: req.params.ticketId,
59 | text: req.body.text,
60 | isStaff: false,
61 | user: req.user.id
62 | })
63 |
64 | res.status(200).json(note)
65 | })
66 |
67 | module.exports = {
68 | getNotes,
69 | addNote
70 | }
71 |
--------------------------------------------------------------------------------
/backend/controllers/ticketController.js:
--------------------------------------------------------------------------------
1 | const asyncHandler = require('express-async-handler')
2 |
3 | const User = require('../models/userModel')
4 | const Ticket = require('../models/ticketModel')
5 |
6 | // @desc Get user tickets
7 | // @route GET /api/tickets
8 | // @access Private
9 |
10 | /**
11 | * 'asyncHandler' is a simple middleware for handling exceptions
12 | * inside of async express routes and passing them to your express
13 | * error handlers.
14 | */
15 | const getTickets = asyncHandler(async (req, res) => {
16 | // Get user using the id and JWT
17 | const user = await User.findById(req.user.id)
18 |
19 | if (!user) {
20 | res.status(401)
21 | throw new Error('User not found')
22 | }
23 |
24 | const tickets = await Ticket.find({ user: req.user._id })
25 |
26 | res.status(200).json(tickets)
27 | })
28 |
29 | // @desc Get user ticket
30 | // @route GET /api/tickets/:id
31 | // @access Private
32 | const getTicket = asyncHandler(async (req, res) => {
33 | // Get user using the id and JWT
34 | const user = await User.findById(req.user.id)
35 |
36 | if (!user) {
37 | res.status(401)
38 | throw new Error('User not found')
39 | }
40 |
41 | const ticket = await Ticket.findById(req.params.id)
42 |
43 | if (!ticket) {
44 | res.status(404)
45 | throw new Error('Ticket not found')
46 | }
47 |
48 | // Check if ticket belongs to user
49 | if (ticket.user.toString() !== req.user.id) {
50 | res.status(401)
51 | throw new Error('Not authorized')
52 | }
53 |
54 | res.status(200).json(ticket)
55 | })
56 |
57 | // @desc Create new ticket
58 | // @route POST /api/ticket
59 | // @access Private
60 | const createTicket = asyncHandler(async (req, res) => {
61 | const { product, description } = req.body
62 |
63 | if (!product || !description) {
64 | res.status(400) // Bad request
65 | throw new Error('Please provide a product and description')
66 | }
67 |
68 | // Get user using the id and JWT
69 | const user = await User.findById(req.user.id)
70 |
71 | if (!user) {
72 | res.status(401)
73 | throw new Error('User not found')
74 | }
75 |
76 | const ticket = await Ticket.create({
77 | product,
78 | description,
79 | user: req.user.id,
80 | status: 'new'
81 | })
82 |
83 | res.status(201).json(ticket)
84 | })
85 |
86 | // @desc Delete ticket
87 | // @route DELETE /api/tickets/:id
88 | // @access Private
89 | const deleteTicket = asyncHandler(async (req, res) => {
90 | // Get user using the id and JWT
91 | const user = await User.findById(req.user.id)
92 |
93 | if (!user) {
94 | res.status(401)
95 | throw new Error('User not found')
96 | }
97 |
98 | const ticket = await Ticket.findById(req.params.id)
99 |
100 | if (!ticket) {
101 | res.status(404)
102 | throw new Error('Ticket not found')
103 | }
104 |
105 | // Check if ticket belongs to user
106 | if (ticket.user.toString() !== req.user.id) {
107 | res.status(401)
108 | throw new Error('Not authorized')
109 | }
110 |
111 | await ticket.remove()
112 |
113 | res.status(200).json({ success: true })
114 | })
115 |
116 | // @desc Update ticket
117 | // @route PUT /api/tickets/:id
118 | // @access Private
119 | const updateTicket = asyncHandler(async (req, res) => {
120 | // Get user using the id and JWT
121 | const user = await User.findById(req.user.id)
122 |
123 | if (!user) {
124 | res.status(401)
125 | throw new Error('User not found')
126 | }
127 |
128 | const ticket = await Ticket.findById(req.params.id)
129 |
130 | if (!ticket) {
131 | res.status(404)
132 | throw new Error('Ticket not found')
133 | }
134 |
135 | // Check if ticket belongs to user
136 | if (ticket.user.toString() !== req.user.id) {
137 | res.status(401)
138 | throw new Error('Not authorized')
139 | }
140 |
141 | const updatedTicket = await Ticket.findByIdAndUpdate(
142 | req.params.id,
143 | req.body,
144 | {
145 | new: true
146 | }
147 | )
148 |
149 | res.status(200).json(updatedTicket)
150 | })
151 |
152 | module.exports = {
153 | getTickets,
154 | createTicket,
155 | getTicket,
156 | deleteTicket,
157 | updateTicket
158 | }
159 |
--------------------------------------------------------------------------------
/backend/controllers/userController.js:
--------------------------------------------------------------------------------
1 | const asyncHandler = require('express-async-handler') // Simple middleware for handling exceptions inside of async express routes and passing them to your express error handlers.
2 | const jwt = require('jsonwebtoken') // JSON Web Token for authentication and authorization
3 | const bcrypt = require('bcryptjs') // A library to help you hash passwords.
4 |
5 | const User = require('../models/userModel')
6 |
7 | // @desc Register a new user
8 | // @route /api/users
9 | // @access Public
10 |
11 | /**
12 | * 'asyncHandler' is a simple middleware for handling exceptions
13 | * inside of async express routes and passing them to your express
14 | * error handlers.
15 | */
16 | const registerUser = asyncHandler(async (req, res) => {
17 | const { name, email, password } = req.body // destructure the request body params
18 |
19 | // Validation
20 | if (!name || !email || !password) {
21 | res.status(400)
22 | throw new Error('Please provide all required fields')
23 | }
24 |
25 | // Check for existing user
26 | const userExists = await User.findOne({ email })
27 |
28 | if (userExists) {
29 | res.status(400)
30 | throw new Error('User already exists')
31 | }
32 |
33 | // Hash password
34 | const salt = await bcrypt.genSalt(10) // 10 is the number of rounds
35 | const hashedPassword = await bcrypt.hash(password, salt) // hash the password
36 |
37 | // Create user
38 | const user = await User.create({
39 | name,
40 | email,
41 | password: hashedPassword
42 | })
43 |
44 | // User is created
45 | if (user) {
46 | res.status(201).json({
47 | _id: user._id,
48 | name: user.name,
49 | email: user.email,
50 | token: generateToken(user._id)
51 | })
52 | } else {
53 | res.status(400)
54 | throw new Error('User could not be created')
55 | }
56 | })
57 |
58 | // @desc Login a user
59 | // @route /api/users/login
60 | // @access Public
61 | const loginUser = asyncHandler(async (req, res) => {
62 | const { email, password } = req.body // destructuring
63 |
64 | const user = await User.findOne({ email })
65 |
66 | // Check User and Password match
67 | if (user && (await bcrypt.compare(password, user.password))) {
68 | res.status(200).json({
69 | _id: user._id,
70 | name: user.name,
71 | email: user.email,
72 | token: generateToken(user._id)
73 | })
74 | } else {
75 | res.status(401) // Unauthorized
76 | throw new Error('Invalid credentials')
77 | }
78 | })
79 |
80 | // @desc Get current user
81 | // @route /api/users/me
82 | // @access Private
83 | const getMe = asyncHandler(async (req, res) => {
84 | const user = {
85 | id: req.user._id,
86 | email: req.user.email,
87 | name: req.user.name
88 | }
89 | res.status(200).json(user)
90 | })
91 |
92 | // Generate token
93 | generateToken = id => {
94 | return jwt.sign({ id }, process.env.JWT_SECRET, {
95 | expiresIn: '30d'
96 | })
97 | }
98 |
99 | module.exports = {
100 | registerUser,
101 | loginUser,
102 | getMe
103 | }
104 |
--------------------------------------------------------------------------------
/backend/middleware/authMiddleware.js:
--------------------------------------------------------------------------------
1 | const jwt = require('jsonwebtoken')
2 | const asyncHandler = require('express-async-handler')
3 | const User = require('../models/userModel')
4 |
5 | const protect = asyncHandler(async (req, res, next) => {
6 | let token
7 |
8 | // console.log(req.headers.authorization)
9 | // Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYyMWM3NTc4MzBjODJmYjc2ZWY0ZDMxNyIsImlhdCI6MTY0NjAzMjM2MSwiZXhwIjoxNjQ4NjI0MzYxfQ.ISQuHgbha-Q4kvn8GDUEwTONK0gn_QH86E6SQKQTg78
10 | if (
11 | req.headers.authorization &&
12 | req.headers.authorization.startsWith('Bearer')
13 | ) {
14 | try {
15 | // Get token from header
16 | token = req.headers.authorization.split(' ')[1]
17 | // Verify token
18 | const decoded = jwt.verify(token, process.env.JWT_SECRET)
19 | // Get user from token
20 | req.user = await User.findById(decoded.id).select('-password')
21 | // console.log(`token: ${token} decoded: ${decoded} user: ${req.user}`)
22 |
23 | next() // Continue to next middleware
24 | } catch (error) {
25 | console.log(error)
26 | res.status(401)
27 | throw new Error('Not authorized to access this route')
28 | }
29 | }
30 |
31 | if (!token) {
32 | res.status(401)
33 | throw new Error('Not authorized to access this route')
34 | }
35 | })
36 |
37 | module.exports = { protect }
38 |
--------------------------------------------------------------------------------
/backend/middleware/errorMiddleware.js:
--------------------------------------------------------------------------------
1 | const errorHandler = (err, req, res, next) => {
2 | const statusCode = res.statusCode ? res.statusCode : 500
3 | res.status(statusCode)
4 | res.json({
5 | message: err.message,
6 | stack: process.env.NODE_ENV === 'production' ? null : err.stack
7 | })
8 | }
9 |
10 | module.exports = { errorHandler }
11 |
--------------------------------------------------------------------------------
/backend/models/noteModel.js:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose')
2 |
3 | const noteSchema = mongoose.Schema(
4 | {
5 | user: {
6 | type: mongoose.Schema.Types.ObjectId,
7 | required: true,
8 | ref: 'User'
9 | },
10 | ticket: {
11 | type: mongoose.Schema.Types.ObjectId,
12 | required: true,
13 | ref: 'Ticket'
14 | },
15 | text: {
16 | type: String,
17 | required: [true, 'Please add some text']
18 | },
19 | isStaff: {
20 | type: Boolean,
21 | default: false
22 | },
23 | staffId: {
24 | type: String
25 | }
26 | },
27 | {
28 | timestamps: true
29 | }
30 | )
31 |
32 | module.exports = mongoose.model('Note', noteSchema)
33 |
--------------------------------------------------------------------------------
/backend/models/ticketModel.js:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose')
2 |
3 | const ticketSchema = mongoose.Schema(
4 | {
5 | user: {
6 | type: mongoose.Schema.Types.ObjectId,
7 | required: true,
8 | ref: 'User'
9 | },
10 | product: {
11 | type: String,
12 | required: [true, 'Please select a product'],
13 | enum: [
14 | 'iPhone',
15 | 'iPad',
16 | 'MacBook',
17 | 'Macbook Pro',
18 | 'iMac',
19 | 'iPod',
20 | 'iPod touch'
21 | ]
22 | },
23 | description: {
24 | type: String,
25 | required: [true, 'Please enter a decription of the issue']
26 | },
27 | status: {
28 | type: String,
29 | required: true,
30 | enum: ['new', 'open', 'close'],
31 | default: 'new'
32 | }
33 | },
34 | {
35 | timestamps: true
36 | }
37 | )
38 |
39 | module.exports = mongoose.model('Ticket', ticketSchema)
40 |
--------------------------------------------------------------------------------
/backend/models/userModel.js:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose')
2 |
3 | const userSchema = mongoose.Schema(
4 | {
5 | name: {
6 | type: String,
7 | required: [true, 'Please add a name']
8 | },
9 | email: {
10 | type: String,
11 | required: [true, 'Please add a email'],
12 | unique: true
13 | },
14 | password: {
15 | type: String,
16 | required: [true, 'Please add a password']
17 | },
18 | isAdmin: {
19 | type: Boolean,
20 | required: true,
21 | default: false
22 | }
23 | },
24 | {
25 | timestamps: true
26 | }
27 | )
28 |
29 | module.exports = mongoose.model('User', userSchema)
30 |
--------------------------------------------------------------------------------
/backend/routes/noteRoutes.js:
--------------------------------------------------------------------------------
1 | const express = require('express')
2 | const router = express.Router({ mergeParams: true })
3 | const { getNotes, addNote } = require('../controllers/noteController')
4 |
5 | const { protect } = require('../middleware/authMiddleware')
6 |
7 | router
8 | .route('/')
9 | .get(protect, getNotes)
10 | .post(protect, addNote)
11 |
12 | module.exports = router
13 |
14 | // /api/tickets/:ticketId/notes
15 |
--------------------------------------------------------------------------------
/backend/routes/ticketRoutes.js:
--------------------------------------------------------------------------------
1 | const express = require('express')
2 | const router = express.Router()
3 | const {
4 | getTickets,
5 | getTicket,
6 | createTicket,
7 | updateTicket,
8 | deleteTicket
9 | } = require('../controllers/ticketController')
10 |
11 | const { protect } = require('../middleware/authMiddleware')
12 |
13 | // Re-route into note router
14 | const noteRouter = require('./noteRoutes')
15 | router.use('/:ticketId/notes', noteRouter)
16 |
17 | // Protected route to create the ticket
18 | router
19 | .route('/')
20 | .get(protect, getTickets)
21 | .post(protect, createTicket)
22 |
23 | router
24 | .route('/:id')
25 | .get(protect, getTicket)
26 | .delete(protect, deleteTicket)
27 | .put(protect, updateTicket)
28 |
29 | module.exports = router
30 |
--------------------------------------------------------------------------------
/backend/routes/userRoutes.js:
--------------------------------------------------------------------------------
1 | const express = require('express')
2 | const router = express.Router()
3 | const {
4 | registerUser,
5 | loginUser,
6 | getMe
7 | } = require('../controllers/userController')
8 |
9 | const { protect } = require('../middleware/authMiddleware')
10 |
11 | router.post('/', registerUser)
12 |
13 | router.post('/login', loginUser)
14 |
15 | // Protected route (2nd argument) - protect
16 | router.get('/me', protect, getMe)
17 |
18 | module.exports = router
19 |
--------------------------------------------------------------------------------
/backend/server.js:
--------------------------------------------------------------------------------
1 | const express = require('express') // commonjs module syntax
2 | const colors = require('colors')
3 | const dotenv = require('dotenv').config()
4 | const { errorHandler } = require('./middleware/errorMiddleware')
5 | const connectDB = require('./config/db')
6 | const path = require('path')
7 | const PORT = process.env.PORT || 3000
8 |
9 | // Connect to database
10 | connectDB()
11 |
12 | const app = express()
13 |
14 | /**
15 | * Each app.use(middleware) is called every time
16 | * a request is sent to the server
17 | */
18 |
19 | /**
20 | * This is a built-in middleware function in Express.
21 | * It parses incoming requests with JSON payloads and is based on body-parser.
22 | */
23 | app.use(express.json())
24 |
25 | /**
26 | * This is a built-in middleware function in Express.
27 | * It parses incoming requests (Object as strings or arrays) with
28 | * urlencoded payloads and is based on body-parser.
29 | */
30 | app.use(express.urlencoded({ extended: false }))
31 |
32 | // Routes endpoints
33 | app.use('/api/users', require('./routes/userRoutes'))
34 | app.use('/api/tickets', require('./routes/ticketRoutes'))
35 |
36 | // Serve Frontend
37 | if (process.env.NODE_ENV === 'production') {
38 | // Set build folder as static folder
39 | app.use(express.static(path.join(__dirname, '../frontend/build')))
40 |
41 | app.get('*', (req, res) => {
42 | res.sendFile(path.join(__dirname, '../frontend/build/index.html'))
43 | })
44 | } else {
45 | app.get('/', (req, res) => {
46 | res.status(200).json({ message: 'Welcome to the Support Desk API' })
47 | })
48 | }
49 |
50 | app.use(errorHandler)
51 |
52 | /**
53 | * app.listen()
54 | * Starts a UNIX socket and listens for connections on the given path.
55 | * This method is identical to Node’s http.Server.listen().
56 | */
57 | app.listen(PORT, () => {
58 | console.log(`Server is running on port ${PORT}`)
59 | })
60 |
--------------------------------------------------------------------------------
/frontend/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/frontend/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), using the [Redux](https://redux.js.org/) and [Redux Toolkit](https://redux-toolkit.js.org/) template.
2 |
3 | ## Available Scripts
4 |
5 | In the project directory, you can run:
6 |
7 | ### `npm start`
8 |
9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 |
12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console.
14 |
15 | ### `npm test`
16 |
17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19 |
20 | ### `npm run build`
21 |
22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance.
24 |
25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed!
27 |
28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29 |
30 | ### `npm run eject`
31 |
32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33 |
34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35 |
36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37 |
38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39 |
40 | ## Learn More
41 |
42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43 |
44 | To learn React, check out the [React documentation](https://reactjs.org/).
45 |
--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "frontend",
3 | "version": "0.1.0",
4 | "proxy": "http://localhost:5000/",
5 | "private": true,
6 | "dependencies": {
7 | "@reduxjs/toolkit": "^1.8.0",
8 | "@testing-library/jest-dom": "^4.2.4",
9 | "@testing-library/react": "^9.5.0",
10 | "@testing-library/user-event": "^7.2.1",
11 | "axios": "^0.26.0",
12 | "react": "^17.0.2",
13 | "react-dom": "^17.0.2",
14 | "react-icons": "^4.3.1",
15 | "react-modal": "^3.14.4",
16 | "react-redux": "^7.2.6",
17 | "react-router-dom": "^6.2.1",
18 | "react-scripts": "5.0.0",
19 | "react-toastify": "^8.2.0"
20 | },
21 | "scripts": {
22 | "start": "react-scripts start",
23 | "build": "react-scripts build",
24 | "test": "react-scripts test",
25 | "eject": "react-scripts eject"
26 | },
27 | "eslintConfig": {
28 | "extends": "react-app"
29 | },
30 | "browserslist": {
31 | "production": [
32 | ">0.2%",
33 | "not dead",
34 | "not op_mini all"
35 | ],
36 | "development": [
37 | "last 1 chrome version",
38 | "last 1 firefox version",
39 | "last 1 safari version"
40 | ]
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/frontend/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdarif/support-desk/82c85887884c89db437de340fe49c82aed3d2db7/frontend/public/favicon.ico
--------------------------------------------------------------------------------
/frontend/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React Redux App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/frontend/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdarif/support-desk/82c85887884c89db437de340fe49c82aed3d2db7/frontend/public/logo192.png
--------------------------------------------------------------------------------
/frontend/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdarif/support-desk/82c85887884c89db437de340fe49c82aed3d2db7/frontend/public/logo512.png
--------------------------------------------------------------------------------
/frontend/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/frontend/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 |
--------------------------------------------------------------------------------
/frontend/src/App.js:
--------------------------------------------------------------------------------
1 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
2 | import { ToastContainer } from 'react-toastify'
3 | import 'react-toastify/dist/ReactToastify.css'
4 | import Header from './components/Header'
5 | import { PrivateRoute } from './components/PrivateRoute'
6 | import Home from './pages/Home'
7 | import Login from './pages/Login'
8 | import NewTicket from './pages/NewTicket'
9 | import Register from './pages/Register'
10 | import Tickets from './pages/Tickets'
11 | import Ticket from './pages/Ticket'
12 |
13 | function App () {
14 | return (
15 | <>
16 |
17 |
18 |
19 |
20 | } />
21 | } />
22 | } />
23 | }>
24 | } />
25 |
26 | }>
27 | } />
28 |
29 | }>
30 | } />
31 |
32 |
33 |
34 |
35 |
36 |
37 | )
38 | }
39 |
40 | export default App
41 |
--------------------------------------------------------------------------------
/frontend/src/app/store.js:
--------------------------------------------------------------------------------
1 | import { configureStore } from '@reduxjs/toolkit'
2 | import authReducer from '../features/auth/authSlice'
3 | import ticketReducer from '../features/tickets/ticketSlice'
4 | import noteReducer from '../features/notes/noteSlice'
5 |
6 | export const store = configureStore({
7 | reducer: {
8 | auth: authReducer,
9 | tickets: ticketReducer,
10 | notes: noteReducer
11 | }
12 | })
13 |
--------------------------------------------------------------------------------
/frontend/src/components/BackButton.jsx:
--------------------------------------------------------------------------------
1 | import { FaArrowCircleLeft } from "react-icons/fa";
2 | import { Link } from "react-router-dom";
3 |
4 | export const BackButton = ({ url }) => {
5 | return (
6 |
7 |
8 | Back
9 |
10 | );
11 | };
12 |
13 | export default BackButton;
14 |
--------------------------------------------------------------------------------
/frontend/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | import { FaSignOutAlt, FaSignInAlt, FaUser } from "react-icons/fa";
2 | import { Link, useNavigate } from "react-router-dom";
3 | import { useSelector, useDispatch } from "react-redux";
4 | import { logout, reset } from "../features/auth/authSlice";
5 |
6 | function Header() {
7 | const navigate = useNavigate();
8 | const dispatch = useDispatch();
9 | const { user } = useSelector((state) => state.auth);
10 |
11 | const onLogout = () => {
12 | dispatch(logout());
13 | dispatch(reset());
14 | navigate("/");
15 | };
16 |
17 | return (
18 |
19 |
20 | Support Desk
21 |
22 |
23 | {user ? (
24 | -
25 |
29 |
30 | ) : (
31 | <>
32 | -
33 |
34 | Login
35 |
36 |
37 | -
38 |
39 | Register
40 |
41 |
42 |
43 | )}
44 |
45 |
46 | );
47 | }
48 |
49 | export default Header;
50 |
--------------------------------------------------------------------------------
/frontend/src/components/NoteItem.jsx:
--------------------------------------------------------------------------------
1 | import { useSelector } from "react-redux";
2 |
3 | function NoteItem({ note }) {
4 | const { user } = useSelector((state) => state.auth);
5 |
6 | const options = {
7 | weekday: "long",
8 | year: "numeric",
9 | month: "long",
10 | day: "numeric",
11 | };
12 |
13 | return (
14 |
21 |
22 | Note from {note.isStaff ? Staff : {user.name}}
23 |
24 |
{note.text}
25 |
26 | {new Date(note.createdAt).toLocaleString("en-US", options)}
27 |
28 |
13 |
{new Date(ticket.createdAt).toLocaleString("en-US", options)}
14 |
{ticket.product}
15 |
{ticket.status}
16 |
17 | View
18 |
19 |
What do you need help with?
9 | Please choose from an option below
10 |
11 |
12 |
13 | Create New Ticket
14 |
15 |
16 |
17 | View My Tickets
18 |
19 |
20 | );
21 | }
22 |
23 | export default Home;
24 |
--------------------------------------------------------------------------------
/frontend/src/pages/Login.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { toast } from "react-toastify";
3 | import { useNavigate } from "react-router-dom";
4 | import { FaSignInAlt } from "react-icons/fa";
5 | import { useSelector, useDispatch } from "react-redux";
6 | import { login, reset } from "../features/auth/authSlice";
7 | import Spinner from "../components/Spinner";
8 |
9 | function Login() {
10 | const [formData, setFormData] = useState({
11 | email: "",
12 | password: "",
13 | });
14 |
15 | const { email, password } = formData; // destructuring
16 |
17 | /**
18 | * useDispatch() returns a reference to the dispatch function
19 | * from the Redux store. You may use it to dispatch actions
20 | * as needed.
21 | */
22 | const dispatch = useDispatch();
23 | const navigate = useNavigate();
24 |
25 | /**
26 | * useSelector() allows you to extract data from the Redux store state,
27 | * using a selector function.
28 | */
29 |
30 | const { user, isLoading, isError, isSuccess, message } = useSelector(
31 | (state) => state.auth
32 | );
33 |
34 | useEffect(() => {
35 | if (isError) {
36 | toast.error(message);
37 | }
38 |
39 | // Redirect when logged in
40 | if (isSuccess || user) {
41 | navigate("/");
42 | }
43 |
44 | dispatch(reset());
45 | }, [isError, isSuccess, user, navigate, message, dispatch]);
46 |
47 | const onChange = (e) => {
48 | setFormData((prevState) => ({
49 | ...prevState,
50 | [e.target.name]: e.target.value,
51 | }));
52 | };
53 |
54 | const onSubmit = (e) => {
55 | e.preventDefault();
56 |
57 | const userData = {
58 | email,
59 | password,
60 | };
61 |
62 | dispatch(login(userData));
63 | };
64 |
65 | if (isLoading) {
66 | return ;
67 | }
68 |
69 | return (
70 | <>
71 |
72 |
73 | Login
74 |
75 | Please log in to get support
76 |
77 |
78 |
109 |
110 | );
111 | }
112 |
113 | export default Login;
114 |
--------------------------------------------------------------------------------
/frontend/src/pages/NewTicket.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { useSelector, useDispatch } from "react-redux";
3 | import { useNavigate } from "react-router-dom";
4 | import { toast } from "react-toastify";
5 | import { createTicket, reset } from "../features/tickets/ticketSlice";
6 | import Spinner from "../components/Spinner";
7 | import BackButton from "../components/BackButton";
8 |
9 | function NewTicket() {
10 | const { user } = useSelector((state) => state.auth);
11 | const { isLoading, isError, isSuccess, message } = useSelector(
12 | (state) => state.tickets
13 | );
14 |
15 | const [name] = useState(user.name);
16 | const [email] = useState(user.email);
17 | const [product, setProduct] = useState("iPhone");
18 | const [description, setDescription] = useState("");
19 |
20 | const dispatch = useDispatch();
21 | const navigate = useNavigate();
22 |
23 | useEffect(() => {
24 | if (isError) {
25 | toast.error(message);
26 | }
27 |
28 | if (isSuccess) {
29 | dispatch(reset());
30 | navigate("/tickets");
31 | }
32 | }, [dispatch, isError, isSuccess, navigate, message]);
33 |
34 | const onSubmit = (e) => {
35 | e.preventDefault();
36 | dispatch(createTicket({ product, description }));
37 | };
38 |
39 | if (isLoading) return ;
40 |
41 | return (
42 | <>
43 |
44 |
45 | Create New Ticket
46 | Please fill out the form below
47 |
48 |
49 |
55 |
56 |
92 |
93 | );
94 | }
95 |
96 | export default NewTicket;
97 |
--------------------------------------------------------------------------------
/frontend/src/pages/Register.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { useNavigate } from "react-router-dom";
3 | import { toast } from "react-toastify";
4 | import { FaUser } from "react-icons/fa";
5 | import { useSelector, useDispatch } from "react-redux";
6 | import { register, reset } from "../features/auth/authSlice";
7 | import Spinner from "../components/Spinner";
8 |
9 | function Register() {
10 | const [formData, setFormData] = useState({
11 | name: "",
12 | email: "",
13 | password: "",
14 | password2: "",
15 | });
16 |
17 | const { name, email, password, password2 } = formData; // destructuring
18 |
19 | /**
20 | * useDispatch() returns a reference to the dispatch function
21 | * from the Redux store. You may use it to dispatch actions
22 | * as needed.
23 | */
24 |
25 | /**
26 | * By using 'useSelector' and 'useDispatch' from 'react-redux',
27 | * we can read state from a Redux store and dispatch any
28 | * action from a component, respectively.
29 | */
30 | const dispatch = useDispatch();
31 |
32 | const navigate = useNavigate();
33 |
34 | /**
35 | * useSelector() allows you to extract data from the Redux store state,
36 | * using a selector function.
37 | */
38 | const { user, isLoading, isError, isSuccess, message } = useSelector(
39 | (state) => state.auth
40 | );
41 |
42 | useEffect(() => {
43 | if (isError) {
44 | toast.error(message);
45 | }
46 |
47 | // Redirect when logged in
48 | if (isSuccess || user) {
49 | navigate("/");
50 | }
51 |
52 | dispatch(reset());
53 | }, [isError, isSuccess, user, navigate, message, dispatch]);
54 |
55 | const onChange = (e) => {
56 | setFormData((prevState) => ({
57 | ...prevState,
58 | [e.target.name]: e.target.value,
59 | }));
60 | };
61 |
62 | const onSubmit = (e) => {
63 | e.preventDefault();
64 |
65 | if (password !== password2) {
66 | toast.error("Passwords do not match");
67 | } else {
68 | const userData = {
69 | name,
70 | email,
71 | password,
72 | };
73 |
74 | dispatch(register(userData));
75 | }
76 | };
77 |
78 | if (isLoading) {
79 | return ;
80 | }
81 |
82 | return (
83 | <>
84 |
85 |
86 | Register
87 |
88 | Please create an account
89 |
90 |
91 |
146 |
147 | );
148 | }
149 |
150 | export default Register;
151 |
--------------------------------------------------------------------------------
/frontend/src/pages/Ticket.jsx:
--------------------------------------------------------------------------------
1 | import { useDispatch, useSelector } from "react-redux";
2 | import BackButton from "../components/BackButton";
3 | import { getTicket, closeTicket } from "../features/tickets/ticketSlice";
4 | import {
5 | getNotes,
6 | createNote,
7 | reset as notesReset,
8 | } from "../features/notes/noteSlice";
9 | import Spinner from "../components/Spinner";
10 | import { useParams, useNavigate } from "react-router-dom";
11 | import { useEffect, useState } from "react";
12 | import { toast } from "react-toastify";
13 | import NoteItem from "../components/NoteItem";
14 | import Modal from "react-modal";
15 | import { FaPlus } from "react-icons/fa";
16 |
17 | const customStyles = {
18 | content: {
19 | width: "600px",
20 | top: "50%",
21 | left: "50%",
22 | right: "auto",
23 | bottom: "auto",
24 | marginRight: "-50%",
25 | transform: "translate(-50%, -50%)",
26 | position: "relative",
27 | },
28 | };
29 |
30 | Modal.setAppElement("#root");
31 |
32 | function Ticket() {
33 | const options = {
34 | weekday: "long",
35 | year: "numeric",
36 | month: "long",
37 | day: "numeric",
38 | };
39 | const [modalIsOpen, setModalIsOpen] = useState(false);
40 | const [noteText, setNoteText] = useState("");
41 |
42 | const { ticket, isLoading, isError, message } = useSelector(
43 | (state) => state.tickets
44 | );
45 |
46 | const { notes, isLoading: notesIsLoading } = useSelector(
47 | (state) => state.notes
48 | );
49 |
50 | const { ticketId } = useParams();
51 | const dispatch = useDispatch();
52 | const navigate = useNavigate();
53 |
54 | useEffect(() => {
55 | if (isError) {
56 | toast.error(message);
57 | }
58 |
59 | dispatch(getTicket(ticketId));
60 | dispatch(getNotes(ticketId));
61 | // eslint-disable-next-line
62 | }, [isError, message, ticketId]);
63 |
64 | if (isLoading || notesIsLoading) return ;
65 |
66 | if (isError) {
67 | return Something went wrong
;
68 | }
69 |
70 | // Close ticket
71 | const onTicketClose = () => {
72 | dispatch(closeTicket(ticketId));
73 | toast.success("Ticket Closed");
74 | navigate("/tickets");
75 | };
76 |
77 | // Open/Close Modal
78 | const openModal = () => {
79 | setModalIsOpen(true);
80 | };
81 | const closeModal = () => {
82 | setModalIsOpen(false);
83 | };
84 |
85 | // Create Note Submit
86 | const onNoteSubmit = (e) => {
87 | e.preventDefault();
88 | dispatch(createNote({ ticketId, noteText }));
89 | closeModal();
90 | };
91 |
92 | return (
93 |
94 |
95 |
96 |
97 | Ticket ID: {ticket._id}
98 |
99 | {ticket.status}
100 |
101 |
102 |
103 | Date Submitted:{" "}
104 | {new Date(ticket.createdAt).toLocaleString("en-US", options)}
105 |
106 | Product: {ticket.product}
107 |
108 |
109 |
Description of Issue
110 |
{ticket.description}
111 |
Notes
113 |
114 |
115 | {ticket.status !== "close" && (
116 |
119 | )}
120 |
121 |
127 | Add Note
128 |
131 |
148 |
149 |
150 | {notes.map((note) => (
151 |
152 | ))}
153 |
154 | {ticket.status !== "close" && (
155 |
158 | )}
159 |
Tickets
34 |
35 |
36 |
Date
37 |
Product
38 |
Status
39 |
40 |
41 | {tickets.map((ticket) => (
42 |
43 | ))}
44 |
4 |
5 |