MHP-3132-Render-Reported-Stories-and-Comments

.eslintrc

@@ -54,12 +54,6 @@
         "skipComments": true
       }
     ],
-    "complexity": [
-      2,
-      {
-        "max": 10
-      }
-    ],
     "no-return-await": 2,
     "quotes": [
       2,

WIP.md

@@ -43,8 +43,8 @@ Components to convert to TS+Hooks
 - ReminderButton
 - ReminderDateText
 - ReminderRepeatButtons
-- ReportCommentHeaderCard
-- ReportCommentLabel
+- ReportItemHeaderCard
+- ReportItemLabel
 - ShareSurveyMenu
 - SideMenu
 - StepDetailScreen

src/components/ReportCommentHeaderCard/__tests__/ReportCommentHeaderCard.tsx → src/components/ReportItemHeaderCard/__tests__/ReportItemHeaderCard.tsx

@@ -3,22 +3,22 @@ import { fireEvent } from 'react-native-testing-library';
 
 import { renderWithContext } from '../../../../testUtils';
 
-import ReportCommentHeaderCard from '..';
+import ReportItemHeaderCard from '..';
 
 const props = { count: 12, onPress: jest.fn() };
 it('renders correctly', () => {
-  renderWithContext(<ReportCommentHeaderCard {...props} />, {
+  renderWithContext(<ReportItemHeaderCard {...props} />, {
     noWrappers: true,
   }).snapshot();
 });
 
 describe('press event', () => {
   it('calls onPress', () => {
     const { getByTestId } = renderWithContext(
-      <ReportCommentHeaderCard {...props} />,
+      <ReportItemHeaderCard {...props} />,
       { noWrappers: true },
     );
-    fireEvent.press(getByTestId('ReportCommentHeaderCardButton'));
+    fireEvent.press(getByTestId('ReportItemHeaderCardButton'));
 
     expect(props.onPress).toHaveBeenCalled();
   });

src/components/ReportCommentHeaderCard/__tests__/__snapshots__/ReportCommentHeaderCard.tsx.snap → src/components/ReportItemHeaderCard/__tests__/__snapshots__/ReportItemHeaderCard.tsx.snap

@@ -33,7 +33,7 @@ exports[`renders correctly 1`] = `
       "shadowRadius": 2,
     }
   }
-  testID="ReportCommentHeaderCardButton"
+  testID="ReportItemHeaderCardButton"
 >
   <Text
     allowFontScaling={false}
@@ -81,7 +81,7 @@ exports[`renders correctly 1`] = `
       ]
     }
   >
-    12 new reported comments
+    12 New Reported Items
   </Text>
 </View>
 `;

src/components/ReportCommentHeaderCard/index.tsx → src/components/ReportItemHeaderCard/index.tsx

@@ -1,24 +1,24 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Text, Card, Icon } from '../../components/common';
+import { Text, Card, Icon } from '../common';
 
 import styles from './styles';
 
-interface ReportCommentHeaderCardProps {
+interface ReportItemHeaderCardProps {
   testID?: string;
   count: number;
   onPress: () => void;
 }
 
-export default function ReportCommentHeaderCard({
+export default function ReportItemHeaderCard({
   count,
   onPress,
-}: ReportCommentHeaderCardProps) {
+}: ReportItemHeaderCardProps) {
   const { t } = useTranslation();
   return (
     <Card
-      testID="ReportCommentHeaderCardButton"
+      testID="ReportItemHeaderCardButton"
       onPress={onPress}
       style={styles.card}
     >

src/components/ReportCommentLabel/__tests__/ReportCommentLabel.tsx → src/components/ReportItemLabel/__tests__/ReportItemLabel.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import { renderWithContext } from '../../../../testUtils';
 
-import ReportCommentLabel from '..';
+import ReportItemLabel from '..';
 
 it('render label', () => {
-  renderWithContext(<ReportCommentLabel label="Label" user="Test User" />, {
+  renderWithContext(<ReportItemLabel label="Label" user="Test User" />, {
     noWrappers: true,
   }).snapshot();
 });

src/components/ReportCommentLabel/index.tsx → src/components/ReportItemLabel/index.tsx

@@ -4,15 +4,12 @@ import { Flex, Text } from '../common';
 
 import styles from './styles';
 
-interface ReportCommentLabelProps {
+interface ReportItemLabelProps {
   label: string;
   user: string;
 }
 
-export default function ReportCommentLabel({
-  label,
-  user,
-}: ReportCommentLabelProps) {
+export default function ReportItemLabel({ label, user }: ReportItemLabelProps) {
   return (
     <Flex value={1}>
       <Text style={styles.label}>{label}:</Text>