Supported offline for the app along with small fixes

2019-05-04 22:42:44 +05:30
parent 745ecdb2e1
commit 7e4dc2a587
10 changed files with 181 additions and 44 deletions
--- a/index.d.ts
+++ b/index.d.ts
@@ -0,0 +1,3 @@
+declare module 'redux-offline'
+declare module 'redux-offline/lib/defaults'
+declare module 'redux-offline-immutable-config'
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/components/comment/CommentComponent.tsx
+++ b/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>

                  ))}
--- a/src/components/post/PostComponent.tsx
+++ b/src/components/post/PostComponent.tsx
@@ -384,15 +384,15 @@ export class PostComponent extends Component<IPostComponentProps, IPostComponent
      </div>
    )

-    const { 
-      ownerUserId, 
-      ownerDisplayName, 
-      creationDate, 
-      image, 
-      body, 
-      id, 
-      disableComments, 
-      commentCounter, 
+    const {
+      ownerUserId,
+      ownerDisplayName,
+      creationDate,
+      image,
+      body,
+      id,
+      disableComments,
+      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 
-        onClose={this.handleCloseShare} 
-        shareOpen={this.state.shareOpen} 
-        onCopyLink={this.handleCopyLink} 
+        <ShareDialog
+        onClose={this.handleCloseShare}
+        shareOpen={this.state.shareOpen}
+        onCopyLink={this.handleCopyLink}
        openCopyLink={this.state.openCopyLink}
-        post={post} 
+        post={post}

        />
-       
+
        <PostWrite
          open={this.state.openPostWrite}
          onRequestClose={this.handleClosePostWrite}
--- a/src/config/environment.dev.ts
+++ b/src/config/environment.dev.ts
@@ -2,15 +2,16 @@ import { LanguageType } from 'store/reducers/locale/langugeType'

 export const environment = {
  firebase: {
-    apiKey: 'AIzaSyAHOZ7rWGDODCwJMB3WIt63CAIa90qI-jg',
-    authDomain: 'test-4515a.firebaseapp.com',
-    databaseURL: 'https://test-4515a.firebaseio.com',
-    projectId: 'test-4515a',
-    storageBucket: 'test-4515a.appspot.com',
-    messagingSenderId: '964743099489'
+      apiKey: 'AIzaSyDzFdZteXViq65uzFp4sAmesXk43uW_VfU',
+      authDomain: 'react-social-86ea9.firebaseapp.com',
+      databaseURL: 'https://react-social-86ea9.firebaseio.com',
+      projectId: 'react-social-86ea9',
+      storageBucket: 'react-social-86ea9.appspot.com',
+      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
--- a/src/store/configureStore.dev.ts
+++ b/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}
--- a/src/store/configureStore.prod.ts
+++ b/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}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -35,7 +35,8 @@

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

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