From ccceb785b70eece5a8a9c7a34b44ce59eb159f21 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Mon, 12 Oct 2020 01:23:41 +0300 Subject: react-cookies -> react-cookie + universal-cookie --- vnext/package-lock.json | 71 ++++++++++++++++++++++++++++++++++++++++++------- vnext/package.json | 4 +-- vnext/src/App.js | 7 ++--- vnext/src/api/index.js | 8 +++--- vnext/src/index.js | 9 ++++--- 5 files changed, 79 insertions(+), 20 deletions(-) diff --git a/vnext/package-lock.json b/vnext/package-lock.json index ea979032..69ebc5a2 100644 --- a/vnext/package-lock.json +++ b/vnext/package-lock.json @@ -1959,6 +1959,12 @@ "@types/responselike": "*" } }, + "@types/cookie": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz", + "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==", + "dev": true + }, "@types/eslint": { "version": "7.2.4", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.4.tgz", @@ -2004,6 +2010,16 @@ "@types/node": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dev": true, + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/html-minifier-terser": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz", @@ -2096,12 +2112,36 @@ "integrity": "sha512-IiPhNnenzkqdSdQH3ifk9LoX7oQe61ZlDdDO4+MUv6FyWdPGDPr26gCPVs3oguZEMq//nFZZpwUZcVuNJsG+DQ==", "dev": true }, + "@types/prop-types": { + "version": "15.7.3", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", + "dev": true + }, "@types/q": { "version": "1.5.4", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz", "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==", "dev": true }, + "@types/react": { + "version": "16.9.52", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.52.tgz", + "integrity": "sha512-EHRjmnxiNivwhGdMh9sz1Yw9AUxTSZFxKqdBWAAzyZx3sufWwx6ogqHYh/WB1m/I4ZpjkoZLExF5QTy2ekVi/Q==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + }, + "dependencies": { + "csstype": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz", + "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==", + "dev": true + } + } + }, "@types/responselike": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz", @@ -4393,9 +4433,10 @@ } }, "cookie": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz", - "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=" + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz", + "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==", + "dev": true }, "cookie-signature": { "version": "1.0.6", @@ -13162,13 +13203,15 @@ "resolved": "https://registry.npmjs.org/react-content-loader/-/react-content-loader-5.1.2.tgz", "integrity": "sha512-Kr4wWisiL0qcdbzVWZx/puyCfTP1PiTTtR7N4B7mikTeY2wf5TMgMykUQyaEUW422IDUU9VJWfewSm9hIRwTiw==" }, - "react-cookies": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/react-cookies/-/react-cookies-0.1.1.tgz", - "integrity": "sha512-PP75kJ4vtoHuuTdq0TAD3RmlAv7vuDQh9fkC4oDlhntgs9vX1DmREomO0Y1mcQKR9nMZ6/zxoflaMJ3MAmF5KQ==", + "react-cookie": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.0.3.tgz", + "integrity": "sha512-cmi6IpdVgTSvjqssqIEvo779Gfqc4uPGHRrKMEdHcqkmGtPmxolGfsyKj95bhdLEKqMdbX8MLBCwezlnhkHK0g==", + "dev": true, "requires": { - "cookie": "^0.3.1", - "object-assign": "^4.1.1" + "@types/hoist-non-react-statics": "^3.0.1", + "hoist-non-react-statics": "^3.0.0", + "universal-cookie": "^4.0.0" } }, "react-dev-utils": { @@ -16635,6 +16678,16 @@ "unist-util-is": "^4.0.0" } }, + "universal-cookie": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz", + "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==", + "dev": true, + "requires": { + "@types/cookie": "^0.3.3", + "cookie": "^0.4.0" + } + }, "universalify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz", diff --git a/vnext/package.json b/vnext/package.json index 944de45d..67f0751e 100644 --- a/vnext/package.json +++ b/vnext/package.json @@ -5,7 +5,7 @@ "scripts": { "test": "jest", "dist": "webpack --mode=production --progress", - "start": "webpack-dev-server" + "start": "webpack serve" }, "keywords": [], "author": "", @@ -36,6 +36,7 @@ "optimize-css-assets-webpack-plugin": "^5.0.4", "postcss-loader": "^4.0.4", "postcss-preset-env": "^6.7.0", + "react-cookie": "^4.0.3", "react-test-renderer": "^16.13.1", "style-loader": "^2.0.0", "stylelint": "^13.7.2", @@ -83,7 +84,6 @@ "qs": "^6.9.4", "react": "16.13.1", "react-content-loader": "^5.1.2", - "react-cookies": "^0.1.1", "react-dom": "16.13.1", "react-router-dom": "^5.2.0", "react-use": "^15.3.4", diff --git a/vnext/src/App.js b/vnext/src/App.js index 765697ab..ccdae78e 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -16,7 +16,7 @@ import Post from './ui/Post'; import Thread from './ui/Thread'; import Login from './ui/Login'; -import cookie from 'react-cookies'; +import { useCookies } from 'react-cookie'; import { me } from './api'; @@ -27,12 +27,13 @@ const elClassTop = 'content--top'; export default function App() { let contentRef = useRef(null); + const [cookie, setCookie] = useCookies(['hash']); useEffect(() => { svg4everybody(); let params = qs.parse(window.location.search.substring(1)); if (params.hash) { - cookie.save('hash', params.hash, { path: '/' }); + setCookie('hash', params.hash, { path: '/' }); let retpath = params.retpath || `${window.location.protocol}//${window.location.host}${window.location.pathname}`; window.history.replaceState({}, document.title, retpath); } @@ -96,7 +97,7 @@ export default function App() { }; }); }, [x, y, setScrollState]); - const [hash, setHash] = useState(cookie.load('hash')); + const [hash, setHash] = useState(cookie.hash); const [eventSource, setEventSource] = /** @param EventSource? */ useState({}); diff --git a/vnext/src/api/index.js b/vnext/src/api/index.js index d5fb6ba7..2392bfd0 100644 --- a/vnext/src/api/index.js +++ b/vnext/src/api/index.js @@ -1,5 +1,5 @@ import axios from 'axios'; -import cookies from 'react-cookies'; +import Cookies from 'universal-cookie'; const apiBaseUrl = 'https://juick.com'; @@ -71,8 +71,9 @@ const client = axios.create({ baseURL: apiBaseUrl }); client.interceptors.request.use(config => { + let cookies = new Cookies(); config.params = Object.assign(config.params || {}, { - hash: cookies.load('hash') + hash: cookies.get('hash') }); return config; }); @@ -84,6 +85,7 @@ client.interceptors.request.use(config => { * @return {Promise} me object */ export function me(username = '', password = '') { + let cookies = new Cookies(); return new Promise((resolve, reject) => { client.get('/api/me', { headers: username ? { @@ -91,7 +93,7 @@ export function me(username = '', password = '') { } : {} }).then(response => { let visitor = response.data; - cookies.save('hash', visitor.hash, { path: '/' }); + cookies.set('hash', visitor.hash, { path: '/' }); resolve(visitor); }).catch(reason => { cookies.remove('hash', { path: '/'}); diff --git a/vnext/src/index.js b/vnext/src/index.js index 0037c2a5..c9b9373a 100644 --- a/vnext/src/index.js +++ b/vnext/src/index.js @@ -1,6 +1,7 @@ import React, { lazy, Suspense } from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; +import { CookiesProvider } from 'react-cookie'; import './index.css'; @@ -17,9 +18,11 @@ const Juick = lazy(() => import('./App')); const JuickApp = () => ( - - - + + + + + ); -- cgit v1.2.3