fix(#345): Already reported post (#442)

## Already reported post

Closes: #345 

<!-- Add a description of the changes that this PR introduces and the
files that
are the most critical to review. -->

---

### Author Checklist

*All items are required. Please add a note to the item if the item is
not applicable and
please add links to any relevant follow up issues.*

- [x] included the correct [type
prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json)
in the PR title
- [ ] provided a link to the relevant issue or specification
- [ ] reviewed "Files changed" and left comments if necessary
- [ ] confirmed all CI checks have passed

### Reviewers Checklist

*All items are required. Please add a note if the item is not applicable
and please add
your handle next to the items reviewed if you only reviewed selected
items.*

- [ ] confirmed the correct [type
prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json)
in the PR title
- [ ] confirmed all author checklist items have been addressed

Author: Alessandro Mazzon

src/assets/locales/en/reportPost.json

@@ -8,6 +8,8 @@
   "report": "Report",
   "submit": "Submit",
   "message": "Add more details",
+  "already reported": "Already reported",
+  "already reported message": "You have already reported this post",
   "thanks for reporting": "Thank you for reporting",
-  "report success message": "Thank you for taking your time to report this post. In case the post violates our community guidelines, Butter will take care of handling the post."
+  "report success message": "In case the post violates our community guidelines, our support will take care of it"
 }

src/screens/Modals/ReportPost/index.tsx

@@ -20,6 +20,7 @@ import { reportSuccessIcon } from 'assets/images';
 import { isPostAlreadyReportedError } from 'types/error';
 import CommonStyles from 'config/theme/CommonStyles';
 import StyledSpinner from 'components/StyledSpinner';
+import useCustomToast from 'hooks/extended/useCustomToast';
 import useStyles from './useStyles';
 
 export type ReportPostParams = {
@@ -36,10 +37,10 @@ const ReportPost = () => {
   const { t } = useTranslation('reportPost');
   const styles = useStyles();
   const theme = useTheme();
-
   const { goBack } = useNavigation<NavProps['navigation']>();
   const { params } = useRoute<NavProps['route']>();
   const { post } = params;
+  const toast = useCustomToast();
 
   // -------------------------------------------------------------------------------------
   // --- Hooks
@@ -71,23 +72,23 @@ const ReportPost = () => {
   // -------------------------------------------------------------------------------------
 
   const [loading, setLoading] = useState<boolean>(false);
+  const [alreadyReported, setAlreadyReported] = useState(false);
   const onSubmit = useCallback(async () => {
     setLoading(true);
     const result = await reportPost(message, [selectedReport.value]);
     setLoading(false);
 
     if (result.isErr()) {
       if (isPostAlreadyReportedError(result.error)) {
-        // TODO: Do something here - Maybe even nothing?
+        setAlreadyReported(true);
         return;
       }
 
-      // TODO: Do something here -> waiting for design
-      console.log('Error while reporting a post', result.error.message);
+      toast.errorNoRetry(result.error.message);
     } else {
       setSuccessfulReport(true);
     }
-  }, [reportPost, message, selectedReport.value]);
+  }, [reportPost, message, selectedReport.value, toast]);
 
   const successfulReportComponent = useMemo(() => {
     return (
@@ -109,56 +110,92 @@ const ReportPost = () => {
     theme.spacing.m,
   ]);
 
+  const alreadyReportedComponent = useMemo(() => {
+    return (
+      <View style={styles.successfulReport}>
+        <FastImage source={reportSuccessIcon} style={styles.reportIcon} />
+        <Typography.H4 style={styles.headerText}>{t('already reported')}</Typography.H4>
+        <Spacer paddingBottom={theme.spacing.m} />
+        <Typography.Body5 style={styles.reportSuccessText}>
+          {t('already reported message')}
+        </Typography.Body5>
+      </View>
+    );
+  }, [
+    styles.headerText,
+    styles.reportIcon,
+    styles.reportSuccessText,
+    styles.successfulReport,
+    t,
+    theme.spacing.m,
+  ]);
+
+  const standardComponent = useMemo(() => {
+    return (
+      <>
+        <Typography.H4 style={styles.headerText}>{t('header')}</Typography.H4>
+        <Spacer paddingBottom={10} />
+
+        <View>
+          <CustomRadioGroup
+            values={reportingReasons}
+            selectedValue={selectedReport.index}
+            onSelect={(index, value) => setSelectedReport({ value: parseInt(value, 10), index })}
+          />
+
+          <Spacer paddingBottom={theme.spacing.s} />
+          <DTextInput
+            editable={true}
+            inputStyle={styles.messageInput}
+            value={message}
+            onChangeText={text => setMessage(text)}
+            style={styles.textInput}
+            multiline
+            placeholder={t('message')}
+          />
+        </View>
+        <Spacer paddingVertical={30}>
+          {loading ? (
+            <View style={styles.loadingView}>
+              <StyledSpinner />
+            </View>
+          ) : (
+            <Button
+              size={44}
+              backgroundColor={theme.colors.surfaceBlack}
+              textColor={theme.colors.white}
+              onPress={onSubmit}>
+              {t('submit')}
+            </Button>
+          )}
+        </Spacer>
+      </>
+    );
+  }, [
+    loading,
+    message,
+    onSubmit,
+    reportingReasons,
+    selectedReport.index,
+    styles.headerText,
+    styles.loadingView,
+    styles.messageInput,
+    styles.textInput,
+    t,
+    theme.colors.surfaceBlack,
+    theme.colors.white,
+    theme.spacing.s,
+  ]);
+
   return (
     <KeyboardAvoidingView
       style={CommonStyles.flex[1]}
       keyboardVerticalOffset={Platform.OS === 'ios' ? -30 : 0}
       behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
       <BottomUpModalWrapper goBack={goBack}>
-        {successfulReport ? (
-          successfulReportComponent
-        ) : (
-          <>
-            <Typography.H4 style={styles.headerText}>{t('header')}</Typography.H4>
-            <Spacer paddingBottom={10} />
-
-            <View>
-              <CustomRadioGroup
-                values={reportingReasons}
-                selectedValue={selectedReport.index}
-                onSelect={(index, value) =>
-                  setSelectedReport({ value: parseInt(value, 10), index })
-                }
-              />
-
-              <Spacer paddingBottom={theme.spacing.s} />
-              <DTextInput
-                editable={true}
-                inputStyle={styles.messageInput}
-                value={message}
-                onChangeText={text => setMessage(text)}
-                style={styles.textInput}
-                multiline
-                placeholder={t('message')}
-              />
-            </View>
-            <Spacer paddingVertical={30}>
-              {loading ? (
-                <View style={styles.loadingView}>
-                  <StyledSpinner />
-                </View>
-              ) : (
-                <Button
-                  size={44}
-                  backgroundColor={theme.colors.surfaceBlack}
-                  textColor={theme.colors.white}
-                  onPress={onSubmit}>
-                  {t('submit')}
-                </Button>
-              )}
-            </Spacer>
-          </>
-        )}
+        {successfulReport && successfulReportComponent}
+        {alreadyReported && alreadyReportedComponent}
+        {!successfulReport && !alreadyReported && standardComponent}
       </BottomUpModalWrapper>
     </KeyboardAvoidingView>
   );