Removed all occurences of qs.parse

src/client/components/ActivityFeed/CollectionList/state.js

@@ -1,7 +1,7 @@
 import { buildSelectedFilters } from './filters'
 import { SORT_OPTIONS } from './constants'
 import { transformWasPolicyfeedBackProvidedToApi } from './transformers'
-import { parseQueryString } from '../../../utils'
+import { locationToQSParamsWithPage } from '../../../utils/url'
 
 export const TASK_GET_COMPANY_ACTIVITIES_LIST =
   'TASK_GET_COMPANY_ACTIVITIES_LIST'
@@ -26,8 +26,7 @@ export const TASK_GET_INTERACTIONS_COMPANY_NAME =
 export const ID = 'companyActivitiesList'
 
 export const state2props = ({ router, ...state }) => {
-  const queryString = router.location.search.slice(1)
-  const queryParams = parseQueryString(queryString)
+  const queryParams = locationToQSParamsWithPage(router.location)
   const { currentAdviserId } = state
   const { metadata, selectedAdvisers, selectedCompanies, createdByOthers } =
     state[ID]

src/client/components/ActivityFeedFilteredCollectionList/index.jsx

@@ -8,6 +8,7 @@ import { GridRow, GridCol } from 'govuk-react'
 import { isEmpty } from 'lodash'
 import qs from 'qs'
 
+import { getQueryParamsFromLocation } from '../../utils/url'
 import Task from '../Task'
 import CollectionSort from '../CollectionList/CollectionSort'
 
@@ -34,7 +35,7 @@ const ActivityFeedFilteredCollectionList = ({
   return (
     <Route>
       {({ history, location }) => {
-        const qsParams = qs.parse(location.search.slice(1))
+        const qsParams = getQueryParamsFromLocation(location)
         const initialPage = parseInt(qsParams.page, 10)
         if (defaultQueryParams && isEmpty(qsParams)) {
           history.push({

src/client/components/CollectionList/CollectionSort.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Route } from 'react-router-dom'
-import qs from 'qs'
 import styled from 'styled-components'
 
+import { getQueryParamsFromLocation } from '../../utils/url'
 import { DARK_GREY } from '../../utils/colours'
 import CollectionHeaderRow from './CollectionHeaderRow'
 import RoutedSelect from '../RoutedSelect'
@@ -33,8 +33,8 @@ const CollectionSort = ({ sortOptions, totalPages, ...props }) => {
   return (
     <CollectionHeaderRow {...props} actions={actions}>
       <Route>
-        {({ location: { search } }) => {
-          const searchParams = qs.parse(search.slice(1))
+        {({ location }) => {
+          const searchParams = getQueryParamsFromLocation(location)
           return (
             <StyledSpan data-test="pagination-summary">
               Page {searchParams.page || 1} of {totalPages}

src/client/components/CompanyActivityFeedFilteredCollectionList/index.jsx

@@ -8,6 +8,7 @@ import { GridRow, GridCol } from 'govuk-react'
 import { isEmpty } from 'lodash'
 import qs from 'qs'
 
+import { getQueryParamsFromLocation } from '../../utils/url'
 import Task from '../Task'
 import CollectionSort from '../CollectionList/CollectionSort'
 
@@ -34,7 +35,7 @@ const CompanyActivityFeedFilteredCollectionList = ({
   return (
     <Route>
       {({ history, location }) => {
-        const qsParams = qs.parse(location.search.slice(1))
+        const qsParams = getQueryParamsFromLocation(location)
         const initialPage = parseInt(qsParams.page, 10)
         if (defaultQueryParams && isEmpty(qsParams)) {
           history.push({

src/client/components/ContactForm/index.jsx

@@ -1,4 +1,3 @@
-import qs from 'qs'
 import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import _ from 'lodash'
@@ -9,6 +8,7 @@ import Label from '@govuk-react/label'
 
 import multiInstance from '../../utils/multiinstance'
 import { CONTACT_FORM__SUBMIT } from '../../actions'
+import { getQueryParamsFromLocation } from '../../utils/url'
 
 import Form from '../Form'
 import {
@@ -153,9 +153,8 @@ const _ContactForm = ({
           <Main>
             <State>
               {({ referrerUrl, router }) => {
-                const { origin_url, origin_search } = qs.parse(
-                  router.location.search
-                )
+                const { origin_url, origin_search } =
+                  getQueryParamsFromLocation(router.location)
                 const redirectTo = ({ name, id }) => {
                   return origin_url
                     ? appendParamsToUrl(origin_url, origin_search, id, name)

src/client/components/Dashboard/my-tasks/TaskListSelect.jsx

@@ -6,6 +6,8 @@ import { get, kebabCase } from 'lodash'
 import qs from 'qs'
 import { FONT_SIZE, FONT_WEIGHTS } from '@govuk-react/constants'
 
+import { getQueryParamsFromLocation } from '../../../utils/url'
+
 const StyledSelect = styled(Select)({
   select: {
     width: '100%',
@@ -21,7 +23,7 @@ const TaskSelect = ({ label, options = [], qsParam }) => {
   const location = useLocation()
   const [value, setValue] = useState()
 
-  const qsParams = qs.parse(location.search.slice(1))
+  const qsParams = getQueryParamsFromLocation(location)
   const initialValue = get(qsParams, qsParam, '')
 
   useEffect(() => setValue(initialValue), [initialValue])

src/client/components/FilterReset/index.jsx

@@ -4,7 +4,8 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { FONT_SIZE } from '@govuk-react/constants'
 import { isEmpty } from 'lodash'
-import qs from 'qs'
+
+import { parseQueryString } from '../../utils/url'
 
 const StyledButtonLink = styled(ButtonLink)`
   font-size: ${FONT_SIZE.SIZE_16};
@@ -15,7 +16,7 @@ import { ButtonLink } from '../../components'
 const FilterReset = ({ children, ...props }) => (
   <Route>
     {({ history, location: { pathname, search } }) => {
-      const { sortby, page, ...filters } = qs.parse(search.slice(1))
+      const { sortby, page, ...filters } = parseQueryString(search)
       return (
         !isEmpty(filters) && (
           <StyledButtonLink

src/client/components/FilteredCollectionList/index.jsx

@@ -8,6 +8,7 @@ import { GridRow, GridCol } from 'govuk-react'
 import { isEmpty } from 'lodash'
 import qs from 'qs'
 
+import { getQueryParamsFromLocation } from '../../utils/url'
 import Task from '../Task'
 import Analytics from '../Analytics'
 
@@ -99,7 +100,7 @@ const FilteredCollectionList = ({
   const totalPages = Math.ceil(
     Math.min(count, maxItemsToPaginate) / itemsPerPage
   )
-  const qsParams = qs.parse(location.search.slice(1))
+  const qsParams = getQueryParamsFromLocation(location)
 
   useEffect(() => {
     if (defaultQueryParams && isEmpty(qsParams)) {

src/client/components/Form/index.jsx

@@ -6,6 +6,7 @@ import qs from 'qs'
 import Button from '@govuk-react/button'
 import Link from '@govuk-react/link'
 
+import { getQueryParamsFromLocation } from '../../utils/url'
 import multiInstance from '../../utils/multiinstance'
 import ErrorSummary from '../ErrorSummary'
 import Task from '../Task'
@@ -86,8 +87,7 @@ const _Form = ({
   ...props
 }) => {
   const history = useHistory()
-  const location = useLocation()
-  const qsParams = qs.parse(location.search.slice(1))
+  const qsParams = getQueryParamsFromLocation(useLocation())
 
   useEffect(() => {
     onLoad(initialValues, initialStepIndex)

src/client/components/Pagination/RoutedPagination.jsx

@@ -6,6 +6,7 @@ import qs from 'qs'
 import { FONT_SIZE, MEDIA_QUERIES, SPACING } from '@govuk-react/constants'
 import Link from '@govuk-react/link'
 
+import { getQueryParamsFromLocation } from '../../utils/url'
 import { GREY_3, LINK_COLOUR, WHITE } from '../../../client/utils/colours'
 import { PAGINATION_PIECE_PREVIOUS, PAGINATION_PIECE_NEXT } from './constants'
 
@@ -183,13 +184,12 @@ const Pagination = ({
   return (
     <Route>
       {({ history, location }) => {
-        const qsParams = qs.parse(location.search.slice(1))
         const handleOnClick = (pageNumber, e) => {
           e.preventDefault()
           setPage(pageNumber)
           history.push({
             search: qs.stringify({
-              ...qsParams,
+              ...getQueryParamsFromLocation(location),
               page: pageNumber,
             }),
           })

src/client/components/Resource/Paginated.js

@@ -5,6 +5,7 @@ import qs from 'qs'
 
 import styled from 'styled-components'
 
+import { getQueryParamsFromLocation } from '../../utils/url'
 import multiInstance from '../../utils/multiinstance'
 import Task from '../Task'
 import LoadingBox from '../Task/LoadingBox'
@@ -94,7 +95,7 @@ const PaginatedResource = multiInstance({
   }) => (
     <Route>
       {({ location }) => {
-        const qsParams = qs.parse(location.search.slice(1))
+        const qsParams = getQueryParamsFromLocation(location)
         const routePage = parseInt(qsParams.page, 10) || 1
         const totalPages = result ? Math.ceil(result.count / pageSize) : 0
         const hasZeroResults = result?.count === 0

src/client/components/RoutedCheckboxGroupField/index.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { Route } from 'react-router-dom'
 import qs from 'qs'
 
+import { getQueryParamsFromLocation } from '../../utils/url'
 import CheckboxGroupField from '../CheckboxGroupField'
 
 const RoutedCheckboxGroupField = ({ qsParam, ...props }) => {
@@ -14,7 +15,7 @@ const RoutedCheckboxGroupField = ({ qsParam, ...props }) => {
   return (
     <Route>
       {({ history, location }) => {
-        const qsParams = qs.parse(location.search.slice(1))
+        const qsParams = getQueryParamsFromLocation(location)
         return (
           <CheckboxGroupField
             {...props}

src/client/components/RoutedDateField/index.jsx

@@ -3,12 +3,13 @@ import { Route } from 'react-router-dom'
 import qs from 'qs'
 import { get } from 'lodash'
 
+import { getQueryParamsFromLocation } from '../../utils/url'
 import DateField from '../DateField'
 
 const RoutedDateField = ({ qsParamName, ...props }) => (
   <Route>
     {({ location, history }) => {
-      const qsParams = qs.parse(location.search.slice(1))
+      const qsParams = getQueryParamsFromLocation(location)
       return (
         <DateField
           {...props}

src/client/components/RoutedDownloadDataHeader/index.jsx

@@ -4,6 +4,7 @@ import qs from 'qs'
 import PropTypes from 'prop-types'
 import { isArray } from 'lodash'
 
+import { getQueryParamsFromLocation } from '../../utils/url'
 import DownloadDataHeader from '../DownloadDataHeader'
 
 const isBool = (value) => ['true', 'false'].includes(value)
@@ -30,7 +31,7 @@ const getQueryStringFromQueryParams = (params) => {
 }
 
 const getDownloadLinkFromLocation = (location, baseDownloadLink) => {
-  const { page, ...queryParams } = qs.parse(location.search.slice(1))
+  const { page, ...queryParams } = getQueryParamsFromLocation(location)
   const queryString = getQueryStringFromQueryParams(queryParams)
   return queryString ? `${baseDownloadLink}?${queryString}` : baseDownloadLink
 }

src/client/components/RoutedFilterChips/index.jsx

@@ -4,6 +4,7 @@ import qs from 'qs'
 import { Route } from 'react-router-dom'
 import { omit } from 'lodash'
 
+import { getQueryParamsFromLocation } from '../../utils/url'
 import { Chip } from '..'
 
 /**
@@ -33,7 +34,7 @@ const RoutedFilterChips = ({ qsParamName, selectedOptions = [], ...props }) => (
   <Route>
     {({ location, history }) => {
       const clearFilter = (value) => {
-        const qsParams = qs.parse(location.search.slice(1))
+        const qsParams = getQueryParamsFromLocation(location)
         const newQsParams = removeParamFromQs(qsParams, qsParamName, value)
         history.push({ search: qs.stringify(newQsParams) })
       }

src/client/components/RoutedInput/index.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import qs from 'qs'
 import { Route } from 'react-router-dom'
 
+import { getQueryParamsFromLocation } from '../../utils/url'
 import multiInstance from '../../utils/multiinstance'
 import { useTextCaretPosition } from './useTextCaretPosition'
 import {
@@ -40,7 +41,7 @@ const RoutedInput = ({
   return (
     <Route>
       {({ history, location }) => {
-        const qsParams = qs.parse(location.search.slice(1))
+        const qsParams = getQueryParamsFromLocation(location)
         const writeQs = () =>
           history.replace({
             search: qs.stringify({
@@ -99,7 +100,7 @@ export default multiInstance({
       }),
   }),
   componentStateToProps: (cs, { router }, { qsParam }) => {
-    const qsValue = qs.parse(router.location.search.slice(1))[qsParam]
+    const qsValue = getQueryParamsFromLocation(router.location)[qsParam]
     return { ...cs, qsValue }
   },
   reducer: (state, { type, value, selectedValue }) => {

src/client/components/RoutedSelect/index.jsx

@@ -3,12 +3,13 @@ import { Route } from 'react-router-dom'
 import qs from 'qs'
 import { get } from 'lodash'
 
+import { getQueryParamsFromLocation } from '../../utils/url'
 import Select from '../Select'
 
 const RoutedSelect = ({ qsParamName, ...props }) => (
   <Route>
     {({ location, history }) => {
-      const qsParams = qs.parse(location.search.slice(1))
+      const qsParams = getQueryParamsFromLocation(location)
       const initialValue = get(qsParams, qsParamName, '')
       const onChange = (e) => {
         history.push({

src/client/components/RoutedTypeahead/index.jsx

@@ -6,6 +6,7 @@ import styled from 'styled-components'
 
 import { FONT_WEIGHTS, LINE_HEIGHT } from '@govuk-react/constants'
 
+import { getQueryParamsFromLocation } from '../../utils/url'
 import FieldWrapper from '../Form/elements/FieldWrapper'
 import Typeahead from '../Typeahead'
 
@@ -40,38 +41,35 @@ const RoutedTypeahead = ({
   ...props
 }) => (
   <Route>
-    {({ history, location }) => {
-      const qsParams = qs.parse(location.search.slice(1))
-      return (
-        <StyledFieldWrapper label={label} name={name} hint={hint} {...props}>
-          <Typeahead
-            name={name}
-            aria-label={label ? label : name}
-            placeholder={placeholder}
-            initialOptions={options}
-            closeMenuOnSelect={closeMenuOnSelect}
-            isMulti={isMulti}
-            value={selectedOptions.map(({ value, label }) => ({
-              value,
-              label,
-            }))}
-            loadOptions={loadOptions}
-            noOptionsMessage={noOptionsMessage}
-            onChange={(pickedOptions) => {
-              history.push({
-                search: qs.stringify({
-                  ...qsParams,
-                  ...(!labelAsQueryParam
-                    ? getParamIds(qsParam, pickedOptions)
-                    : getParamLabels(qsParam, pickedOptions)),
-                  page: 1,
-                }),
-              })
-            }}
-          />
-        </StyledFieldWrapper>
-      )
-    }}
+    {({ history, location }) => (
+      <StyledFieldWrapper label={label} name={name} hint={hint} {...props}>
+        <Typeahead
+          name={name}
+          aria-label={label ? label : name}
+          placeholder={placeholder}
+          initialOptions={options}
+          closeMenuOnSelect={closeMenuOnSelect}
+          isMulti={isMulti}
+          value={selectedOptions.map(({ value, label }) => ({
+            value,
+            label,
+          }))}
+          loadOptions={loadOptions}
+          noOptionsMessage={noOptionsMessage}
+          onChange={(pickedOptions) => {
+            history.push({
+              search: qs.stringify({
+                ...getQueryParamsFromLocation(location),
+                ...(!labelAsQueryParam
+                  ? getParamIds(qsParam, pickedOptions)
+                  : getParamLabels(qsParam, pickedOptions)),
+                page: 1,
+              }),
+            })
+          }}
+        />
+      </StyledFieldWrapper>
+    )}
   </Route>
 )