From c32c2f46abf0428779f249ca8c6b3c2cbcd44f17 Mon Sep 17 00:00:00 2001
From: Mark Volkmann <r.mark.volkmann@gmail.com>
Date: Thu, 2 May 2024 10:34:02 -0500
Subject: [PATCH] added support for query parameter in SkillReportPage

---
 web-ui/src/pages/SkillReportPage.jsx | 30 +++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/web-ui/src/pages/SkillReportPage.jsx b/web-ui/src/pages/SkillReportPage.jsx
index 918dc332e8..091ea11bf9 100644
--- a/web-ui/src/pages/SkillReportPage.jsx
+++ b/web-ui/src/pages/SkillReportPage.jsx
@@ -1,4 +1,7 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useRef, useState } from 'react';
+
+import { Button, TextField } from '@mui/material';
+import Autocomplete from '@mui/material/Autocomplete';
 
 import { AppContext } from '../context/AppContext';
 import { reportSkills } from '../api/memberskill.js';
@@ -11,8 +14,7 @@ import {
   selectCurrentMemberIds
 } from '../context/selectors';
 
-import { Button, TextField } from '@mui/material';
-import Autocomplete from '@mui/material/Autocomplete';
+import { useQueryParameters } from '../helpers/query-parameters';
 
 import './SkillReportPage.css';
 
@@ -27,6 +29,28 @@ const SkillReportPage = props => {
   const [editedSearchRequest, setEditedSearchRequest] =
     useState(searchRequestDTO);
 
+  const processedQPs = useRef(false);
+  useQueryParameters(
+    [
+      {
+        name: 'skills',
+        default: [],
+        value: searchSkills,
+        setter(ids) {
+          const searchSkills = ids.map(id =>
+            skills.find(skill => skill.id === id)
+          );
+          setSearchSkills(searchSkills);
+        },
+        toQP() {
+          return searchSkills.map(skill => skill.id).join(',');
+        }
+      }
+    ],
+    [skills],
+    processedQPs
+  );
+
   const handleSearch = async searchRequestDTO => {
     let res = await reportSkills(searchRequestDTO, csrf);
     let memberSkillsFound;