save topics fixes

src/components/Editor/TopicSelect/TopicSelect.tsx

@@ -7,6 +7,7 @@ import styles from './TopicSelect.module.scss'
 import { clsx } from 'clsx'
 import { createSignal } from 'solid-js'
 import { slugify } from '../../../utils/slugify'
+import { clone } from '../../../utils/clone'
 
 type TopicSelectProps = {
   topics: Topic[]
@@ -64,10 +65,13 @@ export const TopicSelect = (props: TopicSelectProps) => {
     )
   }
 
+  const initialValue = clone(props.selectedTopics)
+
   return (
     <Select
       multiple={true}
       disabled={isDisabled()}
+      initialValue={initialValue}
       {...selectProps}
       format={format}
       placeholder={t('Topics')}

src/components/Views/Edit.tsx

@@ -209,20 +209,22 @@ export const EditView = (props: EditViewProps) => {
                   {/*  его на страницах интересных ему тем. Темы можно менять местами, первая тема*/}
                   {/*  становится заглавной*/}
                   {/*</p>*/}
-                  <div class={clsx('pretty-form__item', styles.topicSelectContainer)}>
+                  <div class={styles.inputContainer}>
-                    <Show when={topics()}>
+                    <div class={clsx('pretty-form__item', styles.topicSelectContainer)}>
-                      <TopicSelect
+                      <Show when={topics()}>
-                        topics={topics()}
+                        <TopicSelect
-                        onChange={handleTopicSelectChange}
+                          topics={topics()}
-                        selectedTopics={form.selectedTopics}
+                          onChange={handleTopicSelectChange}
-                        onMainTopicChange={(mainTopic) => setForm('mainTopic', mainTopic)}
+                          selectedTopics={form.selectedTopics}
-                        mainTopic={form.mainTopic}
+                          onMainTopicChange={(mainTopic) => setForm('mainTopic', mainTopic)}
-                      />
+                          mainTopic={form.mainTopic}
+                        />
+                      </Show>
+                    </div>
+                    <Show when={formErrors.selectedTopics}>
+                      <div class={styles.validationError}>{formErrors.selectedTopics}</div>
                     </Show>
                   </div>
-                  <Show when={formErrors.selectedTopics}>
-                    <div class={styles.validationError}>{formErrors.selectedTopics}</div>
-                  </Show>
 
                   {/*<h4>Соавторы</h4>*/}
                   {/*<p class="description">У каждого соавтора можно добавить роль</p>*/}

src/context/editor.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from 'solid-js'
 import { Accessor, createContext, createSignal, useContext } from 'solid-js'
 import { createStore, SetStoreFunction } from 'solid-js/store'
-import { Topic } from '../graphql/types.gen'
+import { Topic, TopicInput } from '../graphql/types.gen'
 import { apiClient } from '../utils/apiClient'
 import { useLocalize } from './localize'
 import { useSnackbar } from './snackbar'
@@ -48,6 +48,14 @@ export function useEditorContext() {
   return useContext(EditorContext)
 }
 
+const topic2topicInput = (topic: Topic): TopicInput => {
+  return {
+    id: topic.id,
+    slug: topic.slug,
+    title: topic.title
+  }
+}
+
 export const EditorProvider = (props: { children: JSX.Element }) => {
   const { t } = useLocalize()
 
@@ -93,10 +101,10 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
       shoutId: form.shoutId,
       shoutInput: {
         body: form.body,
-        topics: form.selectedTopics,
+        topics: form.selectedTopics.map((topic) => topic2topicInput(topic)),
         // authors?: InputMaybe<Array<InputMaybe<Scalars['String']>>>
         // community?: InputMaybe<Scalars['Int']>
-        mainTopic: form.mainTopic,
+        mainTopic: topic2topicInput(form.mainTopic),
         slug: form.slug,
         subtitle: form.subtitle,
         title: form.title,
@@ -138,17 +146,23 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
       toggleEditorPanel()
     }
 
-    if (!validate()) {
-      return
-    }
-
     if (page().route === 'edit') {
+      if (!validate()) {
+        return
+      }
+
+      await updateShout({ publish: false })
+
       const slug = slugify(form.title)
       setForm('slug', slug)
       openPage(router, 'editSettings', { shoutId: form.shoutId.toString() })
       return
     }
 
+    if (!validateSettings()) {
+      return
+    }
+
     try {
       await updateShout({ publish: true })
       openPage(router, 'feed')