Merge pull request #178 from vishnoianil/bug-fix

Log the error, rather than rendering it

Author: nerdalert

src/components/Dashboard/index.tsx

@@ -27,11 +27,16 @@ import { TextContent } from '@patternfly/react-core/dist/esm/components/Text/Tex
 import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
 import { Popover } from '@patternfly/react-core/dist/esm/components/Popover';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import { Modal, ModalVariant } from '@patternfly/react-core/dist/esm/components/Modal/Modal';
+import { useState } from 'react';
+import { Spinner } from '@patternfly/react-core/dist/esm/components/Spinner';
 
 const Index: React.FunctionComponent = () => {
   const { data: session } = useSession();
   const [pullRequests, setPullRequests] = React.useState<PullRequest[]>([]);
-  const [error, setError] = React.useState<string | null>(null);
+  const [isFirstPullDone, setIsFirstPullDone] = React.useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  //const [error, setError] = React.useState<string | null>(null);
   const router = useRouter();
 
   const fetchAndSetPullRequests = React.useCallback(async () => {
@@ -52,8 +57,10 @@ const Index: React.FunctionComponent = () => {
 
         setPullRequests(sortedPRs);
       } catch (error) {
-        setError('Failed to fetch pull requests.');
+        console.log('Failed to fetch pull requests.' + error);
       }
+      setIsFirstPullDone(true);
+      setIsLoading(false);
     }
   }, [session?.accessToken]);
 
@@ -74,6 +81,10 @@ const Index: React.FunctionComponent = () => {
     }
   };
 
+  const handleOnClose = () => {
+    setIsLoading(false);
+  };
+
   if (!session) {
     return <div>Loading...</div>;
   }
@@ -109,8 +120,15 @@ const Index: React.FunctionComponent = () => {
       </PageSection>
       <PageSection>
         <div style={{ marginBottom: '20px' }} />
-        {error && <div>{error}</div>}
-        {pullRequests.length === 0 ? (
+        {!isFirstPullDone && (
+          <Modal variant={ModalVariant.small} title="Retrieving your submissions" isOpen={isLoading} onClose={() => handleOnClose()}>
+            <div>
+              <Spinner size="md" />
+              Retrieving all your skills and knowledge submissions from taxonomy repository.
+            </div>
+          </Modal>
+        )}
+        {isFirstPullDone && pullRequests.length === 0 ? (
           <EmptyState>
             <EmptyStateHeader
               titleText="Welcome to InstructLab"