5 |
6 |
3 |
4 |
5 |
6 |
16 |
17 | 
18 |
19 |
4 |
5 | ## Supporting multiple data platforms.
6 | With dependency injection and new structure we have tried to support variety of data platforms such as Google Cloud Firebase, AWS, Azure or using backend such as ASP.NET, PHP, JAVA, etc.
7 |
8 | 
9 |
10 | ## Easy and fast to scale in structure
11 | Layers are organized in the way we have easy and less changes for adding/removing features. It could be integrated with server side too. As a result we are faster in developing in both side.
12 | ### Core
13 | - The infrastructure,
14 | - Providing interfaces for services
15 | - Domain
16 | ### Data
17 | * Firebase Data Client
18 | * AWS Data Client
19 | * Azure Data Client
20 | * ASP.NET Data Client
21 | * PHP Data Client
22 | ### Components
23 | 
24 |
25 | ## Integrating and reusability in both mobile and web app
26 | With new structure we are able to develop the mobile app in parallel with web app **only** with changing `Components` layer. It means we can keep `Core`, `Data` layers, `Actions`, `Reducers`, etc. What we have high reusability and fast in producing the products.
27 |
28 | 
29 |
--------------------------------------------------------------------------------
/docs/layers/api.md:
--------------------------------------------------------------------------------
1 | # API
2 |
3 | Is a decoupled layer of interfaces to data and/or functionality of one or more components.
4 |
--------------------------------------------------------------------------------
/docs/layers/components.md:
--------------------------------------------------------------------------------
1 | # Components
2 |
3 | This layer include [React components](https://facebook.github.io/react/docs/react-component.html) that let you split the UI into independent, reusable pieces, and think about each piece in isolation.
4 |
--------------------------------------------------------------------------------
/docs/layers/constants.md:
--------------------------------------------------------------------------------
1 | # Constatnts
2 |
3 | This layer is responsible for setting constant virables, such as action type names for redux actions. Actions must have a type property that indicates the type of action being performed. Types should typically be defined as string constants.
4 |
--------------------------------------------------------------------------------
/docs/layers/reducers.md:
--------------------------------------------------------------------------------
1 | # Reducers
2 |
3 | This layer is included reducers of entities. [Reducers](http://redux.js.org/docs/basics/Reducers.html) specify how the application's state changes in response.
4 |
5 | ## authorizeReducer
6 |
7 | This reducer is responsible to change user authorization state on reducer.
8 |
9 | ## circleReducer
10 |
11 | This reducer is responsible to change user's circle state on reducer, insert/update/delete circle and insert/update/delete follower/following.
12 |
13 | ## commentReducer
14 |
15 | This reducer is responsible to change user comment state on reducer, insert/update/delete comment.
16 |
17 | ## fileReducer
18 |
19 | This reducer is responsible to change files state on reducer.
20 |
21 | ## globalReducer
22 |
23 | This reducer is responsible to change global states on reducer. Like changing loding visibility or notification text.
24 |
25 | ## imageGalleryReducer
26 |
27 | This reducer is responsible to change images state on reducer, insert/update/delete image and cache image's url.
28 |
29 | ## imageUploaderReducer
30 |
31 | This reducer is responsible to change user upload state on reducer.
32 |
33 | ## notifyReducer
34 |
35 | This reducer is responsible to change user notification state on reducer, insert/update/delete notificaion and change seen state for notification.
36 |
37 | ## postReducer
38 |
39 | This reducer is responsible to change user post state on reducer, insert/update/delete post.
40 |
41 | ## userReducer
42 |
43 | This reducer is responsible to change user information state on reducer, insert/update/delete user information.
44 |
45 | ## voteReducer
46 |
47 | This reducer is responsible to change user vote state on reducer. insert/update/delete vote.
--------------------------------------------------------------------------------
/docs/layers/store.md:
--------------------------------------------------------------------------------
1 | # Store
2 |
3 | This layer is responsible for configuring of redux store, such as setting reducers and midelwares. A [store](http://redux.js.org/docs/api/Store.html) holds the whole state tree of your application.
4 |
--------------------------------------------------------------------------------
/docs/layers/tests.md:
--------------------------------------------------------------------------------
1 | # Tests
2 |
3 | This layer is responsible to test each layer of application. Each test file name follow `[file-name].test.jsx` pattern for naming. We use [expect](https://github.com/mjackson/expect) to write assertion for each test case. We use [Karma](https://karma-runner.github.io/1.0/index.html) to run our tests. We use [Mocha](https://mochajs.org/) which tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.
4 |
5 | ## Test Actions
6 |
7 | ## Test Reducers
8 |
9 | ## Test Components
10 |
11 | ## Test API
--------------------------------------------------------------------------------
/docs/motivation.md:
--------------------------------------------------------------------------------
1 | # Motivation
2 |
3 | In this project we follow [loosely coupled](https://en.wikipedia.org/wiki/Loose_coupling) system principle with the idea each part of this project be independent from others. For example if you want to use [frontend](https://en.wikipedia.org/wiki/Front_and_back_ends) you are not depend on [backend](https://en.wikipedia.org/wiki/Front_and_back_ends) as you can use Firbase so easy which we have provided in this project. You also can use any kind of backend such as php, python, javascript and etc, completely independent of frontend or you can use [ASP.NET Core 2](https://docs.microsoft.com/en-us/dotnet/core/) backend that we provided in this project.
4 | As my target in this project, I've intended to build a social network with features of new and powerful web technologies such as [React](https://facebook.github.io/react/) as a front-end tool in [React Social Network](https://github.com/Qolzam/react-social-network) project and build a powerful backend by [ASP.NET Core 2](https://docs.microsoft.com/en-us/dotnet/core/) with its cool new features in [ASP.NET Core Social Network](https://github.com/Qolzam/aspnet-core-social-network). I also use [React Native](https://facebook.github.io/react-native/) to build a powerful mobile social app in [React Mobile Social](https://github.com/Qolzam/react-mobile-social). All cool new features are providing as an open source project under MIT LICENSE and it's so great ;).
--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
1 | {
2 | "hosting": {
3 | "public": "build",
4 | "headers": [
5 | {
6 | "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
7 | "headers": [
8 | {
9 | "key": "Access-Control-Allow-Origin",
10 | "value": "*"
11 | }
12 | ]
13 | },
14 | {
15 | "source": "**/*.@(jpg|jpeg|gif|png)",
16 | "headers": [
17 | {
18 | "key": "Cache-Control",
19 | "value": "max-age=7200"
20 | }
21 | ]
22 | },
23 | {
24 | "source": "**/*.js",
25 | "headers": [
26 | {
27 | "key": "Cache-Control",
28 | "value": "no-cache"
29 | }
30 | ]
31 | }
32 | ],
33 | "rewrites": [
34 | {
35 | "source": "/favicon.ico",
36 | "destination": "/favicon.ico"
37 | },
38 | {
39 | "source": "**",
40 | "destination": "/index.html"
41 | }
42 | ]
43 | }
44 | }
--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'redux-offline'
2 | declare module 'redux-offline/lib/defaults'
3 | declare module 'redux-offline-immutable-config'
4 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/red-gold/react-social-network/04e0f4dcfb8fec1c1a4c18efb5ae02b5679f8451/public/favicon.ico
--------------------------------------------------------------------------------
/public/images/flags.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/red-gold/react-social-network/04e0f4dcfb8fec1c1a4c18efb5ae02b5679f8451/public/images/flags.png
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | var express = require('express');
2 | var morgan = require('morgan');
3 | var path = require('path');
4 | var webpack = require('webpack');
5 | var webpackConfig = require('./webpack.config');
6 | var compiler = webpack(webpackConfig);
7 |
8 | // Create our app
9 | var app = express();
10 | const PORT = process.env.PORT || 3000;
11 |
12 | // Setup logger
13 | app.use(morgan(':remote-addr - :remote-user [:date[clf]] ":method :url HTTP/:http-version" :status :res[content-length] :response-time ms'));
14 |
15 |
16 | app.use(require("webpack-dev-middleware")(compiler, {
17 | noInfo: true,
18 | publicPath: webpackConfig.output.publicPath
19 | }));
20 |
21 | app.use(require("webpack-hot-middleware")(compiler));
22 |
23 | app.use(function(req, res, next) {
24 | if (req.headers['x-forwarded-proto'] === 'https') {
25 | res.redirect('http://' + req.hostname + req.url);
26 | } else {
27 | next();
28 | }
29 | });
30 |
31 | app.use(function(req, res, next) {
32 | var userAgent = req.get('User-Agent');
33 | console.log(userAgent);
34 | next();
35 | });
36 |
37 | app.use(express.static('public'));
38 |
39 |
40 | // Always return the main index.html, so react-router render the route in the client
41 | app.get('*', (req, res) => {
42 | res.sendFile(path.resolve('public', 'index.html'));
43 |
44 | });
45 |
46 |
47 | app.listen(PORT, function() {
48 | console.log('Express server is up on port ' + PORT);
49 | });
--------------------------------------------------------------------------------
/src/api/CommentAPI.ts:
--------------------------------------------------------------------------------
1 | import StringAPI from 'api/StringAPI'
2 | import { ServerRequestType } from 'constants/serverRequestType'
3 | import { ServerRequestModel } from 'models/server'
4 | import { ServerRequestStatusType } from 'store/actions/serverRequestStatusType'
5 | import { comments } from 'models/comments/commentTypes'
6 | import * as _ from 'lodash'
7 |
8 | /**
9 | * Create get comments server request model
10 | */
11 | const createGetCommentsRequest = (postId: string) => {
12 | const requestId = StringAPI.createServerRequestId(ServerRequestType.CommentGetComments, postId)
13 | return new ServerRequestModel(
14 | ServerRequestType.CommentGetComments,
15 | requestId,
16 | '',
17 | ServerRequestStatusType.Sent
18 | )
19 | }
20 |
21 | const sortCommentsByDate = (sortedObjects: comments) => {
22 | const commentKeys = Object.keys(sortedObjects)
23 | if (commentKeys.length > 1) {
24 | return _.fromPairs(_.toPairs(sortedObjects)
25 | .sort((a: any, b: any) => parseInt(b[1].creationDate, 10) - parseInt(a[1].creationDate, 10)).slice(0, 3))
26 |
27 | }
28 | return sortedObjects
29 | }
30 |
31 | export default {
32 | createGetCommentsRequest,
33 | sortCommentsByDate
34 | }
--------------------------------------------------------------------------------
/src/api/CommonAPI.ts:
--------------------------------------------------------------------------------
1 | import * as moment from 'moment/moment'
2 | /**
3 | * Log the data
4 | * @param title log title
5 | * @param data log data object
6 | */
7 | const logger = (title: string, ...data: any[]) => {
8 | const randomColor = getRandomColor()
9 |
10 | window['console']['log'](`\n\n%c ======= ${title} ======= %c${moment().format('HH:mm:ss SSS')} \n`, `color:${randomColor};font-size:15`
11 | , `color:${getRandomColor()};font-size:15`)
12 | window['console']['log'](``)
13 | window['console']['log'](` `, data)
14 | window['console']['log'](`\n =========================================`)
15 |
16 | }
17 |
18 | /**
19 | * Get random color in hex
20 | */
21 | const getRandomColor = () => {
22 | let letters = '0123456789ABCDEF'
23 | let color = '#'
24 | for (let i = 0; i < 6; i++) {
25 | color += letters[Math.floor(Math.random() * 16)]
26 | }
27 | return color
28 | }
29 |
30 | const updateObject = (oldObject: any, updatedProperties: any) => {
31 | return {
32 | ...oldObject,
33 | ...updatedProperties
34 | }
35 | }
36 |
37 | const getStateSlice = (state: any) => state.toJS()['locale']
38 |
39 | export default {
40 | logger,
41 | getRandomColor,
42 | updateObject,
43 | getStateSlice
44 | }
45 |
--------------------------------------------------------------------------------
/src/api/PostAPI.ts:
--------------------------------------------------------------------------------
1 | import {List} from 'immutable'
2 |
3 | // Get tags from post content
4 | export const detectTags: (content: string, character: string) => string[] = (content: string, character: string) => {
5 |
6 | return content.split(' ').filter((word) => {
7 | return (word.slice(0,1) === character)
8 | })
9 |
10 | }
11 | export const getContentTags = (content: string) => {
12 | let newTags: string[] = []
13 | let tags = detectTags(content,'#')
14 | tags.forEach((tag) => {
15 | newTags.push(tag.slice(1))
16 | })
17 | return newTags
18 | }
19 |
20 | export const sortObjectsDate = (objects: any) => {
21 | let sortedObjects = objects
22 |
23 | // Sort posts with creation date
24 | sortedObjects.sort((a: any, b: any) => {
25 | return parseInt(b.creationDate,10) - parseInt(a.creationDate,10)
26 |
27 | })
28 |
29 | return sortedObjects
30 | }
31 |
32 | export const sortImuObjectsDate = (objects: List