├── .gitignore
├── README.md
├── config
    ├── env.js
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── paths.js
    ├── polyfills.js
    ├── webpack.config.dev.js
    ├── webpack.config.prod.js
    └── webpackDevServer.config.js
├── docs
    ├── MongodDB-env.md
    ├── README.md
    └── snapshot
    │   ├── 1.png
    │   ├── 2.png
    │   ├── 3.png
    │   ├── 4.png
    │   ├── 5.png
    │   ├── 6.png
    │   ├── 7.png
    │   ├── 8.png
    │   └── 9.png
├── mock
    └── README.md
├── package.json
├── public
    ├── css
    │   └── README.md
    ├── favicon.ico
    ├── fonts
    │   └── README.md
    ├── index.html
    └── manifest.json
├── scripts
    ├── build.js
    ├── start.js
    └── test.js
├── server
    ├── README.md
    ├── model.js
    ├── server.js
    └── user.js
├── src
    ├── App.css
    ├── App.js
    ├── actions
    │   ├── chat.js
    │   ├── chatuser.js
    │   ├── index.js
    │   └── user.js
    ├── components
    │   ├── AuthRoute
    │   │   └── index.js
    │   ├── AvatarSelector
    │   │   ├── icon
    │   │   │   ├── boy.png
    │   │   │   ├── bull.png
    │   │   │   ├── chick.png
    │   │   │   ├── crab.png
    │   │   │   ├── girl.png
    │   │   │   ├── hedgehog.png
    │   │   │   ├── hippo.png
    │   │   │   ├── koala.png
    │   │   │   ├── lemur.png
    │   │   │   ├── man.png
    │   │   │   ├── pig.png
    │   │   │   ├── tiger.png
    │   │   │   ├── whale.png
    │   │   │   ├── woman.png
    │   │   │   └── zebra.png
    │   │   └── index.js
    │   ├── Boss
    │   │   └── index.js
    │   ├── Chat
    │   │   └── index.js
    │   ├── DashBoard
    │   │   └── index.js
    │   ├── Genius
    │   │   └── index.js
    │   ├── Logo
    │   │   ├── index.js
    │   │   ├── job.png
    │   │   └── logo.css
    │   ├── Msg
    │   │   └── index.js
    │   ├── NavFooter
    │   │   ├── img
    │   │   │   ├── boss-active.png
    │   │   │   ├── boss.png
    │   │   │   ├── job-active.png
    │   │   │   ├── job.png
    │   │   │   ├── msg-active.png
    │   │   │   ├── msg.png
    │   │   │   ├── user-active.png
    │   │   │   └── user.png
    │   │   └── index.js
    │   ├── UserCard
    │   │   ├── img
    │   │   │   ├── boy.png
    │   │   │   ├── bull.png
    │   │   │   ├── chick.png
    │   │   │   ├── crab.png
    │   │   │   ├── girl.png
    │   │   │   ├── hedgehog.png
    │   │   │   ├── hippo.png
    │   │   │   ├── koala.png
    │   │   │   ├── lemur.png
    │   │   │   ├── man.png
    │   │   │   ├── pig.png
    │   │   │   ├── tiger.png
    │   │   │   ├── whale.png
    │   │   │   ├── woman.png
    │   │   │   └── zebra.png
    │   │   └── index.js
    │   └── UserCenter
    │   │   └── index.js
    ├── config
    │   ├── README.md
    │   └── index.js
    ├── constants
    │   └── index.js
    ├── containers
    │   ├── BossInfo
    │   │   └── index.js
    │   ├── GeniusInfo
    │   │   └── index.js
    │   ├── Login
    │   │   └── index.js
    │   ├── Register
    │   │   └── index.js
    │   └── Root.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reduers
    │   ├── chat.js
    │   ├── chatUser.js
    │   ├── index.js
    │   └── user.js
    ├── routers
    │   └── index.js
    ├── store
    │   ├── configureStore.dev.js
    │   ├── configureStore.js
    │   └── configureStore.prod.js
    └── utils
    │   ├── README.md
    │   ├── getChatId.js
    │   └── getDirectPath.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | node_modules/
 5 | 
 6 | # testing
 7 | coverage/
 8 | 
 9 | # production
