Merge pull request #45 from UtrechtUniversity/dev Newest Update 28-11…

…-2024

Newest Update 28-11-2024

.github/workflows/CI_CD.yml

@@ -38,6 +38,8 @@ jobs:
 
   integration-tests:
     name: Run Integration Tests
+    env:
+      AUTH_TOKEN: ${{ secrets.AUTH_TOKEN }}
     runs-on: ubuntu-latest
     needs: unit-tests
 
@@ -49,26 +51,4 @@ jobs:
         uses: ./.github/actions/setup-node
 
       - name: Run Jest Integration Tests
-        run: npm test -- --ci --testPathPattern ".*\\.integration\\.test\\.tsx$"
-
-  cypress-tests:
-    name: Run Cypress Tests
-    runs-on: ubuntu-latest
-    needs: integration-tests
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js Environment
-        uses: ./.github/actions/setup-node
-
-      - name: Start application
-        run: |
-          npm start &
-          npx wait-on http://localhost:3000
-
-      - name: Run Cypress tests
-        uses: cypress-io/github-action@v5
-        with:
-          browser: chrome
+        run: npm test -- --ci --testPathPattern ".*\\.integration\\.test\\.tsx$"

package.json

@@ -40,8 +40,9 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@types/http-proxy-middleware": "^0.19.3",
-    "@types/jest": "^29.5.13",
+    "@types/jest": "^29.5.14",
     "@types/testing-library__jest-dom": "^5.14.8",
     "@types/webpack-dev-server": "^4.7.1",
     "cross-fetch": "^4.0.0",

src/App.tsx

@@ -7,8 +7,12 @@ import Profile from './pages/Profile';
 import Export from './pages/Export';
 import ExperimentCreation from './pages/ExperimentCreation';
 import Experiment from './pages/Experiment';
+import QuestionnaireDashboard from './pages/QuestionnaireDashboard';
+import QuestionaireCreation from './pages/QuestionnaireCreation';
+import Questionnaire from './pages/Questionnaire';
 import MessageCreation from './pages/MessageCreation';
 import MessageDashboard from './pages/MessageDashboard';
+import Message from './pages/Message';
 import Unauthorized from './pages/Unauthorized';
 import AuthWrapper from './components/AuthWrapper';
 
