#49 ページの移動

frontend/src/pages/wiki/WikiSearchPage.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet'
+import { Link } from 'react-router-dom'
+import axios from 'axios'
+import MainArea from '@/components/layout/MainArea'
+import { API_BASE_URL, SITE_TITLE } from '@/config'
+import SectionTitle from '@/components/common/SectionTitle'
+
+import type { Category, WikiPage } from '@/types'
+
+
+export default () => {
+  const [title, setTitle] = useState ('')
+  const [text, setText] = useState ('')
+  const [category, setCategory] = useState<Category | null> (null)
+  const [results, setResults] = useState<WikiPage[]> ([])
+
+  const search = () => {
+    void (axios.get (`${ API_BASE_URL }/wiki/search`, { params: { title } })
+          .then (res => setResults (res.data)))
+  }
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault ()
+    search ()
+  }
+
+  useEffect (() => {
+    search ()
+  }, [])
+
+  return (
+      <MainArea>
+        <Helmet>
+          <title>{`Wiki | ${ SITE_TITLE }`}</title>
+        </Helmet>
+        <div className="max-w-xl">
+          <SectionTitle className="text-xl mb-4">Wiki</SectionTitle>
+          <form onSubmit={handleSearch} className="space-y-2">
+            {/* タイトル */}
+            <div>
+              <label>タイトル：</label><br />
+              <input type="text"
+                     value={title}
+                     onChange={e => setTitle (e.target.value)}
+                     className="border p-1 w-full" />
+            </div>
+
+            {/* 内容 */}
+            <div>
+              <label>内容：</label><br />
+              <input type="text"
+                     value={text}
+                     onChange={e => setText (e.target.value)}
+                     className="border p-1 w-full" />
+            </div>
+
+            {/* 検索 */}
+            <div className="py-3">
+              <button type="submit"
+                      className="bg-blue-500 text-white px-4 py-2 rounded">
+                検索
+              </button>
+            </div>
+          </form>
+        </div>
+
+        <div className="mt-4">
+          <table className="table-auto w-full border-collapse">
+            <thead>
+              <tr>
+                <th className="p-2 text-left">タイトル</th>
+                <th className="p-2 text-left">最終更新</th>
+              </tr>
+            </thead>
+            <tbody>
+              {results.map (page => (
+                  <tr key={page.id}>
+                    <td className="p-2">
+                      <Link to={`/wiki/${ encodeURIComponent (page.title) }`}>
+                        {page.title}
+                      </Link>
+                    </td>
+                    <td className="p-2 text-gray-100 text-sm">
+                      {page.updated_at}
+                    </td>
+                  </tr>))}
+            </tbody>
+          </table>
+        </div>
+      </MainArea>)
+}