feat(preview): add html clickable link in preview (cheap version)

dis-moi · Nov 6, 2019 · abf822b · abf822b
1 parent e87294f
commit abf822b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 1 deletion.
diff --git a/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.stories.tsx b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.stories.tsx
@@ -32,4 +32,22 @@ storiesOf('screens/Contribute/Preview', module)
       modify={action('modify')}
       publish={action('publish')}
     />
+  ))
+  .add('with a link', () => (
+    <PreviewScreen
+      contribution={{
+        message:
+          "Tombe, tombe, tombe la https://fr.wikipedia.org/wiki/Pluie Tout le monde est à l'abri Y'a que mon petit frère qu'est sous la gouttière pêchant des poissons pour toute la maison...",
+        url: 'https://weather.com',
+        contributor: {
+          email: 'johan.dufour@gmail.com',
+          name: 'Johan Dufour'
+        },
+        intention: 'approval',
+        created: new Date()
+      }}
+      errors={[]}
+      modify={action('modify')}
+      publish={action('publish')}
+    />
   ));
diff --git a/src/app/utils/linkify.ts b/src/app/utils/linkify.ts
@@ -0,0 +1,5 @@
+// eslint-disable-next-line no-useless-escape
+const LINK_DETECTION_REGEX = /(([a-z]+:\/\/)?(([a-z0-9\-]+\.)+([a-z]{2}|aero|arpa|biz|com|coop|edu|gov|info|int|jobs|mil|museum|name|nato|net|org|pro|travel|local|internal))(:[0-9]{1,5})?(\/[a-z0-9_\-\.~]+)*(\/([a-z0-9_\-\.]*)(\?[a-z0-9+_\-\.%=&amp;]*)?)?(#[a-zA-Z0-9!$&'()*+.=-_~:@/?]*)?)(\s+|$)/gi;
+
+export default (text: string) =>
+  text.replace(LINK_DETECTION_REGEX, url => `<a href="${url}">${url}</a>`);
diff --git a/src/components/organisms/NoticePreview.tsx b/src/components/organisms/NoticePreview.tsx
@@ -9,6 +9,7 @@ import Message from './NoticeDetails/Message';
 import Date from './NoticeDetails/Date';
 import { Contribution } from 'app/lmem/notice';
 import Avatar from 'components/molecules/Avatar/Avatar';
+import linkify from 'app/utils/linkify';
 
 const DetailsMetaValue = styled.div`
   margin-left: 10px;
@@ -35,7 +36,7 @@ class NoticePreview extends PureComponent<NoticePreviewProps> {
             </DetailsMetaValue>
           </DetailsMeta>
 
-          <Message>{message}</Message>
+          <Message>{linkify(message)}</Message>
         </DetailsContent>
         {children}
       </DetailsContainer>