examples: fix format, rename json to transit

recruit-tech · Aug 1, 2022 · 24796e3 · 24796e3
1 parent e7d6164
commit 24796e3
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 40 deletions.
diff --git a/examples/history-sync-transit/README.md b/examples/history-sync-transit/README.md
@@ -1,6 +1,6 @@
-## history-sync-json
+## history-sync-transit
 
-Example of `RecoilHistorySyncJSONNext`.
+Example of `RecoilHistorySyncTransitNext`.
 
 ```bash
 # run example application

diff --git a/examples/history-sync-transit/package.json b/examples/history-sync-transit/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "history-sync-json",
+  "name": "history-sync-transit",
   "version": "0.1.0",
   "private": true,
   "scripts": {

diff --git a/examples/history-sync-transit/pages/_app.tsx b/examples/history-sync-transit/pages/_app.tsx
@@ -14,7 +14,7 @@ function MyApp({ Component, pageProps }: AppProps) {
           {
             tag: 'VS',
             class: ViewState,
-            write: x => [x.active, x.pos],
+            write: (x) => [x.active, x.pos],
             read: ([active, pos]) => new ViewState(active, pos),
           },
         ]}

diff --git a/examples/history-sync-transit/src/components/ViewStateForm/index.module.css b/examples/history-sync-transit/src/components/ViewStateForm/index.module.css
@@ -3,4 +3,4 @@
   justify-content: space-between;
   width: 200px;
   margin: 0;
-}
+}
diff --git a/examples/history-sync-transit/src/components/ViewStateForm/index.tsx b/examples/history-sync-transit/src/components/ViewStateForm/index.tsx
@@ -5,33 +5,34 @@ import { syncEffect } from 'recoil-sync'
 import styles from './index.module.css'
 
 export class ViewState {
-  constructor(
-    public active: boolean,
-    public pos: [number, number],
-  ) {}
+  constructor(public active: boolean, public pos: [number, number]) {}
 }
 
-const viewStateChecker = custom(x => x instanceof ViewState ? x : null);
+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 })],
+  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]))
+  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>
+        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>
-)
-}
+  )
+}
diff --git a/examples/url-sync-transit/README.md b/examples/url-sync-transit/README.md
@@ -1,6 +1,6 @@
-## url-sync-json
+## url-sync-transit
 
-Example of `RecoilURLSyncJSONNext`.
+Example of `RecoilURLSyncTransitNext`.
 
 ```bash
 # run example application

diff --git a/examples/url-sync-transit/package.json b/examples/url-sync-transit/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "url-sync-json",
+  "name": "url-sync-transit",
   "version": "0.1.0",
   "private": true,
   "scripts": {

diff --git a/examples/url-sync-transit/pages/_app.tsx b/examples/url-sync-transit/pages/_app.tsx
@@ -15,7 +15,7 @@ function MyApp({ Component, pageProps }: AppProps) {
           {
             tag: 'VS',
             class: ViewState,
-            write: x => [x.active, x.pos],
+            write: (x) => [x.active, x.pos],
             read: ([active, pos]) => new ViewState(active, pos),
           },
         ]}

diff --git a/examples/url-sync-transit/src/components/ViewStateForm/index.module.css b/examples/url-sync-transit/src/components/ViewStateForm/index.module.css
@@ -3,4 +3,4 @@
   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
@@ -5,33 +5,34 @@ import { syncEffect } from 'recoil-sync'
 import styles from './index.module.css'
 
 export class ViewState {
-  constructor(
-    public active: boolean,
-    public pos: [number, number],
-  ) {}
+  constructor(public active: boolean, public pos: [number, number]) {}
 }
 
-const viewStateChecker = custom(x => x instanceof ViewState ? x : null);
+const viewStateChecker = custom((x) => (x instanceof ViewState ? x : null))
 const viewState = atom<ViewState>({
   key: 'viewState',
   default: new ViewState(true, [1, 2]),
-  effects: [syncEffect({ storeKey: 'url-transit-store', refine: viewStateChecker })],
+  effects: [
+    syncEffect({ storeKey: 'url-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]))
+  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>
+        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>
-)
-}
+  )
+}