Tips componentで一覧表示できるように

src/components/tips.tsx

@@ -1,23 +1,41 @@
-import React, { useState, useCallback } from "react";
-import { addTips } from '../domains/tips';
+import React, { useState, useCallback, useEffect } from "react";
+import { addTips, fetchAllTips, Tips, TipsPort } from '../domains/tips';
 import { createTipsLocalStorage } from '../adapters/local-storage'
 
-const Tips: React.FC = () => {
-  const [value, setValue] = useState('aaaa')
+const TipsComponent: React.FC = () => {
+  const [value, setValue] = useState('')
+  const [allTips, setAllTips] = useState<Tips[]>([])
   function handleChange(text: string) {
     setValue(text)
   }
 
+  useEffect(() => { 
+    const tipsPort: TipsPort = {
+      setAllTips: (tipses) => {
+        setAllTips(tipses);
+      }
+    }
+    const tipsRepositoryPort = createTipsLocalStorage();
+    fetchAllTips(tipsRepositoryPort, tipsPort);
+  }, [])
+
   const handleSubmit = useCallback((event: React.FormEvent) => {
     const tipsRepositoryPort = createTipsLocalStorage();
     addTips(tipsRepositoryPort, value)
     event.preventDefault()
   }, [value])
 
-  return <form onSubmit={handleSubmit}>
+  return <>
+    <form onSubmit={handleSubmit}>
     <input type="text" value={value} onChange={e => handleChange(e.target.value)} />
     <input type="submit" value="add" />
   </form>
+  <ul>
+    {
+      allTips.map(tips => <li>{tips.message}</li>)
+    }
+  </ul>
+  </>
 };
 
-export default Tips;
+export default TipsComponent;

src/domains/tips.ts

@@ -14,6 +14,8 @@ export interface TipsPort {
   setAllTips: (allTips: Tips[]) => void;
 }
 
+export type Port = Partial<TipsRepositoryPort | TipsPort>
+
 const createId = () => "hoge";
 
 export const addTips = (