feat(story-list): add images and description

src/scripts/components/story-item/story-item.styl

@@ -2,8 +2,19 @@
   padding: 5px
 
 .image
+  width: 100%
   height: 150px
   background-color: #ccc
+  object-fit: cover
 
 .title
+  margin: 0
+  margin-top: 5px
+  font-size: 1.2em
+
+.description
   font-size: 1em
+
+a
+  color: #000
+  text-decoration: none

src/scripts/components/story-item/story-item.tsx

@@ -11,8 +11,9 @@ interface Props {
 const StoryItem: FunctionComponent<Props> = ({story}) => (
   <Link to={`/stories/${story.id}`}>
     <div className={styles.storyItem}>
-      <div className={styles.image}></div>
+      <img src={story.image} className={styles.image} />
       <p className={styles.title}>{story.title}</p>
+      <p className={styles.description}>{story.description}</p>
     </div>
   </Link>
 );

src/scripts/components/story-list/story-list.tsx

@@ -13,7 +13,7 @@ const StoryList: FunctionComponent = () => {
 
   useEffect(() => {
     dispatch(fetchStories());
-  }, []);
+  }, [dispatch]);
 
   return (
     <div className={styles.storyList}>

src/scripts/components/story/story.styl

@@ -8,7 +8,7 @@
   pointer-events: none
 
 .sidepanel
-  width: 25%
+  width: 30%
   background-color: #fff
   pointer-events: auto
 

src/scripts/types/story.d.ts

@@ -1,6 +1,7 @@
 export interface Story {
   id: string;
   title: string;
+  description: string;
   link: string;
   image: string;
 }