Feature/UI Deployment and Request Structure

.github/workflows/cd_kubernetes.yml

@@ -22,6 +22,11 @@ jobs:
     - name: Checkout
       uses: actions/checkout@v4
 
+    # Get current commit hash
+    - name: Get Tag
+      id: tag
+      run: echo "SHORT_SHA=sha-$(git rev-parse --short HEAD)" >> $GITHUB_ENV
+
     # Use Azure's kubectl installation action
     - name: Install Kubectl
       uses: azure/setup-kubectl@v4
@@ -43,4 +48,9 @@ jobs:
     # Run helm upgrade to upgrade deployment
     - name: Upgrade Deployment with Helm
       run: |
-        helm upgrade --install meetatmensa ./deployment/k8s -n devoops
+        helm upgrade --install meetatmensa ./deployment/k8s -n devoops \
+          --set client.image.tag=${SHORT_SHA} \
+          --set gateway.image.tag=${SHORT_SHA} \
+          --set genai.image.tag=${SHORT_SHA} \
+          --set matching.image.tag=${SHORT_SHA} \
+          --set user.image.tag=${SHORT_SHA} \

.github/workflows/terraform-deploy.yml

@@ -21,7 +21,7 @@ jobs:
     runs-on: ubuntu-latest
     environment:
       name: AWS
-      url: "https://client.${{ steps.terraform.outputs.public_ip }}.nip.io"
+      url: "https://client.${{ steps.terraform.outputs.public_ip }}.sslip.io"
 
     steps:
       - name: Checkout Code
@@ -71,4 +71,4 @@ jobs:
           echo "=== Testing SSH Connection ==="
           ssh -i vockey.pem -o StrictHostKeyChecking=no ubuntu@${{ steps.terraform.outputs.public_ip }} "echo 'SSH connection successful'"
           echo "=== Running Ansible Playbook ==="
-          ANSIBLE_HOST_KEY_CHECKING=False ANSIBLE_DEBUG=1 ansible-playbook -i inventory.yml playbooks/deploy.yml -vvv --extra-vars "ansible_host=${{ steps.terraform.outputs.public_ip }}" --start-at-task="Test connection"
+          ANSIBLE_HOST_KEY_CHECKING=False ANSIBLE_DEBUG=1 ansible-playbook -i inventory.yml playbooks/deploy.yml -vvv --extra-vars "ansible_host=${{ steps.terraform.outputs.public_ip }} EC2_PUBLIC_IP=${{ steps.terraform.outputs.public_ip }}" --start-at-task="Test connection"

client/Dockerfile

@@ -10,15 +10,22 @@ RUN npm install
 # Copy source code
 COPY . .
 
-# Hardcode API URL for Docker deployment
-ENV VITE_API_BASE_URL=http://localhost:8080
+# Remove build-time VITE_API_BASE_URL and VITE_USE_MOCK_DATA
+# ARG VITE_API_BASE_URL=https://api.meetatmensa.com
+# ARG VITE_USE_MOCK_DATA=false
+# ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
+# ENV VITE_USE_MOCK_DATA=$VITE_USE_MOCK_DATA
 
 RUN npm run build
 
 FROM nginx:alpine
 
 COPY --from=build /app/dist /usr/share/nginx/html
+COPY public/config.template.js /usr/share/nginx/html/config.template.js
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
 
 EXPOSE 80
 
+ENTRYPOINT ["/entrypoint.sh"]
 CMD ["nginx", "-g", "daemon off;"] 

client/README.md

@@ -25,7 +25,9 @@ Then edit `.env.local` with your local settings:
 
 ```
 VITE_API_BASE_URL=http://localhost:8080
+VITE_USE_MOCK_DATA=false
 ```
+If mock data usage is set to true, no requests will be sent to the Gateway. 
 
 ### Docker Compose Deployment
 
