Supported offline for the app along with small fixes

index.d.ts

@@ -0,0 +1,3 @@
+declare module 'redux-offline'
+declare module 'redux-offline/lib/defaults'
+declare module 'redux-offline-immutable-config'

package-lock.json

@@ -276,6 +276,15 @@
         "react-is": "^16.6.3"
       }
     },
+    "@redux-offline/redux-offline": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@redux-offline/redux-offline/-/redux-offline-2.5.1.tgz",
+      "integrity": "sha512-XQ8kK77cxAkCxPhlsQhvZlphdmoA7JHFpmSq6CLlxoX40ZRPPc5Yw+SeHCQG9sPE6kTEnrfnNYZOSEEf9ODkVQ==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "redux-persist": "^4.6.0"
+      }
+    },
     "@snyk/dep-graph": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@snyk/dep-graph/-/dep-graph-1.4.0.tgz",
@@ -5392,7 +5401,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5410,11 +5420,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5427,15 +5439,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5538,7 +5553,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5548,6 +5564,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5560,17 +5577,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5587,6 +5607,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5659,7 +5680,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5669,6 +5691,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5744,7 +5767,8 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5774,6 +5798,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5791,6 +5816,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5829,11 +5855,13 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         }
       }
     },
@@ -15701,6 +15729,58 @@
         "lodash.isplainobject": "^4.0.6"
       }
     },
+    "redux-offline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/redux-offline/-/redux-offline-2.0.0.tgz",
+      "integrity": "sha1-WJbpVHdBfIFz4IP08tl3Rm7JGAg=",
+      "requires": {
+        "redux-persist": "^4.5.0"
+      }
+    },
+    "redux-offline-immutable-config": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/redux-offline-immutable-config/-/redux-offline-immutable-config-1.0.0.tgz",
+      "integrity": "sha1-kuBq77NZl6s76glfFxOiAFuTgtc=",
+      "requires": {
+        "immutable": "^3.8.1",
+        "redux-persist-immutable": "^4.3.0"
+      },
+      "dependencies": {
+        "immutable": {
+          "version": "3.8.2",
+          "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
+          "integrity": "sha1-wkOZUUVbs5kT2vKBN28VMOEErfM="
+        }
+      }
+    },
+    "redux-persist": {
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-4.10.2.tgz",
+      "integrity": "sha512-U+e0ieMGC69Zr72929iJW40dEld7Mflh6mu0eJtVMLGfMq/aJqjxUM1hzyUWMR1VUyAEEdPHuQmeq5ti9krIgg==",
+      "requires": {
+        "json-stringify-safe": "^5.0.1",
+        "lodash": "^4.17.4",
+        "lodash-es": "^4.17.4"
+      }
+    },
+    "redux-persist-immutable": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/redux-persist-immutable/-/redux-persist-immutable-4.3.1.tgz",
+      "integrity": "sha512-X8eYC3N9RyjOlZSpxGhLnCiCiCRncaNUfCFWD/DJdpK+kE1D08HcIiK1mBEFrR7Nk/73wX7Gc6GDq60X0l2P6Q==",
+      "requires": {
+        "redux-persist": "^4.0.0",
+        "redux-persist-transform-immutable": "^4.1.0"
+      }
+    },
+    "redux-persist-transform-immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/redux-persist-transform-immutable/-/redux-persist-transform-immutable-4.3.0.tgz",
+      "integrity": "sha1-JHIMmfBwfdmekguV+FGuPRuqbtg=",
+      "requires": {
+        "transit-immutable-js": "^0.7.0",
+        "transit-js": "^0.8.846"
+      }
+    },
     "redux-saga": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/redux-saga/-/redux-saga-0.16.2.tgz",
@@ -17875,6 +17955,16 @@
       "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
       "dev": true
     },
+    "transit-immutable-js": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/transit-immutable-js/-/transit-immutable-js-0.7.0.tgz",
+      "integrity": "sha1-mT4lCJtjEf9AIUD1VidtbSUwBdk="
+    },
+    "transit-js": {
+      "version": "0.8.861",
+      "resolved": "https://registry.npmjs.org/transit-js/-/transit-js-0.8.861.tgz",
+      "integrity": "sha512-4O9OrYPZw6C0M5gMTvaeOp+xYz6EF79JsyxIvqXHlt+pisSrioJWFOE80N8aCPoJLcNaXF442RZrVtdmd4wkDQ=="
+    },
     "trim-newlines": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@material-ui/core": "^3.6.1",
     "@material-ui/icons": "^3.0.1",
