feat(routes): add fade transition effect

AXeL-dev · Feb 25, 2022 · a1467c1 · a1467c1
1 parent 2c7ae00
commit a1467c1
Show file tree

Hide file tree

Showing 8 changed files with 166 additions and 115 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
     "react-scripts": "^4.0.3",
+    "react-transition-group": "^4.4.2",
     "sass": "^1.49.8",
     "web-vitals": "^2.1.4"
   },

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { HashRouter as Router, Switch, Route } from 'react-router-dom';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { storage } from './helpers/webext';
 import { isDevEnv } from './helpers/debug';
 import { Panel, Settings, Logs, Background, Blocked, PasswordPrompt, AddWebsitePrompt } from './components';
@@ -29,17 +30,27 @@ export default class App extends Component {
   render() {
     return (
       <Router>
-        <Switch>
-          <PasswordProtectedRoute exact path="/" component={Panel} accessAllowed={this.state.accessAllowed} showPromptHeader={true} showPromptFooter={true} />
-          <PasswordProtectedRoute path="/settings" component={Settings} accessAllowed={this.state.accessAllowed} />
-          <PasswordProtectedRoute path="/logs" component={Logs} accessAllowed={this.state.accessAllowed} />
-          <Route path="/background" component={Background} />
-          <Route path="/blocked" component={Blocked} />
-          <Route path="/addWebsitePrompt" component={AddWebsitePrompt} />
-          {isDevEnv && (
-            <Route path="/pwd" component={PasswordPrompt} />
-          )}
-        </Switch>
+        <Route render={({ location }) => (
+          <TransitionGroup className="page">
+            <CSSTransition
+              key={location.pathname}
+              classNames="fade"
+              timeout={300}
+            >
+              <Switch location={location}>
+                <PasswordProtectedRoute exact path="/" component={Panel} accessAllowed={this.state.accessAllowed} showPromptHeader={true} showPromptFooter={true} />
+                <PasswordProtectedRoute path="/settings" component={Settings} accessAllowed={this.state.accessAllowed} />
+                <PasswordProtectedRoute path="/logs" component={Logs} accessAllowed={this.state.accessAllowed} />
+                <Route path="/background" component={Background} />
+                <Route path="/blocked" component={Blocked} />
+                <Route path="/addWebsitePrompt" component={AddWebsitePrompt} />
+                {isDevEnv || !this.state.accessAllowed ? (
+                  <Route path="/pwd" component={PasswordPrompt} />
+                ) : null}
+              </Switch>
+            </CSSTransition>
+          </TransitionGroup>
+        )} />
       </Router>
     );
   }

diff --git a/src/components/Panel/index.jsx b/src/components/Panel/index.jsx
@@ -119,81 +119,81 @@ export class Panel extends Component {
   }
 
   render() {
-    if (!this.state.ready) {
-      return null;
-    }
-
     return (
       <Pane minWidth={350}>
         <Header />
-        {this.state.isEnabled && this.state.schedule.isEnabled ? (
-          <Pane display="flex" paddingX={16} paddingY={20}>
-            <Pane display="flex" alignItems="center" flex={1}>
-              <Text className="cursor-default">{translate('status')}</Text>
-            </Pane>
-            <Pane display="flex" alignItems="center" justifyContent="center">
-              {this.renderScheduleStatus()}
-            </Pane>
-          </Pane>
-        ) : (
-          <SwitchField
-            label={translate('status')}
-            labelClassName="cursor-default"
-            checked={this.state.isEnabled}
-            onChange={event => this.toggleStatus(event.target.checked)}
-            height={20}
-            paddingX={16}
-            paddingY={20}
-          />
-        )}
-        <SegmentedControlField
-          name="mode"
-          label={translate('mode')}
-          labelClassName="cursor-default"
-          options={modes}
-          value={this.state.mode}
-          onChange={this.changeMode}
-          maxWidth={260}
-          paddingX={16}
-          paddingBottom={20}
-        />
-        <Pane display="flex" paddingX={16} paddingY={10} alignItems="center" justifyContent="space-between" borderTop>
-          <Pane display="flex" gap={10}>
-            <SettingsButton history={this.props.history} />
-            {this.state.enableLogs && (
-              <LinkIconButton
-                icon={HistoryIcon}
-                link="/logs"
-                tooltip={translate('logs')}
-                history={this.props.history}
-              />
-            )}
-            {!this.state.hideReportIssueButton && (
-              <LinkIconButton
-                icon={IssueNewIcon}
-                link="https://github.com/AXeL-dev/distract-me-not/issues"
-                external
-                tooltip={translate('reportIssue')}
-                history={this.props.history}
+        {!this.state.ready ? null : (
+          <>
+            {this.state.isEnabled && this.state.schedule.isEnabled ? (
+              <Pane display="flex" paddingX={16} paddingY={20}>
+                <Pane display="flex" alignItems="center" flex={1}>
+                  <Text className="cursor-default">{translate('status')}</Text>
+                </Pane>
+                <Pane display="flex" alignItems="center" justifyContent="center">
+                  {this.renderScheduleStatus()}
+                </Pane>
+              </Pane>
+            ) : (
+              <SwitchField
+                label={translate('status')}
+                labelClassName="cursor-default"
+                checked={this.state.isEnabled}
+                onChange={event => this.toggleStatus(event.target.checked)}
+                height={20}
+                paddingX={16}
+                paddingY={20}
               />
             )}
-          </Pane>
-          <Pane>
-            <AnimatedIconButton
-              appearance="minimal"
-              tooltip={this.state.mode === Mode.whitelist ? translate('addToWhitelist') : translate('addToBlacklist')}
-              tooltipPosition={Position.LEFT}
-              icon={PlusIcon}
-              iconSize={22}
-              iconColor="#47b881"
-              onClick={() => addCurrentWebsite(this.state.mode, this.state.showAddWebsitePrompt)}
-              hideOnClick={true}
-              hideAnimationIcon={TickIcon}
-              isVisible={this.state.isAddButtonVisible}
-              onVisibilityChange={this.setAddButtonVisibility}
+            <SegmentedControlField
+              name="mode"
+              label={translate('mode')}
+              labelClassName="cursor-default"
+              options={modes}
+              value={this.state.mode}
+              onChange={this.changeMode}
+              maxWidth={260}
+              paddingX={16}
+              paddingBottom={20}
             />
-          </Pane>
-        </Pane>
+            <Pane display="flex" paddingX={16} paddingY={10} alignItems="center" justifyContent="space-between" borderTop>
+              <Pane display="flex" gap={10}>
+                <SettingsButton history={this.props.history} />
+                {this.state.enableLogs && (
+                  <LinkIconButton
+                    icon={HistoryIcon}
+                    link="/logs"
+                    tooltip={translate('logs')}
+                    history={this.props.history}
+                  />
+                )}
+                {!this.state.hideReportIssueButton && (
+                  <LinkIconButton
+                    icon={IssueNewIcon}
+                    link="https://github.com/AXeL-dev/distract-me-not/issues"
+                    external
+                    tooltip={translate('reportIssue')}
+                    history={this.props.history}
+                  />
+                )}
+              </Pane>
+              <Pane>
+                <AnimatedIconButton
+                  appearance="minimal"
+                  tooltip={this.state.mode === Mode.whitelist ? translate('addToWhitelist') : translate('addToBlacklist')}
+                  tooltipPosition={Position.LEFT}
+                  icon={PlusIcon}
+                  iconSize={22}
+                  iconColor="#47b881"
+                  onClick={() => addCurrentWebsite(this.state.mode, this.state.showAddWebsitePrompt)}
+                  hideOnClick={true}
+                  hideAnimationIcon={TickIcon}
+                  isVisible={this.state.isAddButtonVisible}
+                  onVisibilityChange={this.setAddButtonVisibility}
+                />
+              </Pane>
+            </Pane>
+          </>
+        )}
       </Pane>
     );
   }

diff --git a/src/components/PasswordPrompt/index.jsx b/src/components/PasswordPrompt/index.jsx
@@ -16,17 +16,36 @@ export class PasswordPrompt extends Component {
     super(props);
     this.mode = defaultMode;
     this.hash = defaultHash || null;
+    this.hasHeader = this.props.hasHeader || this.getLocationProp('hasHeader');
+    this.hasFooter = this.props.hasFooter || this.getLocationProp('hasFooter');
     this.showAddWebsitePrompt = false;
-    this.isWideScreen = ['/settings', '/logs'].some((route) => this.props.path.startsWith(route));
-    debug.log({ hash: this.hash, path: this.props.path });
+    this.isWideScreen = this.getIsWideScreen();
+    debug.log({ hash: this.hash, props });
     this.state = {
       password: '',
-      isQuickActivationButtonVisible: false,
-      isAddButtonVisible: false,
       enableLogs: false,
+      isAddButtonVisible: false,
+      isQuickActivationButtonVisible: false,
     };
   }
 
+  getLocationProp(prop, defaultValue = undefined) {
+    return this.props.location.state ? this.props.location.state[prop] : defaultValue;
+  }
+
+  getRedirectPath() {
+    return this.props.path || this.getLocationProp('path') || '/';
+  }
+
+  getQueryParams() {
+    return this.getLocationProp('search') || '';
+  }
+
+  getIsWideScreen() {
+    const redirectPath = this.getRedirectPath();
+    return ['/settings', '/logs'].includes(redirectPath);
+  }
+
   componentDidMount() {
     sendMessage('getLogsSettings').then(logs => this.setState({ enableLogs: (logs || defaultLogsSettings).isEnabled }));
     storage.get({
@@ -76,12 +95,6 @@ export class PasswordPrompt extends Component {
     }));
   }
 
-  redirectTo = (path, state = null) => {
-    debug.log('redirecting to:', path, state);
-    this.props.history.location.state = state;
-    this.props.history.push(path || '/');//, state); // passing state to history.push() doesn't work with hash router
-  }
-
   checkPassword = () => {
     if (!compare(this.state.password, this.hash)) {
       toaster.danger(translate('passwordIsWrong'), { id: 'pwd-toaster' });
@@ -90,7 +103,14 @@ export class PasswordPrompt extends Component {
       if (this.props.onSuccess) {
         this.props.onSuccess();
       } else {
-        this.redirectTo(this.props.path, { accessAllowed: true });
+        const pathname = this.getRedirectPath();
+        const search = this.getQueryParams();
+        debug.log(`redirecting to: ${[pathname, search].join()}`);
+        this.props.history.push({
+          pathname,
+          search,
+          state: { accessAllowed: true },
+        });
       }
     }
   }
@@ -143,7 +163,7 @@ export class PasswordPrompt extends Component {
         minWidth={this.getMinWidth()}
         minHeight={this.getMinHeight()}
       >
-        {this.props.hasHeader && (
+        {this.hasHeader && (
           <Header />
         )}
         <Pane
@@ -183,7 +203,7 @@ export class PasswordPrompt extends Component {
             </Pane>
           </Pane>
         </Pane>
-        {this.props.hasFooter && (
+        {this.hasFooter && (
           <Pane display="flex" paddingX={16} paddingY={10} alignItems="start" justifyContent="space-between" borderTop>
             <Pane display="flex" gap={10}>
               <SettingsButton history={this.props.history} />

diff --git a/src/components/Settings/index.jsx b/src/components/Settings/index.jsx
@@ -203,14 +203,13 @@ export class Settings extends Component {
   }
 
   getSelectedTab = () => {
-    const search = window.location.hash.replace(/^#\/settings/, '');
-    const urlParams = new URLSearchParams(search);
+    const urlParams = new URLSearchParams(this.props.location.search);
     return urlParams.get('tab');
   }
 
   selectTab = (id) => {
     this.setState({ selectedTab: id });
-    const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}#/settings?tab=${id}`;
+    const url = `#${this.props.location.pathname}?tab=${id}`;
     window.history.pushState({ path: url }, document.title, url);
   }
 

diff --git a/src/index.css b/src/index.css
@@ -17,3 +17,31 @@ body {
 #root {
   height: 100%;
 }
+
+.page {
+  width: 100%;
+  height: 100%;
+}
+
+.fade-enter {
+  opacity: 0;
+  z-index: 1;
+}
+
+.fade-enter-active {
+  opacity: 1;
+  transition: opacity 250ms ease-in;
+}
+
+.fade-exit {
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.fade-exit-active {
+  opacity: 0;
+  transition: opacity 250ms ease-out;
+}
diff --git a/src/routes/PasswordProtectedRoute.jsx b/src/routes/PasswordProtectedRoute.jsx
@@ -1,21 +1,9 @@
 import React from 'react';
-import { Route } from 'react-router-dom';
+import { Route, Redirect } from 'react-router-dom';
 import { debug } from 'helpers/debug';
-import { PasswordPrompt } from 'components';
 
 // Inspired from: https://blog.netcetera.com/how-to-create-guarded-routes-for-your-react-app-d2fe7c7b6122
 
-function getFullRoute(path) {
-  if (path) {
-    // return path + hash parameters
-    const regex = new RegExp(`^#${path}`);
-    const params = window.location.hash.replace(regex, '');
-    return `${path}${params}`;
-  } else {
-    return '/';
-  }
-}
-
 export const PasswordProtectedRoute = ({
   path,
   component: Component,
@@ -35,12 +23,15 @@ export const PasswordProtectedRoute = ({
       ) : accessAllowed === true || (props.location.state && props.location.state.accessAllowed === true) ? (
         <Component {...props} />
       ) : (
-        <PasswordPrompt
-          path={getFullRoute(path)}
-          hasHeader={showPromptHeader}
-          hasFooter={showPromptFooter}
-          {...props}
-        />
+        <Redirect to={{
+          pathname: '/pwd',
+          state: {
+            path,
+            search: props.location.search,
+            hasHeader: showPromptHeader,
+            hasFooter: showPromptFooter,
+          }
+        }} />
       );
     }}
   />