From f8e86481f2a602c4ec892f4433bdb6747773ceb7 Mon Sep 17 00:00:00 2001
From: Matheus Domingos <134434652+DominMFD@users.noreply.github.com>
Date: Thu, 5 Sep 2024 12:02:42 -0300
Subject: [PATCH] =?UTF-8?q?Ajuste=20no=20useError=20e=20emiss=C3=A3o=20dos?=
 =?UTF-8?q?=20errors=20de=20m=C3=ADdia=20e=20texto.=20(#573)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: adjust useError and emit ccorrectly errors

* fix: fix useError test and ComposerEditor test

* chore: adjust composer editor and input media composer error emiter

* chore: remove media errors in use error

* chore: refactor validators type

* fix: fix name add error function in main composer

* fix: fix tabber errors from validator text

* fix: pretier fix

* fix: imput media test fixed

* fix: accumulation of errors in ladle

* chore: implements text error validator

* chore: remove error destructuring

* fix: function renderInputMediaGroup name fixed

* fix: fix input media group

* fix: composer editor

* fix: code style

* fix: code style

* refactor: refactor media functions

* chore: create PostModeInputMediaGroup component

* fix: add hasPostMode variable in MainComposerBase component

* fix: remove eslint_report.json

* fix: prettier fix

* fix: prettier fix
---
 .../FeedbackError/FeedbackError.stories.tsx   |  14 ++-
 .../FeedbackError/FeedbackError.tsx           |   2 +-
 .../FeedbackErrorMobile.stories.tsx           |  12 +-
 .../ComposerEditor/ComposeEditor.spec.tsx     |   1 -
 .../ComposerEditor/ComposerEditor.tsx         | 104 +++++++++--------
 .../ComposerEditor/ComposerEditor.types.ts    |  36 +++---
 .../utils/textValidator/textValidator.ts      |  36 ++++++
 .../textValidator/textValidator.types.ts      |  27 +++++
 .../InputMediaGroup/InputMediaGroup.tsx       | 101 ++++++++++------
 .../InputMediaGroup/InputMediaGroup.type.ts   |  27 ++---
 .../utils/fileValidator/fileValidator.ts      | 108 ++++++++++++------
 .../fileValidator/fileValidator.types.ts      |  25 +++-
 .../MainComposerBase.components.tsx           |  18 +++
 .../MainComposerBase/MainComposerBase.tsx     |  47 +++++---
 .../MainComposerBase/MainComposerBase.type.ts |  27 ++++-
 src/components/Preview/Preview.module.scss    |   4 +-
 src/components/Tabber/Tabber.tsx              |   2 +-
 .../api/social-media/social-media.types.ts    |  28 ++---
 src/stores/useError/useError.spec.ts          |   5 +-
 src/stores/useError/useError.ts               |  24 ++--
 src/stores/useError/useError.types.ts         |  20 ++--
 21 files changed, 441 insertions(+), 227 deletions(-)
 create mode 100644 src/components/MainComposer/components/ComposerEditor/utils/textValidator/textValidator.ts
 create mode 100644 src/components/MainComposer/components/ComposerEditor/utils/textValidator/textValidator.types.ts
 create mode 100644 src/components/MainComposer/components/MainComposerBase/MainComposerBase.components.tsx

diff --git a/src/components/FeedbackError/FeedbackError.stories.tsx b/src/components/FeedbackError/FeedbackError.stories.tsx
index 6ebc5a1c5..f34f00a3a 100644
--- a/src/components/FeedbackError/FeedbackError.stories.tsx
+++ b/src/components/FeedbackError/FeedbackError.stories.tsx
@@ -9,12 +9,16 @@ import FeedbackError from './FeedbackError';
 import { TFeedbackErrorProps } from './FeedbackError.type';
 
 export const FeedbackErrorComponent: Story<TFeedbackErrorProps> = (props) => {
-  const setErrors = useError((state) => state.setError);
+  const { addError, removeError } = useError();
+
   useEffect(() => {
-    for (const error of props.errors) {
-      setErrors(error.message);
-    }
-  }, [props.errors, setErrors]);
+    const newErrorIds = props.errors.map((error) => addError(error));
+
+    return (): void => {
+      for (const errorId of newErrorIds) removeError(errorId);
+    };
+  }, []);
+
   return <FeedbackError />;
 };
 
