From 8c983f4217ff03c2e6f3a4ec68a68ccfabe658fc Mon Sep 17 00:00:00 2001
From: koichik <koichik@improvement.jp>
Date: Mon, 19 Sep 2022 13:19:11 +0900
Subject: [PATCH] examples: make the <Links /> like an accordion

---
 .../src/components/Links/index.tsx            | 59 ++++++++++++++-----
 .../src/components/Links/index.tsx            | 59 ++++++++++++++-----
 2 files changed, 90 insertions(+), 28 deletions(-)

diff --git a/examples/history-sync-json/src/components/Links/index.tsx b/examples/history-sync-json/src/components/Links/index.tsx
index 8b00cd31..94d08d1e 100644
--- a/examples/history-sync-json/src/components/Links/index.tsx
+++ b/examples/history-sync-json/src/components/Links/index.tsx
@@ -1,19 +1,44 @@
+import { bool } from '@recoiljs/refine'
 import Link from 'next/link'
+import { useRecoilState } from 'recoil'
+import { syncEffect } from 'recoil-sync'
+import { initializableAtomFamily } from 'recoil-sync-next'
+
+export const openState = initializableAtomFamily<boolean, string>({
+  key: 'openState',
+  effects: [syncEffect({ refine: bool() })],
+})
 
 export const Links: React.FC = () => {
+  const [top, setTop] = useRecoilState(openState('top', true))
+  const [ssr, setSsr] = useRecoilState(openState('ssr', false))
+  const [ssg, setSsg] = useRecoilState(openState('ssg', false))
+
   return (
-    <dl>
-      <dt>Top</dt>
-      <dd>
-        <ul>
+    <div>
+      <details
+        open={top}
+        onClick={(event) => {
+          event.preventDefault()
+          setTop((value) => !value)
+        }}
+      >
+        <summary>Top</summary>
+        <ul onClick={(event) => event.stopPropagation()}>
           <li>
             <Link href="/">Top</Link>
           </li>
         </ul>
-      </dd>
-      <dt>SSR</dt>
-      <dd>
-        <ul>
+      </details>
+      <details
+        open={ssr}
+        onClick={(event) => {
+          event.preventDefault()
+          setSsr((value) => !value)
+        }}
+      >
+        <summary>SSR</summary>
+        <ul onClick={(event) => event.stopPropagation()}>
           <li>
             <Link href="/ssr/1">SSR 1</Link>
           </li>
@@ -24,10 +49,16 @@ export const Links: React.FC = () => {
             <Link href="/ssr/3">SSR 3</Link>
           </li>
         </ul>
-      </dd>
-      <dt>SSG</dt>
-      <dd>
-        <ul>
+      </details>
+      <details
+        open={ssg}
+        onClick={(event) => {
+          event.preventDefault()
+          setSsg((value) => !value)
+        }}
+      >
+        <summary>SSG</summary>
+        <ul onClick={(event) => event.stopPropagation()}>
           <li>
             <Link href="/ssg/1">SSG 1</Link>
           </li>
@@ -38,7 +69,7 @@ export const Links: React.FC = () => {
             <Link href="/ssg/3">SSG 3</Link>
           </li>
         </ul>
-      </dd>
-    </dl>
+      </details>
+    </div>
   )
 }
diff --git a/examples/history-sync-transit/src/components/Links/index.tsx b/examples/history-sync-transit/src/components/Links/index.tsx
index 8b00cd31..6391a04c 100644
--- a/examples/history-sync-transit/src/components/Links/index.tsx
+++ b/examples/history-sync-transit/src/components/Links/index.tsx
@@ -1,19 +1,44 @@
+import { bool } from '@recoiljs/refine'
 import Link from 'next/link'
+import { useRecoilState } from 'recoil'
+import { syncEffect } from 'recoil-sync'
+import { initializableAtomFamily } from 'recoil-sync-next'
+
+export const openState = initializableAtomFamily<boolean, string>({
+  key: 'openState',
+  effects: [syncEffect({ storeKey: 'history-transit-store', refine: bool() })],
+})
 
 export const Links: React.FC = () => {
+  const [top, setTop] = useRecoilState(openState('top', true))
+  const [ssr, setSsr] = useRecoilState(openState('ssr', false))
+  const [ssg, setSsg] = useRecoilState(openState('ssg', false))
+
   return (
-    <dl>
-      <dt>Top</dt>
-      <dd>
-        <ul>
+    <div>
+      <details
+        open={top}
+        onClick={(event) => {
+          event.preventDefault()
+          setTop((value) => !value)
+        }}
+      >
+        <summary>Top</summary>
+        <ul onClick={(event) => event.stopPropagation()}>
           <li>
             <Link href="/">Top</Link>
           </li>
         </ul>
-      </dd>
-      <dt>SSR</dt>
-      <dd>
-        <ul>
+      </details>
+      <details
+        open={ssr}
+        onClick={(event) => {
+          event.preventDefault()
+          setSsr((value) => !value)
+        }}
+      >
+        <summary>SSR</summary>
+        <ul onClick={(event) => event.stopPropagation()}>
           <li>
             <Link href="/ssr/1">SSR 1</Link>
           </li>
@@ -24,10 +49,16 @@ export const Links: React.FC = () => {
             <Link href="/ssr/3">SSR 3</Link>
           </li>
         </ul>
-      </dd>
-      <dt>SSG</dt>
-      <dd>
-        <ul>
+      </details>
+      <details
+        open={ssg}
+        onClick={(event) => {
+          event.preventDefault()
+          setSsg((value) => !value)
+        }}
+      >
+        <summary>SSG</summary>
+        <ul onClick={(event) => event.stopPropagation()}>
           <li>
             <Link href="/ssg/1">SSG 1</Link>
           </li>
@@ -38,7 +69,7 @@ export const Links: React.FC = () => {
             <Link href="/ssg/3">SSG 3</Link>
           </li>
         </ul>
-      </dd>
-    </dl>
+      </details>
+    </div>
   )
 }