+    "@redux-offline/redux-offline": "^2.5.1",
     "@types/ramda": "^0.25.42",
     "@types/react-helmet": "^5.0.7",
     "@types/redux-devtools": "^3.0.44",
@@ -71,6 +72,8 @@
     "redux": "4.0.1",
     "redux-actions": "^2.6.4",
     "redux-immutable": "4.0.0",
+    "redux-offline": "^2.0.0",
+    "redux-offline-immutable-config": "^1.0.0",
     "redux-saga": "^0.16.2",
     "redux-thunk": "^2.3.0",
     "reflect-metadata": "^0.1.12",

src/components/comment/CommentComponent.tsx

@@ -377,9 +377,9 @@ export class CommentComponent extends Component<ICommentComponentProps, IComment
                 className={classes.textField}
                 fullWidth={true}
               /> : <div className={classNames('animate2-top10', classes.commentBody)}>{
-                
+
                 <Linkify properties={{ target: '_blank', style: { color: 'blue' } }}>
-                  {reactStringReplace(this.state.text, /#(\w+)/g, (match: string, i: string) => (
+                  {reactStringReplace(this.state.text, /#(\w+)/g, (match: string, i: number) => (
                     <NavLink
                       style={{ color: 'green' }}
                       key={match + i}
@@ -391,7 +391,7 @@ export class CommentComponent extends Component<ICommentComponentProps, IComment
                       }}
                     >
                       #{match}
-        
+
                     </NavLink>
 
                   ))}

src/components/post/PostComponent.tsx

@@ -384,15 +384,15 @@ export class PostComponent extends Component<IPostComponentProps, IPostComponent
       </div>
     )
 
-    const { 
+    const {
-      ownerUserId, 
+      ownerUserId,
-      ownerDisplayName, 
+      ownerDisplayName,
-      creationDate, 
+      creationDate,
-      image, 
+      image,
-      body, 
+      body,
-      id, 
+      id,
-      disableComments, 
+      disableComments,
-      commentCounter, 
+      commentCounter,
       disableSharing ,
     } = post.toJS() as any
     // Define variables
@@ -412,7 +412,7 @@ export class PostComponent extends Component<IPostComponentProps, IPostComponent
 
         <CardContent className={classes.postBody}>
           <Linkify properties={{ target: '_blank', style: { color: 'blue' } }}>
-            {reactStringReplace(body, /#(\w+)/g, (match: string, i: string) => (
+            {reactStringReplace(body, /#(\w+)/g, (match: string, i: number) => (
               <NavLink
                 style={{ color: 'green' }}
                 key={match + i}
@@ -424,7 +424,7 @@ export class PostComponent extends Component<IPostComponentProps, IPostComponent
                 }}
               >
                 #{match}
-  
+
               </NavLink>
 
             ))}
@@ -465,15 +465,15 @@ export class PostComponent extends Component<IPostComponentProps, IPostComponent
 
         <CommentGroup open={this.state.openComments} comments={commentList} ownerPostUserId={ownerUserId!} onToggleRequest={this.handleOpenComments} isPostOwner={this.props.isPostOwner!} disableComments={disableComments!} postId={id} />
 
-        <ShareDialog 
+        <ShareDialog
-        onClose={this.handleCloseShare} 
+        onClose={this.handleCloseShare}
-        shareOpen={this.state.shareOpen} 
+        shareOpen={this.state.shareOpen}
-        onCopyLink={this.handleCopyLink} 
+        onCopyLink={this.handleCopyLink}
         openCopyLink={this.state.openCopyLink}
-        post={post} 
+        post={post}
 
         />
-       
+
         <PostWrite
           open={this.state.openPostWrite}
           onRequestClose={this.handleClosePostWrite}

src/config/environment.dev.ts

