✨ [epgs] URLを10件記録する

ci7lus · Oct 10, 2021 · 336eb52 · 336eb52
1 parent cd807b2
commit 336eb52
Showing 1 changed file with 28 additions and 0 deletions.
diff --git a/src/miraktest-epgs/index.tsx b/src/miraktest-epgs/index.tsx
@@ -33,6 +33,10 @@ const main: InitPlugin = {
       key: `${prefix}.setting`,
       default: {},
     })
+    const epgsUrlHistoryAtom = atom<string[]>({
+      key: `${prefix}.epgsUrlHistory`,
+      default: [],
+    })
 
     return {
       ...meta,
@@ -48,6 +52,10 @@ const main: InitPlugin = {
           type: "atom",
           atom: settingAtom,
         },
+        {
+          type: "atom",
+          atom: epgsUrlHistoryAtom,
+        },
       ],
       setup() {
         return
@@ -60,26 +68,46 @@ const main: InitPlugin = {
           component: () => {
             const [setting, setSetting] = useRecoilState(settingAtom)
             const [url, setUrl] = useState(setting.baseUrl)
+            const [urlHistory, setUrlHistory] =
+              useRecoilState(epgsUrlHistoryAtom)
             return (
               <>
                 <style>{tailwind}</style>
                 <form
                   className="m-4"
                   onSubmit={(e) => {
                     e.preventDefault()
+                    if (url) {
+                      setUrlHistory((prev) =>
+                        prev.find((_url) => _url === url)
+                          ? prev
+                          : [
+                              url,
+                              ...(10 < prev.length
+                                ? [...prev].slice(0, 10)
+                                : prev),
+                            ]
+                      )
+                    }
                     setSetting({
                       baseUrl: url || undefined,
                     })
                   }}
                 >
                   <label className="mb-2 block">
                     <span>EPGStation の URL</span>
+                    <datalist id="epgsUrlHistory">
+                      {urlHistory.map((url) => (
+                        <option key={url} value={url} />
+                      ))}
+                    </datalist>
                     <input
                       type="text"
                       placeholder="http://192.168.0.10:8888"
                       className="block mt-2 form-input rounded-md w-full text-gray-900"
                       value={url || ""}
                       onChange={(e) => setUrl(e.target.value)}
+                      list="epgsUrlHistory"
                     />
                   </label>
                   <button