Skip to content

Commit 224b40e

Browse files
PattonYinPattonYin
authored
Merge pull request #608 from privacy-tech-lab/issue-592
Issue 592 Fixed
2 parents 66139dd + 0796426 commit 224b40e

File tree

10 files changed

+723
-1123
lines changed

10 files changed

+723
-1123
lines changed

‎package-lock.json‎

Lines changed: 589 additions & 1065 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@
55
"setupFiles": [
66
"fake-indexeddb/auto",
77
"<rootDir>config.js"
8-
]
8+
],
9+
"moduleNameMapper": {
10+
"^@tensorflow/tfjs-node$": "@tensorflow/tfjs"
11+
}
912
},
1013
"scripts": {
1114
"prestart": "rimraf dev",
@@ -28,8 +31,7 @@
2831
"dependencies": {
2932
"@babel/traverse": "^7.23.2",
3033
"@popperjs/core": "^2.11.8",
31-
"@tensorflow/tfjs": "^3.20.0",
32-
"@tensorflow/tfjs-node": "^4.20.0",
34+
"@tensorflow/tfjs-node": "^4.22.0",
3335
"@types/psl": "^1.1.3",
3436
"ansi-html": "^0.0.9",
3537
"ansi-regex": "^6.0.1",
@@ -49,12 +51,12 @@
4951
"node-forge": "^1.3.1",
5052
"psl": "^1.9.0",
5153
"queue": "^6.0.2",
52-
"react": "^19.1.0",
53-
"react-dom": "^19.1.0",
54+
"react": "^18.3.1",
55+
"react-dom": "^18.3.1",
5456
"react-joyride": "^2.3.1",
55-
"react-loading-skeleton": "^2.2.0",
57+
"react-loading-skeleton": "^3.0.0",
5658
"react-router-dom": "^7.5.2",
57-
"react-spinners": "^0.11.0",
59+
"react-spinners": "^0.17.0",
5860
"react-tooltip": "^4.2.21",
5961
"shell-quote": "^1.7.3",
6062
"styled-components": "^5.2.1"
@@ -68,6 +70,7 @@
6870
"@babel/register": "^7.13.8",
6971
"@babel/runtime": "^7.26.10",
7072
"@emotion/babel-plugin": "^11.3.0",
73+
"@tensorflow/tfjs": "^4.22.0",
7174
"babel-loader": "^8.2.2",
7275
"babel-plugin-polyfill-corejs2": "^0.4.6",
7376
"babel-plugin-polyfill-corejs3": "0.8.5",

‎src/options/components/scaffold/index.js‎

Lines changed: 14 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ privacy-tech-lab, https://privacytechlab.org/
66
import React from "react";
77
import styled from "styled-components";
88
import { motion } from "framer-motion";
9-
import { useHistory, useLocation } from "react-router-dom";
9+
import { useLocation, useNavigationType } from "react-router-dom";
1010

1111
/**
1212
* Generally this would be in a style.js file
@@ -30,7 +30,7 @@ const SScaffold = styled(motion.main)`
3030
* @param {object} props
3131
*/
3232
const Scaffold = (props) => {
33-
const history = useHistory();
33+
const navigationType = useNavigationType();
3434
const location = useLocation();
3535

3636
/**
@@ -41,33 +41,18 @@ const Scaffold = (props) => {
4141
* @param {object} history
4242
* @param {object} location
4343
*/
44-
const configureScrollPosition = (history, location) => {
45-
if (
46-
history.action === "POP" &&
47-
location.pathname === history.location.pathname
48-
) {
49-
/**
50-
* @type {number}
51-
*/
52-
const pageYOffset =
53-
parseInt(window.sessionStorage.getItem(`pageYOffset-${location.pathname}`) ?? "0");
54-
window.sessionStorage.removeItem(
55-
`pageYOffset-${history.location.pathname}`
56-
);
57-
window.scrollTo(0, pageYOffset);
58-
} else if (
59-
history.action === "PUSH" &&
60-
location.pathname === history.location.pathname
61-
) {
44+
const configureScrollPosition = () => {
45+
if (navigationType === "POP") {
46+
// restore scroll
47+
const y =
48+
parseInt(
49+
window.sessionStorage.getItem(`pageYOffset-${location.pathname}`)
50+
) || 0;
51+
window.sessionStorage.removeItem(`pageYOffset-${location.pathname}`);
52+
window.scrollTo(0, y);
53+
} else if (navigationType === "PUSH") {
54+
// on new pushes, scroll to top
6255
window.scrollTo(0, 0);
63-
} else if (
64-
history.action === "PUSH" &&
65-
location.pathname !== history.location.pathname
66-
) {
67-
window.sessionStorage.setItem(
68-
`pageYOffset-${location.pathname}`,
69-
window.scrollY.toString()
70-
);
7156
}
7257
};
7358

@@ -77,7 +62,7 @@ const Scaffold = (props) => {
7762
animate={{ opacity: 1 }}
7863
exit={{ opacity: 0 }}
7964
transition={{ duration: 0.25, type: "tween", ease: "easeOut" }}
80-
onAnimationStart={() => configureScrollPosition(history, location)}
65+
onAnimationStart={configureScrollPosition}
8166
>
8267
{props.children}
8368
</SScaffold>

‎src/options/components/scaffold/prev.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/*
2+
Licensed per https://github.com/privacy-tech-lab/privacy-pioneer/blob/main/LICENSE
3+
privacy-tech-lab, https://privacytechlab.org/
4+
*/
5+
6+
import React from "react";
7+
import styled from "styled-components";
8+
import { motion } from "framer-motion";
9+
import { useHistory, useLocation } from "react-router-dom";
10+
11+
/**
12+
* Generally this would be in a style.js file
13+
* Since it belongs to such a simple component, it's here.
14+
*/
15+
const SScaffold = styled(motion.main)`
16+
max-width: 1192px;
17+
width: calc(100% - 128px);
18+
margin-left: 64px;
19+
margin-right: 64px;
20+
margin-top: 16px;
21+
margin-bottom: 32px;
22+
display: flex;
23+
flex-direction: column;
24+
`;
25+
26+
/**
27+
* Implements the basic deisgn visual layout stucture.
28+
* This is the like the main div for each page (aka each component in view besides AppView).
29+
* It handles animations from page to page
30+
* @param {object} props
31+
*/
32+
const Scaffold = (props) => {
33+
const history = useHistory();
34+
const location = useLocation();
35+
36+
/**
37+
* This is an attempt to restore scroll position when navigating between pages using session storage
38+
* I haven't tried to see if the default scroll restoration works with hash router
39+
* So you could comment out this fuction and see if navigating between scrolling pages correctly restores
40+
* I don't think it's working perfectly at the moment
41+
* @param {object} history
42+
* @param {object} location
43+
*/
44+
const configureScrollPosition = (history, location) => {
45+
if (
46+
history.action === "POP" &&
47+
location.pathname === history.location.pathname
48+
) {
49+
/**
50+
* @type {number}
51+
*/
52+
const pageYOffset =
53+
parseInt(window.sessionStorage.getItem(`pageYOffset-${location.pathname}`) ?? "0");
54+
window.sessionStorage.removeItem(
55+
`pageYOffset-${history.location.pathname}`
56+
);
57+
window.scrollTo(0, pageYOffset);
58+
} else if (
59+
history.action === "PUSH" &&
60+
location.pathname === history.location.pathname
61+
) {
62+
window.scrollTo(0, 0);
63+
} else if (
64+
history.action === "PUSH" &&
65+
location.pathname !== history.location.pathname
66+
) {
67+
window.sessionStorage.setItem(
68+
`pageYOffset-${location.pathname}`,
69+
window.scrollY.toString()
70+
);
71+
}
72+
};
73+
74+
return (
75+
<SScaffold
76+
initial={{ opacity: 0 }}
77+
animate={{ opacity: 1 }}
78+
exit={{ opacity: 0 }}
79+
transition={{ duration: 0.25, type: "tween", ease: "easeOut" }}
80+
onAnimationStart={() => configureScrollPosition(history, location)}
81+
>
82+
{props.children}
83+
</SScaffold>
84+
);
85+
};
86+
87+
export default Scaffold;

‎src/options/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { HashRouter as Router } from "react-router-dom";
1616
*/
1717
ReactDOM.render(
1818
<React.StrictMode>
19-
<Router hashType={"noslash"}>
19+
<Router>
2020
<AppView />
2121
</Router>
2222
</React.StrictMode>,

‎src/options/views/app-view/components/nav-bar/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ const NavBar = () => {
3838
navigate(path);
3939
}
4040
};
41-
4241
useEffect(() => {
4342
const p = location.pathname;
4443
if (p.includes("/watchlist")) {

‎src/options/views/app-view/index.js‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -43,16 +43,13 @@ const AppView = () => {
4343
multiline
4444
/>
4545
<NavBar />
46-
<AnimatePresence exitBeforeEnter>
46+
<AnimatePresence initial={false} mode="wait">
4747
<Routes location={location} key={location.pathname}>
48-
<Route path="/" exact component={HomeView} />
49-
<Route path="/watchlist" component={WatchlistView} />
50-
<Route
51-
path="/settings"
52-
render={() => <SettingsView changeTheme={setTheme} />}
53-
/>
54-
<Route path="/about" component={AboutView} />
55-
<Route path="/search" component={SearchView} />
48+
<Route path="/" element={<HomeView />} />
49+
<Route path="/watchlist" element={<WatchlistView />} />
50+
<Route path="/settings" element={<SettingsView changeTheme={setTheme} />} />
51+
<Route path="/about" element={<AboutView />} />
52+
<Route path="/search" element={<SearchView />} />
5653
</Routes>
5754
</AnimatePresence>
5855
</React.Fragment>

‎src/popup/components/scaffold/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ privacy-tech-lab, https://privacytechlab.org/
66
import React from "react";
77
import styled from "styled-components";
88
import { motion } from "framer-motion";
9-
const navigationType = useNavigationType();
9+
import { useNavigationType } from "react-router-dom";
1010
/**
1111
* Generally this would be in a style.js file
1212
* Since it belongs to such a simple component, it's here.
1313
*/
14-
const SScaffold = styled(motion.div)`
14+
const SScaffold = styled.div` // ⬅ no motion.div
1515
display: flex;
1616
flex-direction: column;
1717
width: 100%;
@@ -74,4 +74,5 @@ const Scaffold = ({ navigationBar, body }) => {
7474
);
7575
};
7676

77+
7778
export default Scaffold;

‎src/popup/views/app-view/index.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,15 @@ const AppView = () => {
3333
<GlobalStyle theme={theme} popup />
3434
<AnimatePresence initial={false}>
3535
<Routes location={location} key={location.pathname}>
36-
<Route path="/" exact component={WebsiteView} />
37-
<Route path="/website/:website/label/:label" component={LabelView} />
36+
<Route path="/" element={<WebsiteView />} />
37+
<Route path="/website/:website/label/:label" element={<LabelView />} />
3838
</Routes>
3939
</AnimatePresence>
40+
41+
42+
4043
</React.Fragment>
4144
);
4245
};
4346

44-
export default AppView;
47+
export default AppView;

‎src/popup/views/website-view/index.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ import { handleClick } from "../../../libs/indexed-db/getAnalytics";
4545
* Page view containing current website and identified label cards
4646
*/
4747
const WebsiteView = () => {
48-
const navigate = useNavigate();
48+
const routerNavigate = useNavigate();
4949
const [website, setWebsite] = useState("...");
5050
const [labels, setLabels] = useState({});
5151
const [loading, setLoading] = useState(true);
@@ -57,7 +57,7 @@ const WebsiteView = () => {
5757
/**
5858
* Navigate to route in options page based on urlHash
5959
*/
60-
const navigate_customized = ({ urlHash = "" }) => {
60+
const navigate = ({ urlHash = "" }) => {
6161
//@ts-ignore
6262
const url = browser.runtime.getURL("options.html");
6363
//@ts-ignore
@@ -150,7 +150,7 @@ const WebsiteView = () => {
150150
<STrailing>
151151
<SIconWrapper
152152
onClick={() => {
153-
navigate_customized({ urlHash: "#" }); //Go to Extension Home Page
153+
navigate({ urlHash: "#" }); //Go to Extension Home Page
154154
const getAnalysis = async () => {
155155
const status = await getAnalyticsStatus();
156156
if (status == true) {
@@ -170,7 +170,7 @@ const WebsiteView = () => {
170170
</SIconWrapper>
171171
<SIconWrapper
172172
onClick={() => {
173-
navigate_customized({ urlHash: "#watchlist" }); //Go to Extension Watchlist
173+
navigate({ urlHash: "#watchlist" }); //Go to Extension Watchlist
174174
const getAnalysis = async () => {
175175
const status = await getAnalyticsStatus();
176176
if (status == true) {
@@ -252,7 +252,7 @@ const WebsiteView = () => {
252252
popup
253253
key={label}
254254
onTap={() => {
255-
navigate(`/website/${website}/label/${label}`);
255+
routerNavigate(`/website/${website}/label/${label}`);
256256
const getAnalysis = async () => {
257257
const status = await getAnalyticsStatus();
258258
if (status == true) {
@@ -284,4 +284,5 @@ const WebsiteView = () => {
284284
);
285285
};
286286

287-
export default WebsiteView;
287+
288+
export default WebsiteView;

0 commit comments

Comments
 (0)