wip addressing feedback

packages/react-cookie/README.md

@@ -97,22 +97,6 @@ function SomeComponent() {
 
 ### Hooks
 
-#### `useCookies()`
-
-This hook returns an object of all the current cookies.
-
-```tsx
-function MyComponent() {
-  const allCookies = useCookies();
-
-  const cookiesMarkup = Object.keys(allCookies).map(key => (
-    <p key={key}>{allCookies[key].value}</p>
-  ));
-
-  return <>{cookiesMarkup}</>;
-}
-```
-
 #### `useCookie(name: string)`
 
 This hook is called with the name of a given cookie and returns the current value and a setter for that cookie.

packages/react-cookie/src/BrowserCookieManager.ts

@@ -1,15 +1,10 @@
 import cookie from 'cookie';
-import {hasDocumentCookie} from './utilities';
 import {CookieValue, Cookie} from './types';
 
 export {CookieContext} from './context';
 
 export class BrowserCookieManager {
   getCookie(name: string) {
-    if (!hasDocumentCookie()) {
-      return;
-    }
-
     const cookies = this.parse(document.cookie);
 
     return cookies[name] && cookies[name].value !== ''
@@ -18,48 +13,30 @@ export class BrowserCookieManager {
   }
 
   getCookies() {
-    if (!hasDocumentCookie()) {
-      return {};
-    }
-
     const cookies = this.parse(document.cookie || '');
 
     return cookies;
   }
 
   setCookie(name: string, value: string | CookieValue) {
-    if (!hasDocumentCookie()) {
-      return;
-    }
-
     const fullCookie = typeof value === 'string' ? {value} : value;
     const {value: cookieValue, ...options} = fullCookie;
 
     document.cookie = cookie.serialize(name, cookieValue, options);
   }
 
   removeCookie(name: string) {
-    if (!hasDocumentCookie()) {
-      return;
-    }
-
     document.cookie = cookie.serialize(name, '', {
       expires: new Date('Thu, 01 Jan 1970 00:00:01 GMT'),
     });
   }
 
-  private parse(cookies: string) {
-    let newCookies: Cookie | undefined;
+  private parse(cookies: string): Cookie {
     const parsedCookies = cookie.parse(cookies);
 
-    Object.entries(parsedCookies).forEach(([key, value]) => {
-      if (newCookies) {
-        newCookies[key] = {value};
-      } else {
-        newCookies = {[key]: {value}};
-      }
-    });
-
-    return newCookies || {};
+    return Object.entries(parsedCookies).reduce(
+      (newCookies, [key, value]) => ({...newCookies, [key]: {value}}),
+      {} as Cookie,
+    );
   }
 }

packages/react-network/CHANGELOG.md

@@ -9,7 +9,8 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## Added
 
-- The NetworkManager now accepts a `cookies` property in its constructor. This value is used to create `ServerCookieManager` on that is accessible via `manager.cookies`. [#1002](https://github.com/Shopify/quilt/pull/1002)
+- The NetworkManager now accepts a `cookies` property in its constructor. This value is used to create a `ServerCookieManager` that can be accessed on the NetworkManger class instance. [#1002](https://github.com/Shopify/quilt/pull/1002)
+- Added a new hook `useNetworkManager()` that returns the network manager. [#1002](https://github.com/Shopify/quilt/pull/1002)
 
 ## [3.2.0]
 

packages/react-network/README.md

@@ -119,6 +119,26 @@ function MyComponent() {
 }
 ```
 
+#### `useNetworkManager()`
+
+Returns the full network manager from context.
+
+```tsx
+import React from 'react';
+import {useNetworkManager} from '@shopify/react-network';
+import {CookieContext} from './context';
+
+export function CookieProvider({children}: Props) {
+  const manager = useNetworkManager();
+
+  return (
+    <CookieContext.Provider value={manager.cookies}>
+      {children}
+    </CookieContext.Provider>
+  );
+}
+```
+
 ### Server
 
 To extract details from your application, render a `NetworkContext.Provider` around your app, and give it an instance of the `NetworkManager`. When using `react-effect`, this decoration can be done in the `decorate` option of `extract()`. Finally, you can use the `applyToContext` utility from this package to apply the necessary headers to the response. Your final server middleware will resemble th e example below:

packages/react-network/src/ServerCookieManager.ts

@@ -12,6 +12,7 @@ export class ServerCookieManager {
   constructor(cookies: Cookie | string = {}) {
     const parsedCookies =
       typeof cookies === 'string' ? cookie.parse(cookies) : cookies;
+
     Object.entries(parsedCookies).forEach(([key, value]) => {
       this.setCookie(key, value);
     });
@@ -38,6 +39,9 @@ export class ServerCookieManager {
   }
 
   removeCookie(name: string) {
-    this.cookies.delete(name);
+    this.cookies.set(name, {
+      value: '',
+      expires: new Date('Thu, 01 Jan 1970 00:00:01 GMT'),
+    });
   }
 }

packages/react-network/src/server.ts

@@ -1,5 +1,4 @@
 import {Context} from 'koa';
-import {applyCookieToContext} from '@shopify/react-cookie/server';
 import {NetworkManager, EFFECT_ID} from './manager';
 
 export {NetworkContext} from './context';
@@ -23,6 +22,11 @@ export function applyToContext<T extends Context>(
     ctx.set(header, value);
   }
 
-  applyCookieToContext(cookies)(ctx);
+  Object.entries(cookies).forEach(([cookie, options]) => {
+    const {value, ...cookieOptions} = options;
+
+    ctx.cookies.set(cookie, value, cookieOptions);
+  });
+
   return ctx;
 }

packages/react-network/src/test/ServerCookieManager.test.ts

@@ -0,0 +1,54 @@
+import {ServerCookieManager} from '../ServerCookieManager';
+
+describe('NetworkManager', () => {
+  it('returns all cookies as an object', () => {
+    const cookies = 'foo=bar;baz=qux';
+    const manager = new ServerCookieManager(cookies);
+
+    expect(manager.getCookies()).toStrictEqual({
+      baz: {
+        value: 'qux',
+      },
+      foo: {
+        value: 'bar',
+      },
+    });
+  });
+
+  it('sets additional cookies', () => {
+    const cookies = 'foo=bar;baz=qux';
+    const manager = new ServerCookieManager(cookies);
+
+    manager.setCookie('quux', 'quuz');
+    expect(manager.getCookies()).toStrictEqual({
+      baz: {
+        value: 'qux',
+      },
+      foo: {
+        value: 'bar',
+      },
+      quux: {
+        value: 'quuz',
+      },
+    });
+  });
+
+  it('returns an individual cookie value from a given key', () => {
+    const cookies = 'foo=bar;baz=qux';
+    const manager = new ServerCookieManager(cookies);
+
+    expect(manager.getCookie('foo')).toBe('bar');
+    expect(manager.getCookie('baz')).toBe('qux');
+  });
+
+  it('removes an individual cookie from a given key', () => {
+    const cookies = 'foo=bar;baz=qux';
+    const manager = new ServerCookieManager(cookies);
+    manager.removeCookie('foo');
+
+    expect(manager.getCookies().foo).toMatchObject({
+      expires: new Date('Thu, 01 Jan 1970 00:00:01 GMT'),
+      value: '',
+    });
+  });
+});

tsconfig.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@shopify/react-cookie/server": ["packages/react-cookie/src/server"],
       "@shopify/react-effect/server": ["packages/react-effect/src/server"],
       "@shopify/*": ["packages/*/src/index"]
     }