@@ -48,6 +50,41 @@ env:
   VITE_API_BASE_URL: 'http://gateway-service:80'
 ```
 
+### AWS Deployment
+
+Environment variables are configured in `deployment/compose.aws.yml`
+
+```yaml
+client:
+    image: ghcr.io/aet-devops25/team-devoops/client:latest
+    environment:
+      - API_BASE_URL=https://api.${EC2_PUBLIC_IP}.nip.io
+```
+
+---
+
+## Local Deployment with Docker
+
+```
+# Build and tag the Docker image
+docker build -t ghcr.io/aet-devops25/team-devoops/client .
+
+# Push the image to GHCR (latest tag by default, access needed)
+docker push ghcr.io/aet-devops25/team-devoops/client
+
+# Run the Docker container on port 80
+docker run --name client-service -p 80:80 ghcr.io/aet-devops25/team-devoops/client
+
+# List running containers (if needed)
+docker ps
+
+# Stop the container
+docker stop client-service
+
+# Remove the container
+docker rm client-service
+```
+
 ## Build
 
 ```bash

client/entrypoint.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+set -e
+API_BASE_URL=${API_BASE_URL:-https://api.meetatmensa.com/api/v2}
+sed "s|__API_BASE_URL__|$API_BASE_URL|g" /usr/share/nginx/html/config.template.js > /usr/share/nginx/html/config.js
+exec "$@" 

client/env.example

@@ -1,6 +1,3 @@
 # API Configuration for local development
-VITE_API_BASE_URL=http://localhost:8082
-
-# Auth0 Configuration (if needed)
-# VITE_AUTH0_DOMAIN=your-domain.auth0.com
-# VITE_AUTH0_CLIENT_ID=your-client-id 
+   VITE_API_BASE_URL=http://localhost:8080
+   VITE_USE_MOCK_DATA=false

client/index.html

@@ -8,6 +8,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <script src="/config.js"></script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

client/public/config.template.js

@@ -0,0 +1,3 @@
+window.RUNTIME_CONFIG = {
+  API_BASE_URL: "__API_BASE_URL__"
+}; 

client/src/App.tsx

@@ -7,6 +7,7 @@ import MatchRequests from './components/MatchRequests';
 import Matches from './components/Matches';
 import { useAuth0 } from '@auth0/auth0-react';
 import Profile from './components/Profile';
+import { UserIDProvider } from './contexts/UserIDContext';
 
 interface AppProps {
   toggleColorMode: () => void;
@@ -40,79 +41,81 @@ const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
 
 const App = ({ toggleColorMode, mode }: AppProps) => {
   return (
-    <Router>
-      <Routes>
-        {/* Public routes */}
-        <Route path="/login" element={<Login />} />
+    <UserIDProvider>
+      <Router>
+        <Routes>
+          {/* Public routes */}
+          <Route path="/login" element={<Login />} />
 
-        {/* Protected routes - all require authentication */}
-        <Route
-          path="/"
-          element={
-            <ProtectedRoute>
-              <Layout toggleColorMode={toggleColorMode} mode={mode}>
-                <Dashboard />
-              </Layout>
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/dashboard"
-          element={
-            <ProtectedRoute>
-              <Layout toggleColorMode={toggleColorMode} mode={mode}>
-                <Dashboard />
-              </Layout>
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/preferences"
-          element={
-            <ProtectedRoute>
-              <Layout toggleColorMode={toggleColorMode} mode={mode}>
-                <MatchRequests />
-              </Layout>
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/matches"
-          element={
-            <ProtectedRoute>
-              <Layout toggleColorMode={toggleColorMode} mode={mode}>
-                <Matches />
-              </Layout>
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/profile"
-          element={
-            <ProtectedRoute>
-              <Layout toggleColorMode={toggleColorMode} mode={mode}>
-                <Profile />
-              </Layout>
-            </ProtectedRoute>
-          }
-        />
+          {/* Protected routes - all require authentication */}
+          <Route
+            path="/"
+            element={
+              <ProtectedRoute>
+                <Layout toggleColorMode={toggleColorMode} mode={mode}>
+                  <Dashboard />
+                </Layout>
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/dashboard"
+            element={
+              <ProtectedRoute>
+                <Layout toggleColorMode={toggleColorMode} mode={mode}>
+                  <Dashboard />
+                </Layout>
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/matchrequests"
+            element={
+              <ProtectedRoute>
+                <Layout toggleColorMode={toggleColorMode} mode={mode}>
+                  <MatchRequests />
+                </Layout>
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/matches"
+            element={
+              <ProtectedRoute>
+                <Layout toggleColorMode={toggleColorMode} mode={mode}>
+                  <Matches />
+                </Layout>
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/profile"
+            element={
+              <ProtectedRoute>
+                <Layout toggleColorMode={toggleColorMode} mode={mode}>
+                  <Profile />
+                </Layout>
+              </ProtectedRoute>
+            }
+          />
 
-        {/* Account settings route */}
-        <Route
-          path="/account"
-          element={
-            <ProtectedRoute>
-              <Layout toggleColorMode={toggleColorMode} mode={mode}>
-                <div>Account Settings (Coming Soon)</div>
-              </Layout>
-            </ProtectedRoute>
-          }
-        />
+          {/* Account settings route */}
+          <Route
+            path="/account"
+            element={
+              <ProtectedRoute>
+                <Layout toggleColorMode={toggleColorMode} mode={mode}>
+                  <div>Account Settings (Coming Soon)</div>
+                </Layout>
+              </ProtectedRoute>
+            }
+          />
 
-        {/* Catch all route */}
-        <Route path="*" element={<Navigate to="/" replace />} />
-      </Routes>
-    </Router>
+          {/* Catch all route */}
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </Router>
+    </UserIDProvider>
   );
 };
 

client/src/__tests__/utils/mocks.ts

@@ -4,13 +4,13 @@ export const mockMatchRequest = {
   userID: 'user1',
   groupID: 'group1',
   date: '2024-01-15',
-  location: 'garching',
+  location: 'GARCHING',
   preferences: {
     degreePref: true,
     agePref: false,
     genderPref: true,
   },
-  timeslots: [9, 10, 11],
+  timeslot: [9, 10, 11],
   status: 'PENDING' as const,
 };
 
@@ -25,7 +25,7 @@ export const mockMatchRequests = [
   {
     ...mockMatchRequest,
     requestID: '124',
-    location: 'arcisstr',
+    location: 'ARCISSTR',
     status: 'MATCHED' as const,
   },
 ];

client/src/components/CreateMatchRequestDialog.tsx

@@ -20,6 +20,7 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { de as deLocale } from 'date-fns/locale';
 import { isSameDay, isBefore } from 'date-fns';
+import { useUserID } from '../contexts/UserIDContext';
 
 // Location options
 const LOCATION_OPTIONS = [
@@ -61,6 +62,7 @@ const CreateMatchRequestDialog: React.FC<CreateMatchRequestDialogProps> = ({
   onClose,
   onSubmit,
 }) => {
+  const userID = useUserID();
   const [selectedLocation, setSelectedLocation] = useState('');
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
   const [selectedTimeslots, setSelectedTimeslots] = useState<number[]>([]);
@@ -70,6 +72,7 @@ const CreateMatchRequestDialog: React.FC<CreateMatchRequestDialogProps> = ({
     genderPref: false,
   });
 
+
   const handleTimeslotToggle = (timeslot: number) => {
     setSelectedTimeslots((prev) =>
       prev.includes(timeslot)
@@ -124,13 +127,14 @@ const CreateMatchRequestDialog: React.FC<CreateMatchRequestDialogProps> = ({
   };
 
   const handleSubmit = () => {
-    if (!selectedLocation || !selectedDate || !areTimeslotsConsecutive(selectedTimeslots)) {
+    if (!selectedLocation || !selectedDate || !areTimeslotsConsecutive(selectedTimeslots) || !userID) {
       return;
     }
 
     const formattedDate = selectedDate.toISOString().split('T')[0]; // YYYY-MM-DD format
 
     onSubmit({
+      userID: userID,
       date: formattedDate,
       timeslot: selectedTimeslots,
       location: selectedLocation.toUpperCase(),