@@ -38,8 +42,12 @@ const App: React.FC = () => {
                 <Route path="/export" element={<Export />} />
                 <Route path="/experimentcreation" element={<ExperimentCreation />} />
                 <Route path="/experiment/:id" element={<Experiment />} />
+                <Route path="/questionnairedashboard/:id" element={<QuestionnaireDashboard />} />
+                <Route path="/questionnairecreation/:id" element={<QuestionaireCreation />} />
+                <Route path="/questionnaire/:id" element={<Questionnaire />} />
                 <Route path="/messagecreation/:id" element={<MessageCreation />} />
                 <Route path="/messagedashboard/:id" element={<MessageDashboard />} />
+                <Route path="/message/:id" element={<Message />} />
 
                 {/* Wildcard Route */}
                 <Route path="*" element={<Navigate to="/dashboard" replace />} />

src/components/DynamicView.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import '../styles/DynamicView.css';
+
+interface DynamicViewProps {
+  fields: {
+    name: string;
+    value: string;
+  }[];
+}
+
+const DynamicView: React.FC<DynamicViewProps> = ({ fields }) => {
+  return (
+    <div className="dynamic-view-container">
+      {fields.map((field, index) => (
+        <div key={index} className="dynamic-view-field">
+          <div className="dynamic-view-field-content">
+            <div className="dynamic-view-field-name">{field.name}</div>
+            <div className="dynamic-view-field-value">{field.value}</div>
+          </div>
+          <div className="dynamic-view-line"></div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DynamicView;

src/pages/Experiment.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import Navbar from '../components/Navbar';
+import DynamicView from '../components/DynamicView';
 import '../styles/Experiment.css';
 import { Experiment as ExperimentType } from '../types/experiment';
-import { updateExperiment } from '../services/experimentService'; // Import the update function
+import { updateExperiment } from '../services/experimentService';
 
 const Experiment: React.FC = () => {
   const location = useLocation();
@@ -20,7 +21,20 @@ const Experiment: React.FC = () => {
       </>
     );
   }
-
+  const fields = [
+    { name: 'Experiment Title', value: experiment.name },
+    { name: 'Description', value: experiment.description },
+    {
+      name: 'Duration',
+      value: `${new Date(experiment.start).toLocaleDateString()} - ${new Date(experiment.end).toLocaleDateString()}`,
+    },
+    { name: 'Specified LivingLab', value: experiment.livingLab?.name || 'N/A' },
+    { name: 'Number of Questionnaires', value: experiment.numberOfQuestionnaires?.toString() || '0' },
+    { name: 'Responses on Questionnaires', value: experiment.questionnaireActivity?.toString() || '0' },
+    { name: 'Number of Messages', value: experiment.numberOfMessages?.toString() || '0' },
+    { name: 'Messages Sent', value: experiment.messageActivity?.toString() || '0' },
+  ];
+
   // Navigation handlers
   const handleQuestionnaireOverviewClick = () => {
     navigate(`/questionnairedashboard/${experiment.ID}`);
@@ -32,7 +46,6 @@ const Experiment: React.FC = () => {
       navigate(`/messagedashboard/${experiment.ID}`);
     } catch (error) {
       console.error('Error fetching messages:', error);
-      // Optionally display an error message to the user
     }
   };
 
@@ -69,95 +82,48 @@ const Experiment: React.FC = () => {
 
         {/* Experiment Details Component */}
         <div className="experiment-details-component">
-          {/* Experiment Title Component */}
-          <div className="experiment-title-comp">
-            <span className="experiment-title-text">Experiment title</span>
-            <div className="experiment-textbar">
-              <p className="experiment-textbar-content">{experiment.name}</p>
-            </div>
-          </div>
-
-          {/* Description Component */}
-          <div className="description-comp">
-            <span className="description-text">Description</span>
-            <div className="description-textbar">
-              <p className="description-textbar-content">{experiment.description}</p>
-            </div>
-          </div>
-
-          {/* Duration Set Component */}
-          <div className="duration-set-comp">
-            <span className="duration-text">Duration of experiment</span>
-            <div className="time-set">
-              <div className="time-set-box">
-                {new Date(experiment.start).toLocaleDateString()}
-              </div>
-              <span className="date-separator">-</span>
-              <div className="time-set-box">
-                {new Date(experiment.end).toLocaleDateString()}
-              </div>
-            </div>
-          </div>
-
-          {/* Location Set Component */}
-          <div className="location-set-comp">
-            <span className="location-text">Specified LivingLab</span>
-            <div className="location-box">
-              <p className="location-box-text">
-                {experiment.livingLab?.name || 'N/A'}
-              </p>
-            </div>
-          </div>
-
-          {/* Stop Experiment Button */}
-          <button className="stop-experiment-button" onClick={handleStopExperiment}>
-            Stop Experiment
-          </button>
+          <DynamicView fields={fields} />
         </div>
 
-        {/* Buttons */}
+        {/* Buttons Container */}
         <div className="buttons-container">
           {/* Questionnaire Overview Button */}
           <button
-            className="overview-button questionnaire-overview-button"
+            className="view-questionnaires-button"
             onClick={handleQuestionnaireOverviewClick}
           >
-            <div className="button-top">
-              <span className="button-text">Questionnaires</span>
-              <img
-                src="/assets/questionnaireSVG.svg"
-                alt="Questionnaire Icon"
-                className="button-icon"
-              />
-            </div>
-            <div className="button-content">
-              <p>Number of Questionnaires: {experiment.numberOfQuestionnaires || 0}</p>
-              <p>Responses: {experiment.questionnaireActivity || 0}</p>
-            </div>
+            <span className="view-questionnaires-button-text">View Questionnaires</span>
+            <img
+              src="/assets/questionnaireSVG.svg"
+              alt="Questionnaire Icon"
+              className="view-questionnaires-button-icon"
+            />
           </button>
 
-          {/* Message Overview Button */}
+          {/* View Messages Button */}
           <button
-            className="overview-button message-overview-button"
+            className="view-messages-button"
             onClick={handleMessageOverviewClick}
           >
-            <div className="button-top">
-              <span className="button-text">Messages</span>
-              <img
-                src="/assets/messageSVG.svg"
-                alt="Message Icon"
-                className="button-icon"
-              />
-            </div>
-            <div className="button-content">
-              <p>Number of Messages: {experiment.numberOfMessages || 0}</p>
-              <p>Sent: {experiment.messageActivity || 0}</p>
-            </div>
+            <span className="view-messages-button-text">View Messages</span>
+            <img
+              src="/assets/messageSVG.svg"
+              alt="Message Icon"
+              className="view-messages-button-icon"
+            />
+          </button>
+
+          {/* Stop Experiment Button */}
+          <button
+            className="stop-experiment-button"
+            onClick={handleStopExperiment}
+          >
+            <span className="stop-button-text">Stop Experiment</span>
           </button>
         </div>
       </div>
     </>
   );
-};
+}
 
 export default Experiment;

src/pages/ExperimentCreation.tsx

@@ -13,9 +13,8 @@ const ExperimentCreation: React.FC = () => {
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState('');
   const [selectedLivingLabID, setSelectedLivingLabID] = useState('');
-  const [selectedLivingLabName, setSelectedLivingLabName] = useState('All');
+  const [selectedLivingLabName, setSelectedLivingLabName] = useState('None');
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [dateError, setDateError] = useState('');
   // State variable for living labs
   const [livingLabs, setLivingLabs] = useState<LivingLab[]>([]);
   const [loadingLabs, setLoadingLabs] = useState(true);
@@ -223,12 +222,12 @@ const ExperimentCreation: React.FC = () => {
                           <div
                             className="experiment-creation-dropdown-item"
                             onClick={() => {
-                              setSelectedLivingLabID(''); // Empty string represents 'All'
-                              setSelectedLivingLabName('All');
+                              setSelectedLivingLabID(''); // Empty string represents 'None'
+                              setSelectedLivingLabName('None');
                               setIsDropdownOpen(false);
                             }}
                           >
-                            All
+                            None
                           </div>
                           {/* LivingLab Options */}
                           {livingLabs.map((lab) => (