Merge branch 'editor_float_image' into drafts-2

# Conflicts:
#	src/components/Editor/Editor.tsx

src/components/Views/Edit.module.scss

@@ -97,3 +97,14 @@
     }
   }
 }
+
+.inputContainer {
+  position: relative;
+
+  .validationError {
+    position: absolute;
+    top: 100%;
+    font-size: small;
+    color: #f00;
+  }
+}

src/components/Views/Edit.tsx

@@ -6,9 +6,7 @@ import { Title } from '@solidjs/meta'
 import type { Shout, Topic } from '../../graphql/types.gen'
 import { apiClient } from '../../utils/apiClient'
 import { TopicSelect } from '../Editor/TopicSelect/TopicSelect'
-import { router, useRouter } from '../../stores/router'
+import { useRouter } from '../../stores/router'
-import { openPage } from '@nanostores/router'
-import { translit } from '../../utils/ru2en'
 import { Editor } from '../Editor/Editor'
 import { Panel } from '../Editor/Panel'
 import { useEditorContext } from '../../context/editor'
@@ -32,6 +30,7 @@ export const EditView = (props: EditViewProps) => {
   const [isSlugChanged, setIsSlugChanged] = createSignal(false)
 
   setForm({
+    shoutId: props.shout.id,
     slug: props.shout.slug,
     title: props.shout.title,
     subtitle: props.shout.subtitle,
@@ -82,17 +81,21 @@ export const EditView = (props: EditViewProps) => {
                     [styles.visible]: page().route === 'edit'
                   })}
                 >
-                  <input
+                  <div class={styles.inputContainer}>
-                    class={styles.titleInput}
+                    <input
-                    type="text"
+                      class={styles.titleInput}
-                    name="title"
+                      type="text"
-                    id="title"
+                      name="title"
-                    placeholder="Заголовок"
+                      id="title"
-                    autocomplete="off"
+                      placeholder="Заголовок"
-                    value={form.title}
+                      autocomplete="off"
-                    onInput={handleTitleInputChange}
+                      value={form.title}
-                  />
+                      onInput={handleTitleInputChange}
-                  <Show when={formErrors.title}>{formErrors.title}</Show>
+                    />
+                    <Show when={formErrors.title}>
+                      <div class={styles.validationError}>{formErrors.title}</div>
+                    </Show>
+                  </div>
 
                   <input
                     class={styles.subtitleInput}

src/context/editor.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from 'solid-js'
-import { Accessor, createContext, createEffect, createSignal, useContext } from 'solid-js'
+import { Accessor, createContext, createSignal, useContext } from 'solid-js'
 import { createStore, SetStoreFunction } from 'solid-js/store'
-import { InputMaybe, Scalars, Shout, Topic } from '../graphql/types.gen'
+import { Topic } from '../graphql/types.gen'
 import { apiClient } from '../utils/apiClient'
 import { useLocalize } from './localize'
 import { useSnackbar } from './snackbar'
@@ -12,6 +12,7 @@ type WordCounter = {
 }
 
 type ShoutForm = {
+  shoutId: number
   slug: string
   title: string
   subtitle: string
@@ -69,8 +70,8 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
 
     try {
       await apiClient.updateArticle({
-        slug: form.slug,
+        shoutId: form.shoutId,
-        article: {
+        shoutInput: {
           body: form.body,
           topics: form.selectedTopics.map((topic) => topic.slug),
           // authors?: InputMaybe<Array<InputMaybe<Scalars['String']>>>

src/graphql/mutation/article-publish.ts

@@ -1,7 +1,7 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  mutation UpdateShoutMutation($slug: String!) {
+  mutation PublishShoutMutation($slug: String!) {
     publishShout(slug: $slug) {
       error
       shout {

src/graphql/mutation/article-update.ts

@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  mutation UpdateShoutMutation($slug: String!, $shout: ShoutInput!) {
+  mutation UpdateShoutMutation($shoutId: Int!, $shoutInput: ShoutInput!) {
-    updateShout(slug: $slug, inp: $shout) {
+    updateShout(shoutId: $shoutId, shoutInput: $shoutInput) {
       error
       shout {
         id

src/graphql/types.gen.ts

@@ -228,7 +228,7 @@ export type MutationDeleteReactionArgs = {
 }
 
 export type MutationDeleteShoutArgs = {
-  slug: Scalars['String']
+  shout_id: Scalars['Int']
 }
 
 export type MutationDestroyTopicArgs = {
@@ -246,8 +246,8 @@ export type MutationMarkAsReadArgs = {
 }
 
 export type MutationPublishShoutArgs = {
-  inp: ShoutInput
+  shout_id: Scalars['Int']
-  slug: Scalars['String']
+  shout_input?: InputMaybe<ShoutInput>
 }
 
 export type MutationRateUserArgs = {
@@ -292,8 +292,8 @@ export type MutationUpdateReactionArgs = {
 }
 
 export type MutationUpdateShoutArgs = {
-  inp: ShoutInput
+  shout_id: Scalars['Int']
-  slug: Scalars['String']
+  shout_input: ShoutInput
 }
 
 export type MutationUpdateTopicArgs = {

src/utils/apiClient.ts

@@ -248,10 +248,14 @@ export const apiClient = {
     console.debug('[createArticle]:', response.data)
     return response.data.createShout.shout
   },
-  updateArticle: async ({ slug, article }: { slug: string; article: ShoutInput }): Promise<Shout> => {
+  updateArticle: async ({
-    const response = await privateGraphQLClient
+    shoutId,
-      .mutation(updateArticle, { slug, shout: article })
+    shoutInput
-      .toPromise()
+  }: {
+    shoutId: number
+    shoutInput: ShoutInput
+  }): Promise<Shout> => {
+    const response = await privateGraphQLClient.mutation(updateArticle, { shoutId, shoutInput }).toPromise()
     console.debug('[updateArticle]:', response.data)
     return response.data.updateShout.shout
   },