From e064d1925d4cda305c1f8f578f19f1b930f09c33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=90=E8=97=A4=E6=98=AD=E6=96=87?= <akfm.sato@gmail.com>
Date: Sun, 24 Jul 2022 22:17:44 +0900
Subject: [PATCH] examples: history-sync-transit impl

---
 examples/history-sync-transit/pages/_app.tsx  | 17 +++++++--
 examples/history-sync-transit/pages/index.tsx | 17 +++++----
 .../history-sync-transit/pages/ssg/[id].tsx   | 16 ++++----
 .../history-sync-transit/pages/ssr/[id].tsx   | 16 ++++----
 .../src/components/Counter/index.tsx          | 32 ----------------
 .../src/components/Textfield/index.module.css |  3 --
 .../src/components/Textfield/index.tsx        | 21 -----------
 .../index.module.css                          |  5 ++-
 .../src/components/ViewStateForm/index.tsx    | 37 +++++++++++++++++++
 9 files changed, 81 insertions(+), 83 deletions(-)
 delete mode 100644 examples/history-sync-transit/src/components/Counter/index.tsx
 delete mode 100644 examples/history-sync-transit/src/components/Textfield/index.module.css
 delete mode 100644 examples/history-sync-transit/src/components/Textfield/index.tsx
 rename examples/history-sync-transit/src/components/{Counter => ViewStateForm}/index.module.css (76%)
 create mode 100644 examples/history-sync-transit/src/components/ViewStateForm/index.tsx

diff --git a/examples/history-sync-transit/pages/_app.tsx b/examples/history-sync-transit/pages/_app.tsx
index 492ac27f..8d55ce24 100755
--- a/examples/history-sync-transit/pages/_app.tsx
+++ b/examples/history-sync-transit/pages/_app.tsx
@@ -1,15 +1,26 @@
 import '../styles/globals.css'
 import { RecoilRoot } from 'recoil'
-import { RecoilHistorySyncJSONNext } from 'recoil-sync-next'
+import { RecoilHistorySyncTransitNext } from 'recoil-sync-next'
 
 import type { AppProps } from 'next/app'
+import { ViewState } from '../src/components/ViewStateForm'
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <RecoilRoot>
-      <RecoilHistorySyncJSONNext>
+      <RecoilHistorySyncTransitNext
+        storeKey="history-transit-store"
+        handlers={[
+          {
+            tag: 'VS',
+            class: ViewState,
+            write: x => [x.active, x.pos],
+            read: ([active, pos]) => new ViewState(active, pos),
+          },
+        ]}
+      >
         <Component {...pageProps} />
-      </RecoilHistorySyncJSONNext>
+      </RecoilHistorySyncTransitNext>
     </RecoilRoot>
   )
 }
diff --git a/examples/history-sync-transit/pages/index.tsx b/examples/history-sync-transit/pages/index.tsx
index 61b302a8..a5191e9a 100755
--- a/examples/history-sync-transit/pages/index.tsx
+++ b/examples/history-sync-transit/pages/index.tsx
@@ -1,9 +1,7 @@
 import Head from 'next/head'
-import Link from 'next/link'
 
-import { Counter } from '../src/components/Counter'
 import { Links } from '../src/components/Links'
-import { Textfield } from '../src/components/Textfield'
+import { ViewStateForm } from '../src/components/ViewStateForm'
 import styles from '../styles/Home.module.css'
 
 import type { NextPage } from 'next'
@@ -18,11 +16,14 @@ const Home: NextPage = () => {
 
       <main className={styles.main}>
         <h1 className={styles.title}>Top page (Static)</h1>
-        <Textfield />
-        <Counter name="foo" initialValue={0} />
-        <Counter name="bar" initialValue={10} />
-        <Counter name="baz" initialValue={100} />
-        <Links />
+        <div>
+          <h2>ViewState</h2>
+          <ViewStateForm />
+        </div>
+        <div>
+          <h2>Links</h2>
+          <Links />
+        </div>
       </main>
     </div>
   )
diff --git a/examples/history-sync-transit/pages/ssg/[id].tsx b/examples/history-sync-transit/pages/ssg/[id].tsx
index 9d97d8bb..c07d4d67 100644
--- a/examples/history-sync-transit/pages/ssg/[id].tsx
+++ b/examples/history-sync-transit/pages/ssg/[id].tsx
@@ -1,8 +1,7 @@
 import Head from 'next/head'
 
-import { Counter } from '../../src/components/Counter'
-import { Textfield } from '../../src/components/Textfield'
 import { Links } from '../../src/components/Links'
+import { ViewStateForm } from '../../src/components/ViewStateForm'
 import styles from '../../styles/Home.module.css'
 
 import type { GetStaticPaths, GetStaticProps, NextPage } from 'next'
@@ -20,11 +19,14 @@ const SSGPage: NextPage<Props> = ({ id }) => {
 
       <main className={styles.main}>
         <h1 className={styles.title}>SSG Page {id}</h1>
-        <Textfield />
-        <Counter name="foo" initialValue={0} />
-        <Counter name="bar" initialValue={10} />
-        <Counter name="baz" initialValue={100} />
-        <Links />
+        <div>
+          <h2>ViewState</h2>
+          <ViewStateForm />
+        </div>
+        <div>
+          <h2>Links</h2>
+          <Links />
+        </div>
       </main>
     </div>
   )
diff --git a/examples/history-sync-transit/pages/ssr/[id].tsx b/examples/history-sync-transit/pages/ssr/[id].tsx
index 7872e464..e2da33bc 100644
--- a/examples/history-sync-transit/pages/ssr/[id].tsx
+++ b/examples/history-sync-transit/pages/ssr/[id].tsx
@@ -1,8 +1,7 @@
 import Head from 'next/head'
 
