Refactor tabber (#588)

* feat: move tabber to home components * feat: postmode changes current postmode * chore: n fiz nada * refactor: refactor post store * chore: post mode refactor * chore: use effect tabber * chore: create useSyncTabsWithPosts * refactor: refactor Post Modes component * chore: creat updateText in post store * refactor: refactor main composer base * fix: fixed tabber and zustand create * fix: remove usepoststore * feat: add usepoststore * fix: eslint errors * fix: updateMainContent parameters * fix: wilson ;) * fix: stores names * feat: remove testinhos * feat: move tabber to home components * feat: postmode changes current postmode * chore: n fiz nada * refactor: refactor post store * chore: post mode refactor * chore: use effect tabber * chore: create useSyncTabsWithPosts * refactor: refactor Post Modes component * chore: creat updateText in post store * refactor: refactor main composer base * fix: fixed tabber and zustand create * fix: remove usepoststore * feat: add usepoststore * fix: eslint errors * fix: updateMainContent parameters * fix: wilson ;) * fix: stores names * feat: remove testinhos * fix: remove accountstore unused and double _ * fix: lint * chore: create Tab component --------- Co-authored-by: juliaam <[email protected]>
devhatt · Sep 25, 2024 · a28d6c8 · a28d6c8
1 parent 687ad37
commit a28d6c8
Show file tree

Hide file tree

Showing 68 changed files with 895 additions and 755 deletions.
diff --git a/mock-api.json b/mock-api.json
@@ -14,7 +14,7 @@
           "data": {
             "text": "asdasd"
           },
