feat: add clear cache button to settings and error message of ErrorBo…

…undary (#97)

app/actions/actionTypes/settings.js

@@ -3,3 +3,5 @@
 export const FILL_LOCAL_DESKTOP_SETTINGS = 'settings/FILL_LOCAL';
 export const SET_LOCAL_DESKTOP_SETTING = 'settings/SET_LOCAL';
 export const SET_SETTINGS_MODAL_TAB = 'settings/SET_MODAL_TAB';
+
+export const CLEAR_ELECTRON_CACHE = 'settings/CLEAR_ELECTRON_CACHE';

app/actions/settings.js

@@ -29,3 +29,7 @@ export const setSettingsModalTab = (
   type: types.SET_SETTINGS_MODAL_TAB,
   tabName,
 });
+
+export const clearElectronCache = (): SettingsAction => ({
+  type: types.CLEAR_ELECTRON_CACHE,
+});

app/components/ErrorBoundary/ErrorBoundary.jsx

@@ -2,6 +2,15 @@
 import React, { Component } from 'react';
 import Raven from 'raven-js';
 
+import { connect } from 'react-redux';
+
+
+import Button from '@atlaskit/button';
+
+import {
+  settingsActions,
+} from 'actions';
+
 
 class ErrorBoundary extends Component<any, any> {
   state = {
@@ -26,10 +35,26 @@ class ErrorBoundary extends Component<any, any> {
 
   render() {
     if (this.state.hasError) {
-      return <h1>Something went wrong.</h1>;
+      return (
+        <div>
+          <h1>Something went wrong.</h1>
+          You may try to
+          <Button
+            appearance="danger"
+            onClick={() => this.props.dispatch(
+              settingsActions.clearElectronCache(),
+            )}
+          >
+            Clear cache
+          </Button>
+        </div>
+      );
     }
     return this.props.children;
   }
 }
 
-export default ErrorBoundary;
+export default connect(
+  null,
+  dispatch => ({ dispatch }),
+)(ErrorBoundary);

app/containers/Modals/SettingsModal/General/GeneralSettings.jsx

@@ -11,6 +11,10 @@ import {
   CheckboxGroup,
 } from '@atlaskit/checkbox';
 
+import Button, {
+  ButtonGroup,
+} from '@atlaskit/button';
+
 import {
   H100,
 } from 'styles/typography';
@@ -31,11 +35,13 @@ import {
 type Props = {
   settings: SettingsGeneral,
   setTraySettings: (value: any) => void,
+  clearChache: () => void,
 }
 
 const GeneralSettings: StatelessFunctionalComponent<Props> = ({
   settings,
   setTraySettings,
+  clearChache,
 }: Props): Node => {
   const isIconHidden = !!settings.trayShowTimer;
   // const isTimerHidden = false;
@@ -57,6 +63,18 @@ const GeneralSettings: StatelessFunctionalComponent<Props> = ({
             onChange={() => setTraySettings(!isIconHidden)}
           />
         </CheckboxGroup>
+        <br />
+        <ButtonGroup>
+          <Button
+            appearance="danger"
+            onClick={clearChache}
+          >
+            Clear cache
+          </Button>
+        </ButtonGroup>
+        <H100 style={{ margin: '4px 0 0 0' }}>
+          Clearing cache will cause logout.
+        </H100>
       </Flex>
     </SettingsSectionContent>
   );

app/containers/Modals/SettingsModal/SettingsModal.jsx

@@ -132,6 +132,9 @@ const SettingsModal: StatelessFunctionalComponent<Props> = ({
                 'trayShowTimer',
               ));
             }}
+            clearChache={() => dispatch(
+              settingsActions.clearElectronCache(),
+            )}
           />
         }
         {tab === 'Notifications' &&

app/sagas/index.js

@@ -57,6 +57,7 @@ export default function* rootSaga(): Generator<*, void, *> {
 
     // settings
     fork(settingsSagas.watchLocalDesktopSettingsChange),
+    fork(settingsSagas.watchClearElectronChanheRequest),
 
     // worklogs
     fork(worklogsSagas.watchSaveWorklogRequest),

app/sagas/settings.js

@@ -4,16 +4,21 @@ import {
   put,
   takeEvery,
   select,
+  cps,
+  all,
 } from 'redux-saga/effects';
 import {
   remote,
 } from 'electron';
+import path from 'path';
+import fs from 'fs';
 
 import * as Api from 'api';
 
 import {
   actionTypes,
   uiActions,
+  authActions,
 } from 'actions';
 import {
   getSettingsState,
@@ -89,3 +94,43 @@ export function* onChangeLocalDesktopSettings({
 export function* watchLocalDesktopSettingsChange(): Generator<*, *, *> {
   yield takeEvery(actionTypes.SET_LOCAL_DESKTOP_SETTING, onChangeLocalDesktopSettings);
 }
+
+function* clearElectronCacheSaga(): Generator<*, *, *> {
+  try {
+    const appDir = remote.getGlobal('appDir');
+    yield call(removeDir, appDir);
+    yield put(authActions.logoutRequest({ dontForget: true }));
+  }
+  catch(e) {
+    console.log(`@@ Error while removing appDir (${appDir})`, e);
+  }
+}
+
+export function* watchClearElectronChanheRequest(): Generator<*, *, *> {
+  yield takeEvery(actionTypes.CLEAR_ELECTRON_CACHE, clearElectronCacheSaga);
+}
+
+
+function* removeDir(dir) {
+  const ex = fs.existsSync(dir);
+  const exists = yield cps(fs.lstat, dir);
+  if (exists) {
+    const files = yield cps(fs.readdir, dir);
+    yield all(
+      files.map(fileName => call(removeAllIn, dir, fileName)),
+    );
+    yield cps(fs.rmdir, dir);
+    console.log(`Removed dir ${dir}`);
+  }
+}
+
+function* removeAllIn(dir, pathName) {
+  const p = path.join(dir, pathName);
+  const stat = yield cps(fs.lstat, p);
+  if (stat.isDirectory()) {
+    yield call(removeDir, p);
+  } else {
+    yield cps(fs.unlink, p);
+    console.log(`Removed file ${p}`);
+  }
+}

app/types/settings.js

@@ -15,6 +15,9 @@ export type SettingsAction =
   {|
     type: typeof actionTypes.SET_SETTINGS_MODAL_TAB,
     tabName: string,
+  |}
+  {|
+    type: typeof actionTypes.CLEAR_ELECTRON_CACHE,
   |};
 
 export type SettingsState = {|