setInitialState: set state only in react-searchkit component

docs/docs/components/react_search_kit.md

@@ -10,9 +10,7 @@ It provides state and configuration to the application.
 ## Usage
 
 ```jsx
-<ReactSearchKit
-  searchApi={searchApi}
->
+<ReactSearchKit searchApi={searchApi}>
   ... React-SearchKit components ...
 </ReactSearchKit>
 ```
@@ -21,37 +19,33 @@ See the [complete guide](main_concepts.md) for detailed information.
 
 ## Props
 
-* **searchApi** `object` *required*
+- **searchApi** `object` _required_
 
   An instance of the adapter class for your search backend.
 
-* **urlHandlerApi** `object` *optional*
+- **urlHandlerApi** `object` _optional_
 
   An object containing configuration for handling URL parameters:
 
-  * **enabled** `boolean`: `true` if URL parameters should be updated `false` otherwise. Default `true`.
-  * **overrideConfig** `object`:
+  - **enabled** `boolean`: `true` if URL parameters should be updated `false` otherwise. Default `true`.
+  - **overrideConfig** `object`:
 
-      * **keepHistory** `boolean`: `true` if each change of the URL parameters should push a new state to the browser history, `false` if it should replace it instead. Default `true`.
-      * **urlFilterSeparator** `object`: a character(s) to override the default character defined in `UrlHandlerApi`, used when separating child filters.
-      * **urlParamsMapping** `object`: an object to override the default mapping defined in `UrlHandlerApi`, used when serializing each query state field to an URL parameter.
-      * **urlParamValidator** `object`: an object to override the default implementation of `UrlParamValidator` in `UrlHandlerApi`.
-      * **urlParser** `object`: an object to override the default implementation of `UrlParser` in `UrlHandlerApi`.
+    - **keepHistory** `boolean`: `true` if each change of the URL parameters should push a new state to the browser history, `false` if it should replace it instead. Default `true`.
+    - **urlFilterSeparator** `object`: a character(s) to override the default character defined in `UrlHandlerApi`, used when separating child filters.
+    - **urlParamsMapping** `object`: an object to override the default mapping defined in `UrlHandlerApi`, used when serializing each query state field to an URL parameter.
+    - **urlParamValidator** `object`: an object to override the default implementation of `UrlParamValidator` in `UrlHandlerApi`.
+    - **urlParser** `object`: an object to override the default implementation of `UrlParser` in `UrlHandlerApi`.
 
-  * **customHandler** `object`: override entirely the default class `UrlHandlerApi`.
+  - **customHandler** `object`: override entirely the default class `UrlHandlerApi`.
 
-* **searchOnInit** `object` *optional*
+- **searchOnInit** `object` _optional_
 
   A boolean to perform a search when the application is mounted. Default `true`.
 
-* **defaultSortByOnEmptyQuery** `boolean` *optional*
-
-  A boolean to define a default `sort by` value when the query string is empty. This is useful when the results sorting should be different when the user inserts a query string or not (e.g. `most recent` or `most relevant` first).
-
-* **appName** `string` *optional*
+- **appName** `string` _optional_
 
   A name identifier to distinguish uniquely the application. Default `RSK`.
 
-* **eventListenerEnabled** `boolean` *optional*
+- **eventListenerEnabled** `boolean` _optional_
 
-  If `true` the application listens to the `queryChanged` event else if `false` no listener is registered. When this event is emitted the application triggers a search based on the payload that is passed to the event at the emission time. Default `false`.
+  If `true` the application listens to the `queryChanged` event else if `false` no listener is registered. When this event is emitted the application triggers a search based on the payload that is passed to the event at the emission time. Default `false`.

docs/docs/components/results_per_page.md

@@ -12,7 +12,6 @@ The component is **not** displayed while executing the search query or if there
 ```jsx
 <ResultsPerPage
   values={[{text: "Ten", value: 10}, {text: "Twenty", value: 20}]}
-  defaultValue={20}
 />
 ```
 
@@ -22,10 +21,6 @@ The component is **not** displayed while executing the search query or if there
 
   A list of possible values, where each value has the format `{ text: "Fifty", value: 50 }`.
 
-* **defaultValue** `String`
-
-  The default value to pre-select when rendering the component. For example, `20`.
-
 * **renderElement** `function` *optional*
 
   An optional function to override the default rendered component.

docs/docs/components/sort_by.md

@@ -12,7 +12,6 @@ The component is **not** displayed while executing the search query or if there
 ```jsx
 <SortBy
   values={[{text: "Most recent", value: "created"}, {text: "Title", value: "title"}]}
-  defaultValue="title"
 />
 ```
 
@@ -22,14 +21,6 @@ The component is **not** displayed while executing the search query or if there
 
   A list of possible values, where each value has the format `{ text: "Creation Date", value: "created" }`.
 
