From 60c2e730ff9b18656d9bf3f98f613119c3fec90e Mon Sep 17 00:00:00 2001
From: Amanda Bullington <35536439+albullington@users.noreply.github.com>
Date: Fri, 15 Mar 2024 10:38:32 +1100
Subject: [PATCH] Fix navigation to Projects; fix ProjectDetails crash when no
 description; closes #1114 (#1262)

---
 .../ProjectDetails/ProjectDetails.js          |  6 ++-
 src/navigation/BottomTabNavigator/index.js    |  6 ---
 src/navigation/CustomDrawerContent.js         |  5 ++-
 .../ObservationsStackNavigator.js             | 19 +++++++++
 .../StackNavigators/ProjectsStackNavigator.js | 39 -------------------
 .../ProjectDetails/ProjectDetails.test.js     | 13 +++++++
 6 files changed, 40 insertions(+), 48 deletions(-)
 delete mode 100644 src/navigation/StackNavigators/ProjectsStackNavigator.js

diff --git a/src/components/ProjectDetails/ProjectDetails.js b/src/components/ProjectDetails/ProjectDetails.js
index 75116c6a2..b00d5cac1 100644
--- a/src/components/ProjectDetails/ProjectDetails.js
+++ b/src/components/ProjectDetails/ProjectDetails.js
@@ -43,6 +43,8 @@ const ProjectDetails = ( {
     return null;
   }
 
+  const userTextStyle = { lineHeight: 26 };
+
   return (
     <ScrollViewWrapper testID="project-details">
       <View className="h-[24px]" />
@@ -72,8 +74,8 @@ const ProjectDetails = ( {
           onSpeciesPressed={onSpeciesPressed}
         />
         <Heading4 className="mt-7">{t( "ABOUT" )}</Heading4>
-        {/* eslint-disable-next-line react-native/no-inline-styles */}
-        <UserText text={project.description} htmlStyle={{ lineHeight: 26 }} />
+        {project?.description
+          && <UserText text={project.description} htmlStyle={userTextStyle} />}
         {project.project_type === "collection" && (
           <>
             <Heading4 className="mb-3 mt-5">{t( "PROJECT-REQUIREMENTS" )}</Heading4>
diff --git a/src/navigation/BottomTabNavigator/index.js b/src/navigation/BottomTabNavigator/index.js
index ce49bde32..7ed4830b8 100644
--- a/src/navigation/BottomTabNavigator/index.js
+++ b/src/navigation/BottomTabNavigator/index.js
@@ -15,7 +15,6 @@ import {
 } from "navigation/navigationOptions";
 import DeveloperStackNavigator from "navigation/StackNavigators/DeveloperStackNavigator";
 import ObservationsStackNavigator from "navigation/StackNavigators/ObservationsStackNavigator";
-import ProjectsStackNavigator from "navigation/StackNavigators/ProjectsStackNavigator";
 import React from "react";
 
 import CustomTabBarContainer from "./CustomTabBarContainer";
@@ -93,11 +92,6 @@ const BottomTabs = ( ) => {
         />
         <Tab.Screen name="help" component={PlaceholderComponent} />
         <Tab.Screen name="Blog" component={PlaceholderComponent} />
-        <Tab.Screen
-          name="ProjectsStackNavigator"
-          component={ProjectsStackNavigator}
-          options={hideHeader}
-        />
         <Tab.Screen
           name="DeveloperStackNavigator"
           component={DeveloperStackNavigator}
diff --git a/src/navigation/CustomDrawerContent.js b/src/navigation/CustomDrawerContent.js
index 87a681a52..039a0ffbc 100644
--- a/src/navigation/CustomDrawerContent.js
+++ b/src/navigation/CustomDrawerContent.js
@@ -74,7 +74,10 @@ const CustomDrawerContent = ( { ...props }: Props ): Node => {
         label: t( "PROJECTS" ),
         navigation: "TabNavigator",
         params: {
-          screen: "Projects"
+          screen: "ObservationsStackNavigator",
+          params: {
+            screen: "Projects"
+          }
         },
         icon: "briefcase"
       },
diff --git a/src/navigation/StackNavigators/ObservationsStackNavigator.js b/src/navigation/StackNavigators/ObservationsStackNavigator.js
index 520a6e80a..aebc089dc 100644
--- a/src/navigation/StackNavigators/ObservationsStackNavigator.js
+++ b/src/navigation/StackNavigators/ObservationsStackNavigator.js
@@ -11,6 +11,8 @@ import MyObservationsContainer from "components/MyObservations/MyObservationsCon
 import NotificationsContainer from "components/Notifications/NotificationsContainer";
 import DQAContainer from "components/ObsDetails/DQAContainer";
 import ObsDetailsContainer from "components/ObsDetails/ObsDetailsContainer";
+import ProjectDetailsContainer from "components/ProjectDetails/ProjectDetailsContainer";
+import ProjectsContainer from "components/Projects/ProjectsContainer";
 import { Heading4 } from "components/SharedComponents";
 import UserProfile from "components/UserProfile/UserProfile";
 import { t } from "i18next";
@@ -129,6 +131,23 @@ const ObservationsStackNavigator = ( ): Node => (
           headerTitleAlign: "center"
         }}
       />
+      <Stack.Screen
+        name="Projects"
+        component={ProjectsContainer}
+        options={{
+          ...removeBottomBorder,
+          ...blankHeaderTitle
+        }}
+      />
+      <Stack.Screen
+        name="ProjectDetails"
+        component={ProjectDetailsContainer}
+        options={{
+          ...blankHeaderTitle,
+          ...removeBottomBorder,
+          ...showHeader
+        }}
+      />
     </Stack.Group>
   </Stack.Navigator>
 );
diff --git a/src/navigation/StackNavigators/ProjectsStackNavigator.js b/src/navigation/StackNavigators/ProjectsStackNavigator.js
deleted file mode 100644
index 4bb8dc6b9..000000000
--- a/src/navigation/StackNavigators/ProjectsStackNavigator.js
+++ /dev/null
@@ -1,39 +0,0 @@
-// @flow
-
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import ProjectDetailsContainer from "components/ProjectDetails/ProjectDetailsContainer";
-import ProjectsContainer from "components/Projects/ProjectsContainer";
-import {
-  blankHeaderTitle,
-  removeBottomBorder,
-  showHeader
-} from "navigation/navigationOptions";
-import type { Node } from "react";
-import React from "react";
-
-const Stack = createNativeStackNavigator( );
-
-const ProjectsStackNavigator = ( ): Node => (
-  <Stack.Navigator>
-    <Stack.Screen
-      name="Projects"
-      component={ProjectsContainer}
-      options={{
-        ...removeBottomBorder,
-        ...blankHeaderTitle
-      }}
-    />
-    <Stack.Screen
-      name="ProjectDetails"
-      component={ProjectDetailsContainer}
-      options={{
-        ...blankHeaderTitle,
-        ...removeBottomBorder,
-        ...showHeader
-      }}
-    />
-  </Stack.Navigator>
-);
-
-export default ProjectsStackNavigator;
diff --git a/tests/unit/components/ProjectDetails/ProjectDetails.test.js b/tests/unit/components/ProjectDetails/ProjectDetails.test.js
index c4f98250d..62ab08843 100644
--- a/tests/unit/components/ProjectDetails/ProjectDetails.test.js
+++ b/tests/unit/components/ProjectDetails/ProjectDetails.test.js
@@ -1,4 +1,5 @@
 import { screen } from "@testing-library/react-native";
+import ProjectDetails from "components/ProjectDetails/ProjectDetails";
 import ProjectDetailsContainer from "components/ProjectDetails/ProjectDetailsContainer";
 import React from "react";
 import factory from "tests/factory";
@@ -50,4 +51,16 @@ describe( "ProjectDetails", ( ) => {
       screen.getByTestId( "ProjectDetails.projectIcon" ).props.source
     ).toStrictEqual( { uri: mockProject.icon } );
   } );
+
+  it( "renders when project has no description", ( ) => {
+    renderComponent(
+      <ProjectDetails
+        project={{
+          ...mockProject,
+          description: null
+        }}
+      />
+    );
+    expect( screen.getByText( mockProject.title ) ).toBeTruthy( );
+  } );
 } );