-import { Counter } from '../../src/components/Counter'
 import { Links } from '../../src/components/Links'
-import { Textfield } from '../../src/components/Textfield'
+import { ViewStateForm } from '../../src/components/ViewStateForm'
 import styles from '../../styles/Home.module.css'
 
 import type { GetServerSideProps, NextPage } from 'next'
@@ -20,11 +19,14 @@ const SSRPage: NextPage<Props> = ({ id }) => {
 
       <main className={styles.main}>
         <h1 className={styles.title}>SSR Page {id}</h1>
-        <Textfield />
-        <Counter name="foo" initialValue={0} />
-        <Counter name="bar" initialValue={10} />
-        <Counter name="baz" initialValue={100} />
-        <Links />
+        <div>
+          <h2>ViewState</h2>
+          <ViewStateForm />
+        </div>
+        <div>
+          <h2>Links</h2>
+          <Links />
+        </div>
       </main>
     </div>
   )
diff --git a/examples/history-sync-transit/src/components/Counter/index.tsx b/examples/history-sync-transit/src/components/Counter/index.tsx
deleted file mode 100644
index 65f62e7c..00000000
--- a/examples/history-sync-transit/src/components/Counter/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { number } from '@recoiljs/refine'
-import { useRecoilState } from 'recoil'
-import { syncEffect } from 'recoil-sync'
-import { atomFamilyWithInitialValue } from 'recoil-sync-next'
-
-import styles from './index.module.css'
-
-export const counter = atomFamilyWithInitialValue<number, string>({
-  key: 'counterState',
-  effects: [syncEffect({ refine: number() })],
-})
-
-export type Props = {
-  name: string
-  initialValue: number
-}
-
-export const Counter: React.FC<Props> = ({ name, initialValue }) => {
-  const [count, setCount] = useRecoilState(counter(name, initialValue))
-
-  return (
-    <div key={name} className={styles.wrapper}>
-      <div>
-        count[{name}]: {count}
-      </div>
-      <div>
-        <button onClick={() => setCount((prev) => prev + 1)}>+</button>
-        <button onClick={() => setCount((prev) => prev - 1)}>-</button>
-      </div>
-    </div>
-  )
-}
diff --git a/examples/history-sync-transit/src/components/Textfield/index.module.css b/examples/history-sync-transit/src/components/Textfield/index.module.css
deleted file mode 100644
index 0888644f..00000000
--- a/examples/history-sync-transit/src/components/Textfield/index.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.wrapper {
-  width: 200px;
-}
diff --git a/examples/history-sync-transit/src/components/Textfield/index.tsx b/examples/history-sync-transit/src/components/Textfield/index.tsx
deleted file mode 100644
index 3c94c2ad..00000000
--- a/examples/history-sync-transit/src/components/Textfield/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { string } from '@recoiljs/refine'
-import { atom, useRecoilState } from 'recoil'
-import { syncEffect } from 'recoil-sync'
-
-import styles from './index.module.css'
-
-export const textState = atom<string>({
-  key: 'textState',
-  default: '',
-  effects: [syncEffect({ refine: string() })],
-})
-
-export const Textfield: React.FC = () => {
-  const [text, setText] = useRecoilState(textState)
-
-  return (
-    <div className={styles.wrapper}>
-      <input value={text} onChange={(e) => setText(e.currentTarget.value)} />
-    </div>
-  )
-}
diff --git a/examples/history-sync-transit/src/components/Counter/index.module.css b/examples/history-sync-transit/src/components/ViewStateForm/index.module.css
similarity index 76%
rename from examples/history-sync-transit/src/components/Counter/index.module.css
rename to examples/history-sync-transit/src/components/ViewStateForm/index.module.css
index 17570eef..f5ffa1f3 100644
--- a/examples/history-sync-transit/src/components/Counter/index.module.css
+++ b/examples/history-sync-transit/src/components/ViewStateForm/index.module.css
@@ -1,5 +1,6 @@
-.wrapper {
+.row {
   display: flex;
   justify-content: space-between;
   width: 200px;
-}
+  margin: 0;
+}
\ No newline at end of file
diff --git a/examples/history-sync-transit/src/components/ViewStateForm/index.tsx b/examples/history-sync-transit/src/components/ViewStateForm/index.tsx
new file mode 100644
index 00000000..92e0d4e2
--- /dev/null
+++ b/examples/history-sync-transit/src/components/ViewStateForm/index.tsx
@@ -0,0 +1,37 @@
+import { custom } from '@recoiljs/refine'
+import { atom, useRecoilState } from 'recoil'
+import { syncEffect } from 'recoil-sync'
+
+import styles from './index.module.css'
+
+export class ViewState {
+  constructor(
+    public active: boolean,
+    public pos: [number, number],
+  ) {}
+}
+
+const viewStateChecker = custom(x => x instanceof ViewState ? x : null);
+const viewState = atom<ViewState>({
+  key: 'viewState',
+  default: new ViewState(true, [1, 2]),
+  effects: [syncEffect({ storeKey: 'history-transit-store', refine: viewStateChecker })],
+})
+
+export const ViewStateForm: React.FC = () => {
+  const [state, setState] = useRecoilState(viewState)
+  const toggleActive = () => setState(new ViewState(!state.active, state.pos))
+  const incrementPos = () => setState(new ViewState(state.active, [state.pos[0] + 1, state.pos[1] + 1]))
+
+  return (
+    <div>
+      <div className={styles.row}>
+      active: <input type="checkbox" checked={state.active} onChange={toggleActive} />
+  </div>
+  <div className={styles.row}>
+    <div>pos: { JSON.stringify(state.pos) }</div>
+  <button onClick={incrementPos}>increment</button>
+    </div>
+    </div>
+)
+}
\ No newline at end of file