bugs fixes

successfully pulls user chats now.

backend/chat/authentication.py

@@ -0,0 +1,47 @@
+from django.contrib.auth.models import User
+from django.conf import settings
+from rest_framework import authentication, exceptions
+import jwt
+
+class JWTAuthentication(authentication.BaseAuthentication):
+    def authenticate(self, request):
+        auth_header = authentication.get_authorization_header(request).decode('utf-8')
+        if not auth_header or not auth_header.startswith('Bearer '):
+            print("No JWT token found in request headers")
+            return None
+
+        token = auth_header.split(' ')[1]
+        try:
+            payload = jwt.decode(token, settings.SUPABASE_SECRET_KEY, algorithms=['HS256'], audience='authenticated')
+            user_id = payload['sub']
+            email = payload.get('email', '')
+            first_name = payload.get('user_metadata', {}).get('first_name', '')
+            last_name = payload.get('user_metadata', {}).get('last_name', '')
+
+            # Check if the user exists and update/create accordingly
+            user, created = User.objects.get_or_create(username=user_id, defaults={
+                'first_name': first_name,
+                'last_name': last_name,
+                'email': email
+            })
+
+            # If the user was not created (i.e., it already exists), update its details
+            if not created:
+                user.first_name = first_name
+                user.last_name = last_name
+                user.email = email
+                user.save()
+
+            if created:
+                print("\nNew user authenticated and created")
+            else:
+                print("User authenticated")
+
+            return (user, token)
+
+        except jwt.ExpiredSignatureError:
+            raise exceptions.AuthenticationFailed('Token expired, login again')
+        except jwt.InvalidTokenError:
+            raise exceptions.AuthenticationFailed('Invalid token')
+        except Exception as e:
+            raise exceptions.AuthenticationFailed(f'Unexpected error during authentication: {e}')

backend/chat/db_service.py

@@ -8,18 +8,16 @@ def get_supabase_client() -> Client:
 
 def check_user_type(user_id):
     client = get_supabase_client()
+    # Attempt to fetch the user from the 'mhp' table
     response = client.table('mhp').select('*').eq('mhp_id', user_id).execute()
+    print(response)
 
-    if response.get('error') is not None:
-        print("An error occurred checking the user type.", response['error'])
-        return None
-
-    if not response.data:
-        print("User was not found in mhp table.")
-        #should check users table in the future
-        return "employee"
+    if response.data:
+        print("User found as a MHP.")
+        return "MHP"
     else:
-        return "mhp"
+        print("User not found as MHP, marked as employee.")
+        return "employee"
 
 def fetch_chats(user_id):
     client = get_supabase_client()

web/src/App.js

@@ -1,6 +1,7 @@
-import React, { useState,useEffect } from 'react'
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { AuthProvider } from './lib/helper/AuthContext';
 import { SignUp, Login, Homepage} from './pages'
-import {Routes, Route} from 'react-router-dom'
 import Resources from './pages/Resources'
 import Community from './pages/Community'
 import Chat from './pages/Chat'
@@ -9,43 +10,46 @@ import About from './pages/About'
 import Exercise from './pages/Exercise'
 import Diet from './pages/Diet'
 import MentalHealth from './pages/MentalHealth'
-import ChatPage from './pages/Messenger'
+import Messenger from './pages/Messenger';
 
 const App = () => {
-
-    const [token, setToken] = useState(false)
-
-    if(token){
-        sessionStorage.setItem('token',JSON.stringify(token))
-    }
+    const [token, setToken] = useState(null);
 
     useEffect(() => {
-        if(sessionStorage.getItem('token')){
-            let data = JSON.parse(sessionStorage.getItem('token'))
-            setToken(data)
+        const storedToken = sessionStorage.getItem('token');
+        if (storedToken) {
+            setToken(JSON.parse(storedToken));
+            console.log("token found")
         }
-    }, [])
-
+    }, []);
 
-  return (
-    <div className='app'>
-            <Routes>
-            <Route path={'/signup'} element={<SignUp />}/>
-                <Route path={'/'} element={<Login setToken={setToken}/>} />
-                {token?<Route path={'/homepage'} element={<Homepage token={token}/>}/>:""}
-                <Route exact path='/Resources' element={<Resources />} />
-                <Route exact path='/Tracking' element={<Tracking />} />
-                <Route exact path='/Community' element={<Community />} />
-                <Route exact path='/Chat' element={<Chat />} />
-                <Route exact path='/About' element={<About />} />
-                <Route exact path='/Exercise' element={<Exercise />} />
-                <Route exact path='/Diet' element={<Diet />} />
-                <Route exact path='/MentalHealth' element={<MentalHealth />} />
-                <Route exact path='/Messenger' element={<ChatPage />} />
-            </Routes>
+    useEffect(() => {
+        if (token) {
+            sessionStorage.setItem('token', JSON.stringify(token));
+            console.log("token set")
+        }
+    }, [token]);
 
-    </div>
-  )
+    return (
+        <div className='app'>
+            <AuthProvider>
+                    <Routes>
+                        <Route path='/signup' element={<SignUp />} />
+                        <Route path='/' element={<Login />} />
+                        <Route path='/homepage' element={<Homepage />} />
+                        <Route path='/Resources' element={<Resources />} />
+                        <Route path='/Tracking' element={<Tracking />} />
+                        <Route path='/Community' element={<Community />} />
+                        <Route path='/Chat' element={<Chat />} />
+                        <Route path='/About' element={<About />} />
+                        <Route path='/Exercise' element={<Exercise />} />
+                        <Route path='/Diet' element={<Diet />} />
+                        <Route path='/MentalHealth' element={<MentalHealth />} />
+                        <Route path='/Messenger' element={<Messenger />} />
+                    </Routes>
+            </AuthProvider>
+        </div>
+    );
 }
 
