From 5fa885ae247a252356bd0dfd81485efda0c8ece5 Mon Sep 17 00:00:00 2001
From: Rhys Saldanha <rhys.saldanha@gmail.com>
Date: Mon, 25 Jan 2021 21:56:01 +0000
Subject: [PATCH 1/2] Add failing atom family test

* all atoms from atom family incorrectly share the same stored state
---
 test/index.spec.js | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/test/index.spec.js b/test/index.spec.js
index 31ba240..58323a4 100644
--- a/test/index.spec.js
+++ b/test/index.spec.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { recoilPersist } from '..'
-import { render, fireEvent, waitFor } from '@testing-library/react'
+import { fireEvent, render, waitFor } from '@testing-library/react'
 import * as recoil from 'recoil'
 
 const { updateState, RecoilPersist } = recoilPersist()
@@ -21,7 +21,7 @@ const counter2State = recoil.atom({
   },
 })
 
-const counter3State = recoil.atomFamily({
+const counterFamily = recoil.atomFamily({
   key: 'count3',
   default: 0,
   persistence_UNSTABLE: {
@@ -32,14 +32,17 @@ const counter3State = recoil.atomFamily({
 function Demo() {
   const [count, setCount] = recoil.useRecoilState(counterState)
   const [count2, setCount2] = recoil.useRecoilState(counter2State)
-  const [count3, setCount3] = recoil.useRecoilState(counter3State('key'))
+  const [count3, setCount3] = recoil.useRecoilState(counterFamily('3'))
+  const [count4, setCount4] = recoil.useRecoilState(counterFamily('4'))
   return (
     <div>
       <p data-testid="count-value">{count}</p>
-      <p data-testid="count3-value">{count}</p>
+      <p data-testid="count3-value">{count3}</p>
+      <p data-testid="count4-value">{count4}</p>
       <button onClick={() => setCount(count + 1)}>Increase</button>
       <button onClick={() => setCount2(count2 + 1)}>Increase 2</button>
       <button onClick={() => setCount3(count3 + 1)}>Increase 3</button>
+      <button onClick={() => setCount4(count4 + 1)}>Increase 4</button>
     </div>
   )
 }
@@ -82,6 +85,21 @@ it('should update localStorage if using atomFamily', async () => {
   })
 })
 
+it('should cope with atomFamily', async () => {
+  localStorage.setItem('recoil-persist', JSON.stringify({ count3: 1 }))
+  const { getByTestId } = render(
+    <recoil.RecoilRoot initializeState={updateState}>
+      <RecoilPersist />
+      <Demo />
+    </recoil.RecoilRoot>,
+  )
+  await waitFor(() => expect(getByTestId('count3-value').innerHTML).toBe('1'))
+  await waitFor(() => expect(getByTestId('count4-value').innerHTML).toBe('0'))
+  expect(JSON.parse(localStorage.getItem('recoil-persist'))).toStrictEqual({
+    count3: 1,
+  })
+})
+
 it('should update sessionStorage', async () => {
   const { updateState, RecoilPersist } = recoilPersist([], {
     storage: sessionStorage,

From 5193cdf7e34dfc79baa9a6a31085228434a507bd Mon Sep 17 00:00:00 2001
From: Rhys Saldanha <rhys.saldanha@gmail.com>
Date: Mon, 25 Jan 2021 21:56:37 +0000
Subject: [PATCH 2/2] Update demo with multiple atoms in atom family

---
 test/demo/index.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/test/demo/index.js b/test/demo/index.js
index 7e1e4ff..e9097f4 100644
--- a/test/demo/index.js
+++ b/test/demo/index.js
@@ -32,7 +32,8 @@ const counterFamily = atomFamily({
 export default function App() {
   const [count, setCount] = useRecoilState(counterState)
   const [count2, setCount2] = useRecoilState(counterState2)
-  const [count3, setCount3] = useRecoilState(counterFamily('key'))
+  const [count3, setCount3] = useRecoilState(counterFamily('3'))
+  const [count4, setCount4] = useRecoilState(counterFamily('4'))
   return (
     <div className="App">
       <h3>Counter 1 (persist): {count}</h3>
@@ -44,6 +45,9 @@ export default function App() {
       <h3>Counter 3 (persist, atomFamily): {count3}</h3>
       <button onClick={() => setCount3(count3 + 1)}>Increase</button>
       <button onClick={() => setCount3(count3 - 1)}>Decrease</button>
+      <h3>Counter 4 (persist, atomFamily): {count4}</h3>
+      <button onClick={() => setCount4(count4 + 1)}>Increase</button>
+      <button onClick={() => setCount4(count4 - 1)}>Decrease</button>
     </div>
   )
 }