[ui] add characters list

Author: mikelpmc

src/App.js

@@ -1,7 +1,13 @@
 import React from 'react';
+import { Characters } from './ui/Characters/';
 
 const App = () => {
-    return <div>Frontend DDD example demo</div>;
+    return (
+        <div>
+            <h2>Frontend DDD example demo</h2>
+            <Characters />
+        </div>
+    );
 };
 
 export default App;

src/ui/Characters/characters.js

@@ -0,0 +1,25 @@
+import React, { useEffect } from 'react';
+import useDomain from '../hooks/useDomain';
+
+const Characters = () => {
+    const { loading, data, executeUseCase } = useDomain('list_all_characters');
+
+    useEffect(() => {
+        executeUseCase();
+    }, []);
+
+    return (
+        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+            {loading && <p>Loading characters...</p>}
+            {data &&
+                data.map(character => (
+                    <div key={character.id}>
+                        <img src={character.image} alt={character.name} />
+                        {character.name}
+                    </div>
+                ))}
+        </div>
+    );
+};
+
+export default Characters;

src/ui/Characters/index.js

@@ -0,0 +1,3 @@
+import Characters from './characters';
+
+export { Characters };