[New Feature] Supporting RTL

README.md

@@ -145,6 +145,7 @@ There are three main layers:
   - Add reset password, confirm password and authorizing by GitHub, Google and Facebook.
   - Add scroll auto loading for show posts and people pages.
   - Using [Firestore](https://firebase.google.com/docs/firestore/)
+  - Supportig `Right To Left`
   - Some cool stuff :)
 ## Can I connect React Social Network to other data platforms ? :bowtie:
   Your server side is on `PHP`, `Java`,`ASP.NET`, `Python`, etc. Or you are using serverless platforms such as `Google Cloud`, `AWS`, `Azure`, etc. You can connect `React Social Network` to any data platform. You only need to implement the [interfaces of core services](https://github.com/Qolzam/react-social-network/tree/next/src/core/services) like implementation of [firestoreClient](https://github.com/Qolzam/react-social-network/tree/next/src/data/firestoreClient).
@@ -203,6 +204,9 @@ We use [SemVer](http://semver.org/) for versioning. For the versions available,
   - Amir Movahedi
   - See also the list of [contributors](https://github.com/Qolzam/react-social-network/contributors) who participated in this project.
 
+## How To Support
+- [Contribution](https://github.com/Qolzam/react-social-network/blob/next/CONTRIBUTING.md)
+- Fork || Star
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE](https://github.com/Qolzam/react-social-network/blob/next/LICENSE) file for details

docs/README.md

@@ -145,6 +145,7 @@ There are three main layers:
   - Add reset password, confirm password and authorizing by GitHub, Google and Facebook.
   - Add scroll auto loading for show posts and people pages.
   - Using [Firestore](https://firebase.google.com/docs/firestore/)
+  - Supportig `Right To Left`
   - Some cool stuff :)
 ## Can I connect React Social Network to other data platforms ? :bowtie:
   Your server side is on `PHP`, `Java`,`ASP.NET`, `Python`, etc. Or you are using serverless platforms such as `Google Cloud`, `AWS`, `Azure`, etc. You can connect `React Social Network` to any data platform. You only need to implement the [interfaces of core services](https://github.com/Qolzam/react-social-network/tree/next/src/core/services) like implementation of [firestoreClient](https://github.com/Qolzam/react-social-network/tree/next/src/data/firestoreClient).

package.json

@@ -28,6 +28,7 @@
     "firebase": "^4.6.2",
     "install": "^0.10.2",
     "inversify": "^4.6.0",
+    "jss-rtl": "^0.2.1",
     "keycode": "^2.1.9",
     "lodash": "^4.17.4",
     "material-ui": "^1.0.0-beta.34",

src/components/home/HomeComponent.tsx

@@ -56,7 +56,7 @@ import {
 import { IHomeComponentProps } from './IHomeComponentProps'
 import { IHomeComponentState } from './IHomeComponentState'
 
-const drawerWidth = 240
+const drawerWidth = 220
 const styles = (theme: any) => ({
   root: {
     width: '100%',
@@ -99,7 +99,7 @@ const styles = (theme: any) => ({
     backgroundColor: '#EEEEEE'
   },
   content: {
-    backgroundColor: 'transparent',    
+    backgroundColor: 'transparent',
     width: '100%',
     flexGrow: 1,
     padding: theme.spacing.unit * 1,
@@ -191,49 +191,49 @@ export class HomeComponent extends Component<IHomeComponentProps, IHomeComponent
   render() {
     const HR = HomeRouter as any
     const { loaded, authed, loadDataStream, mergedPosts, hasMorePosts, showSendFeedback, translate, classes, theme } = this.props
-    const {drawerOpen} = this.state
+    const { drawerOpen } = this.state
     const drawer = (
       <>
 
-        <NavLink to='/'>
+      <NavLink to='/'>
-          <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
+        <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
-            <ListItemIcon>
-              <SvgHome />
-            </ListItemIcon>
-            <ListItemText inset primary={translate!('sidebar.home')} />
-          </MenuItem>
-        </NavLink>
-        <NavLink to={`/${this.props.uid}`}>
-          <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
-            <ListItemIcon>
-              <SvgAccountCircle />
-            </ListItemIcon>
-            <ListItemText inset primary={translate!('sidebar.profile')} />
-          </MenuItem>
-        </NavLink>
-        <NavLink to='/people'>
-          <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
-            <ListItemIcon>
-              <SvgPeople />
-            </ListItemIcon>
-            <ListItemText inset primary={translate!('sidebar.people')} />
-          </MenuItem>
-        </NavLink>
-        <Divider />
-        <NavLink to='/settings'>
-          <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
-            <ListItemIcon>
-              <SvgSettings />
-            </ListItemIcon>
-            <ListItemText inset primary={translate!('sidebar.settings')} />
-          </MenuItem>
-        </NavLink>
-        <MenuItem onClick={() => showSendFeedback!()} style={{ color: 'rgb(117, 117, 117)' }}>
           <ListItemIcon>
-            <SvgFeedback />
+            <SvgHome />
           </ListItemIcon>
-          <ListItemText inset primary={translate!('sidebar.sendFeedback')} />
+          <ListItemText inset primary={translate!('sidebar.home')} />
         </MenuItem>
+      </NavLink>
+      <NavLink to={`/${this.props.uid}`}>
+        <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
+          <ListItemIcon>
+            <SvgAccountCircle />
+          </ListItemIcon>
+          <ListItemText inset primary={translate!('sidebar.profile')} />
+        </MenuItem>
+      </NavLink>
+      <NavLink to='/people'>
+        <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
+          <ListItemIcon>
+            <SvgPeople />
+          </ListItemIcon>
+          <ListItemText inset primary={translate!('sidebar.people')} />
+        </MenuItem>
+      </NavLink>
+      <Divider />
+      <NavLink to='/settings'>
+        <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
+          <ListItemIcon>
+            <SvgSettings />
+          </ListItemIcon>
+          <ListItemText inset primary={translate!('sidebar.settings')} />
+        </MenuItem>
+      </NavLink>
+      <MenuItem onClick={() => showSendFeedback!()} style={{ color: 'rgb(117, 117, 117)' }}>
+        <ListItemIcon>
+          <SvgFeedback />
+        </ListItemIcon>
+        <ListItemText inset primary={translate!('sidebar.sendFeedback')} />
+      </MenuItem>
       </>
     )
 
@@ -245,7 +245,6 @@ export class HomeComponent extends Component<IHomeComponentProps, IHomeComponent
           <Hidden mdUp>
             <Drawer
               variant='temporary'
-              anchor={anchor}
               open={this.state.drawerOpen}
               classes={{
                 paper: classes.drawerPaper,
@@ -258,8 +257,8 @@ export class HomeComponent extends Component<IHomeComponentProps, IHomeComponent
               <div>
                 <div className={classes.drawerHeader} />
                 <MenuList style={{ color: 'rgb(117, 117, 117)', width: '210px' }}>
-                <Divider />
+                  <Divider />
-                {drawer}
+                  {drawer}
                 </MenuList>
               </div>
             </Drawer>
@@ -273,8 +272,8 @@ export class HomeComponent extends Component<IHomeComponentProps, IHomeComponent
               }}
             >
               <div>
-              <MenuList className={classes.menu} style={{ color: 'rgb(117, 117, 117)', width: '210px' }}>
+                <MenuList className={classes.menu} style={{ color: 'rgb(117, 117, 117)', width: '210px' }}>
-                {drawer}
+                  {drawer}
                 </MenuList>
               </div>
             </Drawer>

src/components/homeHeader/HomeHeaderComponent.tsx

@@ -2,6 +2,7 @@
 import React, { Component } from 'react'
 import { NavLink } from 'react-router-dom'
 import { connect } from 'react-redux'
+import classNames from 'classnames'
 
 // - Material UI
 import SvgDehaze from 'material-ui-icons/Dehaze'
@@ -172,7 +173,8 @@ export class HomeHeaderComponent extends Component<IHomeHeaderComponentProps, IH
 
   // Render app DOM component
   render () {
-    const { classes , translate} = this.props
+    const { classes , translate, theme} = this.props
+    const anchor = theme.direction === 'rtl' ? 'right' : 'left'
     return (
 
       <AppBar position='fixed' color='secondary'>
@@ -188,7 +190,7 @@ export class HomeHeaderComponent extends Component<IHomeHeaderComponentProps, IH
           </Typography>
           <div className='homeHeader__title-root'>
           <Hidden smDown>
-           <div className='homeHeader__title'>{this.props.title}</div> 
+           <div className={classNames({'homeHeader__title-left': anchor === 'left', 'homeHeader__title-right': anchor === 'right' })}>{this.props.title}</div> 
            </Hidden>
           </div>
 
@@ -271,4 +273,4 @@ const mapStateToProps = (state: any, ownProps: IHomeHeaderComponentProps) => {
 }
 
 // - Connect component to redux store
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(HomeHeaderComponent as any) as any)
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles, { withTheme: true })(HomeHeaderComponent as any) as any)

src/components/homeHeader/IHomeHeaderComponentProps.ts

@@ -65,6 +65,11 @@ export interface IHomeHeaderComponentProps {
    * Material ui theme style
    */
   classes?: any
+    
+  /**
+   * Theme
+   */
+  theme?: any
 
   /**
    * Translate to locale string

src/styles/app.css

@@ -676,9 +676,7 @@ g__input-underline::after {
 .homeHeader__title-root {
   flex: 1; }
 
-.homeHeader__title {
+.homeHeader__title, .homeHeader__title-right, .homeHeader__title-left {
-  border-left: 1px solid #fff;
-  padding-left: 24px;
   margin-left: 24px;
   line-height: 32px;
   font-weight: 500;
@@ -687,6 +685,14 @@ g__input-underline::after {
   -webkit-font-smoothing: antialiased;
   color: #fff; }
 
+.homeHeader__title-right {
+  border-right: 1px solid #fff;
+  padding-right: 24px; }
+
+.homeHeader__title-left {
+  border-left: 1px solid #fff;
+  padding-left: 24px; }
+
 .homeHeader__right {
   padding-left: 30px;
   padding-right: 30px;

src/styles/components/_homeHeader.scss

@@ -3,8 +3,6 @@
 }
 
 .homeHeader__title {
-  border-left: 1px solid #fff;
-  padding-left: 24px;
   margin-left: 24px;
   line-height: 32px;
   font-weight: 500;
@@ -14,6 +12,17 @@
   color: #fff;
 }
 
+.homeHeader__title-right {
+  @extend .homeHeader__title;
+  border-right: 1px solid #fff;
+  padding-right: 24px;    
+}
+.homeHeader__title-left {
+  @extend .homeHeader__title;
+  border-left: 1px solid #fff;
+  padding-left: 24px;  
+}
+
 .homeHeader__right {
   padding-left: 30px;
   padding-right: 30px;

yarn.lock

@@ -1671,7 +1671,7 @@ debug@^3.1.0:
   dependencies:
     ms "2.0.0"
 
-debuglog@*, debuglog@^1.0.1:
+debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
 
@@ -3199,7 +3199,7 @@ import-local@^0.1.1:
     pkg-dir "^2.0.0"
     resolve-cwd "^2.0.0"
 
-imurmurhash@*, imurmurhash@^0.1.4:
+imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
 
@@ -4050,6 +4050,12 @@ jss-props-sort@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-6.0.0.tgz#9105101a3b5071fab61e2d85ea74cc22e9b16323"
 
+jss-rtl@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/jss-rtl/-/jss-rtl-0.2.1.tgz#06fcde4a9369f8c6f660b700f1c68a5d7742eebb"
+  dependencies:
+    rtl-css-js "^1.7.0"
+
 jss-template@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/jss-template/-/jss-template-1.0.1.tgz#09aed9d86cc547b07f53ef355d7e1777f7da430a"
@@ -4224,10 +4230,6 @@ lodash-es@^4.17.4, lodash-es@^4.17.5, lodash-es@^4.2.1:
   version "4.17.5"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.5.tgz#9fc6e737b1c4d151d8f9cae2247305d552ce748f"
 
-lodash._baseindexof@*:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
-
 lodash._baseuniq@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
@@ -4235,28 +4237,10 @@ lodash._baseuniq@~4.6.0:
     lodash._createset "~4.0.0"
     lodash._root "~3.0.0"
 
-lodash._bindcallback@*:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
-
-lodash._cacheindexof@*:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
-
-lodash._createcache@*:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
-  dependencies:
-    lodash._getnative "^3.0.0"
-
 lodash._createset@~4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
 
-lodash._getnative@*, lodash._getnative@^3.0.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
-
 lodash._reinterpolate@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -4309,10 +4293,6 @@ lodash.mergewith@^4.6.0:
   version "4.6.1"
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927"
 
-lodash.restparam@*:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-
 lodash.startswith@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/lodash.startswith/-/lodash.startswith-4.2.1.tgz#c598c4adce188a27e53145731cdc6c0e7177600c"
@@ -6415,7 +6395,7 @@ readable-stream@~1.1.10:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readdir-scoped-modules@*, readdir-scoped-modules@^1.0.0:
+readdir-scoped-modules@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.0.2.tgz#9fafa37d286be5d92cbaebdee030dc9b5f406747"
   dependencies:
@@ -6756,6 +6736,10 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^2.0.0"
     inherits "^2.0.1"
 
+rtl-css-js@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.8.0.tgz#af8ccdf5944bd8d6a2657fcf2e4a4e9adf62361b"
+
 run-async@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
@@ -6851,11 +6835,11 @@ semver-diff@^2.0.0:
   dependencies:
     semver "^5.0.3"
 
-"semver@2 >=2.2.1 || 3.x || 4 || 5", "semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", "semver@^2.3.0 || 3.x || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@~5.4.1:
+"semver@2 >=2.2.1 || 3.x || 4 || 5", "semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", "semver@^2.3.0 || 3.x || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@~5.4.1:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
 
-semver@^5.0.1, semver@^5.0.3, semver@^5.5.0:
+semver@^5.0.1, semver@^5.0.3, semver@^5.1.0, semver@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
 
@@ -7909,7 +7893,7 @@ vali-date@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/vali-date/-/vali-date-1.0.0.tgz#1b904a59609fb328ef078138420934f6b86709a6"
 
-validate-npm-package-license@*, validate-npm-package-license@^3.0.1:
+validate-npm-package-license@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
   dependencies: