Skip to content

Commit 9f6a798

Browse files
tavyandy97tavyandy97
authored
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
1 parent 24efffa commit 9f6a798

File tree

11 files changed

+9446
-2902
lines changed

11 files changed

+9446
-2902
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ function SearchBar({
166166
<input
167167
type="text"
168168
value={searchFor}
169-
placeholder="🔍 Search In Repository Branch"
169+
placeholder="🔍 Search in Repository Branch"
170170
onChange={(e) => setSearchFor(e.target.value)}
171171
autoFocus
172172
/>

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

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Component, Fragment } from "react";
22
import ReactDOM from "react-dom";
33
import { connect } from "react-redux";
4+
import { TabIdentifierClient } from "chrome-tab-identifier";
45

56
import Toggler from "../../components/Toggler";
67
import Pane from "../../components/Pane";
@@ -17,9 +18,9 @@ import WebWorker from "./WebWorker";
1718
import "./App.css";
1819

1920
const importFileIconCSS = `${browserKey()}-extension://${chrome.i18n.getMessage(
20-
"@@extension_id"
21+
"@@extension_id",
2122
)}/libs/file-icons.css`;
22-
23+
const tabIdClient = new TabIdentifierClient();
2324
const parentDiv = document.querySelector("body");
2425

2526
class App extends Component {
@@ -29,6 +30,12 @@ class App extends Component {
2930
firstPageLoad: true,
3031
reloading: true,
3132
showSearchbar: false,
33+
tabId: null,
34+
};
35+
this.toggleOpenedThisTab = () => {
36+
this.props.toggleOpened({
37+
tabId: this.state.tabId,
38+
});
3239
};
3340
this.setFirstPageLoad = (firstPageLoad) => {
3441
this.setState({ firstPageLoad });
@@ -49,50 +56,63 @@ class App extends Component {
4956
}
5057

5158
componentDidMount() {
52-
if (this.props.opened && this.shouldShowSpanTree()) {
53-
applyOpenedPageStyling(this.props.width);
54-
} else {
55-
applyClosedPageStyling();
56-
}
59+
tabIdClient.getTabId().then((tab) => {
60+
this.setState({
61+
tabId: tab,
62+
});
63+
});
5764
}
5865

59-
componentDidUpdate(_prevProps, _prevState) {
60-
if (this.props.opened && this.shouldShowSpanTree()) {
61-
applyOpenedPageStyling(this.props.width);
62-
} else {
63-
applyClosedPageStyling();
66+
componentDidUpdate(_prevProps, prevState) {
67+
const { tabId } = this.state;
68+
if (tabId !== prevState.tabId) {
69+
if (this.props.opened[tabId] && this.shouldShowSpanTree()) {
70+
applyOpenedPageStyling(this.props.width);
71+
} else {
72+
applyClosedPageStyling();
73+
}
74+
}
75+
76+
if (tabId) {
77+
if (this.props.opened[tabId] && this.shouldShowSpanTree()) {
78+
applyOpenedPageStyling(this.props.width);
79+
} else {
80+
applyClosedPageStyling();
81+
}
6482
}
6583
}
6684

6785
render() {
86+
const { tabId } = this.state;
87+
if (!tabId) return null;
6888
if (!this.shouldShowSpanTree()) {
69-
if (this.props.opened) this.props.toggleOpened();
89+
if (this.props.opened[tabId]) this.toggleOpenedThisTab();
7090
applyClosedPageStyling();
7191
return null;
7292
}
7393

7494
return (
7595
<Fragment>
7696
<link rel="stylesheet" type="text/css" href={importFileIconCSS} />
77-
{this.props.opened
97+
{this.props.opened[tabId]
7898
? ReactDOM.createPortal(
7999
<Pane
80-
toggleOpened={this.props.toggleOpened}
100+
toggleOpened={this.toggleOpenedThisTab}
81101
width={this.props.width}
82102
firstPageLoad={this.state.firstPageLoad}
83103
setFirstPageLoad={this.setFirstPageLoad}
84104
reloading={this.state.reloading}
85105
setReloading={this.setReloading}
86106
setShowSearchbarTrue={() => this.setShowSearchbar(true)}
87107
/>,
88-
parentDiv
108+
parentDiv,
89109
)
90110
: ReactDOM.createPortal(
91111
<Toggler
92-
handleClick={this.props.toggleOpened}
112+
handleClick={this.toggleOpenedThisTab}
93113
pinned={this.props.pinned}
94114
/>,
95-
document.getElementById("rcr-anchor")
115+
document.getElementById("rcr-anchor"),
96116
)}
97117
<SearchBar
98118
worker={this.searchBarWorker}

‎content/webpack.config.js‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
const path = require("path");
2-
const MinifyPlugin = require("babel-minify-webpack-plugin");
32

43
module.exports = {
4+
mode: process.env.NODE_ENV === "production" ? "production" : "development",
5+
devtool: "cheap-module-source-map",
6+
57
entry: ["./content/src/scripts/index.js"],
68

79
output: {
@@ -15,19 +17,18 @@ module.exports = {
1517
modules: ["node_modules"],
1618
},
1719

18-
plugins:
19-
process.env.NODE_ENV === "production" ? [new MinifyPlugin({}, {})] : [],
20-
2120
module: {
22-
loaders: [
23-
{ test: /\.css$/, loader: "style-loader!css-loader" },
21+
rules: [
22+
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
2423
{
2524
test: /\.(jsx|js)?$/,
26-
loader: "babel-loader",
2725
exclude: /(node_modules)/,
2826
include: path.join(__dirname, "src"),
29-
query: {
30-
presets: ["es2015", "react"],
27+
use: {
28+
loader: "babel-loader",
29+
options: {
30+
presets: ["es2015", "react"],
31+
},
3132
},
3233
},
3334
],

‎event/src/actions/UI/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ export const togglePinned = () => {
77
});
88
};
99

10-
export const toggleOpened = () => {
10+
export const toggleOpened = (reducerDetails) => {
1111
store.dispatch({
1212
type: types.TOGGLE_OPENED,
13+
reducerDetails,
1314
});
1415
};
1516

‎event/src/reducers/UI/opened.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import { TOGGLE_OPENED } from "../../types/UI";
22

3-
const initialState = false;
3+
const initialState = {};
44

55
export default (state = initialState, action) => {
66
switch (action.type) {
77
case TOGGLE_OPENED:
8-
return !state;
8+
return {
9+
...state,
10+
[action.reducerDetails.tabId]:
11+
action.reducerDetails.tabId in state
12+
? !state[action.reducerDetails.tabId]
13+
: true,
14+
};
915
default:
1016
return state;
1117
}

‎event/webpack.config.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
const path = require("path");
2-
const MinifyPlugin = require("babel-minify-webpack-plugin");
32

43
module.exports = {
4+
mode: process.env.NODE_ENV === "production" ? "production" : "development",
5+
devtool: "cheap-module-source-map",
6+
57
entry: ["./event/src/index.js"],
68

79
output: {
@@ -14,18 +16,17 @@ module.exports = {
1416
modules: ["node_modules"],
1517
},
1618

17-
plugins:
18-
process.env.NODE_ENV === "production" ? [new MinifyPlugin({}, {})] : [],
19-
2019
module: {
21-
loaders: [
20+
rules: [
2221
{
2322
test: /\.(js)?$/,
24-
loader: "babel-loader",
2523
exclude: /(node_modules)/,
2624
include: path.join(__dirname, "src"),
27-
query: {
28-
presets: ["es2015", "react"],
25+
use: {
26+
loader: "babel-loader",
27+
options: {
28+
presets: ["es2015", "react"],
29+
},
2930
},
3031
},
3132
],

‎gulpfile.babel.js‎

Lines changed: 35 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -9,75 +9,76 @@ import popupWebpackConfig from "./popup/webpack.config";
99
import eventWebpackConfig from "./event/webpack.config";
1010
import contentWebpackConfig from "./content/webpack.config";
1111

12-
gulp.task("popup-js", ["clean"], (cb) => {
12+
const popupJs = (cb) => {
1313
webpack(popupWebpackConfig, (err, stats) => {
1414
if (err) throw new plugins.util.PluginError("webpack", err);
1515

1616
plugins.util.log("[webpack]", stats.toString());
1717

1818
cb();
1919
});
20-
});
20+
};
2121

22-
gulp.task("event-js", ["clean"], (cb) => {
22+
const eventJs = (cb) => {
2323
webpack(eventWebpackConfig, (err, stats) => {
2424
if (err) throw new plugins.util.PluginError("webpack", err);
2525

2626
plugins.util.log("[webpack]", stats.toString());
2727

2828
cb();
2929
});
30-
});
30+
};
3131

32-
gulp.task("content-js", ["clean"], (cb) => {
32+
const contentJs = (cb) => {
3333
webpack(contentWebpackConfig, (err, stats) => {
3434
if (err) throw new plugins.util.PluginError("webpack", err);
3535

3636
plugins.util.log("[webpack]", stats.toString());
3737

3838
cb();
3939
});
40-
});
40+
};
4141

42-
gulp.task("popup-html", ["clean"], () => {
42+
const popupHtml = () => {
4343
return gulp
4444
.src("popup/src/index.html")
4545
.pipe(plugins.rename("popup.html"))
4646
.pipe(gulp.dest("./build"));
47-
});
47+
};
4848

49-
gulp.task("copy-manifest", ["clean"], () => {
49+
const copyManifest = () => {
5050
return gulp.src("manifest.json").pipe(gulp.dest("./build"));
51-
});
51+
};
5252

53-
gulp.task("clean", (cb) => {
53+
const clean = (cb) => {
5454
rimraf("./build", cb);
55-
});
55+
};
5656

57-
gulp.task("copy-libs", ["clean"], () => {
57+
const copyLibs = () => {
5858
return gulp
5959
.src("./content/src/scripts/libs/**/*")
6060
.pipe(gulp.dest("./build/libs"));
61-
});
61+
};
6262

63-
gulp.task("copy-icons", ["clean"], () => {
63+
const copyIcons = () => {
6464
return gulp.src("./icons/**/*").pipe(gulp.dest("./build/icons"));
65-
});
66-
67-
gulp.task("build", [
68-
"copy-libs",
69-
"copy-icons",
70-
"copy-manifest",
71-
"popup-js",
72-
"popup-html",
73-
"event-js",
74-
"content-js",
75-
]);
76-
77-
gulp.task("watch", ["default"], () => {
78-
gulp.watch("popup/**/*", ["build"]);
79-
gulp.watch("content/**/*", ["build"]);
80-
gulp.watch("event/**/*", ["build"]);
81-
});
82-
83-
gulp.task("default", ["build"]);
65+
};
66+
67+
const build = gulp.series(
68+
clean,
69+
gulp.parallel(
70+
copyLibs,
71+
copyIcons,
72+
copyManifest,
73+
popupJs,
74+
popupHtml,
75+
eventJs,
76+
contentJs,
77+
),
78+
);
79+
80+
gulp.task("watch", () =>
81+
gulp.watch(["popup/**/*", "content/**/*", "event/**/*"], build),
82+
);
83+
84+
gulp.task("default", build);

‎manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"manifest_version": 2,
33
"name": "SpanTree - GitLab Tree",
44
"description": "Tree for Gitlab",
5-
"version": "0.0.4.1",
5+
"version": "0.0.4.2",
66
"background": {
77
"scripts": ["event.js"]
88
},

0 commit comments

Comments
 (0)