Merge branch '1291-replace-query-string-with-qs' into 'master'

refactor: Replace query-string with qs Closes #1291 See merge request TIBHannover/orkg/orkg-frontend!1042
TIBHannover · Mar 10, 2023 · c7ed5b8 · c7ed5b8
2 parents 4ad8a69 + b33d0f5
commit c7ed5b8
Show file tree

Hide file tree

Showing 26 changed files with 397 additions and 362 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,8 +48,7 @@
         "path-to-regexp": "^6.2.1",
         "pluralize": "^8.0.0",
         "prop-types": "^15.8.1",
-        "query-string": "^7.1.1",
-        "querystring": "^0.2.1",
+        "qs": "^6.11.1",
         "randomcolor": "^0.6.2",
         "rangy": "^1.3.1",
         "rc-tabs": "^12.5.7",

diff --git a/src/components/AddPaper/GeneralData/GeneralData.js b/src/components/AddPaper/GeneralData/GeneralData.js
@@ -32,7 +32,7 @@ import moment from 'moment';
 import { Cite } from '@citation-js/core';
 import { Steps } from 'intro.js-react';
 import { useLocation } from 'react-router-dom';
-import queryString from 'query-string';
+import qs from 'qs';
 import env from '@beam-australia/react-env';
 import AutocompleteContentTypeTitle from 'components/AutocompleteContentTypeTitle/AutocompleteContentTypeTitle';
 import Confirm from 'components/Confirmation/Confirmation';
