You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
2.9 KiB
TypeScript
110 lines
2.9 KiB
TypeScript
2 years ago
|
import $ from 'jquery';
|
||
2 years ago
|
import React from 'react';
|
||
|
import { createRoot } from 'react-dom/client';
|
||
2 years ago
|
import VjNotification from 'vj/components/notification';
|
||
2 years ago
|
import selectUser from 'vj/components/selectUser';
|
||
2 years ago
|
import { Context, ctx, Service } from 'vj/context';
|
||
2 years ago
|
import { NamedPage } from 'vj/misc/Page';
|
||
2 years ago
|
import { api, gql, loadReactRedux } from 'vj/utils';
|
||
4 years ago
|
|
||
2 years ago
|
class MessagePadService extends Service {
|
||
|
constructor(public store, public WebSocket: typeof import('../components/socket').default) {
|
||
|
super(ctx, 'messagepad', true);
|
||
|
}
|
||
|
}
|
||
|
Context.service('messagepad', MessagePadService);
|
||
|
declare module '../context' {
|
||
|
interface Context {
|
||
|
messagepad: MessagePadService;
|
||
|
}
|
||
|
}
|
||
|
|
||
4 years ago
|
const page = new NamedPage('home_messages', () => {
|
||
|
let reduxStore;
|
||
|
|
||
|
function createDialog(user) {
|
||
|
reduxStore.dispatch({
|
||
|
type: 'DIALOGUES_CREATE',
|
||
|
payload: {
|
||
|
user,
|
||
|
},
|
||
|
});
|
||
|
reduxStore.dispatch({
|
||
|
type: 'DIALOGUES_SWITCH_TO',
|
||
|
payload: user._id,
|
||
|
});
|
||
|
}
|
||
|
|
||
|
async function mountComponent() {
|
||
2 years ago
|
const { default: WebSocket } = await import('../components/socket');
|
||
4 years ago
|
const { default: MessagePadApp } = await import('../components/messagepad');
|
||
|
const { default: MessagePadReducer } = await import('../components/messagepad/reducers');
|
||
2 years ago
|
const { Provider, store } = await loadReactRedux(MessagePadReducer);
|
||
4 years ago
|
|
||
|
reduxStore = store;
|
||
2 years ago
|
(window as any).store = reduxStore;
|
||
|
ctx.messagepad = new MessagePadService(store, WebSocket);
|
||
4 years ago
|
|
||
2 years ago
|
const sock = new WebSocket(`${UiContext.ws_prefix}home/messages-conn`);
|
||
4 years ago
|
sock.onmessage = (message) => {
|
||
|
const msg = JSON.parse(message.data);
|
||
|
store.dispatch({
|
||
|
type: 'DIALOGUES_MESSAGE_PUSH',
|
||
|
payload: msg,
|
||
|
});
|
||
3 years ago
|
const notification = new VjNotification({
|
||
3 years ago
|
title: msg.udoc.uname,
|
||
|
avatar: msg.udoc.avatarUrl,
|
||
|
message: msg.mdoc.content,
|
||
|
duration: 15000,
|
||
3 years ago
|
action: () => {
|
||
|
store.dispatch({
|
||
|
type: 'DIALOGUES_SWITCH_TO',
|
||
|
payload: msg.udoc._id,
|
||
|
});
|
||
|
notification.hide();
|
||
|
},
|
||
|
});
|
||
|
notification.show();
|
||
4 years ago
|
};
|
||
|
|
||
2 years ago
|
createRoot($('#messagePad').get(0)).render(
|
||
4 years ago
|
<Provider store={store}>
|
||
|
<MessagePadApp
|
||
|
onAdd={async () => {
|
||
2 years ago
|
const user = await selectUser();
|
||
|
if (user) createDialog(user);
|
||
4 years ago
|
}}
|
||
|
/>
|
||
|
</Provider>,
|
||
|
);
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* A target user id may be assigned in the query string.
|
||
|
*/
|
||
|
async function loadSendTarget() {
|
||
2 years ago
|
const target = new URL(window.location.href).searchParams.get('target');
|
||
|
if (!target) return;
|
||
3 years ago
|
const user = await api(gql`
|
||
2 years ago
|
users(search: ${target}, exact: true) {
|
||
3 years ago
|
_id
|
||
|
uname
|
||
|
avatarUrl
|
||
|
mail
|
||
|
}
|
||
|
`, ['data', 'users']);
|
||
|
if (!user?.length) return;
|
||
4 years ago
|
createDialog(user[0]);
|
||
|
}
|
||
|
|
||
|
async function init() {
|
||
|
await mountComponent();
|
||
|
await loadSendTarget();
|
||
|
}
|
||
|
|
||
|
init();
|
||
|
});
|
||
|
|
||
|
export default page;
|