From 469823863487434f641d742a80693e7c9b607510 Mon Sep 17 00:00:00 2001 From: Jaewook Ahn Date: Wed, 1 Jul 2020 02:42:44 +0900 Subject: [PATCH 01/13] Add feedback popover in AddressList component - show Feedback component when AddressList is empty - write basic layout for feedback popover (not working yet) --- src/components/AddressList/index.tsx | 39 ++++++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/src/components/AddressList/index.tsx b/src/components/AddressList/index.tsx index b438b01..a5caadd 100644 --- a/src/components/AddressList/index.tsx +++ b/src/components/AddressList/index.tsx @@ -1,6 +1,7 @@ +/* eslint-disable jsx-a11y/accessible-emoji */ import React from "react"; import styled from "styled-components"; -import { Collapse, Typography } from "antd"; +import { Button, Collapse, Input, Popover, Typography } from "antd"; import { AddressData } from "../../AddressManager"; import { ClickToCopyText } from "../ClickToCopyText"; import "./AddressList.css"; @@ -23,12 +24,46 @@ const EmptyText = styled(Typography.Paragraph)` } `; +const PopoverTitleWrapper = styled.div` + display: flex; + justify-content: center; +`; + +const PopoverTitle = (props: { children: React.ReactNode; }) => { + return {props.children}; +}; + +const FeedbackSenderWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + + > button.ant-btn { + margin-top: 8px; + width: 100%; + } +`; + +const PopoverContentStyle = { + width: "270px", +}; + +const FeedbackSender = () => { + return + + + ; +}; + export const AddressList = (props: Props) => { const { data, showEngAddr, showRoadAddr, showLegacyAddr } = props; if (!data || !data.length) { return ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
- (๊ฒ€์ƒ‰์–ด ์˜ˆ์‹œ: ๊ฐ•๋‚จ๋Œ€๋กœ, ์ž์–‘๋™, ์ดˆ์„ฑ ๊ฒ€์ƒ‰ ๊ฐ€๋Šฅ) + (๊ฒ€์ƒ‰์–ด ์˜ˆ์‹œ: ๊ฐ•๋‚จ๋Œ€๋กœ, ์ž์–‘๋™, ์ดˆ์„ฑ ๊ฒ€์ƒ‰ ๊ฐ€๋Šฅ)
+ ํ”ผ๋“œ๋ฐฑ ๋ณด๋‚ด๊ธฐ} content={}> + ํ”ผ๋“œ๋ฐฑ ๋ณด๋‚ด๊ธฐ + ; } return ( From 63c34a7cd6798d248ddcf4c655055685a424fcd7 Mon Sep 17 00:00:00 2001 From: Jaewook Ahn Date: Thu, 2 Jul 2020 20:45:21 +0900 Subject: [PATCH 02/13] Update extension version to v1.0.5 - update README --- README.md | 1 - manifest.json | 2 +- package.json | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index e7221e5..0169ab8 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,6 @@ ## ๊ตฌํ˜„ ์˜ˆ์ • ๊ธฐ๋Šฅ -- ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ ํŽ˜์ด์ง€๋„ค์ด์…˜ (๐Ÿ‘จโ€๐Ÿ’ป Working In Progress...) - ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ์— ๋”ฐ๋ผ ๋™์ ์œผ๋กœ ํŒ์—… ๋†’์ด ์กฐ์ • ## ์ˆ˜๋™์œผ๋กœ ์„ค์น˜ํ•˜๊ธฐ diff --git a/manifest.json b/manifest.json index c80c628..8397b5f 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "์ฃผ์†Œ๊ฒ€์ƒ‰", - "version": "1.0.4", + "version": "1.0.5", "description": "๋Œ€ํ•œ๋ฏผ๊ตญ ์ฃผ์†Œ๊ฒ€์ƒ‰ ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ", "author": "Jaewook Ahn", "icons": { diff --git a/package.json b/package.json index d326451..1c08434 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kor-address-extension", - "version": "1.0.4", + "version": "1.0.5", "main": "dist/index.js", "repository": "git@github.com:Jaewoook/kor-address-extension.git", "author": "Jaewook Ahn ", From 38a0a8a7394a1dab31ad5029cf4cb80ef8691f2a Mon Sep 17 00:00:00 2001 From: Jaewook Ahn Date: Wed, 19 Aug 2020 22:34:13 +0900 Subject: [PATCH 03/13] Add background scripts for analytics --- background.tsconfig.json | 12 ++++++++++++ background/analytics.ts | 1 + package.json | 2 ++ 3 files changed, 15 insertions(+) create mode 100644 background.tsconfig.json create mode 100644 background/analytics.ts diff --git a/background.tsconfig.json b/background.tsconfig.json new file mode 100644 index 0000000..327cfb5 --- /dev/null +++ b/background.tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "CommonJS", + "noEmit": false, + "outDir": "./dist/background", + "isolatedModules": false + }, + "include": [ + "background/*" + ] +} diff --git a/background/analytics.ts b/background/analytics.ts new file mode 100644 index 0000000..fdd3f43 --- /dev/null +++ b/background/analytics.ts @@ -0,0 +1 @@ +console.log("background test"); diff --git a/package.json b/package.json index 1c08434..67283fb 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,8 @@ "license": "MIT", "scripts": { "build": "cross-env REACT_APP_ENV=production react-scripts build", + "prebuild-background": "rm -rf dist/background", + "build-background": "tsc --project background.tsconfig.json", "dev": "cross-env REACT_APP_ENV=development react-scripts start", "lint": "eslint . --ext .js,.ts,.jsx,.tsx", "prepackage": "yarn build", From 81df3a653b1241dd88409f05387c7aa4353c1154 Mon Sep 17 00:00:00 2001 From: Jaewook Ahn Date: Thu, 20 Aug 2020 16:43:53 +0900 Subject: [PATCH 04/13] Add eslintrc for background scripts --- background/.eslintrc.js | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 background/.eslintrc.js diff --git a/background/.eslintrc.js b/background/.eslintrc.js new file mode 100644 index 0000000..bc22ecc --- /dev/null +++ b/background/.eslintrc.js @@ -0,0 +1,6 @@ +module.exports = { + extends: "../.eslintrc.js", + parserOptions: { + project: "./background.tsconfig.json", + }, +}; From 8c842257cbddf1616684d49fb14f41de482d9458 Mon Sep 17 00:00:00 2001 From: Jaewook Ahn Date: Thu, 20 Aug 2020 17:10:27 +0900 Subject: [PATCH 05/13] Update command scripts for background scripts - add background scripts in manifest - change background scripts build output path --- background.tsconfig.json | 2 +- manifest.json | 4 ++++ package.json | 9 ++++++--- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/background.tsconfig.json b/background.tsconfig.json index 327cfb5..b8efa33 100644 --- a/background.tsconfig.json +++ b/background.tsconfig.json @@ -3,7 +3,7 @@ "compilerOptions": { "module": "CommonJS", "noEmit": false, - "outDir": "./dist/background", + "outDir": "./build/background", "isolatedModules": false }, "include": [ diff --git a/manifest.json b/manifest.json index 8397b5f..ad38c63 100644 --- a/manifest.json +++ b/manifest.json @@ -17,5 +17,9 @@ "24": "icons/icon_24.png", "32": "icons/icon_32.png" } + }, + "background": { + "scripts": ["background/analytics.js"], + "persistent": false } } diff --git a/package.json b/package.json index 67283fb..22e41e0 100644 --- a/package.json +++ b/package.json @@ -6,11 +6,14 @@ "author": "Jaewook Ahn ", "license": "MIT", "scripts": { - "build": "cross-env REACT_APP_ENV=production react-scripts build", - "prebuild-background": "rm -rf dist/background", + "build-popup": "cross-env REACT_APP_ENV=production react-scripts build", + "prebuild-background": "rm -rf build/background", "build-background": "tsc --project background.tsconfig.json", + "build": "yarn build-popup && yarn build-background", "dev": "cross-env REACT_APP_ENV=development react-scripts start", - "lint": "eslint . --ext .js,.ts,.jsx,.tsx", + "lint-popup": "eslint src --ext .js,.ts,.jsx,.tsx", + "lint-background": "eslint background --ext .js,.ts,.jsx,.tsx", + "lint": "yarn lint-popup && yarn lint-background", "prepackage": "yarn build", "package": "node scripts/CreatePackage.js", "postpackage": "node scripts/CreateDistribution.js" From 1a9e0d083a21002b62e8401865e856ac7deb4d49 Mon Sep 17 00:00:00 2001 From: Jaewook Ahn Date: Thu, 20 Aug 2020 18:25:53 +0900 Subject: [PATCH 06/13] Add ReactGA to use google analytics --- manifest.json | 1 + package.json | 1 + src/index.tsx | 9 ++++++++- yarn.lock | 5 +++++ 4 files changed, 15 insertions(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index ad38c63..6b1d876 100644 --- a/manifest.json +++ b/manifest.json @@ -18,6 +18,7 @@ "32": "icons/icon_32.png" } }, + "content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'", "background": { "scripts": ["background/analytics.js"], "persistent": false diff --git a/package.json b/package.json index 22e41e0..dcebb05 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "copy-to-clipboard": "^3.3.1", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-ga": "^3.1.2", "react-scripts": "^3.4.1", "styled-components": "^5.1.1" }, diff --git a/src/index.tsx b/src/index.tsx index cc3aaae..9d9ce79 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,7 +1,8 @@ import React from "react"; import { render } from "react-dom"; +import ReactGA from "react-ga"; import { App } from "./App"; -import { getRuntime } from "./utils"; +import { getRuntime, getEnv } from "./utils"; import { AddressManager } from "./AddressManager"; import { SettingsManager, Settings, DEFAULT_SETTINGS } from "./SettingsManager"; @@ -9,6 +10,12 @@ window.__ENV__ = { NODE_ENV: process.env.REACT_APP_ENV as string, }; +// initialize google analytics +ReactGA.initialize("UA-108816190-2", { + debug: getEnv() !== "production", +}); +ReactGA.pageview(window.location.pathname); + let settings = null; if (getRuntime() === "extension") { diff --git a/yarn.lock b/yarn.lock index 73bfdf7..5d58efe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9454,6 +9454,11 @@ react-error-overlay@^6.0.7: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108" integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA== +react-ga@^3.1.2: + version "3.1.2" + resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.1.2.tgz#e13f211c51a2e5c401ea69cf094b9501fe3c51ce" + integrity sha512-OJrMqaHEHbodm+XsnjA6ISBEHTwvpFrxco65mctzl/v3CASMSLSyUkFqz9yYrPDKGBUfNQzKCjuMJwctjlWBbw== + react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" From 70398fb87a6487ac0f8352cfe653fabdbe554cef Mon Sep 17 00:00:00 2001 From: Jaewook Ahn Date: Tue, 25 Aug 2020 21:18:10 +0900 Subject: [PATCH 07/13] Apply GA in extension (working ver.) - remove ReactGA - write analytics.js to inject analytics script - add ga function type in window object --- package.json | 1 - public/analytics.js | 8 ++++++++ public/index.html | 1 + src/index.tsx | 9 +-------- src/react-app-env.d.ts | 1 + yarn.lock | 5 ----- 6 files changed, 11 insertions(+), 14 deletions(-) create mode 100644 public/analytics.js diff --git a/package.json b/package.json index dcebb05..22e41e0 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,6 @@ "copy-to-clipboard": "^3.3.1", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-ga": "^3.1.2", "react-scripts": "^3.4.1", "styled-components": "^5.1.1" }, diff --git a/public/analytics.js b/public/analytics.js new file mode 100644 index 0000000..bcc06a0 --- /dev/null +++ b/public/analytics.js @@ -0,0 +1,8 @@ +(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ +(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), +m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) +})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); + +ga("create", "UA-108816190-2", "auto"); +ga("set", "checkProtocolTask", null); +ga("send", "pageview", "/"); diff --git a/public/index.html b/public/index.html index 0d0ce04..3c506e5 100644 --- a/public/index.html +++ b/public/index.html @@ -6,6 +6,7 @@ +
diff --git a/src/index.tsx b/src/index.tsx index 9d9ce79..cc3aaae 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,8 +1,7 @@ import React from "react"; import { render } from "react-dom"; -import ReactGA from "react-ga"; import { App } from "./App"; -import { getRuntime, getEnv } from "./utils"; +import { getRuntime } from "./utils"; import { AddressManager } from "./AddressManager"; import { SettingsManager, Settings, DEFAULT_SETTINGS } from "./SettingsManager"; @@ -10,12 +9,6 @@ window.__ENV__ = { NODE_ENV: process.env.REACT_APP_ENV as string, }; -// initialize google analytics -ReactGA.initialize("UA-108816190-2", { - debug: getEnv() !== "production", -}); -ReactGA.pageview(window.location.pathname); - let settings = null; if (getRuntime() === "extension") { diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 8cc7794..3a25e9c 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -3,4 +3,5 @@ interface Window { __ENV__: { NODE_ENV: string; }; + ga: any; } diff --git a/yarn.lock b/yarn.lock index 5d58efe..73bfdf7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9454,11 +9454,6 @@ react-error-overlay@^6.0.7: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108" integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA== -react-ga@^3.1.2: - version "3.1.2" - resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.1.2.tgz#e13f211c51a2e5c401ea69cf094b9501fe3c51ce" - integrity sha512-OJrMqaHEHbodm+XsnjA6ISBEHTwvpFrxco65mctzl/v3CASMSLSyUkFqz9yYrPDKGBUfNQzKCjuMJwctjlWBbw== - react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" From 6e448198972cb6ed90c76c380e2f723113e7bd89 Mon Sep 17 00:00:00 2001 From: Jaewook Ahn Date: Tue, 25 Aug 2020 21:55:26 +0900 Subject: [PATCH 08/13] Add analytics events - add prop in ClickToCopy component to identify type --- src/App.tsx | 9 ++++++++- src/components/AddressList/index.tsx | 8 ++++---- src/components/ClickToCopyText/index.tsx | 6 ++++-- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index b21255d..94e4442 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -124,6 +124,7 @@ export const App = (props: Props) => { setShowLoading(true); setAddressData([]); + window.ga("send", "event", "address", "search", searchValue); address.search({ countPerPage: "20", currentPage: "1", @@ -154,18 +155,21 @@ export const App = (props: Props) => { switch (type) { case "eng": setShowEngAddr(!showEngAddr); + window.ga("send", "event", "option", !showEngAddr ? "on" : "off", "์˜๋ฌธ์ฃผ์†Œ ํ‘œ์‹œ"); await settings?.updateSettings({ searchResult: { showEng: !showEngAddr }, }); break; case "road": setShowRoadAddr(!showRoadAddr); + window.ga("send", "event", "option", !showRoadAddr ? "on" : "off", "๋„๋กœ๋ช…์ฃผ์†Œ ํ‘œ์‹œ"); await settings?.updateSettings({ searchResult: { showRoad: !showRoadAddr }, }); break; case "legacy": setShowLegacyAddr(!showLegacyAddr); + window.ga("send", "event", "option", !showLegacyAddr ? "on" : "off", "์ง€๋ฒˆ์ฃผ์†Œ ํ‘œ์‹œ"); await settings?.updateSettings({ searchResult: { showLegacy: !showLegacyAddr }, }); @@ -187,9 +191,12 @@ export const App = (props: Props) => { } setShowLoading(true); + const nextPage = (Number.parseInt(address.previousSearchKey?.currentPage!) + 1).toString(); + + window.ga("send", "event", "address", "search", "์ถ”๊ฐ€ ๋ฐ์ดํ„ฐ ๋กœ๋“œ", Number.parseInt(nextPage)); address.search({ ...address.previousSearchKey!, - currentPage: (Number.parseInt(address.previousSearchKey?.currentPage!) + 1).toString(), + currentPage: nextPage, }, true).then((data) => { setAddressData(data); }).catch((err) => { diff --git a/src/components/AddressList/index.tsx b/src/components/AddressList/index.tsx index a5caadd..511701f 100644 --- a/src/components/AddressList/index.tsx +++ b/src/components/AddressList/index.tsx @@ -73,7 +73,7 @@ export const AddressList = (props: Props) => {
์šฐํŽธ๋ฒˆํ˜ธ:
- + {row.zipNo}
@@ -81,7 +81,7 @@ export const AddressList = (props: Props) => { {showRoadAddr ?
๋„๋กœ๋ช…์ฃผ์†Œ:
- + {row.roadAddr}
@@ -89,7 +89,7 @@ export const AddressList = (props: Props) => { {showLegacyAddr ?
์ง€๋ฒˆ์ฃผ์†Œ:
- + {row.jibunAddr}
@@ -97,7 +97,7 @@ export const AddressList = (props: Props) => { {showEngAddr ?
์˜๋ฌธ์ฃผ์†Œ:
- + {row.engAddr}
diff --git a/src/components/ClickToCopyText/index.tsx b/src/components/ClickToCopyText/index.tsx index bc53594..68cc7bb 100644 --- a/src/components/ClickToCopyText/index.tsx +++ b/src/components/ClickToCopyText/index.tsx @@ -8,15 +8,17 @@ import "./ClickToCopyText.css"; interface ClickToCopyTextProps { children: string; + analytics?: "์šฐํŽธ๋ฒˆํ˜ธ" | "๋„๋กœ๋ช…์ฃผ์†Œ" | "์ง€๋ฒˆ์ฃผ์†Œ" | "์˜๋ฌธ์ฃผ์†Œ"; } -export const ClickToCopyText: React.FC = ({ children }: ClickToCopyTextProps) => { +export const ClickToCopyText: React.FC = ({ children, analytics }: ClickToCopyTextProps) => { const [copied, setCopied] = React.useState(false); const handleCopyClick = React.useCallback(() => { setCopied(true); copy(children); - }, [setCopied, children]); + window.ga("send", "address", "copy", `${analytics} ๋ณต์‚ฌ`); + }, [setCopied, analytics, children]); const handleVisibleChange = React.useCallback((visible: boolean) => { if (!visible) { From b9a5f9a3eee688ea4c272c5baad87b48604da866 Mon Sep 17 00:00:00 2001 From: Jaewook Ahn Date: Tue, 25 Aug 2020 22:45:05 +0900 Subject: [PATCH 09/13] Fix send event trigger in ClickToCopyText component --- src/components/ClickToCopyText/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ClickToCopyText/index.tsx b/src/components/ClickToCopyText/index.tsx index 68cc7bb..24019cd 100644 --- a/src/components/ClickToCopyText/index.tsx +++ b/src/components/ClickToCopyText/index.tsx @@ -17,7 +17,7 @@ export const ClickToCopyText: React.FC = ({ children, anal const handleCopyClick = React.useCallback(() => { setCopied(true); copy(children); - window.ga("send", "address", "copy", `${analytics} ๋ณต์‚ฌ`); + window.ga("send", "event", "address", "copy", `${analytics} ๋ณต์‚ฌ`); }, [setCopied, analytics, children]); const handleVisibleChange = React.useCallback((visible: boolean) => { From 9c64c97232fd694e243505bf0647fbb69f66a1d0 Mon Sep 17 00:00:00 2001 From: Jaewook Ahn Date: Tue, 25 Aug 2020 22:50:46 +0900 Subject: [PATCH 10/13] Remove background scripts from extension --- background/{analytics.ts => index.ts} | 0 manifest.json | 6 +----- 2 files changed, 1 insertion(+), 5 deletions(-) rename background/{analytics.ts => index.ts} (100%) diff --git a/background/analytics.ts b/background/index.ts similarity index 100% rename from background/analytics.ts rename to background/index.ts diff --git a/manifest.json b/manifest.json index 6b1d876..8580152 100644 --- a/manifest.json +++ b/manifest.json @@ -18,9 +18,5 @@ "32": "icons/icon_32.png" } }, - "content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'", - "background": { - "scripts": ["background/analytics.js"], - "persistent": false - } + "content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'" } From ebea8e2103561d09fde4173a3ed1b1cde47e0d5f Mon Sep 17 00:00:00 2001 From: Jaewook Ahn Date: Tue, 25 Aug 2020 22:54:29 +0900 Subject: [PATCH 11/13] Remove background commands from package scripts --- package.json | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 22e41e0..dc5888d 100644 --- a/package.json +++ b/package.json @@ -6,14 +6,9 @@ "author": "Jaewook Ahn ", "license": "MIT", "scripts": { - "build-popup": "cross-env REACT_APP_ENV=production react-scripts build", - "prebuild-background": "rm -rf build/background", - "build-background": "tsc --project background.tsconfig.json", - "build": "yarn build-popup && yarn build-background", + "build": "cross-env REACT_APP_ENV=production react-scripts build", "dev": "cross-env REACT_APP_ENV=development react-scripts start", - "lint-popup": "eslint src --ext .js,.ts,.jsx,.tsx", - "lint-background": "eslint background --ext .js,.ts,.jsx,.tsx", - "lint": "yarn lint-popup && yarn lint-background", + "lint": "eslint src --ext .js,.ts,.jsx,.tsx", "prepackage": "yarn build", "package": "node scripts/CreatePackage.js", "postpackage": "node scripts/CreateDistribution.js" From e91f7bcef99c29cf194f9643fa474b2a8c5e4490 Mon Sep 17 00:00:00 2001 From: Jaewook Ahn Date: Wed, 26 Aug 2020 02:04:48 +0900 Subject: [PATCH 12/13] Improve: ignore analytics tracking in development --- public/analytics.js | 4 ---- src/index.tsx | 13 ++++++++++++- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/public/analytics.js b/public/analytics.js index bcc06a0..ebb6b51 100644 --- a/public/analytics.js +++ b/public/analytics.js @@ -2,7 +2,3 @@ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); - -ga("create", "UA-108816190-2", "auto"); -ga("set", "checkProtocolTask", null); -ga("send", "pageview", "/"); diff --git a/src/index.tsx b/src/index.tsx index cc3aaae..5339c69 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,14 +1,25 @@ import React from "react"; import { render } from "react-dom"; import { App } from "./App"; -import { getRuntime } from "./utils"; +import { getRuntime, getEnv } from "./utils"; import { AddressManager } from "./AddressManager"; import { SettingsManager, Settings, DEFAULT_SETTINGS } from "./SettingsManager"; +// inject NODE_ENV variable into window object window.__ENV__ = { NODE_ENV: process.env.REACT_APP_ENV as string, }; +// initialize google analytics only in production +if (getEnv() === "production") { + window.ga("create", "UA-108816190-2", "auto"); + window.ga("set", "checkProtocolTask", null); + window.ga("send", "pageview", "/"); +} else { + console.info("Google Analytics disabled because runtime does not running in production."); + window.ga = function() {}; +} + let settings = null; if (getRuntime() === "extension") { From c4bb2ca785cba3105987a9406fa0a47e897403b8 Mon Sep 17 00:00:00 2001 From: Jaewook Ahn Date: Thu, 27 Aug 2020 01:46:18 +0900 Subject: [PATCH 13/13] Add feedback send component --- src/components/AddressList/index.tsx | 38 ++------------ src/components/FeedbackPopover.tsx | 75 ++++++++++++++++++++++++++++ 2 files changed, 78 insertions(+), 35 deletions(-) create mode 100644 src/components/FeedbackPopover.tsx diff --git a/src/components/AddressList/index.tsx b/src/components/AddressList/index.tsx index 511701f..630c916 100644 --- a/src/components/AddressList/index.tsx +++ b/src/components/AddressList/index.tsx @@ -1,9 +1,10 @@ /* eslint-disable jsx-a11y/accessible-emoji */ import React from "react"; import styled from "styled-components"; -import { Button, Collapse, Input, Popover, Typography } from "antd"; +import { Collapse, Typography } from "antd"; import { AddressData } from "../../AddressManager"; import { ClickToCopyText } from "../ClickToCopyText"; +import { FeedbackPopover } from "../FeedbackPopover"; import "./AddressList.css"; interface Props { @@ -24,46 +25,13 @@ const EmptyText = styled(Typography.Paragraph)` } `; -const PopoverTitleWrapper = styled.div` - display: flex; - justify-content: center; -`; - -const PopoverTitle = (props: { children: React.ReactNode; }) => { - return {props.children}; -}; - -const FeedbackSenderWrapper = styled.div` - display: flex; - flex-direction: column; - align-items: center; - - > button.ant-btn { - margin-top: 8px; - width: 100%; - } -`; - -const PopoverContentStyle = { - width: "270px", -}; - -const FeedbackSender = () => { - return - - - ; -}; - export const AddressList = (props: Props) => { const { data, showEngAddr, showRoadAddr, showLegacyAddr } = props; if (!data || !data.length) { return ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
(๊ฒ€์ƒ‰์–ด ์˜ˆ์‹œ: ๊ฐ•๋‚จ๋Œ€๋กœ, ์ž์–‘๋™, ์ดˆ์„ฑ ๊ฒ€์ƒ‰ ๊ฐ€๋Šฅ)
- ํ”ผ๋“œ๋ฐฑ ๋ณด๋‚ด๊ธฐ} content={}> - ํ”ผ๋“œ๋ฐฑ ๋ณด๋‚ด๊ธฐ - + ; } return ( diff --git a/src/components/FeedbackPopover.tsx b/src/components/FeedbackPopover.tsx new file mode 100644 index 0000000..b368a1e --- /dev/null +++ b/src/components/FeedbackPopover.tsx @@ -0,0 +1,75 @@ +/* eslint-disable jsx-a11y/accessible-emoji */ +import React from "react"; +import styled from "styled-components"; +import { Button, Input, Popover, Typography } from "antd"; +import axios from "axios"; + +const EMAIL_API = "https://api.jaewook.me/email/addr-extension-feedback"; + +const PopoverTitleWrapper = styled.div` + display: flex; + justify-content: center; +`; + +const PopoverTitle = (props: { children: React.ReactNode; }) => { + return {props.children}; +}; + +const FeedbackSenderWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + + > button.ant-btn { + margin-top: 8px; + width: 100%; + } +`; + +const PopoverContentStyle = { + width: "270px", +}; + +const FeedbackForm = () => { + const [message, setMessage] = React.useState(""); + const [sending, setSending] = React.useState(false); + const [sent, setSent] = React.useState(false); + + const handleSendClick = React.useCallback(async () => { + if (sent) { + return; + } + setSending(true); + try { + await axios.post(EMAIL_API, { feedbackContent: message }); + setSent(true); + } catch (err) { + console.error(err); + } finally { + setSending(false); + } + }, [message, sent, setSent, setSending]); + return + setMessage(ev.target.value)} /> + + ; +}; + +export const FeedbackPopover = () => { + return ( + ํ”ผ๋“œ๋ฐฑ ๋ณด๋‚ด๊ธฐ} + content={} + > + ํ”ผ๋“œ๋ฐฑ ๋ณด๋‚ด๊ธฐ + + ); +};