From fbed254d6ef97265d9d9641ea188d5336066aa17 Mon Sep 17 00:00:00 2001
From: Chen-Yuan Chu <cchu42@myseneca.ca>
Date: Wed, 16 Nov 2022 11:19:25 -0500
Subject: [PATCH] Add clarification to differentiate between the blog URL and
 the RSS(feed URL) during sign-up * Turn examples into an array * Fix Eslint
 error

---
 .../app/src/components/SignUp/Forms/BlogFeeds.tsx |  4 +++-
 .../app/src/components/SignUp/Forms/RSSFeeds.tsx  | 15 +++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/web/app/src/components/SignUp/Forms/BlogFeeds.tsx b/src/web/app/src/components/SignUp/Forms/BlogFeeds.tsx
index 4d2ae0fd53..990924fd9b 100644
--- a/src/web/app/src/components/SignUp/Forms/BlogFeeds.tsx
+++ b/src/web/app/src/components/SignUp/Forms/BlogFeeds.tsx
@@ -7,7 +7,9 @@ const BlogFeeds = () => {
   return (
     <RSSFeeds
       title="Blog and RSS"
-      prompt="Enter your blog URL and select the RSS you want to use in Telescope"
+      prompt="Enter your blog URL and select the RSS you want to use in Telescope.
+      A blog URL (HTML) should be the root of your blog itself, and Telescope will find the link(s) of blog feed URL (XML) for you to select, such as:"
+      promptExamples={['Blog URL: https://dev.to/user', 'Blog feed URL: https://dev.to/feed/user']}
       buttonText="validate blog"
       helperText="Validate your Blog URL"
       noFeedsSelected="Please validate your blog URL"
diff --git a/src/web/app/src/components/SignUp/Forms/RSSFeeds.tsx b/src/web/app/src/components/SignUp/Forms/RSSFeeds.tsx
index e4730c3e74..ea5cd1ff38 100644
--- a/src/web/app/src/components/SignUp/Forms/RSSFeeds.tsx
+++ b/src/web/app/src/components/SignUp/Forms/RSSFeeds.tsx
@@ -142,7 +142,8 @@ type RSSFeedsFormProps = {
     selected: 'blogs' | 'channels';
     discovered: 'allBlogs' | 'allChannels';
   };
-  prompt: string;
+  prompt?: string;
+  promptExamples?: Array<string>;
   title: string;
   buttonText: string;
   helperText: string;
@@ -161,6 +162,7 @@ const RSSFeeds = connect<RSSFeedsFormProps, SignUpForm>(
   ({
     feeds: { selected, discovered },
     prompt,
+    promptExamples,
     title,
     buttonText,
     helperText,
@@ -245,7 +247,16 @@ const RSSFeeds = connect<RSSFeedsFormProps, SignUpForm>(
       <div className={classes.root}>
         <div className={classes.container}>
           <h1 className={classes.blogPageTitle}>{title}</h1>
-          <h2 className={classes.helpText}>{prompt}</h2>
+          <h2 className={classes.helpText}>
+            {prompt}
+            {promptExamples?.map((example) => (
+              <>
+                <br />
+                {example}
+              </>
+            ))}
+          </h2>
+
           <div className={classes.infoContainer}>
             <div className={classes.inputsContainer}>
               <TextInput