Merge pull request #163 from TUMFARSynchrony/frontend-ba-postprocessi…

…ng-button fix: place post-processing button back
TUMFARSynchrony · Oct 30, 2023 · fb39bf6 · fb39bf6
2 parents 620bfa2 + f27da90
commit fb39bf6
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 14 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -389,10 +389,39 @@ function App() {
                     onJoinExperiment={onJoinExperiment}
                   />
                 }
+                buttonListComponent={
+                  <HeaderActionArea
+                    buttons={[
+                      {
+                        onClick: () => navigate("/postProcessingRoom"),
+                        label: "Post-Processing Room"
+                      }
+                    ]}
+                  />
+                }
+              />
+            }
+          />
+          <Route
+            exact
+            path="/postProcessingRoom"
+            element={
+              <PageTemplate
+                title={"Post-Processing Room"}
+                customComponent={<PostProcessing />}
+                buttonListComponent={
+                  <HeaderActionArea
+                    buttons={[
+                      {
+                        onClick: () => navigate("/"),
+                        label: "Back to Session Overview"
+                      }
+                    ]}
+                  />
+                }
               />
             }
           />
-          <Route exact path="/postProcessingRoom" element={<PostProcessing />} />
           <Route
             exact
             path="/lobby"

diff --git a/frontend/src/components/atoms/Button/HeaderActionArea.tsx b/frontend/src/components/atoms/Button/HeaderActionArea.tsx
@@ -1,13 +1,6 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faUndo,
-  faRedo,
-  faCommentAlt,
-  faClipboardCheck,
-  faUsers,
-  IconDefinition
-} from "@fortawesome/free-solid-svg-icons";
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 
 /*
 const buttonConfigs = {
@@ -22,7 +15,11 @@ type HeaderActionAreaProps = {
   buttons: Array<ButtonConfig>;
 };
 
-type ButtonConfig = { onClick?: () => void; icon?: IconDefinition };
+type ButtonConfig = {
+  label?: string;
+  onClick?: () => void;
+  icon?: IconDefinition;
+};
 
 const HeaderActionArea = (props: HeaderActionAreaProps) => {
   const { buttons } = props;
@@ -31,10 +28,11 @@ const HeaderActionArea = (props: HeaderActionAreaProps) => {
       {buttons.map((button, index) => (
         <button
           key={index}
-          className="px-4 py-2 bg-neutral-200 rounded-2xl border border-neutral-200 flex justify-center items-center"
+          className="px-4 py-2 bg-neutral-200 rounded-2xl border border-neutral-200 flex justify-center items-center text-sm"
           onClick={button.onClick}
         >
-          <FontAwesomeIcon icon={button.icon} className="w-4 h-4" />
+          <FontAwesomeIcon icon={button.icon} className="w-4 h-4 pr-2" />
+          {button.label}
         </button>
       ))}
     </div>

diff --git a/frontend/src/pages/PostProcessing/PostProcessing.js b/frontend/src/pages/PostProcessing/PostProcessing.js
@@ -1,10 +1,8 @@
 import HeroText from "../../components/atoms/HeroText/HeroText";
-import NavigationBar from "../../components/molecules/NavigationBar/NavigationBar";
 
 function PostProcessing() {
   return (
     <>
-      <NavigationBar />
       <HeroText text={"Post-Processing Room"} />
       <HeroText
         text={