refactor: move from nookies to js-cookie

package.json

@@ -52,12 +52,12 @@
     "express-session": "^1.17.3",
     "fs-extra": "^11.1.1",
     "isomorphic-fetch": "^3.0.0",
+    "js-cookie": "^3.0.5",
     "lodash.merge": "^4.6.2",
     "next": "13.4.3",
     "next-intl": "^2.14.2",
     "node-cron": "^3.0.1",
     "node-fetch-commonjs": "^3.2.4",
-    "nookies": "^2.5.2",
     "pg": "^8.11.0",
     "qrcode.react": "^3.1.0",
     "react": "18.2.0",
@@ -96,6 +96,7 @@
     "@types/fs-extra": "^11.0.1",
     "@types/isomorphic-fetch": "^0.0.36",
     "@types/jest": "^29.5.1",
+    "@types/js-cookie": "^3.0.3",
     "@types/lodash.merge": "^4.6.7",
     "@types/node": "20.2.1",
     "@types/node-cron": "^3.0.2",

pnpm-lock.yaml

@@ -76,6 +76,9 @@ dependencies:
   isomorphic-fetch:
     specifier: ^3.0.0
     version: 3.0.0
+  js-cookie:
+    specifier: ^3.0.5
+    version: 3.0.5
   lodash.merge:
     specifier: ^4.6.2
     version: 4.6.2
@@ -91,9 +94,6 @@ dependencies:
   node-fetch-commonjs:
     specifier: ^3.2.4
     version: 3.2.4
-  nookies:
-    specifier: ^2.5.2
-    version: 2.5.2
   pg:
     specifier: ^8.11.0
     version: 8.11.0
@@ -204,6 +204,9 @@ devDependencies:
   '@types/jest':
     specifier: ^29.5.1
     version: 29.5.1
+  '@types/js-cookie':
+    specifier: ^3.0.3
+    version: 3.0.3
   '@types/lodash.merge':
     specifier: ^4.6.7
     version: 4.6.7
@@ -2476,6 +2479,9 @@ packages:
       pretty-format: 29.5.0
     dev: true
 
+  /@types/js-cookie@3.0.3:
+    resolution: {integrity: sha512-Xe7IImK09HP1sv2M/aI+48a20VX+TdRJucfq4vfRVy6nWN8PYPOEnlMRSgxJAgYQIXJVL8dZ4/ilAM7dWNaOww==}
+    dev: true
   /@types/js-levenshtein@1.1.1:
     resolution: {integrity: sha512-qC4bCqYGy1y/NP7dDVr7KJarn+PbX1nSpwA7JXdu0HxT3QYjO8MJ+cntENtHFVy2dRAyBV23OZ6MxsW1AM1L8g==}
     dev: true
@@ -6412,6 +6418,11 @@ packages:
       - ts-node
     dev: true
 
+  /js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+    dev: false
+
   /js-levenshtein@1.1.6:
     resolution: {integrity: sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==}
     engines: {node: '>=0.10.0'}
@@ -7440,13 +7451,6 @@ packages:
       undefsafe: 2.0.5
     dev: true
 
-  /nookies@2.5.2:
-    resolution: {integrity: sha512-x0TRSaosAEonNKyCrShoUaJ5rrT5KHRNZ5DwPCuizjgrnkpE5DRf3VL7AyyQin4htict92X1EQ7ejDbaHDVdYA==}
-    dependencies:
-      cookie: 0.4.2
-      set-cookie-parser: 2.5.1
-    dev: false
-
   /nopt@1.0.10:
     resolution: {integrity: sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==}
     hasBin: true
@@ -8455,6 +8459,7 @@ packages:
 
   /set-cookie-parser@2.5.1:
     resolution: {integrity: sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ==}
+    dev: true
 
   /setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}

src/@types/next.d.ts

