add ui

ui/components/messagepad/reducers/activeId.js

@@ -0,0 +1,34 @@
+import 'jquery.easing';
+
+function scrollToViewport() {
+  const BOUND_TOP = 60;
+  const BOUND_BOTTOM = 20;
+  const node = $('.messagepad')[0];
+  if (node.offsetHeight + BOUND_TOP + BOUND_BOTTOM < window.innerHeight) {
+    const rect = node.getBoundingClientRect();
+    const rectBody = document.body.getBoundingClientRect();
+    let targetScrollTop = null;
+    if (rect.top < BOUND_TOP) {
+      targetScrollTop = rect.top - rectBody.top - BOUND_TOP;
+    } else if (rect.top + node.offsetHeight > window.innerHeight) {
+      targetScrollTop = rect.top - rectBody.top + node.offsetHeight + BOUND_BOTTOM - window.innerHeight;
+    }
+    if (targetScrollTop !== null) {
+      $('html, body').stop().animate({ scrollTop: targetScrollTop }, 200, 'easeOutCubic');
+    }
+  }
+}
+
+export default function reducer(state = null, action) {
+  switch (action.type) {
+  case 'DIALOGUES_SWITCH_TO': {
+    scrollToViewport();
+    return action.payload;
+  }
+  case 'DIALOGUES_POST_SEND_FULFILLED': {
+    return action.payload.mdoc._id;
+  }
+  default:
+    return state;
+  }
+}

ui/components/messagepad/reducers/dialogues.js

@@ -0,0 +1,83 @@
+import _ from 'lodash';
+
+export default function reducer(state = {}, action) {
+  switch (action.type) {
+  case 'DIALOGUES_LOAD_DIALOGUES_FULFILLED': {
+    const { messages, udict } = action.payload;
+    return _.keyBy(
+      _.filter(
+        _.map(messages, m => ({
+          sendee_udoc: udict[m.sendee_uid],
+          sender_udoc: udict[m.sender_uid],
+          ...m,
+        })),
+        m => m.sendee_udoc && m.sender_udoc,
+      ),
+      '_id',
+    );
+  }
+  case 'DIALOGUES_CREATE': {
+    const { id, user } = action.payload;
+    return {
+      ...state,
+      [id]: {
+        _id: id,
+        sender_uid: UserContext.uid,
+        sendee_uid: user._id,
+        sendee_udoc: { ...user },
+        reply: [],
+        isPlaceholder: true,
+      },
+    };
+  }
+  case 'DIALOGUES_POST_REPLY_FULFILLED': {
+    const id = action.meta.dialogueId;
+    const { reply } = action.payload;
+    return {
+      ...state,
+      [id]: {
+        ...state[id],
+        reply: [
+          ...state[id].reply,
+          reply,
+        ],
+      },
+    };
+  }
+  case 'DIALOGUES_POST_SEND_FULFILLED': {
+    const { placeholderId } = action.meta;
+    return {
+      ..._.omit(state, placeholderId),
+      [action.payload.mdoc._id]: action.payload.mdoc,
+    };
+  }
+  case 'DIALOGUES_MESSAGE_PUSH': {
+    const { type, data } = action.payload;
+    const id = data._id;
+    if (type === 'new') {
+      return {
+        ...state,
+        [id]: data,
+      };
+    } if (type === 'reply') {
+      if (state[id] === undefined) {
+        window.location.reload();
+        return state;
+      }
+      return {
+        ...state,
+        [id]: {
+          ...state[id],
+          reply: [
+            ...state[id].reply,
+            data.reply[0],
+          ],
+        },
+      };
+    }
+    return state;
+  }
+  default:
+    return state;
+  }
+}

ui/components/messagepad/reducers/index.js

