fix: keep search params when redirecting (#679)

cypress/e2e/shuffle.cy.ts

@@ -79,6 +79,39 @@ describe('Shuffle', () => {
  });
  });
 
+ it('displays item with children shuffled when redirected', () => {
+ const root = FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items[0];
+ cy.visit(
+ buildContentPagePath({
+ rootId: root.id,
+ itemId: '',
+ searchParams: 'shuffle=true',
+ }),
+ );
+
+ cy.get(`.${FOLDER_NAME_TITLE_CLASS}`).should('contain', root.name);
+
+ expectFolderLayout({
+ rootId: root.id,
+ items: FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items,
+ });
+
+ // shuffled order is always the same for a given member + item id
+ const shuffledOrder = [2, 4, 5, 3, 1];
+
+ cy.get(`.${buildTreeItemClass(root.id)}`)
+ .siblings(`ul.${TREE_NODE_GROUP_CLASS}:first`)
+ .children('li')
+ .each(($li, index) => {
+ // assert the text of each li matches the expected order
+ cy.wrap($li).should(
+ 'have.text',
+ FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items[shuffledOrder[index]]
+ .name,
+ );
+ });
+ });
+
  it('displays item with children shuffled in the same order on a second visit', () => {
  const root = FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items[0];
  cy.visit(

docs/shuffling.md

@@ -0,0 +1,20 @@
+# Shuffling
+
+Shuffling is a hidden feature only available when adding a query parameter to the URL of the Graasp Player interface.
+In this document, we describe how shuffling works.
+
+## Query Parameter
+
+The query parameter that needs to be added is `shuffle=true`.
+
+## Behavior
+
+Shuffling only shuffles the direct children of a root item, **excluding** the last child.
+The last child is not shuffled to allow for experiments / learning experiences to have the same **first** and **last** items.
+This means that the root item will always be displayed first and the last child will always be displayed last.
+A member will always see an item shuffled in the same order.
+
+## Randomization
+
+Shuffling is achieved using the Fisher-Yates algorithm.
+Randomization is based on seed that is calculated by adding the UUID of the member and the UUID of the root item.

src/App.tsx

@@ -26,10 +26,19 @@ import PageWrapper from './modules/layout/PageWrapper';
 
 const RedirectToRootContentPage = () => {
  const { rootId } = useParams();
+ const [searchParams] = useSearchParams();
  const { t } = usePlayerTranslation();
+
  if (rootId) {
  return (
- <Navigate to={buildContentPagePath({ rootId, itemId: rootId })} replace />
+ <Navigate
+ to={buildContentPagePath({
+ rootId,
+ itemId: rootId,
+ searchParams: searchParams.toString(),
+ })}
+ replace
+ />
  );
  }
  return (