refactor(messages): moving messages to react [unstable]

src/client/actions/messages.js

@@ -0,0 +1,59 @@
+/*
+ *       .                             .o8                     oooo
+ *    .o8                             "888                     `888
+ *  .o888oo oooo d8b oooo  oooo   .oooo888   .ooooo.   .oooo.o  888  oooo
+ *    888   `888""8P `888  `888  d88' `888  d88' `88b d88(  "8  888 .8P'
+ *    888    888      888   888  888   888  888ooo888 `"Y88b.   888888.
+ *    888 .  888      888   888  888   888  888    .o o.  )88b  888 `88b.
+ *    "888" d888b     `V88V"V8P' `Y8bod88P" `Y8bod8P' 8""888P' o888o o888o
+ *  ========================================================================
+ *  Author:     Chris Brame
+ *  Updated:    7/2/22 5:23 AM
+ *  Copyright (c) 2014-2022. Trudesk Inc (Chris Brame) All rights reserved.
+ */
+
+import { createAction } from 'redux-actions'
+import {
+  FETCH_CONVERSATIONS,
+  FETCH_SINGLE_CONVERSATION,
+  MESSAGES_SEND,
+  MESSAGES_UI_RECEIVE,
+  UNLOAD_SINGLE_CONVERSATION,
+  UNLOAD_CONVERSATIONS
+} from 'actions/types'
+
+export const fetchConversations = createAction(
+  FETCH_CONVERSATIONS.ACTION,
+  payload => payload,
+  () => ({ thunk: true })
+)
+
+export const unloadConversations = createAction(
+  UNLOAD_CONVERSATIONS.ACTION,
+  () => {},
+  () => ({ thunk: true })
+)
+
+export const fetchSingleConversation = createAction(
+  FETCH_SINGLE_CONVERSATION.ACTION,
+  payload => payload,
+  () => ({ thunk: true })
+)
+
+export const unloadSingleConversation = createAction(
+  UNLOAD_SINGLE_CONVERSATION.ACTION,
+  () => {},
+  () => ({ thunk: true })
+)
+
+export const sendMessage = createAction(
+  MESSAGES_SEND.ACTION,
+  payload => payload,
+  () => ({ thunk: true })
+)
+
+export const receiveMessage = createAction(
+  MESSAGES_UI_RECEIVE.SUCCESS,
+  payload => payload,
+  () => ({ thunk: true })
+)

src/client/actions/types.js

@@ -95,6 +95,14 @@ export const UPDATE_DEPARTMENT = defineAction('UPDATE_DEPARTMENT', [SUCCESS, PEN
 export const DELETE_DEPARTMENT = defineAction('DELETE_DEPARTMENT', [SUCCESS, PENDING, ERROR])
 export const UNLOAD_DEPARTMENTS = defineAction('UNLOAD_DEPARTMENTS', [SUCCESS])
 
+// Messages
+export const FETCH_CONVERSATIONS = defineAction('FETCH_CONVERSATIONS', [SUCCESS, PENDING, ERROR])
+export const UNLOAD_CONVERSATIONS = defineAction('UNLOAD_CONVERSATIONS', [SUCCESS])
+export const FETCH_SINGLE_CONVERSATION = defineAction('FETCH_SINGLE_CONVERSATION', [SUCCESS, PENDING, ERROR])
+export const UNLOAD_SINGLE_CONVERSATION = defineAction('UNLOAD_SINGLE_CONVERSATION', [SUCCESS])
+export const MESSAGES_SEND = defineAction('MESSAGES_SEND', [SUCCESS, ERROR])
+export const MESSAGES_UI_RECEIVE = defineAction('MESSAGES_UI_RECEIVE', [SUCCESS])
+
 // Notices
 export const FETCH_NOTICES = defineAction('FETCH_NOTICES', [PENDING, SUCCESS, ERROR])
 export const CREATE_NOTICE = defineAction('CREATE_NOTICE', [SUCCESS, PENDING, ERROR])

src/client/api/index.js

@@ -288,6 +288,23 @@ api.departments.delete = ({ _id }) => {
   })
 }
 
+api.messages = {}
+api.messages.getConversations = payload => {
+  return axios.get('/api/v2/messages/conversations').then(res => {
+    return res.data
+  })
+}
+api.messages.getSingleConversation = ({ _id }) => {
+  return axios.get(`/api/v2/messages/conversations/${_id}`).then(res => {
+    return res.data
+  })
+}
+api.messages.send = payload => {
+  return axios.post('/api/v1/messages/send', payload).then(res => {
+    return res.data
+  })
+}
+
 api.notices = {}
 api.notices.create = payload => {
   return axios.post('/api/v2/notices', payload).then(res => {

src/client/components/PageTitle/index.jsx

@@ -14,13 +14,23 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
+import clsx from 'clsx'
 
 class PageTitle extends React.Component {
   render () {
-    const { title, rightComponent, shadow } = this.props
+    const { title, rightComponent, shadow, hideBorderBottom, extraClasses } = this.props
     return (
-      <div className={'nopadding'}>
-        <div className={'uk-width-1-1 page-title dt-borderBottom pl-25 uk-clearfix' + (!shadow ? ' noshadow' : '')}>
+      <div className={clsx('nopadding', extraClasses)}>
+        <div
+          className={clsx(
+            'uk-width-1-1',
+            'page-title',
+            'pl-25',
+            'uk-clearfix',
+            hideBorderBottom ? 'nbb' : 'dt-borderBottom',
+            !shadow && 'noshadow'
+          )}
+        >
           <p className={'uk-float-left'}>{title}</p>
           <div className={'uk-float-right uk-clearfix uk-width-1-2'}>{rightComponent}</div>
         </div>
@@ -32,11 +42,14 @@ class PageTitle extends React.Component {
 PageTitle.propTypes = {
   title: PropTypes.string.isRequired,
   shadow: PropTypes.bool,
+  hideBorderBottom: PropTypes.bool,
+  extraClasses: PropTypes.string,
   rightComponent: PropTypes.element
 }
 
 PageTitle.defaultProps = {
-  shadow: false
+  shadow: false,
+  hideBorderBottom: false
 }
 
 export default PageTitle