diff --git a/.vscode/settings.json b/.vscode/settings.json index bae72f48..f3ee2f3b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -30,4 +30,7 @@ "source.organizeImports": false, "source.fixAll.eslint": true }, + "cSpell.words": [ + "favorited" + ], } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 7a9fa044..77873890 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "urlink-chrome-extension", - "version": "1.1.4", + "version": "1.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -5088,9 +5088,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001185", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001185.tgz", - "integrity": "sha512-Fpi4kVNtNvJ15H0F6vwmXtb3tukv3Zg3qhKkOGUq7KJ1J6b9kf4dnNgtEAFXhRsJo0gNj9W60+wBvn0JcTvdTg==" + "version": "1.0.30001264", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001264.tgz", + "integrity": "sha512-Ftfqqfcs/ePiUmyaySsQ4PUsdcYyXG2rfoBVsk3iY1ahHaJEw65vfb7Suzqm+cEkwwPIv/XWkg27iCpRavH4zA==" }, "capture-exit": { "version": "2.0.0", @@ -6320,11 +6320,11 @@ } }, "dom7": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz", - "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/dom7/-/dom7-3.0.0.tgz", + "integrity": "sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==", "requires": { - "ssr-window": "^2.0.0" + "ssr-window": "^3.0.0-alpha.1" } }, "domain-browser": { @@ -8972,9 +8972,9 @@ "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==" }, "immer": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz", - "integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==" + "version": "9.0.6", + "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.6.tgz", + "integrity": "sha512-G95ivKpy+EvVAnAab4fVa4YGYn24J1SpEktnJX7JJ45Bd7xqME/SCplFzYFmTbrkwZbQ4xJK1xMTUYBkN6pWsQ==" }, "import-cwd": { "version": "2.1.0", @@ -15595,6 +15595,11 @@ "slash": "^3.0.0" } }, + "immer": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz", + "integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==" + }, "path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -15652,6 +15657,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" }, + "react-ga": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.3.0.tgz", + "integrity": "sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ==" + }, "react-hook-form": { "version": "6.13.1", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-6.13.1.tgz", @@ -17240,9 +17250,9 @@ } }, "ssr-window": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz", - "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==" + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-3.0.0.tgz", + "integrity": "sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==" }, "ssri": { "version": "8.0.1", @@ -17594,12 +17604,12 @@ } }, "swiper": { - "version": "5.4.5", - "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz", - "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==", + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-6.5.1.tgz", + "integrity": "sha512-iuyg4cr+L7wo5EI0fWUuW+lT3BnNtVTYtInhUC5JImTr0i8jNranx8BPyN8AOSKa6jBYN+oaCzj8DAwGK+ngRg==", "requires": { - "dom7": "^2.1.5", - "ssr-window": "^2.0.0" + "dom7": "^3.0.0", + "ssr-window": "^3.0.0" } }, "symbol-observable": { diff --git a/package.json b/package.json index 7ede8715..c641fa85 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "urlink-chrome-extension", - "version": "1.1.4", + "version": "1.2.0", "private": true, "dependencies": { "@craco/craco": "^6.1.1", @@ -17,12 +17,13 @@ "axios": "^0.21.1", "clsx": "^1.1.0", "history": "^4.10.1", - "immer": "^8.0.1", + "immer": "^9.0.6", "moment": "^2.26.0", "node-sass": "^4.14.1", "react": "^16.13.0", "react-chrome-extension-router": "^1.1.0", "react-dom": "^16.13.0", + "react-ga": "^3.3.0", "react-hook-form": "^6.13.1", "react-id-swiper": "^4.0.0", "react-redux": "^7.2.2", @@ -32,7 +33,7 @@ "redux-devtools-extension": "^2.13.8", "redux-saga": "^1.1.3", "redux-thunk": "^2.3.0", - "swiper": "^5.4.5", + "swiper": "^6.5.1", "yup": "^0.32.8" }, "scripts": { diff --git a/public/analytics.js b/public/analytics.js new file mode 100644 index 00000000..d49def09 --- /dev/null +++ b/public/analytics.js @@ -0,0 +1,20 @@ +/* eslint-disable no-undef */ +/* eslint-disable no-unused-expressions */ + +;(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-207149982-2', 'auto') +ga('set', 'checkProtocolTask', null) +ga('send', 'pageview') diff --git a/public/background.html b/public/background.html index b0d4b973..18cb83c2 100644 --- a/public/background.html +++ b/public/background.html @@ -1,12 +1,10 @@ - - - + + UrLink-background - - - - + + - \ No newline at end of file + + diff --git a/public/index.html b/public/index.html index c12ff35a..ee0cee8e 100644 --- a/public/index.html +++ b/public/index.html @@ -1,12 +1,13 @@ - - - - - UrLink - - -
- + + + + + UrLink + + + +
+ diff --git a/public/manifest.json b/public/manifest.json index 4491bd51..f7e15d08 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,8 +1,8 @@ { "name": "urLink", - "version": "1.1.4", + "version": "1.2.0", "manifest_version": 2, - "description": "url collection", + "description": "북마크보다 손쉽게 웹사이트를 보관하고 정리하세요.", "permissions": ["tabs", "", "identity", "history", "notifications"], "icons": { "16": "images/logo/logo16.png", @@ -24,5 +24,5 @@ "client_id": "683415540436-aimi7aksc043mre0pdj2nejtr08fkchs.apps.googleusercontent.com", "scopes": ["https://www.googleapis.com/auth/userinfo.profile", "https://www.googleapis.com/auth/userinfo.email"] }, - "content_security_policy": "script-src 'self' https://apis.google.com 'sha256-34M3HxxCd7web+UMuTvWUlRtVdx6QrTGItv3k4d183Y='; object-src 'self'" + "content_security_policy": "script-src 'self' https://www.google-analytics.com https://apis.google.com 'sha256-34M3HxxCd7web+UMuTvWUlRtVdx6QrTGItv3k4d183Y='; object-src 'self'" } diff --git a/public/popup.html b/public/popup.html index 94b583c4..f39c71ec 100644 --- a/public/popup.html +++ b/public/popup.html @@ -1,33 +1,32 @@ + + + + UrLink-popup + + - - - - UrLink-popup - + +
+
- -
-
+
+ -
- +
+ 유어링크 열기 +
-
- 유어링크 열기 +
+ +
-
- -
+
- -
-
- - - - \ No newline at end of file + + + diff --git a/src/assets/css/default.css b/src/assets/css/default.css index 4e93a283..d79eb3b9 100644 --- a/src/assets/css/default.css +++ b/src/assets/css/default.css @@ -1,13 +1,14 @@ :root { --maincolor: #2083ff; --lightblue: #77caff; - --powder-blue: #afe7ff; + --powder-blue: #e3f0ff; --pale-sky-blue: #c2e8ff; --maintext: #212529; --battleship-grey: #737b84; --blue-grey: #868e96; --very-light-blue: #e9ecef; - --pale-grey: #f6f7f9; + --pale-grey: #c4c4c4; + --light-grey: #f4f4f4; --salmon: #ff6b6b; --green-blue: #00b381; } diff --git a/src/assets/css/popup.css b/src/assets/css/popup.css index cb6439fd..0705c8b2 100644 --- a/src/assets/css/popup.css +++ b/src/assets/css/popup.css @@ -15,20 +15,21 @@ body { .popup-body { position: relative; width: 260px; - height: 410px; + height: 430px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15), 0 5px 12px 0 rgba(0, 0, 0, 0.12); background-color: #ffffff; } /* login-container */ -/* category-empty-contanier */ +/* category-empty-container */ .login-required-container, -.category-empty-contanier { +.category-empty-container { display: flex; align-items: center; justify-content: center; width: 260px; height: 234px; + margin-top: 10px; } .category-empty { @@ -97,6 +98,90 @@ body { color: var(--blue-grey); } +/* category-create */ + +.category-create-btn { + width: 208px; + height: 52px; + background: #F0F3F5; + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); + border-radius: 4px; + border: none; + cursor: pointer; + margin: 16px 26px 0; +} +.category-create-btn:hover { + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15), 0 5px 12px 0 rgba(0, 0, 0, 0.12); +} +.category-create-btn.hide { + display: none; +} +.category-create-btn .category-plus{ + margin: auto; + width: 24px; +} + +/* category-create-input-wrapper */ + +.category-create-input-wrapper { + width: 210px; + height: 52px; + border: solid 1px #2083ff; + box-shadow: 0 2px 8px 0 rgb(0 0 0 / 15%), 0 5px 12px 0 rgb(0 0 0 / 12%), 0 1px 3px 0 rgb(0 0 0 / 12%); + border-radius: 4px; + background-color: #fff; + margin: 16px 26px 0; + display: flex; + flex-direction: row; + align-items:center; +} +.category-create-input-wrapper.hide { + display: none; +} +.enter-category-name-input{ + width: 122px; + height: 24px; + font-size: 14px; + margin-left: 4px; + margin-right: 4px; + border-radius: 4px; + background-color: #f1f3f5; + border: none; +} +.enter-category-name-input:focus { + outline: none !important; +} +.category-btn-group { + display: flex; + flex-direction: row; +} +.category-btn-group .create-ok-btn { + color: #fff; + width: 37px; + height: 24px; + padding: 0; + font-size: 12px; + min-width: 0; + border-radius: 4px; + border: none; + background-color: #2083ff; + cursor: pointer; +} +.category-btn-group .create-cancel-btn{ + width: 37px; + height: 24px; + padding: 0; + font-size: 12px; + min-width: 0; + border-radius: 4px; + border: none; + background-color: transparent; + cursor: pointer; +} +.category-btn-group .create-cancel-btn:hover{ + background-color: rgba(0, 0, 0, 0.04); +} + /* category-upload-finish */ .upload-finish { color: #fff; @@ -209,10 +294,9 @@ body { margin: 17px; width: 228px; - height: 40px; - border-radius: 1.8px; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1); - background-color: var(--blue-grey); + height: 48px; + border-radius: 4px; + background-color: var(--light-grey); } /* .link-save-btn .link-save-btn-text{ @@ -235,13 +319,8 @@ body { align-items: center; justify-content: center; - margin: 17px; - width: 228px; - height: 40px; - border-radius: 1.8px; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1); - background-color: #ffffff; - color: var(--maintext); + background-color: var(--maincolor); + color: #fff; } /* urlLink open */ @@ -252,17 +331,16 @@ body { margin: 17px; width: 228px; - height: 40px; - border-radius: 1.8px; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1); - background-color: var(--maincolor); + height: 48px; + border-radius: 4px; + background-color: var(--powder-blue); } .urlLink-open-btn .urlLink-open-btn-text { padding: 14px; width: 100%; height: 20px; - color: #ffffff; + color: var(--maincolor); } a.urlLink-open-btn-text:link { @@ -308,23 +386,25 @@ a.urlLink-open-btn-text:hover { .category-popup { display: flex; + align-items: center; + justify-content: center; width: 238px; - height: 44px; + min-height: 44px; border-radius: 4px; box-shadow: 0 14px 28px 0 rgba(0, 0, 0, 0.15), 0 10px 10px 0 rgba(0, 0, 0, 0.12); background-color: rgba(33, 37, 41, 0.85); + padding: 10px 0; } .category-popup-img { - margin: 10px; width: 24px; height: 24px; object-fit: contain; + margin-right: 5px; } .category-popup-container .category-popup-text { width: 190px; - height: 17px; /* font-family: SpoqaHanSans; */ font-size: 14px; font-weight: normal; @@ -333,6 +413,4 @@ a.urlLink-open-btn-text:hover { line-height: normal; letter-spacing: -0.64px; color: #ffffff; - margin-top: 11px; - padding: 0px; } \ No newline at end of file diff --git a/src/assets/images/plus.png b/src/assets/images/plus.png new file mode 100644 index 00000000..61fba86b Binary files /dev/null and b/src/assets/images/plus.png differ diff --git a/src/hooks/useDebounce.js b/src/hooks/useDebounce.js new file mode 100644 index 00000000..78a9795a --- /dev/null +++ b/src/hooks/useDebounce.js @@ -0,0 +1,22 @@ +import { useState, useEffect } from 'react' + +function useDebounce(value, delay) { + // 디바운스 할 값을 관리하기위한 상태값과 setter함수 + const [debouncedValue, setDebouncedValue] = useState(value) + + useEffect(() => { + // 딜레이 이후 값을 업데이트한다. + const timer = setTimeout(() => { + setDebouncedValue(value) + }, delay) + + // 딜레이 기간중에 value혹은 delay값이 업데이트 되었다면 이(cleanup)함수를 실행한다. + return () => { + clearTimeout(timer) + } + }, [value, delay]) // delay값이나 value값이 업데이트 되었다면 다시 호출한다. + + return debouncedValue +} + +export default useDebounce diff --git a/src/main/App.js b/src/main/App.js index 49532e36..63639eda 100644 --- a/src/main/App.js +++ b/src/main/App.js @@ -1,6 +1,8 @@ -import React from 'react' +import React, { useEffect } from 'react' +import moment from 'moment' import { Router } from 'react-chrome-extension-router' +import ReactGA from 'react-ga' import Snackbar from '@main/components/Toast' import Home from '@main/pages/Home' @@ -9,7 +11,17 @@ import { getAccessToken } from '@utils/http/auth' import GetStartPage from './pages/Start' +import 'moment/locale/ko' + +moment.locale('ko') + function App() { + useEffect(() => { + ReactGA.initialize('UA-207149982-2') + ReactGA.set({ page: window.location.pathname }) + ReactGA.pageview(window.location.pathname + window.location.search) + }, []) + return ( <> {getAccessToken() ? : } diff --git a/src/main/components/SearchBar/index.jsx b/src/main/components/SearchBar/index.jsx index 4c99960e..013b6623 100644 --- a/src/main/components/SearchBar/index.jsx +++ b/src/main/components/SearchBar/index.jsx @@ -1,27 +1,67 @@ import React from 'react' +import Container from '@material-ui/core/Container' +import Divider from '@material-ui/core/Divider' import InputBase from '@material-ui/core/InputBase' +import MenuItem from '@material-ui/core/MenuItem' +import Select from '@material-ui/core/Select' import SearchIcon from '@material-ui/icons/Search' +import { DatePicker } from '@material-ui/pickers' import useStyles from './style' -function SearchBar() { +function SearchBar({ inputProps, searchFilterList, onSelectName, selectedName, onChangeDate, selectedDate }) { const classes = useStyles() return ( -
-
- -
- + + + + + {selectedName === 'date' ? ( + + ) : ( + + )} + ) } diff --git a/src/main/components/SearchBar/style.js b/src/main/components/SearchBar/style.js index 9969da3e..c1fff551 100644 --- a/src/main/components/SearchBar/style.js +++ b/src/main/components/SearchBar/style.js @@ -1,46 +1,61 @@ -import { fade, makeStyles } from '@material-ui/core/styles' +import { makeStyles } from '@material-ui/core/styles' export const useStyles = makeStyles((theme) => ({ - search: { - position: 'relative', - width: '100%', - marginLeft: 0, - borderRadius: theme.shape.borderRadius, - backgroundColor: fade('#2083ff', 0.75), - '&:hover': { - backgroundColor: fade('#2083ff', 0.5), + searchBar: { + display: 'flex', + width: 410, + padding: 0, + margin: 'auto 0 auto auto', + borderRadius: 20, + backgroundColor: 'white', + border: theme.spacing(0.5, 0), + + '& > .MuiInput-underline:before': { + left: 0, + right: 0, + bottom: 0, + position: 'absolute', + transition: 'border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', + borderBottom: '0px', + pointerEvents: 'none', }, - [theme.breakpoints.up('sm')]: { - marginLeft: theme.spacing(1), - width: 'auto', + }, + searchInputBase: { + width: '65%', + }, + searchInput: { + width: '100%', + color: 'black', + fontSize: 14, + paddingLeft: `calc(${theme.spacing(1)}px)`, + }, + inputSelect: { + width: '25%', + fontSize: 14, + '& > .MuiSelect-select.MuiSelect-select': { + paddingLeft: '10px', }, }, - searchIcon: { - position: 'absolute', - height: '100%', - padding: theme.spacing(0, 2), - pointerEvents: 'none', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - color: 'white', + menuItem: { + fontSize: 14, + padding: theme.spacing(0, 1.5), }, - inputRoot: { - color: 'white', + divider: { + margin: theme.spacing(0.5, 0), }, - inputInput: { - width: '100%', - // vertical padding + font size from searchIcon - padding: theme.spacing(1, 1, 1, 0), - paddingLeft: `calc(1em + ${theme.spacing(4)}px)`, - transition: theme.transitions.create('width'), - [theme.breakpoints.up('sm')]: { - width: '12ch', - '&:focus': { - width: '20ch', - }, + datePicker: { + width: '65%', + padding: theme.spacing(0, 1), + marginTop: 5, + '& > .MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-formControl.MuiInput-formControl': { + fontSize: 14, }, }, + searchIcon: { + width: '10%', + color: '#CCCCCC', + margin: '7px 0 7px 7px', + }, })) export default useStyles diff --git a/src/main/components/SearchButton/index.jsx b/src/main/components/SearchButton/index.jsx index dd474061..eef00eab 100644 --- a/src/main/components/SearchButton/index.jsx +++ b/src/main/components/SearchButton/index.jsx @@ -7,7 +7,7 @@ import SearchImg from '@assets/images/search.png' import useStyles, { StyledToggleButtonGroup } from './style' -function SearchButton({ buttonProps, inputProps, listSearchFilter, onSelectButton, selectedName }) { +function SearchButton({ buttonProps, inputProps, searchFilterList, onSelectButton, selectedName }) { const classes = useStyles() const searchButtonRef = useRef(null) @@ -41,10 +41,10 @@ function SearchButton({ buttonProps, inputProps, listSearchFilter, onSelectButto
- {listSearchFilter && ( + {searchFilterList && (
- {listSearchFilter.map(({ search, name }) => ( + {searchFilterList.map(({ search, name }) => ( async (e) => { try { e.stopPropagation() - await dispatch(alaramNoticeReadNoticeThunk({ alarm_id: alarm.id })) - dispatch(linksRead.request({ categoryId: selectedCategory?.id })) + await dispatch(alarmNoticeReadNoticeThunk({ alarm_id: alarm.id })) + dispatch(linksRead.request({ categoryId: selectedCategory?.id }, { key: selectedCategory?.id })) createTab(alarm.url_path) } catch (error) { openToast({ type: 'error', message: '예상치 못한 에러가 발생했습니다.' }) @@ -58,8 +54,8 @@ function AlarmList() { (alarm_id) => async (e) => { try { e.stopPropagation() - await dispatch(alaramNoticeNoReturnNoticeThunk({ alarm_id })) - dispatch(linksRead.request({ categoryId: selectedCategory?.id })) + await dispatch(alarmNoticeNoReturnNoticeThunk({ alarm_id })) + dispatch(linksRead.request({ categoryId: selectedCategory?.id }, { key: selectedCategory?.id })) openToast({ type: 'success', message: '알람을 삭제했습니다.' }) } catch (error) { openToast({ type: 'error', message: '알람을 삭제하지 못했습니다.' }) @@ -98,7 +94,7 @@ function AlarmList() { - + diff --git a/src/main/pages/Home/AppBar/AlarmList/style.js b/src/main/pages/Home/AppBar/AlarmList/style.js index 858b65e8..f886379f 100644 --- a/src/main/pages/Home/AppBar/AlarmList/style.js +++ b/src/main/pages/Home/AppBar/AlarmList/style.js @@ -44,7 +44,7 @@ const useStyles = makeStyles((theme) => ({ fontSize: 11, }, }, - notiecText: { + noticeText: { '& .MuiListItemText-secondary': { fontWeight: 'bold', color: '#2083ff', diff --git a/src/main/pages/Home/AppBar/DragableHistoryList/index.jsx b/src/main/pages/Home/AppBar/DragableHistoryList/index.jsx index dab7547b..de311a6f 100644 --- a/src/main/pages/Home/AppBar/DragableHistoryList/index.jsx +++ b/src/main/pages/Home/AppBar/DragableHistoryList/index.jsx @@ -7,9 +7,10 @@ import { debounce } from 'lodash' import linkListSearchEmptyImg from '@assets/images/group-17.png' import linkListEmptyImg from '@assets/images/group-19.png' +import useDebounce from '@hooks/useDebounce' import useOutsideAlerter from '@hooks/useOutsideAlerter' import ScrollUpButton from '@main/components/ScrollUpButton' -import SearchButton from '@main/components/SearchButton' +import SearchBar from '@main/components/SearchBar' import { useHistoryLinks } from '@modules/historyLink' import { DROP_ZONE, DRAG, useDrag, useDropZone } from '@modules/ui' import { createTabList } from '@utils/chromeApis/tab' @@ -22,14 +23,25 @@ import useStyles from './style' const { LINK } = DRAG const { LINK_DROP_ZONE } = DROP_ZONE +const searchFilterList = [ + { search: 'text', name: '제목/주소' }, + { search: 'date', name: '날짜' }, +] + function DragableHistoryList() { const classes = useStyles() - const { filter, listData, reload, search, next } = useHistoryLinks() - const { setDragData, clearDragData } = useDrag(LINK) + const { filter, listData, dateSearch, keywordSearch, next } = useHistoryLinks() + const { setDragData } = useDrag(LINK) const { open, toggle, close } = useDropZone(LINK_DROP_ZONE) const [selectedList, setSelectedList] = useState([]) const [buttonOpen, setButtonOpen] = useState(null) + + const [selectedName, setSelectedName] = useState(searchFilterList[0].search) + const [keyword, setKeyword] = useState('') + const debouncedKeyword = useDebounce(keyword, 250) + const [dateKeyword, setDateKeyword] = useState(null) + const historyRootRef = useRef(null) const historyContentRef = useRef(null) const dragBoxRef = useRef(null) @@ -61,12 +73,11 @@ function DragableHistoryList() { () => (e) => { e.stopPropagation() setSelectedList([]) - clearDragData() }, - [clearDragData] + [] ) - const handleToogleSelectIem = useCallback( + const handleToggleSelectItem = useCallback( ({ id, url: path }) => () => { const isSelected = selectedList.find((item) => item.id === id) if (isSelected) setSelectedList(selectedList.filter((data) => data.id !== id)) @@ -86,47 +97,63 @@ function DragableHistoryList() { [next] ) - const handleHistorySearch = useCallback( + const handleResetInput = useCallback(() => { + setKeyword('') + setDateKeyword(null) + }, []) + + const handleReload = useMemo(() => { + return debounce(() => { + setSelectedList([]) + handleResetInput() + }, 400) + }, [handleResetInput]) + + const handleSelectName = useCallback( (e) => { - const { key, currentTarget } = e - const { value } = currentTarget - if (key === 'Enter') { - historyContentRef.current.scrollTop = 0 - search(value) - } + handleResetInput() + setSelectedName(e.target.value) }, - [search] + [handleResetInput] ) + // title, url + const handleChangeInput = useCallback((e) => { + setKeyword(e.target.value) + }, []) + + // date + const handleChangeDate = useCallback((date) => { + setDateKeyword(date) + }, []) + const handleOpenNewTab = useCallback(() => { createTabList(selectedList.reduce((list, link) => list.concat(link.path), [])) }, [selectedList]) - const handleReload = useMemo(() => { - return debounce(() => { - historyContentRef.current.scrollTop = 0 - setSelectedList([]) - reload() - }, 400) - }, [reload]) - useEffect(() => { if (!open && selectedList.length) toggle() else if (open && !selectedList.length) close() }, [selectedList, toggle, close, open]) + useEffect(() => { + historyContentRef.current.scrollTop = 0 + if (selectedName === 'text') { + keywordSearch(debouncedKeyword) + } else if (selectedName === 'date') { + dateSearch(dateKeyword) + } + }, [selectedName, keywordSearch, dateSearch, dateKeyword, debouncedKeyword]) + return (
방문기록
- + + + {!!selectedList.length && (
- - - +
{!!listData.length ? ( @@ -151,7 +186,7 @@ function DragableHistoryList() { isSelected={selectedList.find((list) => list.id === data.id)} onDragStart={handleDragStart({ id: data.id, url: data.url })} onDragEnd={handleDragEnd()} - onClick={handleToogleSelectIem({ id: data.id, url: data.url })} + onClick={handleToggleSelectItem({ id: data.id, url: data.url })} /> ))} diff --git a/src/main/pages/Home/AppBar/DragableHistoryList/style.js b/src/main/pages/Home/AppBar/DragableHistoryList/style.js index 3c0541b8..8f74484d 100644 --- a/src/main/pages/Home/AppBar/DragableHistoryList/style.js +++ b/src/main/pages/Home/AppBar/DragableHistoryList/style.js @@ -4,7 +4,7 @@ const useStyles = makeStyles((theme) => ({ root: { position: 'relative', - width: 575, + width: 700, height: '100vh', // padding: '20px 24px 22px 24px', @@ -19,7 +19,7 @@ const useStyles = makeStyles((theme) => ({ padding: '16px 16px 10px 16px', }, mainText: { - marginRight: 16, + marginRight: 10, height: 36, backgroundColor: 'transparent', @@ -27,6 +27,9 @@ const useStyles = makeStyles((theme) => ({ fontSize: '20pt', fontWeight: 'bold', }, + reloadIcon: { + padding: 0, + }, tabOpenButton: { marginLeft: 16, diff --git a/src/main/pages/Home/AppBar/index.jsx b/src/main/pages/Home/AppBar/index.jsx index bb5fd58c..f09be6fe 100644 --- a/src/main/pages/Home/AppBar/index.jsx +++ b/src/main/pages/Home/AppBar/index.jsx @@ -6,7 +6,7 @@ import { useSelector } from 'react-redux' import alarmImg from '@assets/images/alarm.png' import historyImg from '@assets/images/history.png' import personImg from '@assets/images/person.png' -import { useAlaramNoticeConnection, alaramNoticeSelector } from '@modules/alarmNotice' +import { alarmNoticeSelector } from '@modules/alarmNotice' import { useHistoryLinks } from '@modules/historyLink' import AlarmList from './AlarmList' @@ -15,10 +15,9 @@ import Profile from './Profile' import useStyles, { StyledListItem } from './style' function AppBar() { - useAlaramNoticeConnection() const classes = useStyles() const { reload } = useHistoryLinks() - const alarmList = useSelector(alaramNoticeSelector.listData) + const alarmList = useSelector(alarmNoticeSelector.listData) const notReadAlarmList = useMemo(() => { return alarmList?.filter((item) => !Boolean(item?.alarm_has_read)) }, [alarmList]) diff --git a/src/main/pages/Home/CategoryList/CategoryButtonGroup/index.jsx b/src/main/pages/Home/CategoryList/CategoryButtonGroup/index.jsx index 3d92086a..3efa23f2 100644 --- a/src/main/pages/Home/CategoryList/CategoryButtonGroup/index.jsx +++ b/src/main/pages/Home/CategoryList/CategoryButtonGroup/index.jsx @@ -45,17 +45,12 @@ function CategoryButtonGroup() { const handleClickAdd = useCallback( async (e) => { + if (!categoryName) return try { e.stopPropagation() - if (!categoryName) { - setButtonState(BUTTON_STATE.addOpen) - setCategoryName('') - } else { - setButtonState(BUTTON_STATE.addOpen) - await dispatch(categoryCreateThunk({ name: categoryName, is_favorited: false })) - setCategoryName('') - dispatch(categoriesRead.request(undefined, { key: 'isFirstCategory' })) - } + setCategoryName('') + await dispatch(categoryCreateThunk({ name: categoryName, is_favorited: false })) + dispatch(categoriesRead.request(undefined, { selectFirstCategory: true })) } catch (error) { openToast({ type: 'error', message: error?.response?.data?.message || '네트워크 오류!!' }) } @@ -64,10 +59,7 @@ function CategoryButtonGroup() { ) const handleChangeNewCategoryTitle = useCallback((e) => { - const checks = /[a-zA-Z]/ - if (checks.test(e.target.value)) { - if (e.target.value.length >= 14) return - } else if (e.target.value.length >= 7) return + if (e.target.value.length > 18) return setCategoryName(e.target.value) }, []) @@ -88,15 +80,14 @@ function CategoryButtonGroup() { setCategoryName('') }, []) - const handleClickdDelete = useCallback( + const handleClickDelete = useCallback( async (e) => { try { e.stopPropagation() + deleteCategoryToggle() await dispatch(categoryRemoveThunk({ id: selectedCategory.id })) - dispatch(categoriesRead.request(undefined, { key: 'isFirstCategory' })) + dispatch(categoriesRead.request(undefined, { selectFirstCategory: true })) openToast({ type: 'success', message: '선택하신 카테고리가 삭제되었습니다.' }) - deleteCategoryToggle() - setButtonState(BUTTON_STATE.deleteOpen) } catch (error) { openToast({ type: 'error', message: error?.response?.data?.message || '네트워크 오류!!' }) } @@ -105,11 +96,7 @@ function CategoryButtonGroup() { ) useEffect(() => { - if (selectedCategory?.type === 'mount') { - setButtonState(BUTTON_STATE.addOpen) - } else { - setButtonState(BUTTON_STATE.deleteOpen) - } + if (selectedCategory?.id) setButtonState(BUTTON_STATE.deleteOpen) }, [selectedCategory]) return ( @@ -151,7 +138,7 @@ function CategoryButtonGroup() { btnYesText="삭제" contentText="카테고리를 삭제하면 안에 저장된 모든 탭이 삭제 됩니다. 그래도 삭제 하시겠습니까?" handleClose={deleteCategoryClose} - handleYesClick={handleClickdDelete} + handleYesClick={handleClickDelete} /> ) diff --git a/src/main/pages/Home/CategoryList/CategoryItem/index.jsx b/src/main/pages/Home/CategoryList/CategoryItem/index.jsx index e4295672..ee7f6c7c 100644 --- a/src/main/pages/Home/CategoryList/CategoryItem/index.jsx +++ b/src/main/pages/Home/CategoryList/CategoryItem/index.jsx @@ -42,17 +42,14 @@ function CategoryItem({ data = {}, selected = false, hovered = false, dragFinish
{isEditingTitle ? editedCategory?.name : data?.name}
- + {data.url_count === 0 ? '링크 없음' : data.url_count + ' 링크'} {data.is_favorited && ( diff --git a/src/main/pages/Home/CategoryList/CategoryItem/style.js b/src/main/pages/Home/CategoryList/CategoryItem/style.js index 398f5787..bfe8dc16 100644 --- a/src/main/pages/Home/CategoryList/CategoryItem/style.js +++ b/src/main/pages/Home/CategoryList/CategoryItem/style.js @@ -6,6 +6,7 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', + padding: '18px 16px', }, listTab: { @@ -22,16 +23,19 @@ const useStyles = makeStyles((theme) => ({ outline: 'none', }, title: { - fontSize: 16, - maxWidth: '60%', + fontSize: 14, + width: 120, color: '#212529', - padding: 18, - height: 58, + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', }, selectedTitle: { color: '#2083ff', fontWeight: 'bold', - maxWidth: '65%', + }, + favoriteTitle: { + width: '60%', }, hoveredItem: { backgroundColor: 'rgba(32, 131, 255, 0.1)', @@ -54,7 +58,7 @@ const useStyles = makeStyles((theme) => ({ textAlign: 'center', }, favoriteStar: { - marginRight: '8px', + marginLeft: '2px', }, block: { display: 'block', @@ -62,13 +66,10 @@ const useStyles = makeStyles((theme) => ({ hidden: { display: 'none', }, - marginRight: { - marginRight: '8px', - }, linkBox: { display: 'flex', alignItems: 'center', - maxWidth: '40%', + justifyContent: 'flex-end', }, dragFinished: { position: 'relative', diff --git a/src/main/pages/Home/CategoryList/index.jsx b/src/main/pages/Home/CategoryList/index.jsx index 09864cf3..6061030a 100644 --- a/src/main/pages/Home/CategoryList/index.jsx +++ b/src/main/pages/Home/CategoryList/index.jsx @@ -139,8 +139,9 @@ function CategoryList() { setDragData({ ...dragData, dragFinished: true }) } else if (dragType === LINK && linkHoverTabId) { const path = linkListData.reduce((prev, data) => prev.concat(data.path), []) + setDragData({ ...dragData, id: linkHoverTabId }) await dispatch(linkCreateThunk({ categoryId: linkHoverTabId, path })) - if (selectedCategory?.id === linkHoverTabId) dispatch(linksRead.request({ categoryId: linkHoverTabId })) + dispatch(linksRead.request({ categoryId: linkHoverTabId }, { key: linkHoverTabId })) await dispatch(categoriesReadThunk()) setDragData({ ...dragData, dragFinished: true }) openToast({ type: 'success', message: '링크가 저장 되었습니다.' }) @@ -153,18 +154,7 @@ function CategoryList() { openToast({ type: 'error', message: error?.response?.data?.message || '네트워크 오류!!' }) } }, - [ - dragType, - dispatch, - dragData, - setDragData, - linkListData, - linkHoverTabId, - selectedCategory?.id, - dragOverTabData, - clearDragData, - openToast, - ] + [dragType, dispatch, dragData, setDragData, linkListData, linkHoverTabId, dragOverTabData, clearDragData, openToast] ) return ( diff --git a/src/main/pages/Home/LinkDropZone/index.jsx b/src/main/pages/Home/LinkDropZone/index.jsx index 229888b7..b5783153 100644 --- a/src/main/pages/Home/LinkDropZone/index.jsx +++ b/src/main/pages/Home/LinkDropZone/index.jsx @@ -18,24 +18,34 @@ function LinkDropZone() { const classes = useStyles() const dispatch = useDispatch() const { openToast } = useToast() + const categoryList = useSelector(categorySelector.listData) const selectedCategory = useSelector(categorySelector.selectedCategory) - const { listData } = useDrag(LINK) + const { listData, clearDragData } = useDrag(LINK) const { open } = useDropZone(LINK_DROP_ZONE) const handleDropOnCardArea = useCallback( async (e) => { try { e.stopPropagation() + if (!categoryList.length) { + openToast({ type: 'error', message: '카테고리를 생성해주세요.' }) + return + } + if (!selectedCategory.id) { + openToast({ type: 'error', message: '링크를 저장할 카테고리를 만들거나 선택해주세요.' }) + return + } const path = listData.reduce((prev, data) => prev.concat(data.path), []) await dispatch(linkCreateThunk({ categoryId: selectedCategory.id, path })) - dispatch(linksRead.request({ categoryId: selectedCategory.id })) + clearDragData() + dispatch(linksRead.request({ categoryId: selectedCategory.id }, { key: selectedCategory.id })) dispatch(categoriesRead.request()) openToast({ type: 'success', message: '링크가 저장 되었습니다.' }) } catch (error) { openToast({ type: 'error', message: error?.response?.data?.message || '네트워크 오류!!' }) } }, - [dispatch, listData, openToast, selectedCategory.id] + [dispatch, listData, openToast, selectedCategory.id, clearDragData, categoryList] ) const handleDragOverOnCardArea = useCallback((e) => { @@ -45,7 +55,7 @@ function LinkDropZone() { return (
({ justifyContent: 'center', alignItems: 'center', - width: 'calc(100% - 600px)', + width: 'calc(100% - 1012px)', height: '100%', - paddingLeft: 259, backgroundColor: 'rgba(53, 142, 255, 0.15)', opacity: 1, }, - diplayNone: { + displayNone: { display: 'none', }, addLinkIcon: { diff --git a/src/main/pages/Home/LinkList/Header/EditableCategoryTitle/index.jsx b/src/main/pages/Home/LinkList/Header/EditableCategoryTitle/index.jsx index da2696a7..46914982 100644 --- a/src/main/pages/Home/LinkList/Header/EditableCategoryTitle/index.jsx +++ b/src/main/pages/Home/LinkList/Header/EditableCategoryTitle/index.jsx @@ -24,11 +24,9 @@ import { isObjkeysEmpty } from '@utils/filter' import useStyles from './style' -const CHECK_CATEGORY_NAME = /[a-zA-Z]/ -const CATEGORY_NAME_EN_MAX_LENTH = 13 -const CATEGORY_NAME_KO_MAX_LENTH = 6 +const CATEGORY_NAME_MAX_LENTH = 18 const CATEGORY_SCHEMA = yup.object({ - name: yup.string().max(CATEGORY_NAME_EN_MAX_LENTH).required(), + name: yup.string().max(CATEGORY_NAME_MAX_LENTH).required(), }) function EditableCategoryTitle() { @@ -45,15 +43,11 @@ function EditableCategoryTitle() { }) const rootRef = useRef(null) - const [categoryNameMaxLength, setCategoyNameMaxLength] = useState(CATEGORY_NAME_EN_MAX_LENTH) const [isEditable, setIsEditable] = useState(false) const editedName = watch('name') || '' useEffect(() => { - if (CHECK_CATEGORY_NAME.test(editedName)) setCategoyNameMaxLength(CATEGORY_NAME_EN_MAX_LENTH) - else setCategoyNameMaxLength(CATEGORY_NAME_KO_MAX_LENTH) - if (isEditable) dispatch(categoryEdit({ name: editedName })) }, [isEditable, editedName, dispatch]) @@ -106,7 +100,7 @@ function EditableCategoryTitle() { onKeyUp={handleEditKeyUp} autoFocus inputProps={{ - maxLength: categoryNameMaxLength, + maxLength: CATEGORY_NAME_MAX_LENTH, }} inputRef={register} /> diff --git a/src/main/pages/Home/LinkList/Header/EditableCategoryTitle/style.js b/src/main/pages/Home/LinkList/Header/EditableCategoryTitle/style.js index c8b7175c..d4ed153f 100644 --- a/src/main/pages/Home/LinkList/Header/EditableCategoryTitle/style.js +++ b/src/main/pages/Home/LinkList/Header/EditableCategoryTitle/style.js @@ -4,7 +4,6 @@ import { makeStyles } from '@material-ui/core/styles' export const useStyles = makeStyles((_theme) => ({ root: { flexShrink: 0, - height: 36, }, editIconActive: { color: green[600], diff --git a/src/main/pages/Home/LinkList/Header/TabButtonGroup/index.jsx b/src/main/pages/Home/LinkList/Header/TabButtonGroup/index.jsx index f130d4b1..d6864e59 100644 --- a/src/main/pages/Home/LinkList/Header/TabButtonGroup/index.jsx +++ b/src/main/pages/Home/LinkList/Header/TabButtonGroup/index.jsx @@ -31,7 +31,7 @@ function TabButtonGroup() { openToast({ type: 'error', message: error?.response?.data?.message || '네트워크 오류!!' }) } finally { dispatch(categoriesRead.request()) - dispatch(linksRead.request({ categoryId: selectedCategory.id })) + dispatch(linksRead.request({ categoryId: selectedCategory.id }, { key: selectedCategory.id })) } }, [dispatch, selectedLinkList, selectedCategory.id, openToast]) diff --git a/src/main/pages/Home/LinkList/Header/index.jsx b/src/main/pages/Home/LinkList/Header/index.jsx index ba020c65..65a14c1f 100644 --- a/src/main/pages/Home/LinkList/Header/index.jsx +++ b/src/main/pages/Home/LinkList/Header/index.jsx @@ -1,67 +1,78 @@ -import React, { useCallback, memo, useState, useMemo } from 'react' +import React, { useEffect, useCallback, memo, useState, useMemo } from 'react' import { IconButton, Toolbar } from '@material-ui/core' import { Refresh as RefreshIcon } from '@material-ui/icons' import { debounce } from 'lodash' -import { useSelector, useDispatch } from 'react-redux' +import { useDispatch } from 'react-redux' -import SearchButton from '@main/components/SearchButton' -import { categorySelector } from '@modules/category' -import { useLinks, linkSearchFilterChangeState } from '@modules/link' +import useDebounce from '@hooks/useDebounce' +import SearchBar from '@main/components/SearchBar' +import { linkSearchFilterChangeState } from '@modules/link' import EditableCategoryTitle from './EditableCategoryTitle' import useStyles from './style' import TabButtonGroup from './TabButtonGroup' -const listSearchFilter = [ - { search: 'path', name: '도메인' }, - { search: 'title', name: '단어' }, +const searchFilterList = [ + { search: 'path', name: '주소' }, + { search: 'title', name: '제목' }, ] -function Header() { +function Header({ links }) { const classes = useStyles() const dispatch = useDispatch() - const selectedCategory = useSelector(categorySelector.selectedCategory) - const { reload } = useLinks({ categoryId: selectedCategory?.id }) - const [selectedName, setSelectedName] = useState(listSearchFilter[0].search) + const [selectedName, setSelectedName] = useState(searchFilterList[0].search) + const [keyword, setKeyword] = useState('') - const handleLinkSearch = useCallback( - (e) => { - const { key, currentTarget } = e - const { value } = currentTarget - if (key === 'Enter') { - dispatch(linkSearchFilterChangeState({ selectedName, keyword: value })) - } - }, - [dispatch, selectedName] - ) + const debouncedKeyword = useDebounce(keyword, 250) + + const handleChangeInput = useCallback((e) => { + setKeyword(e.target.value) + }, []) - const handleSelectButton = useCallback((_e, name) => { - setSelectedName(name) + const handleResetInput = useCallback(() => { + setKeyword('') }, []) const handleReload = useMemo(() => { return debounce(() => { - reload() + handleResetInput() }, 400) - }, [reload]) + }, [handleResetInput]) + + const handleSelectName = useCallback( + (e) => { + handleResetInput() + setSelectedName(e.target.value) + }, + [handleResetInput] + ) + + useEffect(() => { + dispatch(linkSearchFilterChangeState({ selectedName, keyword: debouncedKeyword })) + }, [dispatch, selectedName, debouncedKeyword]) return ( - - - - - + {!!links.length && ( + <> + + + + + + + )} ) } diff --git a/src/main/pages/Home/LinkList/Header/style.js b/src/main/pages/Home/LinkList/Header/style.js index 89934ecd..d14228e0 100644 --- a/src/main/pages/Home/LinkList/Header/style.js +++ b/src/main/pages/Home/LinkList/Header/style.js @@ -4,9 +4,6 @@ export const useStyles = makeStyles((theme) => ({ toolbar: { paddingLeft: 0, paddingRight: 0, - '& > :nth-last-child(1)': { - marginLeft: 'auto', - }, }, tabText: { fontSize: 14, @@ -20,6 +17,9 @@ export const useStyles = makeStyles((theme) => ({ tabDeleteText: { color: theme.palette.secondary.main, }, + refreshBtn: { + padding: 12, + }, })) export default useStyles diff --git a/src/main/pages/Home/LinkList/Link/index.jsx b/src/main/pages/Home/LinkList/Link/index.jsx index ce29fbb5..eab07ccc 100644 --- a/src/main/pages/Home/LinkList/Link/index.jsx +++ b/src/main/pages/Home/LinkList/Link/index.jsx @@ -98,7 +98,7 @@ function Link({ data }) { is_favorited: !data.is_favorited, }) ) - dispatch(linksRead.request({ categoryId: data.category })) + dispatch(linksRead.request({ categoryId: data.category }, { key: data.category })) } catch (error) { openToast({ type: 'error', message: error?.response?.data?.message || '네트워크 오류!!' }) } @@ -109,10 +109,10 @@ function Link({ data }) { const handleCopy = useCallback( (e) => { e.stopPropagation() - copyLink(data.url) + copyLink(data.path) openToast({ type: 'success', message: '링크가 복사 되었습니다.' }) }, - [data.url, openToast] + [data.path, openToast] ) const handleSetAlarm = useCallback( @@ -132,7 +132,7 @@ function Link({ data }) { }, }) ) - dispatch(linksRead.request({ categoryId: data.category })) + dispatch(linksRead.request({ categoryId: data.category }, { key: data.category })) openToast({ type: 'success', message: '알람이 설정 되었습니다.' }) } catch (error) { openToast({ type: 'error', message: error?.response?.data?.message || '네트워크 오류!!' }) @@ -160,7 +160,7 @@ function Link({ data }) { description: formData.description, }) ) - dispatch(linksRead.request({ categoryId: data.category })) + dispatch(linksRead.request({ categoryId: data.category }, { key: data.category })) setIsEditable(false) openToast({ type: 'success', message: '링크 카드 정보가 수정 되었습니다.' }) } catch (error) { diff --git a/src/main/pages/Home/LinkList/LinkSkeleton/index.jsx b/src/main/pages/Home/LinkList/LinkSkeleton/index.jsx new file mode 100644 index 00000000..e60740cd --- /dev/null +++ b/src/main/pages/Home/LinkList/LinkSkeleton/index.jsx @@ -0,0 +1,25 @@ +import React from 'react' + +import Card from '@material-ui/core/Card' +import CardContent from '@material-ui/core/CardContent' +import Skeleton from '@material-ui/lab/Skeleton' + +import useStyles from './style' + +function LinkSkeleton() { + const classes = useStyles() + + return ( + + + + + + + + + + ) +} + +export default LinkSkeleton diff --git a/src/main/pages/Home/LinkList/LinkSkeleton/style.js b/src/main/pages/Home/LinkList/LinkSkeleton/style.js new file mode 100644 index 00000000..405e99d1 --- /dev/null +++ b/src/main/pages/Home/LinkList/LinkSkeleton/style.js @@ -0,0 +1,20 @@ +import { makeStyles } from '@material-ui/core/styles' + +const useStyles = makeStyles((theme) => ({ + card: { + width: 208, + height: 241, + }, + media: { + width: '100%', + height: 120, + }, + cardContent: { + padding: 5, + '& span': { + transform: 'scale(1.0)', + }, + }, +})) + +export default useStyles diff --git a/src/main/pages/Home/LinkList/index.jsx b/src/main/pages/Home/LinkList/index.jsx index eb98fd06..1b6bf42d 100644 --- a/src/main/pages/Home/LinkList/index.jsx +++ b/src/main/pages/Home/LinkList/index.jsx @@ -9,23 +9,41 @@ import CategoryEmptyImg from '@assets/images/group-5.svg' import useOutsideAlerter from '@hooks/useOutsideAlerter' import ScrollUpButton from '@main/components/ScrollUpButton' import { useCategories, categorySelector } from '@modules/category' -import { useLinks, linkSelector, linkClearSelect, linkSearchFilterInit } from '@modules/link' +import { useLinks, linkSelector, linkClearSelect, linkSearchFilterInit, linksRead, linkCreate } from '@modules/link' +import { PENDING } from '@modules/pending' +import { uiSelector } from '@modules/ui' import Header from './Header' import Link from './Link' +import LinkSkeleton from './LinkSkeleton' import useStyles from './style' const CATEGORY_EMPTY = 0 const LINK_EMPTY = 0 const SEARCH_LINK_EMPTY = 1 +const SkeletonList = (length) => { + return new Array(length).fill().map((_, i) => ( + + + + )) +} + function LinkList() { const classes = useStyles() const dispatch = useDispatch() const { categories } = useCategories() + const categoryList = useSelector(categorySelector.listData) const selectedCategory = useSelector(categorySelector.selectedCategory) const selectedLinkList = useSelector(linkSelector.selectSelectedLink) const searchFilter = useSelector(linkSelector.searchFilter) + const createLinksCategoryId = useSelector(linkSelector.createLinksCategoryId) + const dragData = useSelector(uiSelector.drag) + const [skeletonLength, setSkeletonLength] = useState(0) + const linkCreatePending = useSelector((state) => state[PENDING][linkCreate.TYPE]) + const linksReadPending = useSelector((state) => state[PENDING][linksRead.TYPE]) + const { links } = useLinks({ detact: true, categoryId: selectedCategory?.id, @@ -58,18 +76,31 @@ function LinkList() { dispatch(linkSearchFilterInit()) }, [dispatch, selectedCategory]) + useEffect(() => { + const { link } = dragData + if (link.listData.length && linkCreatePending) { + setSkeletonLength(link.listData.length) + } else if (!linkCreatePending && !linksReadPending) { + setSkeletonLength(0) + } else { + setSkeletonLength(0) + } + }, [dragData, linkCreatePending, linksReadPending]) + return ( - -
- + {!!categoryList.length && ( + +
+ + )} - {categories.length === CATEGORY_EMPTY && ( - - 카테고리 비어 있음 - - )} + {!skeletonLength + ? null + : dragData.type === 'link' && createLinksCategoryId === selectedCategory?.id + ? SkeletonList(skeletonLength) + : dragData.category.data.id === selectedCategory?.id && SkeletonList(skeletonLength)} {links?.map((data) => ( @@ -77,8 +108,13 @@ function LinkList() { ))} - {links.length === LINK_EMPTY && - (searchFilter.keyword && SEARCH_LINK_EMPTY ? ( + {categories.length === CATEGORY_EMPTY ? ( + + 카테고리 비어 있음 + + ) : ( + links.length === LINK_EMPTY && + (skeletonLength ? null : searchFilter.keyword && SEARCH_LINK_EMPTY ? ( 검색 조회 없음 @@ -86,7 +122,8 @@ function LinkList() { 링크 비어 있음 - ))} + )) + )} diff --git a/src/main/pages/Home/LinkList/style.js b/src/main/pages/Home/LinkList/style.js index c3f1c9e4..924b5f51 100644 --- a/src/main/pages/Home/LinkList/style.js +++ b/src/main/pages/Home/LinkList/style.js @@ -2,19 +2,10 @@ import { makeStyles } from '@material-ui/core/styles' export const useStyles = makeStyles((theme) => ({ root: { - paddingTop: 5, - paddingLeft: 20, - paddingRight: 15, height: '100vh', + padding: '5px 67px 0 20px', backgroundColor: theme.palette.type !== 'dark' ? theme.palette.colorGroup.lightGrey : theme.palette.background.default, - [theme.breakpoints.down('sm')]: { - paddingLeft: 10, - paddingRight: 10, - }, - [theme.breakpoints.down('xs')]: { - paddingLeft: 15, - }, }, content: { maxHeight: 'calc(100vh - 61px);', diff --git a/src/main/pages/Home/index.jsx b/src/main/pages/Home/index.jsx index 3bf498c9..273d7325 100644 --- a/src/main/pages/Home/index.jsx +++ b/src/main/pages/Home/index.jsx @@ -1,5 +1,6 @@ import React from 'react' +import { useAlarmNoticeConnection } from '@/modules/alarmNotice' import CategoryAppBar from '@main/pages/Home/AppBar' import CategoryList from '@main/pages/Home/CategoryList' import LinkDropZone from '@main/pages/Home/LinkDropZone' @@ -8,6 +9,7 @@ import LinkList from '@main/pages/Home/LinkList' import useStyles from './style' export default function Home() { + useAlarmNoticeConnection() const classes = useStyles() return ( diff --git a/src/main/pages/Home/style.js b/src/main/pages/Home/style.js index 87cc4e3a..8f0b95b8 100644 --- a/src/main/pages/Home/style.js +++ b/src/main/pages/Home/style.js @@ -14,10 +14,8 @@ export const useStyles = makeStyles((theme) => ({ width: '100%', }, appBar: { - [theme.breakpoints.down('xs')]: { - position: 'fixed', - right: 0, - }, + position: 'fixed', + right: 0, width: 52, }, })) diff --git a/src/main/pages/Start/index.jsx b/src/main/pages/Start/index.jsx index f69d9ab1..15bc3773 100644 --- a/src/main/pages/Start/index.jsx +++ b/src/main/pages/Start/index.jsx @@ -1,6 +1,6 @@ import React, { useCallback, useRef } from 'react' -import 'swiper/css/swiper.css' +import 'swiper/swiper-bundle.css' import { Link } from 'react-chrome-extension-router' import Swiper from 'react-id-swiper' diff --git a/src/modules/alarmNotice/hooks/useAlaramNoticeConnection.js b/src/modules/alarmNotice/hooks/useAlaramNoticeConnection.js deleted file mode 100644 index 6051bafe..00000000 --- a/src/modules/alarmNotice/hooks/useAlaramNoticeConnection.js +++ /dev/null @@ -1,36 +0,0 @@ -import { useEffect } from 'react' - -import { useDispatch, useSelector } from 'react-redux' - -import { alaramNoticeConnection } from '@modules/alarmNotice' -import { ERROR } from '@modules/error' -import { PENDING } from '@modules/pending' -import { alarmSocket } from '@utils/http/ws' - -const OPEN = 1 - -const useAlaramNoticeConnection = () => { - const dispatch = useDispatch() - const pending = useSelector((state) => state[PENDING][alaramNoticeConnection.TYPE]) - const error = useSelector((state) => state[ERROR][alaramNoticeConnection.TYPE]) - - useEffect(() => { - if (!alarmSocket.ws || alarmSocket.ws?.readyState !== OPEN) { - alarmSocket - .onConnection() - .setOnmessage((event) => { - dispatch(alaramNoticeConnection.request({ event })) - }) - .setOnerror((event) => { - dispatch(alaramNoticeConnection.failure({ event })) - }) - } - return () => { - alarmSocket.onClose() - } - }, [dispatch]) - - return { pending, error } -} - -export default useAlaramNoticeConnection diff --git a/src/modules/alarmNotice/hooks/useAlarmNoticeConnection.js b/src/modules/alarmNotice/hooks/useAlarmNoticeConnection.js new file mode 100644 index 00000000..a58bf3a8 --- /dev/null +++ b/src/modules/alarmNotice/hooks/useAlarmNoticeConnection.js @@ -0,0 +1,34 @@ +import { useEffect } from 'react' + +import { useDispatch, useSelector } from 'react-redux' + +import { alarmNoticeConnection } from '@modules/alarmNotice' +import { ERROR } from '@modules/error' +import { PENDING } from '@modules/pending' +import { alarmSocket, SOCKET_READY_STATE } from '@utils/http/ws' + +const useAlarmNoticeConnection = () => { + const dispatch = useDispatch() + const pending = useSelector((state) => state[PENDING][alarmNoticeConnection.TYPE]) + const error = useSelector((state) => state[ERROR][alarmNoticeConnection.TYPE]) + + useEffect(() => { + if (!alarmSocket.ws || alarmSocket.ws?.readyState !== SOCKET_READY_STATE.OPEN) { + alarmSocket + .onConnection() + .setOnmessage((event) => { + dispatch(alarmNoticeConnection.request({ event })) + }) + .setOnerror((event) => { + dispatch(alarmNoticeConnection.failure({ event })) + }) + } + return () => { + alarmSocket.onClose() + } + }, [dispatch]) + + return { pending, error } +} + +export default useAlarmNoticeConnection diff --git a/src/modules/alarmNotice/index.js b/src/modules/alarmNotice/index.js index 9b75a466..8244fba1 100644 --- a/src/modules/alarmNotice/index.js +++ b/src/modules/alarmNotice/index.js @@ -1,5 +1,5 @@ export * from './ws' -export { default as useAlaramNoticeConnection } from './hooks/useAlaramNoticeConnection' +export { default as useAlarmNoticeConnection } from './hooks/useAlarmNoticeConnection' export { default as queryInfoData } from './queryInfoData' export * from './reducer' export * from './saga' diff --git a/src/modules/alarmNotice/reducer.js b/src/modules/alarmNotice/reducer.js index 75d5f942..510758d7 100644 --- a/src/modules/alarmNotice/reducer.js +++ b/src/modules/alarmNotice/reducer.js @@ -4,32 +4,32 @@ import { createRequestAction, createRequestThunk } from '../helpers' export const ALARM_NOTICE = 'ALARM_NOTICE' -export const alaramNoticeConnection = createRequestAction(`${ALARM_NOTICE}/CONNECTION`) -export const alaramNoticeListLoad = createRequestAction(`${ALARM_NOTICE}/LIST_LOAD`) -export const alaramNoticeAdd = createRequestAction(`${ALARM_NOTICE}/ADD`) -export const alaramNoticeModify = createRequestAction(`${ALARM_NOTICE}/MODIFY`) -export const alaramNoticeReadNotice = createRequestAction(`${ALARM_NOTICE}/READ_NOTICE`) -export const alaramNoticeReadNoticeThunk = createRequestThunk(alaramNoticeReadNotice) -export const alaramNoticeNoReturnNotice = createRequestAction(`${ALARM_NOTICE}/NO_RETURN_NOTICE`) -export const alaramNoticeNoReturnNoticeThunk = createRequestThunk(alaramNoticeNoReturnNotice) +export const alarmNoticeConnection = createRequestAction(`${ALARM_NOTICE}/CONNECTION`) +export const alarmNoticeListLoad = createRequestAction(`${ALARM_NOTICE}/LIST_LOAD`) +export const alarmNoticeAdd = createRequestAction(`${ALARM_NOTICE}/ADD`) +export const alarmNoticeModify = createRequestAction(`${ALARM_NOTICE}/MODIFY`) +export const alarmNoticeReadNotice = createRequestAction(`${ALARM_NOTICE}/READ_NOTICE`) +export const alarmNoticeReadNoticeThunk = createRequestThunk(alarmNoticeReadNotice) +export const alarmNoticeNoReturnNotice = createRequestAction(`${ALARM_NOTICE}/NO_RETURN_NOTICE`) +export const alarmNoticeNoReturnNoticeThunk = createRequestThunk(alarmNoticeNoReturnNotice) // Reducer const initialState = { listData: [], } -export const alaramNoticeReducer = createReducer(initialState, { - [alaramNoticeListLoad.SUCCESS]: (state, { payload: listData }) => { +export const alarmNoticeReducer = createReducer(initialState, { + [alarmNoticeListLoad.SUCCESS]: (state, { payload: listData }) => { state.listData = listData }, - [alaramNoticeAdd.SUCCESS]: (state, { payload: data }) => { + [alarmNoticeAdd.SUCCESS]: (state, { payload: data }) => { state.listData.push(data) }, - [alaramNoticeModify.SUCCESS]: (state, { payload: listData }) => { + [alarmNoticeModify.SUCCESS]: (state, { payload: listData }) => { state.listData = listData }, }) // Select -export const alaramNoticeSelector = { +export const alarmNoticeSelector = { listData: (state) => state[ALARM_NOTICE].listData, } diff --git a/src/modules/alarmNotice/saga.js b/src/modules/alarmNotice/saga.js index 3181dcd5..64357fcc 100644 --- a/src/modules/alarmNotice/saga.js +++ b/src/modules/alarmNotice/saga.js @@ -3,42 +3,42 @@ import { call, put, takeLatest, takeEvery } from 'redux-saga/effects' import { createRequestSaga } from '@modules/helpers' import { - alaramNoticeConnection, - alaramNoticeListLoad, - alaramNoticeAdd, - alaramNoticeModify, - alaramNoticeReadNotice, - alaramNoticeNoReturnNotice, + alarmNoticeConnection, + alarmNoticeListLoad, + alarmNoticeAdd, + alarmNoticeModify, + alarmNoticeReadNotice, + alarmNoticeNoReturnNotice, } from './reducer' import * as ws from './ws' -const watchAlarmNoticeConnection = createRequestSaga(alaramNoticeConnection, function* ({ payload: { event } }) { +const watchAlarmNoticeConnection = createRequestSaga(alarmNoticeConnection, function* ({ payload: { event } }) { const { message, status } = JSON.parse(event.data) switch (status) { case 'initial': - yield put(alaramNoticeListLoad.success(message)) + yield put(alarmNoticeListLoad.success(message)) break case 'alarm': - yield put(alaramNoticeAdd.success(message)) + yield put(alarmNoticeAdd.success(message)) break case 'update': - yield put(alaramNoticeModify.success(message)) + yield put(alarmNoticeModify.success(message)) break default: break } }) -const watchAlarmNoticeReadNotice = createRequestSaga(alaramNoticeReadNotice, function* (action) { +const watchAlarmNoticeReadNotice = createRequestSaga(alarmNoticeReadNotice, function* (action) { yield call(ws.requestAlarmReadNotice, action.payload) }) -const watchAlarmNoticNoReturnNotice = createRequestSaga(alaramNoticeNoReturnNotice, function* (action) { +const watchAlarmNoticeNoReturnNotice = createRequestSaga(alarmNoticeNoReturnNotice, function* (action) { yield call(ws.requestAlarmNoReturn, action.payload) }) export function* alarmNoticeSaga() { - yield takeLatest(alaramNoticeConnection.REQUEST, watchAlarmNoticeConnection) - yield takeEvery(alaramNoticeReadNotice.REQUEST, watchAlarmNoticeReadNotice) - yield takeEvery(alaramNoticeNoReturnNotice.REQUEST, watchAlarmNoticNoReturnNotice) + yield takeLatest(alarmNoticeConnection.REQUEST, watchAlarmNoticeConnection) + yield takeEvery(alarmNoticeReadNotice.REQUEST, watchAlarmNoticeReadNotice) + yield takeEvery(alarmNoticeNoReturnNotice.REQUEST, watchAlarmNoticeNoReturnNotice) } diff --git a/src/modules/category/hooks/useCategories.js b/src/modules/category/hooks/useCategories.js index b2e29811..05f012bc 100644 --- a/src/modules/category/hooks/useCategories.js +++ b/src/modules/category/hooks/useCategories.js @@ -8,8 +8,8 @@ import { PENDING } from '@modules/pending' const useCategories = () => { const dispatch = useDispatch() - const pending = useSelector((state) => state[PENDING][categoriesRead.TYPE]?.['isFirstCategory']) - const error = useSelector((state) => state[ERROR][categoriesRead.TYPE]?.['isFirstCategory']) + const pending = useSelector((state) => state[PENDING][categoriesRead.TYPE]) + const error = useSelector((state) => state[ERROR][categoriesRead.TYPE]) const categories = useSelector(categorySelector.listData) const favoritedArr = useSelector(categorySelector.favoriteCategories) const notFavoritedArr = useSelector(categorySelector.normalCategories) @@ -19,7 +19,7 @@ const useCategories = () => { } React.useEffect(() => { - dispatch(categoriesRead.request(undefined, { key: 'isFirstCategory' })) + dispatch(categoriesRead.request(undefined, { selectFirstCategory: true })) }, [dispatch]) return { pending, error, categories, favoritedArr, notFavoritedArr, reload } diff --git a/src/modules/category/reducer.js b/src/modules/category/reducer.js index 1b2768d8..93558e91 100644 --- a/src/modules/category/reducer.js +++ b/src/modules/category/reducer.js @@ -30,14 +30,10 @@ export const categoryReducer = createReducer(initialState, { [categoriesRead.SUCCESS]: (state, { payload, meta }) => { state.listData = payload - if (meta?.key === 'isFirstCategory') { - state.selectedCategory = { - ...state.selectedCategory, - ...payload.filter((item) => !Boolean(item.is_favorited))[0], - } + if (meta?.selectFirstCategory) { + state.selectedCategory = payload.find((item) => !item.is_favorited) || initialState.selectedCategory } }, - [categorySelect]: (state, { payload }) => { state.selectedCategory = { ...state.selectedCategory, ...payload } }, @@ -45,7 +41,7 @@ export const categoryReducer = createReducer(initialState, { state.editedCategory = { ...state.editedCategory, ...payload } }, [categoryClearEdit]: (state) => { - state.editedCategory = initialState.state + state.editedCategory = initialState.editedCategory }, }) diff --git a/src/modules/historyLink/hooks/useHistoryLinks.js b/src/modules/historyLink/hooks/useHistoryLinks.js index ff9cc6a6..2aa96ab0 100644 --- a/src/modules/historyLink/hooks/useHistoryLinks.js +++ b/src/modules/historyLink/hooks/useHistoryLinks.js @@ -4,7 +4,7 @@ import moment from 'moment' import { useDispatch, useSelector } from 'react-redux' import { ERROR } from '@modules/error' -import { historyLinkListRead, historyLinkSelector, setHistoryLinkChnageFilter } from '@modules/historyLink' +import { historyLinkListRead, historyLinkSelector, setHistoryLinkChangeFilter } from '@modules/historyLink' import { INIT, PENDING } from '@modules/pending' const MIN_TIME = new Date(moment().add(-1, 'year')).getTime() @@ -18,7 +18,7 @@ const useHistoryLinks = () => { const reload = useCallback(() => { dispatch( - setHistoryLinkChnageFilter({ + setHistoryLinkChangeFilter({ text: '', startTime: new Date(moment().add(-1, 'day')).getTime(), endTime: new Date().getTime(), @@ -27,10 +27,10 @@ const useHistoryLinks = () => { ) }, [dispatch]) - const search = useCallback( + const keywordSearch = useCallback( (value) => { dispatch( - setHistoryLinkChnageFilter({ + setHistoryLinkChangeFilter({ text: value, startTime: value ? 0 : new Date(moment().add(-1, 'day')).getTime(), endTime: new Date().getTime(), @@ -41,9 +41,24 @@ const useHistoryLinks = () => { [dispatch] ) + const dateSearch = useCallback( + (value) => { + if (!value) value = new Date() + dispatch( + setHistoryLinkChangeFilter({ + text: '', + startTime: new Date(moment(value).startOf('day').add(-1, 'day')).getTime(), + endTime: new Date(moment(value).startOf('day').add(1, 'day')).getTime(), + isNext: false, + }) + ) + }, + [dispatch] + ) + const next = useCallback(() => { dispatch( - setHistoryLinkChnageFilter({ + setHistoryLinkChangeFilter({ startTime: new Date(moment(filter.startTime).add(-1, 'day')).getTime(), endTime: filter.startTime, isNext: true, @@ -61,7 +76,7 @@ const useHistoryLinks = () => { } }, [filter, dispatch]) - return { pending, error, filter, listData, reload, search, next } + return { pending, error, filter, listData, reload, keywordSearch, dateSearch, next } } export default useHistoryLinks diff --git a/src/modules/historyLink/reducer.js b/src/modules/historyLink/reducer.js index 04424ae9..b0b8ad6a 100644 --- a/src/modules/historyLink/reducer.js +++ b/src/modules/historyLink/reducer.js @@ -5,7 +5,7 @@ import { createRequestAction } from '../helpers' export const HISTORY_LINK = 'HISTORY_LINK' export const setInitHistoryLinkFilter = createAction(`${HISTORY_LINK}/INIT_FILTER`) -export const setHistoryLinkChnageFilter = createAction(`${HISTORY_LINK}/CHANGE_FILTER`) +export const setHistoryLinkChangeFilter = createAction(`${HISTORY_LINK}/CHANGE_FILTER`) export const historyLinkListRead = createRequestAction(`${HISTORY_LINK}/LIST_READ`) // Reducer @@ -23,7 +23,7 @@ export const historyLinkReducer = createReducer(initialState, { [setInitHistoryLinkFilter]: (state) => { state.filter = initialState.filter }, - [setHistoryLinkChnageFilter]: (state, { payload: data }) => { + [setHistoryLinkChangeFilter]: (state, { payload: data }) => { state.filter = { ...state.filter, ...data } }, [historyLinkListRead.SUCCESS]: (state, { payload: listData }) => { diff --git a/src/modules/index.js b/src/modules/index.js index 60011d11..3cfd6ffe 100644 --- a/src/modules/index.js +++ b/src/modules/index.js @@ -2,7 +2,7 @@ import { combineReducers } from 'redux' import { fork, all } from 'redux-saga/effects' import { ALARM, alarmReducer, alarmSaga } from './alarm' -import { ALARM_NOTICE, alaramNoticeReducer, alarmNoticeSaga } from './alarmNotice' +import { ALARM_NOTICE, alarmNoticeReducer, alarmNoticeSaga } from './alarmNotice' import { CATEGORY, categoryReducer, categorySaga } from './category' import { ERROR, errorReducer } from './error' import { HISTORY_LINK, historyLinkReducer, historyLinkSaga } from './historyLink' @@ -20,7 +20,7 @@ export const rootReducer = combineReducers({ [ALARM]: alarmReducer, [USER]: userReducer, [HISTORY_LINK]: historyLinkReducer, - [ALARM_NOTICE]: alaramNoticeReducer, + [ALARM_NOTICE]: alarmNoticeReducer, [UI]: uiReducer, }) diff --git a/src/modules/link/hooks/useLinks.js b/src/modules/link/hooks/useLinks.js index 2c045932..9c3d1ab0 100644 --- a/src/modules/link/hooks/useLinks.js +++ b/src/modules/link/hooks/useLinks.js @@ -10,19 +10,22 @@ const useLinks = ({ detact = false, categoryId, selectedName, keyword }) => { const dispatch = useDispatch() const pending = useSelector((state) => state[PENDING][linksRead.TYPE]) const error = useSelector((state) => state[ERROR][linksRead.TYPE]) - const links = useSelector(linkSelector.listData) + const links = useSelector((state) => linkSelector.linksData(state)[categoryId]) || [] const reload = useCallback(() => { - if (categoryId) dispatch(linksRead.request({ categoryId })) + if (categoryId) dispatch(linksRead.request({ categoryId }, { key: categoryId })) }, [dispatch, categoryId]) const filterChangeLoad = useCallback(() => { if (categoryId) { dispatch( - linksRead.request({ - categoryId, - [selectedName]: keyword, - }) + linksRead.request( + { + categoryId, + [selectedName]: keyword, + }, + { key: categoryId } + ) ) } }, [dispatch, selectedName, keyword, categoryId]) diff --git a/src/modules/link/reducer.js b/src/modules/link/reducer.js index 393cc213..f39162ec 100644 --- a/src/modules/link/reducer.js +++ b/src/modules/link/reducer.js @@ -31,8 +31,9 @@ const initialState = { selectedName: '', keyword: '', }, - listData: [], + linksData: {}, selectedLink: [], + createLinksCategoryId: undefined, } export const linkReducer = createReducer(initialState, { [linkSearchFilterInit]: (state) => { @@ -41,8 +42,11 @@ export const linkReducer = createReducer(initialState, { [linkSearchFilterChangeState]: (state, { payload: data }) => { state.searchFilter = { ...state.searchFilter, ...data } }, - [linksRead.SUCCESS]: (state, { payload }) => { - state.listData = payload + [linksRead.SUCCESS]: (state, { payload, meta }) => { + state.linksData[meta.key] = payload + }, + [linkCreate.REQUEST]: (state, { payload }) => { + state.createLinksCategoryId = payload.categoryId }, [linkSelect]: (state, { payload: linkData }) => { if (!state.selectedLink.find((data) => data.id === linkData.id)) { @@ -59,7 +63,8 @@ export const linkReducer = createReducer(initialState, { // Select export const linkSelector = { - listData: (state) => state[LINK].listData, + linksData: (state) => state[LINK].linksData, selectSelectedLink: (state) => state[LINK].selectedLink, searchFilter: (state) => state[LINK].searchFilter, + createLinksCategoryId: (state) => state[LINK].createLinksCategoryId, } diff --git a/src/popup/index.js b/src/popup/index.js index dd0c4900..d227a048 100644 --- a/src/popup/index.js +++ b/src/popup/index.js @@ -3,15 +3,29 @@ import '@assets/css/popup.css' import loginImg from '@assets/images/group-25.svg' import emptyImg from '@assets/images/group-26.svg' import starImg from '@assets/images/group-27.svg' +import plusImg from '@assets/images/plus.png' import checkImg from '@assets/images/white.svg' -import { requestCategoriesRead } from '@modules/category/api' +import { requestCategoryCreate, requestCategoriesRead } from '@modules/category/api' import { requestLinkCreate } from '@modules/link/api' import { getTabsQuery } from '@utils/chromeApis/tab' import { getAccessToken } from '@utils/http/auth' window.addEventListener('DOMContentLoaded', () => { if (getAccessToken()) { + const categoryListElement = document.getElementById('categoryList') + const categoryCreateButtonElement = Template.categoryCreateButton() + const categoryCreateInputWrapperElement = Template.categoryCreateInputWrapper() + const categoryItemListWrapperElement = Template.categoryListWrapper() + categoryListElement.innerHTML = + categoryCreateButtonElement + categoryCreateInputWrapperElement + categoryItemListWrapperElement + APILoad.categoryListAppend() + + EventSetting.categoryCreateButtonEventSetting() + EventSetting.categoryCreateEnterEventSetting() + EventSetting.categoryCreateOkEventSetting() + EventSetting.categoryCreateCancelEventSetting() + EventSetting.linkSaveEventSetting() } else { document.getElementById('categoryList').innerHTML = Template.loginRequired() @@ -20,36 +34,19 @@ window.addEventListener('DOMContentLoaded', () => { const APILoad = { async categoryListAppend() { - const categoryListElement = document.getElementById('categoryList') + const categoryItemListWrapperElement = document.getElementById('categoryItemListWrapper') try { const { data } = await requestCategoriesRead() if (data?.length) { - categoryListElement.innerHTML = data.map((item) => Template.categoryItem(item)).join('') + categoryItemListWrapperElement.innerHTML = data.map((item) => Template.categoryItem(item)).join('') data.map((item) => EventSetting.categoryEventSetting(item)) } else { - categoryListElement.innerHTML = Template.categoryEmpty() + categoryItemListWrapperElement.innerHTML = Template.categoryEmpty() } } catch (error) { console.error(error) } }, - - async linkWrite(categoryId, path) { - const categoryCardElement = document.getElementById(`category${categoryId}`) - try { - const { data } = await requestLinkCreate({ categoryId, path }) - if (data?.length) { - categoryCardElement.classList.add('upload-finish') - popupMessage({ message: '링크가 이동 되었습니다.' }) - } - } catch (error) { - categoryCardElement.classList.remove('check') - if (error.response?.status === 500) popupMessage({ message: '유효하지 않은 링크 입니다.' }) - else if (error?.response?.data?.message) { - popupMessage({ message: error.response.data.message }) - } - } - }, } const EventListener = { @@ -63,21 +60,98 @@ const EventListener = { linkSaveElement.dataset.categoryId = data.id }, - async linkSaveEventListener(e) { + categoryCreateButtonEventListener(e) { + e.preventDefault() + const currentCategoryCreateButtonElement = e.currentTarget + const categoryCreateInputWrapperElement = document.getElementById('categoryCreateInputWrapper') + currentCategoryCreateButtonElement.classList.add('hide') + categoryCreateInputWrapperElement.classList.remove('hide') + const enterCategoryNameInputElement = document.getElementById('enterCategoryNameInput') + enterCategoryNameInputElement.focus() + }, + + categoryCreateCancelEventListener(e) { + e.preventDefault() + const categoryCreateButtonElement = document.getElementById('categoryCreateButton') + const categoryCreateInputWrapperElement = document.getElementById('categoryCreateInputWrapper') + categoryCreateButtonElement.classList.remove('hide') + categoryCreateInputWrapperElement.classList.add('hide') + const enterCategoryNameInputElement = document.getElementById('enterCategoryNameInput') + enterCategoryNameInputElement.value = '' + }, + + async categoryCreateOkEventListener(e) { try { e.preventDefault() - const linkSaveElement = document.getElementById('linkSave') - if (linkSaveElement.classList.contains('active')) { - const categoryId = linkSaveElement.dataset.categoryId - const tabs = await getTabsQuery() - await APILoad.linkWrite(categoryId, [tabs[0].url]) - linkSaveElement.classList.toggle('active') + const categoryCreateButtonElement = document.getElementById('categoryCreateButton') + const categoryCreateInputWrapperElement = document.getElementById('categoryCreateInputWrapper') + const enterCategoryNameInputElement = document.getElementById('enterCategoryNameInput') + const categoryName = enterCategoryNameInputElement.value + const { + data: { name }, + } = await requestCategoryCreate({ name: categoryName, is_favorited: false }) + if (name) { + categoryCreateButtonElement.classList.remove('hide') + categoryCreateInputWrapperElement.classList.add('hide') await APILoad.categoryListAppend() + popupMessage({ message: '카테고리가 생성 되었습니다.' }) + enterCategoryNameInputElement.value = '' } } catch (error) { popupMessage({ message: error.message }) } }, + + async categoryCreateEnterEventListener(e) { + try { + e.preventDefault() + e.stopPropagation() + if (e.key === 'Enter') { + const categoryCreateButtonElement = document.getElementById('categoryCreateButton') + const categoryCreateInputWrapperElement = document.getElementById('categoryCreateInputWrapper') + const enterCategoryNameInputElement = document.getElementById('enterCategoryNameInput') + const categoryName = enterCategoryNameInputElement.value + categoryCreateButtonElement.classList.remove('hide') + categoryCreateInputWrapperElement.classList.add('hide') + const { + data: { name }, + } = await requestCategoryCreate({ name: categoryName, is_favorited: false }) + if (name) { + await APILoad.categoryListAppend() + popupMessage({ message: '카테고리가 생성 되었습니다.' }) + enterCategoryNameInputElement.value = '' + } + } + } catch (error) { + popupMessage({ message: error.message }) + } + }, + + async linkSaveEventListener(e) { + const linkSaveElement = document.getElementById('linkSave') + const categoryId = linkSaveElement.dataset.categoryId + const categoryCardElement = document.getElementById(`category${categoryId}`) + + if (!linkSaveElement.classList.contains('active')) return + try { + e.preventDefault() + linkSaveElement.classList.toggle('active') + const tabs = await getTabsQuery() + const { data } = await requestLinkCreate({ categoryId, path: [tabs[0].url] }) + if (data?.length) { + categoryCardElement.classList.add('upload-finish') + popupMessage({ message: '링크가 이동 되었습니다.' }) + } + await APILoad.categoryListAppend() + } catch (error) { + categoryCardElement.classList.remove('check') + if (error.response?.status === 500) { + popupMessage({ message: '유효하지 않은 링크 입니다.' }) + } else { + popupMessage({ message: error.message }) + } + } + }, } const EventSetting = { @@ -87,6 +161,30 @@ const EventSetting = { categoryCardElement.addEventListener('click', EventListener.categoryEventListener.bind(null, data), false) }, + categoryCreateButtonEventSetting() { + const categoryCreateButtonElement = document.getElementById('categoryCreateButton') + categoryCreateButtonElement.removeEventListener('click', EventListener.categoryCreateButtonEventListener) + categoryCreateButtonElement.addEventListener('click', EventListener.categoryCreateButtonEventListener, false) + }, + + categoryCreateCancelEventSetting() { + const categoryCreateCancelButtonElement = document.getElementById('categoryCreateCancelBtn') + categoryCreateCancelButtonElement.removeEventListener('click', EventListener.categoryCreateCancelEventListener) + categoryCreateCancelButtonElement.addEventListener('click', EventListener.categoryCreateCancelEventListener, false) + }, + + categoryCreateOkEventSetting() { + const categoryCreateOkButtonElement = document.getElementById('categoryCreateOkBtn') + categoryCreateOkButtonElement.removeEventListener('click', EventListener.categoryCreateOkEventListener) + categoryCreateOkButtonElement.addEventListener('click', EventListener.categoryCreateOkEventListener, false) + }, + + categoryCreateEnterEventSetting() { + const categoryCreateInputElement = document.getElementById('enterCategoryNameInput') + categoryCreateInputElement.removeEventListener('keyup', EventListener.categoryCreateEnterEventListener) + categoryCreateInputElement.addEventListener('keyup', EventListener.categoryCreateEnterEventListener, false) + }, + linkSaveEventSetting() { const linkSaveElement = document.getElementById('linkSave') linkSaveElement.removeEventListener('click', EventListener.linkSaveEventListener) @@ -95,6 +193,30 @@ const EventSetting = { } const Template = { + categoryCreateButton() { + return ` + + ` + }, + + categoryCreateInputWrapper() { + return ` +
+ +
+ + +
+
+ ` + }, + + categoryListWrapper() { + return `
` + }, + categoryItem(data) { return `
+
` diff --git a/src/utils/http/ws.js b/src/utils/http/ws.js index 02e19a5c..e4495f2f 100644 --- a/src/utils/http/ws.js +++ b/src/utils/http/ws.js @@ -1,6 +1,11 @@ import { getAccessToken } from './auth' import { axiosSetting } from './client' +export const SOCKET_READY_STATE = { + OPEN: 1, + CLOSED: 3, +} + export const socketInfoData = { host: `wss://${axiosSetting.host}/ws/connection/?token={token}`, replaceWS(token) { @@ -8,10 +13,9 @@ export const socketInfoData = { }, } -class AlaramWS { - connectionRetry = 1 - +class AlarmWS { constructor() { + this.connectionRetry = 1 this.ws = null } @@ -25,6 +29,7 @@ class AlaramWS { } onClose() { + if (!this.ws) return this.ws.close() return this } @@ -45,13 +50,14 @@ class AlaramWS { } } - setOnerror(callback) { + setOnerror(callback, noRequestConnection = false) { try { if (!this.ws) return - if (callback && typeof callback === 'function') this.ws.onerror = callback + if (noRequestConnection && callback && typeof callback === 'function') this.ws.onerror = callback else { - this.ws.onerror = (_e) => { - if (this.ws.readyState === 3 && this.connectionRetry <= 10) { + this.ws.onerror = async (event) => { + if (callback && typeof callback === 'function') callback(event) + if (this.ws.readyState === SOCKET_READY_STATE.CLOSED && this.connectionRetry <= 10) { setTimeout(() => { this.onConnection(this.ws) this.connectionRetry++ @@ -66,4 +72,4 @@ class AlaramWS { } } -export const alarmSocket = new AlaramWS() +export const alarmSocket = new AlarmWS()