@@ -161,7 +161,7 @@ const GeneralData = () => {
     };
 
     useEffect(() => {
-        const entryParam = queryString.parse(location.search).entry;
+        const entryParam = qs.parse(location.search, { ignoreQueryPrefix: true }).entry;
         if (entryParam) {
             dispatch(updateGeneralData({ entry: entryParam }));
             handleLookupClick(entryParam);

diff --git a/src/components/Comparison/hooks/helpers.js b/src/components/Comparison/hooks/helpers.js
@@ -1,4 +1,4 @@
-import queryString from 'query-string';
+import qs from 'qs';
 import { getArrayParamFromQueryString, getParamFromQueryString } from 'utils';
 import { isEmpty, uniq, without, flattenDepth, groupBy, flatten, last, find } from 'lodash';
 import { DEFAULT_COMPARISON_METHOD } from 'constants/misc';
@@ -164,7 +164,7 @@ export const activatedContributionsToList = contributionsData => {
 };
 
 export function getComparisonURLConfig(comparisonState) {
-    const params = queryString.stringify(
+    const params = qs.stringify(
         {
             contributions: activatedContributionsToList(comparisonState.contributions).join(','),
             properties: comparisonState.configuration.predicatesList.map(predicate => encodeURIComponent(predicate)).join(','),
@@ -173,8 +173,7 @@ export function getComparisonURLConfig(comparisonState) {
             response_hash: comparisonState.configuration.responseHash,
         },
         {
-            skipNull: true,
-            skipEmptyString: true,
+            skipNulls: true,
             encode: false,
         },
     );

diff --git a/src/components/Comparison/hooks/useComparison.js b/src/components/Comparison/hooks/useComparison.js
@@ -34,7 +34,7 @@ import { PREDICATES, CLASSES } from 'constants/graphSettings';
 import { reverse } from 'named-urls';
 import { uniq, without } from 'lodash';
 import ROUTES from 'constants/routes.js';
-import queryString from 'query-string';
+import qs from 'qs';
 import { useSelector, useDispatch } from 'react-redux';
 import { getComparisonConfiguration, generateFilterControlData } from './helpers';
 
@@ -195,7 +195,7 @@ function useComparison({ id, isEmbeddedMode = false }) {
         _transpose = transpose,
         hasPreviousVersion = comparisonResource?.id || comparisonResource?.hasPreviousVersion?.id,
     }) => {
-        const qParams = queryString.stringify(
+        const qParams = qs.stringify(
             {
                 contributions: _contributionsList.join(','),
                 properties: _predicatesList.map(predicate => encodeURIComponent(predicate)).join(','),
@@ -204,8 +204,8 @@ function useComparison({ id, isEmbeddedMode = false }) {
                 hasPreviousVersion,
             },
             {
-                skipNull: true,
-                skipEmptyString: true,
+                skipNulls: true,
+                arrayFormat: 'comma',
                 encode: false,
             },
         );
@@ -231,8 +231,10 @@ function useComparison({ id, isEmbeddedMode = false }) {
      * Parse previous version from query param
      */
     useEffect(() => {
-        if (!comparisonId && queryString.parse(search)?.hasPreviousVersion) {
-            getResource(queryString.parse(search).hasPreviousVersion).then(prevVersion => dispatch(setHasPreviousVersion(prevVersion)));
+        if (!comparisonId && qs.parse(search, { ignoreQueryPrefix: true })?.hasPreviousVersion) {
+            getResource(qs.parse(search, { ignoreQueryPrefix: true }).hasPreviousVersion).then(prevVersion =>
+                dispatch(setHasPreviousVersion(prevVersion)),
+            );
         }
     }, [comparisonId, dispatch, search]);
 

diff --git a/src/components/ContributionEditor/hooks/useContributionEditor.js b/src/components/ContributionEditor/hooks/useContributionEditor.js
@@ -4,20 +4,20 @@ import TableHeaderColumnFirst from 'components/ContributionEditor/TableHeaderCol
 import TableHeaderRow from 'components/ContributionEditor/TableHeaderRow';
 import ROUTES from 'constants/routes';
 import { sortBy, uniq, without } from 'lodash';
-import queryString from 'query-string';
+import qs from 'qs';
 import { useCallback } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 
 const useContributionEditor = () => {
     const location = useLocation();
     const navigate = useNavigate();
     const getContributionIds = useCallback(() => {
-        const { contributions } = queryString.parse(location.search, { arrayFormat: 'comma' });
+        const { contributions } = qs.parse(location.search, { comma: true, ignoreQueryPrefix: true });
         const contributionIds = contributions && !Array.isArray(contributions) ? [contributions] : contributions;
         return without(uniq(contributionIds), undefined, null, '') ?? [];
     }, [location.search]);
 
-    const { hasPreviousVersion } = queryString.parse(location.search);
+    const { hasPreviousVersion } = qs.parse(location.search, { ignoreQueryPrefix: true });
 
     const handleAddContributions = ids => {
         const idsQueryString = [...getContributionIds(), ...ids].join(',');

diff --git a/src/components/DiffView/DiffView.js b/src/components/DiffView/DiffView.js
@@ -3,16 +3,16 @@ import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome';
 import { ContainerAnimated } from 'components/Comparison/styled';
 import DiffTitle from 'components/DiffView/DiffTitle';
 import useDiff from 'components/DiffView/useDiff';
+import TitleBar from 'components/TitleBar/TitleBar';
 import { reverse } from 'named-urls';
-import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import qs from 'qs';
+import { useEffect, useState } from 'react';
 import ContentLoader from 'react-content-loader';
 import ReactDiffViewer from 'react-diff-viewer';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useLocation } from 'react-use';
 import { Alert, Button } from 'reactstrap';
-import queryString from 'query-string';
-import TitleBar from 'components/TitleBar/TitleBar';
-import PropTypes from 'prop-types';
 
 const DiffView = ({ type, diffRoute, getData }) => {
     const { oldId, newId } = useParams();
@@ -26,7 +26,7 @@ const DiffView = ({ type, diffRoute, getData }) => {
     const { isOldIdHigherThanNewId } = useDiff();
     const navigate = useNavigate();
     const location = useLocation();
-    const { switchedVersions } = queryString.parse(location.search);
+    const { switchedVersions } = qs.parse(location.search, { ignoreQueryPrefix: true });
 
     useEffect(() => {
         document.title = `Compare ${type} versions - ORKG`;

diff --git a/src/components/Observatory/IntegratedList.js b/src/components/Observatory/IntegratedList.js
@@ -10,7 +10,7 @@ import ContentLoader from 'react-content-loader';
 import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 import { useLocation } from 'react-router';
-import queryString from 'query-string';
+import qs from 'qs';
 
 const DEFAULT_CLASSES_FILTER = [
     { id: CLASSES.PAPER, label: 'Paper' },
@@ -24,7 +24,7 @@ const DEFAULT_CLASSES_FILTER = [
 
 const IntegratedList = ({ id, slug, boxShadow }) => {
     const location = useLocation();
-    const params = queryString.parse(location.search);
+    const params = qs.parse(location.search, { ignoreQueryPrefix: true });
 
     const { items, sort, isLoading, hasNextPage, isLastPageReached, totalElements, page, classesFilter, handleLoadMore, setClassesFilter, setSort } =
         useObservatoryContent({

diff --git a/src/components/ResearchField/IntegratedList.js b/src/components/ResearchField/IntegratedList.js
@@ -10,7 +10,7 @@ import ContentLoader from 'react-content-loader';
 import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 import { useLocation } from 'react-router-dom';
-import queryString from 'query-string';
+import qs from 'qs';
 
 const DEFAULT_CLASSES_FILTER = [
     { id: CLASSES.PAPER, label: 'Paper' },
@@ -24,7 +24,7 @@ const DEFAULT_CLASSES_FILTER = [
 
 const IntegratedList = ({ id, slug, boxShadow }) => {
     const location = useLocation();
-    const params = queryString.parse(location.search);
+    const params = qs.parse(location.search, { ignoreQueryPrefix: true });
 
     const {
         items,

diff --git a/src/components/ResearchProblem/IntegratedList.js b/src/components/ResearchProblem/IntegratedList.js
@@ -10,7 +10,7 @@ import ContentLoader from 'react-content-loader';
 import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 import { useLocation } from 'react-router-dom';
-import queryString from 'query-string';
+import qs from 'qs';
 
 const DEFAULT_CLASSES_FILTER = [
     { id: CLASSES.PAPER, label: 'Paper' },
@@ -24,7 +24,7 @@ const DEFAULT_CLASSES_FILTER = [
 
 const IntegratedList = ({ id, slug, boxShadow }) => {
     const location = useLocation();
-    const params = queryString.parse(location.search);
+    const params = qs.parse(location.search, { ignoreQueryPrefix: true });
 
     const { items, sort, isLoading, hasNextPage, isLastPageReached, totalElements, page, classesFilter, handleLoadMore, setClassesFilter, setSort } =
         useResearchProblemContent({

diff --git a/src/pages/ContributionEditor.js b/src/pages/ContributionEditor.js
@@ -12,7 +12,7 @@ import CreateContributionModal from 'components/CreateContributionModal/CreateCo
 import CreatePaperModal from 'components/CreatePaperModal/CreatePaperModal';
 import routes from 'constants/routes';
 import { reverse } from 'named-urls';
-import queryString from 'query-string';
+import qs from 'qs';
 import { useLocation, Link } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -39,7 +39,7 @@ const ContributionEditor = () => {
                 statementId => state.contributionEditor?.statements[statementId]?.created_by === env('PWC_USER_ID'),
             )?.length ?? 0,
     );
-    const { hasPreviousVersion } = queryString.parse(location.search);
+    const { hasPreviousVersion } = qs.parse(location.search, { ignoreQueryPrefix: true });
 
     useEffect(() => {
         document.title = 'Contribution editor - ORKG';

diff --git a/src/pages/Papers/ViewPaper.js b/src/pages/Papers/ViewPaper.js
@@ -12,7 +12,7 @@ import PaperHeaderBar from 'components/ViewPaper/PaperHeaderBar/PaperHeaderBar';
 import PaperMenuBar from 'components/ViewPaper/PaperHeaderBar/PaperMenuBar';
 import moment from 'moment';
 import NotFound from 'pages/NotFound';
-import queryString from 'query-string';
+import qs from 'qs';
 import { useEffect, useState } from 'react';
 import ContentLoader from 'react-content-loader';
 import { Helmet } from 'react-helmet';
@@ -32,7 +32,7 @@ const ViewPaper = () => {
             paperId: resourceId,
         });
 
-    let comingFromWizard = queryString.parse(location.search);
+    let comingFromWizard = qs.parse(location.search, { ignoreQueryPrefix: true });
     comingFromWizard = comingFromWizard ? comingFromWizard.comingFromWizard === 'true' : false;
 
     useEffect(() => {

diff --git a/src/services/backend/classes.js b/src/services/backend/classes.js
@@ -1,6 +1,6 @@
 import { url } from 'constants/misc';
 import { submitPostRequest, submitGetRequest } from 'network';
-import queryString from 'query-string';
+import qs from 'qs';
 
 export const classesUrl = `${url}classes/`;
 
@@ -19,11 +19,10 @@ export const getClasses = ({
     returnContent = false,
 }) => {
     const sort = `${sortBy},${desc ? 'desc' : 'asc'}`;
-    const params = queryString.stringify(
+    const params = qs.stringify(
         { page, size, sort, exact, ...(q ? { q } : {}), uri },
         {
-            skipNull: true,
-            skipEmptyString: true,
+            skipNulls: true,
         },
     );
 

diff --git a/src/services/backend/comparisons.js b/src/services/backend/comparisons.js
@@ -2,7 +2,7 @@ import { CLASSES, PREDICATES } from 'constants/graphSettings';
 import { url } from 'constants/misc';
 import { flatten, uniqBy } from 'lodash';
 import { submitGetRequest } from 'network';
-import queryString from 'query-string';
+import qs from 'qs';
 import { getResource } from 'services/backend/resources';
 import { getStatementsByObjectAndPredicate, getStatementsBySubjectAndPredicate } from 'services/backend/statements';
 import { filterObjectOfStatementsByPredicateAndClass, filterSubjectOfStatementsByPredicateAndClass } from 'utils';
@@ -69,6 +69,6 @@ export const getComparisonVersionsById = comparisonId => {
 };
 
 export const getAuthorsByComparisonId = ({ id, page = 0, items = 9999 }) => {
-    const params = queryString.stringify({ page, size: items });
+    const params = qs.stringify({ page, size: items });
     return submitGetRequest(`${comparisonUrl}${encodeURIComponent(id)}/authors?${params}`);
 };
diff --git a/src/services/backend/observatories.js b/src/services/backend/observatories.js
@@ -1,6 +1,6 @@
 import { MISC } from 'constants/graphSettings';
 import { url } from 'constants/misc';
-import queryString from 'query-string';
+import qs from 'qs';
 import { submitGetRequest, submitPostRequest, submitPutRequest } from 'network';
 import { getOrganization } from 'services/backend/organizations';
 import { getOrganizationLogoUrl } from 'services/backend/organizations';
@@ -44,11 +44,10 @@ export const getContentByObservatoryIdAndClasses = ({
 }) => {
     // Sort is not supported in this endpoint
     const sort = `${sortBy},${desc ? 'desc' : 'asc'}`;
-    const params = queryString.stringify(
+    const params = qs.stringify(
         { page, size: items, sort, featured, unlisted, classes: classes.join(',') },
         {
-            skipNull: true,
-            skipEmptyString: true,
+            skipNulls: true,
         },
     );
     return submitGetRequest(`${observatoriesUrl}${encodeURIComponent(id)}/class?${params}`);

diff --git a/src/services/backend/papers.js b/src/services/backend/papers.js
@@ -4,7 +4,7 @@ import { getStatementsBySubjectAndPredicate, getStatementsByObjectAndPredicate }
 import { PREDICATES, CLASSES } from 'constants/graphSettings';
 import { indexContribution } from 'services/similarity';
 import { toast } from 'react-toastify';
-import queryString from 'query-string';
+import qs from 'qs';
 
 export const papersUrl = `${url}papers/`;
 
@@ -57,11 +57,10 @@ export const getPapersLinkedToResource = async ({
     returnContent = false,
 }) => {
     const sort = `${sortBy},${desc ? 'desc' : 'asc'}`;
-    const params = queryString.stringify(
+    const params = qs.stringify(
         { linkedTo: id, page, size, sort, desc },
         {
-            skipNull: true,
-            skipEmptyString: true,
+            skipNulls: true,
         },
     );
 

diff --git a/src/services/backend/predicates.js b/src/services/backend/predicates.js
@@ -1,5 +1,5 @@
 import { submitPostRequest, submitPutRequest, submitGetRequest } from 'network';
-import queryString from 'query-string';
+import qs from 'qs';
 import { url } from 'constants/misc';
 
 export const predicatesUrl = `${url}predicates/`;
@@ -20,11 +20,10 @@ export const getPredicates = ({
     returnContent = false,
 }) => {
     const sort = `${sortBy},${desc ? 'desc' : 'asc'}`;
-    const params = queryString.stringify(
+    const params = qs.stringify(
         { page, size, sort, exact, ...(q ? { q } : {}) },
         {
-            skipNull: true,
-            skipEmptyString: true,
+            skipNulls: true,
         },
     );
 

diff --git a/src/services/backend/problems.js b/src/services/backend/problems.js
@@ -1,28 +1,26 @@
 import { url } from 'constants/misc';
 import { submitGetRequest } from 'network';
-import queryString from 'query-string';
+import qs from 'qs';
 
 export const problemsUrl = `${url}problems/`;
 
 export const getResearchFieldsByResearchProblemId = problemId => submitGetRequest(`${problemsUrl}${encodeURIComponent(problemId)}/fields`);
 
 export const getContributorsByResearchProblemId = ({ id, page = 0, items = 9999 }) => {
-    const params = queryString.stringify(
+    const params = qs.stringify(
         { page, size: items },
         {
-            skipNull: true,
-            skipEmptyString: true,
+            skipNulls: true,
         },
     );
     return submitGetRequest(`${problemsUrl}${encodeURIComponent(id)}/users?${params}`);
 };
 
 export const getAuthorsByResearchProblemId = ({ id, page = 0, items = 9999 }) => {
-    const params = queryString.stringify(
+    const params = qs.stringify(
         { page, size: items },
         {
-            skipNull: true,
-            skipEmptyString: true,
+            skipNulls: true,
         },
     );
     return submitGetRequest(`${problemsUrl}${encodeURIComponent(id)}/authors?${params}`);
@@ -40,11 +38,10 @@ export const getContentByResearchProblemIdAndClasses = ({
 }) => {
     // Sort is not supported in this endpoint
     const sort = `${sortBy},${desc ? 'desc' : 'asc'}`;
-    const params = queryString.stringify(
+    const params = qs.stringify(
         { page, size: items, sort, featured, unlisted, classes: classes.join(',') },
         {
-            skipNull: true,
-            skipEmptyString: true,
+            skipNulls: true,
         },
     );
     return submitGetRequest(`${problemsUrl}${encodeURIComponent(id)}/?${params}`);