-          "postModeId": "DISCORD_REELS_POST_ID",
+          "postModeId": "DISCORD_POST_POSTMODE_ID",
           "socialMediaId": "DISCORD_EXAMPLE_ID"
         },
         {
@@ -28,7 +28,7 @@
           "data": {
             "text": "456"
           },
-          "postModeId": "TWITTER_THREAD_POST_ID",
+          "postModeId": "TWITTER_POST_POSTMODE_ID",
           "socialMediaId": "TWITTER_EXAMPLE_ID"
         },
         {
@@ -173,7 +173,7 @@
           ]
         },
         {
-          "id": "DISCORD_REELS_POST_ID",
+          "id": "DISCORD_POST_POSTMODE_ID",
           "name": "TestePost",
           "previewComponent": "Teste",
           "validators": {
@@ -228,7 +228,7 @@
       "name": "Twitter",
       "postModes": [
         {
-          "id": "TWITTER_THREAD_POST_ID",
+          "id": "TWITTER_POST_POSTMODE_ID",
           "name": "TestePost",
           "previewComponent": "Teste",
           "validators": {

diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "lodash.first": "3.0.0",
     "lodash.groupby": "4.6.0",
     "lodash.isempty": "4.4.0",
+    "lodash.merge": "4.6.2",
     "lodash.omit": "4.5.0",
     "nanoid": "5.0.6",
     "normalize.css": "8.0.1",
@@ -81,6 +82,7 @@
     "@types/lodash.first": "3.0.9",
     "@types/lodash.groupby": "4.6.9",
     "@types/lodash.isempty": "4.4.9",
+    "@types/lodash.merge": "4.6.9",
     "@types/lodash.omit": "4.5.9",
     "@types/node": "20.11.19",
     "@types/react": "18.2.57",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/FeedbackError/FeedbackError.spec.tsx b/src/components/FeedbackError/FeedbackError.spec.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import * as useErrorHook from '~stores/useError/useError';
+import * as useErrorHook from '~stores/useErrorStore/useErrorStore';
 
 import FeedbackError from './FeedbackError';
 

diff --git a/src/components/FeedbackError/FeedbackError.stories.tsx b/src/components/FeedbackError/FeedbackError.stories.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 
 import type { Story } from '@ladle/react';
 
-import { useError } from '~stores/useError/useError';
+import { useError } from '~stores/useErrorStore/useErrorStore';
 
 import FeedbackError from './FeedbackError';
 

diff --git a/src/components/FeedbackError/FeedbackError.tsx b/src/components/FeedbackError/FeedbackError.tsx
@@ -2,7 +2,7 @@ import { ReactNode, useState } from 'react';
 
 import { AnimatePresence, motion } from 'framer-motion';
 
-import { useError } from '~stores/useError/useError';
+import { useError } from '~stores/useErrorStore/useErrorStore';
 
 import Icon from '~components/Icon/Icon';
 

diff --git a/src/components/FeedbackError/components/FeedbackErrorMobile.spec.tsx b/src/components/FeedbackError/components/FeedbackErrorMobile.spec.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 
-import * as useErrorHook from '~stores/useError/useError';
+import * as useErrorHook from '~stores/useErrorStore/useErrorStore';
 
 import FeedbackErrorMobile from './FeedbackErrorMobile';
 

diff --git a/src/components/FeedbackError/components/FeedbackErrorMobile.stories.tsx b/src/components/FeedbackError/components/FeedbackErrorMobile.stories.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 
 import type { Story } from '@ladle/react';
 
-import { useError } from '~stores/useError/useError';
+import { useError } from '~stores/useErrorStore/useErrorStore';
 
 import FeedbackErrorMobile from './FeedbackErrorMobile';
 

diff --git a/src/components/FeedbackError/components/FeedbackErrorMobile.tsx b/src/components/FeedbackError/components/FeedbackErrorMobile.tsx
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 import isEmpty from 'lodash.isempty';
 
-import { useError } from '~stores/useError/useError';
+import { useError } from '~stores/useErrorStore/useErrorStore';
 
 import Icon from '~components/Icon/Icon';
 

diff --git a/src/components/MainComposer/components/ComposerEditor/ComposerEditor.tsx b/src/components/MainComposer/components/ComposerEditor/ComposerEditor.tsx
@@ -7,7 +7,7 @@ import {
   PostMode,
   TextValidator,
 } from '~services/api/social-media/social-media.types.ts';
-import { useAccountStore } from '~stores/useAccountStore/useAccountStore';
+import { usePostStore } from '~stores/usePostStore/usePostStore';
 import { useSocialMediaStore } from '~stores/useSocialMediaStore/useSocialMediaStore';
 
 import { textValidator } from './utils/textValidator/textValidator';
@@ -27,10 +27,10 @@ import {
 
 function ComposerEditor(props: ComposerEditorProps): ReactNode {
   const { socialMedias } = useSocialMediaStore();
-  const { updateMainContent } = useAccountStore();
+  const { updateMainContent } = usePostStore();
   const [inputValue, setInputValue] = useState('');
   const [errors, setErrors] = useState<TextErrorMap>({});
-  const hasPostMode = Boolean(props.postMode);
+  const hasPostMode = Boolean(props.postModeId);
 
   const addErrors = (textErrors: TEXT_ERRORS, errorForAdd: Error): void => {
     const errorId = nanoid();
@@ -52,7 +52,12 @@ function ComposerEditor(props: ComposerEditorProps): ReactNode {
   };
 
   const emitErrors = (text: string): void => {
-    const validatorRules = props.postMode?.validators.text;
+    const postModes =
+      props.socialMediaId && socialMedias.get(props.socialMediaId)?.postModes;
+    const validatorRules =
+      postModes &&
+      postModes.find((postMode) => postMode.id === props.postModeId)?.validators
+        .text;
 
     if (validatorRules) {
       const validators = Object.values(textValidator({ text, validatorRules }));
@@ -99,11 +104,11 @@ function ComposerEditor(props: ComposerEditorProps): ReactNode {
 
   const getGreatestLimitsSocial = useCallback(() => {
     const socialLimits = getBiggestLimitBySocial();
-    const maxLimit = socialLimits.reduce(
+    const maxCharacters = socialLimits.reduce(
       (acc, current) => (acc > current.limit ? acc : current.limit),
       0
     );
-    return { maxLimit, socialLimits };
+    return { maxCharacters, socialLimits };
   }, [getBiggestLimitBySocial]);
 
   const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>): void => {
@@ -135,11 +140,11 @@ function ComposerEditor(props: ComposerEditorProps): ReactNode {
 
       <div className={scss.charactersLimitContainer}>
         <CharacterLimit
-          maxLength={props.currentMaxLimit ?? socialLimits.maxLimit}
+          maxLength={props.maxCharacters ?? socialLimits.maxCharacters}
           svg={null}
           value={props.value ?? inputValue}
         />
-        {hasPostMode && (
+        {!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
@@ -1,15 +1,14 @@
-import { ChangeEvent, PropsWithChildren } from 'react';
+import { ChangeEvent } from 'react';
 
 import { MainComposerChildrens } from '../MainComposerBase/MainComposerBase.type';
 
 export type InputChange = (event: ChangeEvent<HTMLTextAreaElement>) => void;
 
-export type ComposerEditorProps = MainComposerChildrens &
-  PropsWithChildren<{
-    currentMaxLimit?: number;
-    onChange?: InputChange;
-    value?: string;
-  }>;
+export type ComposerEditorProps = MainComposerChildrens & {
+  maxCharacters?: number;
+  onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  value?: string;
+};
 
 export type HigherLimitSocial = {
   limit: number;

diff --git a/src/components/MainComposer/components/ComposerEditor/utils/textValidator/textValidator.ts b/src/components/MainComposer/components/ComposerEditor/utils/textValidator/textValidator.ts
@@ -23,11 +23,11 @@ export const textValidator = ({
       const payload: Payload = {
         type: TEXT_ERRORS.MAX_LENGTH_EXCEED,
       };
-      if (isTextTooLong && props.accountId && props.postMode) {
+      if (isTextTooLong && props.accountId && props.postModeId) {
         payload.error = {
           accountId: props.accountId,
-          message: `Account ${props.accountId} on ${props.postMode.id} type of post overflowed the character limit`,
-          postModeId: props.postMode.id,
+          message: `Account ${props.accountId} on ${props.postModeId} type of post overflowed the character limit`,
+          postModeId: props.postModeId,
         };
       }
       return payload;

diff --git a/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.tsx b/src/components/MainComposer/components/InputMediaGroup/InputMediaGroup.tsx
@@ -3,7 +3,8 @@ import { ReactNode, useState } from 'react';
 import isEmpty from 'lodash.isempty';
 import { nanoid } from 'nanoid';
 
-import { useAccountStore } from '~stores/useAccountStore/useAccountStore';
+import { usePostStore } from '~stores/usePostStore/usePostStore';
+import { useSocialMediaStore } from '~stores/useSocialMediaStore/useSocialMediaStore';
 
 import { fileValidators } from './utils/fileValidator/fileValidator';
 
@@ -22,9 +23,10 @@ import {
 
 function InputMediaGroup(props: MediaInputProps): ReactNode {
   const [errors, setErrors] = useState<MediaErrorMap>({});
-  const { mainContent, updateMainContent } = useAccountStore();
+  const { mainContent, updateMainContent } = usePostStore();
+  const { socialMedias } = useSocialMediaStore();
   const medias = mainContent.medias ?? [];
-  const hasValidation = Boolean(props.postMode);
+  const hasValidation = Boolean(props.postModeId);
 
   const setMedias = (newMedias: Media[]): void => {
     updateMainContent({ medias: newMedias });
@@ -39,7 +41,12 @@ function InputMediaGroup(props: MediaInputProps): ReactNode {
 
   const validateFile = async (file: Media): Promise<void> => {
     const media = file.file;
-    const validatorRules = props.postMode?.validators.media;
+    const postModes =
+      props.socialMediaId && socialMedias.get(props.socialMediaId)?.postModes;
+    const validatorRules =
+      postModes &&
+      postModes.find((postMode) => postMode.id === props.postModeId)?.validators
+        .media;
 
     const fileErrors: ErrorMap = {
       [MEDIA_ERRORS.MAX_AR_EXCEED]: '',

diff --git a/src/components/MainComposer/components/InputMediaGroup/utils/fileValidator/fileValidator.ts b/src/components/MainComposer/components/InputMediaGroup/utils/fileValidator/fileValidator.ts
@@ -25,11 +25,11 @@ export const fileValidators = ({
       const payload: Payload = {
         type: MEDIA_ERRORS.MAX_AR_EXCEED,
       };
-      if (props.addError && allError && props.accountId && props.postMode) {
+      if (props.addError && allError && props.accountId && props.postModeId) {
         payload.error = {
           accountId: props.accountId,
-          message: `Account ${props.accountId} on ${props.postMode.id} type of post overflowed the aspect ratio limit in ${fileName}`,
-          postModeId: props.postMode.id,
+          message: `Account ${props.accountId} on ${props.postModeId} type of post overflowed the aspect ratio limit in ${fileName}`,
+          postModeId: props.postModeId,
         };
       }
       return payload;
@@ -46,11 +46,11 @@ export const fileValidators = ({
         type: MEDIA_ERRORS.MAX_DURATION_EXCEED,
       };
 
-      if (isDurationTooLong && props.accountId && props.postMode) {
+      if (isDurationTooLong && props.accountId && props.postModeId) {
         payload.error = {
           accountId: props.accountId,
-          message: `Account ${props.accountId} on ${props.postMode.id} type of post overflowed the duration limit in ${fileName}`,
-          postModeId: props.postMode.id,
+          message: `Account ${props.accountId} on ${props.postModeId} type of post overflowed the duration limit in ${fileName}`,
+          postModeId: props.postModeId,
         };
       }
       return payload;
@@ -70,11 +70,11 @@ export const fileValidators = ({
         type: MEDIA_ERRORS.MAX_RESOLUTION_EXCEED,
       };
 
-      if (isResolutionTooLong && props.accountId && props.postMode) {
+      if (isResolutionTooLong && props.accountId && props.postModeId) {
         payload.error = {
           accountId: props.accountId,
-          message: `Account ${props.accountId} on ${props.postMode.id} type of post overflowed the resolution limit in ${fileName}`,
-          postModeId: props.postMode.id,
+          message: `Account ${props.accountId} on ${props.postModeId} type of post overflowed the resolution limit in ${fileName}`,
+          postModeId: props.postModeId,
         };
       }
       return payload;
@@ -86,11 +86,11 @@ export const fileValidators = ({
       const payload: Payload = {
         type: MEDIA_ERRORS.MAX_SIZE_EXCEED,
       };
-      if (isSizeTooLong && props.accountId && props.postMode) {
+      if (isSizeTooLong && props.accountId && props.postModeId) {
         payload.error = {
           accountId: props.accountId,
-          message: `Account ${props.accountId} on ${props.postMode.id} type of post overflowed the size limit in ${fileName}`,
-          postModeId: props.postMode.id,
+          message: `Account ${props.accountId} on ${props.postModeId} type of post overflowed the size limit in ${fileName}`,
+          postModeId: props.postModeId,
         };
       }
       return payload;

diff --git a/src/components/MainComposer/components/MainComposerBase/MainComposerBase.components.tsx b/src/components/MainComposer/components/MainComposerBase/MainComposerBase.components.tsx
@@ -11,7 +11,7 @@ export function PostModeInputMediaGroup(
     <InputMediaGroup
       accountId={props.accountId}
       addError={props.addError}
-      postMode={props.postMode}
+      postModeId={props.postModeId}
       removeError={props.errorRemover}
     />
   );