| 
				
				
				
				 | 
			
			 | 
			@@ -1,8 +1,65 @@ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			import { useEffect, useState } from 'react' | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			import { Link, useLocation, useParams } from 'react-router-dom' | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			import MainArea from '@/components/layout/MainArea' | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			import axios from 'axios' | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			import { API_BASE_URL } from '@/config' | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			import type { WikiPageChange } from '@/types' | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			export default () => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  const [changes, setChanges] = useState<WikiPageChange[]> ([]) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  const location = useLocation () | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  const query = new URLSearchParams (location.search) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  const id = query.get ('id') | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  useEffect (() => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    void (axios.get (`${ API_BASE_URL }/wiki/changes`, id && { params: { id } }) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          .then (res => setChanges (res.data))) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  }, [location.search]) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  return ( | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <MainArea> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <table className="table-auto w-full border-collapse"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          <thead> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            <tr> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              <th></th> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              <th className="p-2 text-left">タイトル</th> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              <th className="p-2 text-left">変更</th> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			              <th className="p-2 text-left">日時</th> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            </tr> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          </thead> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          <tbody> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			            {changes.map (change => ( | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                <tr key={change.sha}> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                  <td>差分</td> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                  <td className="p-2"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                    <Link to={`/wiki/${ encodeURIComponent (change.wiki_page.title) }`} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                          className="text-blue-400 hover:underline"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                      {change.wiki_page.title} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                    </Link> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                  </td> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                  <td className="p-2"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                    {(() => { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                      switch (change.change_type) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                      { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                      case 'create':  return '新規' | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                      case 'update':  return '更新' | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                      case 'delete':  return '削除' | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                      } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                    }) ()} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                  </td> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                  <td className="p-2"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                    <Link to={`/users/${ change.user.id }`} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                          className="text-blue-400 hover:underline"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                      {change.user.name} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                    </Link> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                    <br /> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                    {change.timestamp} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                  </td> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			                </tr>))} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          </tbody> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        </table> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      </MainArea>) | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			} |