10 | build/
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | boss
  2 | ---
  3 | > `React`全家桶+`express`+`sock.io`+`mongodb`开发招聘应用
  4 | 
  5 | 技术栈
  6 | ---
  7 | 
  8 | - `React16`
  9 | - `redux` 管理状态
 10 | - `react-router4` 路由
 11 | - `antd-mobile` 蚂蚁金服UI组件库
 12 | - `express` 构建服务
 13 | - `mongodb` 存储数据
 14 | - `socket.io` 
 15 | 
 16 | Usage
 17 | ---
 18 | 
 19 | > 启动mongodDB服务,[环境搭建](docs/MongodDB-env.md)
 20 | 
 21 | ```bash
 22 | npm install
 23 | 
 24 | #启动程序
 25 | npm start
 26 | 
 27 | #开启服务
 28 | npm run server
 29 | ```
 30 | 
 31 | 项目分支
 32 | ---
 33 | > 项目的各个部分功能分解
 34 | 
 35 | ```bash
 36 | # 使用方法 
 37 | # 如:git clone -b login-register https://github.com/poetries/boss.git
 38 | 
 39 | git clone -b [分支名] https://github.com/poetries/boss.git
 40 | ```
 41 | 
 42 | - [登录和注册分支](https://github.com/poetries/boss/tree/login-register)
 43 | - [boss信息和牛人信息分支](https://github.com/poetries/boss/tree/bossinfo-geniusinfo)
 44 | - [Boss、牛人列表及个人中心分支](https://github.com/poetries/boss/tree/boss-genius-usercenter)
 45 | 
 46 | 
 47 | 项目结构
 48 | ---
 49 | 
 50 | <pre>
 51 | ├── config                   // react开发环境配置
 52 | ├── docs                     // 项目开发文档
 53 | ├── mock                     // 项目开发中的mock数据
 54 | ├── package.json             // 项目配置文件
 55 | ├── server                   // express服务
 56 | │   ├── server.js            // express服务启动入口
 57 | │   ├── model.js             // 用户model
 58 | │   ├── user.js              // 用户信息接口
 59 | ├── script                   // webpack配置
 60 | │   ├── build.js             // 打包相关
 61 | │   ├── start.js             // 本地开发
 62 | │   ├── test.js              // 测试
 63 | ├── public                   // 打包后的静态资源
 64 | ├── src                      // 生产目录
 65 | │   ├── actions              // redux action相关操作
 66 | │   │    └── chatuser.js     // 用户列表
 67 | │   │    └── index.js        // user、chatuser入口
 68 | │   │    └── user.js         // 用户信息
 69 | │   ├── components           // 展示组件
 70 | │   │    └── Authroute       // 授权路由组件，判断用户登录信息  
 71 | │   │    └── AvatarSelector  // 头像选择组件  
 72 | │   │    └── Boss            // Boss组件 
 73 | │   │    └── Genius          // 牛人组件  
 74 | │   │    └── Chat            // 聊天组件  
 75 | │   │    └── DashBoard       // 信息管理面板  
 76 | │   │    └── Logo            // Logo组件  
 77 | │   │    └── Msg             // 消息组件  
 78 | │   │    └── FooterNav       // 底部导航组件  
 79 | │   │    └── UserCenter      // 用户中心组件 
 80 | │   │    └── UserCard        // 用户信息组件  
 81 | │   ├── config               // 配置文件 
 82 | │   │    └── index.js        // axios全局拦截配置
 83 | │   └── constants            // actionType常量
 84 | │   └── container            // 容器组件
 85 | │   │    └── BossInfo        // Boss信息完善页 
 86 | │   │    └── GeniusInfo      // 牛人信息完善页
 87 | │   │    └── Login           // 登录页    
 88 | │   │    └── Register        // 注册页  
 89 | │   │    └── Root.js         // 页面入口配置    
 90 | │   └── reducers             // 处理action的逻辑
 91 | │   │    └── chatuser.js     // 获取用户列表 
 92 | │   │    └── index.js        // reducer入口
 93 | │   │    └── user.js         // 处理user信息action的reducer
 94 | │   └── routers              // 配置路由
 95 | │   └── store                // redux store仓库
 96 | │   │    └── configureStore.dev.js     // 开发中的store配置 
 97 | │   │    └── configureStore.js         // store入口判断
 98 | │   │    └── configureStore.prod.js    // 生产环境入口 
 99 | │   └── index.css                      // 全局样式
100 | │   └── utils                          // 工具函数
101 | │   │    └── getDirectPath.js          // 根据用户信息,返回跳转地址
102 | │   └── App.js               // 主页面
103 | │   └── App.css              // 主页面样式
104 | │   └── index.html           // 项目入口页面
105 | │   └── index.js             // Webpack 预编译入口
106 | |__
107 | </pre>
108 | 
109 | 
110 | 
111 | 拓展阅读
112 | ---
113 | 
114 | - [React 技术栈系列教程-阮一峰](http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html)
115 | - [awesome-react](https://github.com/enaqx/awesome-react)
116 | - [redux中文文档](http://www.redux.org.cn/)
117 | - [React在线编辑器](https://codesandbox.io)
118 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 |   if (fs.existsSync(dotenvFile)) {
34 |     require('dotenv').config({
35 |       path: dotenvFile,
36 |     });
37 |   }
38 | });
39 | 
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 |   .split(path.delimiter)
52 |   .filter(folder => folder && !path.isAbsolute(folder))
53 |   .map(folder => path.resolve(appDirectory, folder))
54 |   .join(path.delimiter);
55 | 
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 | 
60 | function getClientEnvironment(publicUrl) {
61 |   const raw = Object.keys(process.env)
62 |     .filter(key => REACT_APP.test(key))
63 |     .reduce(
64 |       (env, key) => {
65 |         env[key] = process.env[key];
66 |         return env;
67 |       },
68 |       {
69 |         // Useful for determining whether we’re running in production mode.
70 |         // Most importantly, it switches React into the correct mode.
71 |         NODE_ENV: process.env.NODE_ENV || 'development',
72 |         // Useful for resolving the correct path to static assets in `public`.
73 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
74 |         // This should only be used as an escape hatch. Normally you would put
75 |         // images into the `src` and `import` them in code to get their paths.
76 |         PUBLIC_URL: publicUrl,
77 |       }
78 |     );
79 |   // Stringify all values so we can feed into Webpack DefinePlugin
80 |   const stringified = {
81 |     'process.env': Object.keys(raw).reduce((env, key) => {
82 |       env[key] = JSON.stringify(raw[key]);
83 |       return env;
84 |     }, {}),
85 |   };
86 | 
87 |   return { raw, stringified };
88 | }
89 | 
90 | module.exports = getClientEnvironment;
91 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 
18 | // In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
19 | // We don't polyfill it in the browser--this is user's responsibility.
20 | if (process.env.NODE_ENV === 'test') {
21 |   require('raf').polyfill(global);
22 | }
23 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  8 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  9 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 10 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 11 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 12 | const getClientEnvironment = require('./env');
 13 | const paths = require('./paths');
 14 | 
 15 | // Webpack uses `publicPath` to determine where the app is being served from.
 16 | // In development, we always serve from the root. This makes config easier.
 17 | const publicPath = '/';
 18 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 19 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 20 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 21 | const publicUrl = '';
 22 | // Get environment variables to inject into our app.
 23 | const env = getClientEnvironment(publicUrl);
 24 | 
 25 | // This is the development configuration.
 26 | // It is focused on developer experience and fast rebuilds.
 27 | // The production configuration is different and lives in a separate file.
 28 | module.exports = {
 29 |   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 30 |   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
 31 |   devtool: 'cheap-module-source-map',
 32 |   // These are the "entry points" to our application.
 33 |   // This means they will be the "root" imports that are included in JS bundle.
 34 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 35 |   entry: [
 36 |     // We ship a few polyfills by default:
 37 |     require.resolve('./polyfills'),
 38 |     // Include an alternative client for WebpackDevServer. A client's job is to
 39 |     // connect to WebpackDevServer by a socket and get notified about changes.
 40 |     // When you save a file, the client will either apply hot updates (in case
 41 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 42 |     // make a syntax error, this client will display a syntax error overlay.
 43 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 44 |     // to bring better experience for Create React App users. You can replace
 45 |     // the line below with these two lines if you prefer the stock client:
 46 |     // require.resolve('webpack-dev-server/client') + '?/',
 47 |     // require.resolve('webpack/hot/dev-server'),
 48 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 49 |     // Finally, this is your app's code:
 50 |     paths.appIndexJs,
 51 |     // We include the app code last so that if there is a runtime error during
 52 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 53 |     // changing JS code would still trigger a refresh.
 54 |   ],
 55 |   output: {
 56 |     // Add /* filename */ comments to generated require()s in the output.
 57 |     pathinfo: true,
 58 |     // This does not produce a real file. It's just the virtual path that is
 59 |     // served by WebpackDevServer in development. This is the JS bundle
 60 |     // containing code from all our entry points, and the Webpack runtime.
 61 |     filename: 'static/js/bundle.js',
 62 |     // There are also additional JS chunk files if you use code splitting.
 63 |     chunkFilename: 'static/js/[name].chunk.js',
 64 |     // This is the URL that app is served from. We use "/" in development.
 65 |     publicPath: publicPath,
 66 |     // Point sourcemap entries to original disk location (format as URL on Windows)
 67 |     devtoolModuleFilenameTemplate: info =>
 68 |       path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
 69 |   },
 70 |   resolve: {
 71 |     // This allows you to set a fallback for where Webpack should look for modules.
 72 |     // We placed these paths second because we want `node_modules` to "win"
 73 |     // if there are any conflicts. This matches Node resolution mechanism.
 74 |     // https://github.com/facebookincubator/create-react-app/issues/253
 75 |     modules: ['node_modules', paths.appNodeModules].concat(
 76 |       // It is guaranteed to exist because we tweak it in `env.js`
 77 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 78 |     ),
 79 |     // These are the reasonable defaults supported by the Node ecosystem.
 80 |     // We also include JSX as a common component filename extension to support
 81 |     // some tools, although we do not recommend using it, see:
 82 |     // https://github.com/facebookincubator/create-react-app/issues/290
 83 |     // `web` extension prefixes have been added for better support
 84 |     // for React Native Web.
 85 |     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
 86 |     alias: {
 87 |       
 88 |       // Support React Native Web
 89 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 90 |       'react-native': 'react-native-web',
 91 |       '@': path.resolve('src')
 92 |     },
 93 |     plugins: [
 94 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 95 |       // This often causes confusion because we only process files within src/ with babel.
 96 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
 97 |       // please link the files into your node_modules/ and let module-resolution kick in.
 98 |       // Make sure your source files are compiled, as they will not be processed in any way.
 99 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
100 |     ],
101 |   },
102 |   module: {
103 |     strictExportPresence: true,
104 |     rules: [
105 |       // TODO: Disable require.ensure as it's not a standard language feature.
106 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
107 |       // { parser: { requireEnsure: false } },
108 | 
109 |       // First, run the linter.
110 |       // It's important to do this before Babel processes the JS.
111 |       {
112 |         test: /\.(js|jsx|mjs)$/,
113 |         enforce: 'pre',
114 |         use: [
115 |           {
116 |             options: {
117 |               formatter: eslintFormatter,
118 |               eslintPath: require.resolve('eslint'),
119 |               
120 |             },
121 |             loader: require.resolve('eslint-loader'),
122 |           },
123 |         ],
124 |         include: paths.appSrc,
125 |       },
126 |       {
127 |         // "oneOf" will traverse all following loaders until one will
128 |         // match the requirements. When no loader matches it will fall
129 |         // back to the "file" loader at the end of the loader list.
130 |         oneOf: [
131 |           // "url" loader works like "file" loader except that it embeds assets
132 |           // smaller than specified limit in bytes as data URLs to avoid requests.
133 |           // A missing `test` is equivalent to a match.
134 |           {
135 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
136 |             loader: require.resolve('url-loader'),
137 |             options: {
138 |               limit: 10000,
139 |               name: 'static/media/[name].[hash:8].[ext]',
140 |             },
141 |           },
142 |           // Process JS with Babel.
143 |           {
144 |             test: /\.(js|jsx|mjs)$/,
145 |             include: paths.appSrc,
146 |             loader: require.resolve('babel-loader'),
147 |             options: {
148 |               
149 |               // This is a feature of `babel-loader` for webpack (not Babel itself).
150 |               // It enables caching results in ./node_modules/.cache/babel-loader/
151 |               // directory for faster rebuilds.
152 |               cacheDirectory: true,
153 |             },
154 |           },
155 |           // "postcss" loader applies autoprefixer to our CSS.
156 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
157 |           // "style" loader turns CSS into JS modules that inject <style> tags.
158 |           // In production, we use a plugin to extract that CSS to a file, but
159 |           // in development "style" loader enables hot editing of CSS.
160 |           {
161 |             test: /\.css$/,
162 |             use: [
163 |               require.resolve('style-loader'),
164 |               {
165 |                 loader: require.resolve('css-loader'),
166 |                 options: {
167 |                   importLoaders: 1,
168 |                 },
169 |               },
170 |               {
171 |                 loader: require.resolve('postcss-loader'),
172 |                 options: {
173 |                   // Necessary for external CSS imports to work
174 |                   // https://github.com/facebookincubator/create-react-app/issues/2677
175 |                   ident: 'postcss',
176 |                   plugins: () => [
177 |                     require('postcss-flexbugs-fixes'),
178 |                     autoprefixer({
179 |                       browsers: [
180 |                         '>1%',
181 |                         'last 4 versions',
182 |                         'Firefox ESR',
183 |                         'not ie < 9', // React doesn't support IE8 anyway
184 |                       ],
185 |                       flexbox: 'no-2009',
186 |                     }),
187 |                   ],
188 |                 },
189 |               },
190 |             ],
191 |           },
192 |           // "file" loader makes sure those assets get served by WebpackDevServer.
193 |           // When you `import` an asset, you get its (virtual) filename.
194 |           // In production, they would get copied to the `build` folder.
195 |           // This loader doesn't use a "test" so it will catch all modules
196 |           // that fall through the other loaders.
197 |           {
198 |             // Exclude `js` files to keep "css" loader working as it injects
199 |             // it's runtime that would otherwise processed through "file" loader.
200 |             // Also exclude `html` and `json` extensions so they get processed
201 |             // by webpacks internal loaders.
202 |             exclude: [/\.js$/, /\.html$/, /\.json$/],
203 |             loader: require.resolve('file-loader'),
204 |             options: {
205 |               name: 'static/media/[name].[hash:8].[ext]',
206 |             },
207 |           },
208 |         ],
209 |       },
210 |       // ** STOP ** Are you adding a new loader?
211 |       // Make sure to add the new loader(s) before the "file" loader.
212 |     ],
213 |   },
214 |   plugins: [
215 |     // Makes some environment variables available in index.html.
216 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
217 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
218 |     // In development, this will be an empty string.
219 |     new InterpolateHtmlPlugin(env.raw),
220 |     // Generates an `index.html` file with the <script> injected.
221 |     new HtmlWebpackPlugin({
222 |       inject: true,
223 |       template: paths.appHtml,
224 |     }),
225 |     // Add module names to factory functions so they appear in browser profiler.
226 |     new webpack.NamedModulesPlugin(),
227 |     // Makes some environment variables available to the JS code, for example:
228 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
229 |     new webpack.DefinePlugin(env.stringified),
230 |     // This is necessary to emit hot updates (currently CSS only):
231 |     new webpack.HotModuleReplacementPlugin(),
232 |     // Watcher doesn't work well if you mistype casing in a path so we use
233 |     // a plugin that prints an error when you attempt to do this.
234 |     // See https://github.com/facebookincubator/create-react-app/issues/240
235 |     new CaseSensitivePathsPlugin(),
236 |     // If you require a missing module and then `npm install` it, you still have
237 |     // to restart the development server for Webpack to discover it. This plugin
238 |     // makes the discovery automatic so you don't have to restart.
239 |     // See https://github.com/facebookincubator/create-react-app/issues/186
240 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
241 |     // Moment.js is an extremely popular library that bundles large locale files
242 |     // by default due to how Webpack interprets its code. This is a practical
243 |     // solution that requires the user to opt into importing specific locales.
244 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
245 |     // You can remove this if you don't use Moment.js:
246 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
247 |   ],
248 |   // Some libraries import Node modules but don't use them in the browser.
249 |   // Tell Webpack to provide empty mocks for them so importing them works.
250 |   node: {
251 |     dgram: 'empty',
252 |     fs: 'empty',
253 |     net: 'empty',
254 |     tls: 'empty',
255 |     child_process: 'empty',
256 |   },
257 |   // Turn off performance hints during development because we don't do any
258 |   // splitting or minification in interest of speed. These warnings become
259 |   // cumbersome.
260 |   performance: {
261 |     hints: false,
262 |   },
263 | };
264 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  8 | const ManifestPlugin = require('webpack-manifest-plugin');
  9 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 10 | const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 11 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 12 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 13 | const paths = require('./paths');
 14 | const getClientEnvironment = require('./env');
 15 | 
 16 | // Webpack uses `publicPath` to determine where the app is being served from.
 17 | // It requires a trailing slash, or the file assets will get an incorrect path.
 18 | const publicPath = paths.servedPath;
 19 | // Some apps do not use client-side routing with pushState.
 20 | // For these, "homepage" can be set to "." to enable relative asset paths.
 21 | const shouldUseRelativeAssetPaths = publicPath === './';
 22 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 23 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 24 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 25 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 26 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 27 | const publicUrl = publicPath.slice(0, -1);
 28 | // Get environment variables to inject into our app.
 29 | const env = getClientEnvironment(publicUrl);
 30 | 
 31 | // Assert this just to be safe.
 32 | // Development builds of React are slow and not intended for production.
 33 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 34 |   throw new Error('Production builds must have NODE_ENV=production.');
 35 | }
 36 | 
 37 | // Note: defined here because it will be used more than once.
 38 | const cssFilename = 'static/css/[name].[contenthash:8].css';
 39 | 
 40 | // ExtractTextPlugin expects the build output to be flat.
 41 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 42 | // However, our output is structured with css, js and media folders.
 43 | // To have this structure working with relative paths, we have to use custom options.
 44 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 45 |   ? // Making sure that the publicPath goes back to to build folder.
 46 |     { publicPath: Array(cssFilename.split('/').length).join('../') }
 47 |   : {};
 48 | 
 49 | // This is the production configuration.
 50 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 51 | // The development configuration is different and lives in a separate file.
 52 | module.exports = {
 53 |   // Don't attempt to continue if there are any errors.
 54 |   bail: true,
 55 |   // We generate sourcemaps in production. This is slow but gives good results.
 56 |   // You can exclude the *.map files from the build during deployment.
 57 |   devtool: shouldUseSourceMap ? 'source-map' : false,
 58 |   // In production, we only want to load the polyfills and the app code.
 59 |   entry: [require.resolve('./polyfills'), paths.appIndexJs],
 60 |   output: {
 61 |     // The build folder.
 62 |     path: paths.appBuild,
 63 |     // Generated JS file names (with nested folders).
 64 |     // There will be one main bundle, and one file per asynchronous chunk.
 65 |     // We don't currently advertise code splitting but Webpack supports it.
 66 |     filename: 'static/js/[name].[chunkhash:8].js',
 67 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 68 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 69 |     publicPath: publicPath,
 70 |     // Point sourcemap entries to original disk location (format as URL on Windows)
 71 |     devtoolModuleFilenameTemplate: info =>
 72 |       path
 73 |         .relative(paths.appSrc, info.absoluteResourcePath)
 74 |         .replace(/\\/g, '/'),
 75 |   },
 76 |   resolve: {
 77 |     // This allows you to set a fallback for where Webpack should look for modules.
 78 |     // We placed these paths second because we want `node_modules` to "win"
 79 |     // if there are any conflicts. This matches Node resolution mechanism.
 80 |     // https://github.com/facebookincubator/create-react-app/issues/253
 81 |     modules: ['node_modules', paths.appNodeModules].concat(
 82 |       // It is guaranteed to exist because we tweak it in `env.js`
 83 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 84 |     ),
 85 |     // These are the reasonable defaults supported by the Node ecosystem.
 86 |     // We also include JSX as a common component filename extension to support
 87 |     // some tools, although we do not recommend using it, see:
 88 |     // https://github.com/facebookincubator/create-react-app/issues/290
 89 |     // `web` extension prefixes have been added for better support
 90 |     // for React Native Web.
 91 |     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
 92 |     alias: {
 93 |       
 94 |       // Support React Native Web
 95 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 96 |       'react-native': 'react-native-web',
 97 |       '@': path.resolve('src')
 98 |     },
 99 |     plugins: [
100 |       // Prevents users from importing files from outside of src/ (or node_modules/).
101 |       // This often causes confusion because we only process files within src/ with babel.
102 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
103 |       // please link the files into your node_modules/ and let module-resolution kick in.
104 |       // Make sure your source files are compiled, as they will not be processed in any way.
105 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
106 |     ],
107 |   },
108 |   module: {
109 |     strictExportPresence: true,
110 |     rules: [
111 |       // TODO: Disable require.ensure as it's not a standard language feature.
112 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
113 |       // { parser: { requireEnsure: false } },
114 | 
115 |       // First, run the linter.
116 |       // It's important to do this before Babel processes the JS.
117 |       {
118 |         test: /\.(js|jsx|mjs)$/,
119 |         enforce: 'pre',
120 |         use: [
121 |           {
122 |             options: {
123 |               formatter: eslintFormatter,
124 |               eslintPath: require.resolve('eslint'),
125 |               
126 |             },
127 |             loader: require.resolve('eslint-loader'),
128 |           },
129 |         ],
130 |         include: paths.appSrc,
131 |       },
132 |       {
133 |         // "oneOf" will traverse all following loaders until one will
134 |         // match the requirements. When no loader matches it will fall
135 |         // back to the "file" loader at the end of the loader list.
136 |         oneOf: [
137 |           // "url" loader works just like "file" loader but it also embeds
138 |           // assets smaller than specified size as data URLs to avoid requests.
139 |           {
140 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
141 |             loader: require.resolve('url-loader'),
142 |             options: {
143 |               limit: 10000,
144 |               name: 'static/media/[name].[hash:8].[ext]',
145 |             },
146 |           },
147 |           // Process JS with Babel.
148 |           {
149 |             test: /\.(js|jsx|mjs)$/,
150 |             include: paths.appSrc,
151 |             loader: require.resolve('babel-loader'),
152 |             options: {
153 |               
154 |               compact: true,
155 |             },
156 |           },
157 |           // The notation here is somewhat confusing.
158 |           // "postcss" loader applies autoprefixer to our CSS.
159 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
160 |           // "style" loader normally turns CSS into JS modules injecting <style>,
161 |           // but unlike in development configuration, we do something different.
162 |           // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
163 |           // (second argument), then grabs the result CSS and puts it into a
164 |           // separate file in our build process. This way we actually ship
165 |           // a single CSS file in production instead of JS code injecting <style>
166 |           // tags. If you use code splitting, however, any async bundles will still
167 |           // use the "style" loader inside the async code so CSS from them won't be
168 |           // in the main CSS file.
169 |           {
170 |             test: /\.css$/,
171 |             loader: ExtractTextPlugin.extract(
172 |               Object.assign(
173 |                 {
174 |                   fallback: {
175 |                     loader: require.resolve('style-loader'),
176 |                     options: {
177 |                       hmr: false,
178 |                     },
179 |                   },
180 |                   use: [
181 |                     {
182 |                       loader: require.resolve('css-loader'),
183 |                       options: {
184 |                         importLoaders: 1,
185 |                         minimize: true,
186 |                         sourceMap: shouldUseSourceMap,
187 |                       },
188 |                     },
189 |                     {
190 |                       loader: require.resolve('postcss-loader'),
191 |                       options: {
192 |                         // Necessary for external CSS imports to work
193 |                         // https://github.com/facebookincubator/create-react-app/issues/2677
194 |                         ident: 'postcss',
195 |                         plugins: () => [
196 |                           require('postcss-flexbugs-fixes'),
197 |                           autoprefixer({
198 |                             browsers: [
199 |                               '>1%',
200 |                               'last 4 versions',
201 |                               'Firefox ESR',
202 |                               'not ie < 9', // React doesn't support IE8 anyway
203 |                             ],
204 |                             flexbox: 'no-2009',
205 |                           }),
206 |                         ],
207 |                       },
208 |                     },
209 |                   ],
210 |                 },
211 |                 extractTextPluginOptions
212 |               )
213 |             ),
214 |             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
215 |           },
216 |           // "file" loader makes sure assets end up in the `build` folder.
217 |           // When you `import` an asset, you get its filename.
218 |           // This loader doesn't use a "test" so it will catch all modules
219 |           // that fall through the other loaders.
220 |           {
221 |             loader: require.resolve('file-loader'),
222 |             // Exclude `js` files to keep "css" loader working as it injects
223 |             // it's runtime that would otherwise processed through "file" loader.
224 |             // Also exclude `html` and `json` extensions so they get processed
225 |             // by webpacks internal loaders.
226 |             exclude: [/\.js$/, /\.html$/, /\.json$/],
227 |             options: {
228 |               name: 'static/media/[name].[hash:8].[ext]',
229 |             },
230 |           },
231 |           // ** STOP ** Are you adding a new loader?
232 |           // Make sure to add the new loader(s) before the "file" loader.
233 |         ],
234 |       },
235 |     ],
236 |   },
237 |   plugins: [
238 |     // Makes some environment variables available in index.html.
239 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
240 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
241 |     // In production, it will be an empty string unless you specify "homepage"
242 |     // in `package.json`, in which case it will be the pathname of that URL.
243 |     new InterpolateHtmlPlugin(env.raw),
244 |     // Generates an `index.html` file with the <script> injected.
245 |     new HtmlWebpackPlugin({
246 |       inject: true,
247 |       template: paths.appHtml,
248 |       minify: {
249 |         removeComments: true,
250 |         collapseWhitespace: true,
251 |         removeRedundantAttributes: true,
252 |         useShortDoctype: true,
253 |         removeEmptyAttributes: true,
254 |         removeStyleLinkTypeAttributes: true,
255 |         keepClosingSlash: true,
256 |         minifyJS: true,
257 |         minifyCSS: true,
258 |         minifyURLs: true,
259 |       },
260 |     }),
261 |     // Makes some environment variables available to the JS code, for example:
262 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
263 |     // It is absolutely essential that NODE_ENV was set to production here.
264 |     // Otherwise React will be compiled in the very slow development mode.
265 |     new webpack.DefinePlugin(env.stringified),
266 |     // Minify the code.
267 |     new webpack.optimize.UglifyJsPlugin({
268 |       compress: {
269 |         warnings: false,
270 |         // Disabled because of an issue with Uglify breaking seemingly valid code:
271 |         // https://github.com/facebookincubator/create-react-app/issues/2376
272 |         // Pending further investigation:
273 |         // https://github.com/mishoo/UglifyJS2/issues/2011
274 |         comparisons: false,
275 |       },
276 |       mangle: {
277 |         safari10: true,
278 |       },        
279 |       output: {
280 |         comments: false,
281 |         // Turned on because emoji and regex is not minified properly using default
282 |         // https://github.com/facebookincubator/create-react-app/issues/2488
283 |         ascii_only: true,
284 |       },
285 |       sourceMap: shouldUseSourceMap,
286 |     }),
287 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
288 |     new ExtractTextPlugin({
289 |       filename: cssFilename,
290 |     }),
291 |     // Generate a manifest file which contains a mapping of all asset filenames
292 |     // to their corresponding output file so that tools can pick it up without
293 |     // having to parse `index.html`.
294 |     new ManifestPlugin({
295 |       fileName: 'asset-manifest.json',
296 |     }),
297 |     // Generate a service worker script that will precache, and keep up to date,
298 |     // the HTML & assets that are part of the Webpack build.
299 |     new SWPrecacheWebpackPlugin({
300 |       // By default, a cache-busting query parameter is appended to requests
301 |       // used to populate the caches, to ensure the responses are fresh.
302 |       // If a URL is already hashed by Webpack, then there is no concern
303 |       // about it being stale, and the cache-busting can be skipped.
304 |       dontCacheBustUrlsMatching: /\.\w{8}\./,
305 |       filename: 'service-worker.js',
306 |       logger(message) {
307 |         if (message.indexOf('Total precache size is') === 0) {
308 |           // This message occurs for every build and is a bit too noisy.
309 |           return;
310 |         }
311 |         if (message.indexOf('Skipping static resource') === 0) {
312 |           // This message obscures real errors so we ignore it.
313 |           // https://github.com/facebookincubator/create-react-app/issues/2612
314 |           return;
315 |         }
316 |         console.log(message);
317 |       },
318 |       minify: true,
319 |       // For unknown URLs, fallback to the index page
320 |       navigateFallback: publicUrl + '/index.html',
321 |       // Ignores URLs starting from /__ (useful for Firebase):
322 |       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
323 |       navigateFallbackWhitelist: [/^(?!\/__).*/],
324 |       // Don't precache sourcemaps (they're large) and build asset manifest:
325 |       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
326 |     }),
327 |     // Moment.js is an extremely popular library that bundles large locale files
328 |     // by default due to how Webpack interprets its code. This is a practical
329 |     // solution that requires the user to opt into importing specific locales.
330 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
331 |     // You can remove this if you don't use Moment.js:
332 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
333 |   ],
334 |   // Some libraries import Node modules but don't use them in the browser.
335 |   // Tell Webpack to provide empty mocks for them so importing them works.
336 |   node: {
337 |     dgram: 'empty',
338 |     fs: 'empty',
339 |     net: 'empty',
340 |     tls: 'empty',
341 |     child_process: 'empty',
342 |   },
343 | };
344 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
  4 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
  5 | const path = require('path');
  6 | const config = require('./webpack.config.dev');
  7 | const paths = require('./paths');
  8 | 
  9 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 10 | const host = process.env.HOST || '0.0.0.0';
 11 | 
 12 | module.exports = function(proxy, allowedHost) {
 13 |   return {
 14 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
 15 |     // websites from potentially accessing local content through DNS rebinding:
 16 |     // https://github.com/webpack/webpack-dev-server/issues/887
 17 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
 18 |     // However, it made several existing use cases such as development in cloud
 19 |     // environment or subdomains in development significantly more complicated:
 20 |     // https://github.com/facebookincubator/create-react-app/issues/2271
 21 |     // https://github.com/facebookincubator/create-react-app/issues/2233
 22 |     // While we're investigating better solutions, for now we will take a
 23 |     // compromise. Since our WDS configuration only serves files in the `public`
 24 |     // folder we won't consider accessing them a vulnerability. However, if you
 25 |     // use the `proxy` feature, it gets more dangerous because it can expose
 26 |     // remote code execution vulnerabilities in backends like Django and Rails.
 27 |     // So we will disable the host check normally, but enable it if you have
 28 |     // specified the `proxy` setting. Finally, we let you override it if you
 29 |     // really know what you're doing with a special environment variable.
 30 |     disableHostCheck:
 31 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
 32 |     // Enable gzip compression of generated files.
 33 |     compress: true,
 34 |     // Silence WebpackDevServer's own logs since they're generally not useful.
 35 |     // It will still show compile warnings and errors with this setting.
 36 |     clientLogLevel: 'none',
 37 |     // By default WebpackDevServer serves physical files from current directory
 38 |     // in addition to all the virtual build products that it serves from memory.
 39 |     // This is confusing because those files won’t automatically be available in
 40 |     // production build folder unless we copy them. However, copying the whole
 41 |     // project directory is dangerous because we may expose sensitive files.
 42 |     // Instead, we establish a convention that only files in `public` directory
 43 |     // get served. Our build script will copy `public` into the `build` folder.
 44 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 45 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 46 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 47 |     // Note that we only recommend to use `public` folder as an escape hatch
 48 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
 49 |     // for some reason broken when imported through Webpack. If you just want to
 50 |     // use an image, put it in `src` and `import` it from JavaScript instead.
 51 |     contentBase: paths.appPublic,
 52 |     // By default files from `contentBase` will not trigger a page reload.
 53 |     watchContentBase: true,
 54 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
 55 |     // for the WebpackDevServer client so it can learn when the files were
 56 |     // updated. The WebpackDevServer client is included as an entry point
 57 |     // in the Webpack development configuration. Note that only changes
 58 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
 59 |     hot: true,
 60 |     // It is important to tell WebpackDevServer to use the same "root" path
 61 |     // as we specified in the config. In development, we always serve from /.
 62 |     publicPath: config.output.publicPath,
 63 |     // WebpackDevServer is noisy by default so we emit custom message instead
 64 |     // by listening to the compiler events with `compiler.plugin` calls above.
 65 |     quiet: true,
 66 |     // Reportedly, this avoids CPU overload on some systems.
 67 |     // https://github.com/facebookincubator/create-react-app/issues/293
 68 |     // src/node_modules is not ignored to support absolute imports
 69 |     // https://github.com/facebookincubator/create-react-app/issues/1065
 70 |     watchOptions: {
 71 |       ignored: new RegExp(
 72 |         `^(?!${path
 73 |           .normalize(paths.appSrc + '/')
 74 |           .replace(/[\\]+/g, '\\\\')}).+[\\\\/]node_modules[\\\\/]`,
 75 |         'g'
 76 |       ),
 77 |     },
 78 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
 79 |     https: protocol === 'https',
 80 |     host: host,
 81 |     overlay: false,
 82 |     historyApiFallback: {
 83 |       // Paths with dots should still use the history fallback.
 84 |       // See https://github.com/facebookincubator/create-react-app/issues/387.
 85 |       disableDotRule: true,
 86 |     },
 87 |     public: allowedHost,
 88 |     proxy,
 89 |     before(app) {
 90 |       // This lets us open files from the runtime error overlay.
 91 |       app.use(errorOverlayMiddleware());
 92 |       // This service worker file is effectively a 'no-op' that will reset any
 93 |       // previous service worker registered for the same host:port combination.
 94 |       // We do this in development to avoid hitting the production cache if
 95 |       // it used the same host and port.
 96 |       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
 97 |       app.use(noopServiceWorkerMiddleware());
 98 |     },
 99 |   };
100 | };
101 | 


--------------------------------------------------------------------------------
/docs/MongodDB-env.md:
--------------------------------------------------------------------------------
  1 | mongodb简介
  2 | ---
  3 | 
  4 | - `MongoDB `旨在为WEB应用提供可扩展的高性能数据存储解决方案
  5 | - `MongoDB` 将数据存储为一个文档，数据结构由键值(`key=>value`)对组成。`MongoDB` 文档类似于 `JSON` 对象。字段值可以包含其他文档，数组及文档数组
  6 | 
  7 | ![](http://www.runoob.com/wp-content/uploads/2013/10/crud-annotated-document.png)
  8 | 
  9 | **主要特点**
 10 | 
 11 | - 高可扩展性
 12 | - 分布式存储
 13 | - 低成本
 14 | - 结构灵活
 15 | 
 16 | 
 17 | window下mongodb环境搭建
 18 | ---
 19 | 
 20 | - 下载安装包或压缩包
 21 | - 添加`db`存储和日志存储文件夹
 22 | - 添加服务、配置环境变量、启动`Mongo`
 23 | 
 24 | > 配置演示
 25 | 
 26 | - 在任意目录创建几个文件夹
 27 | 
 28 | ![image.png](http://upload-images.jianshu.io/upload_images/1480597-5831e0dfd11d0593.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 29 | ![image.png](http://upload-images.jianshu.io/upload_images/1480597-a003b9fd9732c9c3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 30 | 
 31 | 
 32 | **通过命令行启动服务**
 33 | 
 34 | > 配置环境变量
 35 | 
 36 | ```
 37 | // --dbpath指定数据存储位置
 38 | C:\Program Files\MongoDB\Server\3.4\bin\mongod --dbpath d:\mongodb\data
 39 | ```
 40 | 
 41 | ![image.png](http://upload-images.jianshu.io/upload_images/1480597-c7b26e6dfcfbbf2c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 42 | 
 43 | 
 44 | **通配置启动服务**
 45 | 
 46 | ```
 47 | # 配置d:\mongodb\etc\mongodb.conf
 48 | 
 49 | #数据库路径
 50 | dbpath=d:\mongodb\data\
 51 | 
 52 | #日志输出文件路径
 53 | logpath=d:\mongodb\logs\mongodb.log
 54 | 
 55 | #错误日志采用追加模式，配置这个选项后mongodb的日志会追加到现有的日志文件，而不是从新创建一个新文件
 56 | logappend=true
 57 | 
 58 | #启用日志文件，默认启用
 59 | journal=true
 60 | 
 61 | #这个选项可以过滤掉一些无用的日志信息，若需要调试使用请设置为false
 62 | quiet=true
 63 | 
 64 | #端口号 默认为27017
 65 | port=27017
 66 | 
 67 | #指定存储引擎（默认先不加此引擎，如果报错了，大家在加进去）
 68 | storageEngine=mmapv1
 69 | 
 70 | #http配置 开启这个服务才可以在网页中访问 端口28017
 71 | httpinterface=true
 72 | ```
 73 | 
 74 | - 启动方式 
 75 | 
 76 | ```
 77 | C:\Program Files\MongoDB\Server\3.4\bin\mongod --config d:\mongodb\data 
 78 | ```
 79 | 
 80 | ![image.png](http://upload-images.jianshu.io/upload_images/1480597-a8ee6a8c3346a04e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 81 | 
 82 | 
 83 | **更加简洁的启动方式**
 84 | > 安装到`window`的服务里面，打开Windows看一下
 85 | 
 86 | ```
 87 | C:\Program Files\MongoDB\Server\3.4\bin\mongod --config d:\mongodb\data --install --serviceName "MongoDB"
 88 | ```
 89 | 
 90 | ![image.png](http://upload-images.jianshu.io/upload_images/1480597-d4264668a126d16a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 91 | 
 92 | 
 93 | **使用MongoVue连接数据库**
 94 | 
 95 | ![image.png](http://upload-images.jianshu.io/upload_images/1480597-c95265b254748783.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 96 | 
 97 | ![image.png](http://upload-images.jianshu.io/upload_images/1480597-e829f03b6d3b27c2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 98 | 
 99 | 
100 | linux下mongodb环境搭建
101 | ---
102 | 
103 | - 下载安装包或压缩包
104 | - 添加`db`存储和日志存储文件夹
105 | - 添加服务、配置环境变量、启动`Mongo`
106 | 
107 | 
108 | - 远程登录服务器
109 | 
110 | ```
111 | ssh root@123.142.25.365
112 | ```
113 | 
114 | - 上传本地的安装包
115 | 
116 | ```
117 | // 上传文件夹，传文件不需要r
118 | scp /mongodb/... -r root@123.142.25.365:/home
119 | // 传到服务器的/home/
120 | ```
121 | 
122 | - 在指定的目录创建启动需要的文件
123 | 
124 | ```
125 | $ cd /home/
126 | $ mkdir etc logs data
127 | $ touch logs/mongodb.log etc/mongo.conf
128 | ```
129 | 
130 | ```
131 | // /home/etc/mongo.conf配置
132 | 
133 | dbpath=/home/mongodb/data
134 | logpath=/mongodb/logs/mongodb.log
135 | logappend=true
136 | journal=true
137 | quiet=true
138 | port=2701
139 | ```
140 | 
141 | - 启动服务
142 | 
143 | ```
144 | mongod -f /home/mongodb/etc/mongo.conf
145 | ```
146 | 
147 | - 创建软连接
148 | 
149 | ```
150 | ln -s /home/mongodb/bin/mongo /usr/local/bin/mongo
151 | 
152 | ln -s /home/mongodb/bin/mongod /usr/local/bin/mongod
153 | ```
154 | 
155 | 
156 | 


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | 说明文档
2 | ---


--------------------------------------------------------------------------------
/docs/snapshot/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/docs/snapshot/1.png


--------------------------------------------------------------------------------
/docs/snapshot/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/docs/snapshot/2.png


--------------------------------------------------------------------------------
/docs/snapshot/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/docs/snapshot/3.png


--------------------------------------------------------------------------------
/docs/snapshot/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/docs/snapshot/4.png


--------------------------------------------------------------------------------
/docs/snapshot/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/docs/snapshot/5.png


--------------------------------------------------------------------------------
/docs/snapshot/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/docs/snapshot/6.png


--------------------------------------------------------------------------------
/docs/snapshot/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/docs/snapshot/7.png


--------------------------------------------------------------------------------
/docs/snapshot/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/docs/snapshot/8.png


--------------------------------------------------------------------------------
/docs/snapshot/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/docs/snapshot/9.png


--------------------------------------------------------------------------------
/mock/README.md:
--------------------------------------------------------------------------------
1 | mock数据


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "react-redux-chatroom",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "dependencies": {
  6 |     "antd-mobile": "^2.0.3",
  7 |     "autoprefixer": "7.1.6",
  8 |     "axios": "^0.17.1",
  9 |     "babel-core": "6.26.0",
 10 |     "babel-eslint": "7.2.3",
 11 |     "babel-jest": "20.0.3",
 12 |     "babel-loader": "7.1.2",
 13 |     "babel-plugin-import": "^1.6.2",
 14 |     "babel-plugin-transform-decorators-legacy": "^1.3.4",
 15 |     "babel-preset-react-app": "^3.1.0",
 16 |     "babel-runtime": "6.26.0",
 17 |     "body-parser": "^1.18.2",
 18 |     "browser-cookies": "^1.1.0",
 19 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
 20 |     "chalk": "1.1.3",
 21 |     "cookie-parser": "^1.4.3",
 22 |     "css-loader": "0.28.7",
 23 |     "dotenv": "4.0.0",
 24 |     "eslint": "4.10.0",
 25 |     "eslint-config-react-app": "^2.0.1",
 26 |     "eslint-loader": "1.9.0",
 27 |     "eslint-plugin-flowtype": "2.39.1",
 28 |     "eslint-plugin-import": "2.8.0",
 29 |     "eslint-plugin-jsx-a11y": "5.1.1",
 30 |     "eslint-plugin-react": "7.4.0",
 31 |     "express": "^4.16.2",
 32 |     "extract-text-webpack-plugin": "3.0.2",
 33 |     "file-loader": "1.1.5",
 34 |     "fs-extra": "3.0.1",
 35 |     "html-webpack-plugin": "2.29.0",
 36 |     "jest": "20.0.4",
 37 |     "mongoose": "^4.13.5",
 38 |     "nodemon": "^1.12.1",
 39 |     "normalize.css": "^4.0.0",
 40 |     "object-assign": "4.1.1",
 41 |     "postcss-flexbugs-fixes": "3.2.0",
 42 |     "postcss-loader": "2.0.8",
 43 |     "promise": "8.0.1",
 44 |     "prop-types": "^15.6.0",
 45 |     "raf": "3.4.0",
 46 |     "rc-queue-anim": "^1.4.0",
 47 |     "react": "^16.1.1",
 48 |     "react-addons-pure-render-mixin": "^15.6.2",
 49 |     "react-dev-utils": "^4.2.1",
 50 |     "react-dom": "^16.1.1",
 51 |     "react-redux": "^5.0.6",
 52 |     "react-router": "^4.2.0",
 53 |     "react-router-dom": "^4.2.2",
 54 |     "react-router-redux": "^4.0.8",
 55 |     "redux": "^3.7.2",
 56 |     "redux-logger": "^3.0.6",
 57 |     "redux-thunk": "^2.2.0",
 58 |     "socket-io": "^1.0.0",
 59 |     "socket.io": "^2.0.4",
 60 |     "socket.io-client": "^2.0.4",
 61 |     "style-loader": "0.19.0",
 62 |     "sw-precache-webpack-plugin": "0.11.4",
 63 |     "url-loader": "0.6.2",
 64 |     "utility": "^1.13.1",
 65 |     "webpack": "3.8.1",
 66 |     "webpack-dev-server": "2.9.4",
 67 |     "webpack-manifest-plugin": "1.3.2",
 68 |     "whatwg-fetch": "2.0.3"
 69 |   },
 70 |   "scripts": {
 71 |     "start": "node scripts/start.js",
 72 |     "build": "node scripts/build.js",
 73 |     "test": "node scripts/test.js --env=jsdom",
 74 |     "server": "nodemon server/server.js"
 75 |   },
 76 |   "jest": {
 77 |     "collectCoverageFrom": [
 78 |       "src/**/*.{js,jsx,mjs}"
 79 |     ],
 80 |     "setupFiles": [
 81 |       "<rootDir>/config/polyfills.js"
 82 |     ],
 83 |     "testMatch": [
 84 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
 85 |       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
 86 |     ],
 87 |     "testEnvironment": "node",
 88 |     "testURL": "http://localhost",
 89 |     "transform": {
 90 |       "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
 91 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
 92 |       "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
 93 |     },
 94 |     "transformIgnorePatterns": [
 95 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
 96 |     ],
 97 |     "moduleNameMapper": {
 98 |       "^react-native$": "react-native-web"
 99 |     },
100 |     "moduleFileExtensions": [
101 |       "web.js",
102 |       "mjs",
103 |       "js",
104 |       "json",
105 |       "web.jsx",
106 |       "jsx",
107 |       "node"
108 |     ]
109 |   },
110 |   "babel": {
111 |     "presets": [
112 |       "react-app"
113 |     ],
114 |     "plugins": [
115 |       [
116 |         "import",
117 |         {
118 |           "libraryName": "antd-mobile",
119 |           "style": "'css"
120 |         }
121 |       ],
122 |       "transform-decorators-legacy"
123 |     ]
124 |   },
125 |   "eslintConfig": {
126 |     "extends": "react-app"
127 |   },
128 |   "proxy": "http://localhost:9000"
129 | }
130 | 


--------------------------------------------------------------------------------
/public/css/README.md:
--------------------------------------------------------------------------------
1 | 第三方库样式，如bootstrap.css


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/public/favicon.ico


--------------------------------------------------------------------------------
/public/fonts/README.md:
--------------------------------------------------------------------------------
1 | 字体文件


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>React App</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const path = require('path');
 18 | const chalk = require('chalk');
 19 | const fs = require('fs-extra');
 20 | const webpack = require('webpack');
 21 | const config = require('../config/webpack.config.prod');
 22 | const paths = require('../config/paths');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 25 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 26 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 27 | const printBuildError = require('react-dev-utils/printBuildError');
 28 | 
 29 | const measureFileSizesBeforeBuild =
 30 |   FileSizeReporter.measureFileSizesBeforeBuild;
 31 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 32 | const useYarn = fs.existsSync(paths.yarnLockFile);
 33 | 
 34 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 35 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 36 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // First, read the current file sizes in build directory.
 44 | // This lets us display how much they changed later.
 45 | measureFileSizesBeforeBuild(paths.appBuild)
 46 |   .then(previousFileSizes => {
 47 |     // Remove all content but keep the directory so that
 48 |     // if you're in it, you don't end up in Trash
 49 |     fs.emptyDirSync(paths.appBuild);
 50 |     // Merge with the public folder
 51 |     copyPublicFolder();
 52 |     // Start the webpack build
 53 |     return build(previousFileSizes);
 54 |   })
 55 |   .then(
 56 |     ({ stats, previousFileSizes, warnings }) => {
 57 |       if (warnings.length) {
 58 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 59 |         console.log(warnings.join('\n\n'));
 60 |         console.log(
 61 |           '\nSearch for the ' +
 62 |             chalk.underline(chalk.yellow('keywords')) +
 63 |             ' to learn more about each warning.'
 64 |         );
 65 |         console.log(
 66 |           'To ignore, add ' +
 67 |             chalk.cyan('// eslint-disable-next-line') +
 68 |             ' to the line before.\n'
 69 |         );
 70 |       } else {
 71 |         console.log(chalk.green('Compiled successfully.\n'));
 72 |       }
 73 | 
 74 |       console.log('File sizes after gzip:\n');
 75 |       printFileSizesAfterBuild(
 76 |         stats,
 77 |         previousFileSizes,
 78 |         paths.appBuild,
 79 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 80 |         WARN_AFTER_CHUNK_GZIP_SIZE
 81 |       );
 82 |       console.log();
 83 | 
 84 |       const appPackage = require(paths.appPackageJson);
 85 |       const publicUrl = paths.publicUrl;
 86 |       const publicPath = config.output.publicPath;
 87 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
 88 |       printHostingInstructions(
 89 |         appPackage,
 90 |         publicUrl,
 91 |         publicPath,
 92 |         buildFolder,
 93 |         useYarn
 94 |       );
 95 |     },
 96 |     err => {
 97 |       console.log(chalk.red('Failed to compile.\n'));
 98 |       printBuildError(err);
 99 |       process.exit(1);
100 |     }
101 |   );
102 | 
103 | // Create the production build and print the deployment instructions.
104 | function build(previousFileSizes) {
105 |   console.log('Creating an optimized production build...');
106 | 
107 |   let compiler = webpack(config);
108 |   return new Promise((resolve, reject) => {
109 |     compiler.run((err, stats) => {
110 |       if (err) {
111 |         return reject(err);
112 |       }
113 |       const messages = formatWebpackMessages(stats.toJson({}, true));
114 |       if (messages.errors.length) {
115 |         // Only keep the first error. Others are often indicative
116 |         // of the same problem, but confuse the reader with noise.
117 |         if (messages.errors.length > 1) {
118 |           messages.errors.length = 1;
119 |         }
120 |         return reject(new Error(messages.errors.join('\n\n')));
121 |       }
122 |       if (
123 |         process.env.CI &&
124 |         (typeof process.env.CI !== 'string' ||
125 |           process.env.CI.toLowerCase() !== 'false') &&
126 |         messages.warnings.length
127 |       ) {
128 |         console.log(
129 |           chalk.yellow(
130 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
131 |               'Most CI servers set it automatically.\n'
132 |           )
133 |         );
134 |         return reject(new Error(messages.warnings.join('\n\n')));
135 |       }
136 |       return resolve({
137 |         stats,
138 |         previousFileSizes,
139 |         warnings: messages.warnings,
140 |       });
141 |     });
142 |   });
143 | }
144 | 
145 | function copyPublicFolder() {
146 |   fs.copySync(paths.appPublic, paths.appBuild, {
147 |     dereference: true,
148 |     filter: file => file !== paths.appHtml,
149 |   });
150 | }
151 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'development';
 5 | process.env.NODE_ENV = 'development';
 6 | 
 7 | // Makes the script crash on unhandled rejections instead of silently
 8 | // ignoring them. In the future, promise rejections that are not handled will
 9 | // terminate the Node.js process with a non-zero exit code.
10 | process.on('unhandledRejection', err => {
11 |   throw err;
12 | });
13 | 
14 | // Ensure environment variables are read.
15 | require('../config/env');
16 | 
17 | const fs = require('fs');
18 | const chalk = require('chalk');
19 | const webpack = require('webpack');
20 | const WebpackDevServer = require('webpack-dev-server');
21 | const clearConsole = require('react-dev-utils/clearConsole');
22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
23 | const {
24 |   choosePort,
25 |   createCompiler,
26 |   prepareProxy,
27 |   prepareUrls,
28 | } = require('react-dev-utils/WebpackDevServerUtils');
29 | const openBrowser = require('react-dev-utils/openBrowser');
30 | const paths = require('../config/paths');
31 | const config = require('../config/webpack.config.dev');
32 | const createDevServerConfig = require('../config/webpackDevServer.config');
33 | 
34 | const useYarn = fs.existsSync(paths.yarnLockFile);
35 | const isInteractive = process.stdout.isTTY;
36 | 
37 | // Warn and crash if required files are missing
38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
39 |   process.exit(1);
40 | }
41 | 
42 | // Tools like Cloud9 rely on this.
43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
44 | const HOST = process.env.HOST || '0.0.0.0';
45 | 
46 | // We attempt to use the default port but if it is busy, we offer the user to
47 | // run on a different port. `detect()` Promise resolves to the next free port.
48 | choosePort(HOST, DEFAULT_PORT)
49 |   .then(port => {
50 |     if (port == null) {
51 |       // We have not found a port.
52 |       return;
53 |     }
54 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
55 |     const appName = require(paths.appPackageJson).name;
56 |     const urls = prepareUrls(protocol, HOST, port);
57 |     // Create a webpack compiler that is configured with custom messages.
58 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
59 |     // Load proxy config
60 |     const proxySetting = require(paths.appPackageJson).proxy;
61 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
62 |     // Serve webpack assets generated by the compiler over a web sever.
63 |     const serverConfig = createDevServerConfig(
64 |       proxyConfig,
65 |       urls.lanUrlForConfig
66 |     );
67 |     const devServer = new WebpackDevServer(compiler, serverConfig);
68 |     // Launch WebpackDevServer.
69 |     devServer.listen(port, HOST, err => {
70 |       if (err) {
71 |         return console.log(err);
72 |       }
73 |       if (isInteractive) {
74 |         clearConsole();
75 |       }
76 |       console.log(chalk.cyan('Starting the development server...\n'));
77 |       openBrowser(urls.localUrlForBrowser);
78 |     });
79 | 
80 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
81 |       process.on(sig, function() {
82 |         devServer.close();
83 |         process.exit();
84 |       });
85 |     });
86 |   })
87 |   .catch(err => {
88 |     if (err && err.message) {
89 |       console.log(err.message);
90 |     }
91 |     process.exit(1);
92 |   });
93 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/server/README.md:
--------------------------------------------------------------------------------
1 | server服务


--------------------------------------------------------------------------------
/server/model.js:
--------------------------------------------------------------------------------
 1 | // 连接mongo 并且使用React这个集合，没有就会新建
 2 | const mongoose = require('mongoose');
 3 | const DB_URL = 'mongodb://127.0.0.1:27017/react-findJob';
 4 | mongoose.connect(DB_URL,{useMongoClient:true});
 5 | 
 6 | mongoose.connection.on('connected',()=>{
 7 |     console.log('mongo connect success');
 8 | })
 9 | 
10 | const models = {
11 | 	user:{
12 | 		'user':{type:String, 'require':true},
13 | 		'pwd':{type:String, 'require':true},
14 | 		'type':{'type':String, 'require':true},
15 | 		//头像
16 | 		'avatar':{'type':String},
17 | 		// 个人简介或者职位简介
18 | 		'desc':{'type':String},
19 | 		// 职位名
20 | 		'title':{'type':String},
21 | 		// 如果你是boss 还有两个字段
22 | 		'company':{'type':String},
23 | 		'money':{'type':String}
24 | 	},
25 | 	// 用户聊天模型
26 | 	chat:{
27 | 		'chatid':{'type':String, require:true},
28 | 		'from':{'type':String,'require':true},
29 | 		'to':{'type':String,'require':true},
30 | 		'read':{'type':Boolean,'default':false},
31 | 		'content':{'type':String,'require':true,'default':''},
32 | 		'create_time':{'type':Number,'default':Date.now}
33 | 	}
34 | }
35 | 
36 | for(let m in models){
37 | 	mongoose.model(m, new mongoose.Schema(models[m]))
38 | }
39 | 
40 | module.exports = {
41 | 	getModel:function(name){
42 | 		return mongoose.model(name)
43 | 	}
44 | }
45 | 


--------------------------------------------------------------------------------
/server/server.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const userRouter = require('./user');
 3 | const bodyParser = require('body-parser');
 4 | const cookieParser = require('cookie-parser');
 5 | const model  = require('./model')
 6 | const Chat = model.getModel('chat')
 7 | const app = express()
 8 | 
 9 | // express和socket关联
10 | const server = require('http').Server(app)
11 | const io = require('socket.io')(server)
12 | 
13 | // io是全局的请求，socket是当前这次连接的请求
14 | io.on('connection',(socket)=>{
15 |     console.log('user login')
16 |     //监听客户端的sendmsg事件，处理传递过来的参数
17 |     socket.on('sendmsg',(data)=>{
18 |         console.log(data)
19 |         // 把data广播到全局
20 |         // io.emit('recvmsg',data)
21 | 
22 |         const {from, to, msg} = data
23 | 		const chatid = [from,to].sort().join('_')
24 | 		Chat.create({chatid,from,to,content:msg},function(err,doc){
25 | 			io.emit('recvmsg', Object.assign({},doc._doc))
26 | 		})
27 | 		// console.log(data)
28 | 		// io.emit('recvmsg',data)
29 |     })
30 | })
31 | 
32 | app.use(bodyParser.urlencoded({ extended: false }));
33 | app.use(bodyParser.json())
34 | app.use(cookieParser())
35 | 
36 | app.use('/user',userRouter)
37 | 
38 | 
39 | // app.listen(9000,()=>{
40 | //     console.log('Node app listen 9000')
41 | // })  
42 | server.listen(9000,()=>{
43 |     console.log('Node app listen 9000')
44 | }) 


--------------------------------------------------------------------------------
/server/user.js:
--------------------------------------------------------------------------------
  1 | const express = require('express');
  2 | const model  = require('./model')
  3 | const Router = express.Router();
  4 | const User = model.getModel('user')
  5 | const Chat = model.getModel('chat')
  6 | const utils = require('utility')
  7 | const _filter = {'pwd':0,'__v':0}
  8 | 
  9 | // 清除聊天信息
 10 | // Chat.remove({},(e,d)=>{
 11 | 
 12 | // })
 13 | 
 14 | Router.get('/list',(req,res)=>{
 15 | 	// User.remove({},(e,d)=>{}) 清除用户信息
 16 | 	const {type} = req.query
 17 |     User.find({type},(err,doc)=>{
 18 |         return res.json({code:0,data:doc})
 19 |     })
 20 | })
 21 | Router.get('/getmsglist',function(req,res){
 22 | 	// 从cookie中获取所有的用户信息
 23 | 	const user = req.cookies.userid
 24 | 
 25 | 	User.find({},function(e,userdoc){
 26 | 		let users = {}
 27 | 		userdoc.forEach(v=>{
 28 | 			users[v._id] = {name:v.user, avatar:v.avatar}
 29 | 		})
 30 | 		Chat.find({'$or':[{from:user},{to:user}]},function(err,doc){
 31 | 			if (!err) {
 32 | 				return res.json({code:0,msgs:doc, users:users})
 33 | 			}
 34 | 		})
 35 | 
 36 | 	})
 37 | 	// {'$or':[{from:user,to:user}]}
 38 | 
 39 | })
 40 | Router.post('/update',(req,res)=>{
 41 | 	const userid = req.cookies.userid
 42 | 	if(!userid) {
 43 | 		return json.dumps({code:1}) //dict转成str
 44 | 	}
 45 | 	const body = req.body
 46 | 	User.findByIdAndUpdate(userid,body,(err,doc)=>{
 47 | 		const data = Object.assign({},{
 48 | 			userid:doc.user,
 49 | 			type:doc.type
 50 | 		},body)
 51 | 		return res.json({code:0,data})
 52 | 	})
 53 | })
 54 | Router.post('/login', function(req,res){
 55 | 	const {user, pwd} = req.body
 56 | 	User.findOne({user,pwd:md5Pwd(pwd)},_filter,function(err,doc){
 57 | 		if (!doc) {
 58 | 			return res.json({code:1,msg:'用户名或者密码错误'})
 59 | 		}
 60 | 		res.cookie('userid', doc._id)
 61 | 		return res.json({code:0,data:doc})
 62 | 	})
 63 | })
 64 | Router.post('/register', function(req, res){
 65 | 	const {user, pwd, type} = req.body
 66 | 	User.findOne({user},function(err,doc){
 67 | 		if (doc) {
 68 | 			return res.json({code:1,msg:'用户名重复'})
 69 | 		}
 70 | 		
 71 | 		const userModel = new User({user,type,pwd:md5Pwd(pwd)})
 72 | 		userModel.save(function(e,d){
 73 | 			if (e) {
 74 | 				return res.json({code:1,msg:'后端出错了'})
 75 | 			}
 76 | 			const {user, type, _id} = d
 77 | 			res.cookie('userid', _id)
 78 | 			return res.json({code:0,data:{user, type, _id}})
 79 | 		})
 80 | 	})
 81 | })
 82 | Router.get('/info',function(req, res){
 83 | 	const {userid} = req.cookies
 84 | 	if (!userid) {
 85 | 		return res.json({code:1})
 86 | 	}
 87 | 	User.findOne({_id:userid} ,_filter , function(err,doc){
 88 | 		if (err) {
 89 | 			return res.json({code:1, msg:'后端出错了'})
 90 | 		}
 91 | 		if (doc) {
 92 | 			return res.json({code:0,data:doc})
 93 | 		}
 94 | 	})
 95 | 	// 用户有没有cookie
 96 | 	
 97 | })
 98 | 
 99 | const md5Pwd = (pwd) =>{
100 |     const salt = 'imooc_is_good_3957x8yza6!@#IUHJh~~';
101 |     console.log(utils.md5(utils.md5(pwd+salt)))
102 | 	return utils.md5(utils.md5(pwd+salt))
103 | }
104 | 
105 | 
106 | module.exports = Router


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   animation: App-logo-spin infinite 20s linear;
 7 |   height: 80px;
 8 | }
 9 | 
10 | .App-header {
11 |   background-color: #222;
12 |   height: 150px;
13 |   padding: 20px;
14 |   color: white;
15 | }
16 | 
17 | .App-title {
18 |   font-size: 1.5em;
19 | }
20 | 
21 | .App-intro {
22 |   font-size: large;
23 | }
24 | 
25 | @keyframes App-logo-spin {
26 |   from { transform: rotate(0deg); }
27 |   to { transform: rotate(360deg); }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import './App.css';
 3 | import routeMap from './routers';
 4 | 
 5 | export default class App extends Component {
 6 |   render() {
 7 |     return (
 8 |       <div className="App">
 9 |            {routeMap}
10 |       </div>
11 |     );
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/actions/chat.js:
--------------------------------------------------------------------------------
 1 | import * as ActionTypes from '../constants';
 2 | import axios from 'axios'
 3 | import io from 'socket.io-client'
 4 | const socket = io('ws://localhost:9000')
 5 | 
 6 | const msgList = (msgs,users,userid)=>{
 7 |     console.log(userid)
 8 |     return {
 9 |         type:ActionTypes.MSG_LIST,
10 |         payload:{msgs,users,userid}
11 |     }
12 | }
13 | 
14 | // 首次进来获取消息列表
15 | export const getMsgList = ()=> async (dispatch,getState)=>{
16 |     try{
17 |         const res = await axios.get('/user/getmsglist')
18 |         if (res.status === 200 && res.data.code === 0) {
19 |             console.log("========== getState ======",getState())
20 |             // 当前登录的用户的id
21 |             const userid = getState().user._id
22 |             dispatch(msgList(res.data.msgs,res.data.users,userid))
23 |         }
24 |     } catch(ex) {
25 |         console.log(ex)
26 |     }
27 | }
28 | 
29 | export const sendMsg = ({from,to,msg})=>(dispatch,getState)=>{
30 |     // 把数据发送给后端，事件名是sendmsg
31 |     socket.emit('sendmsg',{from,to,msg})
32 | }
33 | 
34 | const msgRecv = (msg,userid)=>{
35 |     return {
36 |         userid,
37 |         type:ActionTypes.MSG_RECV,
38 |         payload:msg
39 |     }
40 | }
41 | // 进到应用监听revMsg，开始接受信息
42 | // 当点击发送的时候，执行这个函数
43 | export const recvMsg = ()=>(dispatch,getState)=>{
44 |     // 接收信息
45 |     socket.on('recvmsg',(data)=>{
46 |         console.log('recvmsg',data)
47 |         console.log("========== recvMsg --- getState ======",getState())
48 |         // 当前登录的用户的id
49 |         const userid = getState().user._id
50 | 
51 |         // 把从服务接收的数据dispatch到redux中保存
52 |         dispatch(msgRecv(data,userid))
53 |     })
54 | }


--------------------------------------------------------------------------------
/src/actions/chatuser.js:
--------------------------------------------------------------------------------
 1 | import * as ActionTypes from '../constants';
 2 | import axios from 'axios'
 3 | 
 4 | export const userList = (obj) =>{
 5 |     const {pwd,...data} = obj
 6 | 	return { type:ActionTypes.USER_LIST, payload:data}
 7 | }
 8 | 
 9 | export const getUserList = (type) => async (dispatch,getState)=>{
10 | 	try {
11 |         const res = await axios.get('/user/list?type='+type)
12 |         if (res.data.code==0) {
13 |             dispatch(userList(res.data.data))
14 |         }
15 |     } catch (e) {
16 |         console.log(e);
17 |     }
18 | }
19 | 
20 | 


--------------------------------------------------------------------------------
/src/actions/index.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * 合并导出action
3 |  */
4 | 
5 | export * from './user'
6 | export * from './chatuser'
7 | export * from './chat'


--------------------------------------------------------------------------------
/src/actions/user.js:
--------------------------------------------------------------------------------
 1 | import * as ActionTypes from '@/constants';
 2 | import axios from 'axios';
 3 | 
 4 | export const errorMsg = (msg)=>{
 5 |     return { msg, type:ActionTypes.ERROR_MSG }
 6 | }
 7 | 
 8 | const authSuccess = (obj) =>{
 9 |     const {pwd,...data} = obj
10 |     return {type:ActionTypes.AUTH_SUCCESS,payload:data}
11 | }
12 | export const register =  ({user,pwd,repeatpwd,type}) => async (dispatch,getState)=>{
13 | 
14 |     if (!user || !pwd || !type) {
15 |         return dispatch(errorMsg("用户名密码必须输入"));
16 |     }
17 |     if (pwd!==repeatpwd) {
18 |         return dispatch(errorMsg("密码不一致"));
19 |     }
20 |     
21 |     try {
22 |         const res = await axios.post('/user/register',{user,pwd,type})
23 |         if (res.status==200 && res.data.code ===0) {
24 |             dispatch(authSuccess({user,pwd,type}))
25 |         } else {
26 |             dispatch(errorMsg(res.data.msg));
27 |         }
28 |     } catch (e) {
29 |         console.log(e);
30 |     }
31 | }
32 | 
33 | 
34 | export const  login = ({user,pwd}) => async (dispatch,getState)=>{
35 |     if(!user || !pwd) {
36 |         return dispatch(errorMsg("用户名密码必须输入"));
37 |     }
38 |     try {
39 |         const res = await axios.post('/user/login',{user,pwd})
40 |         if (res.status==200 && res.data.code ===0) {
41 |             dispatch(authSuccess(res.data.data))
42 |         } else {
43 |             dispatch(errorMsg(res.data.msg));
44 |         }
45 |     } catch (e) {
46 |         console.log(e);
47 |     }
48 | }
49 | 
50 | const loadDataSuccess = (data) =>{
51 |     return {type:ActionTypes.LOADDATA_SUCCESS,payload:data}
52 | }
53 | export const loadData = ()=>async (dispatch,getState) =>{
54 |     try{
55 |         const res = await axios.get('/user/info')
56 |         if (res.status === 200 && res.data.code ==0) {
57 |             dispatch(loadDataSuccess(res.data.data))
58 |         } else {
59 |             dispatch(errorMsg(res.data.msg));
60 |         }
61 |     } catch(ex) {
62 |         console.log(ex)
63 |     }
64 | }
65 | 
66 | 
67 | export const update = (data)=>async (dispatch,getState) =>{
68 |     try{
69 |         const res = await axios.post('/user/update',data)
70 |         if (res.status === 200 && res.data.code ==0) {
71 |             dispatch(authSuccess(res.data.data))
72 |         } else {
73 |             dispatch(errorMsg(res.data.msg));
74 |         }
75 |     } catch(ex) {
76 |         console.log(ex)
77 |     }
78 | }
79 | 
80 | export const logoutSubmit = ()=>{
81 | 	return { type:ActionTypes.LOGOUT }
82 | }


--------------------------------------------------------------------------------
/src/components/AuthRoute/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import axios from 'axios'
 3 | import { withRouter } from 'react-router-dom'
 4 | import { loadData } from '@/actions'
 5 | import { connect } from 'react-redux'
 6 | 
 7 | @withRouter
 8 | @connect(
 9 | 	null,
10 | 	{loadData}
11 | )
12 | class AuthRoute extends React.Component{
13 | 	componentDidMount() {
14 | 		const publicList = ['/login','/register']
15 | 		const pathname = this.props.location.pathname
16 | 		if (publicList.indexOf(pathname)>-1) {
17 | 			return null
18 | 		}
19 | 		// 获取用户信息
20 | 		axios.get('/user/info')
21 | 			.then(res=>{
22 | 				if (res.status==200) {
23 | 					if (res.data.code===0) {
24 | 						// 有登录信息的
25 | 						this.props.loadData(res.data.data)
26 | 					}else{
27 | 						this.props.history.push('/login')
28 | 					}
29 | 				}
30 | 			})
31 | 		// 是否登录
32 | 		// 现在的url地址  login是不需要跳转的
33 | 
34 | 		// 用户的type 身份是boss还是牛人
35 | 		// 用户是否完善信息（选择头像 个人简介）
36 | 	}
37 | 	render(){
38 | 		return null
39 | 	}
40 | 
41 | }
42 | export default AuthRoute


--------------------------------------------------------------------------------
/src/components/AvatarSelector/icon/boy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/AvatarSelector/icon/boy.png


--------------------------------------------------------------------------------
/src/components/AvatarSelector/icon/bull.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/AvatarSelector/icon/bull.png


--------------------------------------------------------------------------------
/src/components/AvatarSelector/icon/chick.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/AvatarSelector/icon/chick.png


--------------------------------------------------------------------------------
/src/components/AvatarSelector/icon/crab.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/AvatarSelector/icon/crab.png


--------------------------------------------------------------------------------
/src/components/AvatarSelector/icon/girl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/AvatarSelector/icon/girl.png


--------------------------------------------------------------------------------
/src/components/AvatarSelector/icon/hedgehog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/AvatarSelector/icon/hedgehog.png


--------------------------------------------------------------------------------
/src/components/AvatarSelector/icon/hippo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/AvatarSelector/icon/hippo.png


--------------------------------------------------------------------------------
/src/components/AvatarSelector/icon/koala.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/AvatarSelector/icon/koala.png


--------------------------------------------------------------------------------
/src/components/AvatarSelector/icon/lemur.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/AvatarSelector/icon/lemur.png


--------------------------------------------------------------------------------
/src/components/AvatarSelector/icon/man.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/AvatarSelector/icon/man.png


--------------------------------------------------------------------------------
/src/components/AvatarSelector/icon/pig.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/AvatarSelector/icon/pig.png


--------------------------------------------------------------------------------
/src/components/AvatarSelector/icon/tiger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/AvatarSelector/icon/tiger.png


--------------------------------------------------------------------------------
/src/components/AvatarSelector/icon/whale.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/AvatarSelector/icon/whale.png


--------------------------------------------------------------------------------
/src/components/AvatarSelector/icon/woman.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/AvatarSelector/icon/woman.png


--------------------------------------------------------------------------------
/src/components/AvatarSelector/icon/zebra.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/AvatarSelector/icon/zebra.png


--------------------------------------------------------------------------------
/src/components/AvatarSelector/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { List,Grid } from 'antd-mobile';
 3 | import PropTypes from 'prop-types';
 4 | 
 5 | class AvatarSelector extends React.Component{
 6 |     state = {
 7 |         icon:'',
 8 |         text:''
 9 |     }
10 |     render(){
11 |         const avatarList = 'boy,girl,man,woman,bull,chick,crab,hedgehog,hippo,koala,lemur,pig,tiger,whale,zebra'.split(',').map(v=> ({
12 |             icon: require(`./icon/${v}.png`),
13 |             text: v,
14 |           }));
15 |         const gridHeader = this.state.icon ?
16 |                            (<div><span>已选择头像</span><img src={this.state.icon} /></div>) : '请选择头像' ;
17 |                            
18 | 		return (
19 | 			<div>
20 | 				<List renderHeader={() => gridHeader} >
21 |                      <Grid 
22 |                         data={avatarList}
23 |                         columnNum={5}
24 |                         onClick={el=>{
25 |                             this.setState(el)
26 |                             this.props.selectAvatar(el.text)
27 |                         }}
28 |                          />
29 |                 </List>
30 | 			</div>
31 | 		)
32 | 	}
33 | }
34 | AvatarSelector.propTypes = {
35 |     selectAvatar:PropTypes.func.isRequired
36 | }
37 | export default AvatarSelector
38 | 


--------------------------------------------------------------------------------
/src/components/Boss/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import {connect} from 'react-redux'
 3 | import {getUserList} from '@/actions'
 4 | import UserCard from '@/components/UserCard'
 5 | import axios from 'axios'
 6 | 
 7 | @connect(
 8 |     state=>state.chatuser,
 9 |     {
10 |         getUserList
11 |     }
12 | )
13 | export default class Boss extends Component {
14 |     state = {
15 |         data:[]
16 |     }
17 |     componentDidMount(){
18 |         this.props.getUserList('genius')
19 | 
20 |         // 方法二，不用连接redux
21 |         axios.get('/user/list?type=genius').then(res=>{
22 |             if(res.data.code==0){
23 |                 this.setState({
24 |                     data:res.data.data
25 |                 })
26 |             }
27 |         })
28 | 
29 |     }
30 |     render() {
31 |         return (
32 |             <div>
33 |                 <UserCard userlist={this.state.data}></UserCard>
34 |             </div>
35 |         )
36 |     }
37 |     
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/Chat/index.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import {List,InputItem,NavBar,Icon, Grid} from 'antd-mobile'
  3 | import {connect} from 'react-redux'
  4 | import {getMsgList,sendMsg,recvMsg} from '@/actions'
  5 | // import io from 'socket.io-client'
  6 | // const socket = io('ws://localhost:9000')
  7 | import {getChatId} from '@/utils/getChatId'
  8 | import QueueAnim from 'rc-queue-anim';
  9 | 
 10 | @connect(
 11 |     state=>state,
 12 |     {
 13 |         getMsgList,
 14 |         sendMsg,
 15 |         recvMsg
 16 |     }
 17 | )
 18 | export default class Chat extends Component {
 19 |     state = {
 20 |         text:'',
 21 |         msg:[]
 22 |     }
 23 |     handleSubmit(val){
 24 |         // console.log(val)
 25 |         // socket.emit('sendmsg',{text:val})
 26 |         // this.setState({text:''})
 27 | 
 28 |         // ================= 连接redux
 29 | 
 30 |         // 发送信息方 获取User下的_id
 31 |         const from = this.props.user._id
 32 |         // to 发送给谁 接受信息方
 33 |         const to = this.props.match.params.user
 34 |         // 发送的用户的信息
 35 |         // const msg = this.props.msg
 36 |         const msg = this.state.text // 用户输入的信息
 37 |         // 把数据传给sendMsg 向服务器发送消息
 38 |         this.props.sendMsg({from,to,msg})
 39 |         this.setState({
 40 |             text:'',
 41 |             showEmoji:false
 42 |         })
 43 |     }
 44 |     fixCarousel(){
 45 | 		setTimeout(function(){
 46 | 			window.dispatchEvent(new Event('resize'))
 47 | 		},0)
 48 | 	}
 49 |     render() {
 50 |         const emoji = '😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😜 😝 😛 🤑 🤗 🤓 😎 😏 😒 😞 😔 😟 😕 🙁 😣 😖 😫 😩 😤 😠 😡 😶 😐 😑 😯 😦 😧 😮 😲 😵 😳 😱 😨 😰 😢 😥 😭 😓 😪 😴 🙄 🤔 😬 🤐 😷 🤒 🤕 😈 👿 👹 👺 💩 👻 💀 ☠️ 👽 👾 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾 👐 🙌 👏 🙏 👍 👎 👊 ✊ 🤘 👌 👈 👉 👆 👇 ✋  🖐 🖖 👋  💪 🖕 ✍️  💅 🖖 💄 💋 👄 👅 👂 👃 👁 👀 '
 51 |             .split(' ')
 52 |             .filter(v=>v)
 53 |             .map(v=>({text:v}))
 54 |         
 55 |         // 当前聊天的目标
 56 |         const userid = this.props.match.params.user
 57 |         const users = this.props.chat.users
 58 |         const Item = List.Item
 59 | 
 60 |         // 获取不到用户的信息，当前组件不用渲染
 61 |         if(!users[userid]) {
 62 |             return null
 63 |         }
 64 |         // 当前聊天的id
 65 |         const chatid = getChatId(userid,this.props.user._id)// 传入当前用户信息的id,redux存储的当前登录的id
 66 |         const chatmsgs = this.props.chat.chatmsg.filter(v=>v.chatid === chatid)
 67 |         return (
 68 |            <div id='chat-page'>
 69 |                <NavBar
 70 | 					mode='dark'
 71 | 					icon={<Icon type="left" />}
 72 | 					onLeftClick={()=>{
 73 | 						this.props.history.goBack()
 74 |                     }}
 75 |                     style={{position: 'fixed',width: '100%',top: 0}}
 76 | 				>
 77 |                     {/*通过userid查到User用户名*/}
 78 | 					{users[userid].name}
 79 | 				</NavBar>
 80 | 
 81 |               <QueueAnim delay={300}>     
 82 |                 {chatmsgs.map(v=>{
 83 |                     const avatar = require(`../UserCard/img/${users[v.from].avatar}.png`)
 84 |                     {/*把用户聊天信息分成两部分*/}
 85 |                     return v.from ==userid?(
 86 |                         // 对方发来的
 87 |                         <List key={v._id}>
 88 |                             <Item
 89 |                                 thumb={avatar} 
 90 |                             >{v.content}</Item>
 91 |                         </List>
 92 |                     ):(
 93 |                         // 显示我发的
 94 |                         <List key={v._id}>
 95 |                             <Item 
 96 |                                 extra={<img src={avatar} />}
 97 |                                 className='chat-me'
 98 |                             >{v.content}</Item>
 99 |                         </List>
100 |                     )
101 |                 })}
102 |                 </QueueAnim>
103 |                 <div className='stick-footer'>
104 |                     <List>
105 |                         <InputItem
106 |                             placeholder='请输入'
107 |                             value={this.state.text}
108 |                             onChange={v=>{
109 |                                 this.setState({text:v})
110 |                             }}
111 |                             extra={
112 |                                     <div>
113 |                                          <span
114 |                                               style={{marginRight:15}}
115 |                                               onClick={()=>{
116 |                                                     this.setState({
117 |                                                         showEmoji:!this.state.showEmoji
118 |                                                     })
119 |                                                     this.fixCarousel()
120 |                                                }}
121 |                                          >😔</span>
122 |                                          <span onClick={this.handleSubmit.bind(this,this.state.text)}>
123 |                                          发送
124 |                                          </span>
125 |                                     </div>
126 |                                 }
127 |                         ></InputItem>
128 |                     </List>
129 |                     {this.state.showEmoji?<Grid 
130 | 						data={emoji}
131 | 						columnNum={9}
132 | 						carouselMaxRow={4}
133 | 						isCarousel={true}
134 | 						onClick={el=>{
135 | 							this.setState({
136 | 								text:this.state.text+el.text
137 | 							})
138 | 							
139 | 						}}
140 | 					/>:null}
141 |                  </div>
142 |            </div>
143 |         )
144 |     }
145 |     componentDidMount(){
146 |         // socket.on('recvmsg',(data)=>{
147 |         //     this.setState({
148 |         //         // 合并之前的msg和输入的text，在前端展示这个列表
149 |         //         msg:[...this.state.msg,data.text]
150 |         //     })
151 |         // })
152 |         if(!this.props.chat.chatmsg.length) {
153 |             this.props.getMsgList() // 初始化的时候获取所有的用户消息列表
154 |             this.props.recvMsg() // 开始接受消息
155 |         }
156 |     }   
157 | }
158 | 


--------------------------------------------------------------------------------
/src/components/DashBoard/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import PureRenderMixin from 'react-addons-pure-render-mixin';
 3 | import {Switch, Route,Redirect} from 'react-router-dom'
 4 | import {NavBar} from 'antd-mobile'
 5 | import Boss from '@/components/Boss'
 6 | import Genius from '@/components/Genius'
 7 | import Msg from '@/components/Msg'
 8 | import UserCenter from '@/components/UserCenter'
 9 | import NavFooter from '@/components/NavFooter'
10 | import {connect} from 'react-redux'
11 | import {getMsgList,sendMsg,recvMsg} from '@/actions'
12 | import QueueAnim from 'rc-queue-anim';
13 | 
14 | @connect(
15 |     state=>state,
16 |     {
17 |         getMsgList,
18 |         recvMsg
19 |     }
20 | )
21 | export default class DashBoard extends Component {
22 |     constructor(props) {
23 |         super(props);
24 |         this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
25 |     }
26 |     render() {
27 |         // todo 有一个bug 当User没有及时加载取到值的时候，牛人列表、boss列表都显示出来
28 |         const user = this.props.user?this.props.user:'boss'
29 |         const {pathname} = this.props.location
30 |     
31 |         const navList = [
32 |             {
33 |                 path:'/boss',
34 |                 text:'牛人',
35 |                 icon:'boss',
36 |                 title:'牛人列表',
37 |                 component:Boss,
38 |                 exact:false,
39 |                 hide:user.type==='genius',
40 |             },
41 |             {
42 |                 path:'/genius',
43 |                 text:'Boss',
44 |                 icon:'job',
45 |                 title:'BOSS列表',
46 |                 component:Genius,
47 |                 exact:false,
48 |                 hide:user.type==='boss'
49 |             },
50 |             {
51 |                 path:'/msg',
52 |                 text:'消息',
53 |                 icon:'msg',
54 |                 title:'消息列表',
55 |                 exact:false,
56 |                 component:Msg
57 |             },
58 |             {
59 |                 path:'/usercenter',
60 |                 text:'我',
61 |                 icon:'boss',
62 |                 title:'个人中心',
63 |                 exact:false,
64 |                 component:UserCenter
65 |             }
66 |         ]
67 | 
68 |         const page = navList.find(v=>v.path===pathname)
69 | 
70 |         return (
71 |             <div>
72 |                 <NavBar className='fixd-header' mode='dard'>{page&&page.title}</NavBar>
73 |                 <div style={{marginTop:45}}>
74 |                 {/*让动画生效只渲染一个Route，根据当前的path决定组件*/}
75 |                     {pathname==='/'||pathname==='/dashboard'?<Redirect to='/genius' />:''}
76 |                     <QueueAnim type='scaleX'> 
77 |                         <Route 
78 |                             key={page&&page.path} 
79 |                             path={page&&page.path} 
80 |                             component={page&&page.component}
81 |                             exact={page&&page.exact} 
82 |                         />     
83 |                     </QueueAnim> 
84 |                 </div>
85 |                 <NavFooter data={navList} />
86 |             </div>
87 |         )
88 |     }
89 |     componentDidMount(){
90 |         // 进到本页面获取用户列表信息，展示未读信息
91 |         // 没有数据才去请求，避免来回切换重复添加
92 |         if(!this.props.chat.chatmsg.length) {
93 |             this.props.getMsgList() // 初始化的时候获取所有的用户消息列表
94 |             this.props.recvMsg() // 开始接受消息
95 |         }
96 |     }
97 | }
98 | 


--------------------------------------------------------------------------------
/src/components/Genius/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import axios from 'axios'
 3 | import {connect} from 'react-redux'
 4 | import {getUserList} from '@/actions'
 5 | import UserCard from '../UserCard'
 6 | 
 7 | @connect(
 8 | 	state=>state.chatuser,
 9 | 	{getUserList}
10 | )
11 | class Genius extends React.Component{
12 | 	state = {
13 |         data:[]
14 |     }
15 | 	render(){
16 | 		return <UserCard userlist={this.state.data}></UserCard>
17 | 	}
18 | 	componentDidMount() {
19 | 		this.props.getUserList('boss')
20 | 
21 | 		axios.get('/user/list?type=boss').then(res=>{
22 |             if(res.data.code==0){
23 |                 this.setState({
24 |                     data:res.data.data
25 |                 })
26 |             }
27 |         })
28 | 	}
29 | }
30 | export default Genius


--------------------------------------------------------------------------------
/src/components/Logo/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import logoImg from './job.png'
 3 | import './logo.css'
 4 | 
 5 | export default class Logo extends React.Component{
 6 | 
 7 | 	render(){
 8 | 		return (
 9 | 			<div className="logo-container">
10 | 				<img src={logoImg} alt=""/>
11 | 			</div>
12 | 		)
13 | 	}
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/Logo/job.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/Logo/job.png


--------------------------------------------------------------------------------
/src/components/Logo/logo.css:
--------------------------------------------------------------------------------
1 | .logo-container {
2 |   margin-top: 50px;
3 |   text-align: center;
4 |   margin-bottom: 20px;
5 | }
6 | 
7 | 
8 | 


--------------------------------------------------------------------------------
/src/components/Msg/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | import {connect} from 'react-redux' 
 4 | import {List,Badge} from 'antd-mobile'
 5 |  
 6 | @connect(
 7 | 	state=>state
 8 | )
 9 | class Msg extends React.Component{
10 | 	getLast(arr){
11 | 		return arr[arr.length-1]
12 | 	}
13 | 	render(){
14 | 
15 | 		const Item = List.Item
16 | 		const Brief = Item.Brief
17 | 		const userid = this.props.user._id
18 | 		const userinfo = this.props.chat.users
19 | 		// console.log(this.props)
20 | 		const msgGroup = {}
21 | 		this.props.chat.chatmsg.forEach(v=>{
22 | 			msgGroup[v.chatid] = msgGroup[v.chatid] || []
23 | 			msgGroup[v.chatid].push(v)
24 | 		})
25 | 		
26 | 		const chatList = Object.values(msgGroup).sort((a,b)=>{
27 | 			const a_last = this.getLast(a).create_time
28 | 			const b_last = this.getLast(b).create_time
29 | 			return b_last - a_last
30 | 		})
31 | 
32 | 		// console.log([3,1,2,6,5].sort(function(a,b){
33 | 		// 	return b-a
34 | 		// }))
35 | 		// console.log(Object.values({name:'imooc',age:18}))
36 | 		// 按照聊天用户分组，根据chatid
37 | 
38 | 
39 | 		// 1. eslint代码校验工具
40 | 		// 2. react16特有的错误处理机制
41 | 		// 2. react性能优化
42 | 		return (
43 | 			<div>
44 | 				
45 | 					{chatList.map(v=>{
46 | 						console.log(v)
47 | 						const lastItem = this.getLast(v)
48 | 						// console.log(9)
49 | 						const targetId = v[0].from==userid?v[0].to:v[0].from
50 | 						const unreadNum = v.filter(v=>!v.read&&v.to==userid).length
51 | 						if (!userinfo[targetId]) {
52 | 							return null
53 | 						}
54 | 						// const name = userinfo[targetId]?userinfo[targetId].name:''
55 | 						// const avatar = userinfo[targetId]?userinfo[targetId].avatar:''
56 | 						return (
57 | 							<List key={lastItem._id}>
58 | 								<Item
59 | 									extra={<Badge text={unreadNum}></Badge>}
60 | 									thumb={require(`../UserCard/img/${userinfo[targetId].avatar}.png`)}
61 | 									arrow="horizontal"
62 | 									onClick={()=>{
63 | 										this.props.history.push(`/chat/${targetId}`)
64 | 									}}
65 | 								>
66 | 									{lastItem.content}
67 | 									<Brief>{userinfo[targetId].name}</Brief>
68 | 																
69 | 								</Item>
70 | 							</List>
71 | 						)
72 | 					})}
73 | 
74 | 				
75 | 			</div>
76 | 		)
77 | 	}
78 | }
79 | export default Msg
80 | 
81 | 
82 | 
83 | 
84 | 
85 | 
86 | 
87 | 
88 | 
89 | 


--------------------------------------------------------------------------------
/src/components/NavFooter/img/boss-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/NavFooter/img/boss-active.png


--------------------------------------------------------------------------------
/src/components/NavFooter/img/boss.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/NavFooter/img/boss.png


--------------------------------------------------------------------------------
/src/components/NavFooter/img/job-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/NavFooter/img/job-active.png


--------------------------------------------------------------------------------
/src/components/NavFooter/img/job.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/NavFooter/img/job.png


--------------------------------------------------------------------------------
/src/components/NavFooter/img/msg-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/NavFooter/img/msg-active.png


--------------------------------------------------------------------------------
/src/components/NavFooter/img/msg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/NavFooter/img/msg.png


--------------------------------------------------------------------------------
/src/components/NavFooter/img/user-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/NavFooter/img/user-active.png


--------------------------------------------------------------------------------
/src/components/NavFooter/img/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/NavFooter/img/user.png


--------------------------------------------------------------------------------
/src/components/NavFooter/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | import PropTypes from 'prop-types'
 4 | import {TabBar,badge} from 'antd-mobile'
 5 | import {withRouter} from 'react-router-dom'
 6 | import {connect} from 'react-redux'
 7 | 
 8 | @withRouter
 9 | @connect(
10 | 	state=>state.chat
11 | )
12 | export default class NavFooter extends React.Component{
13 | 	static propTypes = {
14 | 		data: PropTypes.array.isRequired
15 | 	}
16 | 	render(){
17 | 		
18 | 		const navList = this.props.data.filter(v=>!v.hide)
19 | 		const {pathname} = this.props.location
20 | 		return (
21 | 			<TabBar>
22 | 				{navList.map(v=>(
23 | 					<TabBar.Item
24 | 						badge={v.path==='/msg'?this.props.unread:''}
25 | 						key={v.path}
26 | 						title={v.text}
27 | 						icon={{uri: require(`./img/${v.icon}.png`)}}
28 | 						selectedIcon={{uri: require(`./img/${v.icon}-active.png`)}}
29 | 						selected={pathname===v.path}
30 | 						onPress={()=>{
31 | 							this.props.history.push(v.path)
32 | 						}}
33 | 					>
34 | 					
35 | 					</TabBar.Item>
36 | 				))}
37 | 			</TabBar>
38 | 		)
39 | 	}
40 | }
41 | 


--------------------------------------------------------------------------------
/src/components/UserCard/img/boy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/UserCard/img/boy.png


--------------------------------------------------------------------------------
/src/components/UserCard/img/bull.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/UserCard/img/bull.png


--------------------------------------------------------------------------------
/src/components/UserCard/img/chick.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/UserCard/img/chick.png


--------------------------------------------------------------------------------
/src/components/UserCard/img/crab.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/UserCard/img/crab.png


--------------------------------------------------------------------------------
/src/components/UserCard/img/girl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/UserCard/img/girl.png


--------------------------------------------------------------------------------
/src/components/UserCard/img/hedgehog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/UserCard/img/hedgehog.png


--------------------------------------------------------------------------------
/src/components/UserCard/img/hippo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/UserCard/img/hippo.png


--------------------------------------------------------------------------------
/src/components/UserCard/img/koala.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/UserCard/img/koala.png


--------------------------------------------------------------------------------
/src/components/UserCard/img/lemur.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/UserCard/img/lemur.png


--------------------------------------------------------------------------------
/src/components/UserCard/img/man.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/UserCard/img/man.png


--------------------------------------------------------------------------------
/src/components/UserCard/img/pig.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/UserCard/img/pig.png


--------------------------------------------------------------------------------
/src/components/UserCard/img/tiger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/UserCard/img/tiger.png


--------------------------------------------------------------------------------
/src/components/UserCard/img/whale.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/UserCard/img/whale.png


--------------------------------------------------------------------------------
/src/components/UserCard/img/woman.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/UserCard/img/woman.png


--------------------------------------------------------------------------------
/src/components/UserCard/img/zebra.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/poetries/boss/d11524a3d8de3c36b1632a861a3ec91a1b51b9c5/src/components/UserCard/img/zebra.png


--------------------------------------------------------------------------------
/src/components/UserCard/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import {Card, WhiteSpace,WingBlank} from 'antd-mobile'
 4 | import {withRouter} from 'react-router-dom'
 5 | 
 6 | @withRouter
 7 | export default class UserCard extends Component {
 8 |     constructor(props){
 9 |         super(props)
10 |     }
11 |     static propTypes = {
12 | 		userlist: PropTypes.array.isRequired
13 |     }
14 |     handleClick(v){
15 |     //    this.props.history.push(`/chat/${v.user}`)
16 |     // _id user在mongodb中的唯一标识
17 |        this.props.history.push(`/chat/${v._id}`)
18 |     }
19 |     render() {
20 |         
21 |         const Header = Card.Header
22 |         const Body = Card.Body
23 |         return (
24 |                 <WingBlank>
25 |                     <WhiteSpace />    
26 |                     {
27 |                        this.props.userlist?this.props.userlist.map(v=>(
28 |                             v.avatar?(
29 |                                 <Card 
30 |                                     key={v._id} 
31 |                                     onClick={()=>this.handleClick(v)}
32 |                                     style={{zIndex:'100'}}
33 |                                 >
34 |                                     <Header
35 |                                        title={v.user}
36 |                                        thumb={require(`./img/${v.avatar}.png`)}
37 |                                        extra={<span>{v.title}</span>}
38 |                                     >
39 |                                     </Header>
40 |                                     <Body>
41 |                                         {v.type==='boss'?<div>公司:{v.company}</div>:null}
42 |                                         {v.desc.split('\n').map(d=>(
43 |                                             <div key={d}>{d}</div>
44 |                                         ))}
45 |                                        
46 |                                     </Body>
47 |                                     <Card.Footer extra= {v.type==='boss'?<div>薪资:<span style={{color:"#f03"}}>{v.money}</span></div> :null}   />
48 |                                 </Card>
49 |                             ):null
50 |                         )):'加载中...'
51 |                     }
52 |                 </WingBlank>
53 |         )
54 |     }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/components/UserCenter/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {connect} from 'react-redux'
 3 | import {Result, List,Brief,WhiteSpace,Modal} from 'antd-mobile'
 4 | import browserCookie from 'browser-cookies'
 5 | import {logoutSubmit} from '@/actions'
 6 | import {Redirect} from 'react-router-dom'
 7 | 
 8 | @connect(
 9 | 	state=>state.user,
10 | 	{logoutSubmit}
11 | )
12 | class User extends React.Component{
13 | 	constructor(props){
14 | 		super(props)
15 | 		this.logout = this.logout.bind(this)
16 | 	}
17 | 	logout(){
18 | 		const alert = Modal.alert
19 | 
20 | 		alert('注销', '确认退出登录吗???', [
21 | 		      { text: '取消', onPress: () => console.log('cancel') },
22 | 		      { text: '确认', onPress: () => {
23 | 		      	browserCookie.erase('userid')
24 | 		      	this.props.logoutSubmit()
25 | 		      }}
26 | 		    ])
27 | 	}
28 | 	render(){
29 | 		const props = this.props
30 | 		const Item = List.Item
31 | 		const Brief = Item.Brief
32 | 		if (!props.user) {
33 |       		   return null
34 |     		}
35 | 		return (
36 | 			<div>
37 | 				<Result
38 | 					img={<img src={require(`../UserCard/img/${props.avatar}.png`)} style={{width:50}} alt="" />}
39 | 					title={props.user}
40 | 					message={props.type=='boss'?props.company:null}
41 | 				/>
42 | 				
43 | 				<List renderHeader={()=>'简介'}>
44 | 					<Item
45 | 						multipleLine
46 | 					>
47 | 						{props.title}
48 | 						{props.desc.split('\n').map(v=><Brief key={v}>{v}</Brief>)}
49 | 						{props.money?<Brief>薪资:{props.money}</Brief>:null}
50 | 					</Item>
51 | 					
52 | 				</List>
53 | 				<WhiteSpace></WhiteSpace>
54 | 				<List>
55 | 					<Item onClick={this.logout} style={{zIndex:'1'}}>退出登录</Item>
56 | 				</List>
57 | 			</div>
58 | 		)
59 | 
60 | 	}
61 | }
62 | 
63 | 
64 | export default User
65 | 


--------------------------------------------------------------------------------
/src/config/README.md:
--------------------------------------------------------------------------------
1 | # About this folder
2 | 
3 | This folder holds configuration files for different environments.
4 | 


--------------------------------------------------------------------------------
/src/config/index.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import { Toast } from 'antd-mobile'
 3 | 
 4 | // 拦截请求,所有的请求发出去之前都会经过这里
 5 | axios.interceptors.request.use(function(config){
 6 | 	Toast.loading('加载中',0)
 7 | 	return config
 8 | })
 9 | 
10 | // 拦截响应
11 | axios.interceptors.response.use(function(config){
12 | 	Toast.hide()
13 | 	return config
14 | })


--------------------------------------------------------------------------------
/src/constants/index.js:
--------------------------------------------------------------------------------
 1 | export  const AUTH_SUCCESS = 'AUTH_SUCCESS';
 2 | export  const LOADDATA_SUCCESS = 'LOADDATA_SUCCESS';
 3 | export  const ERROR_MSG = 'ERROR_MSG';
 4 | export  const USER_LIST = 'USER_LIST';
 5 | export  const LOGOUT = 'LOGOUT';
 6 | 
 7 | // 获取聊天列表
 8 | export const MSG_LIST = 'MSG_LIST'
 9 | // 读信息
10 | export const MSG_RECV = 'MSG_RECV'
11 | // 标识已读
12 | export const MSG_READ = 'MSG_READ'
13 | 
14 | 


--------------------------------------------------------------------------------
/src/containers/BossInfo/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import PureRenderMixin from 'react-addons-pure-render-mixin';
 3 | import { NavBar,InputItem,TextareaItem,WhiteSpace,Button } from 'antd-mobile';
 4 | import AvatarSelector from '@/components/AvatarSelector'
 5 | import {connect} from 'react-redux'
 6 | import {Redirect} from 'react-router-dom'; 
 7 | import {update} from '@/actions'
 8 | 
 9 | 
10 | @connect(
11 |   state=>state.user,
12 |   {
13 |     update
14 |   }
15 | )
16 | export default class BossInfo extends Component {
17 |   constructor(props) {
18 |     super(props);
19 |     this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
20 |     this.handleChange = this.handleChange.bind(this);
21 |   }
22 |   state = {
23 |     title:'',
24 |     desc:'',
25 |     company:'',
26 |     money:''
27 |   }
28 |   handleChange(key,val){
29 |     this.setState({
30 |       [key]:val
31 |     })
32 |   }
33 |   render() {
34 |     const redirectTo = this.props.redirectTo
35 |     const pathname = this.props.location.pathname
36 |     return (
37 |       <div>
38 |           {redirectTo&&redirectTo!==pathname?<Redirect to={redirectTo} />:null}
39 |           <NavBar mode="dark" >BOSS信息完善</NavBar>
40 |           <WhiteSpace />
41 |           <AvatarSelector 
42 |             selectAvatar={(imgname)=>{this.setState({avatar:imgname})}}
43 |           />
44 |            <WhiteSpace />
45 |           <InputItem
46 |             onChange={v=>this.handleChange('title',v)}
47 |           >招聘职位</InputItem>
48 |           <WhiteSpace />
49 |           <InputItem
50 |             onChange={v=>this.handleChange('company',v)}
51 |           >公司名称</InputItem>
52 |           <WhiteSpace />
53 |           <InputItem
54 |             onChange={v=>this.handleChange('money',v)}
55 |           >职位薪资</InputItem>
56 |           <WhiteSpace />
57 |           <TextareaItem
58 |             title="职位描述"
59 |             placeholder="职位信息"
60 |             rows={3}
61 |             onChange={v=>this.handleChange('desc',v)}
62 |             autoHeight
63 |           />
64 |           <WhiteSpace />
65 |           <Button type='primary'
66 |             onClick={()=>this.props.update(this.state)}
67 |           >保存</Button>
68 |       </div>
69 |     )
70 |   }
71 | }


--------------------------------------------------------------------------------
/src/containers/GeniusInfo/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import PureRenderMixin from 'react-addons-pure-render-mixin';
 3 | import { NavBar,InputItem,TextareaItem,WhiteSpace,Button } from 'antd-mobile';
 4 | import AvatarSelector from '@/components/AvatarSelector'
 5 | import {connect} from 'react-redux'
 6 | import {Redirect} from 'react-router-dom'; 
 7 | import {update} from '@/actions'
 8 | 
 9 | @connect(
10 |   state=>state.user,
11 |   {
12 |     update
13 |   }
14 | )
15 | export default class GeniusInfo extends Component {
16 |   constructor(props) {
17 |     super(props);
18 |     this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
19 |     this.handleChange = this.handleChange.bind(this);
20 |   }
21 |   state = {
22 |     title:'',
23 |     desc:'',
24 |     money:''
25 |   }
26 |   handleChange(key,val){
27 |     this.setState({
28 |       [key]:val
29 |     })
30 |   }
31 |   render() {
32 |     const redirectTo = this.props.redirectTo
33 |     const pathname = this.props.location.pathname
34 |     return (
35 |       <div>
36 |           {redirectTo&&redirectTo!==pathname?<Redirect to={redirectTo} />:null}
37 |           <NavBar mode="dark" >牛人信息完善</NavBar>
38 |           <WhiteSpace />
39 |           <AvatarSelector 
40 |             selectAvatar={(imgname)=>{this.setState({avatar:imgname})}}
41 |           />
42 |            <WhiteSpace />
43 |           <InputItem
44 |             onChange={v=>this.handleChange('title',v)}
45 |           >求职岗位</InputItem>
46 |           <WhiteSpace />
47 |           <WhiteSpace />
48 |           <InputItem
49 |             onChange={v=>this.handleChange('money',v)}
50 |           >期望薪资</InputItem>
51 |           <WhiteSpace />
52 |           <TextareaItem
53 |             title="个人简介"
54 |             rows={3}
55 |             onChange={v=>this.handleChange('desc',v)}
56 |             autoHeight
57 |           />
58 |           <WhiteSpace />
59 |           <Button type='primary'
60 |             onClick={()=>this.props.update(this.state)}
61 |           >保存</Button>
62 |       </div>
63 |     )
64 |   }
65 | }


--------------------------------------------------------------------------------
/src/containers/Login/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import Logo from '@/components/Logo';
 3 | import { List, InputItem, WingBlank, WhiteSpace,Button } from 'antd-mobile';
 4 | import {login} from '@/actions'
 5 | import {connect} from 'react-redux';
 6 | import {Redirect} from 'react-router-dom'; 
 7 | 
 8 | @connect(
 9 |   state=>state.user,
10 |   {
11 |     login
12 |   }
13 | )
14 | class Login extends Component {
15 |   constructor(props) {
16 |     super(props);
17 |     this.register = this.register.bind(this);
18 |     this.handleLogin = this.handleLogin.bind(this);
19 |   }
20 |   state = {
21 |     user:'',
22 |     pwd:''
23 |   }
24 |   register(){
25 |       this.props.history.push('/register');
26 |   }
27 |   handleChange(key,val){
28 |     this.setState({   
29 |         [key]:val
30 |     })
31 |   }
32 |   handleLogin(){
33 |     this.props.login(this.state)
34 |   }
35 |   render() {
36 |     return (
37 |       <div>
38 |         {this.props.redirectTo?<Redirect to={this.props.redirectTo} />:null}
39 |         <Logo />
40 |         <h2>登录页面</h2>
41 |         <WingBlank>
42 |             <List>
43 |                {this.props.msg?<p className='error-msg'>{this.props.msg}</p>:null}
44 |                 <InputItem
45 |                   onChange={v=>this.handleChange('user',v)}
46 |                 >用户</InputItem>
47 |                 <WhiteSpace />
48 |                 <InputItem
49 |                   type='password'
50 |                   onChange={v=>this.handleChange('pwd',v)}
51 |                 >密码</InputItem>
52 |             </List>
53 |             <Button type='primary'
54 |               onClick={this.handleLogin}
55 |             >登录</Button>
56 |             <WhiteSpace />
57 |             <Button onClick={this.register} type='primary'>注册</Button>
58 |         </WingBlank>
59 |       </div>
60 |     )
61 |   }
62 | }
63 | 
64 | export default Login


--------------------------------------------------------------------------------
/src/containers/Register/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import {Redirect} from 'react-router-dom'; 
 3 | import Logo from '../../components/Logo';
 4 | import { List, InputItem, WingBlank, WhiteSpace,Button,Radio } from 'antd-mobile';
 5 | import {connect} from 'react-redux';
 6 | import {register} from '../../actions'
 7 | 
 8 | @connect(
 9 |     state=>state.user,
10 |     {
11 |         register
12 |     }
13 | )
14 | export default class Register extends Component {
15 |   constructor(props) {
16 |     super(props);
17 |     this.handleRegister = this.handleRegister.bind(this);
18 |   }
19 |   state = {
20 |       user:'',
21 |       pwd:'',
22 |       repeatpwd:'',
23 |       type:'genius'
24 |   }
25 | 
26 |   handleChange(key,val){
27 |       this.setState({   
28 |           [key]:val
29 |       })
30 |   }
31 |   handleRegister(){
32 |       this.props.register(this.state)
33 |   }
34 |   render() {
35 |     const RadioItem = Radio.RadioItem;
36 |     
37 |     return (
38 |       <div>
39 |           {this.props.redirectTo?<Redirect to={this.props.redirectTo} />:null}
40 |         <Logo />
41 |         <List>
42 |             {this.props.msg?<p className='error-msg'>{this.props.msg}</p>:null}
43 |              <InputItem
44 |                 onChange={v=>this.handleChange('user',v)}
45 |             >用户</InputItem>
46 |              <WhiteSpace />
47 |              <InputItem
48 |                 type='password'
49 |                 onChange={v=>this.handleChange('pwd',v)}
50 |              >密码</InputItem>
51 |              <WhiteSpace />
52 |              <InputItem
53 |                 type='password'
54 |                 onChange={v=>this.handleChange('repeatpwd',v)}
55 |              >确认密码</InputItem>
56 |              <WhiteSpace />
57 |              <RadioItem  checked={this.state.type === 'genius'}
58 |                 onChange={v=>this.handleChange('type','genius')}
59 |              >牛人</RadioItem>
60 |              <RadioItem  checked={this.state.type === 'boss'}
61 |                 onChange={v=>this.handleChange('type','boss')}
62 |              >BOSS</RadioItem>
63 |              <WhiteSpace />
64 |              <Button type='primary' onClick={this.handleRegister}>注册</Button>
65 |         </List>
66 |       </div>
67 |     )
68 |   }
69 | }


--------------------------------------------------------------------------------
/src/containers/Root.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react';
 2 | import { Provider } from 'react-redux';
 3 | // import routeMap from '../routers';
 4 | import App from '@/App'
 5 | 
 6 | const Root = ({ store }) => (
 7 |   <Provider store={store}>
 8 |     <App />
 9 |   </Provider>
10 | )
11 | 
12 | export default Root


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   font-family: sans-serif;
 5 | }
 6 | 
 7 | .error-msg{
 8 | 	color:#f50;
 9 | 	padding-left:10px;
10 | 	padding-top:10px;
11 | }
12 | .am-tab-bar{
13 | 	position: fixed;
14 | 	bottom: 0;
15 | 	width: 100%;
16 | 	/* z-index: 2 */
17 | }
18 | .fixd-header.am-navbar{
19 | 	position: fixed;
20 | 	top: 0;
21 | 	width: 100%;
22 | 	/* z-index: 1; */
23 | }
24 | .page-content{
25 | 	padding:45px 5px;
26 | }
27 | #chat-page{
28 | 	margin-top: 46px;
29 | }
30 | #chat-page .chat-me .am-list-extra{
31 | 	flex-basis:auto;
32 | }
33 | #chat-page .chat-me .am-list-content{
34 | 	padding-right: 15px;
35 | 	text-align: right;
36 | }
37 | #chat-page .am-grid-icon{
38 | 	display: none;
39 | }
40 | #chat-page .am-grid-text{
41 | 	margin-top: 0;
42 | }
43 | .stick-footer{
44 | 	z-index:10;
45 | 	position: fixed;
46 | 	bottom: 0;
47 | 	width:100%;
48 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import 'core-js/fn/object/assign';
 2 | import React from 'react';
 3 | import ReactDOM from 'react-dom';
 4 | import {Provider} from 'react-redux';
 5 | import Root from './containers/Root'
 6 | import configureStore from './store/configureStore';
 7 | import './config'
 8 | import 'antd-mobile/dist/antd-mobile.css';
 9 | import './index.css'
10 | 
11 | const store = configureStore();
12 | 
13 | 
14 | ReactDOM.render(<Root store={store} />, document.getElementById('root'));
15 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/reduers/chat.js:
--------------------------------------------------------------------------------
 1 | import * as ActionTypes from '../constants';
 2 | const initState = {
 3 |     chatmsg:[],// 把后端传过来的数据放到这里
 4 |     users:{},
 5 |     unread:0
 6 | }
 7 | 
 8 | export const chat = (state=initState,action)=>{
 9 |     switch(action.type) {
10 |         case ActionTypes.MSG_LIST:
11 |         // 把read是false取出来传给unread：action.payload.filter(v=>!v.read).length
12 |             // 这个是对的
13 |             // return {...state,users:action.payload.users,chatmsg:action.payload.msgs,unread:action.payload.msgs.filter(v=>!v.read&&v.to===action.payload.userid).length}
14 |             // 这个有问题 需要拿到userid才能判断 todo
15 |             return {...state,users:action.payload.users,chatmsg:action.payload.msgs,unread:action.payload.msgs.filter(v=>!v.read).length}
16 |         // case ActionTypes.MSG_READ:
17 |         case ActionTypes.MSG_RECV:
18 |             // 每次客户端发送消息到服务器，服务端返回消息 unread都需要加1
19 |             // return {...state,chatmsg:[...state.chatmsg,action.payload],unread:state.unread+1}
20 | 
21 |             // 这是对的 未读消息列表只统计别人发给我的，不统计我发出去的。上面的不能简单加1
22 |             const n = action.payload.to === action.userid?1:0
23 |             return {...state,chatmsg:[...state.chatmsg,action.payload],unread:state.unread+n}
24 |         default:
25 |             return state;
26 |     }
27 | }


--------------------------------------------------------------------------------
/src/reduers/chatUser.js:
--------------------------------------------------------------------------------
 1 | import * as ActionTypes from '../constants';
 2 | 
 3 | const initState = {
 4 | 	userlist:[]
 5 | }
 6 | 
 7 | export const chatuser = (state=initState, action) =>{
 8 | 	switch(action.type){
 9 | 		case ActionTypes.USER_LIST:
10 | 			return {...state, userlist:action.payload}
11 | 		default:
12 | 			return state
13 | 	}
14 | }


--------------------------------------------------------------------------------
/src/reduers/index.js:
--------------------------------------------------------------------------------
 1 | import {combineReducers} from 'redux';
 2 | import {user} from './user';
 3 | import {chatuser} from './chatUser';
 4 | import {chat} from './chat';
 5 | 
 6 | const reducers = {
 7 |   user,
 8 |   chatuser,
 9 |   chat
10 | }
11 | 
12 | export default combineReducers({
13 |     ...reducers
14 | })
15 | 


--------------------------------------------------------------------------------
/src/reduers/user.js:
--------------------------------------------------------------------------------
 1 | import * as ActionTypes from '../constants';
 2 | import {getDirectPath} from '../utils/getDirectPath';
 3 | 
 4 | const initState = {
 5 |     redirectTo:'',
 6 |     user:'',
 7 |     type:'',
 8 |     msg:''
 9 | }
10 | export const user = (state=initState,action)=>{
11 |     switch (action.type) {
12 |         case ActionTypes.AUTH_SUCCESS:
13 |             return {...state,redirectTo:getDirectPath(action.payload),...action.payload}
14 |         case ActionTypes.LOADDATA_SUCCESS:
15 |             return {...state,...action.payload}
16 |         case ActionTypes.ERROR_MSG:
17 |             return {...state,msg:action.msg}
18 |         case ActionTypes.LOGOUT:
19 |             return {...initState,redirectTo:'/login'}    
20 |         default:
21 |             return state;
22 |     }
23 | }
24 | 
25 | 


--------------------------------------------------------------------------------
/src/routers/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {Route,BrowserRouter as Router, Switch,Redirect} from 'react-router-dom'; //v4
 3 | import Login from '@/containers/Login';
 4 | import Register from '@/containers/Register';
 5 | import BossInfo from '@/containers/BossInfo';
 6 | import GeniusInfo from '@/containers/GeniusInfo';
 7 | import DashBoard from '@/components/DashBoard';
 8 | import AuthRoute from '@/components/AuthRoute';
 9 | import Chat from '@/components/Chat';
10 |  
11 | const routeRules = [
12 |     {
13 |       path:'/login',
14 |       component:Login,
15 |       exact:true
16 |     },
17 |     {
18 |       path:'/register',
19 |       component:Register,
20 |       exact:true
21 |     },
22 |     {
23 |       path:'/bossinfo',
24 |       component:BossInfo,
25 |       exact:true
26 |     },
27 |     {
28 |       path:'/geniusinfo',
29 |       component:GeniusInfo,
30 |       exact:true
31 |     },
32 |     {
33 |       path:'/chat/:user',
34 |       component:Chat,
35 |       exact:true
36 |     },
37 |     {
38 |       path:'',// 只要switch下没有匹配到就渲染默认路由
39 |       component:DashBoard,
40 |       exact:false
41 |     }
42 | ]
43 | 
44 | const routeMap = (
45 |     <Router>
46 |         <div>
47 |             <AuthRoute /> {/*授权路由，验证用户登录信息*/}
48 |             <Switch>
49 |                 {routeRules.map((v,index)=>(
50 |                     <Route 
51 |                         key={index} 
52 |                         path={v.path} 
53 |                         component={v.component} 
54 |                         exact={v.exact} 
55 |                     />
56 |                     ))
57 |                 }
58 |             </Switch>
59 |             
60 |         </div>
61 |     </Router>
62 | )
63 | 
64 | export default routeMap;
65 | 


--------------------------------------------------------------------------------
/src/store/configureStore.dev.js:
--------------------------------------------------------------------------------
 1 | import {createStore,applyMiddleware,compose} from 'redux';
 2 | import {createLogger } from 'redux-logger'
 3 | import { routerMiddleware } from 'react-router-redux';
 4 | import {BrowserRouter} from 'react-router-dom';
 5 | import thunk from 'redux-thunk';
 6 | import rootReducer from '../reduers';
 7 | 
 8 | const middleware = routerMiddleware(BrowserRouter)
 9 | 
10 | 
11 | const composedCreateStore = compose(
12 |     applyMiddleware(thunk,middleware,createLogger()),
13 |     // 只支持Chrome插件的方式，不引入其他代码
14 |     window.devToolsExtension && window.devToolsExtension()
15 | )(createStore);
16 | 
17 | const configureStore = (initialState={}) => composedCreateStore(rootReducer,initialState);
18 | 
19 | export default configureStore;
20 | 


--------------------------------------------------------------------------------
/src/store/configureStore.js:
--------------------------------------------------------------------------------
1 | if (process.env.NODE_ENV === 'production') {
2 |     module.exports = require('./configureStore.prod')
3 | } else {
4 |     module.exports = require('./configureStore.dev')
5 | }
6 | 


--------------------------------------------------------------------------------
/src/store/configureStore.prod.js:
--------------------------------------------------------------------------------
 1 | import {createStore,applyMiddleware,compose} from 'redux';
 2 | import {createLogger } from 'redux-logger'
 3 | import { routerMiddleware } from 'react-router-redux';
 4 | import {BrowserRouter} from 'react-router-dom';
 5 | import thunk from 'redux-thunk';
 6 | import rootReducer from '../reduers/';
 7 | 
 8 | const middleware = routerMiddleware(BrowserRouter)
 9 | 
10 | 
11 | const composedCreateStore = compose(
12 |     applyMiddleware(thunk,middleware,createLogger()),
13 | )(createStore);
14 | 
15 | const configureStore = (initialState={}) => composedCreateStore(rootReducer,initialState);
16 | 
17 | export default configureStore;
18 | 


--------------------------------------------------------------------------------
/src/utils/README.md:
--------------------------------------------------------------------------------
1 | 工具函数


--------------------------------------------------------------------------------
/src/utils/getChatId.js:
--------------------------------------------------------------------------------
1 | export const getChatId = (userId, targetId) =>{
2 | 	return [userId, targetId].sort().join('_')
3 | }


--------------------------------------------------------------------------------
/src/utils/getDirectPath.js:
--------------------------------------------------------------------------------
 1 | export const getDirectPath  = ({type,avatar})=>{
 2 |     // 根据用户信息，返回跳转地址
 3 |     // user.type  boss/genius
 4 |     // user.avatar /bossinfo /geniusinfo
 5 |     let url = (type==='boss')?'/boss':'/genius';
 6 |     if (!avatar) {
 7 |         url +='info'
 8 |     }
 9 |     return url;
10 | }


--------------------------------------------------------------------------------