fix selectedViewId when views change

Author: Davy-c

src/cloud/components/Views/index.tsx

@@ -1,3 +1,4 @@
+import { isEqual } from 'lodash'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import Flexbox from '../../../design/components/atoms/Flexbox'
 import styled from '../../../design/lib/styled'
@@ -39,6 +40,13 @@ const ViewsList = ({
   )
   const { createViewApi } = useCloudApi()
 
+  const selectedViewIdRef = useRef(selectedViewId)
+  const viewsIdsRef = useRef(views.map((v) => v.id))
+
+  useEffect(() => {
+    selectedViewIdRef.current = selectedViewId
+  }, [selectedViewId])
+
   useEffect(() => {
     if (parent.target.id === targetIdRef.current) {
       return
@@ -48,6 +56,19 @@ const ViewsList = ({
     setSelectedViewId(views.length > 0 ? views[0].id : undefined)
   }, [parent.target, views])
 
+  useEffect(() => {
+    const newViewsIds = views.map((v) => v.id)
+    if (!isEqual(newViewsIds, viewsIdsRef.current)) {
+      if (
+        selectedViewIdRef.current != null &&
+        !newViewsIds.includes(selectedViewIdRef.current)
+      ) {
+        setSelectedViewId(views.length > 0 ? views[0].id : undefined)
+      }
+      viewsIdsRef.current = newViewsIds
+    }
+  }, [views])
+
   const currentView = useMemo(() => {
     if (selectedViewId == null) {
       return undefined