@ndla/ui 16.2.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/index.ts

@@ -127,7 +127,7 @@ export { default as CreatedBy } from './CreatedBy';
 
 export { default as Breadcrumblist } from './Breadcrumblist';
 
-export { MessageBox, MessageBoxTag, MessageBoxType } from './MessageBox';
+export { MessageBox, MessageBoxTag, MessageBanner } from './Messages';
 
 export { ResourceBox } from './ResourceBox';
 
@@ -236,7 +236,7 @@ export { Notion, ConceptNotion } from './Notion';
 export type { NotionVisualElementType, ConceptNotionType } from './Notion';
 
 export { BannerCard } from './BannerCard';
-export { VerticalNavigation, Folder, FolderInput } from './MyNdla';
+export { Folder, FolderInput } from './MyNdla';
 export { ListResource, BlockResource } from './Resource';
 export type { ListResourceProps } from './Resource';
 export type { TagType } from './TagSelector';

package/src/locale/messages-en.ts

@@ -15,6 +15,10 @@ const titleTemplate = ' - NDLA';
 
 const messages = {
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Edit foldername',
+      delete: 'Delete',
+    },
     createFolder: 'Create folder',
     newFolder: {
       placeholder: 'Add foldername',
@@ -22,7 +26,8 @@ const messages = {
     },
   },
   tagSelector: {
-    placeholder: 'Add to tag',
+    label: 'Add tag',
+    placeholder: 'Enter tag name',
     removeTag: 'Remove tag {{name}}',
     hideAllTags: 'Hide all tags',
     showAllTags: 'Show all tags',
@@ -978,6 +983,7 @@ const messages = {
     close: 'Close fact box',
   },
   myNdla: {
+    myNDLA: 'My NDLA',
     resources: '{{count}} Resource',
     resources_plural: '{{count}} Resources',
     folders: '{{count}} Folder',
@@ -989,6 +995,8 @@ const messages = {
     newFolderUnder: 'Create new folder under {{folderName}}',
     myAccount: 'My account',
     favourites: 'Favourites',
+    addToFavourites: 'Add to my favourites',
+    alreadyFavourited: 'Already in my favourites',
     help: 'Help',
     more: 'More options',
     listView: 'List view',
@@ -1007,6 +1015,7 @@ const messages = {
       terms: 'terms of use',
       feide: 'We have retrieved this information from Feide',
       newFavourite: 'Recently favourited',
+
       storageInfo: {
         title: 'How to save your favourite resources from NDLA',
         text: 'When you wish to save a resource, you can do so by clicking the heart on the top right corner of the page. You will then get an option to store the resource in a folder',

package/src/locale/messages-nb.ts

@@ -15,6 +15,10 @@ const titleTemplate = ' - NDLA';
 
 const messages = {
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenavn',
+      delete: 'Slett',
+    },
     createFolder: 'Lag mappe',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
@@ -22,8 +26,9 @@ const messages = {
     },
   },
   tagSelector: {
-    placeholder: 'Tilknytt tag',
-    removeTag: 'Ta vekk tilknytning til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag navn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alle tagger',
     showAllTags: 'Vis alle tagger',
   },
@@ -976,6 +981,7 @@ const messages = {
     close: 'Lukk faktaboks',
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
@@ -987,6 +993,8 @@ const messages = {
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favoritter',
+    addToFavourites: 'Legg til i mine favoritter',
+    alreadyFavourited: 'Allerede lagt til i mine favoritter',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',

package/src/locale/messages-nn.ts

@@ -15,15 +15,20 @@ const titleTemplate = ' - NDLA';
 
 const messages = {
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenamn',
+      delete: 'Slett',
+    },
     createFolder: 'Lag mappe',
     newFolder: {
-      placeholder: 'Skriv navn på mappe',
+      placeholder: 'Skriv namn på mappe',
       defaultName: 'Ny mappe',
     },
   },
   tagSelector: {
-    placeholder: 'Tilknytt tag',
-    removeTag: 'Ta vekk tilknytninga til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag namn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alle tagger',
     showAllTags: 'Vis alle tagger',
   },
@@ -977,6 +982,7 @@ const messages = {
     close: 'Lukk faktaboks',
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressursar',
     folders: '{{count}} mappe',
@@ -988,6 +994,8 @@ const messages = {
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favorittar',
+    addToFavourites: 'Legg til i mine favorittar',
+    alreadyFavourited: 'Allereie lagt til i mine favorittar',
     help: 'Hjelp',
     more: 'Fleire val',
     listView: 'Listevisning',

package/src/locale/messages-se.ts

@@ -15,6 +15,10 @@ const titleTemplate = ' - NDLA';
 
 const messages = {
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenavn',
+      delete: 'Slett',
+    },
     createFolder: 'Lag mappe',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
@@ -22,8 +26,9 @@ const messages = {
     },
   },
   tagSelector: {
-    placeholder: 'Legg til tag',
-    removeTag: 'Ta vekk tilknytninga til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag navn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alla tags',
     showAllTags: 'Vis alla tags',
   },
@@ -976,6 +981,7 @@ const messages = {
     close: 'Lukk faktaboks',
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
@@ -987,6 +993,8 @@ const messages = {
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favoritter',
+    addToFavourites: 'Legg til i mine favoritter',
+    alreadyFavourited: 'Allerede lagt til i mine favoritter',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',

package/src/locale/messages-sma.ts

@@ -15,6 +15,10 @@ const titleTemplate = ' - NDLA';
 
 const messages = {
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenavn',
+      delete: 'Slett',
+    },
     createFolder: 'Lag mappe',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
@@ -22,8 +26,9 @@ const messages = {
     },
   },
   tagSelector: {
-    placeholder: 'Tilknytt tag',
-    removeTag: 'Ta vekk tilknytning til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag navn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alle tagger',
     showAllTags: 'Vis alle tagger',
   },
@@ -976,6 +981,7 @@ const messages = {
     close: 'Lukk faktaboks',
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
@@ -987,6 +993,8 @@ const messages = {
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favoritter',
+    addToFavourites: 'Legg til i mine favoritter',
+    alreadyFavourited: 'Allerede lagt til i mine favoritter',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',