Comments fully implemented

backend/controller/comments.controller.js

@@ -0,0 +1,28 @@
+const { createComment, getAllComments } = require('../service/comments.service')
+
+const getAllCommentsController = (req, res) => {
+    const ticketID = req.params.id
+    getAllComments(ticketID)
+        .then((data) => res.send(data))
+        .catch((err) => {
+            res.status(500).send(err)
+            console.log(err)
+        })
+}
+
+const createCommentController = (req, res) => {
+    createComment(req.body)
+        .then((data) => {
+            console.log(data)
+            res.send(data)
+        })
+        .catch((error) => {
+            console.log(error)
+            res.status(500).send(error)
+        })
+}
+
+module.exports = {
+    createCommentController,
+    getAllCommentsController,
+}

backend/models/comment.model.js

@@ -1,11 +1,15 @@
 const mongoose = require('mongoose')
 const { Schema } = mongoose
 
+const Mixed = Schema.Types.Mixed
+
+//sort by new -> old for parent comments, old -> new for replies
 const CommentSchema = new Schema(
     {
-        // reference_code would be parent ticket here
-        reference_code: { type: String, index: true },
-        commment: { type: String },
+        // reference_code would be parent ticket/parent comment here
+        reference_code: { type: String, index: true, required: true },
+        comment: { type: [Mixed], required: true },
+        author_id: { type: String, required: true },
     },
     {
         timestamps: true,

backend/routes/comments.routes.js

@@ -0,0 +1,15 @@
+const router = require('express').Router()
+const { authenticateUser } = require('../auth/middleware')
+const {
+    createCommentController,
+    getAllCommentsController,
+} = require('../controller/comments.controller')
+
+router.route('/:id').get(authenticateUser, getAllCommentsController)
+
+router.route('/').post(authenticateUser, createCommentController)
+
+//delete, edit and others can come later
+//shouldn't be too hard can just fully replace the comment part
+
+module.exports = router

backend/server.js

@@ -31,6 +31,7 @@ const UWFinancePurchaseRouter = require('./routes/uwfinancepurchases.routes')
 const usersRouter = require('./routes/users.routes')
 const groupRouter = require('./routes/googlegroup.routes')
 const filesRouter = require('./routes/files.routes')
+const commentRouter = require('./routes/comments.routes')
 
 app.use(express.json())
 app.use('/fundingitems', fundingItemsRouter)
@@ -40,6 +41,7 @@ app.use('/uwfinancepurchases', UWFinancePurchaseRouter)
 app.use('/users', usersRouter)
 app.use('/googlegroups', groupRouter)
 app.use('/files', filesRouter)
+app.use('/comments', commentRouter)
 
 app.listen(port, async () => {
     console.log(`Server is running on port: ${port}`)

backend/service/comments.service.js

@@ -0,0 +1,47 @@
+const Comment = require('../models/comment.model')
+
+const createComment = async (body) => {
+    const comment = new Comment(body)
+    const newComment = await comment.save()
+    return newComment
+}
+
+const getAllComments = async (code) => {
+    //add reply aggregation, sortby
+    const res = await Comment.aggregate([
+        {
+            $match: {
+                reference_code: code,
+            },
+        },
+        {
+            $lookup: {
+                from: 'comments',
+                let: { idStr: { $toString: '$_id' } }, // Define variable for use in the pipeline
+                pipeline: [
+                    {
+                        $match: {
+                            $expr: { $eq: ['$reference_code', '$$idStr'] }, // Use the variable to match documents
+                        },
+                    },
+                    { $sort: { createdAt: 1 } }, // Sort matching documents in ascending order
+                ],
+                as: 'replies',
+            },
+        },
+        {
+            $sort: { createdAt: -1 },
+        },
+        {
+            $set: {
+                replies: '$replies',
+            },
+        },
+    ])
+    return res
+}
+
+module.exports = {
+    createComment,
+    getAllComments,
+}

frontend/public/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />

frontend/src/components/CommentInput.js

@@ -0,0 +1,186 @@
+import { useCallback, useMemo, useState } from 'react'
+import isHotkey from 'is-hotkey'
+import { Editable, withReact, Slate } from 'slate-react'
+import { createEditor } from 'slate'
+import { withHistory } from 'slate-history'
+import { useAuth } from '../contexts/AuthContext'
+import { axiosPreset } from '../axiosConfig'
+import { Box, Button } from '@chakra-ui/react'
+
+import {
+    BlockButton,
+    Element,
+    Leaf,
+    MarkButton,
+    Toolbar,
+    toggleMark,
+} from './SlateComponents'
+
+const HOTKEYS = {
+    'mod+b': 'bold',
+    'mod+i': 'italic',
+    'mod+u': 'underline',
+}
+
+const cleanInput = (val) => {
+    const res = []
+    let l = 0
+    let r = val.length - 1
+    while (l <= r) {
+        if (val[l]['children'][0]['text'] == '') {
+            l += 1
+        }
+        if (val[r]['children'][0]['text'] == '') {
+            r += -1
+        }
+
+        if (
+            val[l]['children'][0]['text'] != '' &&
+            val[r]['children'][0]['text'] != ''
+        ) {
+            break
+        }
+    }
+    for (let i = l; i <= r; i++) {
+        res.push(val[i])
+    }
+    return res
+}
+
+const invalidInput = (val) => {
+    if (val.length === 0) {
+        return true
+    }
+
+    for (let i = 0; i < val.length; i++) {
+        if (val[i]['children'][0]['text'] != '') {
+            return false
+        }
+    }
+    return true
+}
+
+const CommentInput = ({ code, getComments, reply, onClose, ticket }) => {
+    const renderElement = useCallback((props) => <Element {...props} />, [])
+    const renderLeaf = useCallback((props) => <Leaf {...props} />, [])
+    const editor = useMemo(() => withHistory(withReact(createEditor())), [])
+    const [loading, setLoading] = useState(false)
+    const auth = useAuth()
+    const [val, setVal] = useState(editor.children)
+    const handleSubmit = (ref, ticket) => {
+        setLoading(true)
+        const comment = cleanInput(val)
+        if (comment.length === 0) {
+            console.log('EMPTY')
+            return
+        }
+        const payload = {
+            author_id: auth.currentUser.uid,
+            comment: comment,
+            reference_code: ref,
+        }
+        axiosPreset
+            .post('/comments', payload)
+            .then(() => getComments(ticket).then(() => setLoading(false)))
+
+            .catch(() => setLoading(false))
+    }
+
+    return (
+        <Slate
+            editor={editor}
+            initialValue={initialValue}
+            onChange={() => {
+                setVal([...editor.children])
+            }}
+        >
+            <Editable
+                style={{
+                    marginTop: '10px',
+                    padding: '20px',
+                    paddingLeft: '30px',
+                    minHeight: '150px',
+                    border: '2px #f0f0f0 solid',
+                    borderRadius: '10px',
+                }}
+                renderElement={renderElement}
+                renderLeaf={renderLeaf}
+                spellCheck
+                autoFocus={reply}
+                onKeyDown={(event) => {
+                    for (const hotkey in HOTKEYS) {
+                        if (isHotkey(hotkey, event)) {
+                            event.preventDefault()
+                            const mark = HOTKEYS[hotkey]
+                            toggleMark(editor, mark)
+                        }
+                    }
+                }}
+            />
+            <Box
+                display="flex"
+                width="100%"
+                justifyContent="space-between"
+                paddingLeft="5px"
+            >
+                <Toolbar>
+                    <MarkButton format="bold" icon="format_bold" />
+                    <MarkButton format="italic" icon="format_italic" />
+                    <MarkButton format="underline" icon="format_underlined" />
+                    <BlockButton format="block-quote" icon="format_quote" />
+                    <BlockButton
+                        format="numbered-list"
+                        icon="format_list_numbered"
+                    />
+                    <BlockButton
+                        format="bulleted-list"
+                        icon="format_list_bulleted"
+                    />
+                </Toolbar>
+                <Box
+                    display="flex"
+                    gap="10px"
+                    marginTop="5px"
+                    paddingRight="5px"
+                >
+                    {reply && (
+                        <Button
+                            onClick={onClose}
+                            padding="10px"
+                            height="32px"
+                            colorScheme="red"
+                        >
+                            Cancel
+                        </Button>
+                    )}
+                    <Button
+                        isLoading={loading}
+                        disabled={val.length === 0 || invalidInput(val)}
+                        padding="10px"
+                        height="32px"
+                        colorScheme="blue"
+                        onClick={() => {
+                            handleSubmit(code, ticket)
+                        }}
+                    >
+                        {reply ? 'Reply' : 'Comment'}
+                    </Button>
+                </Box>
+            </Box>
+        </Slate>
+    )
+}
+
+// example taken from https://github.com/ianstormtaylor/slate/blob/main/site/components.tsx
+// remove once dynamically fetched from backend
+const initialValue = [
+    {
+        type: 'paragraph',
+        children: [{ text: '' }],
+    },
+]
+
+export default CommentInput
+
+//make a function that removes white lines in the start
+//parses data to make it look nice