Map/Setで書き換え refs #1295

src/components/Authenticate/AuthenticateMainView.vue

@@ -1,9 +1,12 @@
 <template>
   <transition name="zoom" appear>
     <!-- https://github.com/vuejs/rfcs/blob/master/active-rfcs/0017-transition-as-root.md -->
-    <div v-if="show && (type !== 'login' || version)" :class="$style.container">
+    <div
+      v-if="show && (type !== 'login' || externalLogin)"
+      :class="$style.container"
+    >
       <authenticate-modal>
-        <login-form v-if="type === 'login'" :version="version" />
+        <login-form v-if="type === 'login'" :external-login="externalLogin" />
         <registration-form v-if="type === 'registration'" />
         <consent-form v-if="type === 'consent'" />
       </authenticate-modal>
@@ -41,8 +44,8 @@ export default defineComponent({
   setup(props) {
     const isLogin = computed(() => props.type === 'login')
     // ログイン画面が表示されるときにlayout shiftが起こらないように取得後に表示する
-    const version = useVersion(isLogin)
-    return { version }
+    const { externalLogin } = useVersion(isLogin)
+    return { externalLogin }
   }
 })
 </script>

src/components/Authenticate/LoginForm.vue

@@ -37,15 +37,15 @@
         <authenticate-button
           type="secondary"
           :class="$style.exLoginButton"
-          v-show="externalLogin.includes('traQ')"
+          v-show="externalLogin.has('traQ')"
           label="traP"
           icon-name="traQ"
           @click="loginExternal('traq')"
         />
         <authenticate-button
           type="secondary"
           :class="$style.exLoginButton"
-          v-show="externalLogin.includes('google')"
+          v-show="externalLogin.has('google')"
           label="Google"
           icon-mdi
           icon-name="google"
@@ -54,7 +54,7 @@
         <authenticate-button
           type="secondary"
           :class="$style.exLoginButton"
-          v-show="externalLogin.includes('github')"
+          v-show="externalLogin.has('github')"
           label="GitHub"
           icon-mdi
           icon-name="github"
@@ -63,7 +63,7 @@
         <authenticate-button
           type="secondary"
           :class="$style.exLoginButton"
-          v-show="externalLogin.includes('oidc')"
+          v-show="externalLogin.has('oidc')"
           label="OpenID Connect"
           icon-mdi
           icon-name="openid"
@@ -75,15 +75,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+import { defineComponent, PropType } from 'vue'
 import useLogin from './use/login'
 import { isIOSApp } from '@/lib/util/browser'
 import AuthenticateInput from './AuthenticateInput.vue'
 import AuthenticateHeader from './AuthenticateHeader.vue'
 import AuthenticateButton from './AuthenticateButton.vue'
 import AuthenticateSeparator from './AuthenticateSeparator.vue'
 import config from '@/config'