-export default App
+export default App;

web/src/lib/helper/AuthContext.js

@@ -0,0 +1,26 @@
+import React, { createContext, useContext, useState, useEffect } from "react";
+
+const AuthContext = createContext();
+
+export function AuthProvider({ children }) {
+    const [token, setToken] = useState(() => {
+        const storedToken = sessionStorage.getItem('token');
+        return storedToken ? JSON.parse(storedToken) : null;
+    });
+
+    useEffect(() => {
+        if (token) {
+            sessionStorage.setItem('token', JSON.stringify(token));
+        }
+    }, [token]);
+
+    return (
+        <AuthContext.Provider value={{ token, setToken }}>
+            {children}
+        </AuthContext.Provider>
+    );
+}
+
+export function useAuth() {
+    return useContext(AuthContext);
+}

web/src/pages/Homepage.js

@@ -1,11 +1,13 @@
 import React, {useState, useEffect, useCallback} from "react";
+import { useAuth } from "../lib/helper/AuthContext";
 import { Link } from 'react-router-dom';
 //import { supabase } from '../lib/helper/supabaseClient';
 import '../css/Homepage.css'
 import Line from "../assets/images/Line.png"
 import Navbar from "../components/Navbar";
 
-function Homepage({ token }) {  
+function Homepage() {  
+  const { token } = useAuth();
   const [tasks, setTasks] = useState([]);
   const [isModalOpen, setIsModalOpen] = useState(false); // For modal visibility
   const [newTask, setNewTask] = useState({ title: '', description: '' });

web/src/pages/Login.js

@@ -1,12 +1,14 @@
 import React, {useState, useEffect, useRef} from "react";
+import { useAuth } from "../lib/helper/AuthContext";
 import { supabase } from "../lib/helper/supabaseClient";
 import { useNavigate } from "react-router-dom";
 import HALO from "vanta/dist/vanta.halo.min.js";
 
 import '../css/Login.css'
 
-const Login = ({setToken}) => {
+const Login = () => {
     let navigate = useNavigate()
+    const { setToken } = useAuth();
 
     const [formData,setFormData] = useState({email:'',password:''})
     const vantaRef = useRef(null);

web/src/pages/Messenger.js

@@ -1,31 +1,53 @@
 import React, { useState, useEffect } from 'react';
+import { useAuth } from '../lib/helper/AuthContext';
 import { Link } from 'react-router-dom';
 
-function ChatPage() {
-  const [messages, setMessages] = useState([]); // State to store messages
+function Messenger() {
+  const { token } = useAuth();
+  const [chats, setChats] = useState([]);
 
+
   useEffect(() => {
-    // Fetch existing chats from Supabase and setMessages
-  }, []);
+    const fetchChats = async () => {
+      if (!token || !token.session.access_token) {
+        console.error('Token not available');
+        return;
+      }
+      const response = await fetch('/chat/getChats/', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token.session.access_token}`,  
+        },
+      });
+      const data = await response.json();
+      if (data && data.chats) {
+        setChats(data.chats);
+      } else {
+        // Handle any errors or empty responses
+        console.error('Failed to fetch chats or no chats available');
+      }
+    };
 
-  const sendMessage = (content) => {
-    // Function to send a message. Implement sending message to Supabase here.
-  };
+    fetchChats();
+  }, [token]);
 
   return (
     <div>
-      <h1>Chat with a Mental Health Professional</h1>
+      <h1>Chats with Mental Health Professionals</h1>
       <div>
-        {/* Display messages here */}
-        {messages.map((message) => (
-          <div key={message.message_id}>{message.content}</div>
+        {chats.map((chat, index) => (
+          <div key={index} className='chat-container'>
+            <p>Chat with: {chat.mhp_id}</p>
+            <p>Chat ID: {chat.chat_id}</p>
+            <p>Created At: {chat.created_at}</p>
+            {/* You can add more details or interaction options like opening the chat */}
+          </div>
         ))}
       </div>
-      <input type="text" placeholder="Type a message..." />
-      <button onClick={() => sendMessage("Your message content")}>Send</button>
-      <Link to="/Homepage"> Homepage </Link>
+      <Link to="/">Back to Homepage</Link>
     </div>
   );
 }
 
-export default ChatPage;
+export default Messenger;