@ndla/ui 18.0.0 → 18.0.1

package/src/TreeStructure/TreeStructure.tsx

@@ -13,6 +13,7 @@ import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { spacing, fonts } from '@ndla/core';
+import { uniq } from 'lodash';
 import TreeStructureStyledWrapper from './TreeStructureWrapper';
 import FolderItems from './FolderItems';
 import { getIdPathsOfFolder, getPathOfFolder, getFolderName } from './helperFunctions';
@@ -44,18 +45,19 @@ const TreeStructure = ({
 }: TreeStructureProps) => {
   const { t } = useTranslation();
   const [newFolder, setNewFolder] = useState<NewFolderProps | undefined>();
-  const [openFolders, setOpenFolders] = useState<Set<string>>(new Set(defaultOpenFolders || []));
+  const [openFolders, setOpenFolders] = useState<string[]>(defaultOpenFolders || []);
   const [focusedFolderId, setFocusedFolderId] = useState<string | undefined>();
-  const [markedFolderId, setMarkedFolderId] = useState<string | undefined>(folderIdMarkedByDefault || data[0].id);
+  const [markedFolderId, setMarkedFolderId] = useState<string | undefined>(folderIdMarkedByDefault || data[0]?.id);
   const treestructureRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const rootLevelId = useMemo(() => uuid(), []); // TODO: use useId hook when we update to React 18
 
   useEffect(() => {
-    setOpenFolders((prev) => {
-      defaultOpenFolders?.forEach((id) => prev.add(id));
-      return new Set(prev);
-    });
+    if (defaultOpenFolders) {
+      setOpenFolders((prev) => {
+        return uniq([...defaultOpenFolders, ...prev]);
+      });
+    }
   }, [defaultOpenFolders]);
 
   useEffect(() => {
@@ -65,48 +67,44 @@ const TreeStructure = ({
   }, [loading]);
 
   const onToggleOpen = (id: string) => {
-    setOpenFolders((prev) => {
-      if (prev.has(id)) {
-        prev.delete(id);
-        // Did we just closed a folder with a marked folder inside it?
-        // If so, we need to mark the folder we just closed.
-        if (markedFolderId) {
-          const closingFolderPath = getPathOfFolder(data, id);
-          const markedFolderPath = getPathOfFolder(data, markedFolderId);
-          const markedFolderIsSubPath = closingFolderPath.every(
-            (folderId, _index) => markedFolderPath[_index] === folderId,
-          );
-          if (markedFolderIsSubPath) {
-            setMarkedFolderId(closingFolderPath[closingFolderPath.length - 1]);
-          }
+    if (openFolders.includes(id)) {
+      // Did we just closed a folder with a marked folder inside it?
+      // If so, we need to mark the folder we just closed.
+      if (markedFolderId) {
+        const closingFolderPath = getPathOfFolder(data, id);
+        const markedFolderPath = getPathOfFolder(data, markedFolderId);
+        const markedFolderIsSubPath = closingFolderPath.every(
+          (folderId, _index) => markedFolderPath[_index] === folderId,
+        );
+        if (markedFolderIsSubPath) {
+          setMarkedFolderId(closingFolderPath[closingFolderPath.length - 1]);
         }
-      } else {
-        prev.add(id);
       }
-      return new Set(prev);
-    });
+      setOpenFolders(openFolders.filter((folder) => folder !== id));
+    } else {
+      setOpenFolders(uniq([...openFolders, id]));
+    }
   };
 
   const onCreateNewFolder = (props: { idPaths: number[]; parentId?: string }) => {
     setNewFolder(props);
   };
 
-  const onSaveNewFolder = async (value: string) => {
+  const onSaveNewFolder = (value: string) => {
     if (newFolder) {
       // We would like to create a new folder with the name of value.
       // Its location in structure is based on newFolder object
-      const newFolderId = await onNewFolder({ ...newFolder, value });
-      if (newFolderId) {
-        setMarkedFolderId(newFolderId);
-        setFocusedFolderId(newFolderId);
-        // Open current folder in case it was closed..
-        setOpenFolders((prev) => {
+      onNewFolder({ ...newFolder, value }).then((newFolderId) => {
+        if (newFolderId) {
+          setMarkedFolderId(newFolderId);
+          setFocusedFolderId(newFolderId);
+          // Open current folder in case it was closed..
+
           if (newFolder.parentId) {
-            prev.add(newFolder.parentId);
+            setOpenFolders(uniq([...openFolders, newFolder.parentId]));
           }
-          return new Set(prev);
-        });
-      }
+        }
+      });
     }
   };
 

package/src/TreeStructure/TreeStructure.types.ts

@@ -49,7 +49,7 @@ export type onCreateNewFolderProp = ({
   parentId: string | undefined;
 }) => void;
 
-export type SetOpenFolderProp = React.Dispatch<React.SetStateAction<Set<string>>>;
+export type SetOpenFolderProp = React.Dispatch<React.SetStateAction<string[]>>;
 export type SetFocusedFolderId = React.Dispatch<React.SetStateAction<string | undefined>>;
 
 export type FolderChildFuncType = (id: string, tabIndex: number) => ReactNode;
@@ -60,7 +60,7 @@ export interface FolderItemsProps extends CommonFolderProps {
   onCancelNewFolder: () => void;
   onCreateNewFolder: onCreateNewFolderProp;
   newFolder: NewFolderProps | undefined;
-  openFolders: Set<string>;
+  openFolders: string[];
   markedFolderId?: string;
   onMarkFolder: (id: string) => void;
   idPaths: number[];

package/src/TreeStructure/keyboardNavigation/keyboardNavigation.ts

@@ -66,7 +66,7 @@ const keyboardNavigation = ({
       if (dataId === id) {
         elementWithKeyFocus.paths = paths;
         elementWithKeyFocus.index = _index;
-        elementWithKeyFocus.isOpen = openFolders.has(dataId) && childData && childData.length > 0;
+        elementWithKeyFocus.isOpen = openFolders.includes(dataId) && childData && childData.length > 0;
         elementWithKeyFocus.data = childData;
         elementWithKeyFocus.parent = parent;
         elementWithKeyFocus.parentId = parentId;
@@ -78,7 +78,7 @@ const keyboardNavigation = ({
   if (!updatePathToElementWithKeyFocus(data, [], data)) {
     // Couldn't find its location in the tree.
     // This should not happen, reset its value to root.
-    setFocusedFolderId(e.key === 'ArrowDown' ? data[0].id : undefined);
+    setFocusedFolderId(e.key === 'ArrowDown' ? data[0]?.id : undefined);
     return;
   }
   e.preventDefault();
@@ -113,7 +113,7 @@ const keyboardNavigation = ({
   }
 
   if (!id && e.key === 'ArrowDown') {
-    setFocusedFolderId(data[0].id);
+    setFocusedFolderId(data[0]?.id);
     return;
   }
   if (!id) {
@@ -124,7 +124,7 @@ const keyboardNavigation = ({
     if (elementWithKeyFocus.index > 0) {
       // Move upwards to the parent folder
       setFocusedFolderId(
-        elementWithKeyFocus.parent ? elementWithKeyFocus.parent[elementWithKeyFocus.index - 1].id : undefined,
+        elementWithKeyFocus.parent ? elementWithKeyFocus.parent[elementWithKeyFocus.index - 1]?.id : undefined,
       );
     } else if (elementWithKeyFocus.paths.length > 0) {
       elementWithKeyFocus.paths.pop();
@@ -133,14 +133,14 @@ const keyboardNavigation = ({
         findParent = findParent[index].data as FolderStructureProps[];
       });
       const parentsCurrentIndex = findParent.findIndex(({ id }) => id === elementWithKeyFocus.parentId);
-      setFocusedFolderId(findParent[parentsCurrentIndex].id);
+      setFocusedFolderId(findParent[parentsCurrentIndex]?.id);
     }
     return;
   }
 
   if (elementWithKeyFocus.isOpen) {
     if (elementWithKeyFocus.data?.length) {
-      setFocusedFolderId(elementWithKeyFocus.data[0].id);
+      setFocusedFolderId(elementWithKeyFocus.data[0]?.id);
     } else {
       // move to next child of parent if any... need new traverse :-/
       traverseUpwards(data, setFocusedFolderId, elementWithKeyFocus.paths, elementWithKeyFocus.index);
@@ -150,7 +150,7 @@ const keyboardNavigation = ({
 
   if (elementWithKeyFocus.parent && elementWithKeyFocus.index < elementWithKeyFocus.parent?.length - 1) {
     // Move downwards to the next child
-    setFocusedFolderId(elementWithKeyFocus.parent[elementWithKeyFocus.index + 1].id);
+    setFocusedFolderId(elementWithKeyFocus.parent[elementWithKeyFocus.index + 1]?.id);
     return;
   }
 

package/src/TreeStructure/keyboardNavigation/keyboardNavigation.types.ts

@@ -12,7 +12,7 @@ export interface KeyboardNavigationProps {
   e: React.KeyboardEvent<HTMLElement>;
   data: FolderStructureProps[];
   setFocusedFolderId: SetFocusedFolderId;
-  openFolders: Set<string>;
+  openFolders: string[];
   onToggleOpen: (id: string) => void;
   focusedFolderId: string | undefined;
 }

package/src/locale/messages-en.ts

@@ -983,6 +983,7 @@ const messages = {
     close: 'Close fact box',
   },
   myNdla: {
+    myNDLA: 'My NDLA',
     resources: '{{count}} Resource',
     resources_plural: '{{count}} Resources',
     folders: '{{count}} Folder',

package/src/locale/messages-nb.ts

@@ -981,6 +981,7 @@ const messages = {
     close: 'Lukk faktaboks',
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',

package/src/locale/messages-nn.ts

@@ -982,6 +982,7 @@ const messages = {
     close: 'Lukk faktaboks',
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressursar',
     folders: '{{count}} mappe',

package/src/locale/messages-se.ts

@@ -981,6 +981,7 @@ const messages = {
     close: 'Lukk faktaboks',
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',

package/src/locale/messages-sma.ts

@@ -981,6 +981,7 @@ const messages = {
     close: 'Lukk faktaboks',
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',