RecommendationComponent.js

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const RecommendationsPage = () => {
  const [recommendations, setRecommendations] = useState([])

  useEffect(() => {
    const fetchRecommendations = async () => {
      const token = localStorage.getItem('token')
      console.log('Token:', token)
      if (!token) {
        console.error('No token available.')
        return
      }

      try {
        const response = await axios.get(
          'http://localhost:8000/api/networkscanner/recommendations/',
          {
            headers: {
              Authorization: `Bearer ${token}`,
            },
          },
        )
        setRecommendations(response.data)
      } catch (error) {
        console.error('Error fetching recommendations:', error)
        // Handle different errors appropriately here without redirecting
        if (error.response) {
          console.error('Error status:', error.response.status) // Log specific error status
        }
      }
    }

    fetchRecommendations()
  }, [])

  return (
    <div>
      <h2>Network Security Recommendations</h2>
      <table className="table table-striped table-responsive mt-3">
        <thead>
          <tr>
            <th>IP Address</th>
            <th>Port</th>
            <th>Service Name</th>
            <th>Recommendation</th>
          </tr>
        </thead>
        <tbody>
          {recommendations.map((rec) => (
            <tr key={rec.id}>
              <td>{rec.ip_address}</td>
              <td>{rec.port}</td>
              <td>{rec.service_name}</td>
              <td>{rec.recommendation_text}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default RecommendationsPage