トピック編集

src/components/Main/MainView/ChannelSidebar/ChannelSidebarContent.vue

@@ -4,7 +4,10 @@
       :viewer-ids="viewerIds"
       :class="$style.sidebarItem"
     />
-    <channel-sidebar-topic :class="$style.sidebarItem" />
+    <channel-sidebar-topic
+      :class="$style.sidebarItem"
+      :channel-id="channelId"
+    />
     <channel-sidebar-pinned
       :pinned-message-length="pinnedMessagesCount"
       @open="context.emit('pinned-mode-toggle')"

src/components/Main/MainView/ChannelSidebar/ChannelSidebarTopic.vue

@@ -1,25 +1,60 @@
 <template>
   <sidebar-content-container-foldable title="トピック">
-    <channel-sidebar-topic-content :topic-content="topicContent" />
+    <content-editor
+      :value="topic"
+      :is-editing="isEditing"
+      @edit-done="onEditDone"
+      @edit-start="startEdit"
+    />
   </sidebar-content-container-foldable>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api'
+import {
+  defineComponent,
+  Ref,
+  ref,
+  PropType,
+  computed
+} from '@vue/composition-api'
+import apis from '@/lib/apis'
 import store from '@/store'
 import SidebarContentContainerFoldable from '@/components/Main/MainView/MainViewSidebar/SidebarContentContainerFoldable.vue'
-import ChannelSidebarTopicContent from './ChannelSidebarTopicContent.vue'
+import ContentEditor from '@/components/Main/MainView/MainViewSidebar/ContentEditor.vue'
+import { ChannelId } from '@/types/entity-ids'
+
+const useEdit = (props: { channelId: string }, topic: Ref<string>) => {
+  const isEditing = ref(false)
+  const startEdit = () => {
+    isEditing.value = true
+  }
+  const onEditDone = async (topic: string) => {
+    await apis.editChannelTopic(props.channelId, { topic })
+    isEditing.value = false
+  }
+  return { isEditing, startEdit, onEditDone }
+}
 
 export default defineComponent({
   name: 'ChannelSidebarTopic',
   components: {
     SidebarContentContainerFoldable,
-    ChannelSidebarTopicContent
+    ContentEditor
+  },
+  props: {
+    channelId: {
+      type: String as PropType<ChannelId>,
+      required: true
+    }
   },
-  setup() {
-    const topicContent = computed(() => store.state.domain.messagesView.topic)
+  setup(props) {
+    const topic = computed(() => store.state.domain.messagesView.topic)
+    const { isEditing, startEdit, onEditDone } = useEdit(props, topic)
     return {
-      topicContent
+      topic,
+      isEditing,
+      startEdit,
+      onEditDone
     }
   }
 })

src/lib/websocket/channel.ts

@@ -21,6 +21,7 @@ export const onChannelDeleted = ({ id }: ChannelDeletedEvent['body']) => {
 export const onChannelUpdated = async ({ id }: ChannelUpdatedEvent['body']) => {
   const res = await apis.getChannel(id)
   store.commit.entities.extendChannels({ [id]: res.data })
+  store.commit.domain.messagesView.setTopic(res.data.topic)
 }
 
 export const onChannelStared = (data: ChannelStaredEvent['body']) => {