PedroFonsecaDEV · PedroFonsecaDEV · Apr 17, 2021 · Apr 16, 2021
diff --git a/src/web/src/components/SignUp/Forms/GitHubAccount.tsx b/src/web/src/components/SignUp/Forms/GitHubAccount.tsx
@@ -109,38 +109,38 @@ const GitHubAccount = connect<{}, SignUpForm>((props) => {
   const controllerRef = useRef<AbortController | null>();
 
   const validateGit = async () => {
-    if (values.githubUsername) {
+    if (!values.githubUsername) {
+      setError('');
+      setFieldValue('github', {}, true);
+      return;
+    }
+    try {
       setValidating(true);
       if (controllerRef.current) {
         controllerRef.current.abort();
       }
       controllerRef.current = new AbortController();
-      try {
-        const response = await fetch(`${gitHubApiUrl}/${values.githubUsername}`, {
-          signal: controllerRef.current?.signal,
-        });
-        if (!response.ok) {
-          throw new Error(response.statusText);
-        }
-        const res = await response.json();
-
-        setFieldValue('github', {
-          username: res.login,
-          avatarUrl: res.avatar_url,
-        });
-        setError('');
-      } catch (err) {
-        console.error(err, 'Unable to get GitHub profile');
-
-        setError('Unable to get GitHub profile');
-        setFieldValue('github', {}, true);
-      } finally {
-        setValidating(false);
-        controllerRef.current = null;
+      const response = await fetch(`${gitHubApiUrl}/${values.githubUsername}`, {
+        signal: controllerRef.current?.signal,
+      });
+      if (!response.ok) {
+        throw new Error(response.statusText);
       }
-    } else {
+      const res = await response.json();
+
+      setFieldValue('github', {
+        username: res.login,
+        avatarUrl: res.avatar_url,
+      });
       setError('');
+    } catch (err) {
+      console.error(err, 'Unable to get GitHub profile');
+
+      setError('Unable to get GitHub profile');
       setFieldValue('github', {}, true);
+    } finally {
+      setValidating(false);
+      controllerRef.current = null;
     }
   };
 

diff --git a/src/web/src/components/SignUp/Forms/RSSFeeds.tsx b/src/web/src/components/SignUp/Forms/RSSFeeds.tsx
@@ -139,48 +139,47 @@ const RSSFeeds = connect<{}, SignUpForm>((props) => {
   const { values, errors, setFieldValue } = props.formik;
   const { token } = useAuth();
 
-  const [feedUrls, setFeedUrls] = useState<Array<string>>([]);
   const [blogUrlError, setBlogUrlError] = useState('');
   const [validating, setValidating] = useState(false);
   const controllerRef = useRef<AbortController | null>();
 
   const validateBlog = async () => {
-    if (!errors.blogUrl) {
-      try {
-        setValidating(true);
-        if (controllerRef.current) {
-          controllerRef.current.abort();
-        }
-        controllerRef.current = new AbortController();
-        const response = await fetch(`${feedDiscoveryServiceUrl}`, {
-          signal: controllerRef.current?.signal,
-          method: 'post',
-          headers: {
-            Authorization: `bearer ${token}`,
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            blogUrl: values.blogUrl,
-          }),
-        });
-        if (!response.ok) {
-          throw new Error(response.statusText);
-        }
-        const res = await response.json();
+    if (errors.blogUrl) {
+      setFieldValue('feeds', [], true);
+      return;
+    }
+    try {
+      setValidating(true);
+      if (controllerRef.current) {
+        controllerRef.current.abort();
+      }
+      controllerRef.current = new AbortController();
+      const response = await fetch(`${feedDiscoveryServiceUrl}`, {
+        signal: controllerRef.current?.signal,
+        method: 'post',
+        headers: {
+          Authorization: `bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          blogUrl: values.blogUrl,
+        }),
+      });
+      if (!response.ok) {
+        throw new Error(response.statusText);
+      }
+      const res = await response.json();
 
-        setBlogUrlError('');
-        setFeedUrls(res.feedUrls);
-      } catch (err) {
-        console.error(err, 'Unable to discover feeds');
+      setBlogUrlError('');
+      setFieldValue('allFeeds', res.feedUrls);
+    } catch (err) {
+      console.error(err, 'Unable to discover feeds');
 
-        setBlogUrlError('Unable to discover feeds');
-        setFeedUrls([]);
-      } finally {
-        controllerRef.current = null;
-        setValidating(false);
-      }
-    } else {
-      setFieldValue('feeds', [], true);
+      setBlogUrlError('Unable to discover feeds');
+      setFieldValue('allFeeds', []);
+    } finally {
+      controllerRef.current = null;
+      setValidating(false);
     }
   };
 
@@ -224,10 +223,10 @@ const RSSFeeds = connect<{}, SignUpForm>((props) => {
           </div>
           <div className={classes.RssButtonContainer}>
             <div className={classes.infoRSSContainer}>
-              {feedUrls.length ? (
+              {values.allFeeds.length ? (
                 <FormControl required component="fieldset">
                   <FormGroup>
-                    {feedUrls.map((url) => (
+                    {values.allFeeds.map((url) => (
                       <FormControlLabel
                         key={url}
                         control={

diff --git a/src/web/src/components/SignUp/Forms/Review.tsx b/src/web/src/components/SignUp/Forms/Review.tsx
@@ -1,8 +1,8 @@
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
 import { connect } from 'formik';
-import PostAvatar from '../../Posts/PostAvatar';
 
 import { SignUpForm } from '../../../interfaces';
+import PostAvatar from '../../Posts/PostAvatar';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -77,7 +77,6 @@ const useStyles = makeStyles((theme: Theme) =>
       textAlign: 'start',
       padding: '1%',
       minHeight: '60px',
-      maxHeight: '60px',
       overflowY: 'auto',
       [theme.breakpoints.down(600)]: {
         width: '90%',
@@ -103,21 +102,19 @@ const Review = connect<{}, SignUpForm>((props) => {
         <div className={classes.contentContainer}>
           <div className={classes.avatar}>
             <PostAvatar name={displayName} blog={blogUrl} img={github.avatarUrl} />
-            <h2>
-              Display Name:
-              <h3>{displayName}</h3>
-            </h2>
+            <h2>{displayName}</h2>
           </div>
           <div className={classes.senecaBlogInfo}>
             <h2>From seneca:</h2>
-            <h3>Full Name: {displayName || `${firstName} ${lastName}`}</h3>
+            <h3>
+              Full Name: {firstName} {lastName}
+            </h3>
             <h3>Email : {email}</h3>
-            <h3>Blog URL:</h3>
-            <h3>{blogUrl}</h3>
+            <h3>Blog URL: {blogUrl}</h3>
           </div>
           <div>
             <div className={classes.gitHubInfo}>
-              <h4>GitHub Account:</h4>
+              <h4>GitHub Account</h4>
               <h3>{github.username}</h3>
             </div>
           </div>

diff --git a/src/web/src/components/SignUp/Schema/FormModel.tsx b/src/web/src/components/SignUp/Schema/FormModel.tsx
@@ -44,6 +44,9 @@ export default {
     label: 'RSS Feeds',
     requiredErrorMsg: 'Please select at least one URL',
   },
+  allFeeds: {
+    name: 'allFeeds',
+  },
   blogOwnership: {
     name: 'blogOwnership',
     label: 'I declare I’m the owner and the maintainer of this blog account',

diff --git a/src/web/src/components/SignUp/Schema/FormSchema.tsx b/src/web/src/components/SignUp/Schema/FormSchema.tsx
@@ -10,6 +10,7 @@ const {
   github,
   githubOwnership,
   feeds,
+  allFeeds,
   blogUrl,
   blogOwnership,
 } = formModels;
@@ -43,6 +44,7 @@ export default [
   Yup.object().shape({
     [blogUrl.name]: Yup.string().url().required(`${blogUrl.requiredErrorMsg}`),
     [feeds.name]: Yup.array().of(Yup.string()).min(1, feeds.requiredErrorMsg),
+    [allFeeds.name]: Yup.array().of(Yup.string()),
     [blogOwnership.name]: Yup.boolean().test(
       'agreed',
       blogOwnership.invalidErrorMsg,

diff --git a/src/web/src/interfaces/index.ts b/src/web/src/interfaces/index.ts
@@ -28,6 +28,7 @@ export type SignUpForm = {
   githubOwnership: boolean;
   blogUrl: string;
   feeds: Array<string>;
+  allFeeds: Array<string>;
   blogOwnership: boolean;
 };
 

diff --git a/src/web/src/pages/signup.tsx b/src/web/src/pages/signup.tsx
@@ -25,6 +25,7 @@ const {
   githubOwnership,
   blogUrl,
   feeds,
+  allFeeds,
   email,
   blogOwnership,
 } = formModels;
@@ -146,48 +147,46 @@ const SignUpPage = () => {
   };
 
   useEffect(() => {
-    console.log('useEffect-USER');
     if (user) {
       setLoggedIn(true);
-      console.log('USER:', user);
       handleNext();
     }
   }, [user]);
 
   const handleSubmit = async (values: SignUpForm, actions: FormikHelpers<SignUpForm>) => {
-    if (activeStep === 4) {
-      try {
-        const { firstName, lastName, email, displayName, github, feeds } = values;
-        const telescopeUser = {
-          firstName,
-          lastName,
-          email,
-          displayName,
-          github,
-          feeds,
-        };
-        const response = await fetch(`${authServiceUrl}/register`, {
-          method: 'post',
-          headers: {
-            Authorization: `bearer ${token}`,
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(telescopeUser),
-        });
-
-        if (!response.ok) {
-          throw new Error(response.statusText);
-        }
-        const result = await response.json();
-        register(result.token);
-        return;
-      } catch (err) {
-        console.error(err, 'Unable to Post');
-      }
-    } else {
+    if (activeStep < 4) {
       handleNext();
       actions.setTouched({});
       actions.setSubmitting(false);
+      return;
+    }
+    try {
+      const { firstName, lastName, email, displayName, github, feeds } = values;
+      const telescopeUser = {
+        firstName,
+        lastName,
+        email,
+        displayName,
+        github,
+        feeds,
+      };
+      const response = await fetch(`${authServiceUrl}/register`, {
+        method: 'post',
+        headers: {
+          Authorization: `bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(telescopeUser),
+      });
+
+      if (!response.ok) {
+        throw new Error(response.statusText);
+      }
+      const result = await response.json();
+      register(result.token);
+      return;
+    } catch (err) {
+      console.error(err, 'Unable to Post');
     }
   };
 
@@ -234,6 +233,7 @@ const SignUpPage = () => {
               },
               [blogUrl.name]: 'https://',
               [feeds.name]: [] as Array<string>,
+              [allFeeds.name]: [] as Array<string>,
               [blogOwnership.name]: false,
             } as SignUpForm
           }