Merge pull request #406 from Discours/feature/change-publish-btn-action

Change publish btn action

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/Editor/Panel/Panel.tsx

@@ -47,11 +47,6 @@ export const Panel = (props: Props) => {
   const handleSaveClick = () => {
     saveShout(form)
   }
-  const { showSnackbar } = useSnackbar()
-  const handlePublishClick = () => {
-    if (form.mainTopic) publishShout(form)
-    else showSnackbar({ body: t('Please, set the main topic first') })
-  }
 
   const html = useEditorHTML(() => editorRef.current())
 
@@ -74,7 +69,7 @@ export const Panel = (props: Props) => {
       <div class={clsx(styles.actionsHolder, styles.scrolled, { hidden: isShortcutsVisible() })}>
         <section>
           <p>
-            <span class={styles.link} onClick={handlePublishClick}>
+            <span class={styles.link} onClick={() => publishShout(form)}>
               {t('Publish')}
             </span>
           </p>

src/components/Nav/HeaderAuth.tsx

@@ -63,11 +63,6 @@ export const HeaderAuth = (props: Props) => {
   const handleSaveButtonClick = () => {
     saveShout(form)
   }
-  const { showSnackbar } = useSnackbar()
-  const handlePublishButtonClick = () => {
-    if (form.mainTopic) publishShout(form)
-    else showSnackbar({ body: t('Please, set the main topic first') })
-  }
 
   const [width, setWidth] = createSignal(0)
 
@@ -160,7 +155,7 @@ export const HeaderAuth = (props: Props) => {
                 {renderIconedButton({
                   value: t('Publish'),
                   icon: 'publish',
-                  action: handlePublishButtonClick,
+                  action: () => publishShout(form),
                 })}
               </div>
 

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>