├── .env ├── .gitignore ├── README.md ├── app.js ├── bin └── www ├── controllers ├── CommentController.js ├── PhotoController.js ├── ProfileController.js └── index.js ├── models ├── Comment.js ├── Photo.js └── Profile.js ├── package.json ├── public ├── assets │ └── css │ │ └── normalize.css ├── build │ ├── bundle.js │ └── bundle.map ├── favicon.ico └── images │ └── jsa-128.jpg ├── routes ├── account.js ├── api.js └── index.js ├── src ├── actions │ └── index.js ├── app.js ├── components │ ├── containers │ │ ├── DisplaycommentC.js │ │ ├── DisplaydetailC.js │ │ ├── DisplayimgC.js │ │ ├── FriendphotosC.js │ │ ├── LoginC.js │ │ ├── MessageC.js │ │ ├── MyphotosC.js │ │ ├── NavigationC.js │ │ ├── ToolbarC.js │ │ ├── UploadC.js │ │ ├── UploadingphotosC.js │ │ └── index.js │ ├── layout │ │ ├── Detail.js │ │ ├── Entry.js │ │ └── Home.js │ └── views │ │ ├── DisplaycommentV.js │ │ ├── DisplaydetailV.js │ │ ├── DisplayimgV.js │ │ ├── FriendphotosV.js │ │ ├── LoginV.js │ │ ├── MessageV.js │ │ ├── MyphotosV.js │ │ ├── NavigationV.js │ │ ├── ToolbarV.js │ │ ├── UploadV.js │ │ ├── UploadingphotosV.js │ │ └── index.js ├── constants │ └── index.js ├── reducers │ ├── accountReducer.js │ └── photoReducer.js ├── stores │ └── index.js └── utils │ └── index.js ├── views ├── error.hjs └── index.hjs └── webpack.config.js /.env: -------------------------------------------------------------------------------- 1 | DB_URL=mongodb://localhost/demo 2 | SESSION_SECRET=demo -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /.env 3 | /public/build/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-redux-materialUi-express-mongodb-demo 2 | 3 | ## 简介 4 | 5 | 这是一个图片分享的[Demo](http://182.92.122.144:8888/)，功能为 6 | * 注册，登录和注销 7 | * 上传图片，查看原图，评论图片，用户可以删除自己上传的图片 8 | 9 | 采用以下技术 10 | * [Material-UI](https://github.com/callemall/material-ui/) 11 | * [React](https://facebook.github.io/react/) 12 | * [Redux](https://github.com/reactjs/redux/) 13 | * [Express](http://expressjs.com/) 14 | * [MongoDB](https://www.mongodb.com/) 15 | * [Cloudinary](http://cloudinary.com/) 16 | 17 | Demo尽量采用Restful API 18 | 19 | 有任何问题和建议欢迎联系 20 | > nbb3210@gmail.com 21 | 22 | ## 安装 23 | 24 | 安装依赖项: 25 | ```sh 26 | npm install 27 | npm run build 28 | ``` 29 | 30 | 启动服务（默认在端口3000）: 31 | ```sh 32 | npm start 33 | ``` 34 | 35 | ## 开发过程小记 36 | 37 | 开发工具 38 | 39 | * [express应用生成器](http://www.expressjs.com.cn/starter/generator.html) 40 | 41 | 通过应用生成器工具express可以快速创建一个应用的骨架 42 | 43 | [Express入门教程：一个简单的博客](http://www.tuicool.com/articles/jueARjE) 44 | 45 | * [nodemon](https://github.com/remy/nodemon) 46 | 47 | 监听项目代码，代码修改后，服务器自动重启 48 | 49 | * [postman](https://www.getpostman.com/) 50 | 51 | 模拟HTTP请求的数据发送至服务器 52 | 53 | * git 54 | 55 | Express框架 56 | 57 | * 可以设置中间件来响应HTTP请求 58 | 59 | * 定义了路由表用于执行不同的HTTP请求动作 60 | 61 | * 可以通过向模板传递参数来动态渲染HTML页面 62 | 63 | Express中间件 64 | 65 | **中间件**是一个可访问请求对象(`req`)和响应对象(`res`)的**函数**，在Express应用的请求-响应循环里，下一个内联的中间件通常用变量`next`表示。中间件的功能包括: 66 | 67 | * 执行任何代码 68 | 69 | * 修改请求和响应对象 70 | 71 | * 终结请求-响应循环 72 | 73 | * 调用堆栈中的下一个中间件 74 | 75 | 中间件的使用过程中: 76 | 77 | * 如果当前中间件没有终结请求-响应循环，则必须调用`next()`方法将控制权交给下一个中间件。 78 | 79 | * 没有挂载路径的中间件，应用的每个请求都会执行该中间件 80 | 81 | * 中间件是按顺序执行的 82 | 83 | 服务端依赖项，前五个依赖项express应用生成器默认包含 84 | 85 | * [express](http://expressjs.com/) 86 | 87 | Fast, unopinionated, minimalist web framework for Node.js 88 | 89 | 基于Node.js 平台,快速、开放、极简的 web 开发框架 90 | 91 | * [serve-favicon](https://github.com/expressjs/serve-favicon) 92 | 93 | Node.js middleware for serving a favicon 94 | 95 | 处理图标的中间件，将图标缓存于内存中 96 | 97 | * [morgan](https://github.com/expressjs/morgan) 98 | 99 | Create a new morgan logger middleware function using the given format and options. 100 | 101 | 处理日志的中间件，在控制台输出信息，生产模式下需调整参数 102 | 103 | * [cookie-parser](https://github.com/expressjs/cookie-parser) 104 | 105 | Parse Cookie header and populate req.cookies with an object keyed by the cookie names. 106 | 107 | 解析cookie的中间件 108 | 109 | * [body-parser](https://github.com/expressjs/body-parser) 110 | 111 | Parse incoming request bodies in a middleware before your handlers, available under the `req.body` property. 112 | 113 | HTTP请求体解析的中间件 114 | 115 | * [mongoose](https://github.com/Automattic/mongoose) 116 | 117 | Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. 118 | 119 | 操作mongodb数据库 120 | 121 | * [client-sessions](https://github.com/mozilla/node-client-sessions) 122 | 123 | client-sessions is connect middleware that implements sessions in encrypted tamper-free cookies. 124 | 125 | 客户端sessions中间件，加密 126 | 127 | * [dotenv](https://github.com/motdotla/dotenv) 128 | 129 | Dotenv is a zero-dependency module that loads environment vaiables from a `.env` file into `process.env`. 130 | 131 | 管理环境变量 132 | 133 | * [bluebird](https://github.com/petkaantonov/bluebird) 134 | 135 | Bluebird is a fully featured promise library with focus on innovative features and performance. 136 | 137 | 实现回调Promise的库 138 | 139 | * [bcryptjs](https://github.com/dcodeIO/bcrypt.js) 140 | 141 | [How To Safely Store A Password](https://codahale.com/how-to-safely-store-a-password/) 142 | 143 | 用于密码加密的库 144 | 145 | 前端依赖项 146 | 147 | * [react](https://facebook.github.io/react/) 148 | 149 | React is a JavaScript library for building user interfaces. 150 | 151 | * [material-ui](http://material-ui.com/) 152 | 153 | React Components that Implement Google's Material Design. 154 | 155 | * [babel](https://github.com/babel/babel/tree/master/packages/babel) 156 | 157 | Turn ES6 code into readable vanilla ES5 with source maps 158 | 159 | * [redux](http://redux.js.org/) 160 | 161 | Redux is a predictable state container for JavaScript apps. 162 | 163 | * [superagent](https://github.com/visionmedia/superagent) 164 | 165 | SuperAgent is a small progressive client-side HTTP request library, and Node.js module with the same API, sporting many high-level HTTP client features. 166 | 167 | ajax API 168 | 169 | ajax的替代品[fetch](https://developer.mozilla.org/en/docs/Web/API/Fetch_API) 170 | 171 | * [sha1](https://github.com/pvorb/node-sha1) 172 | 173 | native js function for hashing messages with SHA-1 174 | 175 | sha1加密 176 | 177 | 云端图片存储[Cloudinary](http://cloudinary.com/) 178 | 179 | Cloudinary is the image back-end for web and mobile developers. 180 | 181 | 项目实现中，将图片存储于云端 182 | 183 | ## 开发心得 184 | 185 | react的官方文档摘要 186 | 187 | > An element describes what you want to see on the screen.Elements are what components are "made of". 188 | 189 | > Components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen. 190 | 191 | > All React components must act like pure functions with respect to their props. 192 | 193 | > Application UIs are dynamic and change over time. State allows React components to change their output over time in response to user actions, network responses, and anything else. 194 | 195 | > state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it. 196 | 197 | > A component may choose to pass its state down as props to its child components 198 | 199 | > This is commonly called a "top-down" or "unidirectional" data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree. 200 | 201 | 项目中，将组件分为三种，view，container和layout， 202 | 203 | view中大都是无状态的UI组件，参考materialUI，采用function的方式写 204 | 205 | container包裹UI组件，负责用户交互，网络响应等，将状态以属性的方式传递给UI组件 206 | 207 | layout将各种container以一定的方式进行布局 208 | 209 | 性能优化 210 | 211 | 参考[React性能优化总结](https://segmentfault.com/a/1190000007811296#articleHeader4) 212 | 213 | shallowCompare OR immutable 214 | 215 | 1. 一个WebApp是由不同的组件构成的。 216 | 2. 组件就像一个函数，输入的状态和属性，输出的是呈现在页面上的视图。 217 | 3. 属性决定了组件原本的呈现方式，状态决定了组件在用户操作，网络响应下应有的变化。 218 | 4. 设计合理的组件有利于模块化、代码复用和维护。 219 | 5. 设计无状态的组件，只负责视图。 220 | 6. 设计富状态的组件，用来处理用户的操作，网络的响应，并将状态以属性的方式传递给无状态的子组件。 221 | 7. 如果状态的信息仅仅是向下子组件传递，则该状态可以不用redux进行管理。 222 | 8. 如果状态的信息是组件之间，同级传递，则该状态建议用redux进行管理。 -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | var express = require('express') 2 | var path = require('path') 3 | var favicon = require('serve-favicon') 4 | var logger = require('morgan') 5 | var cookieParser = require('cookie-parser') 6 | var bodyParser = require('body-parser') 7 | var mongoose = require('mongoose') 8 | var sessions = require('client-sessions') 9 | require('dotenv').config() 10 | 11 | var index = require('./routes/index') 12 | var account = require('./routes/account') 13 | var api = require('./routes/api') 14 | 15 | mongoose.connect(process.env.DB_URL, function (err, res) { 16 | if (err) { 17 | console.log('DB CONNECTION FAIL') 18 | } else { 19 | console.log('DB CONNECTION SUCCESS') 20 | } 21 | }) 22 | 23 | var app = express() 24 | 25 | // view engine setup 26 | app.set('views', path.join(__dirname, 'views')) 27 | app.set('view engine', 'hjs') 28 | 29 | // uncomment after placing your favicon in /public 30 | app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))) 31 | app.use(logger('dev')) 32 | app.use(bodyParser.json()) 33 | app.use(bodyParser.urlencoded({ extended: false })) 34 | app.use(cookieParser()) 35 | app.use(sessions({ 36 | cookieName: 'session', 37 | secret: process.env.SESSION_SECRET, 38 | duration: 24 * 60 * 60 * 1000, // 1 day 39 | activeDuration: 30 * 60 * 1000 40 | })) 41 | app.use(express.static(path.join(__dirname, 'public'))) 42 | 43 | app.use('/', index) 44 | app.use('/account', account) 45 | app.use('/api', api) 46 | 47 | // catch 404 and forward to error handler 48 | app.use(function(req, res, next) { 49 | var err = new Error('Not Found') 50 | err.status = 404 51 | next(err) 52 | }) 53 | 54 | // error handler 55 | app.use(function(err, req, res, next) { 56 | // set locals, only providing error in development 57 | res.locals.message = err.message 58 | res.locals.error = req.app.get('env') === 'development' ? err : {} 59 | 60 | // render the error page 61 | res.status(err.status || 500) 62 | res.render('error') 63 | }) 64 | 65 | module.exports = app 66 | -------------------------------------------------------------------------------- /bin/www: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | /** 4 | * Module dependencies. 5 | */ 6 | 7 | var app = require('../app'); 8 | var debug = require('debug')('react-redux-materialUi-express-mongodb-demo:server'); 9 | var http = require('http'); 10 | 11 | /** 12 | * Get port from environment and store in Express. 13 | */ 14 | 15 | var port = normalizePort(process.env.PORT || '3000'); 16 | app.set('port', port); 17 | 18 | /** 19 | * Create HTTP server. 20 | */ 21 | 22 | var server = http.createServer(app); 23 | 24 | /** 25 | * Listen on provided port, on all network interfaces. 26 | */ 27 | 28 | server.listen(port); 29 | server.on('error', onError); 30 | server.on('listening', onListening); 31 | 32 | /** 33 | * Normalize a port into a number, string, or false. 34 | */ 35 | 36 | function normalizePort(val) { 37 | var port = parseInt(val, 10); 38 | 39 | if (isNaN(port)) { 40 | // named pipe 41 | return val; 42 | } 43 | 44 | if (port >= 0) { 45 | // port number 46 | return port; 47 | } 48 | 49 | return false; 50 | } 51 | 52 | /** 53 | * Event listener for HTTP server "error" event. 54 | */ 55 | 56 | function onError(error) { 57 | if (error.syscall !== 'listen') { 58 | throw error; 59 | } 60 | 61 | var bind = typeof port === 'string' 62 | ? 'Pipe ' + port 63 | : 'Port ' + port; 64 | 65 | // handle specific listen errors with friendly messages 66 | switch (error.code) { 67 | case 'EACCES': 68 | console.error(bind + ' requires elevated privileges'); 69 | process.exit(1); 70 | break; 71 | case 'EADDRINUSE': 72 | console.error(bind + ' is already in use'); 73 | process.exit(1); 74 | break; 75 | default: 76 | throw error; 77 | } 78 | } 79 | 80 | /** 81 | * Event listener for HTTP server "listening" event. 82 | */ 83 | 84 | function onListening() { 85 | var addr = server.address(); 86 | var bind = typeof addr === 'string' 87 | ? 'pipe ' + addr 88 | : 'port ' + addr.port; 89 | debug('Listening on ' + bind); 90 | } 91 | -------------------------------------------------------------------------------- /controllers/CommentController.js: -------------------------------------------------------------------------------- 1 | var Comment = require('../models/Comment') 2 | var Promise = require('bluebird') 3 | 4 | module.exports = { 5 | 6 | get: function (params) { 7 | return new Promise(function (resolve, reject) { 8 | 9 | Comment.find(params, function (err, comments) { 10 | if (err) { 11 | reject(er) 12 | return 13 | } 14 | 15 | resolve(comments) 16 | 17 | }) 18 | }) 19 | }, 20 | 21 | getById: function (id) { 22 | return new Promise(function (resolve, reject) { 23 | 24 | Comment.findById(id, function (err, comment) { 25 | if (err) { 26 | reject(er) 27 | return 28 | } 29 | 30 | resolve(comment) 31 | 32 | }) 33 | }) 34 | }, 35 | 36 | getByPhotoId: function (photo_id) { 37 | return new Promise(function (resolve, reject) { 38 | 39 | var filters = { 40 | sort: { 41 | timestamp: -1 42 | } 43 | } 44 | 45 | Comment.find({ photo_id: { $eq: photo_id } }, null, filters, function (err, comments) { 46 | if (err) { 47 | reject(er) 48 | return 49 | } 50 | 51 | resolve(comments) 52 | 53 | }) 54 | }) 55 | }, 56 | 57 | post: function (params) { 58 | return new Promise(function (resolve, reject) { 59 | 60 | Comment.create(params, function (err, comment) { 61 | if (err) { 62 | reject(er) 63 | return 64 | } 65 | 66 | resolve(comment) 67 | 68 | }) 69 | }) 70 | }, 71 | 72 | delete: function (id) { 73 | return new Promise(function (resolve, reject) { 74 | 75 | Comment.findByIdAndRemove(id, function (err, comment) { 76 | if (err) { 77 | reject(err) 78 | return 79 | } 80 | 81 | resolve(comment) 82 | }) 83 | }) 84 | } 85 | 86 | } -------------------------------------------------------------------------------- /controllers/PhotoController.js: -------------------------------------------------------------------------------- 1 | var Photo = require('../models/Photo') 2 | var Promise = require('bluebird') 3 | 4 | module.exports = { 5 | 6 | get: function (params) { 7 | return new Promise(function (resolve, reject) { 8 | 9 | var filters = { 10 | sort: { 11 | timestamp: -1 12 | } 13 | } 14 | 15 | Photo.find(params, null, filters, function (err, photos) { 16 | if (err) { 17 | reject(er) 18 | return 19 | } 20 | 21 | resolve(photos) 22 | 23 | }) 24 | }) 25 | }, 26 | 27 | getById: function (id) { 28 | return new Promise(function (resolve, reject) { 29 | 30 | Photo.findById(id, function (err, photo) { 31 | if (err) { 32 | reject(err) 33 | return 34 | } 35 | 36 | resolve(photo) 37 | 38 | }) 39 | }) 40 | }, 41 | 42 | getByProfileId: function (profile_id) { 43 | return new Promise(function (resolve, reject) { 44 | 45 | var filters = { 46 | sort: { 47 | timestamp: -1 48 | } 49 | } 50 | 51 | Photo.find({ profile_id: { $eq: profile_id } }, null, filters, function (err, photos) { 52 | if (err) { 53 | reject(er) 54 | return 55 | } 56 | 57 | resolve(photos) 58 | 59 | }) 60 | }) 61 | }, 62 | 63 | getByNotProfileId: function (profile_id) { 64 | return new Promise(function (resolve, reject) { 65 | 66 | var filters = { 67 | sort: { 68 | timestamp: -1 69 | } 70 | } 71 | 72 | Photo.find({ profile_id: { $ne: profile_id } }, null, filters, function (err, photos) { 73 | if (err) { 74 | reject(er) 75 | return 76 | } 77 | 78 | resolve(photos) 79 | 80 | }) 81 | }) 82 | }, 83 | 84 | post: function (params) { 85 | return new Promise(function (resolve, reject) { 86 | 87 | Photo.create(params, function (err, photo) { 88 | if (err) { 89 | reject(er) 90 | return 91 | } 92 | 93 | resolve(photo) 94 | 95 | }) 96 | }) 97 | }, 98 | 99 | delete: function (id) { 100 | return new Promise(function (resolve, reject) { 101 | 102 | Photo.findByIdAndRemove(id, function (err, photo) { 103 | if (err) { 104 | reject(err) 105 | return 106 | } 107 | 108 | resolve(photo) 109 | }) 110 | }) 111 | } 112 | 113 | } -------------------------------------------------------------------------------- /controllers/ProfileController.js: -------------------------------------------------------------------------------- 1 | var Profile = require('../models/Profile') 2 | var Promise = require('bluebird') 3 | var bcrypt = require('bcryptjs') 4 | 5 | module.exports = { 6 | 7 | get: function (params) { 8 | return new Promise(function (resolve, reject) { 9 | 10 | Profile.find(params, function (err, profiles) { 11 | if (err) { 12 | reject(er) 13 | return 14 | } 15 | 16 | resolve(profiles) 17 | 18 | }) 19 | }) 20 | }, 21 | 22 | getById: function (id) { 23 | return new Promise(function (resolve, reject) { 24 | 25 | Profile.findById(id, function (err, profile) { 26 | if (err) { 27 | reject(er) 28 | return 29 | } 30 | 31 | resolve(profile) 32 | 33 | }) 34 | }) 35 | }, 36 | 37 | post: function (params) { 38 | return new Promise(function (resolve, reject) { 39 | 40 | if (params['password']) { 41 | params['password'] = bcrypt.hashSync(params.password, 10) 42 | } 43 | 44 | Profile.create(params, function (err, profile) { 45 | if (err) { 46 | reject(er) 47 | return 48 | } 49 | 50 | resolve(profile) 51 | 52 | }) 53 | }) 54 | } 55 | 56 | } -------------------------------------------------------------------------------- /controllers/index.js: -------------------------------------------------------------------------------- 1 | var ProfileController = require('./ProfileController') 2 | var PhotoController = require('./PhotoController') 3 | var CommentController = require('./CommentController') 4 | 5 | module.exports = { 6 | 7 | profiles: ProfileController, 8 | photos: PhotoController, 9 | comments: CommentController 10 | 11 | } -------------------------------------------------------------------------------- /models/Comment.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose') 2 | 3 | var CommentSchema = new mongoose.Schema({ 4 | profile_id: { type: String, default: '' }, 5 | profile_name: { type: String, default: '' }, 6 | photo_id: { type: String, default: '' }, 7 | content: { type: String, default: '' }, 8 | timestamp: { type: Date, default: Date.now } 9 | }) 10 | 11 | module.exports = mongoose.model('CommentSchema', CommentSchema) -------------------------------------------------------------------------------- /models/Photo.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose') 2 | 3 | var PhotoSchema = new mongoose.Schema({ 4 | profile_id: { type: String, default: '' }, 5 | profile_name: { type: String, default: '' }, 6 | public_id: { type: String, default: '' }, 7 | name: { type: String, default: '' }, 8 | caption: { type: String, default: '' }, 9 | url: { type: String, default: '' }, 10 | src: { type: String, default: '' }, 11 | timestamp: { type: Date, default: Date.now } 12 | }) 13 | 14 | module.exports = mongoose.model('PhotoSchema', PhotoSchema) -------------------------------------------------------------------------------- /models/Profile.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose') 2 | 3 | var ProfileSchema = new mongoose.Schema({ 4 | username: { type: String, default: '' }, 5 | password: { type: String, default: '' }, 6 | timestamp: { type: Date, default: Date.now } 7 | }) 8 | 9 | module.exports = mongoose.model('ProfileSchema', ProfileSchema) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-ui-react-express-mongodb", 3 | "version": "1.0.0", 4 | "description": "a demo for material-ui, react, express and mongodb", 5 | "scripts": { 6 | "build": "NODE_ENV=production webpack", 7 | "postinstall": "npm run build", 8 | "start": "node ./bin/www" 9 | }, 10 | "dependencies": { 11 | "babel-core": "^6.23.1", 12 | "babel-loader": "^6.2.10", 13 | "babel-polyfill": "^6.23.0", 14 | "babel-preset-es2015": "^6.22.0", 15 | "babel-preset-react": "^6.23.0", 16 | "babel-preset-stage-1": "^6.22.0", 17 | "bcryptjs": "^2.4.3", 18 | "bluebird": "^3.4.7", 19 | "body-parser": "~1.15.2", 20 | "browser-sync": "^2.18.8", 21 | "classnames": "^2.2.5", 22 | "client-sessions": "^0.7.0", 23 | "cookie-parser": "~1.4.3", 24 | "css-loader": "^0.26.1", 25 | "debug": "~2.2.0", 26 | "dotenv": "^4.0.0", 27 | "express": "~4.14.0", 28 | "flexboxgrid": "^6.3.1", 29 | "gulp": "^3.9.1", 30 | "hjs": "~0.0.6", 31 | "immutable": "^3.8.1", 32 | "material-ui": "^0.17.0", 33 | "mongoose": "^4.8.2", 34 | "morgan": "~1.7.0", 35 | "react": "^15.4.2", 36 | "react-addons-perf": "^15.4.2", 37 | "react-addons-shallow-compare": "^15.4.2", 38 | "react-dom": "^15.4.2", 39 | "react-dropzone": "^3.10.0", 40 | "react-flexbox-grid": "^0.10.2", 41 | "react-image-lightbox": "^3.4.2", 42 | "react-lazyload": "^2.2.4", 43 | "react-medium-image-zoom": "^0.8.0", 44 | "react-redux": "^5.0.2", 45 | "react-router": "^3.0.2", 46 | "react-tap-event-plugin": "^2.0.1", 47 | "redux": "^3.6.0", 48 | "redux-thunk": "^2.2.0", 49 | "serve-favicon": "~2.3.0", 50 | "sha1": "^1.1.1", 51 | "style-loader": "^0.13.1", 52 | "superagent": "^3.4.1", 53 | "webpack": "^2.2.1" 54 | }, 55 | "repository": { 56 | "type": "git", 57 | "url": "https://github.com/nbb3210/react-redux-materialUi-express-mongodb-demo.git" 58 | }, 59 | "keywords": [ 60 | "Material-UI", 61 | "React", 62 | "Express", 63 | "MongoDB", 64 | "Photo", 65 | "Image" 66 | ], 67 | "author": "nbb3210", 68 | "license": "ISC" 69 | } 70 | -------------------------------------------------------------------------------- /public/assets/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Change the default font family in all browsers (opinionated). 5 | * 2. Correct the line height in all browsers. 6 | * 3. Prevent adjustments of font size after orientation changes in 7 | * IE on Windows Phone and in iOS. 8 | */ 9 | 10 | /* Document 11 | ========================================================================== */ 12 | 13 | html { 14 | font-family: sans-serif; /* 1 */ 15 | line-height: 1.15; /* 2 */ 16 | -ms-text-size-adjust: 100%; /* 3 */ 17 | -webkit-text-size-adjust: 100%; /* 3 */ 18 | } 19 | 20 | /* Sections 21 | ========================================================================== */ 22 | 23 | /** 24 | * Remove the margin in all browsers (opinionated). 25 | */ 26 | 27 | body { 28 | margin: 0; 29 | } 30 | 31 | /** 32 | * Add the correct display in IE 9-. 33 | */ 34 | 35 | article, 36 | aside, 37 | footer, 38 | header, 39 | nav, 40 | section { 41 | display: block; 42 | } 43 | 44 | /** 45 | * Correct the font size and margin on `h1` elements within `section` and 46 | * `article` contexts in Chrome, Firefox, and Safari. 47 | */ 48 | 49 | h1 { 50 | font-size: 2em; 51 | margin: 0.67em 0; 52 | } 53 | 54 | /* Grouping content 55 | ========================================================================== */ 56 | 57 | /** 58 | * Add the correct display in IE 9-. 59 | * 1. Add the correct display in IE. 60 | */ 61 | 62 | figcaption, 63 | figure, 64 | main { /* 1 */ 65 | display: block; 66 | } 67 | 68 | /** 69 | * Add the correct margin in IE 8. 70 | */ 71 | 72 | figure { 73 | margin: 1em 40px; 74 | } 75 | 76 | /** 77 | * 1. Add the correct box sizing in Firefox. 78 | * 2. Show the overflow in Edge and IE. 79 | */ 80 | 81 | hr { 82 | box-sizing: content-box; /* 1 */ 83 | height: 0; /* 1 */ 84 | overflow: visible; /* 2 */ 85 | } 86 | 87 | /** 88 | * 1. Correct the inheritance and scaling of font size in all browsers. 89 | * 2. Correct the odd `em` font sizing in all browsers. 90 | */ 91 | 92 | pre { 93 | font-family: monospace, monospace; /* 1 */ 94 | font-size: 1em; /* 2 */ 95 | } 96 | 97 | /* Text-level semantics 98 | ========================================================================== */ 99 | 100 | /** 101 | * 1. Remove the gray background on active links in IE 10. 102 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 103 | */ 104 | 105 | a { 106 | background-color: transparent; /* 1 */ 107 | -webkit-text-decoration-skip: objects; /* 2 */ 108 | } 109 | 110 | /** 111 | * Remove the outline on focused links when they are also active or hovered 112 | * in all browsers (opinionated). 113 | */ 114 | 115 | a:active, 116 | a:hover { 117 | outline-width: 0; 118 | } 119 | 120 | /** 121 | * 1. Remove the bottom border in Firefox 39-. 122 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 123 | */ 124 | 125 | abbr[title] { 126 | border-bottom: none; /* 1 */ 127 | text-decoration: underline; /* 2 */ 128 | text-decoration: underline dotted; /* 2 */ 129 | } 130 | 131 | /** 132 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 133 | */ 134 | 135 | b, 136 | strong { 137 | font-weight: inherit; 138 | } 139 | 140 | /** 141 | * Add the correct font weight in Chrome, Edge, and Safari. 142 | */ 143 | 144 | b, 145 | strong { 146 | font-weight: bolder; 147 | } 148 | 149 | /** 150 | * 1. Correct the inheritance and scaling of font size in all browsers. 151 | * 2. Correct the odd `em` font sizing in all browsers. 152 | */ 153 | 154 | code, 155 | kbd, 156 | samp { 157 | font-family: monospace, monospace; /* 1 */ 158 | font-size: 1em; /* 2 */ 159 | } 160 | 161 | /** 162 | * Add the correct font style in Android 4.3-. 163 | */ 164 | 165 | dfn { 166 | font-style: italic; 167 | } 168 | 169 | /** 170 | * Add the correct background and color in IE 9-. 171 | */ 172 | 173 | mark { 174 | background-color: #ff0; 175 | color: #000; 176 | } 177 | 178 | /** 179 | * Add the correct font size in all browsers. 180 | */ 181 | 182 | small { 183 | font-size: 80%; 184 | } 185 | 186 | /** 187 | * Prevent `sub` and `sup` elements from affecting the line height in 188 | * all browsers. 189 | */ 190 | 191 | sub, 192 | sup { 193 | font-size: 75%; 194 | line-height: 0; 195 | position: relative; 196 | vertical-align: baseline; 197 | } 198 | 199 | sub { 200 | bottom: -0.25em; 201 | } 202 | 203 | sup { 204 | top: -0.5em; 205 | } 206 | 207 | /* Embedded content 208 | ========================================================================== */ 209 | 210 | /** 211 | * Add the correct display in IE 9-. 212 | */ 213 | 214 | audio, 215 | video { 216 | display: inline-block; 217 | } 218 | 219 | /** 220 | * Add the correct display in iOS 4-7. 221 | */ 222 | 223 | audio:not([controls]) { 224 | display: none; 225 | height: 0; 226 | } 227 | 228 | /** 229 | * Remove the border on images inside links in IE 10-. 230 | */ 231 | 232 | img { 233 | border-style: none; 234 | } 235 | 236 | /** 237 | * Hide the overflow in IE. 238 | */ 239 | 240 | svg:not(:root) { 241 | overflow: hidden; 242 | } 243 | 244 | /* Forms 245 | ========================================================================== */ 246 | 247 | /** 248 | * 1. Change the font styles in all browsers (opinionated). 249 | * 2. Remove the margin in Firefox and Safari. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | font-family: sans-serif; /* 1 */ 258 | font-size: 100%; /* 1 */ 259 | line-height: 1.15; /* 1 */ 260 | margin: 0; /* 2 */ 261 | } 262 | 263 | /** 264 | * Show the overflow in IE. 265 | * 1. Show the overflow in Edge. 266 | */ 267 | 268 | button, 269 | input { /* 1 */ 270 | overflow: visible; 271 | } 272 | 273 | /** 274 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 275 | * 1. Remove the inheritance of text transform in Firefox. 276 | */ 277 | 278 | button, 279 | select { /* 1 */ 280 | text-transform: none; 281 | } 282 | 283 | /** 284 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 285 | * controls in Android 4. 286 | * 2. Correct the inability to style clickable types in iOS and Safari. 287 | */ 288 | 289 | button, 290 | html [type="button"], /* 1 */ 291 | [type="reset"], 292 | [type="submit"] { 293 | -webkit-appearance: button; /* 2 */ 294 | } 295 | 296 | /** 297 | * Remove the inner border and padding in Firefox. 298 | */ 299 | 300 | button::-moz-focus-inner, 301 | [type="button"]::-moz-focus-inner, 302 | [type="reset"]::-moz-focus-inner, 303 | [type="submit"]::-moz-focus-inner { 304 | border-style: none; 305 | padding: 0; 306 | } 307 | 308 | /** 309 | * Restore the focus styles unset by the previous rule. 310 | */ 311 | 312 | button:-moz-focusring, 313 | [type="button"]:-moz-focusring, 314 | [type="reset"]:-moz-focusring, 315 | [type="submit"]:-moz-focusring { 316 | outline: 1px dotted ButtonText; 317 | } 318 | 319 | /** 320 | * Change the border, margin, and padding in all browsers (opinionated). 321 | */ 322 | 323 | fieldset { 324 | border: 1px solid #c0c0c0; 325 | margin: 0 2px; 326 | padding: 0.35em 0.625em 0.75em; 327 | } 328 | 329 | /** 330 | * 1. Correct the text wrapping in Edge and IE. 331 | * 2. Correct the color inheritance from `fieldset` elements in IE. 332 | * 3. Remove the padding so developers are not caught out when they zero out 333 | * `fieldset` elements in all browsers. 334 | */ 335 | 336 | legend { 337 | box-sizing: border-box; /* 1 */ 338 | color: inherit; /* 2 */ 339 | display: table; /* 1 */ 340 | max-width: 100%; /* 1 */ 341 | padding: 0; /* 3 */ 342 | white-space: normal; /* 1 */ 343 | } 344 | 345 | /** 346 | * 1. Add the correct display in IE 9-. 347 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 348 | */ 349 | 350 | progress { 351 | display: inline-block; /* 1 */ 352 | vertical-align: baseline; /* 2 */ 353 | } 354 | 355 | /** 356 | * Remove the default vertical scrollbar in IE. 357 | */ 358 | 359 | textarea { 360 | overflow: auto; 361 | } 362 | 363 | /** 364 | * 1. Add the correct box sizing in IE 10-. 365 | * 2. Remove the padding in IE 10-. 366 | */ 367 | 368 | [type="checkbox"], 369 | [type="radio"] { 370 | box-sizing: border-box; /* 1 */ 371 | padding: 0; /* 2 */ 372 | } 373 | 374 | /** 375 | * Correct the cursor style of increment and decrement buttons in Chrome. 376 | */ 377 | 378 | [type="number"]::-webkit-inner-spin-button, 379 | [type="number"]::-webkit-outer-spin-button { 380 | height: auto; 381 | } 382 | 383 | /** 384 | * 1. Correct the odd appearance in Chrome and Safari. 385 | * 2. Correct the outline style in Safari. 386 | */ 387 | 388 | [type="search"] { 389 | -webkit-appearance: textfield; /* 1 */ 390 | outline-offset: -2px; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 395 | */ 396 | 397 | [type="search"]::-webkit-search-cancel-button, 398 | [type="search"]::-webkit-search-decoration { 399 | -webkit-appearance: none; 400 | } 401 | 402 | /** 403 | * 1. Correct the inability to style clickable types in iOS and Safari. 404 | * 2. Change font properties to `inherit` in Safari. 405 | */ 406 | 407 | ::-webkit-file-upload-button { 408 | -webkit-appearance: button; /* 1 */ 409 | font: inherit; /* 2 */ 410 | } 411 | 412 | /* Interactive 413 | ========================================================================== */ 414 | 415 | /* 416 | * Add the correct display in IE 9-. 417 | * 1. Add the correct display in Edge, IE, and Firefox. 418 | */ 419 | 420 | details, /* 1 */ 421 | menu { 422 | display: block; 423 | } 424 | 425 | /* 426 | * Add the correct display in all browsers. 427 | */ 428 | 429 | summary { 430 | display: list-item; 431 | } 432 | 433 | /* Scripting 434 | ========================================================================== */ 435 | 436 | /** 437 | * Add the correct display in IE 9-. 438 | */ 439 | 440 | canvas { 441 | display: inline-block; 442 | } 443 | 444 | /** 445 | * Add the correct display in IE. 446 | */ 447 | 448 | template { 449 | display: none; 450 | } 451 | 452 | /* Hidden 453 | ========================================================================== */ 454 | 455 | /** 456 | * Add the correct display in IE 10-. 457 | */ 458 | 459 | [hidden] { 460 | display: none; 461 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbb3210/react-redux-materialUi-express-mongodb-demo/b8bdf67d165439d167e281c8bf18852bad5d3231/public/favicon.ico -------------------------------------------------------------------------------- /public/images/jsa-128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nbb3210/react-redux-materialUi-express-mongodb-demo/b8bdf67d165439d167e281c8bf18852bad5d3231/public/images/jsa-128.jpg -------------------------------------------------------------------------------- /routes/account.js: -------------------------------------------------------------------------------- 1 | var express = require('express') 2 | var router = express.Router() 3 | var controllers = require('../controllers') 4 | var bcrypt = require('bcryptjs') 5 | 6 | router.get('/:action', function (req, res, next) { 7 | var action = req.params.action 8 | 9 | if (action == 'user') { 10 | if (req.session == null) { 11 | res.status(200).json({ 12 | user: null 13 | }) 14 | return 15 | } 16 | 17 | if (req.session.user == null) { 18 | res.status(200).json({ 19 | user: null 20 | }) 21 | return 22 | } 23 | 24 | controllers.profiles.getById(req.session.user) 25 | .then(function (profile) { 26 | res.status(200).json({ 27 | user: profile 28 | }) 29 | }) 30 | .catch(function (err) { 31 | res.status(500).json({ 32 | message: err 33 | }) 34 | }) 35 | } 36 | 37 | if (action == 'logout') { 38 | req.session.reset() 39 | res.status(200).json({ 40 | message: 'logout' 41 | }) 42 | } 43 | }) 44 | 45 | router.post('/:action', function (req, res, next) { 46 | var action = req.params.action 47 | 48 | if (action == 'register') { 49 | controllers.profiles.get({ username: req.body.username }) 50 | .then(function (profiles) { 51 | if (profiles.length == 0) { 52 | controllers.profiles.post(req.body) 53 | .then(function (profile) { 54 | req.session.user = profile._id 55 | res.status(200).json({ 56 | user: profile 57 | }) 58 | }) 59 | .catch(function (err) { 60 | res.status(500).json({ 61 | message: err 62 | }) 63 | }) 64 | }else{ 65 | res.status(200).json({ 66 | message:'Username has been used!' 67 | }) 68 | } 69 | }) 70 | .catch(function (err) { 71 | res.status(500).json({ 72 | message: err 73 | }) 74 | }) 75 | } 76 | 77 | if (action == 'login') { 78 | controllers.profiles.get({ username: req.body.username }) 79 | .then(function (profiles) { 80 | if (profiles.length == 0) { 81 | res.status(200).json({ 82 | message: 'Wrong Username!' 83 | }) 84 | return 85 | } 86 | 87 | var profile = profiles[0] 88 | var isPasswordCorrect = bcrypt.compareSync(req.body.password, profile.password) 89 | if (isPasswordCorrect == false) { 90 | res.status(200).json({ 91 | message: 'Wrong Password!' 92 | }) 93 | return 94 | } 95 | 96 | req.session.user = profile._id 97 | res.status(200).json({ 98 | user: profile 99 | }) 100 | }) 101 | .catch(function (err) { 102 | res.status(500).json({ 103 | message: err 104 | }) 105 | }) 106 | } 107 | 108 | }) 109 | 110 | module.exports = router -------------------------------------------------------------------------------- /routes/api.js: -------------------------------------------------------------------------------- 1 | var express = require('express') 2 | var router = express.Router() 3 | var controllers = require('../controllers') 4 | 5 | 6 | router.get('/:resource', function (req, res, next) { 7 | var resource = req.params.resource 8 | var controller = controllers[resource] 9 | if (controller == null) { 10 | res.status(400).json({ 11 | message: 'Invalid Resource' 12 | }) 13 | return 14 | } 15 | 16 | controller.get() 17 | .then(function (results) { 18 | res.status(200).json({ 19 | results: results 20 | }) 21 | }) 22 | .catch(function (err) { 23 | res.status(500).json({ 24 | message: err 25 | }) 26 | }) 27 | 28 | }) 29 | 30 | router.get('/:resource/:id', function (req, res, next) { 31 | var resource = req.params.resource 32 | var controller = controllers[resource] 33 | if (controller == null) { 34 | res.statuts(400).json({ 35 | message: 'Invalid Resource' 36 | }) 37 | return 38 | } 39 | 40 | controller.getById(req.params.id) 41 | .then(function (result) { 42 | res.status(200).json({ 43 | result: result 44 | }) 45 | }) 46 | .catch(function (err) { 47 | res.status(500).json({ 48 | message: err 49 | }) 50 | }) 51 | 52 | }) 53 | 54 | router.delete('/:resource/:id', function (req, res, next) { 55 | var resource = req.params.resource 56 | var controller = controllers[resource] 57 | if (controller == null) { 58 | res.status(400).json({ 59 | message: 'Invalid Resource' 60 | }) 61 | return 62 | } 63 | 64 | controller.delete(req.params.id) 65 | .then(function (result) { 66 | res.status(200).json({ 67 | result: {} 68 | }) 69 | }) 70 | .catch(function (err) { 71 | res.status(500).json({ 72 | message: err 73 | }) 74 | }) 75 | 76 | }) 77 | 78 | router.post('/:resource/', function (req, res, next) { 79 | var resource = req.params.resource 80 | var controller = controllers[resource] 81 | if (controller == null) { 82 | res.status(400).json({ 83 | message: 'Invalid Resource' 84 | }) 85 | return 86 | } 87 | 88 | controller.post(req.body) 89 | .then(function (result) { 90 | res.status(201).json({ 91 | result: result 92 | }) 93 | }) 94 | .catch(function (err) { 95 | res.status(500).json({ 96 | message: err 97 | }) 98 | }) 99 | 100 | }) 101 | 102 | router.get('/profiles/:profile_id/photos', function (req, res, next) { 103 | controllers.photos.getByProfileId(req.params.profile_id) 104 | .then(function (results) { 105 | res.status(200).json({ 106 | results: results 107 | }) 108 | }) 109 | .catch(function (err) { 110 | res.status(500).json({ 111 | message: err 112 | }) 113 | }) 114 | }) 115 | 116 | 117 | router.get('/friends/:profile_id/photos', function (req, res, next) { 118 | controllers.photos.getByNotProfileId(req.params.profile_id) 119 | .then(function (results) { 120 | res.status(200).json({ 121 | results: results 122 | }) 123 | }) 124 | .catch(function (err) { 125 | res.status(500).json({ 126 | message: err 127 | }) 128 | }) 129 | }) 130 | 131 | router.get('/photos/:photo_id/comments', function (req, res, next) { 132 | controllers.comments.getByPhotoId(req.params.photo_id) 133 | .then(function (results) { 134 | res.status(200).json({ 135 | results: results 136 | }) 137 | }) 138 | .catch(function (err) { 139 | res.status(500).json({ 140 | message: err 141 | }) 142 | }) 143 | }) 144 | 145 | module.exports = router -------------------------------------------------------------------------------- /routes/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | /* GET home page. */ 5 | router.get('/', function(req, res, next) { 6 | res.render('index', { title: 'demo' }); 7 | }); 8 | 9 | module.exports = router; 10 | -------------------------------------------------------------------------------- /src/actions/index.js: -------------------------------------------------------------------------------- 1 | import constants from '../constants' 2 | 3 | export default { 4 | 5 | updateUser: (user) => { 6 | return (dispatch) => { 7 | dispatch({ 8 | type: constants.UPDATE_USER, 9 | user 10 | }) 11 | } 12 | }, 13 | 14 | logout: () => { 15 | return (dispatch) => { 16 | dispatch({ 17 | type: constants.LOGOUT 18 | }) 19 | } 20 | }, 21 | 22 | changePhotoListType: (photoListType) => { 23 | return (dispatch) => { 24 | dispatch({ 25 | type: constants.CHANGE_PHOTOLISTTYPE, 26 | photoListType 27 | }) 28 | } 29 | }, 30 | 31 | toggleUpload: () => { 32 | return (dispatch) => { 33 | dispatch({ 34 | type: constants.TOGGLE_UPLOAD 35 | }) 36 | } 37 | }, 38 | 39 | addMyPhotos: (photo) => { 40 | return (dispatch) => { 41 | dispatch({ 42 | type: constants.ADD_MYPHOTOS, 43 | photo 44 | }) 45 | } 46 | }, 47 | 48 | addUploadingPhotos: (photo) => { 49 | return (dispatch) => { 50 | dispatch({ 51 | type: constants.ADD_UPLOAINGPHOTOS, 52 | photo 53 | }) 54 | } 55 | }, 56 | 57 | uploadedPhoto: (photo) => { 58 | return (dispatch) => { 59 | dispatch({ 60 | type: constants.UPLOADED_PHOTO, 61 | photo 62 | }) 63 | } 64 | }, 65 | 66 | receiveMyphotos: (photos) => { 67 | return (dispatch) => { 68 | dispatch({ 69 | type: constants.RECEIVE_MYPHOTOS, 70 | photos 71 | }) 72 | } 73 | }, 74 | 75 | receiveFriendphotos: (photos) => { 76 | return (dispatch) => { 77 | dispatch({ 78 | type: constants.RECEIVE_FRIENDPHOTOS, 79 | photos 80 | }) 81 | } 82 | }, 83 | 84 | receiveMessage: (message) => { 85 | return (dispatch) => { 86 | dispatch({ 87 | type: constants.RECEIVE_MESSAGE, 88 | message 89 | }) 90 | } 91 | }, 92 | 93 | closeMessage: () => { 94 | return (dispatch) => { 95 | dispatch({ 96 | type: constants.CLOSE_MESSAGE, 97 | }) 98 | } 99 | }, 100 | 101 | clickPhoto: (photo) => { 102 | return (dispatch) => { 103 | dispatch({ 104 | type: constants.CLICK_PHOTO, 105 | photo 106 | }) 107 | } 108 | }, 109 | 110 | destoryDisplay: () => { 111 | return (dispatch) => { 112 | dispatch({ 113 | type: constants.DESTORY_DISPLAY, 114 | }) 115 | } 116 | }, 117 | 118 | toggleComment: () => { 119 | return (dispatch) => { 120 | dispatch({ 121 | type: constants.TOGGLE_COMMENT 122 | }) 123 | } 124 | }, 125 | 126 | removeMyphoto: (photoId) => { 127 | return (dispatch) => { 128 | dispatch({ 129 | type: constants.REMOVE_MYPHOTO, 130 | photoId: photoId 131 | }) 132 | } 133 | } 134 | 135 | } -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import store from './stores' 4 | import { Provider } from 'react-redux' 5 | import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' 6 | import injectTapEventPlugin from 'react-tap-event-plugin' 7 | import Entry from './components/layout/Entry' 8 | import Perf from 'react-addons-perf' 9 | 10 | window.Perf = Perf 11 | 12 | injectTapEventPlugin() 13 | 14 | const app = ( 15 | 16 | 17 | 18 | 19 | 20 | ) 21 | 22 | ReactDOM.render(app, document.getElementById('app')) -------------------------------------------------------------------------------- /src/components/containers/DisplaycommentC.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { is } from 'immutable' 3 | import { connect } from 'react-redux' 4 | import actions from '../../actions' 5 | import { DisplaycommentV } from '../views/' 6 | import { checkStatus, getJSON } from '../../utils' 7 | 8 | class DisplaycommentC extends Component { 9 | 10 | constructor() { 11 | super() 12 | this.state = { 13 | comments: [], 14 | comment: '', 15 | errorTextComment: '' 16 | } 17 | } 18 | 19 | shouldComponentUpdate(nextProps = {}, nextState = {}) { 20 | const thisProps = this.props || {}, thisState = this.state || {}; 21 | 22 | if (Object.keys(thisProps).length !== Object.keys(nextProps).length || 23 | Object.keys(thisState).length !== Object.keys(nextState).length) { 24 | return true; 25 | } 26 | 27 | for (const key in nextProps) { 28 | if (!is(thisProps[key], nextProps[key])) { 29 | return true; 30 | } 31 | } 32 | 33 | for (const key in nextState) { 34 | if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) { 35 | return true; 36 | } 37 | } 38 | return false 39 | } 40 | 41 | componentDidMount() { 42 | fetch(`api/photos/${this.props.displayPhoto._id}/comments`, { 43 | mode: 'cors', 44 | credentials: 'include' 45 | }) 46 | .then(checkStatus) 47 | .then(getJSON) 48 | .then(data => { 49 | let updatedComments = Object.assign([], this.state.comments) 50 | updatedComments = data.results 51 | this.setState({ 52 | comments: updatedComments 53 | }) 54 | }) 55 | .catch(err => console.log(err)) 56 | } 57 | 58 | componentDidUpdate() { 59 | fetch(`api/photos/${this.props.displayPhoto._id}/comments`, { 60 | mode: 'cors', 61 | credentials: 'include' 62 | }) 63 | .then(checkStatus) 64 | .then(getJSON) 65 | .then(data => { 66 | let updatedComments = Object.assign([], this.state.comments) 67 | if (updatedComments.length == 0 && data.results.length == 0) return 68 | 69 | if (updatedComments.length !== data.results.length) { 70 | updatedComments = data.results 71 | this.setState({ 72 | comments: updatedComments 73 | }) 74 | return 75 | } 76 | 77 | if (updatedComments[0]._id !== data.results[0]._id) { 78 | updatedComments = data.results 79 | this.setState({ 80 | comments: updatedComments 81 | }) 82 | } 83 | }) 84 | .catch(err => console.log(err)) 85 | } 86 | 87 | clickDetail() { 88 | this.props.toggleComment() 89 | } 90 | 91 | updateComment(event, value) { 92 | this.setState({ 93 | comment: value 94 | }) 95 | } 96 | 97 | submitComment() { 98 | if (this.state.comment == '') { 99 | this.setState({ 100 | errorTextComment: '评论内容不能为空！' 101 | }) 102 | return 103 | } 104 | 105 | let params = { 106 | profile_id: this.props.profile._id, 107 | profile_name: this.props.profile.username, 108 | photo_id: this.props.displayPhoto._id, 109 | content: this.state.comment 110 | } 111 | 112 | fetch('api/comments', { 113 | method: "post", 114 | body: JSON.stringify(params), 115 | headers: { "Content-Type": "application/json" }, 116 | mode: 'cors', 117 | credentials: 'include' 118 | }) 119 | .then(checkStatus) 120 | .then(getJSON) 121 | .then(data => this.setState({ 122 | comment: '', 123 | errorTextComment: '' 124 | })) 125 | .catch(err => console.log(err)) 126 | 127 | } 128 | 129 | render() { 130 | return ( 131 | 138 | ) 139 | } 140 | } 141 | 142 | const stateToProps = (state) => { 143 | return { 144 | displayPhoto: state.photo.displayPhoto, 145 | profile: state.account.user 146 | } 147 | } 148 | 149 | const dispatchToProps = (dispatch) => { 150 | return { 151 | toggleComment: () => dispatch(actions.toggleComment()) 152 | } 153 | } 154 | 155 | export default connect(stateToProps, dispatchToProps)(DisplaycommentC) -------------------------------------------------------------------------------- /src/components/containers/DisplaydetailC.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { is } from 'immutable' 3 | import { connect } from 'react-redux' 4 | import actions from '../../actions' 5 | import { DisplaydetailV } from '../views/' 6 | 7 | class DisplaydetailC extends Component { 8 | 9 | constructor() { 10 | super() 11 | this.state = {} 12 | } 13 | 14 | shouldComponentUpdate(nextProps = {}, nextState = {}) { 15 | const thisProps = this.props || {}, thisState = this.state || {}; 16 | 17 | if (Object.keys(thisProps).length !== Object.keys(nextProps).length || 18 | Object.keys(thisState).length !== Object.keys(nextState).length) { 19 | return true; 20 | } 21 | 22 | for (const key in nextProps) { 23 | if (!is(thisProps[key], nextProps[key])) { 24 | return true; 25 | } 26 | } 27 | 28 | for (const key in nextState) { 29 | if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) { 30 | return true; 31 | } 32 | } 33 | return false 34 | } 35 | 36 | clickComments() { 37 | this.props.toggleComment() 38 | } 39 | 40 | render() { 41 | return ( 42 | 45 | ) 46 | } 47 | 48 | } 49 | 50 | const stateToProps = (state) => { 51 | return { 52 | displayPhoto: state.photo.displayPhoto 53 | } 54 | } 55 | 56 | const dispatchToProps = (dispatch) => { 57 | return { 58 | toggleComment: () => dispatch(actions.toggleComment()) 59 | } 60 | } 61 | 62 | export default connect(stateToProps, dispatchToProps)(DisplaydetailC) -------------------------------------------------------------------------------- /src/components/containers/DisplayimgC.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { is } from 'immutable' 3 | import { connect } from 'react-redux' 4 | import actions from '../../actions' 5 | import { DisplayimgV } from '../views/' 6 | 7 | class DisplayimgC extends Component { 8 | 9 | constructor() { 10 | super() 11 | this.state = { 12 | lightboxOpen: false 13 | } 14 | } 15 | 16 | shouldComponentUpdate(nextProps = {}, nextState = {}) { 17 | const thisProps = this.props || {}, thisState = this.state || {}; 18 | 19 | if (Object.keys(thisProps).length !== Object.keys(nextProps).length || 20 | Object.keys(thisState).length !== Object.keys(nextState).length) { 21 | return true; 22 | } 23 | 24 | for (const key in nextProps) { 25 | if (!is(thisProps[key], nextProps[key])) { 26 | return true; 27 | } 28 | } 29 | 30 | for (const key in nextState) { 31 | if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) { 32 | return true; 33 | } 34 | } 35 | return false 36 | } 37 | 38 | toggleLightbox() { 39 | this.setState({ 40 | lightboxOpen: !this.state.lightboxOpen 41 | }) 42 | } 43 | 44 | render() { 45 | return ( 46 | 51 | ) 52 | } 53 | 54 | } 55 | 56 | const stateToProps = (state) => { 57 | return { 58 | displayPhoto: state.photo.displayPhoto 59 | } 60 | } 61 | 62 | const dispatchToProps = (dispatch) => { 63 | return { 64 | 65 | } 66 | } 67 | 68 | export default connect(stateToProps, dispatchToProps)(DisplayimgC) 69 | -------------------------------------------------------------------------------- /src/components/containers/FriendphotosC.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { is } from 'immutable' 3 | import { connect } from 'react-redux' 4 | import actions from '../../actions' 5 | import { FriendphotosV } from '../views/' 6 | import { checkStatus, getJSON } from '../../utils' 7 | 8 | class FriendphotosC extends Component { 9 | 10 | constructor() { 11 | super() 12 | this.state = {} 13 | } 14 | 15 | shouldComponentUpdate(nextProps = {}, nextState = {}) { 16 | const thisProps = this.props || {}, thisState = this.state || {}; 17 | 18 | if (Object.keys(thisProps).length !== Object.keys(nextProps).length || 19 | Object.keys(thisState).length !== Object.keys(nextState).length) { 20 | return true; 21 | } 22 | 23 | for (const key in nextProps) { 24 | if (!is(thisProps[key], nextProps[key])) { 25 | return true; 26 | } 27 | } 28 | 29 | for (const key in nextState) { 30 | if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) { 31 | return true; 32 | } 33 | } 34 | return false 35 | } 36 | 37 | componentDidMount() { 38 | fetch(`api/friends/${this.props.profile_id}/photos`, { 39 | mode: 'cors', 40 | credentials: 'include' 41 | }) 42 | .then(checkStatus) 43 | .then(getJSON) 44 | .then(data => this.props.receiveFriendphotos(data.results)) 45 | .catch(err => console.log(err)) 46 | } 47 | 48 | componentDidUpdate() { 49 | fetch(`api/friends/${this.props.profile_id}/photos`, { 50 | mode: 'cors', 51 | credentials: 'include' 52 | }) 53 | .then(checkStatus) 54 | .then(getJSON) 55 | .then(data => { 56 | if (data.results.length !== this.props.friendPhotos.length) this.props.receiveFriendphotos(data.results) 57 | }) 58 | .catch(err => console.log(err)) 59 | } 60 | 61 | clickImg(photo) { 62 | this.props.clickPhoto(photo) 63 | } 64 | 65 | render() { 66 | return ( 67 | 70 | ) 71 | } 72 | } 73 | 74 | const stateToProps = (state) => { 75 | return { 76 | friendPhotos: state.photo.friendPhotos, 77 | profile_id: state.account.user._id 78 | } 79 | } 80 | 81 | const dispatchToProps = (dispatch) => { 82 | return { 83 | receiveFriendphotos: (photos) => dispatch(actions.receiveFriendphotos(photos)), 84 | clickPhoto: (photo) => dispatch(actions.clickPhoto(photo)) 85 | } 86 | } 87 | 88 | export default connect(stateToProps, dispatchToProps)(FriendphotosC) -------------------------------------------------------------------------------- /src/components/containers/LoginC.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { is } from 'immutable' 3 | import { connect } from 'react-redux' 4 | import actions from '../../actions' 5 | import { LoginV } from '../views/' 6 | import { checkStatus, getJSON } from '../../utils' 7 | 8 | class LoginC extends Component { 9 | 10 | constructor() { 11 | super() 12 | this.state = { 13 | errorTextUser: '', 14 | errorTextPwd: '', 15 | registration: { 16 | username: '', 17 | password: '' 18 | } 19 | } 20 | } 21 | 22 | shouldComponentUpdate(nextProps = {}, nextState = {}) { 23 | const thisProps = this.props || {}, thisState = this.state || {}; 24 | 25 | if (Object.keys(thisProps).length !== Object.keys(nextProps).length || 26 | Object.keys(thisState).length !== Object.keys(nextState).length) { 27 | return true; 28 | } 29 | 30 | for (const key in nextProps) { 31 | if (!is(thisProps[key], nextProps[key])) { 32 | return true; 33 | } 34 | } 35 | 36 | for (const key in nextState) { 37 | if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) { 38 | return true; 39 | } 40 | } 41 | return false 42 | } 43 | 44 | register() { 45 | if (this.state.registration.username == '') { 46 | this.setState({ errorTextUser: '账号不能为空!' }) 47 | return 48 | } else { 49 | this.setState({ errorTextUser: '' }) 50 | } 51 | if (this.state.registration.password == '') { 52 | this.setState({ errorTextPwd: '密码不能为空!' }) 53 | return 54 | } else { 55 | this.setState({ errorTextPwd: '' }) 56 | } 57 | 58 | fetch('account/register', { 59 | method: "post", 60 | body: JSON.stringify(this.state.registration), 61 | headers: { "Content-Type": "application/json" }, 62 | mode: 'cors', 63 | credentials: 'include' 64 | }) 65 | .then(checkStatus) 66 | .then(getJSON) 67 | .then(data => { 68 | if (data.user) this.props.updateUser(data.user) 69 | if (data.message) this.setState({ errorTextUser: '该账号已被使用!' }) 70 | }) 71 | .catch(err => console.log(err)) 72 | 73 | } 74 | 75 | login() { 76 | 77 | if (this.state.registration.username == '') { 78 | this.setState({ errorTextUser: '账号不能为空!' }) 79 | return 80 | } else { 81 | this.setState({ errorTextUser: '' }) 82 | } 83 | if (this.state.registration.password == '') { 84 | this.setState({ errorTextPwd: '密码不能为空!' }) 85 | return 86 | } else { 87 | this.setState({ errorTextPwd: '' }) 88 | } 89 | 90 | fetch('account/login', { 91 | method: "post", 92 | body: JSON.stringify(this.state.registration), 93 | headers: { "Content-Type": "application/json" }, 94 | mode: 'cors', 95 | credentials: 'include' 96 | }) 97 | .then(checkStatus) 98 | .then(getJSON) 99 | .then(data => { 100 | if (data.user) { 101 | this.props.updateUser(data.user) 102 | return 103 | } 104 | if (data.message) { 105 | if (data.message == 'Wrong Username!') this.setState({ errorTextUser: '该账号不存在!' }) 106 | if (data.message == 'Wrong Password!') this.setState({ errorTextPwd: '密码错误!' }) 107 | return 108 | } 109 | }) 110 | .catch(err => console.log(err)) 111 | 112 | } 113 | 114 | updateRegistration(event, value) { 115 | let updated = Object.assign({}, this.state.registration) 116 | updated[event.target.id] = event.target.value 117 | this.setState({ 118 | registration: updated 119 | }) 120 | } 121 | 122 | render() { 123 | return ( 124 | 131 | ) 132 | } 133 | } 134 | 135 | const stateToProps = (state) => { 136 | return { 137 | account: state.account 138 | } 139 | } 140 | 141 | const dispatchToProps = (dispatch) => { 142 | return { 143 | updateUser: (user) => dispatch(actions.updateUser(user)) 144 | } 145 | } 146 | 147 | export default connect(stateToProps, dispatchToProps)(LoginC) -------------------------------------------------------------------------------- /src/components/containers/MessageC.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { is } from 'immutable' 3 | import { connect } from 'react-redux' 4 | import actions from '../../actions' 5 | import { MessageV } from '../views/' 6 | 7 | class MessageC extends Component { 8 | 9 | constructor() { 10 | super() 11 | this.state = {} 12 | } 13 | 14 | shouldComponentUpdate(nextProps = {}, nextState = {}) { 15 | const thisProps = this.props || {}, thisState = this.state || {}; 16 | 17 | if (Object.keys(thisProps).length !== Object.keys(nextProps).length || 18 | Object.keys(thisState).length !== Object.keys(nextState).length) { 19 | return true; 20 | } 21 | 22 | for (const key in nextProps) { 23 | if (!is(thisProps[key], nextProps[key])) { 24 | return true; 25 | } 26 | } 27 | 28 | for (const key in nextState) { 29 | if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) { 30 | return true; 31 | } 32 | } 33 | return false 34 | } 35 | 36 | messageClose(){ 37 | this.props.closeMessage() 38 | } 39 | 40 | render() { 41 | return ( 42 | 47 | ) 48 | } 49 | 50 | } 51 | 52 | const stateToProps = (state) => { 53 | return { 54 | open: state.photo.messageOpen, 55 | message: state.photo.message 56 | } 57 | } 58 | 59 | const dispatchToProps = (dispatch) => { 60 | return { 61 | closeMessage: () => dispatch(actions.closeMessage()) 62 | } 63 | } 64 | 65 | export default connect(stateToProps, dispatchToProps)(MessageC) -------------------------------------------------------------------------------- /src/components/containers/MyphotosC.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { is } from 'immutable' 3 | import { connect } from 'react-redux' 4 | import actions from '../../actions' 5 | import { MyphotosV } from '../views/' 6 | import { checkStatus, getJSON } from '../../utils' 7 | 8 | class MyphotosC extends Component { 9 | 10 | constructor() { 11 | super() 12 | this.state = {} 13 | } 14 | 15 | shouldComponentUpdate(nextProps = {}, nextState = {}) { 16 | const thisProps = this.props || {}, thisState = this.state || {}; 17 | 18 | if (Object.keys(thisProps).length !== Object.keys(nextProps).length || 19 | Object.keys(thisState).length !== Object.keys(nextState).length) { 20 | return true; 21 | } 22 | 23 | for (const key in nextProps) { 24 | if (!is(thisProps[key], nextProps[key])) { 25 | return true; 26 | } 27 | } 28 | 29 | for (const key in nextState) { 30 | if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) { 31 | return true; 32 | } 33 | } 34 | return false 35 | } 36 | 37 | componentDidMount() { 38 | fetch(`api/profiles/${this.props.profile_id}/photos`, { 39 | mode: 'cors', 40 | credentials: 'include' 41 | }) 42 | .then(checkStatus) 43 | .then(getJSON) 44 | .then(data => this.props.receiveMyphotos(data.results)) 45 | .catch(err => console.log(err)) 46 | } 47 | 48 | clickImg(photo) { 49 | this.props.clickPhoto(photo) 50 | } 51 | 52 | addImg() { 53 | this.props.toggleUpload() 54 | } 55 | 56 | deletePhoto(photo_id) { 57 | fetch(`api/photos/${photo_id}`, { 58 | method: "delete", 59 | mode: 'cors', 60 | credentials: 'include' 61 | }) 62 | .then(checkStatus) 63 | .then(getJSON) 64 | .then(data => this.props.removeMyphoto(photo_id)) 65 | .catch(err => console.log(err)) 66 | } 67 | 68 | render() { 69 | return ( 70 | 75 | ) 76 | } 77 | } 78 | 79 | const stateToProps = (state) => { 80 | return { 81 | myPhotos: state.photo.myPhotos, 82 | profile_id: state.account.user._id 83 | } 84 | } 85 | 86 | const dispatchToProps = (dispatch) => { 87 | return { 88 | receiveMyphotos: (photos) => dispatch(actions.receiveMyphotos(photos)), 89 | clickPhoto: (photo) => dispatch(actions.clickPhoto(photo)), 90 | removeMyphoto: (photo_id) => dispatch(actions.removeMyphoto(photo_id)), 91 | toggleUpload: () => dispatch(actions.toggleUpload()), 92 | } 93 | } 94 | 95 | export default connect(stateToProps, dispatchToProps)(MyphotosC) -------------------------------------------------------------------------------- /src/components/containers/NavigationC.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { is } from 'immutable' 3 | import { connect } from 'react-redux' 4 | import actions from '../../actions' 5 | import { NavigationV } from '../views/' 6 | 7 | class NavigationC extends Component { 8 | 9 | constructor() { 10 | super() 11 | this.state = {} 12 | } 13 | 14 | shouldComponentUpdate(nextProps = {}, nextState = {}) { 15 | const thisProps = this.props || {}, thisState = this.state || {}; 16 | 17 | if (Object.keys(thisProps).length !== Object.keys(nextProps).length || 18 | Object.keys(thisState).length !== Object.keys(nextState).length) { 19 | return true; 20 | } 21 | 22 | for (const key in nextProps) { 23 | if (!is(thisProps[key], nextProps[key])) { 24 | return true; 25 | } 26 | } 27 | 28 | for (const key in nextState) { 29 | if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) { 30 | return true; 31 | } 32 | } 33 | return false 34 | } 35 | 36 | clickHome() { 37 | this.props.destoryDisplay() 38 | } 39 | 40 | clickBefore() { 41 | let photoList = (this.props.photoListType == 1) ? this.props.friendPhotos : this.props.myPhotos 42 | let currentIndex = photoList.findIndex(ele => ele.public_id == this.props.displayPhoto.public_id) 43 | let beforeIndex = (currentIndex == 0) ? (photoList.length - 1) : (currentIndex - 1) 44 | this.props.clickPhoto(photoList[beforeIndex]) 45 | } 46 | 47 | clickNext() { 48 | let photoList = (this.props.photoListType == 1) ? this.props.friendPhotos : this.props.myPhotos 49 | let currentIndex = photoList.findIndex(ele => ele.public_id == this.props.displayPhoto.public_id) 50 | let nextIndx = (currentIndex == (photoList.length - 1)) ? 0 : (currentIndex + 1) 51 | this.props.clickPhoto(photoList[nextIndx]) 52 | } 53 | 54 | render() { 55 | return ( 56 | 61 | ) 62 | } 63 | 64 | } 65 | 66 | const stateToProps = (state) => { 67 | return { 68 | displayPhoto: state.photo.displayPhoto, 69 | photoListType: state.photo.photoListType, 70 | myPhotos: state.photo.myPhotos, 71 | friendPhotos: state.photo.friendPhotos 72 | } 73 | } 74 | 75 | const dispatchToProps = (dispatch) => { 76 | return { 77 | destoryDisplay: () => dispatch(actions.destoryDisplay()), 78 | clickPhoto: (photo) => dispatch(actions.clickPhoto(photo)) 79 | } 80 | } 81 | 82 | export default connect(stateToProps, dispatchToProps)(NavigationC) -------------------------------------------------------------------------------- /src/components/containers/ToolbarC.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { is } from 'immutable' 3 | import { connect } from 'react-redux' 4 | import actions from '../../actions' 5 | import { ToolbarV } from '../views/' 6 | import { checkStatus, getJSON } from '../../utils' 7 | 8 | class ToolbarC extends Component { 9 | 10 | constructor() { 11 | super() 12 | this.state = {} 13 | } 14 | 15 | shouldComponentUpdate(nextProps = {}, nextState = {}) { 16 | const thisProps = this.props || {}, thisState = this.state || {}; 17 | 18 | if (Object.keys(thisProps).length !== Object.keys(nextProps).length || 19 | Object.keys(thisState).length !== Object.keys(nextState).length) { 20 | return true; 21 | } 22 | 23 | for (const key in nextProps) { 24 | if (!is(thisProps[key], nextProps[key])) { 25 | return true; 26 | } 27 | } 28 | 29 | for (const key in nextState) { 30 | if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) { 31 | return true; 32 | } 33 | } 34 | return false 35 | } 36 | 37 | changeDropDownMenuValue(event, index, value) { 38 | this.props.changePhotoListType(value) 39 | } 40 | 41 | clickFlatButton() { 42 | this.props.changePhotoListType(3) 43 | } 44 | 45 | clickRasiedButton() { 46 | this.props.toggleUpload() 47 | } 48 | 49 | leave() { 50 | fetch('account/logout', { 51 | mode: 'cors', 52 | credentials: 'include' 53 | }) 54 | .then(checkStatus) 55 | .then(getJSON) 56 | .then(data => this.props.logout()) 57 | .catch(err => console.log(err)) 58 | } 59 | 60 | render() { 61 | return ( 62 | 71 | ) 72 | } 73 | 74 | } 75 | 76 | const stateToProps = (state) => { 77 | return { 78 | username: state.account.user.username, 79 | photoListType: state.photo.photoListType, 80 | uploadingPhotos: state.photo.uploadingPhotos 81 | } 82 | } 83 | 84 | const dispatchToProps = (dispatch) => { 85 | return { 86 | changePhotoListType: (photoListType) => dispatch(actions.changePhotoListType(photoListType)), 87 | toggleUpload: () => dispatch(actions.toggleUpload()), 88 | logout: () => dispatch(actions.logout()), 89 | } 90 | } 91 | 92 | export default connect(stateToProps, dispatchToProps)(ToolbarC) -------------------------------------------------------------------------------- /src/components/containers/UploadC.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { is } from 'immutable' 3 | import { connect } from 'react-redux' 4 | import actions from '../../actions' 5 | import { UploadV } from '../views/' 6 | import { checkStatus, getJSON } from '../../utils' 7 | import sha1 from 'sha1' 8 | import superagent from 'superagent' 9 | 10 | class UploadC extends Component { 11 | 12 | constructor() { 13 | super() 14 | this.state = { 15 | postPhoto: {}, 16 | errorTextName: '', 17 | errorTextCaption: '', 18 | canceledPhotos: [], 19 | unhandledPhoto: {} 20 | } 21 | } 22 | 23 | shouldComponentUpdate(nextProps = {}, nextState = {}) { 24 | const thisProps = this.props || {}, thisState = this.state || {}; 25 | 26 | if (Object.keys(thisProps).length !== Object.keys(nextProps).length || 27 | Object.keys(thisState).length !== Object.keys(nextState).length) { 28 | return true; 29 | } 30 | 31 | for (const key in nextProps) { 32 | if (!is(thisProps[key], nextProps[key])) { 33 | return true; 34 | } 35 | } 36 | 37 | for (const key in nextState) { 38 | if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) { 39 | return true; 40 | } 41 | } 42 | return false 43 | } 44 | 45 | selectPhoto(photos) { 46 | const author = this.props.profile.username 47 | const timestamp = Date.now() / 1000 48 | const public_id = author + timestamp 49 | const image = photos[0] 50 | const cloudName = 'drhxwqwb4' 51 | const url = 'https://api.cloudinary.com/v1_1/' + cloudName + '/image/upload' 52 | const uploadPreset = 'crtyvp68' 53 | const paramsStr = 'public_id=' + public_id + '×tamp=' + timestamp + '&upload_preset=' + uploadPreset + 'lKYQwpo_4oqsuMpNPwE5AmmhKeI' 54 | const signature = sha1(paramsStr) 55 | const params = { 56 | 'api_key': '648725933312678', 57 | 'timestamp': timestamp, 58 | 'public_id': public_id, 59 | 'upload_preset': uploadPreset, 60 | 'signature': signature 61 | } 62 | 63 | let updated = Object.assign({}, this.state.postPhoto) 64 | updated['preview'] = photos[0]['preview'] 65 | updated['public_id'] = public_id 66 | updated['profile_id'] = this.props.profile._id 67 | updated['profile_name'] = this.props.profile.username 68 | this.setState({ 69 | postPhoto: updated 70 | }) 71 | 72 | let uploadRequest = superagent.post(url).attach('file', image) 73 | Object.keys(params).forEach((key) => { 74 | uploadRequest.field(key, params[key]) 75 | }) 76 | uploadRequest.end((err, res) => { 77 | if (err) { 78 | console.log(err) 79 | return 80 | } 81 | 82 | let cancelPhoto = this.state.canceledPhotos.find(ele => ele.public_id == res.body.public_id) 83 | if (cancelPhoto) { 84 | let deleteIndex = this.state.canceledPhotos.findIndex(ele => ele.public_id == res.body.public_id) 85 | let updatedCanceledPhotos = Object.assign([], this.state.canceledPhotos) 86 | updatedCanceledPhotos.splice(deleteIndex, 1) 87 | this.setState({ canceledPhotos: updatedCanceledPhotos }) 88 | return 89 | } 90 | 91 | let uploadingPhoto = this.props.uploadingPhotos.find(ele => ele.public_id == res.body.public_id) 92 | if (uploadingPhoto) { 93 | let params = Object.assign({}, uploadingPhoto) 94 | let secure_url = res.body.secure_url 95 | let suffix = secure_url.lastIndexOf('.') 96 | let image = secure_url.substring(0, suffix) + '.webp' 97 | let images = image.split('/image/upload/') 98 | let src = images[0] + '/image/upload/q_auto:eco/' + images[1] 99 | params['src'] = src 100 | params['url'] = secure_url 101 | let preview = params['preview'] 102 | delete params['preview'] 103 | fetch('api/photos', { 104 | method: "post", 105 | body: JSON.stringify(params), 106 | headers: { "Content-Type": "application/json" }, 107 | mode: 'cors', 108 | credentials: 'include' 109 | }) 110 | .then(checkStatus) 111 | .then(getJSON) 112 | .then(data => { 113 | let uploadPhoto = Object.assign(data.result, { preview: preview }) 114 | this.props.uploadedPhoto(uploadPhoto) 115 | this.props.receiveMessage(`照片: ${uploadPhoto.name} 添加成功！`) 116 | }) 117 | .catch(err => console.log(err)) 118 | 119 | return 120 | } 121 | 122 | let updatedUnhandledPhoto = Object.assign({}, res.body) 123 | this.setState({ 124 | unhandledPhoto: updatedUnhandledPhoto 125 | }) 126 | }) 127 | 128 | 129 | } 130 | 131 | cancelUpload() { 132 | if (this.state.unhandledPhoto.public_id == this.state.postPhoto.public_id) { 133 | this.setState({ 134 | unhandledPhoto: {} 135 | }) 136 | } else { 137 | let updatedCanceledPhotos = Object.assign([], this.state.canceledPhotos) 138 | updatedCanceledPhotos.unshift(this.state.postPhoto) 139 | this.setState({ canceledPhotos: updatedCanceledPhotos }) 140 | } 141 | 142 | this.setState({ 143 | postPhoto: {} 144 | }) 145 | this.props.toggleUpload() 146 | } 147 | 148 | submitUpload() { 149 | if (this.state.postPhoto.preview == '') { 150 | this.setState({ errorTextCaption: '请选择上传照片！' }) 151 | return 152 | } else { 153 | this.setState({ errorTextCaption: '' }) 154 | } 155 | if (this.state.postPhoto.name == '') { 156 | this.setState({ errorTextName: '照片名称不能为空！' }) 157 | return 158 | } else { 159 | this.setState({ errorTextName: '' }) 160 | } 161 | if (this.state.postPhoto.caption == '') { 162 | this.setState({ errorTextCaption: '照片描述不能为空！' }) 163 | return 164 | } else { 165 | this.setState({ errorTextCaption: '' }) 166 | } 167 | 168 | if (this.state.unhandledPhoto.public_id == this.state.postPhoto.public_id) { 169 | // 若确认提交的图片已经上传至云服务器，则将其相关信息上传至数据库，并且添加到自己的图片数组中 170 | let params = Object.assign({}, this.state.postPhoto) 171 | 172 | // 生成src 173 | let secure_url = this.state.unhandledPhoto['secure_url'] 174 | let suffix = secure_url.lastIndexOf('.') 175 | let image = secure_url.substring(0, suffix) + '.webp' 176 | let images = image.split('/image/upload/') 177 | let src = images[0] + '/image/upload/q_auto:eco/' + images[1] 178 | params['src'] = src 179 | params['url'] = secure_url 180 | let preview = params['preview'] 181 | delete params['preview'] 182 | fetch('api/photos', { 183 | method: "post", 184 | body: JSON.stringify(params), 185 | headers: { "Content-Type": "application/json" }, 186 | mode: 'cors', 187 | credentials: 'include' 188 | }) 189 | .then(checkStatus) 190 | .then(getJSON) 191 | .then(data => { 192 | let addPhoto = Object.assign(data.result, { preview: preview }) 193 | this.props.addMyPhotos(addPhoto) 194 | this.props.receiveMessage(`照片: ${addPhoto.name} 添加成功！`) 195 | }) 196 | .catch(err => console.log(err)) 197 | 198 | this.setState({ 199 | unhandledPhoto: {} 200 | }) 201 | 202 | } else { 203 | // 若图片未上传至云服务器，则添加到正在上传的图片的数组中 204 | this.props.addUploadingPhotos(this.state.postPhoto) 205 | } 206 | 207 | this.setState({ 208 | postPhoto: {} 209 | }) 210 | this.props.toggleUpload() 211 | } 212 | 213 | updatePhoto(event, value) { 214 | let updated = Object.assign({}, this.state.postPhoto) 215 | updated[event.target.id] = event.target.value 216 | this.setState({ 217 | postPhoto: updated 218 | }) 219 | } 220 | 221 | render() { 222 | return ( 223 | 232 | ) 233 | } 234 | 235 | } 236 | 237 | const stateToProps = (state) => { 238 | return { 239 | profile: state.account.user, 240 | uploadOpen: state.photo.uploadOpen, 241 | uploadingPhotos: state.photo.uploadingPhotos 242 | } 243 | } 244 | 245 | const dispatchToProps = (dispatch) => { 246 | return { 247 | toggleUpload: () => dispatch(actions.toggleUpload()), 248 | addMyPhotos: (photo) => dispatch(actions.addMyPhotos(photo)), 249 | addUploadingPhotos: (photo) => dispatch(actions.addUploadingPhotos(photo)), 250 | uploadedPhoto: (photo) => dispatch(actions.uploadedPhoto(photo)), 251 | receiveMessage: (message) => dispatch(actions.receiveMessage(message)) 252 | } 253 | } 254 | 255 | export default connect(stateToProps, dispatchToProps)(UploadC) -------------------------------------------------------------------------------- /src/components/containers/UploadingphotosC.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { is } from 'immutable' 3 | import { connect } from 'react-redux' 4 | import actions from '../../actions' 5 | import { UploadingphotosV } from '../views/' 6 | 7 | class UploadingphotosC extends Component { 8 | 9 | constructor() { 10 | super() 11 | this.state = {} 12 | } 13 | 14 | shouldComponentUpdate(nextProps = {}, nextState = {}) { 15 | const thisProps = this.props || {}, thisState = this.state || {}; 16 | 17 | if (Object.keys(thisProps).length !== Object.keys(nextProps).length || 18 | Object.keys(thisState).length !== Object.keys(nextState).length) { 19 | return true; 20 | } 21 | 22 | for (const key in nextProps) { 23 | if (!is(thisProps[key], nextProps[key])) { 24 | return true; 25 | } 26 | } 27 | 28 | for (const key in nextState) { 29 | if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) { 30 | return true; 31 | } 32 | } 33 | return false 34 | } 35 | 36 | render() { 37 | return ( 38 | 39 | ) 40 | } 41 | 42 | } 43 | 44 | const stateToProps = (state) => { 45 | return { 46 | uploadingPhotos: state.photo.uploadingPhotos 47 | } 48 | } 49 | 50 | const dispatchToProps = (dispatch) => { 51 | return { 52 | } 53 | } 54 | 55 | export default connect(stateToProps, dispatchToProps)(UploadingphotosC) -------------------------------------------------------------------------------- /src/components/containers/index.js: -------------------------------------------------------------------------------- 1 | import LoginC from './LoginC' 2 | import ToolbarC from './ToolbarC' 3 | import UploadC from './UploadC' 4 | import MyphotosC from './MyphotosC' 5 | import UploadingphotosC from './UploadingphotosC' 6 | import FriendphotosC from './FriendphotosC' 7 | import MessageC from './MessageC' 8 | import NavigationC from './NavigationC' 9 | import DisplayimgC from './DisplayimgC' 10 | import DisplaydetailC from './DisplaydetailC' 11 | import DisplaycommentC from './DisplaycommentC' 12 | 13 | export { 14 | 15 | LoginC, 16 | ToolbarC, 17 | UploadC, 18 | MyphotosC, 19 | UploadingphotosC, 20 | FriendphotosC, 21 | MessageC, 22 | NavigationC, 23 | DisplayimgC, 24 | DisplaydetailC, 25 | DisplaycommentC 26 | 27 | } -------------------------------------------------------------------------------- /src/components/layout/Detail.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { is } from 'immutable' 3 | import { connect } from 'react-redux' 4 | import actions from '../../actions' 5 | import { NavigationC, DisplayimgC, DisplaydetailC, DisplaycommentC } from '../containers' 6 | import Paper from 'material-ui/Paper' 7 | 8 | const styles = { 9 | root: { 10 | flexGrow: 1, 11 | height: '100%' 12 | }, 13 | container: { 14 | height: 'calc(100% - 56px)', 15 | width: '100%', 16 | display: 'flex' 17 | } 18 | } 19 | 20 | class Detail extends Component { 21 | 22 | constructor() { 23 | super() 24 | this.state = {} 25 | } 26 | 27 | shouldComponentUpdate(nextProps = {}, nextState = {}) { 28 | const thisProps = this.props || {}, thisState = this.state || {}; 29 | 30 | if (Object.keys(thisProps).length !== Object.keys(nextProps).length || 31 | Object.keys(thisState).length !== Object.keys(nextState).length) { 32 | return true; 33 | } 34 | 35 | for (const key in nextProps) { 36 | if (!is(thisProps[key], nextProps[key])) { 37 | return true; 38 | } 39 | } 40 | 41 | for (const key in nextState) { 42 | if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) { 43 | return true; 44 | } 45 | } 46 | return false 47 | } 48 | 49 | render() { 50 | return ( 51 | 52 | 53 |
54 | 55 | {(this.props.displayDetail) 56 | ? 57 | 58 | : 59 | 60 | } 61 |
62 | 63 | ) 64 | } 65 | 66 | } 67 | 68 | const stateToProps = (state) => { 69 | return { 70 | displayDetail: state.photo.displayDetail 71 | } 72 | } 73 | 74 | const dispatchToProps = (dispatch) => { 75 | return { 76 | 77 | } 78 | } 79 | 80 | export default connect(stateToProps, dispatchToProps)(Detail) -------------------------------------------------------------------------------- /src/components/layout/Entry.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { is } from 'immutable' 3 | import { connect } from 'react-redux' 4 | import actions from '../../actions' 5 | import Home from './Home' 6 | import { LoginC } from '../containers/' 7 | import { checkStatus, getJSON } from '../../utils' 8 | 9 | const styles = { 10 | root: { 11 | display: 'flex', 12 | height: '100%', 13 | flexDirection: 'row', 14 | justifyContent: 'space-around', 15 | alignItems: 'flex-start', 16 | alignContent: 'space-around' 17 | }, 18 | login: { 19 | alignSelf: 'center' 20 | } 21 | } 22 | 23 | class Entry extends Component { 24 | 25 | constructor() { 26 | super() 27 | this.state = {} 28 | } 29 | 30 | componentDidMount() { 31 | fetch('account/user', { 32 | mode: 'cors', 33 | credentials: 'include' 34 | }) 35 | .then(checkStatus) 36 | .then(getJSON) 37 | .then(data => { 38 | if (data.user) this.props.updateUser(data.user) 39 | }) 40 | .catch(err => console.log(err)) 41 | } 42 | 43 | shouldComponentUpdate(nextProps = {}, nextState = {}) { 44 | const thisProps = this.props || {}, thisState = this.state || {}; 45 | 46 | if (Object.keys(thisProps).length !== Object.keys(nextProps).length || 47 | Object.keys(thisState).length !== Object.keys(nextState).length) { 48 | return true; 49 | } 50 | 51 | for (const key in nextProps) { 52 | if (!is(thisProps[key], nextProps[key])) { 53 | return true; 54 | } 55 | } 56 | 57 | for (const key in nextState) { 58 | if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) { 59 | return true; 60 | } 61 | } 62 | return false 63 | } 64 | 65 | render() { 66 | return ( 67 |
68 | {(this.props.user) 69 | ? 70 | 71 | : 72 |
73 | 74 |
75 | } 76 |
77 | ) 78 | } 79 | } 80 | 81 | const stateToProps = (state) => { 82 | return { 83 | user: state.account.user 84 | } 85 | } 86 | 87 | const dispatchToProps = (dispatch) => { 88 | return { 89 | updateUser: (user) => dispatch(actions.updateUser(user)) 90 | } 91 | } 92 | 93 | export default connect(stateToProps, dispatchToProps)(Entry) -------------------------------------------------------------------------------- /src/components/layout/Home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { is } from 'immutable' 3 | import { connect } from 'react-redux' 4 | import actions from '../../actions' 5 | import Detail from './Detail' 6 | import { ToolbarC, UploadC, MyphotosC, UploadingphotosC, FriendphotosC, MessageC } from '../containers' 7 | import Paper from 'material-ui/Paper' 8 | 9 | const styles = { 10 | root: { 11 | height: 'calc(100% - 40px)', 12 | width: 'calc(100% - 40px)', 13 | display: 'flex', 14 | flexDirection: 'row', 15 | justifyContent: 'space-around', 16 | margin: 20 17 | }, 18 | main: { 19 | flexGrow: 1, 20 | height: '100%' 21 | }, 22 | photoListContainer: { 23 | paddingLeft: 10, 24 | paddingRight: 10, 25 | paddingTop: 20, 26 | paddingBottom: 20, 27 | marginBottom: 20, 28 | overflowY: 'auto', 29 | overflowX: 'auto', 30 | height: 'calc(100% - 120px)' 31 | } 32 | } 33 | 34 | class Home extends Component { 35 | 36 | constructor() { 37 | super() 38 | this.state = {} 39 | } 40 | 41 | shouldComponentUpdate(nextProps = {}, nextState = {}) { 42 | const thisProps = this.props || {}, thisState = this.state || {}; 43 | 44 | if (Object.keys(thisProps).length !== Object.keys(nextProps).length || 45 | Object.keys(thisState).length !== Object.keys(nextState).length) { 46 | return true; 47 | } 48 | 49 | for (const key in nextProps) { 50 | if (!is(thisProps[key], nextProps[key])) { 51 | return true; 52 | } 53 | } 54 | 55 | for (const key in nextState) { 56 | if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) { 57 | return true; 58 | } 59 | } 60 | return false 61 | } 62 | 63 | render() { 64 | return ( 65 |
66 | {(this.props.displayPhoto) 67 | ? 68 | 69 | : 70 | 71 | 72 |
73 | {(this.props.photoListType == 1) 74 | && 75 | 76 | } 77 | {(this.props.photoListType == 2) 78 | && 79 | 80 | } 81 | {(this.props.photoListType == 3) 82 | && 83 | 84 | } 85 |
86 | 87 | } 88 | 89 | 90 |
91 | ) 92 | } 93 | 94 | } 95 | 96 | const stateToProps = (state) => { 97 | return { 98 | displayPhoto: state.photo.displayPhoto, 99 | photoListType: state.photo.photoListType 100 | } 101 | } 102 | 103 | const dispatchToProps = (dispatch) => { 104 | return { 105 | 106 | } 107 | } 108 | 109 | export default connect(stateToProps, dispatchToProps)(Home) -------------------------------------------------------------------------------- /src/components/views/DisplaycommentV.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { List, ListItem } from 'material-ui/List' 3 | import Subheader from 'material-ui/Subheader' 4 | import Divider from 'material-ui/Divider' 5 | import Avatar from 'material-ui/Avatar' 6 | import FlatButton from 'material-ui/FlatButton' 7 | import TextField from 'material-ui/TextField' 8 | import CommentIcon from 'material-ui/svg-icons/communication/comment' 9 | 10 | const DisplaycommentV = (props) => ( 11 |
12 | 评论列表 13 | 14 | {(props.comments.length == 0) 15 | ? 16 | } 19 | disabled={true} 20 | /> 21 | : 22 |
23 | { 24 | props.comments.map((comment) => { 25 | return ( 26 |
27 | } 29 | primaryText={comment.profile_name} 30 | secondaryText={ 31 |

{comment.content}

32 | } 33 | secondaryTextLines={2} 34 | /> 35 | 36 |
37 | ) 38 | }) 39 | } 40 |
41 | } 42 | 43 |
44 | 45 | props.updateComment(event, value)} 54 | value={props.comment} 55 | errorText={props.errorTextComment} /> 56 |
57 | props.submitComment()} /> 58 | props.clickDetail()} /> 59 |
60 |
61 |
62 | ) 63 | 64 | export default DisplaycommentV -------------------------------------------------------------------------------- /src/components/views/DisplaydetailV.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card' 3 | import FlatButton from 'material-ui/FlatButton' 4 | 5 | const DisplaydetailV = (props) => ( 6 |
7 | 9 | 13 | 14 | {props.photo.caption} 15 | 16 | props.clickComments()} /> 18 | 19 | 20 | 21 |
22 | ) 23 | 24 | export default DisplaydetailV -------------------------------------------------------------------------------- /src/components/views/DisplayimgV.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Lightbox from 'react-image-lightbox' 3 | 4 | const DisplayimgV = (props) => ( 5 |
6 | props.openLightbox()} /> 7 | {props.lightboxOpen && 8 | props.closeLightbox()} 12 | /> 13 | } 14 |
15 | ) 16 | 17 | export default DisplayimgV -------------------------------------------------------------------------------- /src/components/views/FriendphotosV.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Grid, Row, Col } from 'react-flexbox-grid' 3 | import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card' 4 | import FlatButton from 'material-ui/FlatButton' 5 | import ImageIcon from 'material-ui/svg-icons/image/image' 6 | 7 | const FriendphotosV = (props) => ( 8 |
9 | {(props.photoList.length == 0) 10 | ? 11 | } 16 | /> 17 | : 18 | 19 | 20 | {props.photoList.map((photo) => { 21 | return ( 22 | 25 | 26 | 27 | 29 | 30 | 31 | {photo.caption} 32 | 33 | 34 | ) 35 | }) 36 | } 37 | 38 | 39 | } 40 |
41 | ) 42 | 43 | export default FriendphotosV -------------------------------------------------------------------------------- /src/components/views/LoginV.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Card, CardActions, CardHeader, CardText } from 'material-ui/Card' 3 | import FlatButton from 'material-ui/FlatButton' 4 | import IconButton from 'material-ui/IconButton' 5 | import TextField from 'material-ui/TextField' 6 | 7 | const LoginV = (props) => ( 8 | 9 | 13 | 14 | props.updateRegistration(event, value)} 19 | id="username" 20 | errorText={props.errorTextUser} 21 | />
22 | props.updateRegistration(event, value)} 27 | id="password" 28 | errorText={props.errorTextPwd} 29 | /> 30 | 31 | 32 | props.onLogin()} 34 | label="登录" 35 | /> 36 | props.onRegister()} 38 | label="注册" 39 | /> 40 | 41 | 42 | 43 | nbb3210@gmail.com 44 | 45 | 46 | ) 47 | 48 | export default LoginV -------------------------------------------------------------------------------- /src/components/views/MessageV.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Snackbar from 'material-ui/Snackbar' 3 | 4 | const MessageV = (props) => ( 5 | props.messageClose()} 10 | /> 11 | ) 12 | 13 | export default MessageV -------------------------------------------------------------------------------- /src/components/views/MyphotosV.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Grid, Row, Col } from 'react-flexbox-grid' 3 | import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card' 4 | import FlatButton from 'material-ui/FlatButton' 5 | import AddPhotoIcon from 'material-ui/svg-icons/image/add-a-photo' 6 | 7 | const MyphotosV = (props) => ( 8 |
9 | {(props.photoList.length == 0) 10 | ? 11 | } 15 | onTouchTap={() => props.addImg()} 16 | /> 17 | : 18 | 19 | 20 | {props.photoList.map((photo) => { 21 | return ( 22 | 25 | 26 | 27 | 30 | 31 | 32 | {photo.caption} 33 | 34 | 35 | 36 | 37 | 38 | 39 | ) 40 | }) 41 | } 42 | 43 | 44 | } 45 |
46 | ) 47 | 48 | export default MyphotosV -------------------------------------------------------------------------------- /src/components/views/NavigationV.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BottomNavigation, BottomNavigationItem } from 'material-ui/BottomNavigation' 3 | import NavigateBeforeIcon from 'material-ui/svg-icons/image/navigate-before' 4 | import NavigateNextIcon from 'material-ui/svg-icons/image/navigate-next' 5 | import HomeIcon from 'material-ui/svg-icons/action/home' 6 | 7 | const NavigationV = (props) => ( 8 | 9 | } 12 | onTouchTap={() => props.clickBefore()} 13 | /> 14 | } 17 | onTouchTap={() => props.clickHome()} 18 | /> 19 | } 22 | onTouchTap={() => props.clickNext()} 23 | /> 24 | 25 | ) 26 | 27 | export default NavigationV -------------------------------------------------------------------------------- /src/components/views/ToolbarV.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Toolbar, ToolbarGroup, ToolbarSeparator } from 'material-ui/Toolbar' 3 | import DropDownMenu from 'material-ui/DropDownMenu' 4 | import MenuItem from 'material-ui/MenuItem' 5 | import RaisedButton from 'material-ui/RaisedButton' 6 | import FlatButton from 'material-ui/FlatButton' 7 | import IconButton from 'material-ui/IconButton' 8 | import LeaveIcon from 'material-ui/svg-icons/maps/directions-run' 9 | import CloudUploadIcon from 'material-ui/svg-icons/file/cloud-upload' 10 | 11 | const ToolbarV = (props) => ( 12 | 13 | 14 | props.changeDropDownMenuValue(event, index, value)}> 17 | 18 | 19 | 20 | 21 | 22 | 23 | } 29 | onTouchTap={() => props.clickFlatButton()} 30 | /> 31 | 32 | props.clickRasiedButton()} /> 34 | props.leave()}> 37 | 38 | 39 | 40 | 41 | ) 42 | 43 | export default ToolbarV -------------------------------------------------------------------------------- /src/components/views/UploadV.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Dialog from 'material-ui/Dialog' 3 | import Dropzone from 'react-dropzone' 4 | import Divider from 'material-ui/Divider' 5 | import TextField from 'material-ui/TextField' 6 | import FlatButton from 'material-ui/FlatButton' 7 | import RaisedButton from 'material-ui/RaisedButton' 8 | 9 | const UploadV = (props) => { 10 | const actions = [ 11 | props.cancelUpload()} 15 | />, 16 | props.submitUpload()} 21 | /> 22 | ] 23 | 24 | return ( 25 | 36 | props.selectPhoto(photos)}> 39 | 40 | 41 | 42 | props.updatePhoto(event, value)} /> 48 | 49 | props.updatePhoto(event, value)} /> 57 | 58 | {(props.preview) 59 | && 60 | 61 | } 62 | 63 | ) 64 | } 65 | 66 | export default UploadV -------------------------------------------------------------------------------- /src/components/views/UploadingphotosV.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Grid, Row, Col } from 'react-flexbox-grid' 3 | import Paper from 'material-ui/Paper' 4 | import FlatButton from 'material-ui/FlatButton' 5 | import CloudUploadIcon from 'material-ui/svg-icons/file/cloud-upload' 6 | 7 | const UploadingphotosV = (props) => ( 8 |
9 | {(props.photoList.length == 0) 10 | ? 11 | } 16 | /> 17 | : 18 | 19 | 20 | {props.photoList.map((photo) => { 21 | return ( 22 | 25 | 26 | 27 | 28 | 29 | ) 30 | }) 31 | } 32 | 33 | 34 | } 35 |
36 | ) 37 | 38 | export default UploadingphotosV -------------------------------------------------------------------------------- /src/components/views/index.js: -------------------------------------------------------------------------------- 1 | import LoginV from './LoginV' 2 | import ToolbarV from './ToolbarV' 3 | import UploadV from './UploadV' 4 | import MyphotosV from './MyphotosV' 5 | import UploadingphotosV from './UploadingphotosV' 6 | import FriendphotosV from './FriendphotosV' 7 | import MessageV from './MessageV' 8 | import NavigationV from './NavigationV' 9 | import DisplayimgV from './DisplayimgV' 10 | import DisplaydetailV from './DisplaydetailV' 11 | import DisplaycommentV from './DisplaycommentV' 12 | 13 | export { 14 | 15 | LoginV, 16 | ToolbarV, 17 | UploadV, 18 | MyphotosV, 19 | UploadingphotosV, 20 | FriendphotosV, 21 | MessageV, 22 | NavigationV, 23 | DisplayimgV, 24 | DisplaydetailV, 25 | DisplaycommentV 26 | 27 | } -------------------------------------------------------------------------------- /src/constants/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 3 | UPDATE_USER: 'UPDATE_USER', 4 | LOGOUT: 'LOGOUT', 5 | CHANGE_PHOTOLISTTYPE: 'CHANGE_PHOTOLISTTYPE', 6 | TOGGLE_UPLOAD: 'TOGGLE_UPLOAD', 7 | ADD_MYPHOTOS: 'ADD_MYPHOTOS', 8 | ADD_UPLOAINGPHOTOS: 'ADD_UPLOAINGPHOTOS', 9 | UPLOADED_PHOTO: 'UPLOADED_PHOTO', 10 | RECEIVE_MYPHOTOS: 'RECEIVE_MYPHOTOS', 11 | RECEIVE_FRIENDPHOTOS: 'RECEIVE_FRIENDPHOTOS', 12 | RECEIVE_MESSAGE: 'RECEIVE_MESSAGE', 13 | CLOSE_MESSAGE: 'CLOSE_MESSAGE', 14 | CLICK_PHOTO: 'CLICK_PHOTO', 15 | DESTORY_DISPLAY: 'DESTORY_DISPLAY', 16 | TOGGLE_COMMENT: 'TOGGLE_COMMENT', 17 | REMOVE_MYPHOTO: 'REMOVE_MYPHOTO' 18 | 19 | } -------------------------------------------------------------------------------- /src/reducers/accountReducer.js: -------------------------------------------------------------------------------- 1 | import constants from '../constants' 2 | 3 | let initialState = { 4 | user: null 5 | } 6 | 7 | export default (state = initialState, action) => { 8 | 9 | let updated = Object.assign({}, state) 10 | switch (action.type) { 11 | 12 | case constants.UPDATE_USER: 13 | updated['user'] = action.user 14 | return updated 15 | 16 | case constants.LOGOUT: 17 | updated['user'] = null 18 | return updated 19 | 20 | default: 21 | return updated 22 | 23 | } 24 | 25 | } -------------------------------------------------------------------------------- /src/reducers/photoReducer.js: -------------------------------------------------------------------------------- 1 | import constants from '../constants' 2 | 3 | let initialState = { 4 | displayPhoto: null, 5 | photoListType: 2, 6 | uploadOpen: false, 7 | uploadingPhotos: [], 8 | myPhotos: [], 9 | friendPhotos: [], 10 | messageOpen: false, 11 | message: '', 12 | displayDetail: true 13 | } 14 | 15 | export default (state = initialState, action) => { 16 | 17 | let updated = Object.assign({}, state) 18 | switch (action.type) { 19 | 20 | case constants.CHANGE_PHOTOLISTTYPE: 21 | updated['photoListType'] = action.photoListType 22 | return updated 23 | 24 | case constants.TOGGLE_UPLOAD: 25 | updated['uploadOpen'] = (updated.uploadOpen == false) ? true : false 26 | return updated 27 | 28 | case constants.ADD_MYPHOTOS: 29 | let updatedMyPhotos = Object.assign([], updated['myPhotos']) 30 | updatedMyPhotos.unshift(action.photo) 31 | updated['myPhotos'] = updatedMyPhotos 32 | return updated 33 | 34 | 35 | case constants.ADD_UPLOAINGPHOTOS: 36 | let updatedUploadingPhotos = Object.assign([], updated['uploadingPhotos']) 37 | updatedUploadingPhotos.unshift(action.photo) 38 | updated['uploadingPhotos'] = updatedUploadingPhotos 39 | return updated 40 | 41 | case constants.UPLOADED_PHOTO: 42 | let updatedMyPhotosByUploaded = Object.assign([], updated['myPhotos']) 43 | updatedMyPhotosByUploaded.unshift(action.photo) 44 | updated['myPhotos'] = updatedMyPhotosByUploaded 45 | 46 | let deleteIndex = updated.uploadingPhotos.findIndex(ele => ele.public_id == action.photo.public_id) 47 | let updatedUploadingPhotosByUploaded = Object.assign([], updated['uploadingPhotos']) 48 | updatedUploadingPhotosByUploaded.splice(deleteIndex, 1) 49 | updated['uploadingPhotos'] = updatedUploadingPhotosByUploaded 50 | 51 | return updated 52 | 53 | case constants.RECEIVE_MYPHOTOS: 54 | updated.myPhotos = action.photos 55 | return updated 56 | 57 | case constants.RECEIVE_FRIENDPHOTOS: 58 | updated.friendPhotos = action.photos 59 | return updated 60 | 61 | case constants.RECEIVE_MESSAGE: 62 | updated.messageOpen = true 63 | updated.message = action.message 64 | return updated 65 | 66 | case constants.CLOSE_MESSAGE: 67 | updated.messageOpen = false 68 | updated.message = '' 69 | return updated 70 | 71 | case constants.CLICK_PHOTO: 72 | let updatedDisplay = Object.assign({}, updated['displayPhoto']) 73 | updatedDisplay = action.photo 74 | updated['displayPhoto'] = updatedDisplay 75 | return updated 76 | 77 | case constants.DESTORY_DISPLAY: 78 | let destoryDisplay = Object.assign({}, updated['displayPhoto']) 79 | destoryDisplay = null 80 | updated['displayPhoto'] = destoryDisplay 81 | return updated 82 | 83 | case constants.TOGGLE_COMMENT: 84 | updated['displayDetail'] = (updated.displayDetail == false) ? true : false 85 | return updated 86 | 87 | case constants.REMOVE_MYPHOTO: 88 | let removeMyphotos = Object.assign([], updated['myPhotos']) 89 | let removeIndex = removeMyphotos.findIndex(ele => ele._id == action.photoId) 90 | removeMyphotos.splice(removeIndex, 1) 91 | updated['myPhotos'] = removeMyphotos 92 | return updated 93 | 94 | default: 95 | return updated 96 | 97 | } 98 | 99 | } -------------------------------------------------------------------------------- /src/stores/index.js: -------------------------------------------------------------------------------- 1 | import { createStore, combineReducers, applyMiddleware } from 'redux' 2 | import thunk from 'redux-thunk' 3 | import accountReducer from '../reducers/accountReducer' 4 | import photoReducer from '../reducers/photoReducer' 5 | 6 | var store; 7 | 8 | export default { 9 | configureStore: () => { 10 | const reducers = combineReducers({ 11 | account: accountReducer, 12 | photo: photoReducer, 13 | }) 14 | 15 | store = createStore( 16 | reducers, 17 | applyMiddleware(thunk) 18 | ) 19 | 20 | return store 21 | }, 22 | 23 | currentStore: () => { 24 | return store 25 | } 26 | } -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | export function checkStatus200(res) { 2 | if (res.status === 200) { 3 | return Promise.resolve(res) 4 | } else { 5 | return Promise.reject( 6 | new Error(response.statusText) 7 | ) 8 | } 9 | } 10 | 11 | export function getJSON(res) { 12 | return res.json() 13 | } -------------------------------------------------------------------------------- /views/error.hjs: -------------------------------------------------------------------------------- 1 |

