Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor bug fix #566

Merged
merged 7 commits into from
Sep 14, 2021
Merged

Editor bug fix #566

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
395fb51
editor_bugFix
0shar0 Sep 10, 2021
d437bd2
editor_bugFix
0shar0 Sep 10, 2021
c00c3f7
edit mobile view
0shar0 Sep 11, 2021
2363a2b
edit text max lengths
0shar0 Sep 13, 2021
f76aa50
edit text max lengths
0shar0 Sep 13, 2021
a83d003
edit text max lengths
0shar0 Sep 13, 2021
56718ae
edit editors test
0shar0 Sep 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/Editor/PreviewInput.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,11 @@ test('component displays text length properly', () => {
onManuallyChanged={mockOnManuallyChanged}
/>,
);
expect(screen.getByText('Довжина тексту: 12 символів')).toBeInTheDocument();
expect(screen.getByText('Мінімальна довжина 50 символів. Довжина тексту: 12 символів')).toBeInTheDocument();
fireEvent.change(screen.getByText('initial text'), {
target: { value: 'test' },
});
expect(screen.getByText('Довжина тексту: 4 символи')).toBeInTheDocument();
expect(screen.getByText('Мінімальна довжина 50 символів. Довжина тексту: 4 символи')).toBeInTheDocument();
});