-* **defaultValue** `String`
-
-  The default value to pre-select when rendering the component. For example, `"created"`.
-
-* **defaultSortByOnEmptyQuery** `String` *optional*
-
-  Value to use when executing a search with an empty query string. When searching with an empty query, users normally expect most recent results, while searching with a defined query string, best match or any other sorting field. Default value: the value of `defaultValue` prop.
-
 - **label** `function` _optional_
 
   An optional function to wrap the component with a prefix and suffix string. <br />

docs/docs/components/sort_order.md

@@ -12,7 +12,6 @@ The component is **not** displayed while executing the search query or if there
 ```jsx
 <SortOrder
   values={[{text: "Asc", value: "asc"}, {text: "Desc", value: "desc"}]}
-  defaultValue="desc"
 />
 ```
 
@@ -22,10 +21,6 @@ The component is **not** displayed while executing the search query or if there
 
   A list of possible values, where each value has the format `{ text: "Asc", value: "asc" }`.
 
-* **defaultValue** `String`
-
-  The default value to pre-select when rendering the component. For example, `"desc"`.
-
 - **label** `function` _optional_
 
   An optional function to wrap the component with a prefix and suffix string. <br />

docs/docs/main_concepts.md

@@ -18,8 +18,6 @@ The application is split in 3 main parts:
 Components interact with the app using the standard Redux data flow. Each component is connected to part of the application state and receives only the data and the actions that it needs and should responsible for.
 For example, the `SearchBar` component receives the current query string stored in the state and can perform the action to update it.
 
-Some components do have also extra properties, such as default values. For example, the `SortBy` component receive a prop `defaultValue`: when mounting the component, a specific action will be fired to set the provided value as the initial state for the `sortBy` field.
-
 You can find the list of components in the [Components](components/react_search_kit.md) section.
 
 ### Look And Feel

src/demos/cern-videos/App.js

@@ -37,7 +37,6 @@ const sortValues = [
     text: 'Newest',
     sortBy: 'mostrecent',
     sortOrder: 'asc',
-    default: true,
   },
   {
     text: 'Oldest',
@@ -57,6 +56,14 @@ const resultsPerPageValues = [
   },
 ];
 
