From 32b53ae5cbce5caeac22087964e79b3c384dcd51 Mon Sep 17 00:00:00 2001
From: bniwredyc <bniwredyc@gmail.com>
Date: Thu, 23 Mar 2023 18:47:36 +0100
Subject: [PATCH] Merge branch 'editor' of
 gitlab.com:discoursio/discoursio-webapp into editor

# Conflicts:
#	src/components/Editor/Editor.tsx
---
 src/components/Editor/Editor.tsx              |  1 +
 src/components/Editor/EditorBubbleMenu.tsx    |  2 +-
 .../TopicSelect/TopicSelect.module.scss       |  0
 .../Editor/TopicSelect/TopicSelect.scss       | 22 +++++++++++++++++++
 .../Editor/TopicSelect/TopicSelect.tsx        | 20 +++++++++++++++--
 src/components/Views/Create.tsx               | 10 +++++----
 6 files changed, 48 insertions(+), 7 deletions(-)
 delete mode 100644 src/components/Editor/TopicSelect/TopicSelect.module.scss
 create mode 100644 src/components/Editor/TopicSelect/TopicSelect.scss

diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
index 1d4dd8d4..5696fd0f 100644
--- a/src/components/Editor/Editor.tsx
+++ b/src/components/Editor/Editor.tsx
@@ -1,3 +1,4 @@
+import { createEffect } from 'solid-js'
 import { createTiptapEditor, useEditorHTML } from 'solid-tiptap'
 import { clsx } from 'clsx'
 import { useLocalize } from '../../context/localize'
diff --git a/src/components/Editor/EditorBubbleMenu.tsx b/src/components/Editor/EditorBubbleMenu.tsx
index cdc85bfa..80cb3be8 100644
--- a/src/components/Editor/EditorBubbleMenu.tsx
+++ b/src/components/Editor/EditorBubbleMenu.tsx
@@ -105,7 +105,7 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
                 type="text"
                 placeholder={t('Enter URL address')}
                 autofocus
-                value={prevUrl() ? prevUrl() : null}
+                value={prevUrl() ?? null}
                 onChange={(e) => setUrl(e.currentTarget.value)}
               />
               <button type="submit">
diff --git a/src/components/Editor/TopicSelect/TopicSelect.module.scss b/src/components/Editor/TopicSelect/TopicSelect.module.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/Editor/TopicSelect/TopicSelect.scss b/src/components/Editor/TopicSelect/TopicSelect.scss
new file mode 100644
index 00000000..b89169d2
--- /dev/null
+++ b/src/components/Editor/TopicSelect/TopicSelect.scss
@@ -0,0 +1,22 @@
+.TopicSelect .solid-select-list {
+  background: #fff;
+}
+
+//.TopicSelect.solid-select-container {
+//  color: #fa7f25;
+//}
+//.TopicSelect .solid-select-control {
+//  outline-color: #fca560;
+//  border-color: #fca560;
+//}
+//.TopicSelect .solid-select-placeholder {
+//  color: #fca560;
+//}
+//.TopicSelect .solid-select-option:hover {
+//  background-color: #fa7f25;
+//  color: #fff;
+//}
+//.TopicSelect .solid-select-option[data-focused=true] {
+//  background-color: #fca560;
+//  color: #fff;
+//}
diff --git a/src/components/Editor/TopicSelect/TopicSelect.tsx b/src/components/Editor/TopicSelect/TopicSelect.tsx
index 7c9e2cb7..dd93cc99 100644
--- a/src/components/Editor/TopicSelect/TopicSelect.tsx
+++ b/src/components/Editor/TopicSelect/TopicSelect.tsx
@@ -2,20 +2,36 @@ import type { Topic } from '../../../graphql/types.gen'
 import { createOptions, Select } from '@thisbeyond/solid-select'
 import { useLocalize } from '../../../context/localize'
 import '@thisbeyond/solid-select/style.css'
+import './TopicSelect.scss'
 
 type TopicSelectProps = {
   topics: Topic[]
+  selectedTopics: Topic[]
   onChange: (selectedTopics: Topic[]) => void
 }
 
 export const TopicSelect = (props: TopicSelectProps) => {
   const { t } = useLocalize()
 
-  const selectProps = createOptions(props.topics, { key: 'title' })
+  const selectProps = createOptions(props.topics, {
+    key: 'title',
+    disable: (topic) => {
+      console.log({ selectedTopics: clone(props.selectedTopics) })
+      return props.selectedTopics.includes(topic)
+    }
+  })
 
   const handleChange = (selectedTopics: Topic[]) => {
     props.onChange(selectedTopics)
   }
 
-  return <Select multiple={true} {...selectProps} placeholder={t('Topics')} onChange={handleChange} />
+  return (
+    <Select
+      multiple={true}
+      {...selectProps}
+      placeholder={t('Topics')}
+      class="TopicSelect"
+      onChange={handleChange}
+    />
+  )
 }
diff --git a/src/components/Views/Create.tsx b/src/components/Views/Create.tsx
index c3f0c54b..ce097e0c 100644
--- a/src/components/Views/Create.tsx
+++ b/src/components/Views/Create.tsx
@@ -15,7 +15,8 @@ type ShoutForm = {
   slug: string
   title: string
   subtitle: string
-  topicSlugs: string[]
+  selectedTopics: Topic[]
+  mainTopic: Topic
   body: string
   coverImageUrl: string
 }
@@ -29,7 +30,8 @@ export const CreateView = () => {
     slug: '',
     title: '',
     subtitle: '',
-    topicSlugs: [],
+    selectedTopics: [],
+    mainTopic: null,
     body: '',
     coverImageUrl: ''
   })
@@ -121,8 +123,8 @@ export const CreateView = () => {
                     <Show when={topics()}>
                       <TopicSelect
                         topics={topics()}
-                        onChange={(selectedTopicSlugs) => setForm('topicSlugs', selectedTopics)}
-                        selectedTopicSlugs={form.topicSlugs}
+                        onChange={(newSelectedTopics) => setForm('selectedTopics', newSelectedTopics)}
+                        selectedTopics={form.selectedTopics}
                       />
                     </Show>
                     {/*<input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />*/}