react-cookies -> react-cookie + universal-cookie

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<SecureUser, Error>} 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 = () => (
     <React.StrictMode>
         <Suspense fallback={LoadingView()}>
-            <BrowserRouter>
-                <Juick />
-            </BrowserRouter>
+            <CookiesProvider>
+                <BrowserRouter>
+                    <Juick />
+                </BrowserRouter>
+            </CookiesProvider>
         </Suspense>
     </React.StrictMode>
 );