@@ -15,7 +15,7 @@ declare module 'express-session' {
 }
 
 interface ExtendedGetServerSidePropsContext<Params, Preview> extends GetServerSidePropsContext<Params, Preview> {
-  req: IncomingMessage & { session: Session & SessionContent };
+  req: IncomingMessage & { session: Session & SessionContent } & { cookies?: { locale?: string } };
 }
 
 declare module 'next' {

src/client/hooks/__tests__/useLocale.test.ts

@@ -1,11 +1,11 @@
-import nookies from 'nookies';
 import { getTRPCMock } from '@/client/mocks/getTrpcMock';
 import { server } from '@/client/mocks/server';
+import Cookies from 'js-cookie';
 import { renderHook, waitFor } from '../../../../tests/test-utils';
 import { useLocale } from '../useLocale';
 
 beforeEach(() => {
-  nookies.destroy(null, 'locale');
+  Cookies.remove('locale');
 });
 
 describe('test: useLocale()', () => {
@@ -28,7 +28,7 @@ describe('test: useLocale()', () => {
     it('should return cookie locale if not logged in', async () => {
       // arrange
       const locale = 'fr-FR';
-      nookies.set(null, 'locale', locale);
+      Cookies.set('locale', locale);
       server.use(getTRPCMock({ path: ['auth', 'me'], response: null }));
 
       // act
@@ -82,7 +82,7 @@ describe('test: useLocale()', () => {
 
       // assert
       await waitFor(() => {
-        expect(nookies.get(null)).toEqual({ locale: 'fr-FR' });
+        expect(Cookies.get('locale')).toEqual('fr-FR');
       });
     });
 
@@ -102,7 +102,7 @@ describe('test: useLocale()', () => {
 
       // assert
       await waitFor(() => {
-        expect(nookies.get(null)).toEqual({ locale });
+        expect(Cookies.get('locale')).toEqual(locale);
       });
     });
   });

src/client/hooks/useLocale.ts

@@ -1,16 +1,16 @@
 import { useRouter } from 'next/router';
-import { parseCookies, setCookie } from 'nookies';
+import Cookies from 'js-cookie';
 import { trpc } from '@/utils/trpc';
 import { Locale, getLocaleFromString } from '@/shared/internationalization/locales';
 
 export const useLocale = () => {
   const router = useRouter();
-  const cookies = parseCookies();
   const me = trpc.auth.me.useQuery();
   const changeUserLocale = trpc.auth.changeLocale.useMutation();
   const browserLocale = typeof window !== 'undefined' ? window.navigator.language : undefined;
+  const cookieLocale = Cookies.get('locale');
 
-  const locale = me.data?.locale || cookies.locale || browserLocale || 'en';
+  const locale = me.data?.locale || cookieLocale || browserLocale || 'en';
   const ctx = trpc.useContext();
 
   const changeLocale = async (l: Locale) => {
@@ -19,8 +19,8 @@ export const useLocale = () => {
       await ctx.invalidate();
     }
 
-    setCookie(null, 'locale', l, {
-      maxAge: 30 * 24 * 60 * 60,
+    Cookies.set('locale', l, {
+      expires: 30,
       path: '/',
     });
 

src/client/utils/__tests__/page-helpers.test.ts

@@ -1,5 +1,5 @@
-import nookies from 'nookies';
 import merge from 'lodash.merge';
+import Cookies from 'js-cookie';
 import { getAuthedPageProps, getMessagesPageProps } from '../page-helpers';
 import englishMessages from '../../messages/en.json';
 import frenchMessages from '../../messages/fr-FR.json';
@@ -33,7 +33,7 @@ describe('test: getAuthedPageProps()', () => {
 
 describe('test: getMessagesPageProps()', () => {
   beforeEach(() => {
-    nookies.destroy(null, 'locale');
+    Cookies.remove('locale');
   });
 
   it('should return correct messages if the locale is in the session', async () => {
@@ -51,7 +51,7 @@ describe('test: getMessagesPageProps()', () => {
   it('should return correct messages if the locale in the cookie', async () => {
     // arrange
     const ctx = { req: { session: {}, headers: {} } };
-    nookies.set(null, 'locale', 'fr-FR');
+    Cookies.set('locale', 'fr-FR');
 
     // act
     // @ts-expect-error - we're passing in a partial context

src/client/utils/page-helpers.ts

@@ -1,4 +1,3 @@
-import nookies from 'nookies';
 import { GetServerSideProps } from 'next';
 import merge from 'lodash.merge';
 import { getLocaleFromString } from '@/shared/internationalization/locales';
@@ -21,12 +20,11 @@ export const getAuthedPageProps: GetServerSideProps = async (ctx) => {
 };
 
 export const getMessagesPageProps: GetServerSideProps = async (ctx) => {
-  const cookies = nookies.get(ctx);
+  const { cookies } = ctx.req;
   const { locale: sessionLocale } = ctx.req.session;
-  const { locale: cookieLocale } = cookies;
   const browserLocale = ctx.req.headers['accept-language']?.split(',')[0];
 
-  const locale = getLocaleFromString(sessionLocale || cookieLocale || browserLocale || 'en');
+  const locale = getLocaleFromString(sessionLocale || cookies?.locale || browserLocale || 'en');
 
   const englishMessages = (await import(`../messages/en.json`)).default;
   const messages = (await import(`../messages/${locale}.json`)).default;