Different opened state for different tabs (#68)

* fix: Different opened state for different tabs

* update: webpack+gulp version bump

* npm start => gulp && gulp watch

* fix: TOGGLE_OPENED action primary set to true

* 🔍  Search in Repository Branch

* manifest.json version bump 0.0.4.2

Author: tavyandy97

content/src/scripts/containers/SearchBar/SearchBar.jsx

@@ -166,7 +166,7 @@ function SearchBar({
           <input
             type="text"
             value={searchFor}
-            placeholder="🔍 Search In Repository Branch"
+            placeholder="🔍  Search in Repository Branch"
             onChange={(e) => setSearchFor(e.target.value)}
             autoFocus
           />

content/src/scripts/containers/app/App.jsx

@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from "react";
 import ReactDOM from "react-dom";
 import { connect } from "react-redux";
+import { TabIdentifierClient } from "chrome-tab-identifier";
 
 import Toggler from "../../components/Toggler";
 import Pane from "../../components/Pane";
@@ -17,9 +18,9 @@ import WebWorker from "./WebWorker";
 import "./App.css";
 
 const importFileIconCSS = `${browserKey()}-extension://${chrome.i18n.getMessage(
-  "@@extension_id"
+  "@@extension_id",
 )}/libs/file-icons.css`;
-
+const tabIdClient = new TabIdentifierClient();
 const parentDiv = document.querySelector("body");
 
 class App extends Component {
@@ -29,6 +30,12 @@ class App extends Component {
       firstPageLoad: true,
       reloading: true,
       showSearchbar: false,
+      tabId: null,
+    };
+    this.toggleOpenedThisTab = () => {
+      this.props.toggleOpened({
+        tabId: this.state.tabId,
+      });
     };
     this.setFirstPageLoad = (firstPageLoad) => {
       this.setState({ firstPageLoad });
@@ -49,50 +56,63 @@ class App extends Component {
   }
 
   componentDidMount() {
-    if (this.props.opened && this.shouldShowSpanTree()) {
-      applyOpenedPageStyling(this.props.width);
-    } else {
-      applyClosedPageStyling();
-    }
+    tabIdClient.getTabId().then((tab) => {
+      this.setState({
+        tabId: tab,
+      });
+    });
   }
 
-  componentDidUpdate(_prevProps, _prevState) {
-    if (this.props.opened && this.shouldShowSpanTree()) {
-      applyOpenedPageStyling(this.props.width);
-    } else {
-      applyClosedPageStyling();
+  componentDidUpdate(_prevProps, prevState) {
+    const { tabId } = this.state;
+    if (tabId !== prevState.tabId) {
+      if (this.props.opened[tabId] && this.shouldShowSpanTree()) {
+        applyOpenedPageStyling(this.props.width);
+      } else {
+        applyClosedPageStyling();
+      }
+    }
+
+    if (tabId) {
+      if (this.props.opened[tabId] && this.shouldShowSpanTree()) {
+        applyOpenedPageStyling(this.props.width);
+      } else {
+        applyClosedPageStyling();
+      }
     }
   }
 
   render() {
+    const { tabId } = this.state;
+    if (!tabId) return null;
     if (!this.shouldShowSpanTree()) {
-      if (this.props.opened) this.props.toggleOpened();
+      if (this.props.opened[tabId]) this.toggleOpenedThisTab();
       applyClosedPageStyling();
       return null;
     }
 
     return (
       <Fragment>
         <link rel="stylesheet" type="text/css" href={importFileIconCSS} />
-        {this.props.opened
+        {this.props.opened[tabId]
           ? ReactDOM.createPortal(
               <Pane
-                toggleOpened={this.props.toggleOpened}
+                toggleOpened={this.toggleOpenedThisTab}
                 width={this.props.width}
                 firstPageLoad={this.state.firstPageLoad}
                 setFirstPageLoad={this.setFirstPageLoad}
                 reloading={this.state.reloading}
                 setReloading={this.setReloading}
                 setShowSearchbarTrue={() => this.setShowSearchbar(true)}
               />,
-              parentDiv
+              parentDiv,
             )
           : ReactDOM.createPortal(
               <Toggler
-                handleClick={this.props.toggleOpened}
+                handleClick={this.toggleOpenedThisTab}
                 pinned={this.props.pinned}
               />,
-              document.getElementById("rcr-anchor")
+              document.getElementById("rcr-anchor"),
             )}
         <SearchBar
           worker={this.searchBarWorker}

content/webpack.config.js

@@ -1,7 +1,9 @@
 const path = require("path");
-const MinifyPlugin = require("babel-minify-webpack-plugin");
 
 module.exports = {
+  mode: process.env.NODE_ENV === "production" ? "production" : "development",
+  devtool: "cheap-module-source-map",
+
   entry: ["./content/src/scripts/index.js"],
 
   output: {
@@ -15,19 +17,18 @@ module.exports = {
     modules: ["node_modules"],
   },
 
-  plugins:
-    process.env.NODE_ENV === "production" ? [new MinifyPlugin({}, {})] : [],
-
   module: {
-    loaders: [
-      { test: /\.css$/, loader: "style-loader!css-loader" },
+    rules: [
+      { test: /\.css$/, use: ["style-loader", "css-loader"] },
       {
         test: /\.(jsx|js)?$/,
-        loader: "babel-loader",
         exclude: /(node_modules)/,
         include: path.join(__dirname, "src"),
-        query: {
-          presets: ["es2015", "react"],
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["es2015", "react"],
+          },
         },
       },
     ],

event/src/actions/UI/index.js

@@ -7,9 +7,10 @@ export const togglePinned = () => {
   });
 };
 
-export const toggleOpened = () => {
+export const toggleOpened = (reducerDetails) => {
   store.dispatch({
     type: types.TOGGLE_OPENED,
+    reducerDetails,
   });
 };
 

event/src/reducers/UI/opened.js

@@ -1,11 +1,17 @@
 import { TOGGLE_OPENED } from "../../types/UI";
 
-const initialState = false;
+const initialState = {};
 
 export default (state = initialState, action) => {
   switch (action.type) {
     case TOGGLE_OPENED:
-      return !state;
+      return {
+        ...state,
+        [action.reducerDetails.tabId]:
+          action.reducerDetails.tabId in state
+            ? !state[action.reducerDetails.tabId]
+            : true,
+      };
     default:
       return state;
   }

event/webpack.config.js

@@ -1,7 +1,9 @@
 const path = require("path");
-const MinifyPlugin = require("babel-minify-webpack-plugin");
 
 module.exports = {
+  mode: process.env.NODE_ENV === "production" ? "production" : "development",
+  devtool: "cheap-module-source-map",
+
   entry: ["./event/src/index.js"],
 
   output: {
@@ -14,18 +16,17 @@ module.exports = {
     modules: ["node_modules"],
   },
 
-  plugins:
-    process.env.NODE_ENV === "production" ? [new MinifyPlugin({}, {})] : [],
-
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.(js)?$/,
-        loader: "babel-loader",
         exclude: /(node_modules)/,
         include: path.join(__dirname, "src"),
-        query: {
-          presets: ["es2015", "react"],
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["es2015", "react"],
+          },
         },
       },
     ],

gulpfile.babel.js

@@ -9,75 +9,76 @@ import popupWebpackConfig from "./popup/webpack.config";
 import eventWebpackConfig from "./event/webpack.config";
 import contentWebpackConfig from "./content/webpack.config";
 
-gulp.task("popup-js", ["clean"], (cb) => {
+const popupJs = (cb) => {
   webpack(popupWebpackConfig, (err, stats) => {
     if (err) throw new plugins.util.PluginError("webpack", err);
 
     plugins.util.log("[webpack]", stats.toString());
 
     cb();
   });
-});
+};
 
-gulp.task("event-js", ["clean"], (cb) => {
+const eventJs = (cb) => {
   webpack(eventWebpackConfig, (err, stats) => {
     if (err) throw new plugins.util.PluginError("webpack", err);
 
     plugins.util.log("[webpack]", stats.toString());
 
     cb();
   });
-});
+};
 
-gulp.task("content-js", ["clean"], (cb) => {
+const contentJs = (cb) => {
   webpack(contentWebpackConfig, (err, stats) => {
     if (err) throw new plugins.util.PluginError("webpack", err);
 
     plugins.util.log("[webpack]", stats.toString());
 
     cb();
   });
-});
+};
 
-gulp.task("popup-html", ["clean"], () => {
+const popupHtml = () => {
   return gulp
     .src("popup/src/index.html")
     .pipe(plugins.rename("popup.html"))
     .pipe(gulp.dest("./build"));
-});
+};
 
-gulp.task("copy-manifest", ["clean"], () => {
+const copyManifest = () => {
   return gulp.src("manifest.json").pipe(gulp.dest("./build"));
-});
+};
 
-gulp.task("clean", (cb) => {
+const clean = (cb) => {
   rimraf("./build", cb);
-});
+};
 
-gulp.task("copy-libs", ["clean"], () => {
+const copyLibs = () => {
   return gulp
     .src("./content/src/scripts/libs/**/*")
     .pipe(gulp.dest("./build/libs"));
-});
+};
 
-gulp.task("copy-icons", ["clean"], () => {
+const copyIcons = () => {
   return gulp.src("./icons/**/*").pipe(gulp.dest("./build/icons"));
-});
-
-gulp.task("build", [
-  "copy-libs",
-  "copy-icons",
-  "copy-manifest",
-  "popup-js",
-  "popup-html",
-  "event-js",
-  "content-js",
-]);
-
-gulp.task("watch", ["default"], () => {
-  gulp.watch("popup/**/*", ["build"]);
-  gulp.watch("content/**/*", ["build"]);
-  gulp.watch("event/**/*", ["build"]);
-});
-
-gulp.task("default", ["build"]);
+};
+
+const build = gulp.series(
+  clean,
+  gulp.parallel(
+    copyLibs,
+    copyIcons,
+    copyManifest,
+    popupJs,
+    popupHtml,
+    eventJs,
+    contentJs,
+  ),
+);
+
+gulp.task("watch", () =>
+  gulp.watch(["popup/**/*", "content/**/*", "event/**/*"], build),
+);
+
+gulp.task("default", build);

manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "SpanTree - GitLab Tree",
   "description": "Tree for Gitlab",
-  "version": "0.0.4.1",
+  "version": "0.0.4.2",
   "background": {
     "scripts": ["event.js"]
   },