Address "Extract this nested ternary operation into an independent st…

…atement." SonarCloud issue
hotosm · Sep 14, 2023 · b404464 · b404464
1 parent 752be28
commit b404464
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 96 deletions.
diff --git a/frontend/src/components/projectDetail/index.js b/frontend/src/components/projectDetail/index.js
@@ -260,21 +260,23 @@ export const ProjectDetail = (props) => {
         <FormattedMessage {...messages.contributors} />
       </h3>
       <div className="cf db mb3 ph4">
-        {contributorsStatus === 'loading' ? (
+        {contributorsStatus === 'loading' && (
           <ReactPlaceholder
             showLoadingAnimation={true}
             type={'media'}
             rows={1}
             delay={200}
             ready={contributorsStatus === 'success'}
           />
-        ) : contributorsStatus === 'error' ? (
+        )}
+        {contributorsStatus === 'error' && (
           <div className="w-100 w-60-l">
             <Alert type="error">
               <FormattedMessage {...messages.contributorsError} />
             </Alert>
           </div>
-        ) : (
+        )}
+        {contributorsStatus === 'success' && (
           <UserAvatarList
             size={'large'}
             textColor="white"
@@ -291,16 +293,18 @@ export const ProjectDetail = (props) => {
       </h3>
       <div className="mb5 ph4 w-100 w-60-l">
         <div className="pt2 pb4">
-          {timelineDataStatus === 'success' ? (
-            <React.Suspense fallback={<div className={`w7 h5`}>Loading...</div>}>
-              <ProjectTimeline tasksByDay={timelineData} />
-            </React.Suspense>
-          ) : timelineDataStatus === 'error' ? (
+          {timelineDataStatus === 'loading' && (
+            <ReactPlaceholder showLoadingAnimation rows={3} ready={false} />
+          )}
+          {timelineDataStatus === 'error' && (
             <Alert type="error">
               <FormattedMessage {...viewsMessages.timelineDataError} />
             </Alert>
-          ) : (
-            <ReactPlaceholder showLoadingAnimation rows={3} ready={false} />
+          )}
+          {timelineDataStatus === 'success' && (
+            <React.Suspense fallback={<div className={`w7 h5`}>Loading...</div>}>
+              <ProjectTimeline tasksByDay={timelineData} />
+            </React.Suspense>
           )}
         </div>
         <div className="flex gap-1 nowrap flex-wrap">

diff --git a/frontend/src/components/projectDetail/questionsAndComments.js b/frontend/src/components/projectDetail/questionsAndComments.js
@@ -85,27 +85,30 @@ export const QuestionsAndComments = ({ project, contributors, titleClass }) => {
         <FormattedMessage {...messages.questionsAndComments} />
       </h3>
       <div className="ph6-l ph4 pb5 w-100 w-70-l">
-        {commentsStatus === 'loading' ? (
-          <ReactPlaceholder type="media" rows={3} ready={false} />
-        ) : commentsStatus === 'error' ? (
+        {commentsStatus === 'loading' && <ReactPlaceholder type="media" rows={3} ready={false} />}{' '}
+        {commentsStatus === 'error' && (
           <div className="mb4">
             <Alert type="error">
               <FormattedMessage {...messages.errorLoadingComments} />
             </Alert>
           </div>
-        ) : comments?.chat.length ? (
-          <CommentList
-            userCanEditProject={userCanEditProject}
-            projectId={projectId}
-            comments={comments.chat}
-            retryFn={refetch}
-          />
-        ) : (
-          <div className="pv4 blue-grey tc">
-            <FormattedMessage {...messages.noComments} />
-          </div>
         )}
-
+        {commentsStatus === 'success' && (
+          <>
+            {comments?.chat.length ? (
+              <CommentList
+                userCanEditProject={userCanEditProject}
+                projectId={projectId}
+                comments={comments.chat}
+                retryFn={refetch}
+              />
+            ) : (
+              <div className="pv4 blue-grey tc">
+                <FormattedMessage {...messages.noComments} />
+              </div>
+            )}
+          </>
+        )}
         {comments?.pagination?.pages > 0 && (
           <PaginatorLine
             activePage={page}

diff --git a/frontend/src/components/projectStats/timeStats.js b/frontend/src/components/projectStats/timeStats.js
@@ -63,17 +63,16 @@ const StatsCards = ({ stats }) => {
 export const TimeStats = ({ id }) => {
   const { data: stats, status } = useProjectStatisticsQuery(id);
 
-  return (
-    <>
-      {status === 'error' ? (
-        <Alert type="error">
-          <FormattedMessage {...messages.projectStatsError} />
-        </Alert>
-      ) : status === 'loading' ? (
-        <ReactPlaceholder showLoadingAnimation={true} rows={26} ready={false} className="pr3" />
-      ) : (
-        <StatsCards stats={stats} />
-      )}
-    </>
-  );
+  if (status === 'loading') {
+    return <ReactPlaceholder showLoadingAnimation={true} rows={26} ready={false} className="pr3" />;
+  }
+  if (status === 'error') {
+    return (
+      <Alert type="error">
+        <FormattedMessage {...messages.projectStatsError} />
+      </Alert>
+    );
+  }
+
+  return <StatsCards stats={stats} />;
 };
diff --git a/frontend/src/components/taskSelection/taskActivity.js b/frontend/src/components/taskSelection/taskActivity.js
@@ -82,12 +82,14 @@ export const TaskHistory = ({ projectId, taskId }) => {
   const taskComments = commentPayload?.taskHistory.filter((t) => t.action === 'COMMENT');
   const taskChanges = commentPayload?.taskHistory.filter((t) => t.action !== 'COMMENT');
 
-  const shownHistory =
-    historyOption === 'Comments'
-      ? taskComments
-      : historyOption === 'Activities'
-      ? taskChanges
-      : history;
+  let shownHistory;
+  if (historyOption === 'Comments') {
+    shownHistory = taskComments;
+  } else if (historyOption === 'Activities') {
+    shownHistory = taskChanges;
+  } else {
+    shownHistory = history;
+  }
 
   const taskHistoryOptions = [
     { value: 'Comments', label: 'Comments' },
@@ -111,21 +113,32 @@ export const TaskHistory = ({ projectId, taskId }) => {
     return res;
   };
 
-  return status === 'error' ? (
-    <div className="ma4 gray">
-      <Alert type="error">
-        <FormattedMessage {...messages.taskDetailFetchError} />
-      </Alert>
-    </div>
-  ) : status === 'loading' ? (
-    <div className="ma4">
-      <ReactPlaceholder type="media" showLoadingAnimation delay={300} />
-    </div>
-  ) : history.length === 0 ? (
-    <div className="ma4 dark-gray tc">
-      <FormattedMessage {...messages.noActivitiesToDisplay} />
-    </div>
-  ) : (
+  if (status === 'loading') {
+    return (
+      <div className="ma4">
+        <ReactPlaceholder type="media" showLoadingAnimation delay={300} />
+      </div>
+    );
+  }
+
+  if (status === 'error') {
+    return (
+      <div className="ma4 gray">
+        <Alert type="error">
+          <FormattedMessage {...messages.taskDetailFetchError} />
+        </Alert>
+      </div>
+    );
+  }
+
+  if (history.length === 0) {
+    return (
+      <div className="ma4 dark-gray tc">
+        <FormattedMessage {...messages.noActivitiesToDisplay} />
+      </div>
+    );
+  }
+  return (
     <>
       <div className="ml3 pl1 pv2 blue-dark flex flex-wrap" aria-label="view task history options">
         {taskHistoryOptions.map((option) => (

diff --git a/frontend/src/components/teamsAndOrgs/teams.js b/frontend/src/components/teamsAndOrgs/teams.js
@@ -63,21 +63,23 @@ export function TeamsManagement({
         />
       </div>
       <div className={`${teamsStatus !== 'error' ? 'cards-container' : ''} mt2`}>
-        {teamsStatus === 'loading' ? (
+        {teamsStatus === 'loading' && (
           <ReactPlaceholder
             showLoadingAnimation={true}
             customPlaceholder={nCardPlaceholders(4)}
             delay={10}
             ready={false}
           />
-        ) : teamsStatus === 'error' ? (
+        )}
+        {teamsStatus === 'error' && (
           <Alert type="error">
             <FormattedMessage {...messages.errorLoadingTeams} />
           </Alert>
-        ) : (
+        )}
+        {teamsStatus === 'success' && (
           <>
             {teams?.length ? (
-              teams.map((team, n) => <TeamCard team={team} key={n} />)
+              teams.map((team) => <TeamCard team={team} key={team.teamId} />)
             ) : (
               <div className="pb3 pt2">
                 <FormattedMessage {...messages.noTeams} />

diff --git a/frontend/src/views/project.js b/frontend/src/views/project.js
@@ -169,21 +169,27 @@ export const ProjectDetailPage = () => {
     window.scrollTo(0, 0);
   }, [id]);
 
-  return status === 'loading' ? (
-    <ReactPlaceholder
-      showLoadingAnimation={true}
-      customPlaceholder={<ProjectDetailPlaceholder />}
-      ready={false}
-    />
-  ) : status === 'error' ? (
-    <>
-      {error.response.data.SubCode === 'PrivateProject' ? (
-        <PrivateProjectError />
-      ) : (
-        <NotFound projectId={id} />
-      )}
-    </>
-  ) : (
+  if (status === 'loading') {
+    return (
+      <ReactPlaceholder
+        showLoadingAnimation={true}
+        customPlaceholder={<ProjectDetailPlaceholder />}
+        ready={false}
+      />
+    );
+  }
+  if (status === 'error') {
+    return (
+      <>
+        {error.response.data.SubCode === 'PrivateProject' ? (
+          <PrivateProjectError />
+        ) : (
+          <NotFound projectId={id} />
+        )}
+      </>
+    );
+  }
+  return (
     <ProjectDetail
       project={project.data}
       projectLoading={false}

diff --git a/frontend/src/views/projectStats.js b/frontend/src/views/projectStats.js
@@ -49,41 +49,47 @@ export function ProjectStats() {
           <ProjectHeader project={project} showEditLink={true} />
         </div>
         <div className="w-100 fl">
-          {tasksStatus === 'error' ? (
+          {tasksStatus === 'loading' && (
+            <ReactPlaceholder showLoadingAnimation={true} rows={5} delay={500} ready={false} />
+          )}
+          {tasksStatus === 'error' && (
             <Alert type="error">
               <FormattedMessage {...messages.tasksStatsError} />
             </Alert>
-          ) : tasksStatus === 'loading' ? (
-            <ReactPlaceholder showLoadingAnimation={true} rows={5} delay={500} ready={false} />
-          ) : (
+          )}
+          {tasksStatus === 'success' && (
             <React.Suspense fallback={<div className={`w7 h5`}>Loading...</div>}>
               <TasksByStatus stats={tasksByStatus} />
             </React.Suspense>
           )}
         </div>
         {defaultComment?.[0] && (
           <div className="w-100 fl">
-            {editsStatus === 'error' ? (
+            {editsStatus === 'loading' && (
+              <ReactPlaceholder showLoadingAnimation={true} rows={5} delay={500} ready={false} />
+            )}
+            {editsStatus === 'error' && (
               <Alert type="error">
                 <FormattedMessage {...messages.editsStatsError} />
               </Alert>
-            ) : editsStatus === 'loading' ? (
-              <ReactPlaceholder showLoadingAnimation={true} rows={5} delay={500} ready={false} />
-            ) : (
+            )}
+            {editsStatus === 'success' && (
               <React.Suspense fallback={<div className={`w7 h5`}>Loading...</div>}>
                 <EditsStats data={edits} />
               </React.Suspense>
             )}
           </div>
         )}
         <div className="w-100 fl pb4">
-          {contributionsStatus === 'error' ? (
+          {contributionsStatus === 'error' && (
             <Alert type="error">
               <FormattedMessage {...messages.contributionsStatsError} />
             </Alert>
-          ) : contributionsStatus === 'loading' ? (
+          )}
+          {contributionsStatus === 'loading' && (
             <ReactPlaceholder showLoadingAnimation={true} rows={7} delay={500} ready={false} />
-          ) : (
+          )}
+          {contributionsStatus === 'success' && (
             <React.Suspense fallback={<div className={`w7 h5`}>Loading...</div>}>
               <ContributorsStats contributors={contributions} />
             </React.Suspense>
@@ -95,33 +101,35 @@ export function ProjectStats() {
           </h3>
           <div className="bg-white pv3 ph2 fl w-100 shadow-4">
             <div className="w-100 w-50-l fl">
-              {timelineDataStatus === 'loading' ? (
+              {timelineDataStatus === 'loading' && (
                 <ReactPlaceholder
                   showLoadingAnimation={true}
                   rows={3}
                   delay={500}
                   ready={timelineDataStatus === 'success'}
                 />
-              ) : timelineDataStatus === 'error' ? (
+              )}
+              {timelineDataStatus === 'error' && (
                 <Alert type="error">
                   <FormattedMessage {...messages.timelineDataError} />
                 </Alert>
-              ) : (
+              )}
+              {timelineDataStatus === 'success' && (
                 <React.Suspense fallback={<div className={`w7 h5`}>Loading...</div>}>
                   <ProjectTimeline tasksByDay={timelineData} />
                 </React.Suspense>
               )}
             </div>
             <div className="w-100 w-50-l fl">
-              {tasksStatus === 'error' ? (
+              {tasksStatus === 'error' && (
                 <Alert type="error">
                   <FormattedMessage {...messages.tasksStatsError} />
                 </Alert>
-              ) : tasksStatus === 'loading' ? (
+              )}
+              {tasksStatus === 'loading' && (
                 <ReactPlaceholder showLoadingAnimation={true} rows={5} delay={500} ready={false} />
-              ) : (
-                <CompletionStats tasksByStatus={tasksByStatus} />
               )}
+              {tasksStatus === 'success' && <CompletionStats tasksByStatus={tasksByStatus} />}
             </div>
           </div>
         </div>