test('component calls callback after user input', () => {
Expand Down
15 changes: 6 additions & 9 deletions src/components/Editor/PreviewInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
import { useEffectExceptOnMount } from '../../old/lib/hooks/useEffectExceptOnMount';
import { MAX_PREVIEW_LENGTH } from '../../old/lib/constants/editors';
import { langTokens } from '../../locales/localizationInit';
import { useStyle } from '../../views/postCreation/RequiredFieldsStyle';

const truncText = (str: string) => {
return str.slice(0, MAX_PREVIEW_LENGTH);
Expand Down Expand Up @@ -36,15 +37,6 @@ const PreviewInput: React.FC<IPreviewInputProps> = ({
textFieldValue.length <= MAX_PREVIEW_LENGTH,
);

useEffectExceptOnMount(() => {
const setPreviewFromEditor = () => {
if (!initialWasManuallyChanged && editorTextContent) {
setTextFieldValue(truncText(editorTextContent));
}
};
setPreviewFromEditor();
}, [editorTextContent]);

useEffectExceptOnMount(() => {
setIsPreviewValid(textFieldValue.length <= MAX_PREVIEW_LENGTH);
onPreviewChange(truncText(textFieldValue));
Expand All @@ -61,6 +53,8 @@ const PreviewInput: React.FC<IPreviewInputProps> = ({
setTextFieldValue(value);
};

const classes = useStyle();

return (
<TextField
data-testid="preview-input"
Expand All @@ -72,6 +66,9 @@ const PreviewInput: React.FC<IPreviewInputProps> = ({
onChange={(e) => {
handleManualChange(e.target.value);
}}
InputLabelProps={{
classes: { formControl: classes.requiredAuthorField },
}}
InputProps={{
inputProps: {
style: {
Expand Down
16 changes: 8 additions & 8 deletions src/components/Editor/__snapshots__/PreviewInput.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ exports[`component renders properly with all props 1`] = `
style="width: 100%;"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl makeStyles-requiredAuthorField-8 MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
data-shrink="true"
>
Текст картки матеріалу
Expand All @@ -33,10 +33,10 @@ exports[`component renders properly with all props 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-5 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-9 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-7 PrivateNotchedOutline-legendNotched-8"
class="PrivateNotchedOutline-legendLabelled-11 PrivateNotchedOutline-legendNotched-12"
>
<span>
Текст картки матеріалу
Expand All @@ -47,7 +47,7 @@ exports[`component renders properly with all props 1`] = `
<p
class="MuiFormHelperText-root MuiFormHelperText-contained MuiFormHelperText-filled"
>
Довжина тексту: 20 символів
Мінімальна довжина 50 символів. Довжина тексту: 20 символів
</p>
</div>
`;
Expand All @@ -60,7 +60,7 @@ exports[`component renders properly with only required props 1`] = `
style="width: 100%;"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl makeStyles-requiredAuthorField-2 MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
data-shrink="true"
>
Текст картки матеріалу
Expand All @@ -85,10 +85,10 @@ exports[`component renders properly with only required props 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-3 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-3 PrivateNotchedOutline-legendNotched-4"
class="PrivateNotchedOutline-legendLabelled-5 PrivateNotchedOutline-legendNotched-6"
>
<span>
Текст картки матеріалу
Expand All @@ -99,7 +99,7 @@ exports[`component renders properly with only required props 1`] = `
<p
class="MuiFormHelperText-root MuiFormHelperText-contained MuiFormHelperText-filled"
>
Довжина тексту: 4 символи
Мінімальна довжина 50 символів. Довжина тексту: 4 символи
</p>
</div>
`;
8 changes: 4 additions & 4 deletions src/locales/uk/parts/editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,10 @@ export const editor = {
plain: 'Звичайний',
materialCardText: 'Текст картки матеріалу',
maxTextlength: 'Максимальна довжина тексту: {{count}} символів',
textLength: 'Довжина тексту: {{count}} символ',
textLength_0: 'Довжина тексту: {{count}} символ',
textLength_1: 'Довжина тексту: {{count}} символи',
textLength_2: 'Довжина тексту: {{count}} символів',
textLength: 'Мінімальна довжина 50 символів. Довжина тексту: {{count}} символ',
textLength_0: 'Мінімальна довжина 50 символів. Довжина тексту: {{count}} символ',
textLength_1: 'Мінімальна довжина 50 символів. Довжина тексту: {{count}} символи',
textLength_2: 'Мінімальна довжина 50 символів. Довжина тексту: {{count}} символів',
confirmImgRemoving: 'Ви впевнені, що хочете видалити цю картинку?',
removingSucceeded: 'Успішно видалено!',
addImgFromPC: 'Завантажити зображення із комп`ютера',
Expand Down
7 changes: 4 additions & 3 deletions src/old/lib/constants/editors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@ export const CONTENT_DEBOUNCE_TIMEOUT = 1000;
export const PREVIEW_DEBOUNCE_TIMEOUT = 500;
export const FIND_AUTHORS_DEBOUNCE_TIMEOUT = 500;

export const MAX_PREVIEW_LENGTH = 150;
export const MAX_TITLE_LENGTH = 50;
export const MAX_PREVIEW_LENGTH = 200;
export const MAX_TITLE_LENGTH = 150;

export const MIN_TITLE_LENGTH = 10;
export const MIN_PREVIEW_LENGTH = 50;
export const MIN_TITLE_LENGTH = 5;
export const MIN_CONTENT_LENGTH = 15;
export const CLEAR_HTML_REG_EXP = /<\/?[^>]+(>|$)|&[a-z0-9]+;/gi;
6 changes: 4 additions & 2 deletions src/views/postCreation/TextPostCreation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {
FIND_AUTHORS_DEBOUNCE_TIMEOUT,
MAX_TITLE_LENGTH,
MIN_CONTENT_LENGTH,
MIN_PREVIEW_LENGTH,
MIN_TITLE_LENGTH,
PREVIEW_DEBOUNCE_TIMEOUT,
} from '../../old/lib/constants/editors';
Expand Down Expand Up @@ -267,8 +268,9 @@ export const TextPostCreation: React.FC<IPostCreationProps> = ({
!newPost.authorId;

const isEnoughLength =
contentText.length < MIN_CONTENT_LENGTH ||
newPost.title.length < MIN_TITLE_LENGTH;
contentText.length <= MIN_CONTENT_LENGTH ||
newPost.title.length <= MIN_TITLE_LENGTH ||
newPost.preview.length <= MIN_PREVIEW_LENGTH;

const isTooLong = newPost.title.length > MAX_TITLE_LENGTH;

Expand Down
6 changes: 4 additions & 2 deletions src/views/postCreation/VideoCreation/VideoPostCreation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import {
FIND_AUTHORS_DEBOUNCE_TIMEOUT,
MAX_TITLE_LENGTH,
MIN_CONTENT_LENGTH,
MIN_PREVIEW_LENGTH,
MIN_TITLE_LENGTH,
PREVIEW_DEBOUNCE_TIMEOUT,
} from '../../../old/lib/constants/editors';
Expand Down Expand Up @@ -243,8 +244,9 @@ export const VideoPostCreation: React.FC<IVideoPostCreationProps> = ({
!newPost.authorId;

const isEnoughLength =
contentText.length < MIN_CONTENT_LENGTH ||
newPost.title.length < MIN_TITLE_LENGTH;
contentText.length <= MIN_CONTENT_LENGTH ||
newPost.title.length <= MIN_TITLE_LENGTH ||
newPost.preview.length <= MIN_PREVIEW_LENGTH;

const isVideoEmpty = !newPost.videoUrl;

Expand Down
7 changes: 4 additions & 3 deletions src/views/postUpdation/TextPostUpdation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
CONTENT_DEBOUNCE_TIMEOUT,
FIND_AUTHORS_DEBOUNCE_TIMEOUT,
MAX_TITLE_LENGTH,
MIN_CONTENT_LENGTH,
MIN_CONTENT_LENGTH, MIN_PREVIEW_LENGTH,
MIN_TITLE_LENGTH,
PREVIEW_DEBOUNCE_TIMEOUT,
} from '../../old/lib/constants/editors';
Expand Down Expand Up @@ -182,8 +182,9 @@ export const TextPostUpdation: React.FC<ITextPostUpdationProps> = ({
!updatedPost.authorId;

const isEnoughLength =
contentText.length < MIN_CONTENT_LENGTH ||
updatedPost.title.length < MIN_TITLE_LENGTH;
contentText.length <= MIN_CONTENT_LENGTH ||
updatedPost.title.length <= MIN_TITLE_LENGTH ||
updatedPost.preview.length <= MIN_PREVIEW_LENGTH;

const isTooLong = updatedPost.title.length > MAX_TITLE_LENGTH;

Expand Down
10 changes: 7 additions & 3 deletions src/views/postUpdation/VideoUpdation/VideoPostUpdation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
FIND_AUTHORS_DEBOUNCE_TIMEOUT,
MAX_TITLE_LENGTH,
MIN_CONTENT_LENGTH,
MIN_PREVIEW_LENGTH,
MIN_TITLE_LENGTH,
PREVIEW_DEBOUNCE_TIMEOUT,
} from '../../../old/lib/constants/editors';
Expand Down Expand Up @@ -73,7 +74,9 @@ export const VideoPostUpdation: React.FC<ITextPostUpdationProps> = ({
const [authors, setAuthors] = useState<ExpertResponseType[]>([]);
const [authorId, setAuthorId] = useState<number | null>(null);
const [author, setAuthor] = useState<ExpertResponseType>();
const [searchValue, setSearchValue] = useState(`${post.author.firstName} ${post.author.lastName}`);
const [searchValue, setSearchValue] = useState(
`${post.author.firstName} ${post.author.lastName}`,
);
const [authorLength, setAuthorLength] = useState<number | null>(null);
const [typing, setTyping] = useState({ content: false, preview: false });
const [previewing, setPreviewing] = useState(false);
Expand Down Expand Up @@ -159,8 +162,9 @@ export const VideoPostUpdation: React.FC<ITextPostUpdationProps> = ({
!updatedPost.authorId;

const isEnoughLength =
contentText.length < MIN_CONTENT_LENGTH ||
updatedPost.title.length < MIN_TITLE_LENGTH;
contentText.length <= MIN_CONTENT_LENGTH ||
updatedPost.title.length <= MIN_TITLE_LENGTH ||
updatedPost.preview.length <= MIN_PREVIEW_LENGTH;

const isTooLong = updatedPost.title.length > MAX_TITLE_LENGTH;

Expand Down