+const initialState = {
+  sortBy: 'mostrecent',
+  sortOrder: 'asc',
+  layout: 'list',
+  page: 1,
+  size: 10,
+};
+
 const searchApi = new InvenioSearchApi({
   axios: {
     url: 'https://videos.cern.ch/api/records/',
@@ -148,6 +155,7 @@ export class App extends Component {
       <OverridableContext.Provider value={overriddenComponents}>
         <ReactSearchKit
           searchApi={searchApi}
+          initialQueryState={initialState}
           urlHandlerApi={{ enabled: false }}
         >
           <Container>

src/demos/cern-videos/Results.js

@@ -48,7 +48,6 @@ export class Results extends Component {
               <ResultsPerPage
                 values={this.resultsPerPageValues}
                 label={(cmp) => <> Show {cmp} results per page</>}
-                defaultValue={10}
               />
             </span>
             <LayoutSwitcher defaultLayout="grid" />

src/demos/elasticsearch/App.js

@@ -44,6 +44,12 @@ const searchApi = new ESSearchApi({
   },
 });
 
+const initialState = {
+  layout: 'list',
+  page: 1,
+  size: 10,
+};
+
 const customAggComp = (title, containerCmp) => {
   return containerCmp ? (
     <Menu vertical>
@@ -151,7 +157,7 @@ export class App extends Component {
   render() {
     return (
       <OverridableContext.Provider value={overriddenComponents}>
-        <ReactSearchKit searchApi={searchApi}>
+        <ReactSearchKit searchApi={searchApi} initialQueryState={initialState}>
           <Container>
             <Grid>
               <Grid.Row>

src/demos/zenodo/App.js

@@ -38,7 +38,6 @@ const sortValues = [
     text: 'Most viewed',
     sortBy: 'mostviewed',
     sortOrder: 'asc',
-    defaultOnEmptyString: true,
   },
   {
     text: 'Least viewed',
@@ -49,7 +48,6 @@ const sortValues = [
     text: 'Newest',
     sortBy: 'mostrecent',
     sortOrder: 'asc',
-    default: true,
   },
   {
     text: 'Oldest',
@@ -81,6 +79,14 @@ const searchApi = new InvenioSearchApi({
   },
 });
 
+const initialState = {
+  sortBy: 'mostrecent',
+  sortOrder: 'asc',
+  layout: 'list',
+  page: 1,
+  size: 10,
+};
+
 export const ZenodoResultsListItem = ({ result, index }) => {
   const metadata = result.metadata;
   return (
@@ -162,7 +168,7 @@ export class App extends Component {
   render() {
     return (
       <OverridableContext.Provider value={overriddenComponents}>
-        <ReactSearchKit searchApi={searchApi}>
+        <ReactSearchKit searchApi={searchApi} initialQueryState={initialState}>
           <Container>
             <Grid>
               <Grid.Row>

src/demos/zenodo/Results.js

@@ -47,7 +47,6 @@ export class Results extends Component {
             <span style={({ marginLeft: '0.5em' }, { marginRight: '0.5em' })}>
               <ResultsPerPage
                 values={this.resultsPerPageValues}
-                defaultValue={10}
                 label={(cmp) => <>Show {cmp} results per page</>}
               />
             </span>

src/lib/components/LayoutSwitcher/LayoutSwitcher.js

@@ -16,17 +16,7 @@ import { buildUID } from '../../util';
 class LayoutSwitcher extends Component {
   constructor(props) {
     super(props);
-    this.defaultValue = this.props.defaultLayout;
     this.updateLayout = props.updateLayout;
-    this.setInitialState = props.setInitialState;
-  }
-
-  componentDidMount() {
-    if (this.props.currentLayout === null) {
-      this.setInitialState({
-        layout: this.defaultValue,
-      });
-    }
   }
 
   onLayoutChange = (layoutName) => {
@@ -50,17 +40,14 @@ class LayoutSwitcher extends Component {
 }
 
 LayoutSwitcher.propTypes = {
-  defaultLayout: PropTypes.oneOf(['list', 'grid']),
   updateLayout: PropTypes.func.isRequired,
-  setInitialState: PropTypes.func.isRequired,
   loading: PropTypes.bool.isRequired,
   currentLayout: PropTypes.string,
   totalResults: PropTypes.number.isRequired,
   overridableId: PropTypes.string,
 };
 
 LayoutSwitcher.defaultProps = {
-  defaultLayout: 'list',
   currentLayout: null,
   overridableId: '',
 };

src/lib/components/LayoutSwitcher/index.js

@@ -7,15 +7,14 @@
  */
 
 import { connect } from '../../store';
-import { updateResultsLayout, setInitialState } from '../../state/actions';
+import { updateResultsLayout } from '../../state/actions';
 import LayoutSwitcherComponent from './LayoutSwitcher';
 
-const mapDispatchToProps = dispatch => ({
-  updateLayout: layout => dispatch(updateResultsLayout(layout)),
-  setInitialState: initialState => dispatch(setInitialState(initialState)),
+const mapDispatchToProps = (dispatch) => ({
+  updateLayout: (layout) => dispatch(updateResultsLayout(layout)),
 });
 export const LayoutSwitcher = connect(
-  state => ({
+  (state) => ({
     loading: state.results.loading,
     currentLayout: state.query.layout,
     totalResults: state.results.data.total,

src/lib/components/Pagination/Pagination.js

@@ -16,17 +16,7 @@ import { buildUID } from '../../util';
 class Pagination extends Component {
   constructor(props) {
     super(props);
-    this.defaultValue = props.defaultValue;
     this.updateQueryPage = props.updateQueryPage;
-    this.setInitialState = props.setInitialState;
-  }
-
-  componentDidMount() {
-    if (this.props.currentPage === -1) {
-      this.setInitialState({
-        page: this.defaultValue,
-      });
-    }
   }
 
   onPageChange = (activePage) => {
@@ -76,7 +66,6 @@ Pagination.propTypes = {
     showPrev: PropTypes.bool,
     showNext: PropTypes.bool,
   }),
-  defaultValue: PropTypes.number,
   overridableId: PropTypes.string,
 };
 
@@ -90,7 +79,6 @@ Pagination.defaultProps = {
     showPrev: true,
     showNext: true,
   },
-  defaultValue: 10,
   overridableId: '',
 };
 

src/lib/components/Pagination/index.js

@@ -7,19 +7,15 @@
  */
 
 import { connect } from '../../store';
-import {
-  updateQueryPaginationPage,
-  setInitialState,
-} from '../../state/actions';
+import { updateQueryPaginationPage } from '../../state/actions';
 import PaginationComponent from './Pagination';
 
-const mapDispatchToProps = dispatch => ({
-  updateQueryPage: page => dispatch(updateQueryPaginationPage(page)),
-  setInitialState: value => dispatch(setInitialState(value)),
+const mapDispatchToProps = (dispatch) => ({
+  updateQueryPage: (page) => dispatch(updateQueryPaginationPage(page)),
 });
 
 export const Pagination = connect(
-  state => ({
+  (state) => ({
     currentPage: state.query.page,
     currentSize: state.query.size,
     loading: state.results.loading,