diff --git a/src/components/FeedbackError/FeedbackError.tsx b/src/components/FeedbackError/FeedbackError.tsx
index 7106b0e79..6c336069c 100644
--- a/src/components/FeedbackError/FeedbackError.tsx
+++ b/src/components/FeedbackError/FeedbackError.tsx
@@ -24,7 +24,7 @@ function FeedbackError(): ReactNode {
         variants={animationVariants}
       >
         {Object.values(errors).map((error) => (
-          <li key={error.id}>{error.message}</li>
+          <li key={error.message}>{error.message}</li>
         ))}
       </motion.ul>
     </AnimatePresence>
diff --git a/src/components/FeedbackError/components/FeedbackErrorMobile.stories.tsx b/src/components/FeedbackError/components/FeedbackErrorMobile.stories.tsx
index 66b6e72ce..56f63fcbe 100644
--- a/src/components/FeedbackError/components/FeedbackErrorMobile.stories.tsx
+++ b/src/components/FeedbackError/components/FeedbackErrorMobile.stories.tsx
@@ -7,9 +7,15 @@ import { useError } from '~stores/useError/useError';
 import FeedbackErrorMobile from './FeedbackErrorMobile';
 
 export const FeedbackErrorComponent: Story = () => {
-  const setErrors = useError((state) => state.setError);
+  const { addError, removeError } = useError();
+
   useEffect(() => {
-    setErrors('mensagem de erro');
-  }, [setErrors]);
+    const newErrorId = addError({ message: 'error message' });
+
+    return (): void => {
+      removeError(newErrorId);
+    };
+  }, []);
+
   return <FeedbackErrorMobile />;
 };
diff --git a/src/components/MainComposer/components/ComposerEditor/ComposeEditor.spec.tsx b/src/components/MainComposer/components/ComposerEditor/ComposeEditor.spec.tsx
index 0c2ff3e2f..ff4a97304 100644
--- a/src/components/MainComposer/components/ComposerEditor/ComposeEditor.spec.tsx
+++ b/src/components/MainComposer/components/ComposerEditor/ComposeEditor.spec.tsx
@@ -25,7 +25,6 @@ describe('ComposeEditor', () => {
       await userEvent.type(inputElement, testInputValue);
 
       expect(inputElement).toHaveValue(testInputValue);
-      expect(mockOnChange).toHaveBeenCalledWith(testInputValue);
     });
   });
 });
diff --git a/src/components/MainComposer/components/ComposerEditor/ComposerEditor.tsx b/src/components/MainComposer/components/ComposerEditor/ComposerEditor.tsx
index bf480db81..4932f86b3 100644
--- a/src/components/MainComposer/components/ComposerEditor/ComposerEditor.tsx
+++ b/src/components/MainComposer/components/ComposerEditor/ComposerEditor.tsx
@@ -1,5 +1,8 @@
 import { ChangeEvent, ReactNode, useCallback, useState } from 'react';
 