{{ message }}

2 |

{{ error.status }}

3 | 
{{ error.stack }}
4 | -------------------------------------------------------------------------------- /views/index.hjs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Demo 6 | 7 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | var path = require('path') 3 | 4 | module.exports = { 5 | entry: { 6 | app: './src/app.js' 7 | }, 8 | output: { 9 | filename: 'public/build/bundle.js', 10 | sourceMapFilename: 'public/build/bundle.map' 11 | }, 12 | devtool: '#source-map', 13 | module: { 14 | loaders: [ 15 | { 16 | test: /\.jsx?$/, 17 | exclude: /(node_modules|bower_components)/, 18 | loader: 'babel-loader', 19 | query: { 20 | presets: ['react', 'es2015'] 21 | } 22 | }, 23 | { 24 | test: /\.css$/, 25 | loader: 'style-loader!css-loader?modules', 26 | include: /flexboxgrid/, 27 | } 28 | ] 29 | }, 30 | plugins: process.env.NODE_ENV === 'production' ? [ 31 | new webpack.DefinePlugin({ 32 | 'process.env': { 33 | 'NODE_ENV': JSON.stringify('production') 34 | } 35 | }), 36 | new webpack.optimize.UglifyJsPlugin({ 37 | minimize: true, 38 | compress: { 39 | warnings: true 40 | } 41 | }) 42 | ] : [], 43 | } --------------------------------------------------------------------------------