From 1b6f955bb334146f97a3ab5a907cd9256b3070cc Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Sun, 27 Mar 2022 01:09:36 +0900
Subject: [PATCH] =?UTF-8?q?=E7=B7=A8=E9=9B=86=E4=B8=AD=E3=81=A7=E3=82=82?=
 =?UTF-8?q?=E3=83=81=E3=83=A3=E3=83=B3=E3=83=8D=E3=83=AB/=E3=82=AF?=
 =?UTF-8?q?=E3=83=AA=E3=83=83=E3=83=97=E3=83=95=E3=82=A9=E3=83=AB=E3=83=80?=
 =?UTF-8?q?=E3=82=92=E9=81=B7=E7=A7=BB=E3=81=97=E3=81=9F=E3=81=A8=E3=81=8D?=
 =?UTF-8?q?=E3=81=AB=E3=81=AF=E7=B7=A8=E9=9B=86=E5=86=85=E5=AE=B9=E3=82=92?=
 =?UTF-8?q?=E4=B8=8A=E6=9B=B8=E3=81=8D=E3=81=99=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChannelSidebar/ChannelSidebarTopic.vue    | 29 ++++++++++---------
 .../ClipsSidebar/ClipsSidebarContent.vue      | 28 ++++++++++--------
 src/composables/utils/useLocalInput.ts        |  6 +++-
 .../composables/utils/useLocalInput.spec.ts   | 15 ++++++++--
 4 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarTopic.vue b/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarTopic.vue
index 434e7b693..7517f5bd0 100644
--- a/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarTopic.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarTopic.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import apis from '/@/lib/apis'
 import { ChannelId } from '/@/types/entity-ids'
 import { useChannelsStore } from '/@/store/entities/channels'
@@ -31,17 +31,20 @@ const { channelsMap } = useChannelsStore()
 const remoteTopic = computed(
   () => channelsMap.value.get(props.channelId)?.topic ?? ''
 )
-const { localValue: localTopic, isEditing } = useLocalInput(
-  remoteTopic,
-  async topic => {
-    try {
-      await apis.editChannelTopic(props.channelId, { topic })
-      return true
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e)
-      return false
-    }
+const {
+  localValue: localTopic,
+  isEditing,
+  sync
+} = useLocalInput(remoteTopic, async topic => {
+  try {
+    await apis.editChannelTopic(props.channelId, { topic })
+    return true
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e)
+    return false
   }
-)
+})
+
+watch(() => props.channelId, sync)
 </script>
diff --git a/src/components/Main/MainView/ClipsView/ClipsSidebar/ClipsSidebarContent.vue b/src/components/Main/MainView/ClipsView/ClipsSidebar/ClipsSidebarContent.vue
index ce67f7c7f..842a573f2 100644
--- a/src/components/Main/MainView/ClipsView/ClipsSidebar/ClipsSidebarContent.vue
+++ b/src/components/Main/MainView/ClipsView/ClipsSidebar/ClipsSidebarContent.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import { ClipFolderId } from '/@/types/entity-ids'
 import apis from '/@/lib/apis'
 import router, {
@@ -69,17 +69,21 @@ const { localValue: localName, isEditing: isNameEditing } = useLocalInput(
   }
 )
 
-const { localValue: localDescription, isEditing: isDescriptionEditing } =
-  useLocalInput(remoteDescription, async description => {
-    try {
-      await apis.editClipFolder(props.clipFolderId, { description })
-      return true
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e)
-      return false
-    }
-  })
+const {
+  localValue: localDescription,
+  isEditing: isDescriptionEditing,
+  sync
+} = useLocalInput(remoteDescription, async description => {
+  try {
+    await apis.editClipFolder(props.clipFolderId, { description })
+    return true
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e)
+    return false
+  }
+})
+watch(() => props.clipFolderId, sync)
 
 const { defaultChannelName } = useBrowserSettings()
 
diff --git a/src/composables/utils/useLocalInput.ts b/src/composables/utils/useLocalInput.ts
index 2f9ca6093..09e1f2739 100644
--- a/src/composables/utils/useLocalInput.ts
+++ b/src/composables/utils/useLocalInput.ts
@@ -28,7 +28,11 @@ const useLocalInput = <T>(
     }
   })
 
-  return { localValue, isEditing }
+  const sync = () => {
+    localValue.value = remoteValue.value
+  }
+
+  return { localValue, isEditing, sync }
 }
 
 export default useLocalInput
diff --git a/tests/unit/composables/utils/useLocalInput.spec.ts b/tests/unit/composables/utils/useLocalInput.spec.ts
index f449148a7..2ee8f4fd9 100644
--- a/tests/unit/composables/utils/useLocalInput.spec.ts
+++ b/tests/unit/composables/utils/useLocalInput.spec.ts
@@ -54,7 +54,7 @@ describe('useLocalInput', () => {
     const f = vi.fn().mockReturnValue(true)
 
     const remoteValue = ref('1')
-    const { localValue, isEditing } = useLocalInput(remoteValue, f)
+    const { isEditing } = useLocalInput(remoteValue, f)
     isEditing.value = true
     await nextTick()
     expect(f).not.toHaveBeenCalled()
@@ -70,11 +70,22 @@ describe('useLocalInput', () => {
     const f = vi.fn().mockReturnValue(false)
 
     const remoteValue = ref('1')
-    const { localValue, isEditing } = useLocalInput(remoteValue, f)
+    const { isEditing } = useLocalInput(remoteValue, f)
     isEditing.value = true
     await nextTick()
     isEditing.value = false
     await nextTick()
     expect(isEditing.value).toBe(true)
   })
+
+  it('sync function works', async () => {
+    const f = vi.fn().mockReturnValue(false)
+
+    const remoteValue = ref('1')
+    const { localValue, isEditing, sync } = useLocalInput(remoteValue, f)
+    isEditing.value = true
+    localValue.value = '2'
+    sync()
+    expect(localValue.value).toBe('1')
+  })
 })