@openneuro/app 4.12.0-alpha.0 → 4.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.12.0-alpha.0",
+  "version": "4.12.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -20,8 +20,8 @@
     "@emotion/react": "11.6.0",
     "@emotion/styled": "11.6.0",
     "@niivue/niivue": "0.23.1",
-    "@openneuro/client": "^4.12.0-alpha.0",
-    "@openneuro/components": "^4.12.0-alpha.0",
+    "@openneuro/client": "^4.12.0",
+    "@openneuro/components": "^4.12.0",
     "bids-validator": "1.9.9",
     "bytes": "^3.0.0",
     "comlink": "^4.0.5",
@@ -104,5 +104,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3d8f7524b2233605f2da66f05de90b2e96e7a127"
+  "gitHead": "611c84329ef63f730878f701aafaa1bc4c703ea4"
 }

package/src/scripts/search/__tests__/search-params-ctx.spec.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
-import { render } from '@testing-library/react'
-import { SearchParamsCtx } from '../search-params-ctx'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { SearchParamsProvider, SearchParamsCtx } from '../search-params-ctx'
+import AuthorInput from '../inputs/author-input'
+import { MemoryRouter } from 'react-router-dom'
 import '@testing-library/jest-dom'
 
 /**
@@ -15,6 +17,48 @@ export const searchRender = (ui, { providerProps, ...renderOptions }) => {
   )
 }
 
-describe('SearchParamsCtx', () => {
-  it('initializes with expected defaults', () => {})
+describe('SearchParamsProvider', () => {
+  it('restores URL searchParams state', () => {
+    const route = '/search?query={"authors"%3A["Test+Author"]}'
+    const wrapper = ({ children }) => (
+      <MemoryRouter initialEntries={[route]}>
+        <SearchParamsProvider>{children}</SearchParamsProvider>
+      </MemoryRouter>
+    )
+    render(
+      <SearchParamsCtx.Consumer>
+        {value => <span>Received: {value.searchParams.authors.pop()}</span>}
+      </SearchParamsCtx.Consumer>,
+      { wrapper },
+    )
+    expect(screen.getByText(/^Received:/).textContent).toBe(
+      'Received: Test Author',
+    )
+  })
+  it('edits array fields correctly', () => {
+    const route = '/search?query={"authors"%3A["Test+Author"]}'
+    const wrapper = ({ children }) => (
+      <MemoryRouter initialEntries={[route]}>
+        <SearchParamsProvider>{children}</SearchParamsProvider>
+      </MemoryRouter>
+    )
+    render(
+      <SearchParamsCtx.Consumer>
+        {value => (
+          <>
+            <AuthorInput />
+            <span>Received: {value.searchParams.authors.join(', ')}</span>
+          </>
+        )}
+      </SearchParamsCtx.Consumer>,
+      { wrapper },
+    )
+    const textInput = screen.getByRole('textbox')
+    const button = screen.getByRole('button')
+    fireEvent.change(textInput, { target: { value: 'New Author' } })
+    fireEvent.click(button)
+    expect(screen.getByText(/^Received:/).textContent).toBe(
+      'Received: Test Author, New Author',
+    )
+  })
 })

package/src/scripts/search/search-params-ctx.tsx

@@ -1,10 +1,5 @@
-import React, {
-  createContext,
-  useState,
-  useContext,
-  FC,
-  ReactNode,
-} from 'react'
+import React, { createContext, useContext, FC, ReactNode } from 'react'
+import { useSearchParams } from 'react-router-dom'
 import initialSearchParams from './initial-search-params'
 
 export const SearchParamsCtx = createContext(null)
@@ -16,9 +11,34 @@ interface SearchParamsProviderProps {
 export const SearchParamsProvider: FC<SearchParamsProviderProps> = ({
   children,
 }) => {
-  const [searchParams, setSearchParams] = useState(initialSearchParams)
+  const [searchQuery, setSearch] = useSearchParams()
+
+  let searchParams
+  try {
+    const query = searchQuery.get('query')
+    if (query) {
+      searchParams = JSON.parse(query)
+    }
+  } catch (err) {
+    console.error(err)
+  }
+
+  const setSearchParams = newParamsCall => {
+    const merged = { ...searchParams, ...newParamsCall(searchParams) }
+    setSearch(
+      {
+        query: JSON.stringify(merged),
+      },
+      { replace: true },
+    )
+  }
+
   return (
-    <SearchParamsCtx.Provider value={{ searchParams, setSearchParams }}>
+    <SearchParamsCtx.Provider
+      value={{
+        searchParams: { ...initialSearchParams, ...searchParams },
+        setSearchParams,
+      }}>
       {children}
     </SearchParamsCtx.Provider>
   )