KPMP-4834_add-accordions-for-config-type

.github/workflows/node.js.yml

@@ -26,6 +26,7 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
+    - run: npm install
     - run: npm ci
     - run: npm run build --if-present
     - run: npm test

package.json

@@ -16,11 +16,11 @@
     "ajv": "8.10.0",
     "antd": "5.7.3",
     "axios": "0.26.0",
-    "bootstrap": "4.3.1",
+    "bootstrap": "5.2.3",
     "es6-shim": "0.35.6",
     "history": "4.10.1",
     "jquery": "3.6.0",
-    "kpmp-common-components": "1.2.1",
+    "kpmp-common-components": "1.2.13",
     "lodash": "4.17.21",
     "openseadragon": "2.4.1",
     "prop-types": "15.8.1",
@@ -30,7 +30,7 @@
     "react-ga4": "2.1.0",
     "react-redux": "7.2.2",
     "react-router-dom": "5.2.0",
-    "reactstrap": "8.9.0",
+    "reactstrap": "9.2.0",
     "redux": "4.0.5",
     "redux-thunk": "2.3.0",
     "typescript": "3.7.2"

src/actions/Participants/participantActions.js

@@ -17,6 +17,13 @@ export const setSelectedSlide = (slide) => {
 	}
 }
 
+export const setSelectedAccordion = (accordion) => {
+  return {
+    type: actionNames.SET_SELECTED_ACCORDION,
+    payload: accordion
+  }
+}
+
 export const setParticipants = (participants) => {
 	return {
 		type: actionNames.SET_PARTICIPANTS,
@@ -29,12 +36,23 @@ export const getParticipantSlides = (participantId, props) => {
 		var config = { headers: {'Content-Type': 'application/json', 'Cache-control': 'no-cache'}};
 		axios.get('/api/v1/slides/' + participantId, config)
 			.then(result => {
-				let slides = participantSelectSorter(result.data);
-				dispatch(setSelectedParticipant({id: participantId, slides: slides, selectedSlide: slides[0]}));
+        let newData = {}
+        for(const [key, value] of Object.entries(result.data)){
+          let newValue = participantSelectSorter(value);
+          newData[key] = newValue
+        }
+        let sortedData = {}
+        let keys = Object.keys(newData)
+        keys.sort()
+        keys.reverse()
+        for (let key of keys) {
+          sortedData[key] = newData[key]
+        }
+        dispatch(setSelectedParticipant({id: participantId, slides: sortedData, selectedSlide:sortedData["(LM) Light Microscopy"][0], selectedAccordion: "(LM) Light Microscopy"}));
 				props.history.push(process.env.PUBLIC_URL + "/slides");
 			})
 			.catch(err => {
-				console.log("We were unable to get a list of slides for  " + participantId);
+				console.log("We were unable to get a list of slides for " + participantId);
 				dispatch(sendMessageToBackend(err));
 			});
 	}

src/actions/actionNames.js

@@ -1,7 +1,8 @@
 const actionNames = {
     SET_SELECTED_PARTICIPANT: "SET_SELECTED_PARTICIPANT",
     SET_PARTICIPANTS: "SET_PARTICIPANTS",
-    SET_SELECTED_SLIDE: "SET_SELECTED_SLIDE"
+    SET_SELECTED_SLIDE: "SET_SELECTED_SLIDE",
+    SET_SELECTED_ACCORDION: "SET_SELECTED_ACCORDION"
 };
 
 export default actionNames;

src/components/Slides/Menu/Menu.js

@@ -36,7 +36,8 @@ class Menu extends Component {
 						verticalRef={this.props.verticalRef}
 						horizontal={this.props.horizontal}
 						vertical={this.props.vertical}
-						toggleMenu={this.toggleMenu} />
+						toggleMenu={this.toggleMenu}
+            selectedParticipant={this.props.selectedParticipant} />
 				</BurgerMenu>
 				<Link id="btn-home" to={process.env.PUBLIC_URL}>
 					<FontAwesomeIcon icon={faHome} size="2x" />