10 |
11 |
20 | );
21 | };
22 | }
23 |
24 | export default ModalBase;
25 |
--------------------------------------------------------------------------------
/server/init/db.ts:
--------------------------------------------------------------------------------
1 | import { createPool } from 'mysql';
2 | import configs from '../src/configs/configs.dev';
3 | // import configs from '../src/configs/configs.prod'; //if use in production
4 |
5 | const pool = createPool(configs.dbConnection);
6 |
7 | export const query = (sql, values?): Promise
12 | {cancel && (
13 |
14 | x
15 |
16 | )}
17 |
19 |
10 | {' '}
13 | {msg}
14 |
15 | );
16 | } else if (type === 'warn') {
17 | content = (
18 |
19 | {' '}
22 | {msg}
23 |
24 | );
25 | } else if (type === 'error') {
26 | content = (
27 |
28 | {' '}
31 | {msg}
32 |
33 | );
34 | }
35 | return content;
36 | }
37 |
38 | export default function notification(msg, type, duration) {
39 | const content = addIcon(msg, type);
40 | Notification.newInstance({}, notification => {
41 | notification.notice({
42 | content,
43 | duration,
44 | });
45 | });
46 | }
47 |
--------------------------------------------------------------------------------
/server/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "class-name": true,
4 | "comment-format": [true, "check-space"],
5 | "indent": [true, "spaces"],
6 | "one-line": [true, "check-open-brace", "check-whitespace"],
7 | "no-var-keyword": true,
8 | "quotemark": [true, "double", "avoid-escape"],
9 | "semicolon": [true, "always", "ignore-bound-class-methods"],
10 | "whitespace": [
11 | true,
12 | "check-branch",
13 | "check-decl",
14 | "check-operator",
15 | "check-module",
16 | "check-separator",
17 | "check-type"
18 | ],
19 | "typedef-whitespace": [
20 | true,
21 | {
22 | "call-signature": "nospace",
23 | "index-signature": "nospace",
24 | "parameter": "nospace",
25 | "property-declaration": "nospace",
26 | "variable-declaration": "nospace"
27 | },
28 | {
29 | "call-signature": "onespace",
30 | "index-signature": "onespace",
31 | "parameter": "onespace",
32 | "property-declaration": "onespace",
33 | "variable-declaration": "onespace"
34 | }
35 | ],
36 | "no-internal-module": true,
37 | "no-trailing-whitespace": true,
38 | "no-null-keyword": true,
39 | "prefer-const": true,
40 | "jsdoc-format": true
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/SearchBox/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import './styles.scss';
4 |
5 | export default class SearchBox extends Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | searchField: '',
10 | };
11 | }
12 |
13 | _searchFieldChange = event => {
14 | const { name, value } = event.target;
15 | this.setState({ [name]: value });
16 | const { searchFieldChange } = this.props;
17 | searchFieldChange(value);
18 | };
19 |
20 | render() {
21 | const { searchField } = this.state;
22 | const { isSearching } = this.props;
23 | return (
24 |
25 |
28 |
35 |
36 | );
37 | }
38 | }
39 |
40 | SearchBox.propTypes = {
41 | searchFieldChange: PropTypes.func,
42 | isSearching: PropTypes.bool,
43 | };
44 |
45 | SearchBox.defaultProps = {
46 | searchFieldChange: undefined,
47 | isSearching: false,
48 | };
49 |
--------------------------------------------------------------------------------
/src/components/ShareModal/styles.scss:
--------------------------------------------------------------------------------
1 | .shareModalWrapper {
2 | height: 50%;
3 | .dialogRender {
4 | height: 100%;
5 | .searchBox {
6 | padding: 10px 0;
7 | }
8 | .homePageList {
9 | height: calc(100% - 130px);
10 | overflow-y: auto;
11 | li{
12 | &:hover {
13 | background-color: #f5f5f5;
14 | }
15 | padding: 6px 0 6px 20px !important;
16 | .title p {
17 | margin-bottom: 0 !important;
18 | }
19 | .groupAvatar {
20 | width: 28px;
21 | height: 28px;
22 | .userAvatar{
23 | width: 14px !important;
24 | height: 14px !important;
25 | line-height: 14px !important;
26 | }
27 | }
28 | .userAvatar {
29 | width: 28px !important;
30 | height: 28px !important;
31 | line-height: 28px !important;
32 | img {
33 | width: 28px !important;
34 | height: 28px !important;
35 | }
36 | }
37 | }
38 | }
39 | .shareShareLink {
40 | font-size: 14px;
41 | display: flex;
42 | justify-content: center;
43 | align-items: center;
44 | padding: 10px;
45 | cursor: pointer;
46 | .shareIcon {
47 | font-size: 24px;
48 | }
49 | }
50 | }
51 |
52 | }
53 |
--------------------------------------------------------------------------------
/webpack.dev.config.js:
--------------------------------------------------------------------------------
1 | const merge = require('webpack-merge');
2 | const path = require('path');
3 | const webpack = require('webpack');
4 | const ProgressBarPlugin = require('progress-bar-webpack-plugin');
5 | const commonConfig = require('./webpack.common.config.js');
6 |
7 | module.exports = merge(commonConfig, {
8 | mode: 'development',
9 | optimization: {
10 | usedExports: true,
11 | },
12 | devtool: 'inline-source-map',
13 | entry: {
14 | app: ['babel-polyfill', 'react-hot-loader/patch', path.resolve(__dirname, 'src/index.js')],
15 | },
16 | output: {
17 | /* 这里本来应该是[chunkhash]的，但是由于[chunkhash]和react-hot-loader不兼容。只能妥协 */
18 | filename: '[name].[hash].js',
19 | path: path.resolve(__dirname, './build'),
20 | },
21 | module: {
22 | rules: [
23 | {
24 | test: /\.(js|jsx)$/,
25 | use: 'react-hot-loader/webpack',
26 | include: /node_modules/,
27 | },
28 | {
29 | test: /\.scss$/,
30 | use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader'],
31 | },
32 | ],
33 | },
34 | devServer: {
35 | contentBase: path.resolve(__dirname, './src'), // 让WEB服务器运行静态资源（index.html）
36 | hot: true,
37 | historyApiFallback: true,
38 | compress: true,
39 | stats: 'errors-only', // 只在发生错误时输出
40 | },
41 | plugins: [new webpack.HotModuleReplacementPlugin(), new ProgressBarPlugin()],
42 | });
43 |
--------------------------------------------------------------------------------
/server/src/app/services/group.service.ts:
--------------------------------------------------------------------------------
1 | import { query } from '../utils/db';
2 |
3 | export class GroupService {
4 | // 模糊匹配用户
5 | fuzzyMatchGroups(link) {
6 | const _sql = `
7 | SELECT * FROM group_info WHERE name LIKE ?;
8 | `;
9 | return query(_sql, link);
10 | }
11 |
12 | // 加入群
13 | joinGroup(user_id, to_group_id) {
14 | const _sql = 'INSERT INTO group_user_relation(user_id,to_group_id) VALUES(?,?);';
15 | return query(_sql, [user_id, to_group_id]);
16 | }
17 |
18 | // 查看某个用户是否在某个群中
19 | isInGroup(user_id, to_group_id) {
20 | const _sql = 'SELECT * FROM group_user_relation WHERE user_id = ? AND to_group_id = ?;';
21 | return query(_sql, [user_id, to_group_id]);
22 | }
23 |
24 | // 建群
25 | createGroup(arr) {
26 | const _sql =
27 | 'INSERT INTO group_info (to_group_id,name,group_notice,creator_id,create_time) VALUES (?,?,?,?,?)';
28 | return query(_sql, arr);
29 | }
30 |
31 | // 更新群信息
32 |
33 | updateGroupInfo({ name, group_notice, to_group_id }) {
34 | const _sql = 'UPDATE group_info SET name = ?, group_notice = ? WHERE to_group_id= ? limit 1 ; ';
35 | return query(_sql, [name, group_notice, to_group_id]);
36 | }
37 |
38 | // 退群
39 | leaveGroup(user_id, to_group_id) {
40 | const _sql = 'DELETE FROM group_user_relation WHERE user_id = ? AND to_group_id = ? ;';
41 | return query(_sql, [user_id, to_group_id]);
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/containers/PrivateChatPage/index.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import { withRouter } from 'react-router-dom';
3 | import {
4 | updateHomePageListAction,
5 | deleteHomePageListAction,
6 | } from '../HomePageList/homePageListAction';
7 | import {
8 | addPrivateChatMessagesAction,
9 | addPrivateChatInfoAction,
10 | deletePrivateChatAction,
11 | } from './privateChatAction';
12 | import PrivateChat from '../../components/PrivateChat';
13 |
14 | const mapStateToProps = state => ({
15 | allPrivateChats: state.allPrivateChatsState,
16 | homePageList: state.homePageListState,
17 | relatedCurrentChat: state.relatedCurrentChat,
18 | shareData: state.shareState,
19 | allGroupChats: state.allGroupChatsState,
20 | initApp: state.initAppState,
21 | });
22 |
23 | const mapDispatchToProps = dispatch => ({
24 | addPrivateChatMessages(arg = {}) {
25 | dispatch(addPrivateChatMessagesAction({ ...arg }));
26 | },
27 | addPrivateChatInfo(arg = {}) {
28 | dispatch(addPrivateChatInfoAction({ ...arg }));
29 | },
30 | updateHomePageList(arg = {}) {
31 | dispatch(updateHomePageListAction({ ...arg }));
32 | },
33 | deleteHomePageList(arg = {}) {
34 | dispatch(deleteHomePageListAction({ ...arg }));
35 | },
36 | deletePrivateChat(arg = {}) {
37 | dispatch(deletePrivateChatAction({ ...arg }));
38 | },
39 | });
40 |
41 | export default withRouter(connect(mapStateToProps, mapDispatchToProps)(PrivateChat));
42 |
--------------------------------------------------------------------------------
/src/utils/request.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-sequences */
2 | import axios from 'axios';
3 |
4 | export default class Request {
5 | static axiosConfigInit() {
6 | if (process.env.NODE_ENV !== 'production') {
7 | axios.defaults.baseURL = 'http://localhost:3000';
8 | }
9 | }
10 |
11 | static async axios(method = 'get', url, params) {
12 | const handleMethod = method === 'get' && params ? { params } : params;
13 | return new Promise((resolve, reject) => {
14 | // eslint-disable-next-line no-unused-expressions
15 | axios[method](url, handleMethod)
16 | .then(res => {
17 | const response = typeof res.data === 'object' ? res.data : JSON.parse(res.data);
18 | resolve(response);
19 | })
20 | .catch(error => {
21 | reject(error.response ? error.response.data : error);
22 | });
23 | });
24 | }
25 |
26 | static socketEmit(emitName, data, onError) {
27 | try {
28 | window.socket.emit(emitName, data);
29 | } catch (error) {
30 | if (onError) {
31 | onError(error);
32 | }
33 | }
34 | }
35 |
36 | static socketEmitAndGetResponse(emitName, data, onError) {
37 | return new Promise((resolve, reject) => {
38 | try {
39 | window.socket.emit(emitName, data, response => {
40 | resolve(response);
41 | });
42 | } catch (error) {
43 | if (onError) {
44 | onError(error);
45 | }
46 | reject(error);
47 | }
48 | });
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/utils/transformTime.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * @param 时间戳
4 | * @return yyyy-MM-dd hh:mm 格式的时间
5 | */
6 |
7 | function addZero(data) {
8 | if (data.toString().length === 1) {
9 | return `0${data}`;
10 | }
11 | return data;
12 | }
13 |
14 | function monthHandle(month) {
15 | return `${month + 1 < 10 ? `0${month + 1}` : month + 1}`;
16 | }
17 |
18 | export const toNormalTime = timestamp => {
19 | const dateOfArg = new Date(timestamp * 1000);
20 | const [yearOfArg, monthOfArg, dayOfArg, hourOfArg, minuteOfArg] = [
21 | dateOfArg.getFullYear(),
22 | dateOfArg.getMonth(),
23 | dateOfArg.getDate(),
24 | dateOfArg.getHours(),
25 | dateOfArg.getMinutes(),
26 | ];
27 | const date = new Date();
28 | const [today, yesterday, thisMonth, thisYear] = [
29 | date.getDate(),
30 | new Date(new Date().setDate(new Date().getDate() - 1)).getDate(),
31 | date.getMonth(),
32 | date.getFullYear(),
33 | ];
34 |
35 | const isToday = thisYear === yearOfArg && thisMonth === monthOfArg && today === dayOfArg;
36 | if (isToday) {
37 | return `${addZero(hourOfArg)}:${addZero(minuteOfArg)}`;
38 | }
39 |
40 | const isYesterday = thisYear === yearOfArg && thisMonth === monthOfArg && yesterday === dayOfArg;
41 | if (isYesterday) {
42 | return `昨天 ${addZero(hourOfArg)}:${addZero(minuteOfArg)}`;
43 | }
44 |
45 | if (yearOfArg === thisYear) {
46 | return `${monthHandle(monthOfArg)}/${addZero(dayOfArg)}`;
47 | }
48 |
49 | return `${yearOfArg}/${monthHandle(monthOfArg)}/${addZero(dayOfArg)}`;
50 | };
51 |
--------------------------------------------------------------------------------
/server/src/app/context/ServicesContext.ts:
--------------------------------------------------------------------------------
1 | import { ChatService, GroupChatService, GroupService, UserService } from './../services';
2 |
3 | export class ServicesContext {
4 | static instance: ServicesContext;
5 |
6 | static getInstance(): ServicesContext {
7 | if (!ServicesContext.instance) {
8 | ServicesContext.instance = new ServicesContext();
9 | }
10 | return ServicesContext.instance;
11 | }
12 |
13 | // user
14 | private _userService: UserService;
15 | public get userService() {
16 | return this._userService;
17 | }
18 | public setuserService(service: UserService): ServicesContext {
19 | this._userService = service;
20 | return this;
21 | }
22 |
23 | // group
24 | private _groupService: GroupService;
25 | public get groupService() {
26 | return this._groupService;
27 | }
28 | public setGroupService(service: GroupService): ServicesContext {
29 | this._groupService = service;
30 | return this;
31 | }
32 |
33 | // chat
34 | private _chatService: ChatService;
35 | public get chatService() {
36 | return this._chatService;
37 | }
38 | public setChatService(service: ChatService): ServicesContext {
39 | this._chatService = service;
40 | return this;
41 | }
42 |
43 | // groupChat
44 | private _groupChatService: GroupChatService;
45 | public get groupChatService() {
46 | return this._groupChatService;
47 | }
48 | public setgroupChatService(service: GroupChatService): ServicesContext {
49 | this._groupChatService = service;
50 | return this;
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/server/webpack.config.js:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 |
3 | const nodeExternals = require('webpack-node-externals');
4 | const webpack = require('webpack');
5 | const path = require('path');
6 |
7 | // function srcPath(subdir) {
8 | // return path.join(__dirname, subdir);
9 | // }
10 |
11 | const config = {
12 | mode: 'development',
13 | entry: './src/main.ts',
14 | target: 'node',
15 | output: {
16 | // Puts the output at the root of the dist folder
17 | path: path.join(__dirname, 'dist'),
18 | filename: 'index.js',
19 | },
20 | resolve: {
21 | alias: {
22 | 'react-dom': '@hot-loader/react-dom',
23 | },
24 | extensions: ['.ts', '.js'],
25 | modules: ['node_modules', 'src'],
26 | },
27 | plugins: [
28 | new webpack.LoaderOptionsPlugin({
29 | options: {
30 | test: /\.ts$/,
31 | ts: {
32 | compiler: 'typescript',
33 | configFileName: 'tsconfig.json',
34 | },
35 | tslint: {
36 | emitErrors: true,
37 | failOnHint: true,
38 | },
39 | },
40 | }),
41 | ],
42 | module: {
43 | rules: [
44 | {
45 | test: /\.ts$/,
46 | use: 'awesome-typescript-loader',
47 | },
48 | ],
49 | },
50 | externals: [nodeExternals()],
51 | };
52 |
53 | module.exports = (env, argv) => {
54 | if (!argv.prod) {
55 | config.devtool = 'source-map';
56 | }
57 | config.resolve.alias = {
58 | '@configs': path.join(__dirname, `src/configs/configs.${argv.prod ? 'prod' : 'dev'}.ts`),
59 | };
60 | return config;
61 | };
62 |
--------------------------------------------------------------------------------
/src/components/ShareChatCard/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import ShareModal from '../ShareModal';
4 |
5 | class ShareChatCard extends Component {
6 | state = {
7 | showShareModal: false,
8 | };
9 |
10 | _showShareModal = () => {
11 | this.props.hideOtherModal();
12 | this.setState(state => ({ showShareModal: !state.showShareModal }));
13 | };
14 |
15 | _closeShareModal = () => {
16 | this.setState({ showShareModal: false });
17 | };
18 |
19 | render() {
20 | const { allGroupChats, homePageList, title, chatId } = this.props;
21 | return (
22 |
23 |
26 |
35 | );
36 | }
37 | }
38 |
39 | export default ShareChatCard;
40 |
41 | ShareChatCard.propTypes = {
42 | title: PropTypes.string,
43 | allGroupChats: PropTypes.instanceOf(Map),
44 | homePageList: PropTypes.array,
45 | chatId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
46 | hideOtherModal: PropTypes.func,
47 | };
48 |
49 | ShareChatCard.defaultProps = {
50 | title: '',
51 | allGroupChats: new Map(),
52 | homePageList: [],
53 | chatId: null,
54 | hideOtherModal() {},
55 | };
56 |
--------------------------------------------------------------------------------
/src/components/Setting/styles.scss:
--------------------------------------------------------------------------------
1 | @import "../../assets/base.scss";
2 | @import '~rc-switch/assets/index.css';
3 |
4 | .setting{
5 | width: 100%;
6 | height: 100%;
7 | padding-top: 100px;
8 | text-align: center;
9 | position: relative;
10 | color: $gray;
11 | .notificationConfig {
12 | display: flex;
13 | align-items: center;
14 | justify-content: center;
15 | .rc-switch-checked {
16 | border: 1px solid $blue;
17 | background-color: $blue;
18 | }
19 | }
20 | .githubStarRender {
21 | color: #fff;
22 | display: flex;
23 | justify-content: center;
24 | align-items: center;
25 | background-color: #9baec8;
26 | height: 26px;
27 | margin-left: 20px;
28 | position: absolute;
29 | right: 20px;
30 | top: 30px;
31 | cursor: pointer;
32 | .githubIcon {
33 | height: 30px;
34 | font-size: 28px;
35 | padding-right: 4px;
36 | padding-left: 4px;
37 | }
38 | .starTitle{
39 | font-size: 12px;
40 | height: 26px;
41 | padding-right: 4px;
42 | padding-left: 4px;
43 | line-height: 26px;
44 | color: #fff;
45 | background-color: #5893d4;
46 | }
47 | }
48 | .userInfo p {
49 | font-size: 12px;
50 | padding-top: 20px;
51 | }
52 | .name{
53 | font-size: 18px;
54 | padding-top: 20px;
55 | }
56 | .baseButton {
57 | position: relative;
58 | font-size: 12px;
59 | margin-top: 80px;
60 | }
61 | .contact, .contact a {
62 | text-decoration:none;
63 | margin: 40px 0;
64 | font-size: 14px;
65 | cursor: pointer;
66 | display: block;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
22 |
38 | );
39 | }
40 | }
41 |
42 | export default withRouter(Tabs);
43 |
44 | Tabs.propTypes = {
45 | location: PropTypes.object,
46 | initializedApp: PropTypes.bool,
47 | initApp: PropTypes.func,
48 | };
49 |
50 | Tabs.defaultProps = {
51 | location: { pathname: '/' },
52 | initializedApp: false,
53 | initApp() {},
54 | };
55 |
--------------------------------------------------------------------------------
/src/components/CreateGroupModal/styles.scss:
--------------------------------------------------------------------------------
1 | .groupModalContent {
2 | font-size: 22px;
3 | margin-top: 20px;
4 | text-align: center;
5 | div {
6 | text-align: left;
7 | input, textarea {
8 | font-size: 14px;
9 | outline: none;
10 | resize: none;
11 | padding-left: 10px;
12 | border: 1px solid #fff;
13 | color: #999;
14 | width: 70%;
15 | }
16 | span {
17 | left: 10px;
18 | text-align: right;
19 | float: left;
20 | font-size: 14px;
21 | margin-top: 4px;
22 | width: 30%;
23 | }
24 | textarea {
25 | padding-top: 6px;
26 | width: 70%;
27 | }
28 | input::-webkit-input-placeholder , textarea::-webkit-input-placeholder {
29 | /* WebKit browsers */
30 | // font-size: 0.24rem;
31 | color: #cccccc;
32 | }
33 | input:-moz-placeholder, textarea:-moz-placeholder {
34 | /* Mozilla Firefox 4 to 18 */
35 | // font-size: 0.24rem;
36 | color: #cccccc;
37 | }
38 | input::-moz-placeholder, textarea::-moz-placeholder {
39 | /* Mozilla Firefox 19+ */
40 | // font-size: 0.24rem;
41 | color: #cccccc;
42 | }
43 | input:-ms-input-placeholder, textarea:-ms-input-placeholder {
44 | /* Internet Explorer 10+ */
45 | color: #cccccc;
46 | }
47 | }
48 | }
--------------------------------------------------------------------------------
/server/src/app/controllers/login.controller.ts:
--------------------------------------------------------------------------------
1 | import * as jwt from 'jsonwebtoken';
2 | import * as md5 from 'md5';
3 | import configs from '@configs';
4 | import { ServicesContext } from '../context';
5 |
6 | // 用户名登录系统只涉及非github用户，也就是github用户只能走github授权来登录
7 | export const loginController = async (ctx, next) => {
8 | const { userService } = ServicesContext.getInstance();
9 |
10 | const { name = '', password = '' } = ctx.request.body;
11 | if (name === '' || password === '') {
12 | ctx.body = {
13 | success: false,
14 | message: '用户名或密码不能为空',
15 | };
16 | return;
17 | }
18 | const RowDataPacket = await userService.findDataByName(name);
19 | const res = JSON.parse(JSON.stringify(RowDataPacket));
20 | if (res.length > 0) {
21 | // 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
22 | if (md5(password) === res[0].password) {
23 | const { id, name, sex, website, github, intro, company, avatar, location, socketId } = res[0];
24 | const payload = { id };
25 | const token = jwt.sign(payload, configs.jwt_secret, {
26 | expiresIn: Math.floor(Date.now() / 1000) + 24 * 60 * 60 * 7, // 一周
27 | });
28 | ctx.body = {
29 | success: true,
30 | message: '登录成功',
31 | userInfo: {
32 | name,
33 | user_id: id,
34 | sex,
35 | website,
36 | github,
37 | intro,
38 | company,
39 | avatar,
40 | location,
41 | socketId,
42 | token,
43 | },
44 | };
45 | } else {
46 | ctx.body = {
47 | success: false,
48 | message: '密码错误',
49 | };
50 | }
51 | } else {
52 | ctx.body = {
53 | success: false,
54 | message: '用户名错误',
55 | };
56 | }
57 | };
58 |
--------------------------------------------------------------------------------
/src/components/Modal/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import './style.scss';
4 | import ModalBase from '../ModalBase';
5 |
6 | function confirmCancelRender(props) {
7 | const { hasCancel, hasConfirm, confirm, cancel } = props;
8 | if (hasCancel && hasConfirm) {
9 | return (
10 |
24 |
25 |
28 |
29 |
30 |
31 |
32 |
35 |
36 |
37 |
11 |
14 | );
15 | }
16 | if (hasConfirm || hasCancel) {
17 | return (
18 | 取消
12 |确定
13 |
19 | {hasCancel &&
22 | );
23 | }
24 | return null;
25 | }
26 |
27 | confirmCancelRender.propTypes = {
28 | hasCancel: PropTypes.bool,
29 | hasConfirm: PropTypes.bool,
30 | cancel: PropTypes.func, // 点击遮罩取消Modal的前提是有传cancel方法
31 | confirm: PropTypes.func,
32 | };
33 |
34 | confirmCancelRender.defaultProps = {
35 | hasCancel: false,
36 | hasConfirm: false,
37 | cancel: undefined,
38 | confirm: undefined,
39 | };
40 |
41 | function dialogRender(props) {
42 | const { title, children } = props;
43 | return (
44 | 取消
} 20 | {hasConfirm &&确定
} 21 |
45 |
49 | );
50 | }
51 |
52 | dialogRender.propTypes = {
53 | title: PropTypes.string,
54 | children: PropTypes.node,
55 | };
56 |
57 | dialogRender.defaultProps = {
58 | title: '',
59 | children: undefined,
60 | };
61 |
62 | const ModalDialogRender = ModalBase(dialogRender);
63 | // TODO: （refactor）take thinner component
64 | export default function Modal(props) {
65 | return {title}
46 | {children} 47 | {confirmCancelRender({ ...props })} 48 |
30 |
33 |
45 | );
46 | }
47 | }
48 |
49 | export default withRouter(ChatHeader);
50 |
51 | ChatHeader.propTypes = {
52 | title: PropTypes.string,
53 | history: PropTypes.object,
54 | chatType: PropTypes.string.isRequired,
55 | showGroupChatInfo: PropTypes.func,
56 | showPersonalInfo: PropTypes.func,
57 | hasShowed: PropTypes.bool,
58 | showShareIcon: PropTypes.bool,
59 | };
60 |
61 | ChatHeader.defaultProps = {
62 | title: '',
63 | history: undefined,
64 | showGroupChatInfo: undefined,
65 | showPersonalInfo: undefined,
66 | hasShowed: false,
67 | showShareIcon: false,
68 | };
69 |
--------------------------------------------------------------------------------
/webpack.prod.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const merge = require('webpack-merge');
3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4 | const webpack = require('webpack');
5 | const CompressionPlugin = require('compression-webpack-plugin');
6 | const CopyWebpackPlugin = require('copy-webpack-plugin');
7 | const ProgressBarPlugin = require('progress-bar-webpack-plugin');
8 | const CleanWebpackPlugin = require('clean-webpack-plugin');
9 | const TerserJSPlugin = require('terser-webpack-plugin');
10 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
11 | const commonConfig = require('./webpack.common.config.js');
12 |
13 | module.exports = merge(commonConfig, {
14 | mode: 'production',
15 | entry: {
16 | app: ['babel-polyfill', path.resolve(__dirname, 'src/index.js')],
17 | },
18 | /* 输出到build文件夹，输出文件名字为[name].[chunkhash].js */
19 | output: {
20 | filename: '[name].[contenthash].js',
21 | path: path.resolve(__dirname, 'build'),
22 | },
23 | module: {
24 | rules: [
25 | {
26 | test: /\.scss$/,
27 | use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
28 | },
29 | ],
30 | },
31 | plugins: [
32 | new CleanWebpackPlugin(['build/*.*']),
33 | new CompressionPlugin(),
34 | new webpack.HashedModuleIdsPlugin(),
35 | new MiniCssExtractPlugin({
36 | ignoreOrder: true,
37 | // Options similar to the same options in webpackOptions.output
38 | // both options are optional
39 | filename: '[name].css',
40 | chunkFilename: '[id].css',
41 | }),
42 | new CopyWebpackPlugin([
43 | { from: 'src/manifest.json', to: 'manifest.json' },
44 | { from: 'src/service-worker.js', to: 'service-worker.js' },
45 | ]),
46 | new ProgressBarPlugin(),
47 | ],
48 | optimization: {
49 | minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
50 | splitChunks: {
51 | cacheGroups: {
52 | vendor: {
53 | test: /node_modules/,
54 | chunks: 'initial',
55 | name: 'vendor',
56 | enforce: true,
57 | },
58 | },
59 | },
60 | runtimeChunk: true,
61 | },
62 | });
63 |
--------------------------------------------------------------------------------
/src/components/MyInfo/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import UserAvatar from '../UserAvatar';
3 | import PersonalInfo from '../PersonalInfo';
4 | import ShareModal from '../ShareModal';
5 | import store from '../../redux/store';
6 | import './styles.scss';
7 |
8 | class MyInfo extends Component {
9 | constructor(props) {
10 | super(props);
11 | this.state = {
12 | showShareModal: false,
13 | showPersonalInfo: false,
14 | };
15 | this._userInfo = JSON.parse(localStorage.getItem('userInfo'));
16 | }
17 |
18 | _showPersonalInfo = () => {
19 | this.setState(state => ({ showPersonalInfo: !state.showPersonalInfo }));
20 | };
21 |
22 | _showShareModal = () => {
23 | this.setState(state => ({
24 | showShareModal: !state.showShareModal,
25 | showPersonalInfo: false,
26 | }));
27 | };
28 |
29 | _closeShareModal = () => {
30 | this.setState({ showShareModal: false });
31 | };
32 |
33 | get shareLink() {
34 | return `${window.location.origin}/private_chat/${this._userInfo.user_id}`;
35 | }
36 |
37 | render() {
38 | const { name, avatar, github_id, user_id } = this._userInfo;
39 | const { allGroupChatsState, homePageListState } = store.getState();
40 | return (
41 | {title}
34 | {showShareIcon && (
35 |
38 | )}
39 | {!isRobotChat && (
40 |
43 | )}
44 |
42 |
68 | );
69 | }
70 | }
71 |
72 | export default MyInfo;
73 |
--------------------------------------------------------------------------------
/src/containers/LogInPage/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Request from '../../utils/request';
3 | import Modal from '../../components/Modal';
4 | import notification from '../../components/Notification';
5 | import SignInSignUp from '../../components/SignInSignUp';
6 | import './index.scss';
7 |
8 | class LogIn extends Component {
9 | constructor(props) {
10 | super(props);
11 |
12 | this.state = {
13 | name: '',
14 | password: '',
15 | modal: {
16 | visible: false,
17 | },
18 | };
19 | }
20 |
21 | async login() {
22 | const { name, password } = this.state;
23 | if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(name)) {
24 | notification('用户名只能由汉字，数字，字母，下划线组成', 'warn');
25 | return;
26 | }
27 | if (!/^[A-Za-z0-9]+$/.test(password)) {
28 | notification('密码只能由字母数字组成', 'warn');
29 | return;
30 | }
31 | try {
32 | const res = await Request.axios('post', '/api/v1/login', { name, password });
33 | if (res && res.success) {
34 | localStorage.setItem('userInfo', JSON.stringify(res.userInfo));
35 | // 弹窗
36 | this.setState({
37 | modal: {
38 | visible: true,
39 | },
40 | });
41 | } else {
42 | notification(res.message, 'error');
43 | }
44 | } catch (error) {
45 | notification(error, 'error');
46 | }
47 | }
48 |
49 | setValue = value => {
50 | const { name, password } = value;
51 | this.setState({ name, password }, async () => {
52 | await this.login();
53 | });
54 | };
55 |
56 | confirm = () => {
57 | this.setState({
58 | modal: {
59 | visible: true,
60 | },
61 | });
62 | window.location.reload();
63 | const originalLink = sessionStorage.getItem('originalLink');
64 | if (originalLink) {
65 | sessionStorage.removeItem('originalLink');
66 | window.location.href = originalLink;
67 | return;
68 | }
69 | window.location.href = '/';
70 | };
71 |
72 | render() {
73 | const { visible } = this.state.modal;
74 | return (
75 |
76 |
77 |
79 |
81 | );
82 | }
83 | }
84 |
85 | export default LogIn;
86 |
--------------------------------------------------------------------------------
/src/containers/RegisterPage/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './index.scss';
3 | import Request from '../../utils/request';
4 | import Modal from '../../components/Modal';
5 | import notification from '../../components/Notification';
6 | import SignInSignUp from '../../components/SignInSignUp';
7 |
8 | export default class Register extends Component {
9 | constructor(props) {
10 | super(props);
11 | this.state = {
12 | name: '',
13 | password: '',
14 | modal: {
15 | visible: false,
16 | },
17 | };
18 | }
19 |
20 | register = async () => {
21 | const { name, password } = this.state;
22 | if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(name)) {
23 | notification('用户名只能由汉字，数字，字母，下划线组成', 'warn');
24 | return;
25 | }
26 | if (!/^[A-Za-z0-9]+$/.test(password)) {
27 | notification('密码只能由字母数字组成', 'warn');
28 | return;
29 | }
30 | try {
31 | const res = await Request.axios('post', '/api/v1/register', {
32 | name,
33 | password,
34 | });
35 | if (res && res.success) {
36 | // 弹窗
37 | this.setState({
38 | modal: {
39 | visible: true,
40 | },
41 | });
42 | } else {
43 | notification(res.message, 'error');
44 | }
45 | } catch (error) {
46 | notification(error, 'error');
47 | }
48 | };
49 |
50 | setValue = value => {
51 | const { name, password } = value;
52 | this.setState(
53 | {
54 | name,
55 | password,
56 | },
57 | async () => {
58 | await this.register();
59 | },
60 | );
61 | };
62 |
63 | confirm = () => {
64 | this.setState({
65 | // eslint-disable-next-line react/no-unused-state
66 | visible: false,
67 | });
68 |
69 | // eslint-disable-next-line react/prop-types
70 | this.props.history.push('/login');
71 | };
72 |
73 | render() {
74 | const { visible } = this.state.modal;
75 | return (
76 | 您已登录成功
78 |
77 |
78 |
80 | {/*
83 | );
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/server/src/app/server.ts:
--------------------------------------------------------------------------------
1 | import * as http from 'http';
2 | import * as Koa from 'koa';
3 | import { createServer } from 'http';
4 |
5 | import { Logger } from './utils/Logger';
6 | import { appSocket } from './socket/app.socket';
7 |
8 | const log = Logger('app:core:server');
9 |
10 | export class Server {
11 | static app: Koa;
12 | static server: http.Server;
13 |
14 | static init(cb: (app: Koa) => any) {
15 | if (!Server.app) {
16 | Server.app = new Koa();
17 |
18 | if (cb) {
19 | cb(Server.app);
20 | }
21 | }
22 | return Server;
23 | }
24 |
25 | static createServer() {
26 | Server.server = createServer(Server.app.callback());
27 | return Server;
28 | }
29 |
30 | static run(port: string) {
31 | appSocket(Server.server);
32 |
33 | Server.server.listen(this.normalizePort(port));
34 | // .on('listening', () => this.onListening(Server.server))
35 | // .on('error', (error) => this.onError(Server.server, error));
36 |
37 | // log.debug('Server was started on environment %s', process.env.NODE_ENV);
38 | return Server;
39 | }
40 |
41 | static async createConnection() {
42 | return Server;
43 | }
44 |
45 | private static normalizePort(port: string): number | string | boolean {
46 | const parsedPort = parseInt(port, 10);
47 | if (isNaN(parsedPort)) {
48 | // named pipe
49 | return port;
50 | }
51 | if (parsedPort >= 0) {
52 | // port number
53 | return parsedPort;
54 | }
55 | return false;
56 | }
57 |
58 | private static onListening(server: http.Server): void {
59 | log.debug(`Listening on ${this.bind(server.address())}`);
60 | }
61 |
62 | private static onError(server: http.Server, error: Error): void {
63 | if (error['syscall'] !== 'listen') {
64 | throw error;
65 | }
66 | const addr = server.address();
67 | // handle specific listen errors with friendly messages
68 | switch (error['code']) {
69 | case 'EACCES':
70 | log.error(`${this.bind(addr)} requires elevated privileges`);
71 | process.exit(1);
72 | break;
73 | case 'EADDRINUSE':
74 | log.error(`${this.bind(addr)} is already in use`);
75 | process.exit(1);
76 | break;
77 | default:
78 | throw error;
79 | }
80 | }
81 |
82 | private static bind(addr: string | any): string {
83 | return typeof addr === 'string' ? `pipe ${addr}` : `port http://localhost:${addr.port}`;
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/server/src/app/utils/Logger.ts:
--------------------------------------------------------------------------------
1 | import * as winston from 'winston';
2 | import configs from '@configs';
3 | // imports debug moduel
4 | import * as Debug from 'debug';
5 |
6 | // Imports the Google Cloud client library for Winston
7 | // const { LoggingWinston } = require('@google-cloud/logging-winston');
8 | // const loggingWinston = new LoggingWinston();
9 |
10 | /**
11 | * Configures the winston logger. There are also file and remote transports available
12 | */
13 | const logger = winston.createLogger({
14 | transports: [
15 | new winston.transports.Console(),
16 | // new winston.transports.File({ filename: 'error.log', level: 'error' }),
17 | // new winston.transports.File({ filename: 'combined.log' })
18 | // Add Stackdriver Logging
19 | // loggingWinston,
20 | ],
21 | exitOnError: false,
22 | });
23 |
24 | const stream = streamFunction => ({
25 | stream: streamFunction,
26 | });
27 |
28 | const write = writeFunction => ({
29 | write: (message: string) => writeFunction(message),
30 | });
31 |
32 | /**
33 | * Winston logger stream for the morgan plugin
34 | */
35 | export const winstonStream = stream(write(logger.info));
36 |
37 | // Configure the debug module
38 | process.env.DEBUG = configs.logger.debug;
39 |
40 | const debug = Debug('app:response');
41 |
42 | /**
43 | * Debug stream for the morgan plugin
44 | */
45 | export const debugStream = stream(write(debug));
46 |
47 | /**
48 | * Exports a wrapper for all the loggers we use in this configuration
49 | */
50 | const format = (scope: string, message: string): string => `[${scope}] ${message}`;
51 |
52 | const parse = (args: any[]) => (args.length > 0 ? args : '');
53 |
54 | export const Logger = (scope: string) => {
55 | const scopeDebug = Debug(scope);
56 | return {
57 | debug(message: string, ...args: any[]) {
58 | if (configs.production) {
59 | logger.debug(format(scope, message), parse(args));
60 | }
61 | scopeDebug(message, parse(args));
62 | },
63 | verbose: (message: string, ...args: any[]) =>
64 | logger.verbose(format(scope, message), parse(args)),
65 | silly: (message: string, ...args: any[]) => logger.silly(format(scope, message), parse(args)),
66 | info: (message: string, ...args: any[]) => logger.info(format(scope, message), parse(args)),
67 | warn: (message: string, ...args: any[]) => logger.warn(format(scope, message), parse(args)),
68 | error: (message: string, ...args: any[]) => logger.error(format(scope, message), parse(args)),
69 | };
70 | };
71 |
--------------------------------------------------------------------------------
/server/src/app/services/groupChat.service.ts:
--------------------------------------------------------------------------------
1 | import { query } from '../utils/db';
2 |
3 | export class GroupChatService {
4 | /**
5 | * 获取群消息
6 | * @param 群id
7 | * @return message 群消息
8 | * @return time 时间
9 | * @return from_user 发送人id
10 | * @return avatar 发送人头像
11 | */
12 | getGroupMsg(groupId, start, count) {
13 | const _sql =
14 | 'SELECT * FROM (SELECT g.message,g.attachments,g.time,g.from_user,g.to_group_id, i.avatar ,i.name, i.github_id FROM group_msg As g inner join user_info AS i ON g.from_user = i.id WHERE to_group_id = ? order by time desc limit ?,?) as n order by n.time; ';
15 | return query(_sql, [groupId, start, count]);
16 | }
17 |
18 | /**
19 | * 获取群成员
20 | * @param 群id
21 | * @return group_member_id 群成员id
22 | */
23 | getGroupMember(groupId) {
24 | const _sql =
25 | 'SELECT g.user_id, u.socketid, u.name, u.avatar, u.github_id, u.github, u.intro, u.company, u.location, u.website FROM group_user_relation AS g inner join user_info AS u ON g.user_id = u.id WHERE to_group_id = ?';
26 | return query(_sql, groupId);
27 | }
28 |
29 | /**
30 | * 获取群资料
31 | * @param arr 包括 groupId groupName 至少一个
32 | * @return
33 | */
34 | getGroupInfo(arr) {
35 | const _sql =
36 | 'SELECT to_group_id, name, group_notice, creator_id, create_time FROM group_info WHERE to_group_id = ? OR name = ? ;';
37 | return query(_sql, arr);
38 | }
39 |
40 | /**
41 | * 存聊天记录
42 | * @param user_id 用户id
43 | * @param groupId 群id
44 | * @param message 消息
45 | * @param name 用户名
46 | * @param time 时间
47 | * @return
48 | */
49 |
50 | saveGroupMsg({ from_user, to_group_id, message, time, attachments }) {
51 | const data = [from_user, to_group_id, message, time, attachments];
52 | const _sql =
53 | ' INSERT INTO group_msg(from_user,to_group_id,message ,time, attachments) VALUES(?,?,?,?,?); ';
54 | return query(_sql, data);
55 | }
56 |
57 | /**
58 | * 群添加成员并返回群成员
59 | * @param user_id 用户id
60 | * @param groupId 群id
61 | * @return
62 | */
63 | addGroupUserRelation(user_id, groupId) {
64 | const data = [groupId, user_id];
65 | const _sql = ' INSERT INTO group_user_relation(to_group_id,user_id) VALUES(?,?); ';
66 | return query(_sql, data);
67 | }
68 |
69 | getUnreadCount({ sortTime, to_group_id }) {
70 | const data = [sortTime, to_group_id];
71 | const _sql =
72 | 'SELECT count(time) as unread FROM group_msg as p where p.time > ? and p.to_group_id = ?;';
73 | return query(_sql, data);
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/server/src/app/controllers/githubOAuth.controller.ts:
--------------------------------------------------------------------------------
1 | import configs from '@configs';
2 | import * as jwt from 'jsonwebtoken';
3 | import * as request from 'request-promise';
4 | import { ServicesContext } from '../context';
5 |
6 | async function getAccessToken(ctx) {
7 | try {
8 | const { code, clientId } = ctx.request.body;
9 | const date = {
10 | code,
11 | client_secret: configs.client_secret,
12 | client_id: clientId,
13 | };
14 | const options = {
15 | method: 'POST',
16 | uri: 'https://github.com/login/oauth/access_token',
17 | body: date,
18 | json: true, // Automatically stringifies the body to JSON
19 | };
20 | const response = await request(options);
21 | return response.access_token;
22 | } catch (error) {
23 | throw new Error(error);
24 | }
25 | }
26 |
27 | export const githubOAuthController = async (ctx, next) => {
28 | const { userService } = ServicesContext.getInstance();
29 |
30 | try {
31 | const accessToken = await getAccessToken(ctx);
32 | const options = {
33 | uri: 'https://api.github.com/user',
34 | qs: {
35 | access_token: accessToken, // -> uri + '?access_token=xxxxx%20xxxxx'
36 | },
37 | headers: {
38 | 'User-Agent': 'Request-Promise',
39 | },
40 | json: true,
41 | };
42 | const response = await request(options);
43 | const { avatar_url, html_url, bio, login, location, id, blog, company } = response;
44 | const payload = { id };
45 | const token = jwt.sign(payload, configs.jwt_secret, {
46 | expiresIn: Math.floor(Date.now() / 1000) + 24 * 60 * 60 * 7, // 一周
47 | });
48 | const data = {
49 | avatar: avatar_url,
50 | github: html_url,
51 | intro: bio,
52 | name: login,
53 | location,
54 | token,
55 | github_id: id,
56 | website: blog,
57 | company,
58 | user_id: null,
59 | };
60 | const RowDataPacket = await userService.findGithubUser(id); // judge if this github account exist
61 | let githubUser = JSON.parse(JSON.stringify(RowDataPacket));
62 | if (githubUser.length > 0) {
63 | await userService.updateGithubUser(data);
64 | } else {
65 | await userService.insertGithubData(data);
66 | const RowDataPacket = await userService.findGithubUser(id);
67 | githubUser = JSON.parse(JSON.stringify(RowDataPacket));
68 | }
69 | data.user_id = githubUser[0].id;
70 | console.log('github res && ctx.body', response, data);
71 | ctx.body = data;
72 | } catch (error) {
73 | throw new Error(error);
74 | }
75 | };
76 |
--------------------------------------------------------------------------------
/src/components/Linkify/index.js:
--------------------------------------------------------------------------------
1 | // edit from https://github.com/tasti/react-linkify thanks @tasti
2 | import * as React from 'react';
3 |
4 | import defaultComponentDecorator from './decorators/defaultComponentDecorator';
5 | import defaultHrefDecorator from './decorators/defaultHrefDecorator';
6 | import defaultMatchDecorator from './decorators/defaultMatchDecorator';
7 | import defaultTextDecorator from './decorators/defaultTextDecorator';
8 |
9 | class LinkifyWithTargetBlank extends React.Component {
10 | static defaultProps = {
11 | componentDecorator: defaultComponentDecorator,
12 | hrefDecorator: defaultHrefDecorator,
13 | matchDecorator: defaultMatchDecorator,
14 | textDecorator: defaultTextDecorator,
15 | };
16 |
17 | parseString(string) {
18 | if (string === '') {
19 | return string;
20 | }
21 |
22 | const matches = this.props.matchDecorator(string);
23 | if (!matches) {
24 | return string;
25 | }
26 |
27 | const elements = [];
28 | let lastIndex = 0;
29 | matches.forEach((match, i) => {
30 | // Push preceding text if there is any
31 | if (match.index > lastIndex) {
32 | elements.push(string.substring(lastIndex, match.index));
33 | }
34 |
35 | const decoratedHref = this.props.hrefDecorator(match.url);
36 | const decoratedText = this.props.textDecorator(match.text);
37 | const target = match.schema === 'mailto:' ? '_self' : '_blank';
38 | const decoratedComponent = this.props.componentDecorator(
39 | decoratedHref,
40 | decoratedText,
41 | i,
42 | target,
43 | );
44 | elements.push(decoratedComponent);
45 |
46 | lastIndex = match.lastIndex;
47 | });
48 |
49 | // Push remaining text if there is any
50 | if (string.length > lastIndex) {
51 | elements.push(string.substring(lastIndex));
52 | }
53 |
54 | return elements.length === 1 ? elements[0] : elements;
55 | }
56 |
57 | parse(children, key = 0) {
58 | if (typeof children === 'string') {
59 | return this.parseString(children);
60 | }
61 | if (React.isValidElement(children) && children.type !== 'a' && children.type !== 'button') {
62 | return React.cloneElement(children, { key }, this.parse(children.props.children));
63 | }
64 | if (Array.isArray(children)) {
65 | return children.map((child, i) => this.parse(child, i));
66 | }
67 |
68 | return children;
69 | }
70 |
71 | render() {
72 | return 您已注册成功
79 |
47 |
71 |
48 | 群名:
49 |
57 |
58 |
59 | 群公告:
60 |
69 |
70 |
76 |
-
78 | {listItems}
79 |
-
24 |
25 |
26 | 27 | 机器人小R 28 |29 | 30 |
31 | );
32 | const { dataList, allGroupChats, match, showRobot, isSearching, showAsContacts } = this.props;
33 | const listItems =
34 | dataList &&
35 | dataList.map((data, index) => {
36 | let message = data.message;
37 | const isShareUrl = message && /::share::{"/.test(message);
38 | if (isShareUrl) {
39 | message = '[邀请卡片]';
40 | }
41 | const chatFromId = data.to_group_id || (data.user_id && data.user_id.toString());
42 | const isGroupChat = !!data.to_group_id;
43 | let GroupMembers;
44 | if (isGroupChat) {
45 | const chatItem = allGroupChats && allGroupChats.get(data.to_group_id);
46 | GroupMembers = chatItem && chatItem.groupInfo && chatItem.groupInfo.members;
47 | }
48 | const { params } = match;
49 | const unreadColor = data.to_group_id ? 'groupUnread' : 'privateUnread';
50 | let unreadCircular;
51 | switch (data.unread && data.unread.toString().length) {
52 | case 2:
53 | unreadCircular = 'twoDigitsUnread';
54 | break;
55 | case 3:
56 | unreadCircular = 'threeDigitsUnread';
57 | break;
58 | default:
59 | unreadCircular = 'oneDigitUnread';
60 | }
61 | return (
62 | - this._clickItem({ chatFromId, isGroupChat })}
70 | value={chatFromId}
71 | >
72 | {isGroupChat ? (
73 |
74 | ) : ( 75 | 81 | )} 82 | 83 | {!!data.unread && !showAsContacts && ( 84 | 85 | {data.unread > 99 ? '99+' : data.unread} 86 | 87 | )} 88 | 89 | 90 |103 |91 |96 | {!showAsContacts && ( 97 |{data.name}
92 | {!showAsContacts && ( 93 | {!!data.time && toNormalTime(data.time)} 94 | )} 95 |98 | {data.showCallMeTip && [有人@我]} 99 | {message || '暂无消息'} 100 |101 | )} 102 |
104 | );
105 | });
106 | return (
107 | - this._clickMember(e.user_id)}>
48 |
54 | {e.name} 55 |
56 | ),
57 | )}
58 | - 130 | {item.message} 131 | 132 | ); 133 | } 134 | return ( 135 |
-
136 |
clickAvatar(item.from_user)} 146 | attachments={attachments} 147 | /> 148 |
149 | );
150 | });
151 | return (
152 |
{
82 | this.scrollBottomRef = el;
83 | }}
84 | />
85 |
86 |
88 | );
89 | }
90 | }
91 |
92 | Robot.propTypes = {
93 | insertMsg: PropTypes.func,
94 | getRobotMsg: PropTypes.func,
95 | robotState: PropTypes.array,
96 | };
97 |
98 | Robot.defaultProps = {
99 | insertMsg: undefined,
100 | getRobotMsg: undefined,
101 | robotState: [],
102 | };
103 |
--------------------------------------------------------------------------------
/src/components/ChatItem/style.scss:
--------------------------------------------------------------------------------
1 | @import "../../assets/base.scss";
2 |
3 | .chat-item {
4 | width: 100%;
5 | margin: 36px 0;
6 | .image-render {
7 | background-color: #fff !important;
8 | max-width: 80%;
9 | img {
10 | max-width: 80%;
11 | max-height: 80%;
12 | }
13 | }
14 | .msg-render {
15 | max-width: 50%;
16 | }
17 | .other-file-render {
18 | font-size: 16px;
19 | color: $blue;
20 | text-decoration:none;
21 | .icon {
22 | font-size: 20px;
23 | }
24 | }
25 | .msg-render {
26 | font-size: 14px;
27 | word-wrap:break-word;
28 | .shareCard {
29 | cursor: pointer;
30 | text-align: center;
31 | .shareTitle {
32 | border-bottom: 1px solid #fff;
33 | padding-bottom: 10px;
34 | }
35 | .shareButton {
36 | padding-top: 10px;
37 | }
38 | }
39 | }
40 | .userAvatar {
41 | position: absolute;
42 | top: 50%;
43 | transform: translateY(-50%);
44 | }
45 | .otherchat {
46 | width: 100%;
47 | position: relative;
48 | .userAvatar {
49 | left: 10px;
50 | cursor: pointer;
51 | }
52 | .nt {
53 | font-size: 14px;
54 | left: 60px;
55 | top: -26px;
56 | position: absolute;
57 | color: #686868;
58 | span {
59 | padding-right: 6px;
60 | }
61 | span:nth-child(2) {
62 | font-size: 10px;
63 | }
64 | }
65 | .msg-render, .image-render, .other-file-render {
66 | float: left;
67 | margin-left: 60px;
68 | padding: 6px 8px;
69 | background-color: $otherMsgColor;
70 | border-radius: 6px;
71 | }
72 | .image-render img {
73 | float: left;
74 | }
75 | }
76 | .mychat {
77 | width: 100%;
78 | position: relative;
79 | .userAvatar {
80 | right: 10px;
81 | }
82 | .nt {
83 | font-size: 14px;
84 | right:60px;
85 | top: -26px;
86 | position: absolute;
87 | color: #686868;
88 | span {
89 | padding-left: 6px;
90 | }
91 | span:nth-child(1) {
92 | font-size: 10px;
93 | }
94 | }
95 | .msg-render, .image-render, .other-file-render {
96 | float: right;
97 | margin-right: 60px;
98 | padding: 6px 8px;
99 | background-color: $myMsgColor;
100 | border-radius: 6px;
101 | }
102 | .image-render img {
103 | float: right;
104 | }
105 | }
106 | }
--------------------------------------------------------------------------------
/src/components/ListItems/styles.scss:
--------------------------------------------------------------------------------
1 | @import "../../assets/base.scss";
2 | .privateUnread, .groupUnread {
3 | border-radius: 50%;
4 | color: #fff;
5 | z-index: 8;
6 | position: absolute;
7 | bottom: 14px;
8 | right: 20px;
9 |
10 | }
11 |
12 | .robotItem {
13 | width: 100%;
14 | .robotTitle {
15 | font-size: 16px !important;
16 | }
17 | }
18 |
19 | .homePageList {
20 | background-color: #fff;
21 | list-style: none;
22 | li {
23 | cursor: pointer;
24 | &:hover {
25 | background-color: #f5f5f5;
26 | }
27 | list-style-type: none;
28 | padding: 10px;
29 | position: relative;
30 | display: flex;
31 | align-items: center;
32 | .title{
33 | color: #000;
34 | }
35 | a {
36 | display: -webkit-box;
37 | display: -ms-flexbox;
38 | display: flex;
39 | align-items: center;
40 | text-decoration : none;
41 | .userAvatar {
42 | position: relative;
43 | }
44 | }
45 | .twoDigitsUnread {
46 | padding: 1px 2.8px 2px;
47 | font-size: 10px;
48 | }
49 | .threeDigitsUnread {
50 | padding: 1.4px 2.8px;
51 | font-size: 10px;
52 | }
53 | .oneDigitUnread {
54 | padding: 0 4px;
55 | font-size: 12px;
56 | }
57 | .privateUnread {
58 | background-color: red;
59 | }
60 | .groupUnread {
61 | background-color: #98d1f2;
62 | }
63 | .content {
64 | display: inline-block;
65 | margin-left: 10px;
66 | max-width: 80%;
67 | .title {
68 | font-size: 18px;
69 | padding-bottom: 4px;
70 | .time {
71 | font-size: 14px;
72 | color: $title;
73 | padding: 0 9px;
74 | position: absolute;
75 | top: 14px;
76 | right: 0;
77 | }
78 | .name {
79 | font-size: 14px;
80 | overflow: hidden;
81 | text-overflow:ellipsis;
82 | white-space: nowrap;
83 | width: 120px;
84 | }
85 | }
86 | .message {
87 | color: $title;
88 | font-size: 12px;
89 | max-height: 42px;
90 | position: relative;
91 | text-overflow: ellipsis;
92 | overflow: hidden;
93 | width: 120px;
94 | white-space: nowrap;
95 | .callMe {
96 | color: red;
97 | }
98 | }
99 | }
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/src/components/UserAvatar/index.js:
--------------------------------------------------------------------------------
1 | // 感谢 https://www.npmjs.com/package/react-user-avatar
2 | import React from 'react';
3 | import PropTypes from 'prop-types';
4 | import classnames from 'classnames';
5 | import './style.scss';
6 |
7 | const defaultColors = [
8 | '#2ecc71', // emerald
9 | '#3498db', // peter river
10 | '#8e44ad', // wisteria
11 | '#e67e22', // carrot
12 | '#e74c3c', // alizarin
13 | '#1abc9c', // turquoise
14 | '#2c3e50', // midnight blue
15 | ];
16 |
17 | function sumChars(str) {
18 | let sum = 0;
19 | for (let i = 0; i < str.length; i += 1) {
20 | sum += str.charCodeAt(i);
21 | }
22 |
23 | return sum;
24 | }
25 |
26 | // eslint-disable-next-line react/prefer-stateless-function
27 | export default function UserAvatar(props) {
28 | const {
29 | src,
30 | name,
31 | isGray,
32 | color,
33 | colors = defaultColors,
34 | clickAvatar,
35 | size,
36 | borderRadius,
37 | showLogo,
38 | className,
39 | } = props;
40 |
41 | const innerStyle = {
42 | textAlign: 'center',
43 | width: `${size}px`,
44 | height: `${size}px`,
45 | borderRadius,
46 | lineHeight: `${size}px`,
47 | color: 'white',
48 | display: 'inline-block',
49 | };
50 |
51 | const imgStyle = {
52 | width: `${size}px`,
53 | height: `${size}px`,
54 | borderRadius,
55 | };
56 |
57 | let inner;
58 | if (src) {
59 | inner =
81 | {showLogo && (
82 |
85 | )}
86 | {inner}
87 |
88 | );
89 | }
90 |
91 | UserAvatar.propTypes = {
92 | src: PropTypes.string,
93 | name: PropTypes.string,
94 | isGray: PropTypes.bool,
95 | color: PropTypes.string,
96 | colors: PropTypes.array,
97 | clickAvatar: PropTypes.func,
98 | size: PropTypes.string,
99 | borderRadius: PropTypes.string,
100 | showLogo: PropTypes.bool,
101 | className: PropTypes.string,
102 | };
103 |
104 | UserAvatar.defaultProps = {
105 | src: undefined,
106 | name: '?',
107 | isGray: false,
108 | color: undefined,
109 | colors: defaultColors,
110 | clickAvatar: undefined,
111 | size: '40',
112 | borderRadius: '50%',
113 | showLogo: false,
114 | className: undefined,
115 | };
116 |
--------------------------------------------------------------------------------
/src/components/SignInSignUp/index.scss:
--------------------------------------------------------------------------------
1 | @import "../../assets/base.scss";
2 | .formContent {
3 | -webkit-border-radius: 12px 12px 12px 12px;
4 | border-radius: 12px 12px 12px 12px;
5 | background: #fff;
6 | padding: 32px;
7 | width: 100%;
8 | max-width: 330px;
9 | position: relative;
10 | padding: 10px 0 20px;
11 | -webkit-box-shadow: 0 32px 62px 0 rgba(0, 0, 0, 0.3);
12 | box-shadow: 0 32px 62px 0 rgba(0, 0, 0, 0.3);
13 | text-align: center;
14 | .ghChatLogo {
15 | position: absolute;
16 | top: -80px;
17 | left: 50%;
18 | transform: translateX(-50%);
19 | img {
20 | width: 80px;
21 | height: 80px;
22 | }
23 | }
24 | .center {
25 | text-align: center;
26 | margin-top: 30px;
27 | .authTips {
28 | color: $lightGray;
29 | font-size: 14px;
30 | padding: 10px;
31 | }
32 | }
33 | .version {
34 | position: absolute;
35 | bottom: 10px;
36 | right: 10px;
37 | color: $lightGray;
38 | font-size: 12px;
39 | }
40 | .userAvatarWrapper {
41 | margin: 10px 0 20px;
42 | }
43 | .active, .inactive {
44 | text-align: center;
45 | font-size: 18px;
46 | text-transform: uppercase;
47 | display: inline-block;
48 | padding: 10px 10px 20px;
49 | color: $lightGray;
50 | }
51 |
52 | .active {
53 | color: $blue;
54 | }
55 | input[type=button] {
56 | display: inline-block;
57 | background-color: $blue;
58 | border: none;
59 | color: white;
60 | padding: 10px 30px;
61 | text-align: center;
62 | text-decoration: none;
63 | cursor: pointer;
64 | text-transform: uppercase;
65 | font-size: 14px;
66 | box-shadow: 0 6px 16px 0 rgba(95, 186, 233, 0.4);
67 | border-radius: 4px 4px 4px 4px;
68 | }
69 |
70 | input[type=password],
71 | input[type=text] {
72 | background-color: #f6f6f6;
73 | border: none;
74 | color: #0d0d0d;
75 | padding: 8px 18px;
76 | text-align: center;
77 | text-decoration: none;
78 | font-size: 14px;
79 | width: 76%;
80 | border: 1px solid #f6f6f6;
81 | -webkit-transition: all 0.5s ease-in-out;
82 | -moz-transition: all 0.5s ease-in-out;
83 | -ms-transition: all 0.5s ease-in-out;
84 | -o-transition: all 0.5s ease-in-out;
85 | transition: all 0.5s ease-in-out;
86 | -webkit-border-radius: 4px 4px 4px 4px;
87 | border-radius: 4px 4px 4px 4px;
88 | }
89 |
90 | input[type=text]:focus {
91 | background-color: #fff;
92 | border-bottom: 1px solid #5fbae9;
93 | }
94 |
95 | input[type=password]:focus {
96 | background-color: #fff;
97 | border-bottom: 1px solid #5fbae9;
98 | }
99 |
100 | input[type=text]:placeholder {
101 | color: $lightGray;
102 | }
103 |
104 | input[type=password]:placeholder {
105 | color: $lightGray;
106 | }
107 |
108 | .githubOAuth {
109 | text-decoration: none;
110 | font-size: 36px;
111 | }
112 | }
113 |
--------------------------------------------------------------------------------
/src/containers/PrivateChatPage/privateChatAction.js:
--------------------------------------------------------------------------------
1 | const SET_ALL_PRIVATE_CHATS = 'SET_ALL_PRIVATE_CHATS';
2 | const ADD_PRIVATE_CHAT_MESSAGES = 'ADD_PRIVATE_CHAT_MESSAGES';
3 | const ADD_PRIVATE_INFO = 'ADD_PRIVATE_INFO';
4 | const ADD_PRIVATE_CHAT_MESSAGE_AND_INFO = 'ADD_PRIVATE_CHAT_MESSAGE_AND_INFO';
5 | const DELETE_PRIVATE_CHAT = 'DELETE_PRIVATE_CHAT';
6 |
7 | const setAllPrivateChatsAction = ({ data = new Map() }) => ({
8 | type: SET_ALL_PRIVATE_CHATS,
9 | data,
10 | });
11 |
12 | const addPrivateChatMessagesAction = ({
13 | allPrivateChats,
14 | messages,
15 | message,
16 | chatId,
17 | inLazyLoading,
18 | }) => {
19 | const allPrivateChatsCopy = new Map(allPrivateChats);
20 | const goalPrivateChat = allPrivateChatsCopy.get(chatId);
21 | const originMessages = (goalPrivateChat && goalPrivateChat.messages) || [];
22 | const newMessages = messages || [message];
23 | if (goalPrivateChat) {
24 | const finalMessages = inLazyLoading
25 | ? [...newMessages, ...originMessages]
26 | : [...originMessages, ...newMessages];
27 | allPrivateChatsCopy.get(chatId).messages = finalMessages;
28 | } else {
29 | allPrivateChatsCopy.set(chatId, { messages: newMessages });
30 | }
31 | return { type: ADD_PRIVATE_CHAT_MESSAGES, data: allPrivateChatsCopy };
32 | };
33 |
34 | const addPrivateChatInfoAction = ({ allPrivateChats, chatId, userInfo }) => {
35 | if (!userInfo.user_id) throw new Error('not exist userInfo.user_id!');
36 | const allPrivateChatsCopy = new Map(allPrivateChats);
37 | const goalPrivateChat = allPrivateChatsCopy.get(chatId);
38 | if (goalPrivateChat) {
39 | allPrivateChatsCopy.get(chatId).userInfo = userInfo;
40 | } else {
41 | allPrivateChatsCopy.set(chatId, { userInfo });
42 | }
43 | return { type: ADD_PRIVATE_INFO, data: allPrivateChatsCopy };
44 | };
45 |
46 | const addPrivateChatMessageAndInfoAction = ({
47 | allPrivateChats,
48 | messages,
49 | message,
50 | chatId,
51 | userInfo,
52 | }) => {
53 | const res = addPrivateChatMessagesAction({
54 | allPrivateChats,
55 | messages,
56 | message,
57 | chatId,
58 | });
59 | const { data } = addPrivateChatInfoAction({
60 | allPrivateChats: res.data,
61 | chatId,
62 | userInfo,
63 | });
64 | return { type: ADD_PRIVATE_CHAT_MESSAGE_AND_INFO, data };
65 | };
66 |
67 | const deletePrivateChatAction = ({ allPrivateChats, chatId }) => {
68 | const allPrivateChatsCopy = new Map(allPrivateChats);
69 | const goalPrivateChat = allPrivateChatsCopy.get(chatId);
70 | if (goalPrivateChat) {
71 | allPrivateChatsCopy.delete(chatId);
72 | }
73 | return { type: DELETE_PRIVATE_CHAT, data: allPrivateChatsCopy };
74 | };
75 |
76 | export {
77 | SET_ALL_PRIVATE_CHATS,
78 | ADD_PRIVATE_CHAT_MESSAGES,
79 | ADD_PRIVATE_INFO,
80 | ADD_PRIVATE_CHAT_MESSAGE_AND_INFO,
81 | DELETE_PRIVATE_CHAT,
82 | setAllPrivateChatsAction,
83 | addPrivateChatMessagesAction,
84 | addPrivateChatInfoAction,
85 | addPrivateChatMessageAndInfoAction,
86 | deletePrivateChatAction,
87 | };
88 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ghChat",
3 | "version": "1.0.0",
4 | "description": "a chat tool for GitHub ",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "start": "webpack-dev-server --config webpack.dev.config.js --color --hot",
9 | "build": "webpack --config webpack.dev.config.js",
10 | "build:prod": "webpack --config webpack.prod.config.js",
11 | "lint": "eslint src",
12 | "prettier": "prettier --write \"**/*.{js,jsx,json,md,ts}\""
13 | },
14 | "repository": {
15 | "type": "git",
16 | "url": "git+https://github.com/aermin/ghChat.git"
17 | },
18 | "author": "aermin",
19 | "license": "MIT",
20 | "bugs": {
21 | "url": "https://github.com/aermin/ghChat/issues"
22 | },
23 | "homepage": "https://github.com/aermin/ghChat#readme",
24 | "devDependencies": {
25 | "autoprefixer": "^8.6.3",
26 | "babel-core": "^6.26.3",
27 | "babel-eslint": "^8.0.1",
28 | "babel-loader": "^7.1.4",
29 | "babel-plugin-syntax-dynamic-import": "^6.18.0",
30 | "babel-plugin-transform-runtime": "^6.23.0",
31 | "babel-polyfill": "^6.26.0",
32 | "babel-preset-es2015": "^6.24.1",
33 | "babel-preset-react": "^6.24.1",
34 | "babel-preset-stage-0": "^6.24.1",
35 | "bundle-loader": "^0.5.6",
36 | "clean-webpack-plugin": "^0.1.19",
37 | "compression-webpack-plugin": "v1.1.12",
38 | "copy-webpack-plugin": "^4.0.1",
39 | "css-loader": "^0.28.11",
40 | "eslint": "^5.16.0",
41 | "eslint-config-airbnb": "^17.1.0",
42 | "eslint-config-prettier": "^6.10.0",
43 | "eslint-plugin-import": "^2.14.0",
44 | "eslint-plugin-jsx-a11y": "^6.1.2",
45 | "eslint-plugin-prettier": "^3.1.2",
46 | "eslint-plugin-react": "^7.11.1",
47 | "extract-text-webpack-plugin": "^4.0.0-beta.0",
48 | "file-loader": "^1.1.11",
49 | "html-webpack-plugin": "^3.2.0",
50 | "mini-css-extract-plugin": "^0.9.0",
51 | "node-sass": "^4.13.1",
52 | "optimize-css-assets-webpack-plugin": "^5.0.3",
53 | "postcss-loader": "^2.1.5",
54 | "prettier": "^1.19.1",
55 | "progress-bar-webpack-plugin": "^2.1.0",
56 | "react-hot-loader": "^4.12.19",
57 | "redux-devtools-extension": "^2.13.2",
58 | "sass-loader": "^7.0.2",
59 | "style-loader": "^0.21.0",
60 | "terser-webpack-plugin": "^2.3.5",
61 | "url-loader": "^1.1.2",
62 | "webpack": "^4.41.5",
63 | "webpack-cli": "^3.3.10",
64 | "webpack-dev-server": "^3.10.3",
65 | "webpack-merge": "^4.2.2"
66 | },
67 | "dependencies": {
68 | "@loadable/component": "^5.7.0",
69 | "axios": "^0.18.1",
70 | "classnames": "^2.2.6",
71 | "emoji-mart": "^2.9.2",
72 | "fuse.js": "^3.3.0",
73 | "immutable": "^3.8.2",
74 | "linkify-it": "^2.1.0",
75 | "prop-types": "^15.6.1",
76 | "qiniu-js": "^2.5.3",
77 | "rc-notification": "^3.1.1",
78 | "rc-switch": "^1.9.0",
79 | "react": "^16.11.0",
80 | "react-dom": "^16.11.0",
81 | "react-markdown": "^4.0.6",
82 | "react-redux": "^7.1.0",
83 | "react-router-dom": "^5.0.0",
84 | "react-viewer": "^2.8.0",
85 | "redux": "^4.0.0",
86 | "redux-thunk": "^2.2.0",
87 | "socket.io-client": "^2.2.0",
88 | "text-emoji-parser": "^1.0.8",
89 | "tlds": "^1.203.1"
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/src/components/Setting/index.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withRouter } from 'react-router-dom';
4 | import axios from 'axios';
5 | import Switch from 'rc-switch';
6 | import { GLOBAL_SETTINGS } from '../../containers/SettingPage/settingReducer';
7 | import './styles.scss';
8 | import Button from '../Button';
9 | import Modal from '../Modal';
10 |
11 | function openRepoUrl(history) {
12 | if (process.env.NODE_ENV === 'production') {
13 | history.push('/group_chat/ddbffd80-3663-11e9-a580-d119b23ef62e');
14 | } else {
15 | window.open('https://im.aermin.top/group_chat/ddbffd80-3663-11e9-a580-d119b23ef62e');
16 | }
17 | }
18 |
19 | function Setting({ initApp, history, globalSettings, setGlobalSettings }) {
20 | const [logoutModalVisible, setLogoutModalVisible] = useState(false);
21 | const [githubStars, setGithubStars] = useState('--');
22 |
23 | const logout = () => {
24 | window.socket.disconnect();
25 | localStorage.removeItem('userInfo');
26 | initApp(false);
27 | history.push('/login');
28 | };
29 |
30 | useEffect(() => {
31 | axios.get('https://api.github.com/repos/aermin/ghChat').then(res => {
32 | setGithubStars(res.data.stargazers_count);
33 | });
34 | });
35 |
36 | const _onChange = (type, value) => {
37 | setGlobalSettings({
38 | [type]: value,
39 | });
40 | };
41 |
42 | return (
43 |
44 | setLogoutModalVisible(false)}
51 | />
52 |
53 |
85 | );
86 | }
87 |
88 | Setting.propTypes = {
89 | initApp: PropTypes.func,
90 | history: PropTypes.object.isRequired,
91 | globalSettings: PropTypes.object,
92 | setGlobalSettings: PropTypes.func,
93 | };
94 |
95 | Setting.defaultProps = {
96 | initApp() {},
97 | globalSettings: {},
98 | setGlobalSettings() {},
99 | };
100 |
101 | export default withRouter(Setting);
102 |
--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
3 | import loadable from '@loadable/component';
4 |
5 | const FUNCTION_ROUTERS = [
6 | '/',
7 | '/robot_chat',
8 | '/group_chat/:to_group_id',
9 | '/private_chat/:user_id',
10 | '/setting',
11 | ];
12 | const AUTH_ROUTERS = ['/login', '/register'];
13 |
14 | function MainView(props) {
15 | const { pathname } = props.location;
16 | if (AUTH_ROUTERS.indexOf(pathname) < 0 && !localStorage.getItem('userInfo')) {
17 | sessionStorage.setItem('originalLink', window.location.href);
18 | props.history.push('/login');
19 | }
20 |
21 | let MainViewClassName;
22 | if (pathname === '/' || pathname === '/setting') {
23 | MainViewClassName = 'layout-left';
24 | } else {
25 | MainViewClassName = 'layout-left-mobile';
26 | }
27 |
28 | return (
29 |
54 | 消息通知：
55 | _onChange(GLOBAL_SETTINGS.NOTIFICATION, value)}
57 | checked={globalSettings.notification}
58 | />
59 |
60 |
61 | window.open('https://github.com/aermin/ghChat')}
64 | >
65 |
68 | {`${githubStars} Stars`}
69 |
70 |
71 | window.open('https://github.com/aermin/blog/issues/63')}
74 | >
75 | 开启PWA(将ghChat安装到桌面)
76 |
77 | window.open('https://github.com/aermin/ghChat')}>
78 | 项目地址 & 欢迎star
79 |
80 | openRepoUrl(history)}>
81 | 项目交流群
82 |
83 |
30 | import('../containers/Tabs'))} />
31 | import('../containers/HomePageList'))}
35 | />
36 | import('../containers/SettingPage'))}
40 | />
41 |
42 | );
43 | }
44 |
45 | function RightView(props) {
46 | const { pathname } = props.location;
47 | let RightViewClassName;
48 |
49 | if (pathname === '/' || pathname === '/setting') {
50 | RightViewClassName = 'layout-right-mobile';
51 | } else {
52 | RightViewClassName = 'layout-right';
53 | }
54 |
55 | return (
56 |
57 | import('../containers/RobotPage'))} />
58 | import('../containers/GroupChatPage'))}
61 | />
62 | import('../containers/PrivateChatPage'))}
65 | />
66 | {['/', '/setting'].map((path, index) => (
67 | import('../containers/WelcomePage'))}
71 | key={index}
72 | />
73 | ))}
74 |
75 | );
76 | }
77 |
78 | export default function App() {
79 | return (
80 |
82 |
83 | import('../containers/RegisterPage'))}
87 | />
88 | import('../containers/LogInPage'))}
92 | />
93 |
94 |
97 | import('../components/NotFound'))} />
98 |
99 |
100 |
77 | this.confirm(args)}
88 | hasCancel
89 | hasConfirm
90 | cancel={this.cancel}
91 | />
92 |
93 | );
94 | }
95 | }
96 |
97 | Header.propTypes = {
98 | updateHomePageList: PropTypes.func,
99 | homePageList: PropTypes.array,
100 | allGroupChats: PropTypes.object,
101 | searchFieldChange: PropTypes.func,
102 | isSearching: PropTypes.bool,
103 | addGroupMessageAndInfo: PropTypes.func,
104 | };
105 |
106 | Header.defaultProps = {
107 | updateHomePageList: undefined,
108 | homePageList: [],
109 | allGroupChats: new Map(),
110 | searchFieldChange: undefined,
111 | isSearching: false,
112 | addGroupMessageAndInfo() {},
113 | };
114 |
--------------------------------------------------------------------------------
/src/modules/Chat/index.js:
--------------------------------------------------------------------------------
1 | import { clearUnreadAction } from '../../containers/HomePageList/homePageListAction';
2 | import { addGroupMessagesAction } from '../../containers/GroupChatPage/groupChatAction';
3 | import { addPrivateChatMessagesAction } from '../../containers/PrivateChatPage/privateChatAction';
4 | import { shareAction } from '../../redux/actions/shareAction';
5 | import store from '../../redux/store';
6 | import notification from '../../components/Notification';
7 |
8 | export default class Chat {
9 | constructor() {
10 | this._hasLoadAllMessages = false;
11 | }
12 |
13 | clickItemToShare = ({ homePageList, chatId, userInfo }) => {
14 | const data = homePageList.filter(e => e.user_id === chatId || e.to_group_id === chatId);
15 | if (!data) {
16 | throw Error("can't find the date of this item");
17 | }
18 | const { name, avatar, user_id, to_group_id } = userInfo || data[0];
19 | store.dispatch(
20 | shareAction({
21 | name,
22 | avatar,
23 | user_id,
24 | to_group_id,
25 | }),
26 | );
27 | };
28 |
29 | clearUnreadHandle({ homePageList, chatFromId }) {
30 | store.dispatch(clearUnreadAction({ homePageList, chatFromId }));
31 | }
32 |
33 | lazyLoadGroupMessages({ chats, chatId, start, count }) {
34 | return new Promise((resolve, reject) => {
35 | if (!this._hasLoadAllMessages) {
36 | try {
37 | window.socket.emit(
38 | 'getOneGroupMessages',
39 | { groupId: chatId, start, count },
40 | groupMessages => {
41 | if (groupMessages && groupMessages.length === 0) {
42 | this._hasLoadAllMessages = true;
43 | notification('已经到底啦', 'warn', 2);
44 | reject();
45 | }
46 | store.dispatch(
47 | addGroupMessagesAction({
48 | allGroupChats: chats,
49 | messages: groupMessages,
50 | groupId: chatId,
51 | inLazyLoading: true,
52 | }),
53 | );
54 | resolve();
55 | },
56 | );
57 | } catch (error) {
58 | console.log(error);
59 | notification('出错啦，请稍后再试', 'error');
60 | const errorText = 'try again later';
61 | reject(errorText);
62 | }
63 | }
64 | });
65 | }
66 |
67 | lazyLoadPrivateChatMessages({ chats, user_id, chatId, start, count }) {
68 | return new Promise((resolve, reject) => {
69 | if (!this._hasLoadAllMessages) {
70 | window.socket.emit(
71 | 'getOnePrivateChatMessages',
72 | {
73 | user_id,
74 | toUser: chatId,
75 | start,
76 | count,
77 | },
78 | privateChatMessages => {
79 | if (privateChatMessages && privateChatMessages.length === 0) {
80 | this._hasLoadAllMessages = true;
81 | notification('已经到底啦', 'warn', 2);
82 | reject();
83 | }
84 | store.dispatch(
85 | addPrivateChatMessagesAction({
86 | allPrivateChats: chats,
87 | messages: privateChatMessages,
88 | chatId,
89 | inLazyLoading: true,
90 | }),
91 | );
92 | resolve('success!');
93 | },
94 | );
95 | }
96 | });
97 | }
98 |
99 | get isScrollInBottom() {
100 | const ulDom = document.getElementsByClassName('chat-content-list')[0];
101 | if (ulDom) {
102 | const { scrollTop, offsetHeight, scrollHeight } = ulDom;
103 | return scrollTop === scrollHeight - offsetHeight;
104 | }
105 | return false;
106 | }
107 | }
108 |
--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
1 | @import "/assets/base.scss";
2 | .layout-wrapper{
3 | display: flex;
4 | height: 100vh;
5 | .layout-left, .layout-left-mobile{
6 | width: 30%;
7 | height: 100%;
8 | position: relative;
9 | }
10 | .layout-right , .layout-right-mobile {
11 | width: 70%;
12 | height: 100%;
13 | display: flex;
14 | align-items: center;
15 | justify-content: center;
16 | }
17 | }
18 |
19 |
20 | @media screen and (max-width: 647px) {
21 | .layout-wrapper{
22 | min-width: 100%;
23 | .layout-left{
24 | width: 100%;
25 | .tabs-wrapper{
26 | display: flex;
27 | justify-content: space-around;
28 | width: 100%;
29 | position: fixed;
30 | bottom: 0;
31 | border-top: 1px solid $border;
32 | }
33 | .home-page-list-wrapper{
34 | width: 100%;
35 | height: calc(100% - 46px);
36 | .header-wrapper {
37 | padding-left: 14px !important;
38 | .myInfo {
39 | display: inline-block;
40 | visibility: visible;
41 | }
42 | }
43 | .home-page-list-content {
44 | height: calc(100% - 46px);
45 | }
46 | }
47 | }
48 | .layout-left-mobile{
49 | display: none;
50 | }
51 | .layout-right {
52 | width: 100%;
53 | .back-icon {
54 | display: inline-block !important;
55 | }
56 | }
57 | .layout-right-mobile {
58 | display: none;
59 | }
60 | }
61 | }
62 |
63 | @media screen and (min-width: 647px) {
64 | .layout-wrapper{
65 | min-width: 100%;
66 | .layout-left,.layout-left-mobile{
67 | width: 40%;
68 | display: flex;
69 | flex-wrap: nowrap;
70 | .tabs-wrapper{
71 | padding: 26px 4px 0;
72 | height: 100%;
73 | border-right: 1px solid $border;
74 | .myInfo {
75 | display: inline-block;
76 | margin-bottom: 50px;
77 | }
78 | .tab{
79 | padding-bottom: 30px;
80 | }
81 | }
82 | .home-page-list-wrapper, .setting {
83 | border-right: 1px solid $border;
84 | }
85 | .home-page-list-wrapper{
86 | width: calc(100% - 53px);
87 | .home-page-list-content{
88 | height: calc(100% - 50px);
89 | }
90 | }
91 | }
92 | .layout-right ,.layout-right-mobile{
93 | width: 60%;
94 | }
95 | }
96 | }
97 |
98 | @media screen and (min-width: 1025px) {
99 | .layout-wrapper{
100 | min-width: 100%;
101 | .layout-left ,.layout-left-mobile{
102 | width: 30%;
103 | }
104 | .layout-right ,.layout-right-mobile{
105 | width: 70%;
106 | }
107 | }
108 | }
109 |
110 | @media screen and (min-width: 1320px) {
111 | .layout-wrapper{
112 | min-width: 100%;
113 | .layout-left{
114 | width: 25%;
115 | }
116 | .layout-right {
117 | width: 75%;
118 | }
119 | }
120 | }
121 |
122 | @media screen and (min-width: 1440px) {
123 | .layout-wrapper{
124 | min-width: 100%;
125 | .layout-left{
126 | width: 20%;
127 | }
128 | .layout-right {
129 | width: 80%;
130 | }
131 | }
132 | }
133 |
--------------------------------------------------------------------------------
/src/components/ShareModal/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { withRouter } from 'react-router-dom';
3 | import Fuse from 'fuse.js';
4 | import PropTypes from 'prop-types';
5 | import { List } from 'immutable';
6 | import './styles.scss';
7 | import notification from '../Notification';
8 | import Modal from '../Modal';
9 | import SearchBox from '../SearchBox';
10 | import ListItems from '../ListItems';
11 | import Chat from '../../modules/Chat';
12 |
13 | class ShareModal extends Component {
14 | constructor(props) {
15 | super(props);
16 | this.state = {
17 | isSearching: false,
18 | contactedItems: [],
19 | };
20 | this._chat = new Chat();
21 | }
22 |
23 | _copyShareLink = () => {
24 | const dummy = document.createElement('input');
25 | const text = this.props.shareLink || `${window.location.origin}${window.location.pathname}`;
26 | document.body.appendChild(dummy);
27 | dummy.value = text;
28 | dummy.select();
29 | document.execCommand('copy');
30 | document.body.removeChild(dummy);
31 | notification('你已复制了邀请链接，可以发给应用外的人啦', 'success');
32 | };
33 |
34 | searchFieldChange(field) {
35 | this._filedStr = field.toString();
36 | if (this._filedStr.length > 0) {
37 | const { homePageList } = this.props;
38 | const homePageListCopy = [...List(homePageList)];
39 | const fuse = new Fuse(homePageListCopy, this.filterOptions);
40 | const contactedItems = fuse.search(this._filedStr);
41 | this.setState({ isSearching: true, contactedItems });
42 | } else {
43 | this.setState({ isSearching: false });
44 | }
45 | }
46 |
47 | get filterOptions() {
48 | const options = {
49 | shouldSort: true,
50 | threshold: 0.3,
51 | location: 0,
52 | distance: 100,
53 | maxPatternLength: 32,
54 | minMatchCharLength: 1,
55 | keys: ['name'],
56 | };
57 | return options;
58 | }
59 |
60 | _clickItemHandle = () => {
61 | const { homePageList, chatId, userInfo } = this.props;
62 | this._chat.clickItemToShare({ chatId, homePageList, userInfo });
63 | };
64 |
65 | render() {
66 | const { title, modalVisible, cancel, allGroupChats, homePageList } = this.props;
67 | const { isSearching, contactedItems } = this.state;
68 | return (
69 |
86 |
89 | 复制链接分享给应用外的人
90 |
91 |
80 | {this.state.showSpinner &&
124 | );
125 | }
126 | }
127 |
128 | SignInSignUp.propTypes = {
129 | setValue: PropTypes.func,
130 | isLogin: PropTypes.bool,
131 | };
132 |
133 | SignInSignUp.defaultProps = {
134 | setValue() {},
135 | isLogin: false,
136 | };
137 |
--------------------------------------------------------------------------------
/server/init/sql/ghchat.sql:
--------------------------------------------------------------------------------
1 | # ************************************************************
2 | # Sequel Pro SQL dump
3 | # Version 4541
4 | #
5 | # http://www.sequelpro.com/
6 | # https://github.com/sequelpro/sequelpro
7 | #
8 | # Host: localhost (MySQL 5.7.22)
9 | # Database: ghchat
10 | # Generation Time: 2019-07-29 03:01:21 +0000
11 | # ************************************************************
12 |
13 |
14 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
15 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
16 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
17 | /*!40101 SET NAMES utf8 */;
18 | /*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
19 | /*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
20 | /*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
21 |
22 |
23 | # Dump of table group_info
24 | # ------------------------------------------------------------
25 |
26 | DROP TABLE IF EXISTS `group_info`;
27 |
28 | CREATE TABLE `group_info` (
29 | `id` int(11) NOT NULL AUTO_INCREMENT,
30 | `to_group_id` char(100) NOT NULL DEFAULT '',
31 | `name` varchar(20) NOT NULL DEFAULT '',
32 | `group_notice` varchar(100) NOT NULL DEFAULT '',
33 | `creator_id` int(11) NOT NULL,
34 | `create_time` int(11) NOT NULL,
35 | PRIMARY KEY (`id`)
36 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
37 |
38 |
39 |
40 | # Dump of table group_msg
41 | # ------------------------------------------------------------
42 |
43 | DROP TABLE IF EXISTS `group_msg`;
44 |
45 | CREATE TABLE `group_msg` (
46 | `id` int(11) NOT NULL AUTO_INCREMENT,
47 | `from_user` int(11) NOT NULL,
48 | `to_group_id` char(100) NOT NULL DEFAULT '',
49 | `message` text NOT NULL,
50 | `time` int(11) NOT NULL,
51 | `attachments` varchar(250) DEFAULT '''[]''',
52 | PRIMARY KEY (`id`),
53 | KEY `to_group` (`to_group_id`)
54 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
55 |
56 |
57 |
58 | # Dump of table group_user_relation
59 | # ------------------------------------------------------------
60 |
61 | DROP TABLE IF EXISTS `group_user_relation`;
62 |
63 | CREATE TABLE `group_user_relation` (
64 | `id` int(11) NOT NULL AUTO_INCREMENT,
65 | `to_group_id` char(100) NOT NULL DEFAULT '',
66 | `user_id` int(11) NOT NULL,
67 | PRIMARY KEY (`id`)
68 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
69 |
70 |
71 |
72 | # Dump of table private_msg
73 | # ------------------------------------------------------------
74 |
75 | DROP TABLE IF EXISTS `private_msg`;
76 |
77 | CREATE TABLE `private_msg` (
78 | `id` int(11) NOT NULL AUTO_INCREMENT,
79 | `from_user` int(11) NOT NULL,
80 | `to_user` int(11) NOT NULL,
81 | `message` text,
82 | `time` int(11) NOT NULL,
83 | `attachments` varchar(250) DEFAULT '[]',
84 | PRIMARY KEY (`id`),
85 | KEY `from_user` (`from_user`),
86 | KEY `to_user` (`to_user`)
87 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
88 |
89 |
90 |
91 | # Dump of table user_info
92 | # ------------------------------------------------------------
93 |
94 | DROP TABLE IF EXISTS `user_info`;
95 |
96 | CREATE TABLE `user_info` (
97 | `id` int(11) NOT NULL AUTO_INCREMENT,
98 | `github_id` int(11) DEFAULT NULL,
99 | `name` varchar(20) NOT NULL DEFAULT 'NOT NULL',
100 | `password` varchar(40) DEFAULT NULL,
101 | `avatar` varchar(250) DEFAULT '',
102 | `location` varchar(50) DEFAULT NULL,
103 | `socketid` char(255) DEFAULT NULL,
104 | `website` varchar(50) DEFAULT NULL,
105 | `github` varchar(50) DEFAULT NULL,
106 | `intro` varchar(100) DEFAULT NULL,
107 | `company` varchar(50) DEFAULT NULL,
108 | PRIMARY KEY (`id`)
109 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
110 |
111 |
112 |
113 | # Dump of table user_user_relation
114 | # ------------------------------------------------------------
115 |
116 | DROP TABLE IF EXISTS `user_user_relation`;
117 |
118 | CREATE TABLE `user_user_relation` (
119 | `id` int(11) NOT NULL AUTO_INCREMENT,
120 | `user_id` int(11) NOT NULL,
121 | `from_user` int(11) NOT NULL,
122 | `remark` varchar(10) DEFAULT '',
123 | `shield` tinyint(1) NOT NULL DEFAULT '0',
124 | `time` int(11) NOT NULL,
125 | PRIMARY KEY (`id`)
126 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
127 |
128 |
129 |
130 |
131 | /*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
132 | /*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
133 | /*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
134 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
135 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
136 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
137 |
--------------------------------------------------------------------------------
/src/containers/HomePageList/homePageListAction.js:
--------------------------------------------------------------------------------
1 | import { List } from 'immutable';
2 |
3 | const UPDATE_HOME_PAGE_LIST = 'UPDATE_HOME_PAGE_LIST';
4 | const CLEAR_UNREAD = 'CLEAR_UNREAD';
5 | const DELETE_CHAT_FROM_LIST = 'DELETE_CHAT_FROM_LIST';
6 | const SET_HOME_PAGE_LIST = 'SET_HOME_PAGE_LIST';
7 | const SHOW_CALL_ME_TIP = 'SHOW_CALL_ME_TIP';
8 | const RELATED_CURRENT_CHAT = 'RELATED_CURRENT_CHAT';
9 | const UPDATE_LIST_GROUP_NAME = 'UPDATE_LIST_GROUP_NAME';
10 |
11 | // TODO: 重构和代码注释
12 | const updateHomePageListAction = ({
13 | homePageList,
14 | data,
15 | myUserId,
16 | increaseUnread = 0,
17 | showCallMeTip = false,
18 | }) => {
19 | const homePageListCopy = [...List(homePageList)];
20 | const dataCopy = { ...data, showCallMeTip };
21 | let chatFromId;
22 | if (dataCopy && dataCopy.to_user) {
23 | chatFromId = dataCopy.from_user === myUserId ? dataCopy.to_user : dataCopy.from_user;
24 | dataCopy.user_id = chatFromId;
25 | } else if (dataCopy && dataCopy.to_group_id) {
26 | chatFromId = dataCopy.to_group_id;
27 | }
28 | const chatExist = homePageListCopy.find(
29 | e => e.user_id === chatFromId || e.to_group_id === chatFromId,
30 | );
31 | if (chatExist) {
32 | const length = homePageListCopy.length;
33 | for (let i = 0; i < length; i += 1) {
34 | const { user_id, to_group_id, unread = 0 } = homePageListCopy[i];
35 | if (user_id === chatFromId || to_group_id === chatFromId) {
36 | const updatedUnread = unread + increaseUnread;
37 | const { message, time } = dataCopy;
38 | homePageListCopy[i] = Object.assign(homePageListCopy[i], {
39 | message,
40 | time,
41 | unread: updatedUnread,
42 | showCallMeTip,
43 | });
44 | break;
45 | }
46 | }
47 | } else {
48 | dataCopy.unread = increaseUnread;
49 | homePageListCopy.push(dataCopy);
50 | }
51 | return {
52 | type: UPDATE_HOME_PAGE_LIST,
53 | data: homePageListCopy,
54 | };
55 | };
56 |
57 | const updateListGroupNameAction = ({ homePageList, name, to_group_id }) => {
58 | const homePageListCopy = [...List(homePageList)];
59 | const goal = homePageListCopy.find(e => e.to_group_id === to_group_id);
60 | goal.name = name;
61 | return {
62 | type: UPDATE_LIST_GROUP_NAME,
63 | data: homePageListCopy,
64 | };
65 | };
66 |
67 | const showCallMeTipAction = ({ homePageList, showCallMeTip, chatFromId }) => {
68 | const homePageListCopy = [...List(homePageList)];
69 | const length = homePageListCopy.length;
70 | for (let i = 0; i < length; i += 1) {
71 | const { to_group_id } = homePageListCopy[i];
72 | if (to_group_id === chatFromId) {
73 | homePageListCopy[i].showCallMeTip = showCallMeTip;
74 | break;
75 | }
76 | }
77 | return {
78 | type: SHOW_CALL_ME_TIP,
79 | data: homePageListCopy,
80 | };
81 | };
82 |
83 | const deleteHomePageListAction = ({ homePageList, chatId }) => {
84 | const homePageListCopy = [...List(homePageList)];
85 | const length = homePageListCopy.length;
86 | for (let i = 0; i < length; i += 1) {
87 | const { to_group_id, user_id } = homePageListCopy[i];
88 | const id = to_group_id || user_id;
89 | if (chatId === id) {
90 | homePageListCopy.splice(i, 1);
91 | break;
92 | }
93 | }
94 | return {
95 | type: DELETE_CHAT_FROM_LIST,
96 | data: homePageListCopy,
97 | };
98 | };
99 |
100 | const clearUnreadAction = ({ chatFromId, homePageList }) => {
101 | const homePageListCopy = [...List(homePageList)];
102 | const length = homePageListCopy.length;
103 | for (let i = 0; i < length; i += 1) {
104 | const { user_id, to_group_id } = homePageListCopy[i];
105 | if (
106 | (user_id && user_id.toString()) === (chatFromId && chatFromId.toString()) ||
107 | to_group_id === chatFromId
108 | ) {
109 | homePageListCopy[i].unread = 0;
110 | break;
111 | }
112 | }
113 | return {
114 | type: CLEAR_UNREAD,
115 | data: homePageListCopy,
116 | };
117 | };
118 |
119 | const setHomePageListAction = (homePageList = []) => ({
120 | type: SET_HOME_PAGE_LIST,
121 | data: homePageList,
122 | });
123 |
124 | const relatedCurrentChatAction = isRelatedCurrentChat => ({
125 | type: RELATED_CURRENT_CHAT,
126 | data: isRelatedCurrentChat,
127 | });
128 |
129 | export {
130 | UPDATE_HOME_PAGE_LIST,
131 | CLEAR_UNREAD,
132 | DELETE_CHAT_FROM_LIST,
133 | SET_HOME_PAGE_LIST,
134 | SHOW_CALL_ME_TIP,
135 | RELATED_CURRENT_CHAT,
136 | UPDATE_LIST_GROUP_NAME,
137 | updateHomePageListAction,
138 | clearUnreadAction,
139 | deleteHomePageListAction,
140 | setHomePageListAction,
141 | showCallMeTipAction,
142 | relatedCurrentChatAction,
143 | updateListGroupNameAction,
144 | };
145 |
--------------------------------------------------------------------------------
/src/components/ListItems/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Link, withRouter } from 'react-router-dom';
3 | import PropTypes from 'prop-types';
4 | import classnames from 'classnames';
5 | import { toNormalTime } from '../../utils/transformTime';
6 | import UserAvatar from '../UserAvatar';
7 | import GroupAvatar from '../GroupAvatar';
8 | import './styles.scss';
9 |
10 | // eslint-disable-next-line react/prefer-stateless-function
11 | class ListItems extends Component {
12 | _clickItem = ({ chatFromId, isGroupChat }) => {
13 | this.props.clickItem(chatFromId);
14 | const chatUrl = isGroupChat ? `/group_chat/${chatFromId}` : `/private_chat/${chatFromId}`;
15 | this.props.history.push(chatUrl);
16 | };
17 |
18 | render() {
19 | const robotChat = (
20 |
82 | 
83 |
84 |
85 | 登录
86 |
87 |
88 | 注册
89 |
90 |
83 |
91 |
93 |
94 |
101 |
102 |
103 |
110 |
111 |
112 |
113 |
114 |
115 |
122 | 推荐使用GitHub登录
116 | 117 | 120 | 121 |Version: 2.5.6
123 | -
108 | {showRobot && !isSearching && robotChat}
109 | {listItems}
110 |
32 |
62 | );
63 | }
64 | }
65 |
66 | const ModalRender = ModalBase(userInfoRender);
67 |
68 | class PersonalInfo extends Component {
69 | goToChat = () => {
70 | this.props.history.push(`/private_chat/${this.props.userInfo.user_id}`);
71 | this.props.hide();
72 | };
73 |
74 | deleteContact = () => {
75 | const myInfo = JSON.parse(localStorage.getItem('userInfo'));
76 | const {
77 | userInfo,
78 | deleteHomePageList,
79 | homePageList,
80 | deletePrivateChat,
81 | allPrivateChats,
82 | } = this.props;
83 | window.socket.emit(
84 | 'deleteContact',
85 | {
86 | from_user: myInfo.user_id,
87 | to_user: userInfo.user_id,
88 | },
89 | res => {
90 | if (res.code === 200) {
91 | deleteHomePageList({ homePageList, chatId: userInfo.user_id });
92 | deletePrivateChat({ allPrivateChats, chatId: userInfo.user_id });
93 | this.props.hide();
94 | notification('删除联系人成功', 'success', 2);
95 | }
96 | },
97 | );
98 | };
99 |
100 | get isContact() {
101 | return (
102 | this.props.homePageList &&
103 | this.props.homePageList.find(e => e.user_id === this.props.userInfo.user_id)
104 | );
105 | }
106 |
107 | render() {
108 | const {
109 | userInfo,
110 | modalVisible,
111 | hide,
112 | showContactButton,
113 | showShareIcon,
114 | showShareModal,
115 | } = this.props;
116 | return (
117 | {name}
} 34 | {intro &&{`介绍: ${intro}`}
} 35 | {location &&{`来自: ${location}`}
} 36 | {company &&{`公司: ${company}`}
} 37 | {/* {status &&{status}
} */} 38 | {website && ( 39 |_openUrl(website)}>{`网站: ${website}`}
40 | )} 41 | {github &&_openUrl(github)}>{`github: ${github}`}
} 42 | {showContactButton && ( 43 | 48 | )} 49 | {isContact && ( 50 | 55 | )} 56 | {showShareIcon && ( 57 | 60 | )} 61 |-
43 | {groupMember.length > 0 &&
44 | groupMember.map(
45 | e =>
46 | (!this.state.justShowOnlineMember || !!e.status) && (
47 |
114 | this._confirm(args)}
118 | hasCancel
119 | hasConfirm
120 | cancel={this._closeModal}
121 | defaultGroupName={groupInfo.name}
122 | defaultGroupNotice={groupInfo.group_notice}
123 | />
124 |
150 | );
151 | }
152 |
153 | get userInfo() {
154 | return JSON.parse(localStorage.getItem('userInfo'));
155 | }
156 | }
157 |
158 | GroupChatInfo.propTypes = {
159 | leaveGroup: PropTypes.func.isRequired,
160 | chatId: PropTypes.string.isRequired,
161 | groupInfo: PropTypes.object,
162 | updateGroupTitleNotice: PropTypes.func,
163 | updateListGroupName: PropTypes.func,
164 | allGroupChats: PropTypes.instanceOf(Map),
165 | homePageList: PropTypes.array,
166 | };
167 |
168 | GroupChatInfo.defaultProps = {
169 | groupInfo: {},
170 | updateGroupTitleNotice() {},
171 | updateListGroupName() {},
172 | allGroupChats: new Map(),
173 | homePageList: [],
174 | };
175 |
--------------------------------------------------------------------------------
/src/components/ChatContentList/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import Viewer from 'react-viewer';
4 | import ChatItem from '../ChatItem';
5 | import { toNormalTime } from '../../utils/transformTime';
6 | import './styles.scss';
7 | import sleep from '../../utils/sleep';
8 | import notification from '../Notification';
9 | import Chat from '../../modules/Chat';
10 |
11 | export default class ChatContentList extends Component {
12 | constructor(props) {
13 | super(props);
14 | this._chat = new Chat();
15 | this._scrollHeight = 0;
16 | this._userInfo = JSON.parse(localStorage.getItem('userInfo'));
17 | this._loadingNewMessages = false;
18 | this._executeNextLoad = true;
19 | this.state = {
20 | imageVisible: false,
21 | imageUrl: null,
22 | };
23 | }
24 |
25 | componentDidMount() {
26 | this.scrollBottomRef.scrollIntoView();
27 | }
28 |
29 | componentDidUpdate(nextProps) {
30 | if (nextProps.chatId !== this.props.chatId) {
31 | // go to another chat
32 | this._loadingNewMessages = false;
33 | }
34 | if (this._scrollHeight && this._loadingNewMessages) {
35 | this._ulRef.scrollTop = this._ulRef.scrollHeight - this._scrollHeight;
36 | this._loadingNewMessages = false;
37 | return;
38 | }
39 | if (nextProps.ChatContent !== this.props.ChatContent) {
40 | this.scrollBottomRef.scrollIntoView();
41 | }
42 | }
43 |
44 | _lazyLoadMessage = () => {
45 | this._executeNextLoad = false;
46 | const { chats, chatId, ChatContent, chatType } = this.props;
47 | if (chatType === 'groupChat') {
48 | this._chat
49 | .lazyLoadGroupMessages({
50 | chats,
51 | chatId,
52 | start: ChatContent.length + 1,
53 | count: 20,
54 | })
55 | .then(() => {
56 | this._executeNextLoad = true;
57 | })
58 | .catch(error => {
59 | if (error === 'try again later') {
60 | sleep(3000).then(() => {
61 | this._executeNextLoad = true;
62 | });
63 | }
64 | });
65 | } else if (chatType === 'privateChat') {
66 | this._chat
67 | .lazyLoadPrivateChatMessages({
68 | chats,
69 | user_id: this._userInfo.user_id,
70 | chatId,
71 | start: ChatContent.length + 1,
72 | count: 20,
73 | })
74 | .then(() => {
75 | this._executeNextLoad = true;
76 | })
77 | .catch(error => {
78 | if (error === 'try again later') {
79 | sleep(3000).then(() => {
80 | this._executeNextLoad = true;
81 | });
82 | }
83 | });
84 | }
85 | this._loadingNewMessages = true;
86 | };
87 |
88 | _onScroll = e => {
89 | if (!this._ulRef) return;
90 | const { scrollTop, scrollHeight, clientHeight } = e && e.target;
91 | this._scrollHeight = scrollHeight;
92 | if (scrollTop === 0 && scrollHeight !== clientHeight && this._executeNextLoad) {
93 | if (!this.props.shouldScrollToFetchData) {
94 | notification('查看更多请先加群哦', 'warn');
95 | return;
96 | }
97 | this._lazyLoadMessage();
98 | }
99 | };
100 |
101 | clickImage = imageUrl => {
102 | this.setState({ imageUrl, imageVisible: true });
103 | };
104 |
105 | _closeImageView = () => {
106 | this.setState({ imageVisible: false });
107 | };
108 |
109 | render() {
110 | const { ChatContent, clickAvatar } = this.props;
111 | const listItems = ChatContent.map((item, index) => {
112 | let isMe;
113 | if (item.to_user) {
114 | // is private chat
115 | isMe = this._userInfo && this._userInfo.user_id === item.from_user;
116 | } else if (item.to_group_id) {
117 | // is group chat
118 | isMe = this._userInfo && this._userInfo.user_id === item.from_user;
119 | }
120 | let message;
121 | if (item.message) {
122 | const beginWithName = /\S.*:\s/.test(item.message);
123 | message = beginWithName ? item.message.substring(item.name.length + 2) : item.message;
124 | }
125 | const time = toNormalTime(item.time);
126 | const attachments = item.attachments;
127 | if (item.tip) {
128 | return (
129 |
125 |
145 | {this.GroupMemberRender(groupMember)}
146 | 126 | 群公告 127 | {this._isCreator && ( 128 | 135 | )} 136 |
137 |{groupInfo.group_notice}
138 |139 | {`在线人数: ${onlineNumber}`} 140 | 141 | {`${justShowOnlineMember ? '查看所有' : '只看在线'}`} 142 | 143 |
144 |147 | 退出群聊 148 |
149 |- {
155 | this._ulRef = el;
156 | }}
157 | onScroll={this._onScroll}
158 | >
159 |
{
169 | this.scrollBottomRef = el;
170 | }}
171 | />
172 |
173 | );
174 | }
175 | }
176 |
177 | ChatContentList.propTypes = {
178 | ChatContent: PropTypes.array,
179 | chatId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
180 | clickAvatar: PropTypes.func,
181 | chatType: PropTypes.string.isRequired,
182 | chats: PropTypes.instanceOf(Map),
183 | shouldScrollToFetchData: PropTypes.bool,
184 | };
185 |
186 | ChatContentList.defaultProps = {
187 | ChatContent: [],
188 | chatId: null,
189 | clickAvatar() {},
190 | chats: new Map(),
191 | shouldScrollToFetchData: true,
192 | };
193 |
--------------------------------------------------------------------------------
/server/src/app/services/user.service.ts:
--------------------------------------------------------------------------------
1 | import { query } from '../utils/db';
2 |
3 | export class UserService {
4 | // 模糊匹配用户
5 | fuzzyMatchUsers(link) {
6 | const _sql = `
7 | SELECT * FROM user_info WHERE name LIKE ?;
8 | `;
9 | return query(_sql, link);
10 | }
11 |
12 | // 注册用户
13 | insertData(value) {
14 | const _sql = 'insert into user_info(name,password) values(?,?);';
15 | return query(_sql, value);
16 | }
17 |
18 | // 添加github用户
19 | insertGithubData({ name, github_id, avatar, location, website, github, intro, company }) {
20 | const _sql =
21 | 'insert into user_info(name, github_id, avatar, location, website, github, intro, company) values(?,?,?,?,?,?,?,?);';
22 | return query(_sql, [name, github_id, avatar, location, website, github, intro, company]);
23 | }
24 |
25 | // 通过github_id查找 github用户信息
26 | findGithubUser(githubId) {
27 | const _sql = 'SELECT * FROM user_info WHERE github_id = ? ;';
28 | return query(_sql, githubId);
29 | }
30 |
31 | // 更新 github 用户信息
32 | updateGithubUser({ name, avatar, location, website, github, intro, github_id, company }) {
33 | const _sql =
34 | ' UPDATE user_info SET name = ?,avatar = ?,location = ?,website = ?,github = ?,intro= ?, company = ? WHERE github_id = ? ; ';
35 | return query(_sql, [name, avatar, location, website, github, intro, company, github_id]);
36 | }
37 |
38 | // 通过用户名查找非github用户信息 user_info
39 | findDataByName(name) {
40 | const _sql = 'SELECT * FROM user_info WHERE name = ? and github_id IS NULL;';
41 | return query(_sql, name);
42 | }
43 |
44 | // 通过用户id查找用户信息 user_info 包括用户名，性别，头像，最后登录时间，状态等，不包括密码
45 | getUserInfo(user_id) {
46 | const _sql =
47 | 'SELECT id AS user_id, name, avatar, location, website, github, github_id, intro, company FROM user_info WHERE user_info.id =? ';
48 | return query(_sql, [user_id]);
49 | }
50 |
51 | // 通过要查看的用户id 查询是否是本机用户的好友 如果是 返回user_id 和 remark 备注
52 | isFriend(user_id, from_user) {
53 | const _sql =
54 | 'SELECT * FROM user_user_relation AS u WHERE u.user_id = ? AND u.from_user = ? ';
55 | return query(_sql, [user_id, from_user]);
56 | }
57 |
58 | // 两边都互加为好友
59 | addFriendEachOther(user_id, from_user, time) {
60 | const _sql = 'INSERT INTO user_user_relation(user_id,from_user,time) VALUES (?,?,?), (?,?,?)';
61 | return query(_sql, [user_id, from_user, time, from_user, user_id, time]);
62 | }
63 |
64 | // 删除联系人
65 | deleteContact(user_id, from_user) {
66 | const _sql =
67 | 'DELETE FROM user_user_relation WHERE (user_id = ? AND from_user = ?) or (user_id = ? AND from_user = ?)';
68 | return query(_sql, [user_id, from_user, from_user, user_id]);
69 | }
70 |
71 | // 通过user_id查找首页群列表
72 | // TODO： 优化sql语句
73 | getGroupList(user_id) {
74 | const _sql = `SELECT r.to_group_id ,i.name , i.create_time,
75 | (SELECT g.message FROM group_msg AS g WHERE g.to_group_id = r.to_group_id ORDER BY TIME DESC LIMIT 1 ) AS message ,
76 | (SELECT g.time FROM group_msg AS g WHERE g.to_group_id = r.to_group_id ORDER BY TIME DESC LIMIT 1 ) AS time,
77 | (SELECT g.attachments FROM group_msg AS g WHERE g.to_group_id = r.to_group_id ORDER BY TIME DESC LIMIT 1 ) AS attachments
78 | FROM group_user_relation AS r inner join group_info AS i on r.to_group_id = i.to_group_id WHERE r.user_id = ? ;`;
79 | return query(_sql, user_id);
80 | }
81 |
82 | // 通过user_id查找首页私聊列表
83 | // TODO： 优化sql语句
84 | getPrivateList(user_id) {
85 | const _sql = ` SELECT r.from_user as user_id, i.name, i.avatar, i.github_id, r.time as be_friend_time,
86 | (SELECT p.message FROM private_msg AS p WHERE (p.to_user = r.from_user and p.from_user = r.user_id) or (p.from_user = r.from_user and p.to_user = r.user_id) ORDER BY p.time DESC LIMIT 1 ) AS message ,
87 | (SELECT p.time FROM private_msg AS p WHERE (p.to_user = r.from_user and p.from_user = r.user_id) or (p.from_user = r.from_user and p.to_user = r.user_id) ORDER BY p.time DESC LIMIT 1 ) AS time,
88 | (SELECT p.attachments FROM private_msg AS p WHERE (p.to_user = r.from_user and p.from_user = r.user_id) or (p.from_user = r.from_user and p.to_user = r.user_id) ORDER BY p.time DESC LIMIT 1 ) AS attachments
89 | FROM user_user_relation AS r inner join user_info AS i on r.from_user = i.id WHERE r.user_id = ? ;`;
90 | return query(_sql, user_id);
91 | }
92 |
93 | saveUserSocketId(user_id, socketId) {
94 | const data = [socketId, user_id];
95 | const _sql = ' UPDATE user_info SET socketid = ? WHERE id= ? limit 1 ; ';
96 | return query(_sql, data);
97 | }
98 |
99 | getUserSocketId(toUserId) {
100 | const _sql = ' SELECT socketid FROM user_info WHERE id=? limit 1 ;';
101 | return query(_sql, [toUserId]);
102 | }
103 |
104 | // 加为好友 单方面 (之后可能会加上开启好友验证的功能)
105 | // const addAsFriend = (user_id, from_user, time) {
106 | // const _sql = 'INSERT INTO user_user_relation(user_id,from_user,time) VALUES (?,?,?)';
107 | // return query(_sql, [user_id, from_user, time]);
108 | // };
109 |
110 | // 屏蔽好友
111 | // const shieldFriend = (status, user_id, from_user) {
112 | // const _sql = 'UPDATE user_user_relation SET shield = ? WHERE user_id = ? AND from_user = ? ';
113 | // return query(_sql, [status, user_id, from_user]);
114 | // };
115 |
116 | // // 修改备注
117 | // const editorRemark = (remark, user_id, from_user) {
118 | // const _sql = 'UPDATE user_user_relation SET remark = ? WHERE user_id = ? AND from_user = ? ';
119 | // return query(_sql, [remark, user_id, from_user]);
120 | // };
121 |
122 | // 通过用户名查找用户信息 user_info 不包括密码
123 | // const findUIByName = (name) {
124 | // const _sql = 'SELECT id ,name ,sex,avatar,location,github FROM user_info WHERE name = ? ';
125 | // return query(_sql, name);
126 | // };
127 |
128 | // 修改我的信息
129 | // const editorInfo = (data) {
130 | // const _sql = ' UPDATE user_info SET github = ?,website = ?,sex = ?,location = ? WHERE id = ? ; ';
131 | // return query(_sql, data);
132 | // };
133 |
134 | // 通过用户id查找用户信息 user_info 包括密码
135 | // const findDataByUserid = (user_id) {
136 | // const _sql = 'SELECT * FROM user_info WHERE id= ? ';
137 | // return query(_sql, [userid]);
138 | // };
139 | }
140 |
--------------------------------------------------------------------------------