@@ -0,0 +1,14 @@
+import { combineReducers } from 'redux';
+import activeId from './activeId';
+import dialogues from './dialogues';
+import inputs from './inputs';
+import isPosting from './isPosting';
+
+const reducer = combineReducers({
+  activeId,
+  dialogues,
+  inputs,
+  isPosting,
+});
+
+export default reducer;

ui/components/messagepad/reducers/inputs.js

@@ -0,0 +1,51 @@
+import _ from 'lodash';
+
+export default function reducer(state = {}, action) {
+  switch (action.type) {
+  case 'DIALOGUES_LOAD_DIALOGUES_FULFILLED': {
+    const dialogues = action.payload.messages;
+    return _.fromPairs(_.map(dialogues, d => [d._id, '']));
+  }
+  case 'DIALOGUES_CREATE': {
+    const { id } = action.payload;
+    return {
+      ...state,
+      [id]: '',
+    };
+  }
+  case 'DIALOGUES_INPUT_CHANGED': {
+    const id = action.meta.dialogueId;
+    return {
+      ...state,
+      [id]: action.payload,
+    };
+  }
+  case 'DIALOGUES_POST_REPLY_FULFILLED': {
+    const id = action.meta.dialogueId;
+    return {
+      ...state,
+      [id]: '',
+    };
+  }
+  case 'DIALOGUES_POST_SEND_FULFILLED': {
+    const { placeholderId } = action.meta;
+    return {
+      ..._.omit(state, placeholderId),
+      [action.payload.mdoc._id]: '',
+    };
+  }
+  case 'DIALOGUES_MESSAGE_PUSH': {
+    const { type, data } = action.payload;
+    const id = data._id;
+    if (type === 'new') {
+      return {
+        ...state,
+        [id]: '',
+      };
+    }
+    return state;
+  }
+  default:
+    return state;
+  }
+}

ui/components/messagepad/reducers/isPosting.js

@@ -0,0 +1,75 @@
+import _ from 'lodash';
+import Notification from 'vj/components/notification';
+
+export default function reducer(state = {}, action) {
+  switch (action.type) {
+  case 'DIALOGUES_LOAD_DIALOGUES_FULFILLED': {
+    const dialogues = action.payload.messages;
+    return _.fromPairs(_.map(dialogues, d => [d._id, false]));
+  }
+  case 'DIALOGUES_CREATE': {
+    const { id } = action.payload;
+    return {
+      ...state,
+      [id]: false,
+    };
+  }
+  case 'DIALOGUES_POST_REPLY_PENDING': {
+    const id = action.meta.dialogueId;
+    return {
+      ...state,
+      [id]: true,
+    };
+  }
+  case 'DIALOGUES_POST_REPLY_REJECTED': {
+    Notification.error(action.payload.message);
+    const id = action.meta.dialogueId;
+    return {
+      ...state,
+      [id]: false,
+    };
+  }
+  case 'DIALOGUES_POST_REPLY_FULFILLED': {
+    const id = action.meta.dialogueId;
+    return {
+      ...state,
+      [id]: false,
+    };
+  }
+  case 'DIALOGUES_POST_SEND_PENDING': {
+    const { placeholderId } = action.meta;
+    return {
+      ...state,
+      [placeholderId]: true,
+    };
+  }
+  case 'DIALOGUES_POST_SEND_REJECTED': {
+    Notification.error(action.payload.message);
+    const { placeholderId } = action.meta;
+    return {
+      ...state,
+      [placeholderId]: false,
+    };
+  }
+  case 'DIALOGUES_POST_SEND_FULFILLED': {
+    const { placeholderId } = action.meta;
+    return {
+      ..._.omit(state, placeholderId),
+      [action.payload.mdoc._id]: false,
+    };
+  }
+  case 'DIALOGUES_MESSAGE_PUSH': {
+    const { type, data } = action.payload;
+    const id = data._id;
+    if (type === 'new') {
+      return {
+        ...state,
+        [id]: false,
+      };
+    }
+    return state;
+  }
+  default:
+    return state;
+  }
+}