policy.jsx

import React, { Component } from 'react';
import './Layout.css';
import './pages.css';
import Tabs from './Tabs';
import Layout from './Layout';
import { connect } from 'react-redux';
import { setData } from '../actions/schemeActions';
class Policy extends Component {
    constructor(props) {
      super(props);
      this.state = {
        selectedOption: '',

      };
    }

    // Event handler to handle select change
    handleSelectChange = (event) => {
      this.setState({ selectedOption: event.target.value });
    };
    componentDidMount() {
      const accessToken = localStorage.getItem('accessToken');
      console.log(accessToken)

          fetch('http://192.0.1.23:5000/scheme?id=8265', {
            headers: {
              Authorization: `${accessToken}`,

            },
          })
            .then((response) => response.json())
            .then((data) => {
              this.props.setData(data);
              console.log(data)
            })
            .catch((error) => {
              console.error('Error fetching data from protected API:', error);
            });
    }

    render() {
      const { data } = this.props;

      const tabNames = [
        'Details',
        'Rules',
        'Providers',
        'Insurers',
        'Inclusions and Exclusions',
        'Benefits',
        'Family Structure',
        'Self Fund Payment',
        'SLAs'
      ];

      return (
       <>
       <Layout >
       <div className='main-header'>
        <div className='policy-section'>

           <select id="mySelect">
              <option value="option1">Policy 1</option>
              <option value="option2">Policy 2</option>
              <option value="option3">Policy 3</option>
              <option value="option4">Policy 4</option>
           </select>
        </div>

        <div className='scheme-selection'>
          <select id="mySelect">
              <option value="option1">Scheme 1</option>
              <option value="option2">Scheme 2</option>
              <option value="option3">Scheme 3</option>
              <option value="option4">Scheme 4</option>
           </select>
        </div>
         {/* <Dropdown />   */}


        <div className='scheme-section'>
            <div className='scheme-name'>
            <span>Scheme Name</span>
            </div>

            <div className='scheme-company-duration'>
              {/* this data.startDate works */}
              <span>{data.name}</span>
            </div>
          </div>
        </div>


        <div className='main-content'>
          <Tabs tabNames={tabNames} data={this.props.data}/>
        </div>
       </Layout>
       </>
      );
    }
  }
  const mapStateToProps = (state) => ({
    data: state.scheme.data,
  });

  const mapDispatchToProps = {
    setData,
  };

  export default connect(mapStateToProps, mapDispatchToProps)(Policy);