fix: extract splash component

Author: ange.picard

package.json

@@ -9,7 +9,7 @@
     "types"
   ],
   "scripts": {
-    "start": "storybook",
+    "start": "npm run storybook",
     "build": "rollup -c && tsc --p tsconfig.lib.json",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

src/components/ResultList.tsx

@@ -1,21 +1,9 @@
-import { Divider, Typography } from "@material-ui/core";
+import { Divider } from "@material-ui/core";
 import React, { FC } from "react";
 import styled from "styled-components";
 import NoResultIcon from '../assets/no_result.svg';
 import DataLoadingIcon from '../assets/data_loading.svg';
 
-const SplashHintWrapper = styled.div`
-    text-align: center;
-    margin: 32px 16px;
-`;
-
-const SplashHint: FC<{ Img: React.ReactNode, headline: string, subline: string }> = ({ Img, headline, subline }) =>
-    <SplashHintWrapper>
-        {Img}
-        <Typography color='textPrimary' variant='body2'>{headline}</Typography>
-        <Typography color='textSecondary' variant='caption'>{subline}</Typography>
-    </SplashHintWrapper>
-
 const ActualResultListWrapper = styled.ul`
     list-style: none;
     padding: 0;
@@ -37,15 +25,17 @@ export interface ResultListProps {
     children?: undefined;
     loading: boolean;
     Results: React.ReactNodeArray;
+    LoadingSplash: React.ReactNode;
+    NoResultSplash: React.ReactNode;
 }
 
-export const ResultList: FC<ResultListProps> = ({ loading, Results }) => {
+export const ResultList: FC<ResultListProps> = ({ loading, LoadingSplash, NoResultSplash, Results }) => {
     if (loading) {
-        return <SplashHint Img={DataLoadingIcon} headline={'Veuillez patienter...'} subline={"Les données chargent."} />;
+        return <>{LoadingSplash}</>;
     }
     return (Results && Results.length > 0)
         ? <ActualResultList Results={Results} />
-        : <SplashHint Img={NoResultIcon} headline={'Aucun résultat...'} subline={"Peut être avec d'autre mot-clefs ?"} />
+        : <>{NoResultSplash}</>;
 };
 
 export default ResultList;

src/components/SplashHint.tsx

@@ -0,0 +1,25 @@
+import { Typography } from "@material-ui/core";
+import React, { FC } from "react";
+import styled from "styled-components";
+
+const SplashHintWrapper = styled.div`
+    text-align: center;
+    margin: 32px 16px;
+`;
+
+export interface SplashHintProps {
+    Img: React.ReactNode; 
+    headline: string; 
+    subline: string;
+}
+
+export const SplashHint: FC<SplashHintProps>
+    = ({ Img, headline, subline }) => (
+        <SplashHintWrapper>
+            {Img}
+            <Typography color='textPrimary' variant='body2'>{headline}</Typography>
+            <Typography color='textSecondary' variant='caption'>{subline}</Typography>
+        </SplashHintWrapper>
+    );
+
+export default SplashHint;

src/components/index.ts

@@ -3,4 +3,5 @@ export * from './MapButton';
 export * from './ResultList';
 export * from './SearchBar';
 export * from './Sidebar';
-export * from './DvcThemeProvider';
+export * from './DvcThemeProvider';
+export * from './SplashHint';

src/stories/ResultList.stories.tsx

@@ -1,7 +1,10 @@
 import React, { useRef, useState } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import NoResultIcon from '../assets/no_result.svg';
+import DataLoadingIcon from '../assets/data_loading.svg';
 
 import ResultList from '../components/ResultList';
+import { SplashHint } from '../components/SplashHint';
 
 export default {
   title: 'Components/ResultList',
@@ -13,14 +16,17 @@ const Template: ComponentStory<typeof ResultList> = (args) => <ResultList {...ar
 export const Loading = Template.bind({});
 Loading.args = {
   loading: true,
+  LoadingSplash: <SplashHint Img={<img src={DataLoadingIcon} />} headline="Les données arrivent..." subline="Soyez patient :)" />,
+  NoResultSplash: <div>No result found</div>,
 }
 
 export const NoResult = Template.bind({});
 NoResult.args = {
-  Results: []
+  Results: [],
+  NoResultSplash: <SplashHint Img={<img src={NoResultIcon} />} headline="Aucun résultat..." subline="Peut être avec d'autre mot clef ?" />,
 }
 
 export const Results = Template.bind({});
 Results.args = {
-  Results: ['Banana', 'Lemon', 'Grape'].map(f => <div>{f}</div>)
+  Results: ['Banana', 'Lemon', 'Grape'].map(f => <button>{f}</button>)
 }