feat: missing env vars

Signed-off-by: Azanul <azanulhaque@gmail.com>

docker-compose.yaml

@@ -10,6 +10,11 @@ services:
         condition: service_healthy
       user-service:
         condition: service_started
+    environment:
+      USER_SERVICE_URL: user-service
+      NOTIFICATION_SERVICE_URL: notification-service
+      AUTH_SERVICE_ADDR: user-service
+      KAFKA_BROKERS: kafka:9092
 
   user-service:
     build: ./user
@@ -28,6 +33,7 @@ services:
     environment:
       TWILIO_ACCOUNT_SID: ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
       TWILIO_AUTH_TOKEN: your_auth_token
+      KAFKA_BROKERS: kafka:9092
 
   zookeeper:
     image: confluentinc/cp-zookeeper:latest

frontend/src/components/WuphfForm.tsx

@@ -1,15 +1,28 @@
 import React, { useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { sendWuphf } from '../features/wuphf/wuphfSlice';
 
 const WuphfForm: React.FC = () => {
   const [message, setMessage] = useState('');
-  const dispatch = useDispatch();
+  const [status, setStatus] = useState('');
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    dispatch(sendWuphf(message));
-    setMessage('');
+    try {
+      const response = await fetch(`http://${process.env.REACT_APP_BASE_URL}/notification`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ message }),
+      });
+      if (response.ok) {
+        setStatus('Message sent successfully');
+        setMessage('');
+      } else {
+        setStatus('Failed to send message');
+      }
+    } catch (error) {
+      setStatus('Error sending message');
+    }
   };
 
   return (
@@ -24,6 +37,7 @@ const WuphfForm: React.FC = () => {
       <button type="submit" className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
         Send
       </button>
+      {status && <p>{status}</p>}
     </form>
   );
 };