fix title error-message in editor

public/locales/en/translation.json

@@ -373,6 +373,7 @@
   "Thematic table of contents of the magazine. Here you can find all the topics that community authors have written about.": "Thematic table of contents of the magazine. Here you can find all the topics that community authors have written about.",
   "Thematic table of contents of the magazine. Here you can find all the topics that the community authors wrote about": "Thematic table of contents of the magazine. Here you can find all the topics that the community authors wrote about",
   "Themes and plots": "Themes and plots",
+  "Please, set the article title": "Please, set the article title",
   "Theory": "Theory",
   "There are unsaved changes in your profile settings. Are you sure you want to leave the page without saving?": "There are unsaved changes in your profile settings. Are you sure you want to leave the page without saving?",
   "There are unsaved changes in your publishing settings. Are you sure you want to leave the page without saving?": "There are unsaved changes in your publishing settings. Are you sure you want to leave the page without saving?",

public/locales/ru/translation.json

@@ -296,6 +296,7 @@
   "Please enter password again": "Пожалуйста, введите пароль ещё рез",
   "Please, confirm email": "Пожалуйста, подтвердите электронную почту",
   "Please, set the main topic first": "Пожалуйста, сначала выберите главную тему",
+  "Please, set the article title": "Пожалуйста, задайте заголовок статьи",
   "Podcasts": "Подкасты",
   "Poetry": "Поэзия",
   "Popular": "Популярное",

src/components/Topic/TopicBadge/TopicBadge.module.scss

@@ -8,6 +8,7 @@
     flex-direction: row;
     margin-bottom: .8rem;
   }
+
   .basicInfo {
     display: flex;
     flex-flow: row nowrap;

src/components/Views/EditView/EditView.module.scss

@@ -189,10 +189,8 @@
   flex-flow: column;
 
   .validationError {
-    position: absolute;
-    z-index: 1;
-    top: calc(100% + 4px);
     font-size: small;
+    margin-top: -1rem;
     color: var(--danger-color);
   }
 }

src/components/Views/EditView/EditView.tsx

@@ -3,33 +3,33 @@ import deepEqual from 'fast-deep-equal'
 import { Accessor, Show, createMemo, createSignal, lazy, onCleanup, onMount } from 'solid-js'
 import { createStore } from 'solid-js/store'
 
-import { ShoutForm, useEditorContext } from '../../context/editor'
+import { ShoutForm, useEditorContext } from '../../../context/editor'
-import { useLocalize } from '../../context/localize'
+import { useLocalize } from '../../../context/localize'
-import type { Shout, Topic } from '../../graphql/schema/core.gen'
+import type { Shout, Topic } from '../../../graphql/schema/core.gen'
-import { LayoutType, MediaItem } from '../../pages/types'
+import { LayoutType, MediaItem } from '../../../pages/types'
-import { useRouter } from '../../stores/router'
+import { useRouter } from '../../../stores/router'
-import { clone } from '../../utils/clone'
+import { clone } from '../../../utils/clone'
-import { getImageUrl } from '../../utils/getImageUrl'
+import { getImageUrl } from '../../../utils/getImageUrl'
-import { isDesktop } from '../../utils/media-query'
+import { isDesktop } from '../../../utils/media-query'
-import { slugify } from '../../utils/slugify'
+import { slugify } from '../../../utils/slugify'
-import { Editor, Panel } from '../Editor'
+import { Editor, Panel } from '../../Editor'
-import { AudioUploader } from '../Editor/AudioUploader'
+import { AudioUploader } from '../../Editor/AudioUploader'
-import { AutoSaveNotice } from '../Editor/AutoSaveNotice'
+import { AutoSaveNotice } from '../../Editor/AutoSaveNotice'
-import { VideoUploader } from '../Editor/VideoUploader'
+import { VideoUploader } from '../../Editor/VideoUploader'
-import { Modal } from '../Nav/Modal'
+import { Modal } from '../../Nav/Modal'
-import { TableOfContents } from '../TableOfContents'
+import { TableOfContents } from '../../TableOfContents'
-import { DropArea } from '../_shared/DropArea'
+import { DropArea } from '../../_shared/DropArea'
-import { Icon } from '../_shared/Icon'
+import { Icon } from '../../_shared/Icon'
-import { InviteMembers } from '../_shared/InviteMembers'
+import { InviteMembers } from '../../_shared/InviteMembers'
-import { Popover } from '../_shared/Popover'
+import { Popover } from '../../_shared/Popover'
-import { EditorSwiper } from '../_shared/SolidSwiper'
+import { EditorSwiper } from '../../_shared/SolidSwiper'
 
-import { PublishSettings } from './PublishSettings'
+import { PublishSettings } from '../PublishSettings'
 
-import styles from './Edit.module.scss'
+import styles from './EditView.module.scss'
 
-const SimplifiedEditor = lazy(() => import('../Editor/SimplifiedEditor'))
+const SimplifiedEditor = lazy(() => import('../../Editor/SimplifiedEditor'))
-const GrowingTextarea = lazy(() => import('../_shared/GrowingTextarea/GrowingTextarea'))
+const GrowingTextarea = lazy(() => import('../../_shared/GrowingTextarea/GrowingTextarea'))
 
 type Props = {
   shout: Shout
@@ -121,7 +121,7 @@ export const EditView = (props: Props) => {
     onCleanup(() => window.removeEventListener('beforeunload', handleBeforeUnload))
   })
 
-  const handleTitleInputChange = (value) => {
+  const handleTitleInputChange = (value: string) => {
     setForm('title', value)
     setForm('slug', slugify(value))
     if (value) {

src/components/Views/EditView/index.ts

@@ -0,0 +1 @@
+export { EditView } from './EditView'

src/context/editor.tsx

@@ -95,7 +95,7 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
   const countWords = (value) => setWordCounter(value)
   const validate = () => {
     if (!form.title) {
-      setFormErrors('title', t('Required'))
+      setFormErrors('title', t('Please, set the article title'))
       return false
     }
 

src/pages/edit.page.tsx

@@ -10,7 +10,7 @@ import { useRouter } from '../stores/router'
 
 import { LayoutType } from './types'
 
-const Edit = lazy(() => import('../components/Views/Edit'))
+const EditView = lazy(() => import('../components/Views/EditView/EditView'))
 
 export const EditPage = () => {
   const { page } = useRouter()
@@ -54,7 +54,7 @@ export const EditPage = () => {
       <AuthGuard>
         <Show when={shout()}>
           <Suspense fallback={<Loading />}>
-            <Edit shout={shout()} />
+            <EditView shout={shout()} />
           </Suspense>
         </Show>
       </AuthGuard>