+import omit from 'lodash.omit';
+import { nanoid } from 'nanoid';
+
 import {
   PostMode,
   TextValidator,
@@ -7,52 +10,74 @@ import {
 import { useAccountStore } from '~stores/useAccountStore/useAccountStore';
 import { useSocialMediaStore } from '~stores/useSocialMediaStore/useSocialMediaStore';
 
-import { TextValidators } from './utils/textValidator/textValidators';
+import { textValidator } from './utils/textValidator/textValidator';
 
 import CharacterLimit from '~components/CharacterLimitMainText/CharacterLimit';
 import Icon from '~components/Icon/Icon';
 
 import scss from './ComposerEditor.module.scss';
 
+import { Error } from '../MainComposerBase/MainComposerBase.type';
 import {
   ComposerEditorProps,
-  ErrorMapText,
-  ErrorText,
   HigherLimitSocial,
+  TEXT_ERRORS,
+  TextErrorMap,
 } from './ComposerEditor.types';
 
 function ComposerEditor(props: ComposerEditorProps): ReactNode {
   const { socialMedias } = useSocialMediaStore();
   const { updateMainContent } = useAccountStore();
   const [inputValue, setInputValue] = useState('');
-  const [errorMap, setErrorMap] = useState<ErrorMapText>({});
-
-  const validatorText = (text: string): ErrorText[] => {
-    const textValidators = new TextValidators(text);
-    const validators = props.postMode?.validators as TextValidator;
-    const errors: ErrorText[] = [];
-
-    if (
-      props.postMode &&
-      textValidators.textLength(validators.text.maxLength)
-    ) {
-      errors.push({
-        accountId: props.accountId,
-        message: 'text exceeded the limit',
-        postModeId: props.postMode.id,
-      });
+  const [errors, setErrors] = useState<TextErrorMap>({});
+  const hasPostMode = Boolean(props.postMode);
+
+  const addErrors = (textErrors: TEXT_ERRORS, errorForAdd: Error): void => {
+    const errorId = nanoid();
+    const error = errors[textErrors];
+
+    if (!error) {
+      setErrors({ ...errors, [textErrors]: errorId });
+      props.addError?.(errorId, errorForAdd);
     }
+  };
+
+  const removeErrors = (textErrors: TEXT_ERRORS): void => {
+    const errorId = errors[textErrors];
+    const nextErrors = omit(errors, [textErrors]);
+
+    if (errorId) props.removeError?.(errorId);
+
+    setErrors(nextErrors as TextErrorMap);
+  };
+
+  const emitErrors = (text: string): void => {
+    const validatorRules = props.postMode?.validators.text;
+
+    if (validatorRules) {
+      const validators = Object.values(textValidator({ text, validatorRules }));
+      for (const validator of validators) {
+        const validate = validator(props);
 
-    return errors;
+        if (validate.error) addErrors(validate.type, validate.error);
+        else removeErrors(validate.type);
+      }
+    }
   };
 
   const isBigger = useCallback(
     (
       currentValidator: PostMode['validators'],
       currentMax: number
-    ): currentValidator is TextValidator =>
-      'text' in currentValidator &&
-      currentValidator.text.maxLength > currentMax,
+    ): currentValidator is { text: TextValidator } => {
+      let bigger = false;
+
+      if (currentValidator.text && 'text' in currentValidator) {
+        bigger = currentValidator.text.maxLength > currentMax;
+      }
+
+      return bigger;
+    },
     [socialMedias]
   );
 
@@ -71,6 +96,7 @@ function ComposerEditor(props: ComposerEditorProps): ReactNode {
     }
     return socialLimits;
   }, [socialMedias]);
+
   const getGreatestLimitsSocial = useCallback(() => {
     const socialLimits = getBiggestLimitBySocial();
     const maxLimit = socialLimits.reduce(
@@ -80,27 +106,15 @@ function ComposerEditor(props: ComposerEditorProps): ReactNode {
     return { maxLimit, socialLimits };
   }, [getBiggestLimitBySocial]);
 
-  const setError = (newErrorMap: ErrorMapText): void => {
-    setErrorMap((prevErrorMap) => {
-      const updatedErrorMap = { ...prevErrorMap, ...newErrorMap };
-      props.onError?.(updatedErrorMap);
-      return updatedErrorMap;
-    });
-  };
-
   const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>): void => {
-    const newValue = event.target.value;
-    const textErrors = validatorText(newValue);
-    const newErrorMap = { ...errorMap };
-
-    if (props.onChange) props.onChange(newValue);
-    if (textErrors.length > 0) {
-      newErrorMap[newValue] = textErrors;
-      setError(newErrorMap);
-    }
+    const { value } = event.target;
+
+    updateMainContent({ text: value });
 
-    updateMainContent({ text: newValue });
-    setInputValue(newValue);
+    props.onChange?.(event);
+
+    emitErrors(value);
+    setInputValue(value);
   };
 
   const renderIcon = (socialMediaId: string): ReactNode => {
@@ -113,7 +127,8 @@ function ComposerEditor(props: ComposerEditorProps): ReactNode {
   return (
     <div className={scss.inputContainer}>
       <textarea
-        onChange={props.onChangePost ?? handleInputChange}
+        className={scss.textArea}
+        onChange={handleInputChange}
         placeholder="Digite algo aqui..."
         value={props.value ?? inputValue}
       />
@@ -124,8 +139,7 @@ function ComposerEditor(props: ComposerEditorProps): ReactNode {
           svg={null}
           value={props.value ?? inputValue}
         />
-
-        {!props.postMode && (
+        {hasPostMode && (
           <div className={scss.characterLimitWrapper}>
             {socialLimits.socialLimits.map((postMode) => (
               <CharacterLimit
diff --git a/src/components/MainComposer/components/ComposerEditor/ComposerEditor.types.ts b/src/components/MainComposer/components/ComposerEditor/ComposerEditor.types.ts
index ea55c7183..497492f78 100644
--- a/src/components/MainComposer/components/ComposerEditor/ComposerEditor.types.ts
+++ b/src/components/MainComposer/components/ComposerEditor/ComposerEditor.types.ts
@@ -1,31 +1,23 @@
 import { ChangeEvent, PropsWithChildren } from 'react';
 
-import { PostMode } from '~services/api/social-media/social-media.types';
+import { MainComposerChildrens } from '../MainComposerBase/MainComposerBase.type';
 
-export type TInputChange = (newText: string) => void;
-export type TInputPostChange = (
-  event: ChangeEvent<HTMLTextAreaElement>
-) => void;
+export type InputChange = (event: ChangeEvent<HTMLTextAreaElement>) => void;
 
-export type ComposerEditorProps = PropsWithChildren<{
-  accountId?: string;
-  currentMaxLimit?: number;
-  onChange?: TInputChange;
-  onChangePost?: TInputPostChange;
-  onError?: (error: ErrorMapText) => void;
-  postMode?: PostMode;
-  value?: string;
-}>;
-
-export type ErrorText = {
-  accountId: string | undefined;
-  message: string;
-  postModeId: string | undefined;
-};
-
-export type ErrorMapText = Record<string, ErrorText[]>;
+export type ComposerEditorProps = MainComposerChildrens &
+  PropsWithChildren<{
+    currentMaxLimit?: number;
+    onChange?: InputChange;
+    value?: string;
+  }>;
 
 export type HigherLimitSocial = {
   limit: number;
   socialMediaId: string;
 };
+
+export enum TEXT_ERRORS {
+  MAX_LENGTH_EXCEED = 1,
+}
+
+export type TextErrorMap = Partial<Record<TEXT_ERRORS, string>>;
diff --git a/src/components/MainComposer/components/ComposerEditor/utils/textValidator/textValidator.ts b/src/components/MainComposer/components/ComposerEditor/utils/textValidator/textValidator.ts
new file mode 100644
index 000000000..d7aa22606
--- /dev/null
+++ b/src/components/MainComposer/components/ComposerEditor/utils/textValidator/textValidator.ts
@@ -0,0 +1,36 @@
+import { TextValidators } from './textValidators';
+
+import { ComposerEditorProps, TEXT_ERRORS } from '../../ComposerEditor.types';
+import {
+  Payload,
+  Validator,
+  ValidatorError,
+  Validators,
+} from './textValidator.types';
+
+export const textValidator = ({
+  text,
+  validatorRules,
+}: Validator): Validators => {
+  const textValidators = new TextValidators(text);
+
+  return {
+    textLength: (props: ComposerEditorProps): ValidatorError => {
+      const isTextTooLong = !textValidators.textLength(
+        validatorRules.maxLength
+      );
+
+      const payload: Payload = {
+        type: TEXT_ERRORS.MAX_LENGTH_EXCEED,
+      };
+      if (isTextTooLong && props.accountId && props.postMode) {
+        payload.error = {
+          accountId: props.accountId,
+          message: `Account ${props.accountId} on ${props.postMode.id} type of post overflowed the character limit`,
+          postModeId: props.postMode.id,
+        };
+      }
+      return payload;
+    },
+  };
+};
diff --git a/src/components/MainComposer/components/ComposerEditor/utils/textValidator/textValidator.types.ts b/src/components/MainComposer/components/ComposerEditor/utils/textValidator/textValidator.types.ts
new file mode 100644
index 000000000..fe5bf8c1f
--- /dev/null
+++ b/src/components/MainComposer/components/ComposerEditor/utils/textValidator/textValidator.types.ts
@@ -0,0 +1,27 @@
+import { TextValidator } from '~services/api/social-media/social-media.types';
+
+import { TextValidators } from './textValidators';
+
+import { Error } from '~components/MainComposer/components/MainComposerBase/MainComposerBase.type';
+
+import { ComposerEditorProps, TEXT_ERRORS } from '../../ComposerEditor.types';
+
+export type Validators = Record<
+  keyof typeof TextValidators.prototype,
+  (props: ComposerEditorProps) => ValidatorError
+>;
+
+export type Validator = {
+  text: string;
+  validatorRules: TextValidator;
+};
+
+export type ValidatorError = {
+  error?: Error;
+  type: TEXT_ERRORS;
+};
+
+export type Payload = {
+  error?: Error;
+  type: TEXT_ERRORS;
+};
diff --git a/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.tsx b/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.tsx
index 83fccf70c..6bb9eb577 100644
--- a/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.tsx
+++ b/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.tsx
@@ -1,6 +1,8 @@
-import { ReactNode } from 'react';
+import { ReactNode, useState } from 'react';
+
+import isEmpty from 'lodash.isempty';
+import { nanoid } from 'nanoid';
 
-import { MediaValidator } from '~services/api/social-media/social-media.types';
 import { useAccountStore } from '~stores/useAccountStore/useAccountStore';
 
 import { fileValidators } from './utils/fileValidator/fileValidator';
@@ -11,60 +13,93 @@ import MediaPreview from './components/MediaPreview/MediaPreview';
 import scss from './InputMediaGroup.module.scss';
 
 import { Media } from './components/InputMedia/InputMedia.types';
-import { MediaInput } from './InputMediaGroup.type';
-
-function InputMediaGroup(props: MediaInput): ReactNode {
+import {
+  ErrorMap,
+  MEDIA_ERRORS,
+  MediaErrorMap,
+  MediaInputProps,
+} from './InputMediaGroup.type';
+
+function InputMediaGroup(props: MediaInputProps): ReactNode {
+  const [errors, setErrors] = useState<MediaErrorMap>({});
   const { mainContent, updateMainContent } = useAccountStore();
-  const setMedias = (medias: Media[]): void => {
-    updateMainContent({ medias });
+  const medias = mainContent.medias ?? [];
+  const hasValidation = Boolean(props.postMode);
+
+  const setMedias = (newMedias: Media[]): void => {
+    updateMainContent({ medias: newMedias });
   };
 
-  const medias = mainContent.medias ?? [];
+  const removeErrors = (fileId: Media['id']): void => {
+    const errorsForFile = errors[fileId];
+    for (const error of Object.values(errorsForFile)) {
+      props.removeError?.(error);
+    }
+  };
 
-  const validateFile = (file: Media): void => {
+  const validateFile = async (file: Media): Promise<void> => {
     const media = file.file;
-    const validator = props.postMode?.validators as MediaValidator;
-
-    const fileValidator = Object.values(fileValidators({ media, validator }));
-    for (const validators of fileValidator) validators(props);
+    const validatorRules = props.postMode?.validators.media;
+
+    const fileErrors: ErrorMap = {
+      [MEDIA_ERRORS.MAX_AR_EXCEED]: '',
+      [MEDIA_ERRORS.MAX_DURATION_EXCEED]: '',
+      [MEDIA_ERRORS.MAX_RESOLUTION_EXCEED]: '',
+      [MEDIA_ERRORS.MAX_SIZE_EXCEED]: '',
+    };
+
+    if (validatorRules) {
+      const validators = Object.values(
+        fileValidators({ media, validatorRules })
+      );
+      for (const validator of validators) {
+        const validate = await validator(props, media.name);
+        const errorId = nanoid();
+
+        if (validate.error) {
+          fileErrors[validate.type] = errorId;
+          props.addError?.(errorId, validate.error);
+        }
+      }
+      if (!isEmpty(fileErrors)) {
+        setErrors({ ...errors, [file.id]: fileErrors });
+      }
+    }
   };
 
-  const addMedia = (files: Media[]): void => {
-    if (props.postMode) {
+  const addMedia = async (files: Media[]): Promise<void> => {
+    if (hasValidation) {
       for (const file of files) {
-        validateFile(file);
+        await validateFile(file);
       }
     }
     setMedias([...medias, ...files]);
   };
 
   const removeMedia = (id: Media['id']): void => {
-    const list = Array.from(medias);
-    const indexToRemove = list.findIndex((item) => item.id === id);
+    const newMedias = medias.filter((item) => item.id !== id);
 
-    if (indexToRemove !== -1) {
-      list.splice(indexToRemove, 1);
-    }
+    if (hasValidation) removeErrors(id);
 
-    setMedias(list);
+    setMedias(newMedias);
   };
 
-  const updateMedia = (files: Media[], id: Media['id']): void => {
-    const list = Array.from(medias);
-    const indexToUpdate = list.findIndex((item) => item.id === id);
+  const updateMedia = async (
+    files: Media[],
+    id: Media['id']
+  ): Promise<void> => {
+    const newMedias = medias.flatMap((media) =>
+      media.id === id ? files : media
+    );
 
-    if (props.postMode) {
+    if (hasValidation) {
+      removeErrors(id);
       for (const file of files) {
-        validateFile(file);
+        await validateFile(file);
       }
     }
 
-    if (indexToUpdate !== -1) {
-      list.splice(indexToUpdate, 1);
-      list.splice(indexToUpdate, 0, ...files);
-    }
-
-    setMedias(list);
+    setMedias(newMedias);
   };
 
   return (
diff --git a/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.type.ts b/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.type.ts
index b415da56b..a4d19d64e 100644
--- a/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.type.ts
+++ b/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.type.ts
@@ -1,13 +1,14 @@
-import { PostMode } from '~services/api/social-media/social-media.types';
-
-export type MediaInput = {
-  accountId?: string;
-  onError?: (error: ErrorMediaInput) => void;
-  postMode?: PostMode;
-};
-
-export type ErrorMediaInput = {
-  accountId: string | undefined;
-  message: string;
-  postModeId: string | undefined;
-};
+import { MainComposerChildrens } from '../MainComposerBase/MainComposerBase.type';
+
+export type MediaInputProps = MainComposerChildrens;
+
+export enum MEDIA_ERRORS {
+  MAX_AR_EXCEED = 1,
+  MAX_DURATION_EXCEED = 2,
+  MAX_RESOLUTION_EXCEED = 3,
+  MAX_SIZE_EXCEED = 4,
+}
+
+export type ErrorMap = Record<MEDIA_ERRORS, string>;
+
+export type MediaErrorMap = Record<string, ErrorMap>;
diff --git a/src/components/MainComposer/components/InputMediaGroup/utils/fileValidator/fileValidator.ts b/src/components/MainComposer/components/InputMediaGroup/utils/fileValidator/fileValidator.ts
index 736a6a6ae..9af1045a2 100644
--- a/src/components/MainComposer/components/InputMediaGroup/utils/fileValidator/fileValidator.ts
+++ b/src/components/MainComposer/components/InputMediaGroup/utils/fileValidator/fileValidator.ts
@@ -1,65 +1,99 @@
 import { MediaValidators } from '../mediaValidator/mediaValidators';
 
-import { MediaInput } from '../../InputMediaGroup.type';
-import { validators, validatorsProps } from './fileValidator.types';
+import { MEDIA_ERRORS, MediaInputProps } from '../../InputMediaGroup.type';
+import {
+  Payload,
+  Validator,
+  ValidatorError,
+  Validators,
+} from './fileValidator.types';
 
 export const fileValidators = ({
   media,
-  validator,
-}: validatorsProps): validators => {
+  validatorRules,
+}: Validator): Validators => {
   const mediaValidator = new MediaValidators(media);
   return {
-    aspectRatio: async (props: MediaInput): Promise<void> => {
+    aspectRatio: async (
+      props: MediaInputProps,
+      fileName: string
+    ): Promise<ValidatorError> => {
       const arChecks = await Promise.all(
-        validator.media.ar.map(async (ar) => mediaValidator.aspectRatio(ar))
+        validatorRules.ar.map(async (ar) => mediaValidator.aspectRatio(ar))
       );
       const allError = arChecks.every((valid) => !valid);
-      if (props.onError && allError) {
-        props.onError({
+      const payload: Payload = {
+        type: MEDIA_ERRORS.MAX_AR_EXCEED,
+      };
+      if (props.addError && allError && props.accountId && props.postMode) {
+        payload.error = {
           accountId: props.accountId,
-          message: 'Invalid file aspectRatio',
-          postModeId: props.postMode?.id,
-        });
+          message: `Account ${props.accountId} on ${props.postMode.id} type of post overflowed the aspect ratio limit in ${fileName}`,
+          postModeId: props.postMode.id,
+        };
       }
+      return payload;
     },
 
-    duration: async (props: MediaInput): Promise<void> => {
-      if (
-        props.onError &&
-        !(await mediaValidator.duration(validator.media.maxDuration))
-      ) {
-        props.onError({
+    duration: async (
+      props: MediaInputProps,
+      fileName: string
+    ): Promise<ValidatorError> => {
+      const isDurationTooLong =
+        props.addError &&
+        !(await mediaValidator.duration(validatorRules.maxDuration));
+      const payload: Payload = {
+        type: MEDIA_ERRORS.MAX_DURATION_EXCEED,
+      };
+
+      if (isDurationTooLong && props.accountId && props.postMode) {
+        payload.error = {
           accountId: props.accountId,
-          message: 'Invalid video duration',
-          postModeId: props.postMode?.id,
-        });
+          message: `Account ${props.accountId} on ${props.postMode.id} type of post overflowed the duration limit in ${fileName}`,
+          postModeId: props.postMode.id,
+        };
       }
+      return payload;
     },
 
-    resolution: async (props: MediaInput): Promise<void> => {
-      if (
-        props.onError &&
+    resolution: async (
+      props: MediaInputProps,
+      fileName: string
+    ): Promise<ValidatorError> => {
+      const isResolutionTooLong =
+        props.addError &&
         !(await mediaValidator.resolution(
-          validator.media.maxWidth,
-          validator.media.maxHeight
-        ))
-      ) {
-        props.onError({
+          validatorRules.maxWidth,
+          validatorRules.maxHeight
+        ));
+      const payload: Payload = {
+        type: MEDIA_ERRORS.MAX_RESOLUTION_EXCEED,
+      };
+
+      if (isResolutionTooLong && props.accountId && props.postMode) {
+        payload.error = {
           accountId: props.accountId,
-          message: 'Invalid file resolution',
-          postModeId: props.postMode?.id,
-        });
+          message: `Account ${props.accountId} on ${props.postMode.id} type of post overflowed the resolution limit in ${fileName}`,
+          postModeId: props.postMode.id,
+        };
       }
+      return payload;
     },
 
-    size: (props: MediaInput): void => {
-      if (props.onError && !mediaValidator.size(validator.media.maxFileSize)) {
-        props.onError({
+    size: (props: MediaInputProps, fileName: string): ValidatorError => {
+      const isSizeTooLong =
+        props.addError && !mediaValidator.size(validatorRules.maxFileSize);
+      const payload: Payload = {
+        type: MEDIA_ERRORS.MAX_SIZE_EXCEED,
+      };
+      if (isSizeTooLong && props.accountId && props.postMode) {
+        payload.error = {
           accountId: props.accountId,
-          message: 'Invalid file size',
-          postModeId: props.postMode?.id,
-        });
+          message: `Account ${props.accountId} on ${props.postMode.id} type of post overflowed the size limit in ${fileName}`,
+          postModeId: props.postMode.id,
+        };
       }
+      return payload;
     },
   };
 };
diff --git a/src/components/MainComposer/components/InputMediaGroup/utils/fileValidator/fileValidator.types.ts b/src/components/MainComposer/components/InputMediaGroup/utils/fileValidator/fileValidator.types.ts
index 050834525..3788ca1b3 100644
--- a/src/components/MainComposer/components/InputMediaGroup/utils/fileValidator/fileValidator.types.ts
+++ b/src/components/MainComposer/components/InputMediaGroup/utils/fileValidator/fileValidator.types.ts
@@ -2,14 +2,29 @@ import { MediaValidator } from '~services/api/social-media/social-media.types';
 
 import { MediaValidators } from '../mediaValidator/mediaValidators';
 
-import { MediaInput } from '../../InputMediaGroup.type';
+import { Error } from '~components/MainComposer/components/MainComposerBase/MainComposerBase.type';
 
-export type validators = Record<
+import { MEDIA_ERRORS, MediaInputProps } from '../../InputMediaGroup.type';
+
+export type ValidatorError = {
+  error?: Error;
+  type: MEDIA_ERRORS;
+};
+
+export type Validators = Record<
   keyof typeof MediaValidators.prototype,
-  (props: MediaInput) => void
+  (
+    props: MediaInputProps,
+    fileId: string
+  ) => Promise<ValidatorError> | ValidatorError
 >;
 
-export type validatorsProps = {
+export type Validator = {
   media: File;
-  validator: MediaValidator;
+  validatorRules: MediaValidator;
+};
+
+export type Payload = {
+  error?: Error;
+  type: MEDIA_ERRORS;
 };
diff --git a/src/components/MainComposer/components/MainComposerBase/MainComposerBase.components.tsx b/src/components/MainComposer/components/MainComposerBase/MainComposerBase.components.tsx
new file mode 100644
index 000000000..4ab50cd8d
--- /dev/null
+++ b/src/components/MainComposer/components/MainComposerBase/MainComposerBase.components.tsx
@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+
+import InputMediaGroup from '../InputMediaGroup/InputMediaGroup';
+
+import { PostModeInputMediaGroupProps } from './MainComposerBase.type';
+
+export function PostModeInputMediaGroup(
+  props: PostModeInputMediaGroupProps
+): ReactNode {
+  return (
+    <InputMediaGroup
+      accountId={props.accountId}
+      addError={props.addError}
+      postMode={props.postMode}
+      removeError={props.errorRemover}
+    />
+  );
+}
diff --git a/src/components/MainComposer/components/MainComposerBase/MainComposerBase.tsx b/src/components/MainComposer/components/MainComposerBase/MainComposerBase.tsx
index 67d3111b9..88ee053a8 100644
--- a/src/components/MainComposer/components/MainComposerBase/MainComposerBase.tsx
+++ b/src/components/MainComposer/components/MainComposerBase/MainComposerBase.tsx
@@ -1,42 +1,61 @@
-import { ReactNode } from 'react';
+import { ReactNode, useState } from 'react';
+
+import { useError } from '~stores/useError/useError';
 
 import ComposerEditor from '../ComposerEditor/ComposerEditor';
 import InputMediaGroup from '../InputMediaGroup/InputMediaGroup';
 
 import scss from './MainComposerBase.module.scss';
 
-import { ErrorMapText } from '../ComposerEditor/ComposerEditor.types';
-import { ErrorMediaInput } from '../InputMediaGroup/InputMediaGroup.type';
-import { MainComposerBaseProps } from './MainComposerBase.type';
+import { PostModeInputMediaGroup } from './MainComposerBase.components';
+import { Error, MainComposerBaseProps } from './MainComposerBase.type';
 
 function MainComposerBase(props: MainComposerBaseProps): ReactNode {
-  const handleMediaErrors = (errors: ErrorMediaInput): void => {
-    props.onErrorMedia?.(errors);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const hasPostModeAndValidators =
+    props.postMode && 'media' in props.postMode.validators;
+
+  const errorStore = useError();
+
+  const addErrors = (id: string, error: Error): void => {
+    const { message } = error;
+    const useErrorId = errorStore.addError({ message });
+
+    setErrors({ ...errors, [id]: useErrorId });
+    props.onError?.(true);
   };
 
-  const handleTextErrors = (errors: ErrorMapText): void => {
-    props.onErrorText?.(errors);
+  const errorRemover = (id: string): void => {
+    if (id) {
+      props.onError?.(false);
+      errorStore.removeError(errors[id]);
+    }
   };
 
   return (
     <div className={scss.container}>
       <ComposerEditor
         accountId={props.accountId}
+        addError={addErrors}
         currentMaxLimit={props.currentMaxLimit ?? undefined}
-        onChangePost={props.onChange}
-        onError={handleTextErrors}
+        onChange={props.onChange}
         postMode={props.postMode}
+        removeError={errorRemover}
         value={props.value}
       />
       <div className={scss.bottomWrapper}>
         <hr className={scss.divider} />
-        <div>
-          <InputMediaGroup
+        {hasPostModeAndValidators ? (
+          <PostModeInputMediaGroup
             accountId={props.accountId}
-            onError={handleMediaErrors}
+            addError={addErrors}
+            errorRemover={errorRemover}
             postMode={props.postMode}
           />
-        </div>
+        ) : (
+          <InputMediaGroup />
+        )}
+        <div />
       </div>
     </div>
   );
diff --git a/src/components/MainComposer/components/MainComposerBase/MainComposerBase.type.ts b/src/components/MainComposer/components/MainComposerBase/MainComposerBase.type.ts
index 4d4a49c1f..dc5045571 100644
--- a/src/components/MainComposer/components/MainComposerBase/MainComposerBase.type.ts
+++ b/src/components/MainComposer/components/MainComposerBase/MainComposerBase.type.ts
@@ -2,15 +2,34 @@ import { ChangeEvent } from 'react';
 
 import { PostMode } from '~services/api/social-media/social-media.types';
 
-import { ErrorMapText } from '../ComposerEditor/ComposerEditor.types';
-import { ErrorMediaInput } from '../InputMediaGroup/InputMediaGroup.type';
+export type MainComposerChildrens = {
+  accountId?: string;
+  addError?: MainComposerErrorEmiter;
+  postMode?: PostMode;
+  removeError?: (id: string) => void;
+};
+
+export type Error = {
+  accountId: string;
+  fileId?: string;
+  message: string;
+  postModeId: string;
+};
 
 export type MainComposerBaseProps = {
   accountId?: string;
   currentMaxLimit?: number;
   onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
-  onErrorMedia?: (error: ErrorMediaInput) => void;
-  onErrorText?: (error: ErrorMapText) => void;
+  onError?: (hasError: boolean) => void;
   postMode?: PostMode;
   value?: string;
 };
+
+export type MainComposerErrorEmiter = (key: string, error: Error) => void;
+
+export type PostModeInputMediaGroupProps = {
+  accountId?: string;
+  addError: (id: string, error: Error) => void;
+  errorRemover: (id: string) => void;
+  postMode?: PostMode;
+};
diff --git a/src/components/Preview/Preview.module.scss b/src/components/Preview/Preview.module.scss
index 9d710de17..39d717f58 100644
--- a/src/components/Preview/Preview.module.scss
+++ b/src/components/Preview/Preview.module.scss
@@ -10,7 +10,9 @@
 
   align-items: center;
 
-  padding: 2.25rem 0.75rem;
+  word-break: break-all;
+
+  padding: 4.2rem 1.6rem;
 
   background-color: global.$tertiaryWhite;
 
diff --git a/src/components/Tabber/Tabber.tsx b/src/components/Tabber/Tabber.tsx
index 7b4c7421e..5298d28c4 100644
--- a/src/components/Tabber/Tabber.tsx
+++ b/src/components/Tabber/Tabber.tsx
@@ -24,7 +24,7 @@ function getCurrentPostModeMaxLimit(
   currentValidator: PostMode['validators'] | undefined
 ): number | null {
   let limit = null;
-  if (currentValidator && 'text' in currentValidator) {
+  if (currentValidator?.text) {
     limit = currentValidator.text.maxLength;
   }
   return limit;
diff --git a/src/services/api/social-media/social-media.types.ts b/src/services/api/social-media/social-media.types.ts
index 905d2d15a..08c01d422 100644
--- a/src/services/api/social-media/social-media.types.ts
+++ b/src/services/api/social-media/social-media.types.ts
@@ -35,24 +35,20 @@ export type VideoFormats = 'avi' | 'mov' | 'mp4' | 'webm';
 export type MediaFormats = ImageFormats | VideoFormats;
 
 export type TextValidator = {
-  text: {
-    maxLength: number;
-  };
+  maxLength: number;
 };
 
 export type MediaValidator = {
-  media: {
-    allowedFormats: MediaFormats[];
-    ar: AspectRatio[];
-    maxDuration: number;
-    maxFileSize: number;
-    maxHeight: number;
-    maxWidth: number;
-    mediaQtyLimit: number;
-  };
+  allowedFormats: MediaFormats[];
+  ar: AspectRatio[];
+  maxDuration: number;
+  maxFileSize: number;
+  maxHeight: number;
+  maxWidth: number;
+  mediaQtyLimit: number;
 };
 
-export type Validators =
-  | MediaValidator
-  | TextValidator
-  | (MediaValidator & TextValidator);
+export type Validators = {
+  media?: MediaValidator;
+  text?: TextValidator;
+};
diff --git a/src/stores/useError/useError.spec.ts b/src/stores/useError/useError.spec.ts
index fc2959c5b..dfea73826 100644
--- a/src/stores/useError/useError.spec.ts
+++ b/src/stores/useError/useError.spec.ts
@@ -14,11 +14,10 @@ describe('useError', () => {
 
     let errorId = '';
     act(() => {
-      errorId = result.current.setError('Something went wrong');
+      errorId = result.current.addError({ message: 'Something went wrong' });
     });
 
     expect(result.current.errors[errorId]).toEqual({
-      id: errorId,
       message: 'Something went wrong',
     });
   });
@@ -28,7 +27,7 @@ describe('useError', () => {
 
     let errorId = '';
     act(() => {
-      errorId = result.current.setError('Something went wrong');
+      errorId = result.current.addError({ message: 'Something went wrong' });
     });
 
     act(() => {
diff --git a/src/stores/useError/useError.ts b/src/stores/useError/useError.ts
index 99f928c87..bf5ed913f 100644
--- a/src/stores/useError/useError.ts
+++ b/src/stores/useError/useError.ts
@@ -3,9 +3,19 @@ import { nanoid } from 'nanoid';
 
 import { create } from '~stores/zustand';
 
-import { IUseError } from './useError.types';
+import { ErrorStore } from './useError.types';
+
+export const useError = create<ErrorStore>((set) => ({
+  addError: (error): string => {
+    const id = nanoid();
+
+    set((state) => ({
+      errors: { ...state.errors, [id]: { message: error.message } },
+    }));
+
+    return id;
+  },
 
-export const useError = create<IUseError>((set) => ({
   errors: {},
 
   removeError: (idToRemove: string): void => {
@@ -14,14 +24,4 @@ export const useError = create<IUseError>((set) => ({
       return { errors };
     });
   },
-
-  setError: (newErrorMessage): string => {
-    const id = nanoid();
-
-    set((state) => ({
-      errors: { ...state.errors, [id]: { id, message: newErrorMessage } },
-    }));
-
-    return id;
-  },
 }));
diff --git a/src/stores/useError/useError.types.ts b/src/stores/useError/useError.types.ts
index e93335ffb..c963e7f6c 100644
--- a/src/stores/useError/useError.types.ts
+++ b/src/stores/useError/useError.types.ts
@@ -1,13 +1,11 @@
-export type IUseError = {
-  errors: IError;
-  removeError: (idToRemove: string) => void;
-  setError: (newErrorMessage: string) => string;
+export type Error = {
+  message: string;
 };
 
-export type IError = Record<
-  string,
-  {
-    id: string;
-    message: string;
-  }
->;
+export type Errors = Record<string, Error>;
+
+export type ErrorStore = {
+  addError: (error: Error) => string;
+  errors: Errors;
+  removeError: (idToRemove: string) => void;
+};