Merge pull request #539 from traPtitech/feat/edit-topic

トピック編集

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,71 @@
 <template>
   <sidebar-content-container-foldable title="トピック">
-    <channel-sidebar-topic-content :topic-content="topicContent" />
+    <content-editor
+      :value="topic"
+      :is-editing="isEditing"
+      @input="onInput"
+      @edit-done="onEditDone"
+      @edit-start="startEdit"
+    />
   </sidebar-content-container-foldable>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api'
+import {
+  defineComponent,
+  ref,
+  PropType,
+  watchEffect,
+  reactive
+} 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 }, state: { topic: string }) => {
+  const isEditing = ref(false)
+  const onInput = (value: string) => {
+    state.topic = value
+  }
+  const startEdit = () => {
+    isEditing.value = true
+  }
+  const onEditDone = async () => {
+    await apis.editChannelTopic(props.channelId, { topic: state.topic })
+    isEditing.value = false
+  }
+  return { isEditing, onInput, 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 = ref(store.state.domain.messagesView.topic)
+    const state = reactive({
+      topic: store.state.domain.messagesView.topic
+    })
+    watchEffect(() => {
+      topic.value = store.state.domain.messagesView.topic
+    })
+    const { isEditing, onInput, startEdit, onEditDone } = useEdit(props, state)
     return {
-      topicContent
+      topic,
+      isEditing,
+      startEdit,
+      onEditDone,
+      onInput
     }
   }
 })

src/components/Main/MainView/ClipsSidebar/ClipsSidebarContent.vue

@@ -4,6 +4,7 @@
       <content-editor
         :value="name"
         :is-editing="isNameEditing"
+        @input="onNameInput"
         @edit-done="onNameEditDone"
         @edit-start="startNameEdit"
         :maxlength="30"
@@ -13,6 +14,7 @@
       <content-editor
         :value="description"
         :is-editing="isDesciptionEditing"
+        @input="onDesciptionInput"
         @edit-done="onDesciptionEditDone"
         @edit-start="startDesciptionEdit"
       />
@@ -26,7 +28,7 @@ import {
   computed,
   PropType,
   ref,
-  Ref
+  reactive
 } from '@vue/composition-api'
 import store from '@/store'
 import { ClipFolderId } from '@/types/entity-ids'
@@ -37,22 +39,27 @@ import apis from '@/lib/apis'
 
 const useEdit = (
   props: { clipFolderId: string },
-  name: Ref<string>,
-  description: Ref<string>,
+  state: {
+    name: string
+    description: string
+  },
   forField: 'name' | 'description'
 ) => {
   const isEditing = ref(false)
+  const onInput = (value: string) => {
+    state[forField] = value
+  }
   const startEdit = () => {
     isEditing.value = true
   }
-  const onEditDone = async (v: string) => {
+  const onEditDone = async () => {
     await apis.editClipFolder(props.clipFolderId, {
-      name: forField === 'name' ? v : name.value,
-      description: forField === 'description' ? v : description.value
+      name: state.name,
+      description: state.description
     })
     isEditing.value = false
   }
-  return { isEditing, startEdit, onEditDone }
+  return { isEditing, onInput, startEdit, onEditDone }
 }
 
 export default defineComponent({
@@ -73,23 +80,32 @@ export default defineComponent({
       () =>
         store.state.entities.clipFolders[props.clipFolderId]?.description ?? ''
     )
+    const state = reactive({
+      name: store.state.entities.clipFolders[props.clipFolderId]?.name ?? '',
+      description:
+        store.state.entities.clipFolders[props.clipFolderId]?.description ?? ''
+    })
     const {
       isEditing: isNameEditing,
+      onInput: onNameInput,
       startEdit: startNameEdit,
       onEditDone: onNameEditDone
-    } = useEdit(props, name, description, 'name')
+    } = useEdit(props, state, 'name')
     const {
       isEditing: isDesciptionEditing,
+      onInput: onDesciptionInput,
       startEdit: startDesciptionEdit,
       onEditDone: onDesciptionEditDone
-    } = useEdit(props, name, description, 'description')
+    } = useEdit(props, state, 'description')
     return {
       name,
       description,
       isNameEditing,
+      onNameInput,
       startNameEdit,
       onNameEditDone,
       isDesciptionEditing,
+      onDesciptionInput,
       startDesciptionEdit,
       onDesciptionEditDone
     }

src/components/Main/MainView/MainViewSidebar/ContentEditor.vue

@@ -2,10 +2,11 @@
   <div :class="$style.container" :style="styles.container">
     <textarea-autosize
       v-if="isEditing"
-      v-model="internalValue"
+      :value="value"
       :class="$style.editor"
       :style="styles.textarea"
       :maxlength="maxlength"
+      @input="onInput"
     />
     <div v-else :class="$style.content" :data-is-empty="isEmpty">
       {{ content }}
@@ -22,7 +23,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed, ref } from '@vue/composition-api'
+import { defineComponent, reactive, computed } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import Icon from '@/components/UI/Icon.vue'
 
@@ -48,7 +49,6 @@ export default defineComponent({
   },
   setup(props, context) {
     const styles = useStyles(props)
-    const internalValue = ref(props.value ?? '')
     const content = computed(() => {
       if (props.value === '') return props.fallbackValue
       if (props.value === undefined) return 'ロード中'
@@ -59,12 +59,13 @@ export default defineComponent({
     )
     const onButtonClick = () => {
       if (props.isEditing) {
-        context.emit('edit-done', internalValue.value)
+        context.emit('edit-done')
       } else {
         context.emit('edit-start')
       }
     }
-    return { styles, content, isEmpty, onButtonClick, internalValue }
+    const onInput = (payload: string) => context.emit('input', payload)
+    return { styles, content, isEmpty, onButtonClick, onInput }
   }
 })
 </script>

src/lib/websocket/channel.ts

@@ -9,6 +9,14 @@ import {
   ChannelViewersChangedEvent
 } from './events'
 
+const isCurrentChannel = (channelId: string) => {
+  const primaryView = store.state.ui.mainView.primaryView
+  return (
+    (primaryView.type === 'channel' || primaryView.type === 'dm') &&
+    primaryView.channelId === channelId
+  )
+}
+
 export const onChannelCreated = async ({ id }: ChannelCreatedEvent['body']) => {
   const res = await apis.getChannel(id)
   store.commit.entities.addChannel({ id, entity: res.data })
@@ -21,6 +29,9 @@ 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 })
+  if (isCurrentChannel(id)) {
+    store.commit.domain.messagesView.setTopic(res.data.topic)
+  }
 }
 
 export const onChannelStared = (data: ChannelStaredEvent['body']) => {