examples: url-sync-transit impl

recruit-tech · Jul 24, 2022 · 4e7a626 · 4e7a626
1 parent ce1f81b
commit 4e7a626
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 103 deletions.
diff --git a/examples/url-sync-transit/pages/_app.tsx b/examples/url-sync-transit/pages/_app.tsx
@@ -1,18 +1,27 @@
 import '../styles/globals.css'
 import { RecoilRoot } from 'recoil'
-import { RecoilURLSyncJSONNext } from 'recoil-sync-next'
+import { RecoilURLSyncTransitNext } from 'recoil-sync-next'
 
 import type { AppProps } from 'next/app'
+import { ViewState } from '../src/components/ViewStateForm'
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <RecoilRoot>
-      <RecoilURLSyncJSONNext
-        storeKey="url-json-store"
+      <RecoilURLSyncTransitNext
         location={{ part: 'queryParams' }}
+        storeKey="history-transit-store"
+        handlers={[
+          {
+            tag: 'VS',
+            class: ViewState,
+            write: x => [x.active, x.pos],
+            read: ([active, pos]) => new ViewState(active, pos),
+          },
+        ]}
       >
         <Component {...pageProps} />
-      </RecoilURLSyncJSONNext>
+      </RecoilURLSyncTransitNext>
     </RecoilRoot>
   )
 }

diff --git a/examples/url-sync-transit/pages/index.tsx b/examples/url-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'
@@ -12,17 +10,20 @@ const Home: NextPage = () => {
   return (
     <div className={styles.container}>
       <Head>
-        <title>Top - Example of RecoilURLSyncJSONNext</title>
+        <title>Top - Example of RecoilHistorySyncJSONNext</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
       <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/url-sync-transit/pages/ssg/[id].tsx b/examples/url-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'
@@ -15,16 +14,19 @@ const SSGPage: NextPage<Props> = ({ id }) => {
   return (
     <div className={styles.container}>
       <Head>
-        <title>SSG - Example of RecoilURLSyncJSONNext</title>
+        <title>SSG - Example of RecoilHistorySyncJSONNext</title>
       </Head>
 
       <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/url-sync-transit/pages/ssr/[id].tsx b/examples/url-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'
@@ -15,16 +14,19 @@ const SSRPage: NextPage<Props> = ({ id }) => {
   return (
     <div className={styles.container}>
       <Head>
-        <title>SSR - Example of RecoilURLSyncJSONNext</title>
+        <title>SSR - Example of RecoilHistorySyncJSONNext</title>
       </Head>
 
       <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/url-sync-transit/src/components/Counter/index.tsx b/examples/url-sync-transit/src/components/Counter/index.tsx
diff --git a/examples/url-sync-transit/src/components/Links/index.tsx b/examples/url-sync-transit/src/components/Links/index.tsx
@@ -9,10 +9,6 @@ export const Links: React.FC = () => {
           <li>
             <Link href="/">Top</Link>
           </li>
-          <li>
-            <Link href={'/?textState="Recoil"'}>Top</Link>
-            <span>&nbsp;(with text: &quot;Recoil&quot;)</span>
-          </li>
         </ul>
       </dd>
       <dt>SSR</dt>
@@ -22,14 +18,10 @@ export const Links: React.FC = () => {
             <Link href="/ssr/1">SSR 1</Link>
           </li>
           <li>
-            <Link href={'/ssr/2?textState="Sync"'}>SSR 2</Link>
-            <span>&nbsp;(with text: &quot;Sync&quot;)</span>
+            <Link href="/ssr/2">SSR 2</Link>
           </li>
           <li>
-            <Link href={'/ssr/3?counterState__"foo"=1&counterState__"bar"=11'}>
-              SSR 3
-            </Link>
-            <span>&nbsp;(with foo: 1, bar: 11)</span>
+            <Link href="/ssr/3">SSR 3</Link>
           </li>
         </ul>
       </dd>
@@ -40,14 +32,10 @@ export const Links: React.FC = () => {
             <Link href="/ssg/1">SSG 1</Link>
           </li>
           <li>
-            <Link href={'/ssg/2?textState="Sync"'}>SSG 2</Link>
-            <span>&nbsp;(with text: &quot;Sync&quot;)</span>
+            <Link href="/ssg/2">SSG 2</Link>
           </li>
           <li>
-            <Link href={'/ssg/3?counterState__"foo"=1&counterState__"bar"=11'}>
-              SSG 3
-            </Link>
-            <span>&nbsp;(with foo: 1, bar: 11)</span>
+            <Link href="/ssg/3">SSG 3</Link>
           </li>
         </ul>
       </dd>

diff --git a/examples/url-sync-transit/src/components/Textfield/index.module.css b/examples/url-sync-transit/src/components/Textfield/index.module.css
diff --git a/examples/url-sync-transit/src/components/Textfield/index.tsx b/examples/url-sync-transit/src/components/Textfield/index.tsx
diff --git a/...t/src/components/Counter/index.module.css → ...components/ViewStateForm/index.module.css b/...t/src/components/Counter/index.module.css → ...components/ViewStateForm/index.module.css
@@ -1,5 +1,6 @@
-.wrapper {
+.row {
   display: flex;
   justify-content: space-between;
   width: 200px;
-}
+  margin: 0;
+}
diff --git a/examples/url-sync-transit/src/components/ViewStateForm/index.tsx b/examples/url-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>
+)
+}