Merge pull request #1443 from javieraparisivaldes/fixShowHidePagesRig…

…htSideBarI fix when clicking on hide/show, reoder or delete selected pages on right side bar
microsoft · May 4, 2020 · 85c2bce · 85c2bce
2 parents 845e999 + 4c5bed8
commit 85c2bce
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 23 deletions.
diff --git a/src/client/src/containers/PageAddPages/PageCard/index.tsx b/src/client/src/containers/PageAddPages/PageCard/index.tsx
@@ -31,6 +31,7 @@ const PageCard = (props: Props) => {
       isValidTitle: page.isValidTitle,
       licenses: page.licenses,
       title: inferItemName(page.defaultName, selectedPages),
+      id:Math.random().toString()
     };
 
     if (!pageOutOfBounds) {

diff --git a/src/client/src/containers/RightSidebar/SelectPages/PageContainer/DraggablePage/index.tsx b/src/client/src/containers/RightSidebar/SelectPages/PageContainer/DraggablePage/index.tsx
@@ -54,7 +54,7 @@ const DraggablePage = ({
 
   React.useEffect(()=>{
     setNamePage(page.title)
-  },[]);
+  },[page]);
 
   React.useEffect(()=>{
     const hasFocusOnLasPage = selectedPages.length>1 && !page.isDirty && selectedPages.length === idx;
@@ -78,20 +78,15 @@ const DraggablePage = ({
     node.focus();
   }
 
-  const handleKeyDown = (event: React.KeyboardEvent<SVGSVGElement>) => {
+  const deletePageOnKeyDown = (event: React.KeyboardEvent<SVGSVGElement>) => {
     if (event.key === KEY_EVENTS.ENTER || event.key === KEY_EVENTS.SPACE) {
-      handleCloseOnClick();
+      deletePage();
     }
   };
 
-  const handleCloseClick = (idx: number) => {
-    const pagesWithOmittedIdx: ISelected[] = [...selectedPages];
-    pagesWithOmittedIdx.splice(idx, 1);
-    dispatch(setPagesAction(pagesWithOmittedIdx));
-  };
-
-  const handleCloseOnClick = () => {
-    idx && handleCloseClick && handleCloseClick(idx - 1); // correction for idx + 1 to prevent 0th falsey behaviour
+  const deletePage = () => {
+    const selectedPagesUpdated = selectedPages.splice(0).filter(selPage => selPage.id !== page.id);
+    dispatch(setPagesAction(selectedPagesUpdated));
   };
 
   const validateNameAndSetStore = async (newTitle: string) => {
@@ -126,18 +121,24 @@ const DraggablePage = ({
                   maxLength={maxInputLength}
                   value={namePage}
                   onChange={e => {
-                    if (validateNameAndSetStore && idx) {
-                      page.isDirty=true;
-                      validateNameAndSetStore(e.target.value);
+                    const isDirty = namePage !== e.target.value;
+                    if (isDirty){
+                      if (validateNameAndSetStore && idx) {
+                        page.isDirty=true;
+                        validateNameAndSetStore(e.target.value);
+                      }
                     }
                   }}
                   onBlur={e => {
-                    if (validateNameAndSetStore && idx && page && page.isValidTitle===false) {
-                      validateNameAndSetStore(validValue);
-                    }else{
-                      validateNameAndSetStore(e.target.value);
+                    const isDirty = namePage !== e.target.value;
+                    if (isDirty){
+                      if (validateNameAndSetStore && idx && page && page.isValidTitle===false) {
+                        validateNameAndSetStore(validValue);
+                      }else{
+                        validateNameAndSetStore(e.target.value);
+                      }
+                      if (page.isValidTitle) setValidValue(page.title);
                     }
-                    if (page.isValidTitle) setValidValue(page.title);
                   }}
                   autoFocus={page.isDirty}
                   disabled={selectedPages.filter(selPage => selPage.title!==page.title && selPage.isValidTitle===false).length>0}
@@ -163,8 +164,8 @@ const DraggablePage = ({
         {(totalCount !== undefined ? totalCount > 1 : true) && (
           <CloseSVG
             tabIndex={0}
-            onClick={handleCloseOnClick}
-            onKeyDown={handleKeyDown}
+            onClick={deletePage}
+            onKeyDown={deletePageOnKeyDown}
             className={styles.cancelIcon}
             aria-label={intl.formatMessage(messages.deleteItem)}
           />

diff --git a/src/client/src/store/userSelection/frameworks/saga.ts b/src/client/src/store/userSelection/frameworks/saga.ts
@@ -33,8 +33,17 @@ export function* frameworkSaga(vscode: any) {
         yield put({ type: TEMPLATES_TYPEKEYS.SET_PAGES_OPTIONS_SUCCESS, payload: pageOptions });
 
         if (selectedPages.length === 0){
-          const blankPage = pageOptions.filter(page => page.title === "Blank")[0];
-          selectedPages.push(blankPage)
+          const blankPage = pageOptions[0];
+          const blankSelect: ISelected = {
+            author: blankPage.author,
+            defaultName: blankPage.defaultName,
+            internalName: blankPage.internalName,
+            isValidTitle: blankPage.isValidTitle,
+            licenses: blankPage.licenses,
+            title: blankPage.defaultName ? blankPage.defaultName : "",
+            id:Math.random().toString()
+          };
+          selectedPages.push(blankSelect)
         }else{
           selectedPages.map((selectedPage: ISelected)=>{
             selectedPage.internalName = `wts.Page.${selectedFrontend.internalName}.${selectedPage.defaultName ? selectedPage.defaultName.replace(" ",""):""}`;