-import { Version } from '@traptitech/traq'
 
 export default defineComponent({
   name: 'LoginForm',
@@ -94,26 +93,22 @@ export default defineComponent({
     AuthenticateSeparator
   },
   props: {
-    version: {
-      type: Object as PropType<Version>,
+    externalLogin: {
+      type: Set as PropType<Set<string>>,
       required: true
     }
   },
   setup(props, context) {
     const { loginState, login, loginExternal } = useLogin()
     const isIOS = isIOSApp()
     const { resetLink } = config.auth
-    const externalLogin = computed(
-      () => props.version.flags.externalLogin ?? []
-    )
 
     return {
       resetLink,
       loginState,
       login,
       loginExternal,
-      isIOS,
-      externalLogin
+      isIOS
     }
   }
 })

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

@@ -39,7 +39,7 @@ export default defineComponent({
       () => store.state.entities.channelsMap.get(props.channelId)?.force
     )
     const viewStates = computed(() =>
-      [...(subscribers.value ?? [])]
+      [...(subscribers.value ?? new Set())]
         .map(id => ({
           user: store.getters.entities.activeUsersMap.get(id),
           active: props.viewerIds.includes(id)

src/components/Main/MainView/MessageElement/MessageStampList.vue

@@ -75,13 +75,13 @@ const createStampList = (
   props: { stamps: MessageStamp[] },
   myId: Ref<UserId | undefined>
 ) => {
-  const map: Record<StampId, MessageStampById> = {}
+  const map = new Map<StampId, MessageStampById>()
   props.stamps.forEach(stamp => {
     const { stampId } = stamp
     if (!store.state.entities.stampsMap.has(stampId)) return
 
-    if (!map[stamp.stampId]) {
-      map[stampId] = {
+    if (!map.has(stamp.stampId)) {
+      map.set(stampId, {
         id: stamp.stampId,
         sum: stamp.count,
         myCount: stamp.userId === myId.value ? stamp.count : 0,
@@ -94,31 +94,33 @@ const createStampList = (
         ],
         createdAt: new Date(stamp.createdAt),
         updatedAt: new Date(stamp.updatedAt)
-      }
+      })
     } else {
-      map[stampId].sum += stamp.count
-      map[stampId].users.push({
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const s = map.get(stampId)!
+      s.sum += stamp.count
+      s.users.push({
         id: stamp.userId,
         count: stamp.count,
         createdAt: new Date(stamp.createdAt)
       })
       if (stamp.userId === myId.value) {
-        map[stampId].myCount = stamp.count
+        s.myCount = stamp.count
       }
       const createdAt = new Date(stamp.createdAt)
-      if (createdAt < map[stampId].createdAt) {
-        map[stampId].createdAt = createdAt
+      if (createdAt < s.createdAt) {
+        s.createdAt = createdAt
       }
       const updatedAt = new Date(stamp.updatedAt)
-      if (map[stampId].updatedAt < updatedAt) {
-        map[stampId].updatedAt = updatedAt
+      if (s.updatedAt < updatedAt) {
+        s.updatedAt = updatedAt
       }
     }
   })
-  Object.values(map).forEach(stamp =>
+  map.forEach(stamp =>
     stamp.users.sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime())
   )
-  return Object.values(map).sort(
+  return [...map.values()].sort(
     (a, b) => a.createdAt.getTime() - b.createdAt.getTime()
   )
 }

src/components/Main/Navigation/ChannelList/ChannelList.vue

@@ -5,7 +5,7 @@
       :key="channel.id"
       :class="$style.element"
       :channel="channel"
-      :is-opened="channelFoldingState[channel.id]"
+      :is-opened="foldedChannels.has(channel.id)"
       :ignore-children="ignoreChildren"
       :show-shortened-path="showShortenedPath"
       :show-topic="showTopic"
@@ -16,32 +16,24 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  reactive,
-  toRefs,
-  PropType,
-  defineAsyncComponent
-} from 'vue'
+import { defineComponent, PropType, defineAsyncComponent, ref } from 'vue'
 import { ChannelId } from '@/types/entity-ids'
 import { ChannelTreeNode } from '@/lib/channelTree'
 import useChannelSelect from '@/use/channelSelect'
 import { Channel } from '@traptitech/traq'
 import SlideDown from '@/components/UI/SlideDown.vue'
 
 const useChannelFolding = () => {
-  const state = reactive({
-    channelFoldingState: {} as Record<ChannelId, boolean>
-  })
+  const foldedChannels = ref(new Set<ChannelId>())
   const onChannelFoldingToggle = (id: ChannelId) => {
-    if (state.channelFoldingState[id]) {
-      state.channelFoldingState[id] = false
+    if (foldedChannels.value.has(id)) {
+      foldedChannels.value.delete(id)
     } else {
-      state.channelFoldingState[id] = true
+      foldedChannels.value.add(id)
     }
   }
   return {
-    ...toRefs(state),
+    foldedChannels,
     onChannelFoldingToggle
   }
 }
@@ -82,9 +74,9 @@ export default defineComponent({
   },
   setup() {
     const { onChannelSelect } = useChannelSelect()
-    const { channelFoldingState, onChannelFoldingToggle } = useChannelFolding()
+    const { foldedChannels, onChannelFoldingToggle } = useChannelFolding()
     return {
-      channelFoldingState,
+      foldedChannels,
       onChannelSelect,
       onChannelFoldingToggle
     }

src/components/Modal/ClipCreateModal/ClipCreateModal.vue

@@ -9,14 +9,14 @@
       v-for="clipFolder in clipFolders"
       :key="clipFolder.id"
       :folder-name="clipFolder.name"
-      :is-selected="selectedState[clipFolder.id]"
+      :is-selected="isSelected.has(clipFolder.id)"
       @click="toggleClip(clipFolder.id)"
     />
   </modal-frame>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, reactive } from 'vue'
+import { defineComponent, computed, ref, Ref } from 'vue'
 import store from '@/store'
 import apis from '@/lib/apis'
 import { compareString } from '@/lib/util/string'
@@ -27,7 +27,7 @@ import useToastStore from '@/use/toastStore'
 
 const useCreateClip = (
   props: { messageId: MessageId },
-  selectedState: Record<ClipFolderId, boolean>
+  isSelected: Ref<Set<ClipFolderId>>
 ) => {
   const { addSuccessToast, addErrorToast } = useToastStore()
 
@@ -36,11 +36,11 @@ const useCreateClip = (
       await apis.clipMessage(clipFolderId, {
         messageId: props.messageId
       })
-      selectedState[clipFolderId] = true
+      isSelected.value.add(clipFolderId)
       addSuccessToast('クリップフォルダに追加しました')
     } catch (e) {
       if (e.response.status === 409) {
-        selectedState[clipFolderId] = true
+        isSelected.value.add(clipFolderId)
         addErrorToast('すでに追加されています')
         return
       } else {
@@ -51,11 +51,11 @@ const useCreateClip = (
   }
   const deleteClip = async (clipFolderId: ClipFolderId) => {
     await apis.unclipMessage(clipFolderId, props.messageId)
-    selectedState[clipFolderId] = false
+    isSelected.value.delete(clipFolderId)
     addSuccessToast('クリップフォルダから削除しました')
   }
   const toggleClip = async (clipFolderId: ClipFolderId) => {
-    if (selectedState[clipFolderId]) {
+    if (isSelected.value.has(clipFolderId)) {
       await deleteClip(clipFolderId)
     } else {
       await createClip(clipFolderId)
@@ -85,17 +85,15 @@ export default defineComponent({
       folders.sort((a, b) => compareString(a.name, b.name))
       return folders
     })
-    const selectedState = reactive(
-      Object.fromEntries(
-        clipFolders.value.map(folder => [folder.id, false])
-      ) as Record<ClipFolderId, boolean>
-    )
+
+    const isSelected = ref(new Set<ClipFolderId>())
     apis.getMessageClips(props.messageId).then(res => {
-      res.data.forEach(mc => (selectedState[mc.folderId] = true))
+      isSelected.value = new Set(res.data.map(c => c.folderId))
     })
+
     const messageContent = computed(() => message.value?.content ?? '')
-    const { toggleClip } = useCreateClip(props, selectedState)
-    return { messageContent, clipFolders, selectedState, toggleClip }
+    const { toggleClip } = useCreateClip(props, isSelected)
+    return { messageContent, clipFolders, isSelected, toggleClip }
   }
 })
 </script>