feat: previsualize changes when sync space

Author: pyphilia

package.json

@@ -109,6 +109,7 @@
     "react-countup": "4.3.3",
     "react-detect-offline": "2.4.0",
     "react-dev-utils": "10.2.0",
+    "react-diff-viewer": "3.0.2",
     "react-dom": "16.13.0",
     "react-i18next": "11.3.3",
     "react-immutable-proptypes": "2.1.0",

src/App.js

@@ -15,13 +15,15 @@ import SpacesNearby from './components/SpacesNearby';
 import Settings from './components/Settings';
 import LoadSpace from './components/LoadSpace';
 import SpaceScreen from './components/space/SpaceScreen';
+import SyncScreen from './components/space/SyncScreen';
 import DeveloperScreen from './components/developer/DeveloperScreen';
 import { OnlineTheme, OfflineTheme } from './themes';
 import Dashboard from './components/dashboard/Dashboard';
 import SignInScreen from './components/signin/SignInScreen';
 import Authorization from './components/Authorization';
 import {
   SETTINGS_PATH,
+  SYNC_SPACE_PATH,
   SPACE_PATH,
   HOME_PATH,
   SPACES_NEARBY_PATH,
@@ -179,6 +181,11 @@ export class App extends Component {
                     path={SETTINGS_PATH}
                     component={Authorization()(Settings)}
                   />
+                  <Route
+                    exact
+                    path={SYNC_SPACE_PATH}
+                    component={Authorization()(SyncScreen)}
+                  />
                   <Route
                     exact
                     path={SPACE_PATH}

src/actions/space.js

@@ -39,8 +39,6 @@ import {
   SHOW_EXPORT_SPACE_PROMPT_CHANNEL,
   RESPOND_EXPORT_SPACE_PROMPT_CHANNEL,
   SAVE_SPACE_CHANNEL,
-  SHOW_SYNC_SPACE_PROMPT_CHANNEL,
-  RESPOND_SYNC_SPACE_PROMPT_CHANNEL,
   SYNC_SPACE_CHANNEL,
   SYNCED_SPACE_CHANNEL,
   CLEAR_USER_INPUT_CHANNEL,
@@ -147,25 +145,25 @@ const getRemoteSpace = async ({ id }) => async dispatch => {
     await isErrorResponse(response);
 
     const remoteSpace = await response.json();
-    let localSpace = {};
-
-    // try to merge with local space if available
-    try {
-      window.ipcRenderer.send(GET_SPACE_CHANNEL, { id });
-      localSpace = await waitForSpace({ online: true });
-    } catch (localError) {
-      // ignore error
-    }
+    // let localSpace = {};
+
+    // // try to merge with local space if available
+    // try {
+    //   window.ipcRenderer.send(GET_SPACE_CHANNEL, { id });
+    //   localSpace = await waitForSpace({ online: true });
+    // } catch (localError) {
+    //   // ignore error
+    // }
 
     // in the future we could probably try to deep merge
-    const space = {
-      ...remoteSpace,
-      ...localSpace,
-    };
+    // const space = {
+    //   ...remoteSpace,
+    //   ...localSpace,
+    // };
 
     dispatch({
       type: GET_SPACE_SUCCEEDED,
-      payload: space,
+      payload: remoteSpace,
     });
   } catch (err) {
     toastr.error(ERROR_MESSAGE_HEADER, ERROR_GETTING_SPACE_MESSAGE);
@@ -342,17 +340,8 @@ const syncSpace = async ({ id }) => async dispatch => {
     await isErrorResponse(response);
     const remoteSpace = await response.json();
 
-    // show confirmation prompt
-    window.ipcRenderer.send(SHOW_SYNC_SPACE_PROMPT_CHANNEL);
-
-    // this runs when the user has responded to the sync dialog
-    window.ipcRenderer.once(RESPOND_SYNC_SPACE_PROMPT_CHANNEL, (event, res) => {
-      // only sync the space if the response is positive
-      if (res === 1) {
-        dispatch(flagSyncingSpace(true));
-        window.ipcRenderer.send(SYNC_SPACE_CHANNEL, { remoteSpace });
-      }
-    });
+    dispatch(flagSyncingSpace(true));
+    window.ipcRenderer.send(SYNC_SPACE_CHANNEL, { remoteSpace });
 
     // this runs once the space has been synced
     window.ipcRenderer.once(SYNCED_SPACE_CHANNEL, (event, res) => {

src/components/common/MainMenu.js

@@ -44,7 +44,7 @@ export class MainMenu extends Component {
   static propTypes = {
     t: PropTypes.func.isRequired,
     developerMode: PropTypes.bool.isRequired,
-    history: PropTypes.shape({ replace: PropTypes.func.isRequired }).isRequired,
+    history: PropTypes.shape({ push: PropTypes.func.isRequired }).isRequired,
     match: PropTypes.shape({ path: PropTypes.string.isRequired }).isRequired,
     dispatchSignOut: PropTypes.func.isRequired,
     authenticated: PropTypes.bool.isRequired,
@@ -54,13 +54,13 @@ export class MainMenu extends Component {
 
   handleClick = path => {
     const {
-      history: { replace },
+      history: { push },
     } = this.props;
     if (path) {
-      replace(path);
+      push(path);
     } else {
       // default to home
-      replace(HOME_PATH);
+      push(HOME_PATH);
     }
   };
 

src/components/common/__snapshots__/MediaCard.test.js.snap

@@ -100,7 +100,7 @@ exports[`<MediaCard /> <MediaCard /> with showActions = true with text defined r
         }
       }
     />
-    <withI18nextTranslation(WithStyles(Connect(SyncButton)))
+    <withRouter(withI18nextTranslation(WithStyles(SyncButton)))
       spaceId="id"
     />
     <WithStyles(ForwardRef(IconButton))
@@ -172,7 +172,7 @@ exports[`<MediaCard /> <MediaCard /> with showActions = true with text undefined
         }
       }
     />
-    <withI18nextTranslation(WithStyles(Connect(SyncButton)))
+    <withRouter(withI18nextTranslation(WithStyles(SyncButton)))
       spaceId="id"
     />
   </WithStyles(ForwardRef(CardActions))>

src/components/space/SpaceGrid.js

@@ -30,7 +30,7 @@ class SpaceGrid extends Component {
     ).isRequired,
     history: PropTypes.shape({
       length: PropTypes.number.isRequired,
-      replace: PropTypes.func.isRequired,
+      push: PropTypes.func.isRequired,
     }).isRequired,
     dispatchClearSpace: PropTypes.func.isRequired,
     t: PropTypes.func.isRequired,
@@ -124,10 +124,10 @@ class SpaceGrid extends Component {
 
     [...spaces].forEach((space, index) => {
       const { id, image = {}, description } = space;
-      const { replace } = history;
+      const { push } = history;
 
       const viewLink = () => {
-        replace(`/space/${id}?saved=${saved}`);
+        push(`/space/${id}?saved=${saved}`);
       };
 
       const card = (

src/components/space/SyncButton.js

@@ -1,15 +1,14 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 import clsx from 'clsx';
+import { withRouter } from 'react-router';
 import { withTranslation } from 'react-i18next';
 import IconButton from '@material-ui/core/IconButton/IconButton';
 import SyncIcon from '@material-ui/icons/Sync';
 import { Online, Offline } from 'react-detect-offline';
 import Tooltip from '@material-ui/core/Tooltip';
 import { withStyles } from '@material-ui/core';
 import Styles from '../../Styles';
-import { syncSpace } from '../../actions/space';
 import { SPACE_SYNC_BUTTON_CLASS } from '../../config/selectors';
 
 class SyncButton extends Component {
@@ -19,13 +18,18 @@ class SyncButton extends Component {
       appBar: PropTypes.string.isRequired,
       button: PropTypes.string.isRequired,
     }).isRequired,
-    dispatchSyncSpace: PropTypes.func.isRequired,
     t: PropTypes.func.isRequired,
+    history: PropTypes.shape({
+      push: PropTypes.func.isRequired,
+    }).isRequired,
   };
 
   handleSync = () => {
-    const { spaceId: id, dispatchSyncSpace } = this.props;
-    dispatchSyncSpace({ id });
+    const {
+      spaceId,
+      history: { push },
+    } = this.props;
+    return push(`/space/sync/${spaceId}?saved=true`);
   };
 
   render() {
@@ -60,16 +64,9 @@ class SyncButton extends Component {
     );
   }
 }
-const mapDispatchToProps = {
-  dispatchSyncSpace: syncSpace,
-};
-
-const ConnectedComponent = connect(null, mapDispatchToProps)(SyncButton);
 
-const StyledComponent = withStyles(Styles, { withTheme: true })(
-  ConnectedComponent
-);
+const StyledComponent = withStyles(Styles, { withTheme: true })(SyncButton);
 
 const TranslatedComponent = withTranslation()(StyledComponent);
 
-export default TranslatedComponent;
+export default withRouter(TranslatedComponent);