#44 完了

frontend/src/pages/WikiDetailPage.tsx

@@ -27,18 +27,21 @@ export default () => {
             setMarkdown (res.data.body)
             WikiIdBus.set (res.data.id)
           })
-          .catch (() => setMarkdown (null)))
+          .catch (() => setMarkdown ('')))
   }, [name])
 
   return (
       <MainArea>
         <div className="prose mx-auto p-4">
-          <ReactMarkdown components={{ a: (
-              ({ href, children }) => (['/', '.'].some (e => href?.startsWith (e))
-                                       ? <Link to={href!}>{children}</Link>
-                                       : <a href={href} target="_blank" rel="noopener noreferrer">{children}</a>)) }}>
-            {markdown || `このページは存在しません。[新規作成してください](/wiki/new?title=${ name })。`}
-          </ReactMarkdown>
+          {markdown == null ? 'Loading...' : (
+              <>
+                <ReactMarkdown components={{ a: (
+                    ({ href, children }) => (['/', '.'].some (e => href?.startsWith (e))
+                                             ? <Link to={href!}>{children}</Link>
+                                             : <a href={href} target="_blank" rel="noopener noreferrer">{children}</a>)) }}>
+                  {markdown || `このページは存在しません。[新規作成してください](/wiki/new?title=${ name })。`}
+                </ReactMarkdown>
+              </>)}
         </div>
       </MainArea>)
 }

frontend/src/pages/WikiPage.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import axios from 'axios'
+import MainArea from '@/components/layout/MainArea'
+import { API_BASE_URL } from '@/config'
+
+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>
+        <div className="max-w-xl">
+          <h2 className="text-xl mb-4">Wiki</h2>
+          <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) }`}
+                            className="text-blue-400 hover:underline">
+                        {page.title}
+                      </Link>
+                    </td>
+                    <td className="p-2 text-gray-100 text-sm">
+                      {page.updated_at}
+                    </td>
+                  </tr>))}
+            </tbody>
+          </table>
+        </div>
+      </MainArea>)
+}