@@ -2,15 +2,16 @@ import { LanguageType } from 'store/reducers/locale/langugeType'
 
 export const environment = {
   firebase: {
-    apiKey: 'AIzaSyAHOZ7rWGDODCwJMB3WIt63CAIa90qI-jg',
+      apiKey: 'AIzaSyDzFdZteXViq65uzFp4sAmesXk43uW_VfU',
-    authDomain: 'test-4515a.firebaseapp.com',
+      authDomain: 'react-social-86ea9.firebaseapp.com',
-    databaseURL: 'https://test-4515a.firebaseio.com',
+      databaseURL: 'https://react-social-86ea9.firebaseio.com',
-    projectId: 'test-4515a',
+      projectId: 'react-social-86ea9',
-    storageBucket: 'test-4515a.appspot.com',
+      storageBucket: 'react-social-86ea9.appspot.com',
-    messagingSenderId: '964743099489'
+      messagingSenderId: '760013286552',
+      appId: '1:760013286552:web:4c9d52d1a2e0b824'
   },
   settings: {
-    enabledOAuthLogin: true,
+    enabledOAuthLogin: false,
     appName: 'Green',
     defaultProfileCover: 'https://firebasestorage.googleapis.com/v0/b/open-social-33d92.appspot.com/o/images%2F751145a1-9488-46fd-a97e-04018665a6d3.JPG?alt=media&token=1a1d5e21-5101-450e-9054-ea4a20e06c57',
     defaultLanguage: LanguageType.English

src/store/configureStore.dev.ts

@@ -9,6 +9,10 @@ import { rootReducer } from 'store/reducers'
 import { fromJS, Map } from 'immutable'
 import DevTools from './devTools'
 import { routerMiddleware, connectRouter } from 'connected-react-router/immutable'
+import { offline } from '@redux-offline/redux-offline'
+import defaultConfig from '@redux-offline/redux-offline/lib/defaults'
+// replacing redux-offline defaults with immutable* counterparts
+import { persist, persistAutoRehydrate, offlineStateLens } from 'redux-offline-immutable-config'
 
 // Create a history of your choosing (we're using a browser history in this case)
 export const history = createHistory()
@@ -31,8 +35,23 @@ let initialState = {
 const composeEnhancers = composeWithDevTools({
       // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
     })
+
+const persistOptions = {}
+const persistCallback = () => {
+  console.log('rehydration completed')
+}
+
+const offlineConfig = {
+  ...defaultConfig,
+  persist,
+  persistAutoRehydrate,
+  persistOptions,
+  persistCallback,
+  offlineStateLens
+}
+
 let store: Store<any> = createStore(rootReducer(history), fromJS(initialState), composeEnhancers(
-  applyMiddleware(logger,thunk, routerMiddleware(history), sagaMiddleware)
+  applyMiddleware(logger,thunk, routerMiddleware(history), sagaMiddleware), offline(offlineConfig)
 ))
 
 export default {store, runSaga: sagaMiddleware.run, close: () => store.dispatch(END), history}

src/store/configureStore.prod.ts

@@ -7,6 +7,11 @@ import createSagaMiddleware, { END } from 'redux-saga'
 import { rootReducer } from 'store/reducers'
 import { fromJS } from 'immutable'
 import { routerMiddleware, connectRouter } from 'connected-react-router/immutable'
+import { offline } from '@redux-offline/redux-offline'
+import defaultConfig from '@redux-offline/redux-offline/lib/defaults'
+// replacing redux-offline defaults with immutable* counterparts
+import { persist, persistAutoRehydrate, offlineStateLens } from 'redux-offline-immutable-config'
+
 // Create a history of your choosing (we're using a browser history in this case)
 export const history = createHistory()
 
@@ -17,9 +22,23 @@ let initialState = {
 
 }
 
+const persistOptions = {}
+const persistCallback = () => {
+  console.log('rehydration completed')
+}
+
+const offlineConfig = {
+  ...defaultConfig,
+  persist,
+  persistAutoRehydrate,
+  persistOptions,
+  persistCallback,
+  offlineStateLens
+}
+
 // - Config and create store of redux
 let store: redux.Store<any> = redux.createStore(rootReducer(history), fromJS(initialState), redux.compose(
-  redux.applyMiddleware(thunk, routerMiddleware(history), sagaMiddleware)
+  redux.applyMiddleware(thunk, routerMiddleware(history), sagaMiddleware), offline(offlineConfig)
 ))
 
 export default {store, runSaga: sagaMiddleware.run, close: () => store.dispatch(END), history}

tsconfig.json

@@ -35,7 +35,8 @@
 
     },
     "include": [
-        "src/**/*"
+        "src/**/*",
+        "index.d.ts"
     ],
     "exclude": [
         "node_modules",
@@ -46,4 +47,4 @@
         "jest",
         "src/setupTests.ts"
     ]
-}
+}

tsconfig.prod.json

@@ -35,7 +35,8 @@
 
     },
     "include": [
-        "src/**/*"
+        "src/**/*",
+        "index.d.ts"
     ],
     "exclude": [
         "node_modules",
@@ -46,4 +47,4 @@
         "jest",
         "src/setupTests.ts"
     ]
-}
+}